chapter5在网页中建立各种超级链接.pptxVIP

第5章 在网页中建立各种超链接——编织网站链接　计算机基础教学部.学习目标了解超链接的用途及类型了解与超链接相关的路径知识掌握在Dreamweaver中创建各种超链接的方法计算机工程学院　计算机基础教研室.实训项目需要通过超级链接从“慧衡”页面访问站内其他网页中的信息并掌握各种形式超链接的制作方法。需要设计:在introduce_link.html文件中建立文本内链接、外链接、空链接、脚本链接以及E-mail链接。在w02.html、w03.html、 w04.html 、 w06.html文件中建立图像链接用以返回introduce_link.html在show.html文件中建立锚点链接。在introduce-map.html文件中建立热点链接。在w02.html文件中建立下载链接 。计算机工程学院　计算机基础教研室.项目分析计算机工程学院　计算机基础教研室.设计思路：创建完成第4章的简单图文网页后，想通过这个页面访问到“慧衡科技”各栏目信息，那么怎么样到达这些栏目所在页面？有时还想通过页面使访问者发邮件联系网站或下载相关资源，或者访问站点外其他网站的页面。在Dreamweaver中可以为网页上的元素建立各种超链接实现页面间互访或完成其他任务。设计目标计算机工程学院　计算机基础教研室.预备知识：超链接类型（1）按使用对象进行分类文本链接：用文本作链接载体，简单实用。图像链接：用图像作为链接载体能使网页美观、生动活泼，它既可以指向单个的链接，也可以根据图像不同的区域建立多个链接。图像映像链接：将一个图像用热点工具分割为若干区域，然后将这些不同区域链接到不同的页面。邮件链接：当访问者单击该链接时，系统启动客户端电子邮件系统。空链接：链接一个未指派目标的超级链接。要想对文本设置行为，并使行为有效，需要为文本建立空链接。脚本链接：可以执行JavaScript代码或调用JavaScript函数，用于在不离开网页时给访问者提供项目的特定信息或执行其他处理任务。下载链接：用于下载网站提供的资源。用户单击后会出现下载界面。计算机工程学院　计算机基础教研室.预备知识：超链接类型（2）按链接路径进行分类内部链接：同一网站内文档之间的链接。外部链接：不同网站文档之间的链接。锚点链接：同一网页或不同网页中指定位置的链接。计算机工程学院　计算机基础教研室.预备知识：文件路径（1）绝对路径：使用完整的URL指定目标网页，是包含服务器协议的完全路径，通常使用HTTP://或FTP://来表示。当需要连接到Internet上的其他网页时，必须用绝对路径。（2）相对路径：相对路径用以表述源端点和目录端点的相互位置，即指所链接的目标文档的位置和当前源端点所在文档的文件夹相对的路径。对于目标文件在本站点中的链接来说，应用相对路径。（3）根路径：根路径是相对站点根文件夹到文档的路径。根路径以一个正斜杠开头，用以表示站点根文件夹。根路径常用于链接那些站点根目录要经常移动的链接。计算机工程学院　计算机基础教研室.制作流程任务1：创建文本链接任务4：制作热区并创建热点链接任务2：创建图像链接任务5：创建其他链接任务3：创建锚点链接计算机工程学院　计算机基础教研室.任务1 ——创建文本链接计算机工程学院　计算机基础教研室.STEP为文本“方案” 、“技术”、“服务”、“设计”、“案例”、“培训”和“慧衡”创建超链接，文本所链接的目标文件分别为：w01.html、w02.html、w03.html、w04.html、show.html、w06.html、introduce_link.html。为文本“粤ICP-1”创建外部超链接，链接目标为工信部网址：“/”计算机工程学院　计算机基础教研室.任务2 ——创建图像链接为w04.html、 w02.html、w03.html、w06.html上面的返回按钮制作图像超链接，返回的目标文件均为“introduce.html”。计算机工程学院　计算机基础教研室.任务3 ——创建锚点链接计算机工程学院　计算机基础教研室.STEP在页面下方（内容区域）的各网站名称前依次定义锚点（锚点名称依次命名为：website1，website2，website3，…，website18）为页面上方（网站名称列表）的各网站名称依次建立锚点链接，使浏览者点击页面上方各网站名称的文字后就会跳转到对应网站的案例展示位置。计算机工程学院　计算机基础教研室.任务4 ——制作热区并创建热点链接计算机工程学院　计算机基础教研室.任务5 ——创建其他链接计算机工程学院　计算机基础教研室.STEP1、2：创建空链接和脚本链接空链接脚本链接计算机工程学院　计算机基础教研室.STEP3：创建E-mail链接计算机工程学院　计算机基础教研室.STEP4：