《网页设计与制作》教学大纲

《网页设计与制作》教学大纲

课程编号：14411400 课程总学时：48 周学时数：3 学分：3

课程类型：专业必修课 开课（系）院：教育学院 执笔人：朱 玲 审核人：刘 梅

一、课程简介

《网页设计与制作》是一门综合性、应用性很强的课程，是教育技术学专业的一门专业必修课程。通过学习本课程，能利用Dreamweaver 8来开发出有实用价值的网站来。熟练掌握Dreamweaver 8的基本界面环境和HTML语法，了解当前常用数据库的基础知识，能利用数据库来为网站服务。

本课程以《Dreamweaver 8中文版网页制作基础》作为教材，该教材采用项目教学法。项目教学法”是通过实施一个完整的项目而进行的教学活动，其目的是在课堂教学中把理论与实践教学有机地结合起来，充分发掘学生的创造潜能，提高学生解决实际问题的综合能力。这也充分体现了我校的培养应用型人才的路线。

二、教学目的与要求

1、教学目的

本课程开设的主要目的，是为了适应web技术的飞速发展，为学生今后在学习、工作中建立网站及网页制作打下基础。通过本课程的学习，使学生了解如何规划并建立站点，掌握制作网页的基础知识，能熟练利用Dreamweaver 8提供的强大的功能制作出精美的网站。

2、教学要求

在本课程的学习中，要求学生能够熟练使用Dreamweaver 8操作环境，掌握HTML的语法规则，并能够利用Dreamweaver 8的强大功能制做出精美的网页，同时能独立创建并管理网站。

三、教学内容及学时安排

第一章Dreamweaver 8概论

[教学目的与要求]

1.认识Dreamweaver 8

2.了解Dreamweaver 8的用途及新增功能 3.熟悉Dreamweaver 8的工作界面 4.熟悉Dreamweaver 8的一些简单的设置 [重点与难点]

1. Dreamweaver 8的工作界面 2.自定义工作环境

3.选择视图方式 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、什么是Dreamweaver 二、新增功能

三、Dreamweaver 8的工作界面 （一）选择工作界面 （二）界面组成 四、自定义工作环境

（一）显示/隐藏面板和工具栏 （二）更改“插入”工具栏的外观 （三）自由组合面板 （四）调整文档窗口大小 五、选择视图方式 （一）代码视图 （二）设计视图

（三）代码和设计视图 [实验实践教学环节]

实验项目：熟悉Dreamweaver8操作环境 实验课时：2学时 [课堂训练、作业思考题]

1.如何使一个控制面板成为一个独立的面板？ 2.如何将文档窗口调整为640×480像素大小？

[教学目的与要求]

1.了解网页的设计与布局原则 2.明确网站的策划与创建原则 3.知道网站的开发流程 [重点与难点]

1.网页的设计与布局原则 2.网站的策划与创建原则 3.网站的开发流程

第二章 网页与网站的基本知识

[教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]

一、网页设计和布局原则

（一）网页主题网页主题时应该遵循以下原则： （二）网页命名和标志 （三）网页的色彩 （四）网页的文字 （五）网页中的表格 （六）网页版面和布局 二、策划与创建原则

(一)什么是网站 (二)网站的目标定位 (三)网站的风格 (四)网站的CI形象 (五)网站的栏目和板块 (六)网站的目录结构

三、网站的开发流程： [实验实践教学环节]

无

[课堂训练、作业思考题]

1．简述网站开发需要经过的几个主要阶段。2．简述制作网页需要注意的问题。

[教学目的与要求]

1.掌握HTML语言及其基本语法 2.如何制定及清理多余的HTML代码 3.掌握在各种环境中编辑HTML代码的方法 [重点与难点] 1．HTML的基本语法 2．使用代码检查器 3．设置HTML代码参数

第三章 HTML语言控制

