网页设计与制作教案

2.6 表单的应用

表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。

2.6.1 创建表单

2.6.2 用定义用户交互 （1）单行文本输入区 （2）密码输入区 （3）单选框 （4）复选框 （5）隐藏区域 （6）按钮

2.6.3 定义下拉式菜单

你选修的课程：

2.6.4 定义多行文字输入区域 请输入你的详细介绍：

<p>

2.7 框架窗口

框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML文档，最后形成充满整个窗口的网页。 2.7.1 框架的定义 2.7.2 框架属性设置

FrameSpacing=\“

BorderColor=\“ >

2.7.3 子窗口属性设置

- 9 -

2.7.4 常见的框架窗口划分方法 （1）标题和正文，分为上下两部分 （2）层次结构，分为上中下三部分

（3）目录和标题，分为左上、左下、右三部分

（4）标题、目录和正文，分为上、左下、右下三部分 （5）嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页

很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。

2.7.6 内部框架 【课后小结】

表格在网页设计中应用广泛，熟练掌握表格的基本标志及配合使用的属性的意义，是灵活运用表格的基础。表格的嵌套是表格制作中的一个难点，关键是要抽象出嵌套表格对应的简单表格模型，再将模型中单元格的位置使用内嵌表格代替。 框架结构是布局网页的一种常用方式，要掌握框架及其嵌套的实现，以及在框架中设置超级链接时目标框架位置的设置。

表单是网页实现交互处理的工具,熟练掌握表单中元素的标志和属性，是设计表单网页关键。

第五讲 HTML标志综合运用案例

【教学内容】

综合运用所学过的HTML标志书写网页。 【教学目的】

使学生能够书写简单的HTML网页。 【教学重点】

使用所学的HTML标志书写网页。 【教学难点】

HTML的综合运用。 【教学方式】

案例分析式、讨论式、练习式。 【教学参考】

1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。 2、《WEB网站设计》Joel Sklar著 高等教育出版社。 3、《HTML网页制作教程》材义语编著 铁道出版社。 【新课内容】

1、用记事本书写HTML网页。

- 10 -

2、利用案例进行HTML网页的综合讲解。

3、要求学生按规定书写一个完整的HTNL网页。 【课后小结】

HTML是目前制作网页时必须掌握的一种语言，学好HTML语言是为以后对《网页设计》这门课程更深入的学习打下扎实的基础。

第六讲 Dreamweaver中简单WEB站点建立与管理

【教学内容】

讲解Dreamweaver的工作界面和基本操作。 【教学目的】

使学生掌握网页制作工具Dreamweaver的基本操作方式。 【教学重点】

网页制作工具Dreamweaver的界面和基本基本操作。 【教学难点】

掌握一个新的开发工具。 【教学方式】

讲授式、项目模块式、演示教学。 【教学参考】

1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。 2、《WEB网站设计》Joel Sklar著 高等教育出版社。 3、《Dreamweaver网页设计案例教程》白煜编著 清华大学出版社。 4、《Dreamweaver MX 2004完美网页设计与制作》姜楠编著 中国青年出版社。 【新课内容】

3.1 Dreamweaver概述

3.1.1 Dreamweaver的工作界面 3.1.2 Dreamweaver4的基本操作 1、直接建立新网页 “文件”→“新建”(Ctrl+N) 2、打开已有的网页 “文件”→“打开”

3、保存编辑过的网页

“文件”→“保存”，直接保存 “文件”→“另存为”,换名保存 4、预览正在编辑的网页 “文件”→“在预览器中预览” 5、设置网页属性 “修改”→“页面设置” （1）标题 （2）背景图像

- 11 -

（3）背景色 （4）文字颜色 （5）超级链接颜色 （6）左边界上边界 （7）文件编码方式 （8）网页蓝图 6、导入Word文件

“文件”→“导入” →“导入Word HTML” 3.1.3 用Dreamweaver创建和管理站点 1、创建本地站点 “站点”

→“新建站点” 2、管理站点 “站点”

→“定义站点”

3、上传和下载文件 【课后小结】

Dreamweaver是一款由Macromedia公司开发的专业HTML编辑器，用于对WEB站点、WEB页面和WEB应用程序进行设计、编码和开发。无论是刚接触网页设计的初学者还是专业的WEB开发人员，Dreamweaver都在前卫的设计理念和强大的软件功能方面给予了充分可靠的支持。因此学好Dreamweaver对以后的网页设计有很大的帮助。

第七讲 Dreamweaver中静态网页设计

【教学内容】

讲解利用Dreamweaver进行静态页面的制作。 【教学目的】

使学生掌握利用Dreamweaver对页面进行文本、图象、超级链接、表格以及框架等的编辑。 【教学重点】

通过对工具软件Dreamweaver的操作，制作出完整的静态页面。 【教学难点】

了解静态网页的含义 【教学方式】

讲授式、项目模块式、演示教学。 【教学参考】

1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。 2、《WEB网站设计》Joel Sklar著 高等教育出版社。 3、《Dreamweaver网页设计案例教程》白煜编著 清华大学出版社。 4、《Dreamweaver MX 2004完美网页设计与制作》姜楠编著 中国青年出版社。 【新课内容】

- 12 -