一、课程简况
（一）课程代码：6132442
（二）课程英文名：Web design and production
（三）课程管理院、系（教研室）：文学与新闻学院新闻教研室
（四）大纲说明
1. 适用专业：广播电视专业、新媒体专业
2. 课程教学目标：了解互联网、超文本页面的主要概念和术语掌握策划Web站点的基本原则和设计方法，熟练掌握Web页制作基本的HTM超文本标记语言， Web站点快速开发工具的使用方法和技巧了解一到两种可以进行图形处理、网页动画编辑的工具了解未来Web页面技术的发展方向。
3．课程的性质、地位与任务：应用技术类核心课程，是一门实用性极强的课程，通过本课程的学习，提高学生的实践操作技能。
4. 学分、学时：1.5学分、48学时。
5．先修课程
后续课程
（五）考试考核方式与成绩评定
平时成绩（含…、…、…环节）占70%，期末考试占30 %。
二、教学内容纲目
第一章 网页设计与制作基础 （4学时）
1.1网页设计必备知识
1.2网页的基本构成元素
1.3网页配色基础
第二章 编辑HTML代码 （4学时）
2.1 HTML基础
2.2在DREAMWEAVER中编写HTML
2.3 使用快速标签编辑器
2.4 使用标签选择器
第三章 创建与管理本地站点 （4学时）
3.1 创建本地站点
3.2 规划与构建站点结构
3.3 管理本地站点
第四章 设置页面头部内容 （4学时）
4.1 设置头部信息
4.2 在HTML代码中编辑页面头内容
4.3 实例——页面头内容设计
第五章 页面整体控制 （4学时）
5.1 设置页面属性
5.2 使用辅助工具
5.3 设置颜色
5.4 在HTML代码中编辑页面属性
5.5 实例——设置页面属性
第六章 处理网页文本 （4学时）
6.1 输入文本
6.2设置文本属性
6.3 插入特殊文本对象
6.4 检查拼写与查找替换
6.5 实现文本滚动效果
6.6 在HTML代码中编辑文本
6.7 实例——制作简单的文本页面
第七章 图像的使用（4学时）
7.1 网页图像的基本知识
7.2 插入图像
7.3 插入其他图像元素
7.4 在HTML代码中编辑图像
7.5实例——制作图像页面
第八章 使用表格布局页面（4学时）
8.1 认识表格
8.2 表格的基本操作
8.3 处理表格
8.4 使用扩展表格模式
8.5 使用SPRY构件
8.6 在HTML代码中插入表格
8.7 实例——使用表格布局页面
第九章 插入表单设置网页链接（4学时）
9.1 关于表单
9.2 插入表单元素
9.3 在HTML代码中插入
9.4 实例——制作用户登录页面
9.5 关于链接路径
9.6 文字链接
9.7 图像链接
9.8 内部链接与外部链接
9.9 在html代码中编辑链接
9.10 音乐网站
第十章 插入多媒体内容 （4学时）
10.1 插入FLASH
10.2 插入声音
10.3 插入视频
10.4 在HTML代码中插入多媒体元素
10.5 实例——制作娱乐网站页面
第十一章 使用CSS美化网页 （4学时）
11.1 认识CSS
11.2 使用CSS美化页面
11.3 丰富的CSS样式
11.4 在HTML代码中编辑CSS样式
11.5 实例——应用CSS样式美化页面
第十二章 网站的上传和维护（4学时）
12.1 网站测试
12.2 定义远程服务器
12.3 站点上传
12.4 站点维护
三、本课程的实验教学基本要求
实验一 HTML基础（2课时）
1．学时：2
2．实验类型：设计性实验
3．实验目的
(1) 掌握HTML的基本语法
(2) 学会使用HTML编写简单的网页
4．实验内容
(1) 打开记事本
(2) 在记事本中编写HTML代码:
<HTML>
<HEAD>
<TITLE>一个简单的HTML事例</TITLE>
</HEAD>
<BODY>
<CENTER>
<H3>欢迎光临</H3>
<BR>
<HR>
<FONT SIZE=2>只要你努力,一定能够做好! </FONT>
</CENTER>
</BODY>
</HTML>
将此文件保存为mypage.htm
5．实验考核方式：上交实验报告
实验二 创建和管理站点（2课时）
1．学时：2
2．实验类型：设计性实验
3．实验目的
(1) 熟悉站点管理窗口、定义新站点，掌握建立站点的方法。
（2）掌握站点上传的方法
4．实验内容
（1）在本地硬盘上，建立站点的本地根文件夹，本例为K:\DW\DAbook\web；按设计结构建立相关的子文件夹，将已有的素材拷贝到相关的文件夹中。
（2）从“站点”菜单中选择“新建站点”命令，出现“定义站点”对话框。
（3）在“站点定义”对话框中，单击“基本”选项卡，输入一个站点名称“test”，单击“下一步”按钮进入下一步骤。
（4）在询问是否使用服务器技术时，选择“否”选项指示目前该站点是一个静态站点，没有动态页。单击“下一步”按钮。
（5）选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项，单击下面的文件夹图标，选择站点根文件夹，单击“下一步”按钮。
（6）在“如何连接到远程服务器？”列表中选择“无”。单击“下一步”按钮，出现“总结”，单击“完成”按钮完成设置。
5．实验考核方式：上交实验报告
实验三 网页基本文本编辑（4课时）
1．学时：4
2．实验类型：设计性实验
3．实验目的
（1）掌握如何新建文档
（2）掌握如何设置页面属性
（3）掌握如何设置文档属性并对文档进行简单布局。
4．实验内容
（1）新建文档。选择“菜单”→“文件”命令，新建一个页面。
（2）在弹出的“新建文档”对话框中，在“类别”类表框中选择“基本页”，在右边的列表框里选择“HTML”，单击“创建”按钮，就建立了一个HTML基本页面。
（3）设置页面属性。选择菜单“修改”→“页面属性”命令，设置页边距为0，背景为#996600，单击“确定”按钮。
（4）在设计视图中输入文字，拖动鼠标选取文字“Dreamweaver MX 简介”，在“属性”面板的“格式”下拉列表，选择“标题1”。
（5）选择“窗口”→“HTML样式”命令（或按CTRL+F11键），在“HTML样式”窗口的空白处右击鼠标选择“新建”命令，在“定义HTML样式”窗口中，在“名称”栏输入名称a，在“应用到”栏选择“段落”单选项，在“当应用时”栏选择“添加到现有样式”，在字体栏选“编辑字体”，将宋体字加入，在“颜色”栏输入#000066，选择“加粗”、“斜体”、“其他”，在弹出的列表中选择“下划线”，在“对齐方式”选择居中，单击“确定”按钮。
（6）将光标放入“Dreamweaver MX 简介”段落中，在“HTML”样式窗口中单击刚创建的样a，则新建的样式被应用于“Dreamweaver MX 简介”段落中。
（7）选中标题以外的所有文字，在属性面板的“大小”列表中选4，则文字大小被定为4.
（8）将字体大小设为5。选定上面的文字，在属性面板的“大小”列表中选“+1”，则文字大小被定为5。
5．实验考核方式：上交实验报告
实验四 图像的使用（2课时）
1．学时：2
2．实验类型：设计性实验
3．实验目的
(1) 通过本实训要求掌握常见的图像各式及图像的插入方法
（2）掌握如何修改图像属性
（3）掌握创建图像映射的方法
4．实验内容
（1）插入图像
①在网页中选择插入点
②在插入栏的“常用”选项卡中，单击“图像”按钮；或选择“插入”→“图像”命令。
③在“选择图像源”对话框中选择要插入的图形文件。
④在设计视图中图像，在图像的“属性”面板中设置“替代”文本为“这是一幅图片”。
⑤按F12键进行预览，将鼠标指针放在图片上，这时将出现一个小提示，显示“这是一幅图片”。
（2）创建图像映射
①在设计视图中插入一幅图片。
②选中图片，在图片的属性面板中显示了三种热点类型：矩形、椭圆形、多边形。
③在属性面板中单击椭圆形热点工具按钮，将图片的人脸覆盖。
④单击属性面板的箭头按钮，选中椭圆形热点区域，调节椭圆形大小。
⑤选中椭圆形热点区域，在属性面板中设置超链接对像和目标。
（3）设置图像占位符
（4）设置背景图片
5．实验考核方式：上交实验报告
实验五 超链接（2课时）
1．学时：2
2．实验类型：设计性实验
3．实验目的
（1）掌握超链接路径的基本概念
（2）掌握建立超链接的基本方法
4．实验内容
（1）在常用工具栏中单击“插入表格”按钮，设置5行3列，艰巨、边距各为1，宽度90%。保存为link.htm。
（2）在表格的链接栏中选中t1.htm，按住属性面板的“链接”后面的“指向文件”图标。将其拖动到站点管理器的t1.htm文件上，放开鼠标。
（3）完成后属性面板的链接栏中的内容为t1.htm。由于t1.htm与link.htm在同一个文件夹中，因此链接显示为t1.htm，为相对文档链接。在属性面板的“目标”框中选择-blank，按F12键预览。
（4）在表格的链接栏中选中t2.htm，在“属性”面板中单击“链接”后面的浏览文件按钮，这时将弹出“选择文件”对话框，在对话框中找到文件t2.htm，展开“相对于”后面的下拉列表，选择“站点根目录”，然后单击“确认”按钮。此时可以观察到URL路径为“/5/t2.htm”，这是一个相对路径。在属性面板的“目标”对话框中选择-self，按F12键预览。
（5）在表格的链接栏中选中“邮件地址”，选择“插入”常用工具栏的“电子邮件链接”按钮，这时将弹出“电子邮件链接”对话框，在“E-Mail”栏中输入电子邮件地址，单击确定按钮。此时，“属性”面板“链接”栏中的连接目标以“mailto”开头，当用户点击电子邮件链接时，将调用Outlook Exprss向这个地址发送邮件。
（6）在表格的链接栏中选中“下载文件”，在“属性”面板中单击“链接”后面的浏览文件按钮，在对话框中选择clock.rar，单击“确定”按钮，按F12键预览，此时出现的对话框询问是否下载。
（7）选择主菜单中的“修改”→“页面属性”命令，打开“页面属性”对话框。单击“链接”右侧的图标，打开调色板，选择一种颜色，同样为“访问过的连接”和“活动链接”选择不同的颜色。单击确定完成设置。
5．实验考核方式：上交实验报告
实验六 表格的应用（2课时）
1．学时：4
2．实验类型：设计性实验
3．实验目的
（1）掌握表格的创建方法
（2）掌握表格与单元格的主要属性及其设置方法
（3）掌握通过表格来进行网页页面的布局方法
4．实验内容
（1）打开网页编辑窗口，输入标题文字“各班成绩表”，选中标题文字“各班成绩表”在属性面板中格式设置为正方舒体、5号、粗体、#003366。
（2）将表格按钮拖到编辑窗口，在“插入表格”对话框中，设置表格为4行6列，宽度为600像素。
将光标插入第一个单元格，输入文字“科目”，按TAB键一定光标，依次输入其他单元格中内容。
（3）将光标插入“01级3班”这个单元格，右击鼠标选择“表格”→“插入行”命令。将在要求的位置插入一行，按要求在新增的行中输入内容。
（4）将光标插入“计算机组成实验”这个单元格，右击鼠标选择“表格”→“插入行”命令。将在要求的位置插入一行，按要求在新增的行中输入内容。
（5）选中“00级1班”这一行，右击鼠标选择“剪切”命令。在表格的最后一行选中一个单元格，单击菜单“修改”→“表格”→“插入行或列”命令，在弹出的对话框中选中“1”行、“所选之下”选项，这样插入了一空行。
（6）选中“01级1班”这一行，按DEL键将该行删除。
（7）将光标插入表哥的一个单元格，拖动鼠标选中所有单元格，单击属性面板居中按钮，使表格全部剧中。
（8）选择标题“各班成绩表”，单击属性面板居中对齐按钮。单击标签栏中的<table>标签选中整个表格，在表格的属性面板中选择“居中对齐”。这样整个表格在网页上居中。
（9）选中科目中“计算机组成”和“计算机组成实验”两个单元格，单击属性面板中的“合并所选单元格”按钮，将两个单元格合并成为一个单元格，将内容修改为“计算机组成和实验”。
（10）将光标放入表格内，单击标签栏中的<table>标签选中整个表格，选择“命令”→“格式化表格”命令，在弹出的对话框中选择“Simple3”格式化表格。
（11）选中“计算机组成和实验”单元格，单击属性面板中的“拆分单元格为行或列”按钮，将此单元格拆分为两列，内容分别为“计算机组成”和“计算机组成实验”。选中整个表格，选项“命令”→“排序表格”命令，在弹出的对话框中排序按第7列，顺序选“按数字顺序”、“降序”设置。
5．实验考核方式：上交实验报告
实验七 使用框架制作页面（2课时）
1．学时：4
2．实验类型：设计性实验
3．实验目的
（1）掌握框架的基本概念和操作方法
（2）掌握设置和修改框架属性的方法
（3）掌握框架页面导航的链接
4．实验内容
（1）创建一个空白HTML页面；
（2）打开“插入”菜单，选择“框架”菜单下的“上方及左侧嵌套”命令，插入框架。
（3）打开“文件”菜单，选择“保存全部”命令，将框架集页面保存为index.htm，上方页面保存为top.htm，左侧页面保存为left.htm，右下面页面保存为main.htm。
（4）将光标放在上框架中，单击菜单“修改”→“页面属性”命令，插入背景图片top-05.gif，选择框架面板中的框架集，选中上框架，在属性面板中设置行高80像素。
（5）在上框架中输入文本“希望购物”，选中“希望购物”，在属性面板中设置字体为方正舒体，大小为7，左对齐，绿色。输入文本“欢迎你的光临”，设置姿态为宋体，大小为4，黄色。
（6）将光标放在左框架中，设置左框架的尺寸。
（7）在左框架中插入5行1列的表格宽度为100%，单元格间距为5像素，边框为0。选中所有单元格，设置对齐方式为居中对齐。在第1单元格中输入“网站导航”，黑体，绿色。在其余单元格中输入“图书”、“器材”、“服饰”、“鲜花”，黑体、红色。
（8）将光标放在左框架中，单击菜单“修改”→“页面属性”命令，插入背景图片top-05.gif、链接红色、访问过的链接和活动链接均为绿色。
（9）新建网页1.htm、2.htm、3.htm，内容分别为“鲜花” 、“服饰” 、“器材”。在左框架中设置链接：“鲜花” 链接1.htm、“服饰”链接2.htm、“器材”链接3.htm，目标均设置为mainFrame。
5．实验考核方式：上交实验报告
实验八 表单的制作（2课时）
1．学时：2
2．实验类型：设计性实验
3．实验目的
（1）学会在Dreamweaver中应用表单设计网页的方法
（2）全面掌握表单的创建、编辑、处理方法，以及各表单对象的功能、特点和用途与使用方法。
4．实验内容
（1）将光标放在要放入表单内容的地方，单击表单面板中的插入表单按钮。
（2）选择“插入”→“表单”命令。在表单中插入一个10行4列的表格，表格宽度设置为778像素。
（3）将光标放在第1行第1列中，拖动鼠标左键至第2列中，单击合并单元格按钮，将第1行第1、2两个单元格合并。类似地，将2~5第1列合并，分别将2~5行的2~4列合并；将7行的1、2列及3、4列合并，将第8两行的2~4列合并；将第10行合并为1个单元格。单击“table”标签，选中整个表格，在属性面板中设置边框颜色#993333。
（4）在第1行第1列输入文本“姓名”，在“姓名”后单击“文本字段”按钮，插入一个文本字段；
（5）在第1行第2列输入文本“性别”，在“性别”后单击“单选按钮”按钮，插入一个单选按钮，设置单选按钮的“初始状态”为“已勾选”，在单选按钮后输入文本“男”。类似地，插入未选中单选按钮及文本“女”。
（6）在第6行第3列输入文本“应聘原因”，在第4列单击“列表/菜单”按钮，插入一个菜单，在属性面板的“类型”中选“菜单”，单击“列表值”在“项目标签”中设置相关原因，单击+按钮可以添加原因，按“确定”按钮。在“初始化时选定”中选择菜单初始值；
（7）在第7行第1列输入文本“兴趣爱好”，第2列单击“复选框”按钮，插入复选框按钮，在复选框旁输入文字。
（8）在第8行2个单元格分别插入菜单，在第9行第1个单元格中插入文本“自我评价”，第2个单元格单击工具栏“文本区域”按钮，插入文本区域，在属性面板中设置“字符宽度”为28，“行数”为4。
（9）在第9行第3个单元格中插入文本“上传个人作品”，第4个单元格单击工具栏“文本字段”按钮，插入文件域用于上传资料。
（10）光标放在第10行，单击属性面板中的使对象居中对齐，单击工具栏中的“按钮”按钮，分别插入“提交”按钮和“重置”按钮。
（11）在标签栏中单击标签，<form>选择整个表单，在键盘上按左箭头“←”，按Enter键，在表头插入文本“个人其本情况”，选中文本，在属性面板中设置字体为黑体、4号字、居中对齐。如要求在单击“提交”按钮后，将此表单通过电子邮件发送出去，可以选中整个表单，在属性面板中的“动作”中输入：“mailto：”和邮箱地址。
5．实验考核方式：上交实验报告
实验九 CSS样式应用（2课时）
1．学时：4
2．实验类型：设计性实验
3．实验目的
（1）掌握CSS的基本概念
（2）掌握用Drea,weaver定义CSS样式的方法，能按给定的样式规格说明制作符合设计要求的CSS样式，并能对样式进行修改和引用。
4．实验内容
（1）在Dreamweaver中，选择“窗口”→“CSS样式”命令，打开“CSS样式”面板，单击“CSS样式”面板右下角的“新建CSS样式”，选择样式类型为“使用CSS选择器”，“选择器”中选择 a:link，“定义在”中选择“仅对该文档”。
（2）单击“确定”按钮后，出现“a:link 的CSS样式定义”对话框，在“分类”中选择“类型”，“类型”的参数设置，单击“确定”按钮。
（3）单击“CSS样式”面板右下角的“新建CSS样式”，选择样式类型为“使用CSS选择器”，“选择器”中选择 a:hover，“定义在”中选择“仅对该文档”。
（4）单击“确定”按钮后，出现“a:hover 的CSS样式定义”对话框，在“分类”中选择“类型”，“类型”的参数设置，单击“确定”按钮。
（5）用类似的方法设置 a:visited 样式。
5．实验考核方式：上交实验报告
实验十 模板和库（2课时）
1．学时：4
2．实验类型：设计性实验
3．实验目的
（1）要求掌握Dreamweaver中模板与库元素的概念与作用
（2）了解模板的固定区域与可编辑区域的区别和用途
（3）学会通过模板和库元素创建网页的方法
4．实验内容
（1）选择菜单“文件”→“新建”命令，在常规选项卡的“类型”中选“页面设计”→“商业：产品详细资料”选项，在右下角的“创建”中选“文档”单选按钮。
（2）单击“创建”按钮，将在Dreamweaver的设计视图中得到与预览一样的页面。
（3）将上述页面中文字、图片、链接以新的内容代替，选择菜单“文件”→“保存”命令，将网页保存为ml.htm。
（4）打开“窗口”菜单，选择“资源”命令或按F11键，打开“资源”面板，在“资源”面板中单击按钮。
（5）单击+按钮，新建一个库，并在文本框中输入库的名称。
（6）单击“库”面板右下角的编辑按钮，将库打开，开始编辑库中的内容。
（7）在打开的文档中创建页脚信息；
（8）选择菜单“文件”→“保存”命令，将库保存。
（9）打开模板文件mb，将光标放在插入点，在“资源”面板中将建立的库文件选中，单击“插入”按钮，库就被插入到模板中了。
（10）将模板保存。
5．实验考核方式：上交实验报告
四、选用教材、参考书目
1.《网页设计与制作》全国高等教育自学考试指导委员会组编于淼主编中国人民大学出版社2006版。
2.《网页设计与制作辅导与练习》全国高等教育自学考试指导委员会组编于淼主编中国人民大学出版社2006版。
3.《Dreamweaver CS4 完全自学手册》 科学出版社 徐丰志 孙艳波 王靖文主编 2010版
五、课程网站、辅助学习资源
1. Wh论坛(http://www.were-here.com/)：国际著名Flash论坛，聚齐国际知名闪客。
2. 闪客帝国(http://www.flashempire.com)：业内新闻、动态排行、技术支持等。
3. 闪客吧(http://www.flash8.net)：Flash相关软件全面，选这里下载最好。
4. 闪客天空(http://www.flashsky.com)：源代码非常多，便于下载学习。 |
