项目四 创建超链接

Dreamweaver网页设计立体化教程（微课版）（DreamweaverCC2020）项目四创建超链接目录Contents任务一创建“佳美馨装饰——网站地图”网页中的超链接任务二创建“佳美馨装饰——联系我们”网页中的超链接实训一制作“中国皮影——网站地图”栏目网页实训二制作“中国皮影——皮影的制作流程”内容网页网站地图，又称站点地图，它是网站中的一个网页，其中通常罗列了网站中重要网页的超链接。网站地图既可以方便用户查找自己所需浏览的网页，也可以方便搜索引擎抓取网站中的网页。一、任务描述（一）任务背景（1）了解超链接的基本知识。（2）掌握创建文本超链接的方法。（3）掌握创建图像超链接的方法。（4）掌握创建图像热点超链接的方法。（二）任务目标二、相关知识（一）认识超链接超链接更强调一种相互关系，即从一个网页指向一个目标对象的链接关系。这个目标对象可以是一个网页或相同网页中的不同位置，也可以是图像、E-mail地址、文件等。在网页中设置超链接后，单击该超链接则可跳转到链接的网页。超链接主要由源端点和目标端点两部分组成，有超链接的一端称为超链接的源端点；单击超链接源端点后跳转到的网页所在的地址称为目标端点，即“URL”。超链接二、相关知识（一）认识超链接1．URL的基本格式URL的基本格式为：“访问方案://主机名:端口/路径/文件#锚记”。2．超链接的类型文本超链接图像超链接锚点超链接文件下载超链接电子邮件超链接空链接脚本链接二、相关知识（一）认识超链接3．超链接的路径超链接的路径根据链接路径的不同可分为文档相对路径、绝对路径和站点根目录相对路径等3种类型。文档相对路径是本地站点链接中较常用的链接形式。文档相对路径使用环境绝对路径绝对路径中有链接目标端点完整的URL地址，包括URL地址使用的协议。站点根目录相对路径以“/”开头，“/”代表网站的根目录二、相关知识（一）认识超链接4．超链接的目标超链接的目标是指用户单击超链接后目标网址的打开方式，一共有以下5种。_blank_parent_self_topnew二、相关知识（二）创建文本、图像超链接1．创建文本超链接在网页中，文本超链接是最常见的一种链接方式之一，它通过文本作为源端点来创建超链接。在网页中创建文本超链接的方法有以下4种。“Hyperlink”对话框指向文件二、相关知识（二）创建文本、图像超链接1．创建文本超链接选择链接文件输入HTML代码二、相关知识（二）创建文本、图像超链接2．创建图像超链接创建图像超链接的方法主要有为整个图像创建超链接和为图像热点（又称图像地图，表示图像中指定的部分热点区域）创建超链接两种方法。为图像创建超链接为图像热点创建超链接三、任务实施下面在“佳美馨装饰——网站地图”网页中创建文本超链接，具体操作如下。（一）创建文本超链接创建超链接三、任务实施（一）创建文本超链接创建其他文本超链接设置超链接属性三、任务实施下面在“佳美馨装饰——网站地图”网页中创建图像超链接，具体操作如下。（二）输入文本并设置格式创建图像超链接选择“a”选项设置“目标”属性三、任务实施下面在“佳美馨装饰——网站地图”网页中创建图像热点超链接，具体操作如下。（三）创建图像热点超链接创建图像热点超链接三、任务实施下面在浏览器中浏览“佳美馨装饰——网站地图”网页中创建的超链接的效果，具体操作如下。（四）浏览超链接效果选择文本超链接选择图像超链接选择图像热点超链接目录Contents任务一创建“佳美馨装饰——网站地图”网页中的超链接任务二创建“佳美馨装饰——联系我们”网页中的超链接实训一制作“中国皮影——网站地图”栏目网页实训二制作“中国皮影——皮影的制作流程”内容网页网页中的超链接除了可以实现跳转到其他网页的功能外，还实现跳转到网页中的特定位置、发送电子邮件、下载文件、执行JavaScript脚本程序等功能。在完成本任务时，灵活使用这些特殊形式的超链接可以使网页的功能更加强大，让用户可以快捷地完成一些操作，从而提供用户的使用体验。一、任务描述（一）任务背景（1）能够掌握创建锚点超链接的方法。（2）能够掌握创建电子邮件超链接的方法。（3）能够掌握创建空链接的方法。（4）能够掌握创建脚本链接的方法。（二）任务目标二、相关知识（一）认识锚点超链接插入锚点插入锚点的方法为：在“代码”视图中，将插入点定位到要插入锚点位置，然后输入“<aname=”锚点名“></a>”。1．插入锚点二、相关知识（一）认识锚点超链接设置对象ID选择要设置ID的对象，在“属性”面板的“ID”文本框中输入ID名称，也可以在“代码”视图中为对应的标签添加“id=”ID名称“”文本。2．设置对象ID二、相关知识（一）认识锚点超链接跳转到当前网页中的锚点锚点超链接有两种形式，一种是跳转到当前网页中的锚点。另一种是跳转到其他网页中的锚点。3．创建锚点超链接跳转到其他网页中的锚点二、相关知识（二）认识文件下载超链接Microsoft Edge浏览器的下载界面超链接链接的目标不仅可以是网页文件，还可以是其他格式的文件。当链接的目标是可以在浏览器中显示的文件格式时则会直接在浏览器中显示；当链接的目标是而一些不能在浏览器中显示的文件格式时则会将链接的文件下载到本地计算机，不同浏览器其下载界面各有不同。创建文件下载超链接的操作方法：在“设计”视图中选择需要创建链接的文本，然后在“属性”面板的“链接”文本框中输入或选择要下载文件的路径。创建文件下载超链接二、相关知识（三）认识电子邮件超链接单击电子邮件超链接将启动系统默认的电子邮件程序，并自动新建一封收件人为指定邮件地址的邮件，创建电子邮件超链接主要有以下3种方法：电子邮件超链接1.“电子邮件链接”对话框2.通过HTML代码创建3.通过“属性”面板创建二、相关知识（四）认识空链接单击空链接可以直接跳转到页面顶部，选择要创建空链接的文本或图像，在“属性”面板的“链接”文本中输入“#”文本创建空链接。创建空链接二、相关知识（五）认识脚本链接通过脚本链接可以执行一段JavaScript脚本程序，以实现各种不同的功能。创建脚本链接的方法主要有以下两种。通过“属性”面板设置选择要添加脚本链接的文本或图像，在“属性”面板的“链接”文本框中输入“javascript:脚本程序代码”，单击该脚本链接后将弹出一个提示对话框并显示“HelloWorld.”文本，通过事件属性设置选择要添加脚本链接的文本或图像，在“属性”面板的“链接”文本框中输入“#”创建空链接，然后切换到“代码”视图，在超链接的<a>标签中添加事件属性，再将属性值设置为脚本程序代码。三、任务实施下面为“佳美馨装饰——联系我们”网页中创建“意见反馈”和“意见处理结果”锚点超链接，具体操作如下。（一）创建锚点超链接设置“意见反馈”ID设置“意见处理结果”ID三、任务实施（一）创建锚点超链接创建“意见反馈”锚点超链接创建“意见处理结果”锚点超链接三、任务实施下面为“佳美馨装饰——联系我们”网页中创建“佳美馨服务手册下载”文件下载超链接和电子邮件超链接，具体操作如下。（二）创建文件下载超链接和电子邮件超链接创建文件下载超链接三、任务实施（二）创建文件下载超链接和电子邮件超链接创建电子邮件链接三、任务实施下面为“佳美馨装饰——联系我们”网页中创建“打印网页”脚本链接和“返回顶部”空链接，具体操作如下。（三）创建脚本链接和空链接创建脚本链接创建空链接目录Contents任务一创建“佳美馨装饰——网站地图”网页中的超链接任务二创建“佳美馨装饰——联系我们”网页中的超链接实训一制作“中国皮影——网站地图”栏目网页实训二制作“中国皮影——皮影的制作流程”内容网页本实训的要求是制作“中国皮影——网站地图”网页，在其中插入文本超链接、图像超链接和图像热点超链接，完成后的效果如图所示。实训要求实训一 制作“中国皮影——网站地图”栏目网页要完成本实训，首先应为最上方的“中国皮影”Logo图像创建图像超链接，然后为Banner图像中的“立即购票”按钮创建图像热点超链接，最后为各栏目中的文本创建文本超链接。实训思路“中国皮影——网站地图”网页效果实训一 制作“中国皮影——网站地图”栏目网页步骤提示本实训主要包括创建图像超链接、创建热点超链接，以及创建文本超链接3步操作，其步骤如图所示。① 创建图像超链接② 创建热点超链接③ 创建文本超链接目录Contents任务一创建“佳美馨装饰——网站地图”网页中的超链接任务二创建“佳美馨装饰——联系我们”网页中的超链接实训一制作“中国皮影——网站地图”栏目网页实训二制作“中国皮影——皮影的制作流程”内容网页本实训的要求是制作“中国皮影——皮影的制作流程”网页，通过锚点超链接和空链接实现网页内部各个部分的跳转，完成后的效果如图所示。实训要求