05 第五模块网页特效制作

来源：网络收集时间：2026-09-30

导读：第五模块网页特效制作课题一利用marquee制作移动效果 1.掌握marquee的基本语法； 2.掌握marquee参数的属性设置； 3.掌握marquee的应用方法。实训课时 2课时实训目标 1.Dreamweaver CS3 实训准备 2.“萧萧个人音乐网”网站实训过程任务一：基本语

第五模块网页特效制作

课题一利用marquee制作移动效果

1.掌握marquee的基本语法； 2.掌握marquee参数的属性设置；

3.掌握marquee的应用方法。

实训课时

2课时

实训目标

1.Dreamweaver CS3

实训准备 2.“萧萧个人音乐

网”网站

实训过程任务一：基本语法

1.打开Dreamweaver软件。

2.新建一网页文件，保存并命名为“1.htm”。切换到“显示代码视图”。

3.在<body>与</body>间输入代码如下：

4.保存并按F12键预览。

任务二：方向参数的属性设置

1.新建一网页文件，保存并命名为“2.htm”。切换到“显示代码视图”。

2.在<body>与</body>间输入代码如下：

<marquee direction=”left”>我从右向左移！</marquee><p> <marquee direction=”right”>我从左向右移！</marquee>

3.保存并按F12键预览。

任务三：方式参数的属性设置

1.新建一网页文件，保存并命名为“3.htm”。切换到“显示代码视图”。

2.在<body>与</body>间输入代码如下：

<marquee behavior=”scroll”>我一圈一圈绕着走！</marquee><p> <marquee behavior=”slide”>我只走一次就歇了！</marquee><p> <marquee behavior=”alternate”>我来回走！</marquee>

3.保存并按F12键预览。

任务四：循环参数的属性设置

1.新建一网页文件，保存并命名为“4.htm”。切换到“显示代码视图”。

2.在<body>与</body>间输入代码如下：

3.保存并按F12键预览。

任务五：速度参数的属性设置

1.新建一网页文件，保存并命名为“5.htm”。切换到“显示代码视图”。

2.在<body>与</body>间输入代码如下：

<marquee scrollamount=”20”>我走得好快哟！</marquee>

3.保存并按F12键预览。

任务六：延时参数的属性设置

1.新建一网页文件，保存并命名为“6.htm”。切换到“显示代码视图”。

2.在<body>与</body>间输入代码如下：

3.保存并按F12键预览。

任务七：底色参数的属性设置

1.新建一网页文件，保存并命名为“7.htm”。切换到“显示代码视图”。

2.在<body>与</body>间输入代码如下：

3.保存并按F12键预览。

任务八：面积参数的属性设置

1.新建一网页文件，保存并命名为“8.htm”。切换到“显示代码视图”。

2.在<body>与</body>间输入代码如下：

3.保存并按F12键预览。

任务九：事件参数的属性设置

1.启动Dreamweaver软件。

2.定义站点“萧萧个人音乐网”，双击网站首页index.htm，进入编辑状态。

3.将光标定位于页面中“最新资讯”栏目第一行内容前。

4.切换到拆分视图，在上方“显示代码视图”内输入代码如下： <marquee direction=”up” width=”308” height=”69”scrollamount=”2” onMouseOver=”this.stop()” onMouseOut=”this.start()”>我会走！</marquee>

5.保存并按F12键预览。

实训评价

对学生的学习态度、操作能力、参与度及完成情况进行考核评估，由教师评估给分，得到学生的实训成绩。

实训总结

根据学生实训过程中出现的问题，引导学生对整个实训的实施过程进行总结，并提出下一步训练要求。

课题二制作META过渡效果

1.掌握动态滤镜RevealTrans

实训课时 2课时

的添加方法与相关设置； 2.掌握动态滤镜BlendTrans

实训目标 1.Dreamweaver CS3

的添加方法与相关设置；

实训准备 2.“萧萧个人音乐网”网

3.掌握Page-Enter与

站

Page-Exit的应用方法。

实训过程任务一：动态滤镜RevealTrans

1.启动Dreamweaver软件。

2.定义站点“萧萧个人音乐网”，双击网站首页index.htm，进入编辑状态。

3.选择“插入—HTML—文件头标签—META”命令，弹出META对话框。

4.设置META对话框：在属性中选“HTTP－equivalent”选项；在“值”中键入“Page-Enter”，表示进入网页时有网页过渡效果；在“内容”中键入“RevealTrans（Duration=4,Transition=23）”，其中，Duration=4表示网页过渡效果的延续时间为4秒，Transition=23表示过渡效果方式，值为23时表示效果随机。

5.输入完后单击“确定”，保存并预览，当点击链接进入该页面时可观看效果。

6.参照步骤3、4，再次插入META标签，在“值”中键入“Page-Exit”，表示离开网页时有网页过渡效果；在“内容”中键入“RevealTrans（Duration=4,Transition=23）”。

7.输入完后单击“确定”，保存并预览，当点击链接离开该页面时可观看效果。

0 矩形缩小 1 矩形扩大 2 圆形缩小 3 圆形扩大 4 下到上刷新 5 上到下刷新

12 点扩散

13 左右到中间刷新 14 中间到左右刷新 15 中间到上下 16 上下到中间 17 右下到左上

6 左到右刷新 7 右到左刷新 8 垂直百叶窗 9 水平百叶窗 10 错位水平百叶窗 11 错位垂直百叶窗

18 右上到左下 19 左上到右下 20 左下到右上 21 横条 22 竖条

23 以上23种效果随机一种

任务二：动态滤镜BlendTrans

1.双击“最新资讯”页面“files/zx.htm”，进入编辑状态。

2.选择“插入—HTML—文件头标签—META”命令，打开“META”对话框。

3. 设置META对话框：在属性中选“HTTP－equivalent”选项；在“值”中键入“Page-Enter”，表示进入网页时有网页过渡效果；在“内容”中键入“BlendTrans（Duration=4）”，其中，Duration=4表示网页过渡效果的延续时间为4秒， BlendTrans表示过渡动态滤镜，表示渐隐效果。

4. 输入完后单击“确定”，保存并预览，当点击链接进入该页面时可观看效果。

5. 参照步骤3、4，再次插入META标签，在“值”中键入“Page-Exit”，表示离开网页时有网页过渡效果；在“内容”中键入“BlendTrans（Duration=4）”。

6. 输入完后单击“确定”，保存并预览，当点击链接离开该页面时可观看效果。

任务三：完成其他网页的添加

参照任务一、任务二完成站点内“萧萧手记”、“音乐欣赏”、“在线留言”页面META

过渡效果的添加。

实 …… 此处隐藏：7251字，全部文档内容请下载后查看。喜欢就下载吧 ……

05 第五模块网页特效制作.doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

本文链接：https://www.jiaowen.net/wendang/1890370.html（转载请注明文章来源）

上一篇：成都市取得合格饲料生产的企业名单
下一篇：3.4 难溶电解质的溶解平衡

05 第五模块 网页特效制作

05 第五模块网页特效制作