Dreamweaver8第五单元

1、Dreamweaver网页制作网页制作第五单元第五单元 制作制作“家乡山水家乡山水”网网页页主 编：王树平副主编：杜大志 李光宇制作者：杜大志 刘艳慧目录目录上一上一页页下一下一页页退出退出第五单元第五单元 制作制作“家乡山水家乡山水”网页网页任务一 添加热点和锚记链接任务二 添加和使用AP元素 任务三 制作页面动态效果 任务四 使用代码制作“异国风情”网页 目录目录上一上一页页下一下一页页退出退出 本单元将通过“添加热点与锚记链接”、“添加和使用AP元素”以及“制作页面动态效果”几个任务来完成“家乡山水”页面的制作。 “家乡山水”页面的效果如下图所示： 整个页面分为左侧、右上和右下三部分，左

2、侧放置景区地图图像，右上部放置景区名称，右下部显示景区图像及景区简介。 当鼠标指向景区地图的一个景区时，会在光标下方显示对应景区的名称，同时在页面的右下部显示该景区的风景图像及简单介绍。当鼠标单击一个景区时，会另外打开一个“景区介绍”页面，如下图所示。 第五单元 制作“家乡山水”网页目录目录上一上一页页下一下一页页退出退出景区介绍 第五单元 制作“家乡山水”网页目录目录上一上一页页下一下一页页退出退出任务一任务一 添加热点与锚记链接添加热点与锚记链接 任务描述：任务描述：为景区地图中的各个景区与“景区介绍”页面中相关内容建立链接关系。 任务分析：任务分析：建立好本单元的目录结构，在“景区介绍”

3、页面中为每个景区的介绍内容添加锚记，之后在景区地图上按景区绘制热点，然后为每个热点添加锚记链接，链接到“景区介绍”页面的对应位置。 第五单元 制作“家乡山水”网页目录目录上一上一页页下一下一页页退出退出 自己动手自己动手 1建立本栏目目录结构建立本栏目目录结构所在路径文件/文件夹的名字说明D:mysitetraveltravel.html“家乡山水”页面viewpoint.html“景区介绍”页面页面所需图像任务一 添加热点和锚记链接目录目录上一上一页页下一下一页页退出退出 2 2为为“景区介绍景区介绍”页面添加锚记页面添加锚记 将光标放到表格第一行中的文本“金华山景区”前，单击“插入”栏“常

4、用”类别中的“命名锚记”按钮，或选择菜单栏“插入”菜单下的“命名锚记”选项 ,弹出如下图所示的对话框。输入锚记名称“jd1”，单击“确定”按钮，在插入点处出现一个锚记图标。 1什么是锚记？2锚记如何命名？任务一 添加热点和锚记链接目录目录上一上一页页下一下一页页退出退出 根据下表所示对应关系，使用同样方法，为“景区介绍”页面中其他5个景区添加锚记。 锚记名称 锚记位置“jd1”“金华山景区”前“jd2”“龙门天关景区”前“jd3”“白草畔景区”前“jd4”“鱼谷洞景区”前“jd5”“百里峡景区”前“jd6”“拒马河景区”前任务一 添加热点和锚记链接目录目录上一上一页页下一下一页页退出退出 3为

5、为“家乡山水家乡山水”页面的景区地图添加热点页面的景区地图添加热点 使用多边形热点工具为图中“金华山景区”添加热点。然后用同样的方法为其他景区添加热点。 绘制过程中，相邻的两个顶点会自动连接，起始和结束两个顶点会自动闭合。尚 未 点 选 的部分。3什么是热点？4热点工具有哪些？任务一 添加热点和锚记链接目录目录上一上一页页下一下一页页退出退出 4设置热点属性添加锚记链接设置热点属性添加锚记链接 选中为“金华山景区”添加的热点，在“属性”面板中， 进行如下设置：5热点属性面板各个属性的含义是什么？6热点工具的操作有哪些？任务一 添加热点和锚记链接目录目录上一上一页页下一下一页页退出退出热点区域锚

