Dreamweaver网页制作第五单元.课件

1、Dreamweaver网页制作第五单元 制作“家乡山水”网页主 编：王树平副主编：杜大志 刘彦惠 范永泰第1页，共62页。第五单元 制作“家乡山水”网页任务一 添加热点和锚记链接任务二 添加和使用层 任务三 制作页面动态效果 任务四 使用代码制作“异国风情”网页 第2页，共62页。 本单元将通过“添加热点与锚记链接”、“添加和使用层”以及“制作页面动态效果”几个任务来完成“家乡山水”页面的制作。 “家乡山水”页面的效果如下图所示： 整个页面分为左侧、右上和右下三部分，左侧放置景区地图图像，右上部放置景区名称，右下部显示景区图像及景区简介。 当鼠标指向景区地图的一个景区时，会在光标下方显示对应景

2、区的名称，同时在页面的右下部显示该景区的风景图像及简单介绍。当鼠标单击一个景区时，会另外打开一个“景区介绍”页面，如下图所示。 第五单元 制作“家乡山水”网页第3页，共62页。景区介绍 第五单元 制作“家乡山水”网页第4页，共62页。任务一 添加热点与锚记链接 任务描述：为景区地图中的各个景区与“景区介绍”页面中相关内容建立链接关系。 任务分析：建立好本单元的目录结构，在“景区介绍”页面中为每个景区的介绍内容添加锚记，之后在景区地图上按景区绘制热点，然后为每个热点添加锚记链接，链接到“景区介绍”页面的对应位置。 第五单元 制作“家乡山水”网页第5页，共62页。 自己动手 1建立本栏目目录结构所

3、在路径文件/文件夹的名字说明D:mysitetraveltravel.html“家乡山水”页面viewpoint.html“景区介绍”页面页面所需图像任务一 添加热点和锚记链接第6页，共62页。 2为“景区介绍”页面添加锚记 将光标放到表格第一行中的文本“金华山景区”前，单击“插入”栏“常用”类别中的“命名锚记”按钮，或选择菜单栏“插入”菜单下的“命名锚记”选项 ,弹出如下图所示的对话框。输入锚记名称“jd1”，单击“确定”按钮，在插入点处出现一个锚记图标。 1什么是锚记？2锚记如何命名？任务一 添加热点和锚记链接第7页，共62页。 根据下表所示对应关系，使用同样方法，为“景区介绍”页面中其他

4、5个景区添加锚记。 锚记名称 锚记位置“jd1”“金华山景区”前“jd2”“龙门天关景区”前“jd3”“白草畔景区”前“jd4”“鱼谷洞景区”前“jd5”“百里峡景区”前“jd6”“拒马河景区”前任务一 添加热点和锚记链接第8页，共62页。 3为“家乡山水”页面的景区地图添加热点 使用多边形热点工具为图中“金华山景区”添加热点。然后用同样的方法为其他景区添加热点。 绘制过程中，相邻的两个顶点会自动连接，起始和结束两个顶点会自动闭合。尚未点选的部分。3什么是热点？4热点工具有哪些？任务一 添加热点和锚记链接第9页，共62页。 4设置热点属性添加锚记链接 选中为“金华山景区”添加的热点，在“属性”

5、面板中， 进行如下设置：5热点属性面板各个属性的含义是什么？6热点工具的操作有哪些？任务一 添加热点和锚记链接第10页，共62页。热点区域锚记链接路径替换文本金华山景区“viewpiont.html#jd1”金华山景区龙门天关景区“viewpiont.html#jd2”龙门天关景区白草畔景区“viewpiont.html#jd3”白草畔景区鱼谷洞景区“viewpiont.html#jd4”鱼谷洞景区百里峡景区“viewpiont.html#jd5”百里峡景区拒马河景区“viewpiont.html#jd6”拒马河景区 依据下表所示，使用同样方法设置其他热点的属性，分别将其链接到“viewpio

6、nt.html”页面中对应景区介绍的锚记位置。 任务一 添加热点和锚记链接第11页，共62页。 任务总结： 通过完成以上任务，学习了什么是热点、如何添加热点、如何设置热点的属性和添加锚记以及创建锚记链接等。 任务一 添加热点和锚记链接第12页，共62页。 举一反三： 将本单元“举一反三”文件夹中的“pra5-1”文件夹拷贝到D盘根目录，利用图像文件“practice5-3.jpg”，制作一个有关荷花的简单网页“practice5-3.html”。使用多边形热点工具为图像中的荷花添加热点，熟悉使用指针热点工具对热点进行移动和修改大小的操作。添加替换文本“映日荷花別样红”，添加链接到“practi

