dreamweaver8第五单元剖析
Dreamweaver网页制作,第五单元 制作“家乡山水”网页,主 编：王树平 副主编：杜大志 李光宇 制作者：杜大志 刘艳慧,第五单元 制作“家乡山水”网页,任务一 添加热点和锚记链接,任务二 添加和使用AP元素,任务三 制作页面动态效果,任务四 使用代码制作“异国风情”网页,本单元将通过“添加热点与锚记链接”、“添加和使用AP元素”以及“制作页面动态效果”几个任务来完成“家乡山水”页面的制作。 “家乡山水”页面的效果如下图所示：,整个页面分为左侧、右上和右下三部分，左侧放置景区地图图像，右上部放置景区名称，右下部显示景区图像及景区简介。,当鼠标指向景区地图的一个景区时，会在光标下方显示对应景区的名称，同时在页面的右下部显示该景区的风景图像及简单介绍。当鼠标单击一个景区时，会另外打开一个“景区介绍”页面，如下图所示。,第五单元 制作“家乡山水”网页,景区介绍,第五单元 制作“家乡山水”网页,任务一 添加热点与锚记链接,任务描述：为景区地图中的各个景区与“景区介绍”页面中相关内容建立链接关系。,任务分析：建立好本单元的目录结构，在“景区介绍”页面中为每个景区的介绍内容添加锚记，之后在景区地图上按景区绘制热点，然后为每个热点添加锚记链接，链接到“景区介绍”页面的对应位置。,第五单元 制作“家乡山水”网页,自己动手,1建立本栏目目录结构,任务一 添加热点和锚记链接,2为“景区介绍”页面添加锚记,将光标放到表格第一行中的文本“金华山景区”前，单击“插入”栏“常用”类别中的“命名锚记”按钮，或选择菜单栏“插入”菜单下的“命名锚记”选项 ,弹出如下图所示的对话框。输入锚记名称“jd1”，单击“确定”按钮，在插入点处出现一个锚记图标。,1什么是锚记？ 2锚记如何命名？,任务一 添加热点和锚记链接,根据下表所示对应关系，使用同样方法，为“景区介绍”页面中其他5个景区添加锚记。,任务一 添加热点和锚记链接,3为“家乡山水”页面的景区地图添加热点,使用多边形热点工具为图中“金华山景区”添加热点。然后用同样的方法为其他景区添加热点。,绘制过程中，相邻的两个顶点会自动连接，起始和结束两个顶点会自动闭合。,尚未点选的部分。,3什么是热点？ 4热点工具有哪些？,任务一 添加热点和锚记链接,4设置热点属性添加锚记链接,选中为“金华山景区”添加的热点，在“属性”面板中， 进行如下设置：,5热点属性面板各个属性的含义是什么？ 6热点工具的操作有哪些？,任务一 添加热点和锚记链接,依据下表所示，使用同样方法设置其他热点的属性，分别将其链接到“viewpiont.html”页面中对应景区介绍的锚记位置。,任务一 添加热点和锚记链接,任务总结： 通过完成以上任务，学习了什么是热点、如何添加热点、如何设置热点的属性和添加锚记以及创建锚记链接等。,任务一 添加热点和锚记链接,举一反三： 创建网页“practice5-1.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-1.jpg”，练习使用矩形热点工具、多边形热点工具和椭圆形热点工具绘制不同形状的热点。,1启发思路： 添加热点和创建锚记链接,2分组完成任务。,任务一 添加热点和锚记链接,作业： 1. 将本单元“举一反三”中的“pra5-2”文件夹复制到D盘根目录，利用所给素材“唐诗三百首.doc”制作一个有关唐诗三百首介绍的网页“practice5-3.html”， 要求页面设计尽量典雅美观。在网页内添加锚记链接,使得目录中的“相关背景”、“内容提要”、“作品影响”、“流行注本”、“精彩篇章”、“延伸阅读”、“诗歌目录”、“必读理由”、“图书信息”、内容简介”分别链接到文中相应的位置。 2. 将本单元“举一反三”中的“pra5-3”文件夹复制到D盘根目录，利用所给素材自由设计制作一个有关中华人民共和国省会介绍的网站，在网页中添加锚记链接，要求页面设计美观大方。利用图像“zgdt.jpeg”文件制作首页“index.html”；利用“shenghuiimages”文件夹中的图像和“省会简介.txt”文档制作网页“introduction.html”；将首页图像中的“北京、石家庄、天津、南京、呼和浩特、沈阳、郑州、银川、太原”区域分别链接到网页“introduction.html”中相应的位置。,任务一 添加热点和锚记链接,任务二 添加和使用AP元素,任务描述：完成“家乡山水”页面中AP元素（层）的制作。,任务分析：景区地图上共有六个景区，每个景区对应一个层，加上初始显示层共有七个层叠放在同一位置，显示相应的图像。另外，还需要建立一个层，用于显示简单的介绍文字。本任务将在页面中插入八个层，改变层的大小，确定层的位置，然后在层中添加内容。,第五单元 制作“家乡山水”网页,自己动手： 1插入层,在“文件”面板中双击“travel.html”文件，打开“家乡山水”网页。将光标放到表格“table3”的第一行，选择菜单栏“插入”“布局对象”“AP Div”选项，插入一个层。使用同样方法，在表格“table3”的第一行中再插入6个层，分别命名为“apDiv2”、“apDiv3”、“apDiv4”、“apDiv5”、“apDiv6”和“apDiv7”，然后在第二行中插入层“apDiv8”。 “AP 元素”面板如下图：,1插入层的另一种方法和层的操作。,任务二 添加和使用层,勾选此处可以防止绘制层的过程中，层与层重叠。,单击层名可选中层， 双击可以修改层的名称。,2设置层的属性,在“AP 元素 ”面板中，单击“apDiv8 ”选中该层，“属性”面板如下图所示 ：,2属性面板各项的含义是什么？,任务二 添加和使用层,3在层中添加内容,在“AP 元素”面板中选中层“apDiv1” ，将光标放入层中，用“插入”菜单插入“D:mysitetraveltlimages”文件夹中的图像“ysp.jpg”，用于显示“家乡山水”页面右下部的初始图像。用同样的方法为其他层添加内容,注意：要在层中添加内容，一定先要将光标放入该层中。,任务二 添加和使用层,4设置层的显示属性,单击切换全部层是否可见。,眼睛闭合表示层不可见，睁开表示层可见。,单击切换该层是否可见。,任务二 添加和使用层,任务总结： 通过完成以上任务，学习了如何插入层、设置层的属性以及如何在层中插入内容等。,任务二 添加和使用层,举一反三： 创建网页“practice5-5.html”，使用层完成如下工作：在图像“practice5-4.jpg”的上方叠放另一张图像“practice5-5.gif”（所需素材在本单元素材文件夹中的“举一反三”文件夹中），完成效果如下图所示。,1启发思路： 回忆插入层的方法，在层中添加内容。,2分组完成任务。,任务二 添加和使用层,作业： 创建网页“practice5-6.html”，利用层的可重叠性，制作阴影效果的文字，如下图所示。,任务二 添加和使用层,任务三 制作页面动态效果,任务描述：为“家乡山水”网页添加动态效果。,任务分析：通过为“家乡山水”网页中的热点添加“显示-隐藏元素”行为，控制相应层的状态；添加“设置容器的文本”行为，控制层“apDiv8 ”中显示的文本内容。,第五单元 制作“家乡山水”网页,自己动手： 1为“金华山景区”热点添加“显示-隐藏元素”行为,A.为热点添加行为 在“文件”面板中双击“travel.html”文件，打开“家乡山水”页面，勾选“窗口”菜单中的“行为”选项，或者按下键盘的Shift+F4键打开“行为”面板。 选中景区地图“map.jpg”中覆盖“金华山景区”的热点，单击“行为”面板上的“添加行为”按钮，在下拉菜单中选择“显示-隐藏层”选项，弹出“显示-隐藏层”对话框，设置层“div “apDiv2” ”（“金华山景区”图像所在层）和层div “apDiv8” ”（显示文本的层）为“显示”，其他层全部设置为“隐藏”，单击“确定”按钮，如下图所示。,任务三 制作页面动态效果,什么叫行为？,任务三 制作页面动态效果,层“apDiv2” 和层“apDiv8” 为“显示”，其他层全部设置为“隐藏”,B.为行为设置事件 在“行为”面板的事件栏中，选择该行为的事件为“onMouseOver”，效果如下图所示：,任务三 制作页面动态效果,常用事件有哪些？,常用行为有哪些？,行为面板介绍。,至此，为“金华山景区”热点添加了一个行为，此时预览“家乡山水”页面，鼠标移上“金华山景区”热点时，层“apDiv2”和“apDiv8 ”显示，其他层都隐藏，右侧显示的是“金华山景区”图像和简介。,任务三 制作页面动态效果,2为“金华山景区”热点添加“设置容器的文本”行为 A.选中“金华山景区”热点，在“行为”面板中，选择“添加行为”按钮，在弹出的下拉菜单中选择菜单栏“设置文本”“设置容器的文本”选项，弹出“设置容器的文本”对话框，在“容器”中选择层“apDiv8 ”，在“新建HTML”中输入对该景区的简单介绍，然后单击“确定”按钮。效果如下图所示：,任务三 制作页面动态效果,输入对该景区的简单介绍,选择层“apDiv8 ”,B.在“行为”面板的事件栏中，选择“onMouseOver”，按下F12预览页面，效果如下图所示。,任务三 制作页面动态效果,左边选中景区，右边显示相应介绍。,使用以上方法，参照教材表5-1为其他热点设置“显示-隐藏元素”行为。注意在设置某一景区热点的行为时，将该景区图像所在层和用于显示文本的“apDiv8 ”层设置为“显示”，其他层设置为“隐藏”。 使用以上方法，参照教材表5-7为相应热点添加“设置容器的文本”行为，输入热点相对应的景区介绍文字。 至此，“家乡山水”栏目的制作全部完成，保存并预览检查效果。,任务三 制作页面动态效果,任务小结,1掌握为热点添加“显示-隐藏元素”行为。 2掌握为热点添加“显示容器的文本”行为。,任务三 制作页面动态效果,举一反三：,将本单元“举一反三”文件夹中的“pra5-4”文件夹复制到D盘根目录，为其中的两个网页“practice5-6.html”、“practice5-7.html”添加“打开浏览器窗口”行为，设置事件为“onLoad”，使浏览任一网页时，两个网页在两个浏览器窗口中同时打开。,1启发思路： 注意选择正确的行为和事件。,2分组完成任务。,任务三 制作页面动态效果,作业,任务三 制作页面动态效果,1创建网页“practice5-8.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-4.jpg”，为图像添加“弹出信息”行为，使鼠标经过图像时弹出信息“月到中秋分外明”。 2创建网页“practice5-9.html”，使用表格、AP元素及行为创建如课本图JYFS5-4所示菜单，鼠标移到菜单选项时显示下拉列表，移出时下拉列表隐藏，目录结构参照表JYFS5-1。（提示：应用显示-隐藏元素行为完成）。,相关知识：,1锚记是在文档中设置的标记，这些标记通常放在文档的特定主题处或顶部。使用锚记分为两步，第一步添加锚记，第二步添加到该锚记的链接，这个链接可以快速将浏览者带到特定位置。,2锚记名称通常以英文字母起始，区分大小写，不能含有空格，也不能含有特殊字符。 如果锚记创建后，在网页制作窗口中却看不到锚记图标，选择菜单栏“查看”菜单里的“可视化助理”选项，勾选“不可见元素”即可。 锚记图标在预览时不显示。,任务一 添加热点和锚记链接,3热点是对图像内一个区域的几何描述，一般每个热点都会链接到不同的网页、URL、锚记、图像等。,任务一 添加热点和锚记链接,4热点工具介绍：,多边形热点工具,椭圆形热点工具,指针热点工具,矩形热点工具,“指针热点工具”：选中此工具可以拖动热点改变位置，还可以拖动热点的顶点来改变其形状或大小。 “矩形热点工具”：选中此工具后在图像上拖动鼠标可添加矩形热点，按住Shift键拖动可添加正方形热点。