6、记链接路径替换文本金华山景区“viewpiont.html#jd1”金华山景区龙门天关景区“viewpiont.html#jd2”龙门天关景区白草畔景区“viewpiont.html#jd3”白草畔景区鱼谷洞景区“viewpiont.html#jd4”鱼谷洞景区百里峡景区“viewpiont.html#jd5”百里峡景区拒马河景区“viewpiont.html#jd6”拒马河景区 依据下表所示，使用同样方法设置其他热点的属性，分别将其链接到“viewpiont.html”页面中对应景区介绍的锚记位置。 任务一 添加热点和锚记链接目录目录上一上一页页下一下一页页退出退出 任务总结：任务总结： 通

7、过完成以上任务，学习了什么是热点、如何添加热点、如何设置热点的属性和添加锚记以及创建锚记链接等。 任务一 添加热点和锚记链接目录目录上一上一页页下一下一页页退出退出 举一反三：举一反三： 创建网页“practice5-1.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-1.jpg”，练习使用矩形热点工具、多边形热点工具和椭圆形热点工具绘制不同形状的热点。 1启发思路： 添加热点和创建锚记链接 2分组完成任务。任务一 添加热点和锚记链接目录目录上一上一页页下一下一页页退出退出 作业：作业： 1. 将本单元“举一反三”中的“pra5-2”文件夹复制到D盘根目录，利用所给素

8、材“唐诗三百首.doc”制作一个有关唐诗三百首介绍的网页“practice5-3.html”， 要求页面设计尽量典雅美观。在网页内添加锚记链接,使得目录中的“相关背景”、“内容提要”、“作品影响”、“流行注本”、“精彩篇章”、“延伸阅读”、“诗歌目录”、“必读理由”、“图书信息”、内容简介”分别链接到文中相应的位置。 2. 将本单元“举一反三”中的“pra5-3”文件夹复制到D盘根目录，利用所给素材自由设计制作一个有关中华人民共和国省会介绍的网站，在网页中添加锚记链接，要求页面设计美观大方。利用图像“zgdt.jpeg”文件制作首页“index.html”；利用“shenghuiimages”

9、文件夹中的图像和“省会简介.txt”文档制作网页“introduction.html”；将首页图像中的“北京、石家庄、天津、南京、呼和浩特、沈阳、郑州、银川、太原”区域分别链接到网页“introduction.html”中相应的位置。 任务一 添加热点和锚记链接目录目录上一上一页页下一下一页页退出退出任务二任务二 添加和使用添加和使用APAP元素元素 任务描述：任务描述：完成“家乡山水”页面中AP元素（层）的制作。 任务分析：任务分析：景区地图上共有六个景区，每个景区对应一个层，加上初始显示层共有七个层叠放在同一位置，显示相应的图像。另外，还需要建立一个层，用于显示简单的介绍文字。本任务将在页

10、面中插入八个层，改变层的大小，确定层的位置，然后在层中添加内容。第五单元 制作“家乡山水”网页目录目录上一上一页页下一下一页页退出退出 自己动手：自己动手： 1插入层插入层 在“文件”面板中双击“travel.html”文件，打开“家乡山水”网页。将光标放到表格“table3”的第一行，选择菜单栏“插入”“布局对象”“AP Div”选项，插入一个层。使用同样方法，在表格“table3”的第一行中再插入6个层，分别命名为“apDiv2”、“apDiv3”、“apDiv4”、“apDiv5”、“apDiv6”和“apDiv7”，然后在第二行中插入层“apDiv8”。 “AP 元素”面板如下图：1插

11、入层的另一种方法和层的操作。任务二 添加和使用层勾选此处可以防止绘制层的过程中，层与层重叠。单击层名可选中层，双击可以修改层的名称。目录目录上一上一页页下一下一页页退出退出 2 2设置层的属性设置层的属性 在“AP 元素 ”面板中，单击“apDiv8 ”选中该层，“属性”面板如下图所示 ：2属性面板各项的含义是什么？任务二 添加和使用层目录目录上一上一页页下一下一页页退出退出 3 3在层中添加内容在层中添加内容在“AP 元素”面板中选中层“apDiv1” ，将光标放入层中，用“插入”菜单插入“D:mysitetraveltlimages”文件夹中的图像“ysp.jpg”，用于显示“家乡山水”页