7、ce5-4.html”，热点替换如下图所示。 1启发思路： 添加热点和创建锚记链接 2分组完成任务。任务一 添加热点和锚记链接第13页，共62页。 作业： 1 创建网页“practice5-1.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-1.jpg”，练习使用矩形热点工具、多边形热点工具和椭圆形热点工具绘制不同形状的热点。 2创建网页“practice5-2.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-2.jpg”，在图像上添加圆形热点，并添加替换文本“月到中秋分外明”。效果如图所示。任务一 添加热点和锚记链接第14页，共62页。任务

8、二 添加和使用层 任务描述：完成“家乡山水”页面中层的制作。 任务分析：景区地图上共有六个景区，每个景区对应一个层，加上初始显示层共有七个层叠放在同一位置，显示相应的图像。另外，还需要建立一个层，用于显示简单的介绍文字。本任务将在页面中插入八个层，改变层的大小，确定层的位置，然后在层中添加内容。第五单元 制作“家乡山水”网页第15页，共62页。 自己动手： 1插入层 在“文件”面板中双击“travel.html”文件，打开“家乡山水”网页。将光标放到表格“table3”的第一行，选择菜单栏“插入”“布局对象”“层”选项，插入一个层。使用同样方法，在表格“table3”的第一行中再插入6个层，分

9、别命名为“Layer2”、“Layer3”、“Layer4”、“Layer5”、“Layer6”和“Layer7”，然后在第二行中插入层“Layer8”。“层面板”如下图：勾选此处可以防止绘制层的过程中，层与层重叠。单击层名可选中层，双击可以修改层的名称。1插入层的另一种方法和层的操作。任务二 添加和使用层第16页，共62页。 2设置层的属性 在“层”面板中，单击“Layer8”选中该层，“属性”面板如下图所示 ：2属性面板各项的含义是什么？任务二 添加和使用层第17页，共62页。 3在层中添加内容 在“层”面板中选中层“Layer1”，将光标放入层中，用“插入”菜单插入“D:mysitetr

10、aveltlimages”文件夹中的图像“ysp.jpg”，用于显示“家乡山水”页面右下部的初始图像。用同样的方法为其他层添加内容 注意：要在层中添加内容，一定先要将光标放入该层中。任务二 添加和使用层第18页，共62页。4设置层的显示属性单击切换全部层是否可见。眼睛闭合表示层不可见，睁开表示层可见。单击切换该层是否可见。任务二 添加和使用层第19页，共62页。 任务总结： 通过完成以上任务，学习了如何插入层、设置层的属性以及如何在层中插入内容等。 任务二 添加和使用层第20页，共62页。 举一反三： 将本单元“举一反三”文件夹中的“pra5-2”文件夹拷贝到D盘根目录，运行Dreamweav

11、er 8，使用文件夹中的图像与文本制作“我的心事”网页“practice5-7.html”,整个页面使用层进行布局，效果如下图所示。 1启发思路： 回忆插入层的方法，在层中添加内容。 2分组完成任务。任务二 添加和使用层第21页，共62页。 作业： 1. 创建网页“practice5-5.html”，使用层完成如下工作：在图像“practice5-4.jpg”的上方叠放另一张图像“practice5-5.gif”（所需素材在本单元素材文件夹中的“举一反三”文件夹中），完成效果如下图所示。任务二 添加和使用层第22页，共62页。 2. 创建网页“practice5-6.html”，利用层的可重叠

12、性，制作阴影效果的文字，如下图所示。任务二 添加和使用层第23页，共62页。任务三 制作页面动态效果 任务描述：为“家乡山水”网页添加动态效果。 任务分析：通过为“家乡山水”网页中的热点添加“显示-隐藏层”行为，控制相应层的状态；添加“设置层文本”行为，控制层“Layer8”中显示的文本内容。第五单元 制作“家乡山水”网页 第24页，共62页。自己动手：1为“金华山景区”热点添加“显示-隐藏层”行为 A.为热点添加行为 在“文件”面板中双击“travel.html”文件，打开“家乡山水”页面，勾选“窗口”菜单中的“行为”选项，或者按下键盘的Shift+F4键打开“行为”面板。 选中景区地图“m