4．清理多余的HTML代码 5．编辑HTML代码 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容] 一、什么是HTML 二、HTML的基本语法 三、认识“代码检查器”面板 （一）“代码检查器”面板的功能 （二）3.3.2 设置“代码检查器”面板 四、设置HTML代码参数 （一）设置代码颜色 （二）设置代码格式 （三）设置代码改写参数 五、清理HTML代码 六、编辑HTML代码

（一）在代码视图中编辑HTML

（二）在设计视图中编辑HTML （三）在外部代码编辑器中编辑HTML [实验实践教学环节] 无

[课堂训练、作业思考题]

1．如何清除多余的HTML代码和多余的word代码？

第四章 设置文本和网页属性

[教学目的与要求]

1.了解文档的新建、保存和打开

2.掌握怎样输入文本、查找和替换、检查拼写、设置文本和段落 3.掌握使用水平分隔线和设置网页属性等 [重点与难点] 1. 文档的基本操作 2. 输入文本 3. 查找与替换 4. 拼写检查 5. 格式化文本

6. 使用水平分隔线 7. 设置网页属性 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容] 一、文档的基本操作

（一）启动Dreamweaver 8主工作界面 （二）新建文档 “新建文档”对话框 （三）保存新文档 （四）打开文档 二、输入文本

(一)文本换行 (二)插入特殊字符 (三)导入Word文档 (四)添加注释

三、查找与替换 “查找和替换”对话框 四、拼写检查 “检查拼写”对话框

五、格式化文本

(一)文本属性栏 (二)设置文本格式 (三)设置段落格式 六、使用水平分隔线

(一)4.6.1 添加水平分隔线 (二)4.6.2 修改属性 (三)4.6.3 设置颜色 七、设置网页属性

(一)4.7.1 使用“页面属性”对话框 (二)4.7.2 使用网页配色方案 [实验实践教学环节]

实验项目：插入网页对象（第4、5、9、12章） 实验课时：3学时 [课堂训练、作业思考题]

1．如何使启动程序不显示起始页？ 2．简述创建一个空白文档的过程。

第五章 使用网页图像

[教学目的与要求]

1.了解网页图像的基本概念

2.掌握如何插入图像、如何编辑图像 3.掌握如何创建图像映射即热点 [重点与难点]

1．网页图像的格式 2．插入图像 3．编辑图像 4．创建图像映射 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容] 一、网页图像简述

(一)位图图像 (二)矢量图像 (三)常见网页图像格式

二、插入图像

(一)插入普通图像

(二)插入鼠标经过时变化的图像 (三)插入网页背景图像 三、编辑图像

(一)5.3.1 调整图像大小 (二)5.3.2 剪掉图像的多余部分 (三)5.3.3 调整图像的亮度和对比度 (四)5.3.4 锐化图像 (五)5.3.5 图像的排列方式 (六)5.3.6 设置图像间距 (七)5.3.7 用文字代替图像 (八)5.3.8 使用图像编辑器 四、创建图像映射

(一)5.4.1 什么是图像映射图 (二)5.4.2 图像映射面板 (三)5.4.3 定义和编辑热点

(四)5.4.4 为热点建立链接 [实验实践教学环节]

实验项目：插入网页对象（第4、5、9、12章） 实验课时：2学时 [课堂训练、作业思考题]

1．如何在网页中用文字代替图像？ 2．如何为热点建立链接？

[教学目的与要求]

1.掌握表格的创建和使用、表格的编辑和修改2.掌握表格的套用样式和嵌套 3.掌握如何使用表格进行页面布局 [重点与难点]

1．创建表格 2．编辑表格

第六章 创建和使用表格

3．套用表格 4．表格的嵌套

5．使用表格进行页面布局 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容] 一、创建表格

(一)插入表格并添加内容 (二)导入表格数据文件 二、编辑表格

(一)添加/删除行列 (二)调整表格大小 (三)调整行高和列宽 (四)合并/拆分单元格 (五)设置单元格的宽度和高度

(六)设置表格的边框颜色 (七)设置表格的背景 三、套用表格样式 四、表格的嵌套

五、使用表格进行页面布局