12、面右下部的初始图像。用同样的方法为其他层添加内容 注意：要在层中添加内容，一定先要将光标放入该层中。任务二 添加和使用层目录目录上一上一页页下一下一页页退出退出4 4设置层的显示属性设置层的显示属性单击切换全部层是否可见。眼睛闭合表示层不可见，睁开表示层可见。单击切换该层是否可见。任务二 添加和使用层目录目录上一上一页页下一下一页页退出退出 任务总结：任务总结： 通过完成以上任务，学习了如何插入层、设置层的属性以及如何在层中插入内容等。 任务二 添加和使用层目录目录上一上一页页下一下一页页退出退出 举一反三：举一反三： 创建网页“practice5-5.html”，使用层完成如下工作：在图像“

13、practice5-4.jpg”的上方叠放另一张图像“practice5-5.gif”（所需素材在本单元素材文件夹中的“举一反三”文件夹中），完成效果如下图所示。 1启发思路： 回忆插入层的方法，在层中添加内容。 2分组完成任务。任务二 添加和使用层目录目录上一上一页页下一下一页页退出退出作业：作业： 创建网页“practice5-6.html”，利用层的可重叠性，制作阴影效果的文字，如下图所示。任务二 添加和使用层目录目录上一上一页页下一下一页页退出退出任务三任务三 制作页面动态效果制作页面动态效果 任务描述：任务描述：为“家乡山水”网页添加动态效果。 任务分析任务分析：通过为“家乡山水”网

14、页中的热点添加“显示-隐藏元素”行为，控制相应层的状态；添加“设置容器的文本”行为，控制层“apDiv8 ”中显示的文本内容。第五单元 制作“家乡山水”网页 目录目录上一上一页页下一下一页页退出退出自己动手：自己动手：1为“金华山景区”热点添加“显示-隐藏元素”行为 A.为热点添加行为 在“文件”面板中双击“travel.html”文件，打开“家乡山水”页面，勾选“窗口”菜单中的“行为”选项，或者按下键盘的Shift+F4键打开“行为”面板。 选中景区地图“map.jpg”中覆盖“金华山景区”的热点，单击“行为”面板上的“添加行为”按钮，在下拉菜单中选择“显示-隐藏层”选项，弹出“显示-隐藏层

15、”对话框，设置层“div “apDiv2” ”（“金华山景区”图像所在层）和层div “apDiv8” ”（显示文本的层）为“显示”，其他层全部设置为“隐藏”，单击“确定”按钮，如下图所示。任务三 制作页面动态效果 什么叫行为？目录目录上一上一页页下一下一页页退出退出任务三 制作页面动态效果 层“apDiv2” 和层“apDiv8” 为“显示”，其他层全部设置为“隐藏”目录目录上一上一页页下一下一页页退出退出 B.为行为设置事件 在“行为”面板的事件栏中，选择该行为的事件为“onMouseOver”，效果如下图所示：任务三 制作页面动态效果 常用事件有哪些？常用行为有哪些？行为面板介绍。目录目

16、录上一上一页页下一下一页页退出退出 至此，为“金华山景区”热点添加了一个行为，此时预览“家乡山水”页面，鼠标移上“金华山景区”热点时，层“apDiv2”和“apDiv8 ”显示，其他层都隐藏，右侧显示的是“金华山景区”图像和简介。任务三 制作页面动态效果 2为“金华山景区”热点添加“设置容器的文本”行为 A.选中“金华山景区”热点，在“行为”面板中，选择“添加行为”按钮，在弹出的下拉菜单中选择菜单栏“设置文本”“设置容器的文本”选项，弹出“设置容器的文本”对话框，在“容器”中选择层“apDiv8 ”，在“新建HTML”中输入对该景区的简单介绍，然后单击“确定”按钮。效果如下图所示：目录目录上一

