清华大学版（2012） 八年级下册信息技术 课件 - 3.9按图索骥——制作热点超链接 (共14张PPT)

按图索骥——制作热点超链接 1 任务导航 图文并茂是网页的一大特色，Dreamweaver CS5提供了多种利用图像制作特殊效果的方法，使网页内容更加直观、丰富。 本课，我们将在完成“家务劳动”网页的过程中，学习图像热点超链接，制作完成的网页效果如图所示。 2 1.图像热点超链接 步骤1：单击网页上要创建热点链接的图片（jwld.jpg）。 步骤2：在“属性检查器”中单击“圆形热点工具”按钮 ，如图所示。 3 步骤3：移动鼠标到网页编辑区内，可以看到鼠标指针变为代表精确定位的图标，拖动鼠标在图片jwld.jpg的左上角绘制圆形热区，如图所示。 4 步骤4：在“属性检查器”中单击“指针热点工具”按钮 ，结束绘制热点，在“链接”文本框中输入链接目标地址#daoju（即定位“如何安全使用刀具”的锚记），如图所示。 5 步骤5：在“属性检查器”中“替换”文本框内输入文字“如何安全使用刀具”，则在浏览网页的过程中，当鼠标指针指向此热区时，“替换”文本框内的文字就会显示，起到提示的作用，如图所示。 6 2.创建“家务劳动——防止烫伤”网页（jwld-fzts.html） （1）创建网页 执行“文件”→“新建”命令，选用module.dwt模板创建新网页，保存到Templates文件夹并命名为jwld-fzts.html，待页面元素都正确显示后，再拖动页面到rcsh文件夹下，生成的页面如图所示。 7 （2）将网页从模板中分离 执行“修改”→“模板”→“从模板中分离”命令，此时网页就与模板脱离开来，原有的“导航栏”、“标题”、“内容”等模板提示标签都不复存在，此时的网页就变成普通页面，所有锁定的区域都恢复成可以正常编辑的状态。 8 （3）编辑“防止烫伤”网页 步骤1：选中导航栏所在的表格，右击，在弹出的快捷菜单中选择“表格”→“删除列”命令。此时的网页效果如图所示。 9 步骤2：利用素材库中提供的图片和文本素材编辑网页，可参照图所示进行布局。 10 3.测试网页 保存网页文件，在浏览器中测试网页效果。 11 知识着陆 1.图像的热点链接是指在一个图像中可以创建多个热点区域，各个热点区域可以分别链接到不同的对象。 2.要修改利用网页模板创建的网页，