《网页设计与制作》-实训指导书 下载本文

内容发布更新时间 : 2024/5/20 14:11:44星期一 下面是文章的全部内容请认真阅读。

.

128M ;硬盘不小于 500M ; VGA 彩显,带鼠标器。

操作系统:Windows95/98/me/2000/XP 软件环境:Dreamweaver MX 2004

特殊要求:必须将IIS配置好,能正常进行WEB浏览 素材准备

准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。 实训课时

2学时 实训内容

1、CSS样式的新建: 2、CSS样式的编辑与修改: 3、CSS样式的应用:

4、利用CSS滤镜来特效文字效果: 5、制作光晕字、阴影字、遮罩字、动感字 实训要求

要求学生掌握CSS样式的制作方法;掌握CSS样式的应用与修改操作;了解利用CSS样式来制作文字特效等操作。 实训步骤

1、打开主页页面,在此页面中创建CSS样式:以css-01为名保存,设置字体为隶书,字号为16点数,颜色为#CC66FF,带下划线。

2、对页面中左、右两部分文字分别设置空链接。使用CSS样式:对左边的链接文字套用此样式。

3、修改CSS样式:对表格的框线、背景图片、链接样式等进行设置,并重新应用到所指定的部分;

4、运用CSS滤镜来制作文字特效:光晕字、阴影字、遮罩字、动感字的制作;

5、保存页面,预览效果图; 实训过程注意事项

1、CSS样式应保存到网站站点目录下;

.

.

2、CSS样式的名称应注意不能同名; 实训思考

1、如何利用CSS样式来创建链接文本不显示下划线? 2、如何将CSS样式应用到另外的网站的网页中? 书写实训报告要求

1、根据调试结果,写出调试分析报告 2、写出本次实训的心得与体会

实训10 JavaScript技术

实训目的

为了让学生掌握在网页中插入JavaScript脚本语言的方法,以制作各种具有动态效果的网页。 实训环境

硬件环境:考核用机为奔腾以上兼容机,内存不少于 32M ,最好 64M 或 128M ;硬盘不小于 500M ; VGA 彩显,带鼠标器。

操作系统:Windows95/98/me/2000/XP 软件环境:Dreamweaver MX 2004

特殊要求:必须将IIS配置好,能正常进行WEB浏览 素材准备

准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。实 实训课时

2学时 实训内容

1、在网页中加入跑马灯特效

2、制作实现网页中自由飞翔的图像效果 3、制作图片滑过效果

.

.

4、显示时间特效 实训要求

要求学生掌握在网页代码视图中插入JavaScript脚本语言的方法和步骤,利用不同的JavaScript脚本语言来制作网页特效等操作。 实训步骤

1、在主页中加入跑马灯特效:跑马灯可以活跃主页气氛,向浏览者介绍此网页的特色或者注意事项,例如:

2、

3、欢迎访问博客人信息技术有限公司

4、

通过在之间放入这段代码,就会在网页中产生一个跑马灯的效果。

5、制作实现网页中自由飞翔的图像效果:它主要是由函数function start( )来实现的,其作用是每隔一段时间在不同的位置将图片显示一次,因为位置的改变是连续均匀的,所以在视觉上产生移动的效果。

6、制作图片滑过效果:浏览器载入网页时,当鼠标移动图片时显示不同的图片,鼠标移开时显示原图片。按本例中onmouseover 和onmouseout语句分别来指定鼠标移入和移出此图片区域时显示的不同的图像文件,而用src指定页面下载后初始的图像文件。另外,cursor:hand指定鼠标光标移到图片区域时的形状为手形。

7、显示时间特效效果:调用JavaScript脚本语言来显示当前的日期和星期,并实现根据当前的时间显示不同的问候语。

8、保存页面,预览效果图; 实训过程注意事项

1、网页特效制作中准备所需的图片和链接页面必须保存到站点文件夹内,以便调用;

2、在JavaScript脚本语言中对变量名称的定义要区分大小写; 实训思考

1、如何设置状态栏中的跑马灯效果? 2、如何设置文字在状态栏中以打字效果出现?

.

.

书写实训报告要求

1、根据调试结果,写出调试分析报告 2、写出本次实训的心得与体会

实训11 应用行为

实训目的

为了让学生了解在Dreamweaver中使用行为来制作网页的方法和技巧,利用行为来制作不需代码来实现的网页特效。 实训环境

硬件环境:考核用机为奔腾以上兼容机,内存不少于 32M ,最好 64M 或 128M ;硬盘不小于 500M ; VGA 彩显,带鼠标器。

操作系统:Windows95/98/me/2000/XP 软件环境:Dreamweaver MX 2004

特殊要求:必须将IIS配置好,能正常进行WEB浏览 素材准备

准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。 实训课时

2个课时 实训内容

1、交换图像; 2、弹出信息; 3、恢复交换图像; 4、播放声音; 5、调用JavaScript 6、弹出式菜单 实训要求

.

.

要求学生掌握在Dreamweaver中利用行为来制作网页特效的方法和步骤,了解行为的使用与技巧。 实训步骤

1、打开主页页面,在页面中插入一张图片,打开行为面板,选择这张图片,添加一个行为“交换图像”,打开一个对话框,在对话框中设置一张原始图片,确定,这样就添加了一个交换图片的行为,事件为onmouseover;

2、添加一个“弹出信息”的窗口,在对话框中输入我们所要的文字“欢迎光临我的班级网站”,事件为“onload”;

3、添加一个“恢复交换图像”的行为,设置原始图片,事件为onmouseover; 4、添加一个行为“播放声音”,浏览找到声音文件,事件为onmouseover; 5、插入一个一行一列的表格,输入文字“我的班级”,选择此文字,添加一个弹出式菜单,在对话框中输入菜单的内容及外观; 实训过程注意事项

1、设置交换图像时首先得插入图片,图片必须保存在站点的image文件夹内;

2、播放声音行为注意文件的格式及路径; 实训思考

1、要使播放声音要点击某个文字进行,应如何设置行为的事件? 2、如何获取更多的事件? 书写实训报告要求

1、根据调试结果,写出调试分析报告 2、写出本次实训的心得与体会

.