17、上一页页下一下一页页退出退出任务三 制作页面动态效果 输入对该景区的简单介绍选择层“apDiv8 ”目录目录上一上一页页下一下一页页退出退出 B.在“行为”面板的事件栏中，选择“onMouseOver”，按下F12预览页面，效果如下图所示。任务三 制作页面动态效果 左边选中景区，右边显示相应介绍。目录目录上一上一页页下一下一页页退出退出 使用以上方法，参照教材表5-1为其他热点设置“显示-隐藏元素”行为。注意在设置某一景区热点的行为时，将该景区图像所在层和用于显示文本的“apDiv8 ”层设置为“显示”，其他层设置为“隐藏”。 使用以上方法，参照教材表5-7为相应热点添加“设置容器的文本”行为

18、，输入热点相对应的景区介绍文字。 至此，“家乡山水”栏目的制作全部完成，保存并预览检查效果。任务三 制作页面动态效果 目录目录上一上一页页下一下一页页退出退出 任务小结任务小结 1掌握为热点添加“显示-隐藏元素”行为。 2掌握为热点添加“显示容器的文本”行为。任务三 制作页面动态效果 目录目录上一上一页页下一下一页页退出退出 举一反三：举一反三： 将本单元“举一反三”文件夹中的“pra5-4”文件夹复制到D盘根目录，为其中的两个网页“practice5-6.html”、“practice5-7.html”添加“打开浏览器窗口”行为，设置事件为“onLoad”，使浏览任一网页时，两个网页在两个浏

19、览器窗口中同时打开。 1启发思路： 注意选择正确的行为和事件。 2分组完成任务。任务三 制作页面动态效果 目录目录上一上一页页下一下一页页退出退出 作业作业任务三 制作页面动态效果 1创建网页“practice5-8.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-4.jpg”，为图像添加“弹出信息”行为，使鼠标经过图像时弹出信息“月到中秋分外明”。 2创建网页“practice5-9.html”，使用表格、AP元素及行为创建如课本图JYFS5-4所示菜单，鼠标移到菜单选项时显示下拉列表，移出时下拉列表隐藏，目录结构参照表JYFS5-1。（提示：应用显示-隐藏元素行为

20、完成）。相关知识：相关知识： 1锚记是在文档中设置的标记，这些标记通常放在文档的特定主题处或顶部。使用锚记分为两步，第一步添加锚记，第二步添加到该锚记的链接，这个链接可以快速将浏览者带到特定位置。 2锚记名称通常以英文字母起始，区分大小写，不能含有空格，也不能含有特殊字符。 如果锚记创建后，在网页制作窗口中却看不到锚记图标，选择菜单栏“查看”菜单里的“可视化助理”选项，勾选“不可见元素”即可。 锚记图标在预览时不显示。任务一 添加热点和锚记链接 3热点是对图像内一个区域的几何描述，一般每个热点都会链接到不同的网页、URL、锚记、图像等。任务一 添加热点和锚记链接 4热点工具介绍：多边形热点工具

21、椭圆形热点工具指针热点工具矩形热点工具 “ “指针热点工具指针热点工具”：选中此工具可以拖动热点改变位置，还可以拖动热点的顶点来改变其形状或大小。 “ “矩形热点工具矩形热点工具”：选中此工具后在图像上拖动鼠标可添加矩形热点，按住Shift键拖动可添加正方形热点。 “ “椭圆形热点工具椭圆形热点工具”：选中此工具后在图像上拖动鼠标可添加圆形热点。此工具不能添加椭圆形热点。 “ “多边形热点工具多边形热点工具”：选中此工具后可以在图像上通过鼠标点选（用鼠标连续单击图像中不同位置）添加多边形热点。 5热点“属性”面板： “链接”：用于设置热点的链接路径。添加锚记链接时，如果链接的锚记在本页面内，输