13、ap.jpg”中覆盖“金华山景区”的热点，单击“行为”面板上的“添加行为”按钮，在下拉菜单中选择“显示-隐藏层”选项，弹出“显示-隐藏层”对话框，设置层“Layer2”（“金华山景区”图像所在层）和层“Layer8”（显示文本的层）为“显示”，其他层全部设置为“隐藏”，单击“确定”按钮，如下图所示。任务三 制作页面动态效果 什么叫行为？第25页，共62页。任务三 制作页面动态效果 层“Layer2” 和层“Layer8” 为“显示”，其他层全部设置为“隐藏”第26页，共62页。 B.为行为设置事件 在“行为”面板的事件栏中，选择该行为的事件为“onMouseOver”，效果如下图所示：任务三

14、制作页面动态效果 常用事件有哪些？常用行为有哪些？行为面板介绍。第27页，共62页。 至此，为“金华山景区”热点添加了一个行为，此时预览“家乡山水”页面，鼠标移上“金华山景区”热点时，层“Layer2”和“Layer8”显示，其他层都隐藏，右侧显示的是“金华山景区”图像和简介。任务三 制作页面动态效果 2为“金华山景区”热点添加“设置层文本”行为 A.选中“金华山景区”热点，在“行为”面板中，选择“添加行为”按钮，在弹出的下拉菜单中选择菜单栏“设置文本”“设置层文本”选项，弹出“设置层文本”对话框，在“层”中选择层“Layer8”，在“新建HTML”中输入对该景区的简单介绍，然后单击“确定”按

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

16、，“家乡山水”栏目的制作全部完成，保存并预览检查效果。任务三 制作页面动态效果 第31页，共62页。 任务小结 1掌握为热点添加“显示-隐藏层”行为。 2掌握为热点添加“显示层文本”行为。任务三 制作页面动态效果 第32页，共62页。 举一反三： 将本单元“举一反三”文件夹中的“pra5-3”文件夹拷贝到D盘根目录，为其中的两个网页“practice5-8.html”、“practice5-9.html”添加“打开浏览器窗口”行为，设置事件为“onLoad”，使浏览任一网页时，两个网页在两个浏览器窗口中同时打开。 1启发思路： 注意选择正确的行为和事件。 2分组完成任务。任务三 制作页面动态效

17、果 第33页，共62页。 作业任务三 制作页面动态效果 1创建网页“practice5-10.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-2.jpg”，为图像添加“弹出信息”行为，使鼠标经过图像时弹出信息“月到中秋分外明”。 2创建网页“practice5-11.html”，使用表格、层及行为创建如课本图JYFS5-6所示菜单，鼠标移到菜单选项时显示下拉列表，移出时下拉列表隐藏，目录结构参照课本表JYFS5-1。第34页，共62页。任务四 使用代码制作“异国风情”网页 任务描述： 使用HTML代码编写网页，当单击导航图像中不同文字时，在网页中显示不同的内容。 任务

18、分析：网页由上下两部分组成，上半部分添加用于导航的文字图像，下半部分显示文字对应的风景图像。这些风景图像分别放在不同的层中，这些层重叠在相同位置，并且大小相同。通过为上半部分导航图像上的文字添加三个矩形热点、把热点链接到一段JavaScript代码，该代码功能为调用ShowDiv函数，该函数控制层的显示与隐藏，实现各热点的行为。 第五单元 制作“家乡山水”网页第35页，共62页。自己动手： 1准备工作。 在D盘新建一个名为“ygfq”的文件夹，将光盘中本单元素材“html”文件夹中的“htmlimages”文件夹拷贝到新建的文件夹中。在Dreamweaver 8中新建一个网页文件，命名为“yg

19、fq.html”，保存在新建的“ygfg”文件夹中。 将“文档”窗口切换到“代码”视图，标签中的内容以及标签进行如下修改。任务四 使用代码制作“异国风情”网页 第36页，共62页。异国风情任务四 使用代码制作“异国风情”网页 第37页，共62页。2.添加导航图片在标签之间，添加的代码如下。任务四 使用代码制作“异国风情”网页 浏览效果如下：第38页，共62页。3.给导航图像添加热点并设置热点的属性任务四 使用代码制作“异国风情”网页 热点标签语句格式讲解第39页，共62页。在和之间插入Javascript代码如下。 function ShowDiv(Tdiv) document.all.aa.

20、style.display=none; document.all.bb.style.display=none; document.all.cc.style.display=none; Tdiv.style.display=; 任务四 使用代码制作“异国风情”网页 第40页，共62页。 在 和标签之间添加代码如下 4.添加图像层，完成本任务 任务四 使用代码制作“异国风情”网页 层标签语句格式讲解第41页，共62页。通过完成本任务学习了使用HTML代码插入图像和层、 为给图像添加热点、为热点添加行为。 任务总结：任务四 使用代码制作“异国风情”网页 第42页，共62页。1启发思路：在分析网页时注

