dreamweaver 第五单元.pptVIP

Dreamweaver网页制作;第五单元 制作“家乡山水”网页; 本单元将通过“添加热点与锚记链接”、“添加和使用层”以及“制作页面动态效果”几个任务来完成“家乡山水”页面的制作。 “家乡山水”页面的效果如下图所示：;景区介绍 ;任务一 添加热点与锚记链接 ; 自己动手; 2．为“景区介绍”页面添加锚记; 根据下表所示对应关系，使用同样方法，为“景区介绍”页面中其他5个景区添加锚记。 ; 3．为“家乡山水”页面的景区地图添加热点; 4．设置热点属性添加锚记链接 ;热点区域; 任务总结： 通过完成以上任务，学习了什么是热点、如何添加热点、如何设置热点的属性和添加锚记以及创建锚记链接等。 ; 举一反三： 将本单元“举一反三”文件夹中的“pra5-1”文件夹拷贝到D盘根目录，利用图像文件“practice5-3.jpg”，制作一个有关荷花的简单网页“practice5-3.html”。使用多边形热点工具为图像中的荷花添加热点，熟悉使用指针热点工具对热点进行移动和修改大小的操作。添加替换文本“映日荷花別样红”，添加链接到“practice5-4.html”，热点替换如下图所示。 ; 作业： 1． 创建网页“practice5-1.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-1.jpg”，练习使用矩形热点工具、多边形热点工具和椭圆形热点工具绘制不同形状的热点。 2．创建网页“practice5-2.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-2.jpg”，在图像上添加圆形热点，并添加替换文本“月到中秋分外明”。效果如图所示。;任务二 添加和使用层; 自己动手： 1．插入层 ; 2．设置层的属性; 3．在层中添加内容;4．设置层的显示属性; 任务总结： 通过完成以上任务，学习了如何插入层、设置层的属性以及如何在层中插入内容等。 ; 举一反三： 将本单元“举一反三”文件夹中的“pra5-2”文件夹拷贝到D盘根目录，运行Dreamweaver 8，使用文件夹中的图像与文本制作“我的心事”网页“practice5-7.html”,整个页面使用层进行布局，效果如下图所示。 ; 作业： 1. 创建网页“practice5-5.html”，使用层完成如下工作：在图像“practice5-4.jpg”的上方叠放另一张图像“practice5-5.gif”（所需素材在本单元素材文件夹中的“举一反三”文件夹中），完成效果如下图所示。 ; 2. 创建网页“practice5-6.html”，利用层的可重叠性，制作阴影效果的文字，如下图所示。;任务三 制作页面动态效果;自己动手： 1．为“金华山景区”热点添加“显示-隐藏层”行为 ;任务三 制作页面动态效果 ; B.为行为设置事件 在“行为”面板的事件栏中，选择该行为的事件为“onMouseOver”，效果如下图所示：; 至此，为“金华山景区”热点添加了一个行为，此时预览“家乡山水”页面，鼠标移上“金华山景区”热点时，层“Layer2”和“Layer8”显示，其他层都隐藏，右侧显示的是“金华山景区”图像和简介。;任务三 制作页面动态效果 ; B.在“行为”面板的事件栏中，选择“onMouseOver”，按下F12预览页面，效果如下图所示。; 使用以上方法，参照教材表5-1为其他热点设置“显示-隐藏层”行为。注意在设置某一景区热点的行为时，将该景区图像所在层和用于显示文本的“Layer8”层设置为“显示”，其他层设置为“隐藏”。 使用以上方法，参照教材表5-7为相应热点添加“设置层文本”行为，输入热点相对应的景区介绍文字。 至此，“家乡山水”栏目的制作全部完成，保存并预览检查效果。; 任务小结; 举一反三：; 作业;任务四 使用代码制作“异国风情”网页 ;自己动手：;head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title异国风情/title /head body bgcolor=#3399FF topmargin=35!--topmargin:设置页面的上边矩-- /body;2.添加导航图片;3.给导航图像