dreamweaver课件第五单元.ppt

Dreamweaver网页制作 第五单元 制作“家乡山水”网页 第五单元 制作“家乡山水”网页 任务一 添加热点与锚记链接 　　　 任务描述：为景区地图中的各个景区与“景区介绍”页面中相关内容建立链接关系。 自己动手 1．建立本栏目目录结构 2．为“景区介绍”页面添加锚记 任务二 添加和使用层 　　　 任务描述：完成“家乡山水”页面中层的制作。 2．设置层的属性 3．在层中添加内容 4．设置层的显示属性 2.添加导航图片 在body……/body标签之间，添加的代码如下。 3.给导航图像添加热点并设置热点的属性 center pimg src=htmlimages/top.jpg width=500 height=30 border=0 usemap=#Map /!-- usemap属性指向热点地图-- map name=Map id=Map!--设置热点地图名称和id为“Map”-- area shape=rect coords=26,3,140,28 href=javascript:ShowDiv(document.all.aa) / area shape=rect coords=192,4,307,26 href=javascript:ShowDiv(document.all.bb) / area shape=rect coords=365,4,473,27 href=javascript:ShowDiv(document.all.cc) / /map /p /center 在/title和/head之间插入Javascript代码如下。 4.添加图像层，完成本任务 在 /map和/p标签之间添加代码如下 任务三 制作页面动态效果 输入对该景区的简单介绍 选择层“Layer8” B.在“行为”面板的事件栏中，选择“onMouseOver”，按下F12预览页面，效果如下图所示。 任务三 制作页面动态效果 左边选中景区，右边显示相应介绍。 使用以上方法，参照教材表5-1为其他热点设置“显示-隐藏层”行为。注意在设置某一景区热点的行为时，将该景区图像所在层和用于显示文本的“Layer8”层设置为“显示”，其他层设置为“隐藏”。 使用以上方法，参照教材表5-7为相应热点添加“设置层文本”行为，输入热点相对应的景区介绍文字。 至此，“家乡山水”栏目的制作全部完成，保存并预览检查效果。 任务三 制作页面动态效果 任务小结 1．掌握为热点添加“显示-隐藏层”行为。 2．掌握为热点添加“显示层文本”行为。 任务三 制作页面动态效果 举一反三： 　将本单元“举一反三”文件夹中的“pra5-3”文件夹拷贝到D盘根目录，为其中的两个网页“practice5-8.html”、“practice5-9.html”添加“打开浏览器窗口”行为，设置事件为“onLoad”，使浏览任一网页时，两个网页在两个浏览器窗口中同时打开。 1．启发思路： 注意选择正确的行为和事件。 2．分组完成任务。 任务三 制作页面动态效果 作业 任务三 制作页面动态效果 1．创建网页“practice5-10.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-2.jpg”，为图像添加“弹出信息”行为，使鼠标经过图像时弹出信息“月到中秋分外明”。 2．创建网页“practice5-11.html”，使用表格、层及行为创建如课本图JYFS5-6所示菜单，鼠标移到菜单选项时显示下拉列表，移出时下拉列表隐藏，目录结构参照课本表JYFS5-1。 任务四 使用代码制作“异国风情”网页 任务描述： 使用HTML代码编写网页，当单击导航图像中不同文字时，在网页中显示不同的内容。 任务分析：网页由上下两部分组成，上半部分添加用于导航的文字图像，下半部分显示文字对应的风景图像。这些风景图像分别放在不同的层中，这些层重叠在相同位置，并且大小相同。通过为上半部分导航图像上的文字添加三个矩形热点、把热点链接到一段JavaScript代码，该代码功能为调用ShowDiv函数，该函数控制层的显示与隐藏，实现各热点的行为。 ???? 第五单元 制作“家乡山水”网页 自己动手： 1．准备工作。 在D盘新建一个名为“ygfq”的文件夹，将光盘中本单元素材“html”文件夹中的“htmlimages”文件夹拷贝到新建的文件夹中。在Dre