Dreamweaver网页制作网页制作第五单元第五单元 制作制作“家乡山水家乡山水”网网页页主 编：王树平副主编：杜大志 刘彦惠 范永泰 目录目录上一页上一页下一页下一页退出退出第五单元第五单元 制作制作“家乡山水家乡山水”网页网页任务一 添加热点和锚记链接任务二 添加和使用层 任务三 制作页面动态效果 任务四 使用代码制作“异国风情”网页 目录目录上一页上一页下一页下一页退出退出 本单元将通过“添加热点与锚记链接”、“添加和使用层”以及“制作页面动态效果”几个任务来完成“家乡山水”页面的制作 “家乡山水”页面的效果如下图所示： 整个页面分为左侧、右上和右下三部分，左侧放置景区地图图像，右上部放置景区名称，右下部显示景区图像及景区简介 当鼠标指向景区地图的一个景区时，会在光标下方显示对应景区的名称，同时在页面的右下部显示该景区的风景图像及简单介绍当鼠标单击一个景区时，会另外打开一个“景区介绍”页面，如下图所示 第五单元 制作“家乡山水”网页 目录目录上一页上一页下一页下一页退出退出景区介绍 第五单元 制作“家乡山水”网页 目录目录上一页上一页下一页下一页退出退出任务一任务一 添加热点与锚记链接添加热点与锚记链接 任务描述：任务描述：为景区地图中的各个景区与“景区介绍”页面中相关内容建立链接关系。
任务分析：任务分析：建立好本单元的目录结构，在“景区介绍”页面中为每个景区的介绍内容添加锚记，之后在景区地图上按景区绘制热点，然后为每个热点添加锚记链接，链接到“景区介绍”页面的对应位置 第五单元 制作“家乡山水”网页 目录目录上一页上一页下一页下一页退出退出 自己动手自己动手 1．建立本栏目目录结构建立本栏目目录结构所在路径文件/文件夹的名字说明D:\mysite\traveltravel.html“家乡山水”页面viewpoint.html“景区介绍”页面页面所需图像任务一 添加热点和锚记链接 目录目录上一页上一页下一页下一页退出退出 2 2．为．为““景区介绍景区介绍””页面添加锚记页面添加锚记 将光标放到表格第一行中的文本“金华山景区”前，单击“插入”栏“常用”类别中的“命名锚记”按钮，或选择菜单栏“插入”菜单下的“命名锚记”选项 ,弹出如下图所示的对话框输入锚记名称“jd1”，单击“确定”按钮，在插入点处出现一个锚记图标 1．什么是锚记？2．锚记如何命名？任务一 添加热点和锚记链接 目录目录上一页上一页下一页下一页退出退出 根据下表所示对应关系，使用同样方法，为“景区介绍”页面中其他5个景区添加锚记。
锚记名称 锚记位置“jd1”“金华山景区”前“jd2”“龙门天关景区”前“jd3”“白草畔景区”前“jd4”“鱼谷洞景区”前“jd5”“百里峡景区”前“jd6”“拒马河景区”前任务一 添加热点和锚记链接 目录目录上一页上一页下一页下一页退出退出 3．为为“家乡山水家乡山水”页面的景区地图添加热点页面的景区地图添加热点 使用多边形热点工具为图中“金华山景区”添加热点然后用同样的方法为其他景区添加热点 绘制过程中，相邻的两个顶点会自动连接，起始和结束两个顶点会自动闭合尚未点选的部分3．什么是热点？4．热点工具有哪些？任务一 添加热点和锚记链接 目录目录上一页上一页下一页下一页退出退出 4．设置热点属性添加锚记链接设置热点属性添加锚记链接 选中为“金华山景区”添加的热点，在“属性”面板中， 进行如下设置：5．热点属性面板各个属性的含义是什么？6．热点工具的操作有哪些？任务一 添加热点和锚记链接 目录目录上一页上一页下一页下一页退出退出热点区域锚记链接路径替换文本金华山景区“viewpiont.html#jd1”金华山景区龙门天关景区“viewpiont.html#jd2”龙门天关景区白草畔景区“viewpiont.html#jd3”白草畔景区鱼谷洞景区“viewpiont.html#jd4”鱼谷洞景区百里峡景区“viewpiont.html#jd5”百里峡景区拒马河景区“viewpiont.html#jd6”拒马河景区 依据下表所示，使用同样方法设置其他热点的属性，分别将其链接到“viewpiont.html”页面中对应景区介绍的锚记位置。
任务一 添加热点和锚记链接 目录目录上一页上一页下一页下一页退出退出 任务总结：任务总结： 通过完成以上任务，学习了什么是热点、如何添加热点、如何设置热点的属性和添加锚记以及创建锚记链接等 任务一 添加热点和锚记链接 目录目录上一页上一页下一页下一页退出退出 举一反三：举一反三： 将本单元“举一反三”文件夹中的“pra5-1”文件夹拷贝到D盘根目录，利用图像文件“practice5-3.jpg”，制作一个有关荷花的简单网页“practice5-3.html”使用多边形热点工具为图像中的荷花添加热点，熟悉使用指针热点工具对热点进行移动和修改大小的操作添加替换文本“映日荷花別样红”，添加链接到“practice5-4.html”，热点替换如下图所示 1．启发思路： 添加热点和创建锚记链接 2．分组完成任务任务一 添加热点和锚记链接 目录目录上一页上一页下一页下一页退出退出 作业：作业： 1． 创建网页“practice5-1.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-1.jpg”，练习使用矩形热点工具、多边形热点工具和椭圆形热点工具绘制不同形状的热点。
2．创建网页“practice5-2.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-2.jpg”，在图像上添加圆形热点，并添加替换文本“月到中秋分外明”效果如图所示任务一 添加热点和锚记链接 目录目录上一页上一页下一页下一页退出退出任务二任务二 添加和使用层添加和使用层 任务描述：任务描述：完成“家乡山水”页面中层的制作 任务分析：任务分析：景区地图上共有六个景区，每个景区对应一个层，加上初始显示层共有七个层叠放在同一位置，显示相应的图像另外，还需要建立一个层，用于显示简单的介绍文字本任务将在页面中插入八个层，改变层的大小，确定层的位置，然后在层中添加内容第五单元 制作“家乡山水”网页 目录目录上一页上一页下一页下一页退出退出 自己动手：自己动手： 1．插入层．插入层 在“文件”面板中双击“travel.html”文件，打开“家乡山水”网页将光标放到表格“table3”的第一行，选择菜单栏“插入”→“布局对象”→“层”选项，插入一个层使用同样方法，在表格“table3”的第一行中再插入6个层，分别命名为“Layer2”、“Layer3”、“Layer4”、“Layer5”、“Layer6”和“Layer7”，然后在第二行中插入层“Layer8”。
层面板”如下图：勾选此处可以防止绘制层的过程中，层与层重叠单击层名可选中层，双击可以修改层的名称1．插入层的另一种方法和层的操作任务二 添加和使用层 目录目录上一页上一页下一页下一页退出退出 2 2．设置层的属性．设置层的属性 在“层”面板中，单击“Layer8”选中该层，“属性”面板如下图所示 ：2．属性面板各项的含义是什么？任务二 添加和使用层 目录目录上一页上一页下一页下一页退出退出 3 3．在层中添加内容．在层中添加内容 在“层”面板中选中层“Layer1”，将光标放入层中，用“插入”菜单插入“D:\mysite\travel\tlimages”文件夹中的图像“ysp.jpg”，用于显示“家乡山水”页面右下部的初始图像用同样的方法为其他层添加内容 注意：要在层中添加内容，一定先要将光标放入该层中任务二 添加和使用层 目录目录上一页上一页下一页下一页退出退出4 4．设置层的显示属性．设置层的显示属性单击切换全部层是否可见眼睛闭合表示层不可见，睁开表示层可见单击切换该层是否可见任务二 添加和使用层 目录目录上一页上一页下一页下一页退出退出 任务总结：任务总结： 通过完成以上任务，学习了如何插入层、设置层的属性以及如何在层中插入内容等。
任务二 添加和使用层 目录目录上一页上一页下一页下一页退出退出 举一反三：举一反三： 将本单元“举一反三”文件夹中的“pra5-2”文件夹拷贝到D盘根目录，运行Dreamweaver 8，使用文件夹中的图像与文本制作“我的心事”网页“practice5-7.html”,整个页面使用层进行布局，效果如下图所示 1．启发思路： 回忆插入层的方法，在层中添加内容 2．分组完成任务任务二 添加和使用层 目录目录上一页上一页下一页下一页退出退出 作业：作业： 1. 创建网页“practice5-5.html”，使用层完成如下工作：在图像“practice5-4.jpg”的上方叠放另一张图像“practice5-5.gif”（所需素材在本单元素材文件夹中的“举一反三”文件夹中），完成效果如下图所示任务二 添加和使用层 目录目录上一页上一页下一页下一页退出退出 2. 创建网页“practice5-6.html”，利用层的可重叠性，制作阴影效果的文字，如下图所示任务二 添加和使用层 目录目录上一页上一页下一页下一页退出退出任务三任务三 制作页面动态效果制作页面动态效果 任务描述：任务描述：为“家乡山水”网页添加动态效果。
任务分析任务分析：通过为“家乡山水”网页中的热点添加“显示-隐藏层”行为，控制相应层的状态；添加“设置层文本”行为，控制层“Layer8”中显示的文本内容第五单元 制作“家乡山水”网页 目录目录上一页上一页下一页下一页退出退出自己动手：自己动手：1．为“金华山景区”热点添加“显示-隐藏层”行为 A.为热点添加行为 在“文件”面板中双击“travel.html”文件，打开“家乡山水”页面，勾选“窗口”菜单中的“行为”选项，或者按下键盘的Shift+F4键打开“行为”面板 选中景区地图“map.jpg”中覆盖“金华山景区”的热点，单击“行为”面板上的“添加行为”按钮，在下拉菜单中选择“显示-隐藏层”选项，弹出“显示-隐藏层”对话框，设置层“Layer2”（“金华山景区”图像所在层）和层“Layer8”（显示文本的层）为“显示”，其他层全部设置为“隐藏”，单击“确定”按钮，如下图所示任务三 制作页面动态效果 什么叫行为？ 目录目录上一页上一页下一页下一页退出退出任务三 制作页面动态效果 层“Layer2” 和层“Layer8” 为“显示”，其他层全部设置为“隐藏” 目录目录上一页上一页下一页下一页退出退出 B.为行为设置事件 在“行为”面板的事件栏中，选择该行为的事件为“onMouseOver”，效果如下图所示：任务三 制作页面动态效果 常用事件有哪些？常用行为有哪些？行为面板介绍。
目录目录上一页上一页下一页下一页退出退出 至此，为“金华山景区”热点添加了一个行为，此时预览“家乡山水”页面，鼠标移上“金华山景区”热点时，层“Layer2”和“Layer8”显示，其他层都隐藏，右侧显示的是“金华山景区”图像和简介任务三 制作页面动态效果 2．为“金华山景区”热点添加“设置层文本”行为 A.选中“金华山景区”热点，在“行为”面板中，选择“添加行为”按钮，在弹出的下拉菜单中选择菜单栏“设置文本”→“设置层文本”选项，弹出“设置层文本”对话框，在“层”中选择层“Layer8”，在“新建HTML”中输入对该景区的简单介绍，然后单击“确定”按钮效果如下图所示： 目录目录上一页上一页下一页下一页退出退出任务三 制作页面动态效果 输入对该景区的简单介绍选择层“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”文件夹拷贝到新建的文件夹中。
在Dreamweaver 8中新建一个网页文件，命名为“ygfq.html”，保存在新建的“ygfg”文件夹中 将“文档”窗口切换到“代码”视图，
标签中的内容以及<body>标签进行如下修改任务四 使用代码制作“异国风情”网页 目录目录上一页上一页下一页下一页退出退出<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>异国风情 -->任务四 使用代码制作“异国风情”网页 目录目录上一页上一页下一页下一页退出退出2.添加导航图片在……标签之间，添加的代码如下
任务四 使用代码制作“异国风情”网页 浏览效果如下： 目录目录上一页上一页下一页下一页退出退出3.给导航图像添加热点并设置热点的属性
任务四 使用代码制作“异国风情”网页 热点标签语句格式讲解 目录目录上一页上一页下一页下一页退出退出在和之间插入Javascript代码如下。
任务四 使用代码制作“异国风情”网页 目录目录上一页上一页下一页下一页退出退出 在 和标签之间添加代码如下 4.添加图像层，完成本任务
任务四 使用代码制作“异国风情”网页 层标签语句格式讲解 目录目录上一页上一页下一页下一页退出退出通过完成本任务学习了使用HTML代码插入图像和层、 为给图像添加热点、为热点添加行为。
任务总结：任务总结：任务四 使用代码制作“异国风情”网页 目录目录上一页上一页下一页下一页退出退出1．启发思路： 在分析网页时注意以下几点： A.页面属性 B.层样式的定义 C.热点的定义 D.javascript函数的使用 在Dreamweaver 8的代码视图下分析“异国风情”网页举一反三：举一反三：任务四 使用代码制作“异国风情”网页 2．分组完成任务 目录目录上一页上一页下一页下一页退出退出作业：作业：任务四 使用代码制作“异国风情”网页 1. 创建网页“practice5-12.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-10.jpg”，练习矩形热点的属性设置 2. 使用层代码编写网页“practice5-13.html”, 效果如课本图JYFS5-7所示所需图像为本单元素材的举一反三文件夹中的“practice5-11.jpg”和“practice5-12.jpg” 目录目录上一页上一页下一页下一页退出退出 3. 利用本单元素材举一反三文件夹中的“practice5-13.jpg”图像，使用代码制作页面“practice5-12.html”，给上面的人物添加圆形热点，为各个热点设置“alt”属性，设置热点的替换文本为卡通人物的名称，效果如课本图JYFS5-8所示。
七个小矮人的名字分别是万事通、害羞鬼、瞌睡虫、喷嚏精、开心果、迷糊鬼和爱生气）提示：圆形热点属性包括：shape=“circle” cords=“centerx（圆心x轴的坐标），centery（圆心y轴的坐标），radius（圆的半径）“任务四 使用代码制作“异国风情”网页 相关知识：相关知识： 1．锚记是在文档中设置的标记，这些标记通常放在文档的特定主题处或顶部使用锚记分为两步，第一步添加锚记，第二步添加到该锚记的链接，这个链接可以快速将浏览者带到特定位置 2．锚记名称通常以英文字母起始，区分大小写，不能含有空格，也不能含有特殊字符 如果锚记创建后，在网页制作窗口中却看不到锚记图标，选择菜单栏“查看”菜单里的“可视化助理”选项，勾选“不可见元素”即可 锚记图标在预览时不显示任务一 添加热点和锚记链接 3．热点是对图像内一个区域的几何描述，一般每个热点都会链接到不同的网页、URL、锚记、图像等任务一 添加热点和锚记链接 4．热点工具介绍：多边形热点工具椭圆形热点工具指针热点工具矩形热点工具 “ “指针热点工具指针热点工具””：选中此工具可以拖动热点改变位置，还可以拖动热点的顶点来改变其形状或大小。
“ “矩形热点工具矩形热点工具””：选中此工具后在图像上拖动鼠标可添加矩形热点，按住Shift键拖动可添加正方形热点 “ “椭圆形热点工具椭圆形热点工具””：选中此工具后在图像上拖动鼠标可添加圆形热点此工具不能添加椭圆形热点 “ “多边形热点工具多边形热点工具””：选中此工具后可以在图像上通过鼠标点选（用鼠标连续单击图像中不同位置）添加多边形热点 5．热点“属性”面板： “链接”：用于设置热点的链接路径添加锚记链接时，如果链接的锚记在本页面内，输入“#”+“锚记名称”；如果不在本页面内，输入“链接路径”+“#”+“锚记名称” “目标”下拉列表中的“_blank”：表示在新的浏览器窗口中打开链接的文档，同时保持当前浏览器窗口不变 “替换”：用于设置当鼠标指向该热区时显示的“替换文本”任务一 添加热点和锚记链接 6．热点工具的使用： 移动热点：单击“属性”面板中的“指针热点工具”后，选中某个热点，可以通过拖拽移动它的位置，还可以利用键盘的方向键或Shift+方向键移动热点的位置 调整热点的大小：用指针热点工具单击某个热点，然后将光标移到热点的顶点处，拖拽鼠标可以改变热点的形状和大小。
选中多个热点：单击“属性”面板中的“指针热点工具”后，按住Shift键的同时，可以通过单击选中多个热点；按下键盘的Ctrl+A组合可以选中所有的热点 任务一 添加热点和锚记链接 相关知识：相关知识： 1．插入层的另一种方法和层的操作？ A．除了采用上述方法插入层外，还可以通过以下方法绘制层 单击“插入”栏“布局”类别中的“绘制层”按钮，可以在“设计”视图中通过拖拽鼠标在任意位置绘制任意大小的层单击“绘制层”按钮后，按住Ctrl键，可以连续绘制多个层 B．选择一个层的方法 在“层”面板中单击该层的名称 单击“标签检查器”中层的标签
用鼠标单击层边框如果在相同位置存在多个层，这种选择方法不可行任务二 添加和使用层 C．选择多个层的方法 按住Shift键后单击“层”面板中各个层的名称 按住Shift键后单击各个层的边框或内部如果在相同位置存在多个层，这种选择方法不可行 D．删除层的方法 选中层之后，按Delete键删除。
E．修改层大小的方法 选中层后执行如下任一操作，都可以修改层的大小 拖动该层的控制柄 在层的“属性”面板中，输入“宽度”和“高度”值 按住Ctrl键，同时使用方向键，可以以1个像素为单位精确调整大小 按住Shift+Ctrl键，同时使用方向键，可以以10个像素为单位调整大小任务二 添加和使用层 F．移动层的方法 选中层后使用鼠标拖拽 选中层后使用方向键一次移动1个像素按住Shift键同时使用方向键一次移动10个像素 G．对齐层的方法 选中多个层，然后在“修改”菜单的“排列顺序”选项中选择这些层的对齐方式可以把选中的多个层按最后选中的一个层的位置对齐任务二 添加和使用层 2．属性面板各项的 含义？ “层编号”：用于设置层的名称，同一页面中的每个层都有唯一的名称第一次插入的层名称默认为“Layer1” “左”和“上”：用于设置层的左上角相对于页面（如果是嵌套层，则相对于其父层）左上角的水平距离和垂直距离，值默认为0，单位默认为像素，通常使用默认值。
宽”和“高”：用于设置层的宽度和高度单位默认为像素 “Z轴”：用于设置层在Z轴上的位置，即层叠顺序在浏览器中，编号较大的层叠放在编号较小的层的上面值可以为正，也可以为负 “可见性”：用于设置层是否可见default:默认值；inherit:继承父层的可见性；visible：可见；hidden：不可见任务二 添加和使用层 “溢出”：用于设置当前层中的内容超出其大小时的状态 Visible：层高度自动增加以容纳超出的内容；hidden：层大小不变，多出的内容隐藏；scroll：在预览时层自动加上滚动条；auto：自动识别是否显示滚动条，层中内容超过层的大小时显示，否则不显示 “剪辑”：用于定义层在“文档窗口”中的可见区域，单位为像素 任务二 添加和使用层 知识讲解：知识讲解： 1．行为 行为是Dreamweaver 8预置的JavaScript程序库。
每个行为由一个动作和一个事件组成其中，事件是指行为发生的条件，即触发动态效果的原因，如鼠标指向、单击等；动作是指事件发生后所作出的反应，即最终完成的动态效果，比如交换图像、弹出信息、播放声音等 可以添加行为的对象有图像、热点、超级链接文本、多媒体文件或者网页本身等 任务三 制作页面动态效果 2．“行为”面板 添加、删除、修改行为等操作都可以在“行为”面板中完成 “显示设置事件”按钮： “显示所有事件”按钮： “添加行为”按钮： “删除行为”按钮： “增加/降低事件值”按钮：任务三 制作页面动态效果 3．浏览器所支持的一般事件类型 事件说明onClick鼠标单击时触发onDblClick鼠标双击时触发onMouseDown按下鼠标左键时触发onMouseUp鼠标左键按下后松开时触发onMouseOver当鼠标指针移上某对象时触发onMouseMove当鼠标移动时触发onMouseOut当鼠标离开某对象时触发onKeyPress当键盘上某个键按下并且放开时触发onKeyDown当键盘上某个键按下时触发onKeyUp当键盘上某个键松开时触发任务三 制作页面动态效果 4．Dreamweaver 8中预设的常用行为。
交换图像：通过更改“img”标签的“src”属性将一个图像和另一个图像进行交换 恢复交换图像：将最后一组交换的图像恢复为它们以前的源文件每次将“交换图像”动作附加到某个对象时都会自动添加该动作；如果在附加“交换图像”时选择了“恢复”选项，就不再需要手动选择“恢复交换图像”动作 弹出信息：可显示一个带有用户指定信息的JavaScript警告框，可以为用户提供信息而不能让用户选择 打开浏览器窗口：可以在一个新的窗口中打开URL，可以指定新窗口的大小、特性和名称任务三 制作页面动态效果 播放声音：可以在网页中播放声音，例如，当鼠标滑过某图像时可以播放一段音乐；或者当页面载入时播放音乐 改变属性：可以通过改变图像、层、表单等的某个属性来实现动态效果，例如，层的背景颜色或图像的宽或高具体可以更改哪个属性由当前选用的浏览器来决定，IE4.0中可以通过此行为更改的属性比IE3.0多得多 设置文本：可用于设置层文本、框架文本、状态栏文本和表单元素中的文本域文本 预先载入图像：用于将不立即显示在网页中的图像预先载入浏览器缓存中，防止当图像显示时由于下载而导致延迟。
任务三 制作页面动态效果 知识讲解： 1．热点标签语句格式 “area”标签用于设置热点HTML中标签没有结束标志，而且这个元素总是嵌套在