《网页设计与制作》教学大纲
课程编号：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.掌握如何创建、选择框架和框架集
3.掌握如何设置框架和框架集的属性及编辑框架页面 [重点与难点]
1.创建框架与框架集 2.选择框架与框架集的方法 3.设置框架与框架集的属性 4.编辑框架页面 [教学时数] 3学时
[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]
一、什么是框架与框架集
二、创建框架与框架集
(一)使用预定义创建框架集 (二)自己设计框架集 (三)删除框架 (四)创建嵌套框架集
三、选择框架与框架集
(一)在文档窗口中选择 (二)在“框架”面板中选择
四、设置框架与框架集属性
（一） 设置框架属性
（二） 设置框架集属性
五、编辑框架页面
(一)7.5.1 设置框架中文档的背景颜色 (二)7.5.2 使用链接控制框架内容 (三)7.5.3 替换框架文件
(四)7.5.4 保存框架和框架集文件 (五)7.5.5 解决浏览器无法显示框架的问题 [实验实践教学环节]
实验项目：网页布局（第
6、
7、8章） 实验课时：2课时 [课堂训练、作业思考题]
1．如何删除框架和框架集？ 2．怎样替换框架文件？
[教学目的与要求]
1.了解创建层
2.掌握设计层属性、编辑层 3.掌握层和表格的转换 [重点与难点]
1．创建层 2．设置层属性 3．编辑层 4．层和表格的转换 [教学时数] 3学时
[教学方法与手段]
第八章 创建和使用层 讲授法与多媒体教学相结合 [主要内容]
一、创建层
(一)创建平铺式层 (二)创建重叠式层 (三)创建嵌入式层
二、设置层的属性
(一)设置层参数 (二)设置单个层属性 (三)同时设置多个层的属性
三、编辑层
(一)使用“层”面板 通过“层”面板可以管理文档中的层。
(二)使用“层”面板可以防止层重叠、更改层的可见性、将层嵌套或层叠，以及选择一个或多个层。(三)在层中添加内容 (四)选择和移动层 (五)防止层重叠 (六)改变层的堆叠次序
(七)显示/隐藏层 (八)创建预先载入层 (九)调整层的大小
层和表格的转换层
(一)将层转换成表格 (二)将表格转换成层 [实验实践教学环节]
实验项目：网页布局（第
6、
7、8章）实验课时：2课时 [课堂训练、作业思考题]
1．如何创建预先载入层？ 2．简述表格与层的转换方法。
[教学目的与要求]
1.了解表单与表单元素的基本概念
第九章 表 单
四、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．如何创建锚点？
第十一章 层叠样式表
[教学目的与要求]
1.掌握CSS的基本语法与功能、“CSS样式”面板与“相关CSS”面板的使用、应用类样式的方法、插入样式表的方式、CSS样式的属性设置；
2.了解样式表的优先顺序等内容。 [重点与难点]
1.CSS样式的创建、编辑与导出 2.应用类样式 3.设置CSS样式属性 4.CSS样式的优先顺序 [教学时数] 3学时
[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]
一、层叠样式表概述
(一)什么是CSS (二) CSS的基本语法
二、CSS样式的创建、编辑与导出
(一)认识“CSS样式”面板 (二)认识“相关CSS”面板 (三)创建CSS样式
(四)导出样式以创建CSS样式表 (五)管理CSS样式 (六)链接和导出外部样式表 (七)编辑CSS样式 (八)编辑外部样式表
三、应用类样式
(一)应用自定义的CSS样式 (二)删除自定义的CSS样式
四、设置CSS样式属性 (一)“类型”选项 (二)“背景”选项 (三)“区块”选项 (四)“方框”选项 (五)“边框”选项 (六)“列表”选项 (七)“定位”选项 (八)“扩展”选项
五、CSS样式的优先顺序
[实验实践教学环节] 无
[课堂训练、作业思考题]
1．简述CSS样式的作用。 2．简述创建CSS样式的方法。
[教学目的与要求]
1.掌握插入Flash动画、Shockwave电影第十二章 插入多媒体组件
2.掌握插入Applet程序、ActiveX控件和插件等内容 [重点与难点]
1.添加Flash动画。 2.添加Shockwave电影。 3.添加Java Applet程序。 4.使用ActiveX控件。 5.使用插件。
6.添加声音背景和声音文件。 7.插入日期和时间。 [教学时数] 3学时
[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]
一、插入多媒体文件简介
二、添加Flash动画
(一)插入Flash动画 (二)设置Flash动画属性 (三)参数简介
三、插入Shockwave电影
(一)插入Shockwave电影 (二)设置Shockwave电影属性
四、插入Java Applet程序
（一） 插入Java Applet程序
（二） 设置Java Applet属性
五、设置ActiveX控件
六、设置Netscape Navigator插件
(一)插入插件 (二)设置插件属性
七、在网页中添加声音
(一)声音文件格式 (二)为网页加入背景音乐 (三)嵌入声音文件
八、插入日期和时间
九、使用计数器 [实验实践教学环节]
实验项目：插入网页对象（第
4、
5、
9、12章） 实验课时：3学时 [课堂训练、作业思考题]
1．简述可以插入的多媒体组件的种类。 2．如何在网页中嵌入声音文件？
第十三章 生成动态特效
[教学目的与要求]
1.了解行为的含义
2.掌握应用Dreamweaver 8中内置的各种行为、为对象附加行为及获取更多的行为 [重点与难点]
1.了解行为
2.了解Dreamweaver 8的内置行为 3.应用行为 [教学时数] 3学时 [教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]
一、什么是行为
二、Dreamweaver 8中的行为 (一)认识行为面板 (二)内置行为
三、应用行为 (一)为对象附加行为 (二)获得更多的行为
四、动态特效实例 (一)改变对象属性 (二)检查浏览器 (三)检查插件 (四)制作弹出窗口 (五)制作动态图片说明 (六)设置状态栏信息 (七)设置播放声音 [实验实践教学环节]
实验项目：制作动态网页 实验课时：3课时 [课堂训练、作业思考题]
1．简述改变层属性的方法。
2．简述单击某按钮时发出声音特效的制作方法。
第十四章 库与模版
[教学目的与要求]
1.掌握如何创建和设置库项目，为网页添加库项目和编辑库项目 2.掌握如何创建、设置模板的网页属性 3.掌握如何导入导出XML内容 [重点与难点]
1.设置库项目参数 2.编辑库项目 3.利用库项目更新网站 4.使用模板创建网页 5.修改模板属性 6.导入导出XML内容 [教学时数] 3学时
[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]
一、库与模版概述
二、使用库项目 (一)创建库项目 (二)将库项目添加到网页
三、编辑库项目
（一）认识库项目属性面板
（二）删除与重命名库项目
（三）修改库项目
四、利用库项目更新网站
五、创建模版
（一）将文档另存为模版
（二）创建可编辑区域
（三）创建重复区域
（四）定义可编辑标签属性
六、创建基于模版的文档
七、修改模版属性
八、导入导出XML内容 实验实践教学环节] 无
课堂训练、作业思考题]
1．如何设置可编辑区域及可重复区域？ 2．更改了库项目或模版后，如何更新网站？教学目的与要求]
1.掌握站点的规划和设计知识 2.掌握本地和远程的概念
第十五章 规划和设计站点
[ [
[3.掌握创建本地站点的方法
4.掌握设置本地和远程文件夹，管理站点 [重点与难点]
1．创建本地站点 2．设置本地和远程文件夹 3．管理Web站点 [教学时数] 3学时
[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]
一、关于站点规划和设计
二、关于本地与远程的几个概念 (一)本地计算机和Internet服务器 (二)本地站点和远程站点
三、创建本地站点
四、设置本地和远程文件夹 (一)设置本地文件夹 (二)设置远程文件夹
(三)为FTP访问选择主机目录 (四)设置远程文件夹时应注意的事项
五、管理Web站点 (一)导入与导出站点 (二)从站点列表中删除站点 (三)获取和上传文件
(四)同步本地和远程站点上的文件 (五)遮盖站点中的文件夹和文件 (六)使用设计备注 [实验实践教学环节]
无
[课堂训练、作业思考题]
1．简述应用定义站点高级选项卡定义站点的过程。
第十六章 上传站点
[教学目的与要求] 1.了解如何申请个人网站空间 2.知道到哪里去下载免费网站空间
3.了解如何将网站上传到WWW服务器以及如何推广网站等 [重点与难点]
1.申请网站空间 2.上传站点 3.网站的宣传和推广 [教学时数] 3学时
[教学方法与手段] 讲授法与多媒体教学相结合 [主要内容]
一、申请网站空间
(一)选择网站空间 (二)申请方法
二、上传站点
（一） 设置本地服务器地址
（二） 传送站点
三、宣传和推广
（一）用E-mail形式来宣传
（二）在BBS或新闻组中宣传 (三)在搜索引擎网站中宣传 (四)广告与友情链接
(五)在Dreamweaver 8中插入关键词与描述 [实验实践教学环节]
无
[课堂训练、作业思考题]
1．简述申请个人免费网络空间的方法。
三、教学方法与手段
本课程采用讲授法、演示法、实验法、讨论法、探究式等多种教学方法进行教学，教学手段采用了传统教具、多媒体投影以及计算机网络等。
四、教材与教学参考书
[1] 孙印杰，薛书琴，俞露等编著.新世界Dreamweaver 8中文版应用教.电子工业出版社，2008.[2] 希望图书创作室编著.Dreamweaver（中文版) 8标准教程.兵器工业出版社，2007.[3] 杨聪，韩小祥，周国辉主编.Dreamweaver 8网页设计案例实训教程.中国人民大学出版社，2009.[4] 葛艳玲主编.网页制作基础教程（Dreamweaver 8.0）（第2版）.电子工业出版社，2009.[5] 导向科技编著.中文版Dreamweaver 8网页设计培训教程.人民邮电出版社，2006.
五、实验实践教学
实验教学是网页设计与制作的重要实践环节。通过实验，使学生加深理解、验证、巩固课堂教学内容，对Dreamweaver 8有一较全面的认识。培养学生分析问题和解决问题的能力，为以后深入学习教育技术专业的其它课程打下坚实的基础。
实验教学的主要目的是培养学生的动手能力，要求学生熟练掌握Dreamweaver 8的基本操作，网页的设计制作，网站的建立与管理等技能。
为使学生巩固课堂所学知识，根据教学内容本课程共设5项实验，分别是熟悉Dreamweaver 8的操作环境、插入网页对象、网页布局、表单对象和制作动态网页，最终学生上机实验完成最终作品。
六、课外训练及自学指导
（一）课外训练体系 1．训练目的与要求
网页设计与制作是一门实践性很强的课程，要想熟练的掌握Dreamweaver 8有关操作，网页制作和网站开发与管理的技能，就必须大力加强课外训练。
课外训练的主要目的：充分掌握网页制作的有关技能操作，学会设计单个网页，能够开发一个小型网站。 2．训练内容与方法 训练的内容主要是每一章的重点难点知识，训练的方法主要有观摩法和实践法。
（二）自学指导体系 1．自学目的与要求
这门课程要求学生不仅仅是掌握课本上的知识，课本上的知识是远远不够的，这就要求学生必须自学。自学的主要目的是扩展知识面，加深对该课程知识的认识。要求知道与网页制作有关的知识。
2．自学内容与方法
自学的内容主要是网页制作的有关知识，除了Dreamweaver 8软件的有关操作以外，还要学习Flash、Fireworks等软件的有关网页制作知识。。
自学的方法主要有资料查阅法、讨论法、网上学习法、实验练习法等。
七、考试考核
本课程的考试形式为技能考核，学生的学业成绩实行结构化成绩，由考试主卷成绩、副卷(实验)成绩和平时成绩构成，其中考试主卷成绩占60％，副卷成绩占20％，平时成绩占20％。