(一)布局模式

(二)绘制布局单元格和布局表格 (三)将内容添加到布局单元格中 (四)使用间隔图像

(五)更改布局表格和布局单元格的属性[实验实践教学环节]

实验项目：网页布局（第6、7、8章）实验课时：2课时 [课堂训练、作业思考题]

1．简述合并和拆分单元格的几种方法。2．怎样在布局表格中使用间隔图像？

第七章 创建和使用框架

训练的内容主要是每一章的重点难点知识，训练的方法主要有观摩法和实践法。 （二）自学指导体系 1．自学目的与要求

这门课程要求学生不仅仅是掌握课本上的知识，课本上的知识是远远不够的，这就要求学生必须自学。自学的主要目的是扩展知识面，加深对该课程知识的认识。要求知道与网页制作有关的知识。

2．自学内容与方法

自学的内容主要是网页制作的有关知识，除了Dreamweaver 8软件的有关操作以外，还要学习Flash、Fireworks等软件的有关网页制作知识。。

自学的方法主要有资料查阅法、讨论法、网上学习法、实验练习法等。 七、考试考核

本课程的考试形式为技能考核，学生的学业成绩实行结构化成绩，由考试主卷成绩、副卷(实验)成绩和平时成绩构成，其中考

试主卷成绩占60％，副卷成绩占20％，平时成绩占20％。

2.掌握表单的创建及表单元素的插入和设置方法 3.掌握检查表单以验证表单元素正确性 [重点与难点]

1. 表单的创建

2. 插入与设置文本域和文本区域

3. 插入与设置复选框、单选按钮和单选按钮组 4. 插入与设置列表框和弹出菜单 5. 插入与设置跳转菜单 6. 插入与设置文件域 7. 插入与设置表单按钮 8. 检查表单 [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容] 一、表单与表单元素

(一)表单 (二)表单元素 二、表单

(一)创建表单 (二)设置表单属性 三、文本域和文本区域

(一)插入文本域 (二)设置文本域的属性 (三)插入文本区域

四、复选框、单选按钮和单选按钮组

(一)插入单选按钮与复选框 (二)设置单选按钮与复选框的属性 五、列表框和弹出菜单

(一)插入列表框与弹出菜单 (二)设置列表/菜单属性 (三)跳转菜单 (四)文件域

(五)表单按钮 (六)标准表单按钮 (七)图片式按钮 (八)检查表单 [实验实践教学环节]

实验项目1：插入网页对象（第4、5、9、12章） 实验课时：3学时 实验项目2：表单对象 实验课时：2课时 [课堂训练、作业思考题]

1．文本域与文本区域有何区别？ 2．如何插入跳转菜单？

第十章 添加超级链接和导航工具条

[教学目的与要求]

1. 掌握在Dreamweaver 8中创建超级链接的基本方法；

2. 了解超级链接的种类：包括内部、外部超级链接、为E-mail和下载文件添加超级链接、使用锚点和导航条工具等内容。 [重点与难点]

1、内部超级链接的使用方法； 2、外部超级链接的使用方法； 3、为图片添加超级链接； 4、为E-mail创建超级链接； 5、设置下载文件链接； 6、锚点的创建方法； 7、导航条的创建方法； [教学时数] 3学时

[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容] 一、什么是超级链接

(一)超级链接的概念 (二)链接路径 二、使用内部超级链接

(一)10.2.1 为文字添加超级链接

(二)10.2.2 设置文字超级链接的属性 (三)10.2.3 为图片添加超级链接 三、外部超级链接

四、为E-mail和下载文件添加超级链接

（一） 为E-mail添加超级链. （二） 为下载文件添加超级链接 五、使用锚点

（一） 创建锚点 （二） 链接锚点 六、使用导航工具条

（一） 插入导航条 （二） 修改导航条 [实验实践教学环节] 无

[课堂训练、作业思考题]

1．简述超级链接的分类。 2．如何创建锚点？

本文来源：https://www.bwwdw.com/article/emph.html