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

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

（信息网络安全监察专业适用）

一、课程类别

专业能力课

二、地位和作用

本实践教学大纲是信息网络安全监察专业“网页设计与制作”课程的实践教学大纲，是完成“网页设计与制作”课程和培养网页设计与制作的基本操作技能的重要实习实践环节。总学时为30学时，共包括9个实践项目。实践地点为校内计算机基础实验室。实践结果将使学生全面掌握网页设计与制作的技术及网页制作软件的使用。

三、实验目的和要求

通过对网页设计与制作基础知识和技能的学习,使学生系统了解网页、网站的概念、网页主要工具软件Dreamweaver的使用等基础知识，熟练运用网页制作的工具软件，使学生具有网页、网站制作的知识与能力，具备应用电脑独立开发网页、网站并将网站上传并测试的技能，具备解决网页设计、网站开发中出现各种问题的能力。

四、实验设施

1.硬件要求：

使用计算机基础实验室。硬件条件包括50台计算机：1G以上内存、40G以上硬盘。

2.软件要求：

（1）WindowsXP以上版本

（2）Dream weaver8 中文版；

（3）Flash8 中文版

五、组织方式

所有实验环节均由每位学生独立完成。

实训内容、课时分配情况

实验项目（一）

实验项目（二）

实验项目（三）

实验项目（四）

实验项目（五）

（一）实验目的

(1)掌握时间轴和层的基本理论

(2)熟悉层面板，利用时间轴制作层动画。

（二）实验要求

实验前认真预习，熟练掌握有关时间轴和层概念和知识。实验过程中记录发生的现象并分析原因。实验完毕将所有文件打包交给老师。

实验内容

使用层和时间轴制作动画：

1.建立一个本地站点,包括2-3个网页

2、在网页上添加如下的时间轴动画

(1)层的曲线运动

(2)录制层路径

3.设置超链接将站点中的网页链接起来。

实验步骤

1．层的曲线运动

（1）新建一个文档并保存。

（2）在文档中插入一个层，在“属性检查器”中命名层编号为fish，并在层中插入一幅图像。并将层拖到时间轴面板中。

（3）选择动画条右侧端点，即右侧关键帧。

（4）在文档中将层向右侧拖拽，这时会在文档中出现一条灰色的直线，表示动画运动的路线。

（5）保存并在浏览器中预览，或按住播放键，可以看到鱼向右移动，是一个直线运动的动画。

（6）若要使层的运动路线形成曲线，则需要在动画条的中间增加的关键帧，并选择此关键帧，在文档中将层向下拖拽，这样就形成了一条向下的曲线。

2．录制层路径

（1）新建一个文档，并保存。

（2）在文档中绘制一个层，在“属性检查器”中命名该层编号为“butterfly”，并在层中插入一张蝴蝶的图像。

（3）将层移到起始位置，在层边框上单击鼠标右键，在快捷菜单中选择“录制层路径”的命令。

（4）在文档窗口中拖拽层，在停止位置松开鼠标，Dreamweaver8会在后台记录下层移动的路径，并在动画条上产生相应的关键帧。

（5）保存并在浏览器中预览，或按住播放键，观看动画播放效果。

实验项目（六）

实验项目（七）

实验步骤

（一）鼠标样式的设置

1.建立一个本地站点

2.在站点中建立一个网页文件index.htm并打开进行编辑。

3.新建一个网页并在网页中插入一幅图像，如图8.1所示，保存文档。

4.在CSS样式面板中，单击按钮，打开“新建CSS规则”对话框

5.输入CSS样式的名称“.shubiao”，“选择器类型”选择“类”选项，“定义在”选择“仅对该文档”。

6.点击“确定”，打开“.shubiao的CSS规则定义”对话框，切换到“扩展”分类

7.在“视觉效果”的“光标”的下拉列表中选择“help”，单击“确定”按钮，样式建立完成。

8.选中图像，执行以下操作之一：

9.在CSS面板中，右击.shubiao样式，在弹出的快捷菜单中选择“套用”命令。

10.在“属性检查器”的“类”的下拉列表中选择“shubiao”。

11.保存网页，在浏览器中鼠标指向图像测试效果。

（二）ＣＳＳ滤镜的使用

1.新建一个网页并在网页中插入两幅相同的图像，如图8.5所示，保存文档。

2.在CSS样式面板中，单击按钮，打开“新建CSS规则”对话框。如图8.6所示。

3.名称中输入“.blur”，“选择器类型”选择“类”，“定义在”选择“仅对该文档”。

4.设置完成后，单击“确定”按钮，打开“.blur的CSS规则定义”对话框，切换到“扩展”分类。

5.在“滤镜”中选择Blur滤镜，参数设置如下：Blur(Add=true,

Direction=135,Strength=20)。

Add：设置图片是否被改变成印象派的模糊效果。有两个值：true（默认）和false。

Direction：指定模糊方向。0——垂直向下；45——垂直向右；90——向右；135——向下偏右；180、225、270、315分别是垂直向下、向下偏左、向左、向上偏左。

Strength：指定有多少像素的宽度将受到模糊影响。值只能使用整数来指定，默认是5像素。

6.设置完成后，单击“确定”，创建的CSS样式出现在CSS面板。

7.选中文档中的右侧图像，在CSS面板中，右击.blur样式，在弹出的快捷菜单中选择“套用”命令。

8.保存并在浏览器中预览网页效果。