21、意以下几点：A.页面属性。B.层样式的定义。C.热点的定义。D.javascript函数的使用。 在Dreamweaver 8的代码视图下分析“异国风情”网页。举一反三：任务四 使用代码制作“异国风情”网页 2分组完成任务。第43页，共62页。作业：任务四 使用代码制作“异国风情”网页 1. 创建网页“practice5-12.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-10.jpg”，练习矩形热点的属性设置 2. 使用层代码编写网页“practice5-13.html”, 效果如课本图JYFS5-7所示。所需图像为本单元素材的举一反三文件夹中的“practice

22、5-11.jpg”和“practice5-12.jpg”。第44页，共62页。 3. 利用本单元素材举一反三文件夹中的“practice5-13.jpg”图像，使用代码制作页面“practice5-12.html”，给上面的人物添加圆形热点，为各个热点设置“alt”属性，设置热点的替换文本为卡通人物的名称，效果如课本图JYFS5-8所示。（七个小矮人的名字分别是万事通、害羞鬼、瞌睡虫、喷嚏精、开心果、迷糊鬼和爱生气）。提示：圆形热点属性包括：shape=“circle” cords=“centerx（圆心x轴的坐标），centery（圆心y轴的坐标），radius（圆的半径）“。任务四 使用代

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

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

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

26、点：单击“属性”面板中的“指针热点工具”后，按住Shift键的同时，可以通过单击选中多个热点；按下键盘的Ctrl+A组合可以选中所有的热点。 任务一 添加热点和锚记链接第50页，共62页。相关知识： 1插入层的另一种方法和层的操作？ A除了采用上述方法插入层外，还可以通过以下方法绘制层。 单击“插入”栏“布局”类别中的“绘制层”按钮，可以在“设计”视图中通过拖拽鼠标在任意位置绘制任意大小的层。单击“绘制层”按钮后，按住Ctrl键，可以连续绘制多个层。 B选择一个层的方法 在“层”面板中单击该层的名称。 单击“标签检查器”中层的标签。 用鼠标单击层边框。如果在相同位置存在多个层，这种选择方法不可

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

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

29、度和高度。单位默认为像素。 “Z轴”：用于设置层在Z轴上的位置，即层叠顺序。在浏览器中，编号较大的层叠放在编号较小的层的上面。值可以为正，也可以为负。 “可见性”：用于设置层是否可见。default:默认值；inherit:继承父层的可见性；visible：可见；hidden：不可见。任务二 添加和使用层第54页，共62页。 “溢出”：用于设置当前层中的内容超出其大小时的状态。 Visible：层高度自动增加以容纳超出的内容；hidden：层大小不变，多出的内容隐藏；scroll：在预览时层自动加上滚动条；auto：自动识别是否显示滚动条，层中内容超过层的大小时显示，否则不显示。 “剪辑”：用

30、于定义层在“文档窗口”中的可见区域，单位为像素。 任务二 添加和使用层第55页，共62页。 知识讲解： 1行为 行为是Dreamweaver 8预置的JavaScript程序库。每个行为由一个动作和一个事件组成。其中，事件是指行为发生的条件，即触发动态效果的原因，如鼠标指向、单击等；动作是指事件发生后所作出的反应，即最终完成的动态效果，比如交换图像、弹出信息、播放声音等。 可以添加行为的对象有图像、热点、超级链接文本、多媒体文件或者网页本身等。 任务三 制作页面动态效果 第56页，共62页。 2“行为”面板 添加、删除、修改行为等操作都可以在“行为”面板中完成。 “显示设置事件”按钮： “显示

31、所有事件”按钮： “添加行为”按钮： “删除行为”按钮： “增加/降低事件值”按钮：任务三 制作页面动态效果 第57页，共62页。 3浏览器所支持的一般事件类型 事件说明onClick鼠标单击时触发onDblClick鼠标双击时触发onMouseDown按下鼠标左键时触发onMouseUp鼠标左键按下后松开时触发onMouseOver当鼠标指针移上某对象时触发onMouseMove当鼠标移动时触发onMouseOut当鼠标离开某对象时触发onKeyPress当键盘上某个键按下并且放开时触发onKeyDown当键盘上某个键按下时触发onKeyUp当键盘上某个键松开时触发任务三 制作页面动态效果 第58页，共62页。 4Dreamweaver 8中预设的常用行为。 交换图像：通过更改“img”标签的“src”属性将一个图像和另一个图像进行交换。 恢复交换图像：将最后一组交换的图像恢复为它们以前的源文件。每次将“交换