22、入“#”+“锚记名称”；如果不在本页面内，输入“链接路径”+“#”+“锚记名称”。 “目标”下拉列表中的“_blank”：表示在新的浏览器窗口中打开链接的文档，同时保持当前浏览器窗口不变。 “替换”：用于设置当鼠标指向该热区时显示的“替换文本”。有的浏览器不能显示替换文本。（IE6能显示，IE8不能显示。） 任务一 添加热点和锚记链接 6热点工具的使用： 移动热点：单击“属性”面板中的“指针热点工具”后，选中某个热点，可以通过拖拽移动它的位置，还可以利用键盘的方向键或Shift+方向键移动热点的位置。 调整热点的大小：用指针热点工具单击某个热点，然后将光标移到热点的顶点处，拖拽鼠标可以改变热点

23、的形状和大小。 选中多个热点：单击“属性”面板中的“指针热点工具”后，按住Shift键的同时，可以通过单击选中多个热点；按下键盘的Ctrl+A组合可以选中所有的热点。 任务一 添加热点和锚记链接相关知识：相关知识： 1插入层的另一种方法和层的操作？ A除了采用上述方法插入层外，还可以通过以下方法绘制层。方法一：单击“插入”栏“布局”类别中的“绘制AP Div”按钮，可以在“设计”视图中通过拖曳鼠标在任意位置绘制任意大小的层。方法二：单击“绘制AP Div”按钮后，按住Ctrl键，可以连续绘制多个层。 B选择一个层的方法方法一：在“AP元素”面板中单击该层的名称。方法二：单击状态栏中层的标签。方

24、法三：用鼠标单击层边框。如果在相同位置存在多个层，这种选择方法不可行。 任务二 添加和使用AP元素 C选择多个层的方法方法一：按住Shift键后单击“AP 元素”面板中各个层的名称。方法二：按住Shift键后单击各个层的边框或内部。如果在相同位置存在多个层，这种选择方法不可行。 D删除层的方法 选中层之后，按Delete键删除。 E修改层大小的方法 选中层后执行如下任一操作，都可以修改层的大小。 拖动该层的控制柄。 在层的“属性”面板中，输入“宽度”和“高度”值。 按住Ctrl键，同时使用方向键，可以以1个像素为单位精确调整大小。 按住Shift+Ctrl键，同时使用方向键，可以以10个像素为

25、单位调整大小。任务二 添加和使用层 F移动层的方法 选中层后使用鼠标拖拽。 选中层后使用方向键一次移动1个像素。按住Shift键同时使用方向键一次移动10个像素。 G对齐层的方法 选中多个层，然后在“修改”菜单的“排列顺序”选项中选择这些层的对齐方式。可以把选中的多个层按最后选中的一个层的位置对齐。任务二 添加和使用层 2属性面板各项的 含义？ “CSS-P元素”：用于设置层的名称，同一页面中的每个层都有唯一的名称。默认名称为“apDiv1”。 “左”和“上”：用于设置层的左上角相对于页面（如果是嵌套层，则相对于其父层）左上角的水平距离和垂直距离，值默认为0，单位默认为像素，通常使用默认值。“

26、宽”和“高”：用于设置层的宽度和高度。单位默认为像素。 “Z轴”：用于设置层在Z轴上的位置，即层叠顺序。在浏览器中，编号较大的层叠放在编号较小的层的上面。值可以为正，也可以为负。 “可见性”：用于设置层是否可见。default:默认值；inherit:继承父层的可见性；visible：可见；hidden：不可见。任务二 添加和使用层 “溢出”：用于设置当前层中的内容超出其大小时的状态。 Visible：层高度自动增加以容纳超出的内容；hidden：层大小不变，多出的内容隐藏；scroll：在预览时层自动加上滚动条；auto：自动识别是否显示滚动条，层中内容超过层的大小时显示，否则不显示。 “剪辑”：用于定义层在“文档窗口”中的可见区域，单位为像素。 任务二 添加和使用层 知识讲解：知识讲解： 1行为 行为是Dreamweaver CS5预置的JavaScript程序库。每个行为由一个动作和一个事件组成。其中，事件是指行为发生的条件，即触发动态效果的原因，如鼠标指向、单击等；动作是指事件发生后所作出的反应，即最终完成的动态效果，比如交换图像、弹出信息、播放声音等。 可以添加行为的对象有图像、热点、超级链接文本、多媒体文件或者网页本