实现网页间的跳--超级链接

《实现网页间的跳--超级链接》由会员分享，可在线阅读，更多相关《实现网页间的跳--超级链接（53页珍藏版）》请在金锄头文库上搜索。

1、,实现网页间的跳转超级链接,项目6,6.1 网页展示：在“目的地”页面中应用超级链接,网页的最大特点体现在它可以通过超链接功能在众多的网页中互相跳转，在“乐途网”的“目的地”页面中分别应用了网页之间超链接，插入文本超链接、锚记超链接、外部超链接、图像超链接、导航工具条超链接、邮件超链接和下载文件超链接，“目的地”页面效果如图所示。,“目的地”页面效果,6.2 网页制作,6.2.1 设置导航条超链接 步骤1 启动Dreamweaver CS4后，在letuweb站点中创建新文档。 步骤2 在destination文档中绘制表格布局页面，输入相应的文字、选择图像等素材，插入页面顶部Logo及其他元

2、素。 步骤3 在表格的第3行定位光标，执行【插入】|【图像对象】|【导航条】菜单命令，弹出【插入导航条】对话框。 步骤4 在【插入导航条】对话框中输入“首页”项目名称；分别单击“状态图像”及“鼠标经过图像”右侧的“浏览”按钮，选择所需要的图像。,6.2 网页制作,步骤5 在【插入导航条】对话框中单击“按下时，前往的URL” 右侧的“浏览”按钮，选择超链接的目标文件。 步骤6 单击“”按钮，输入“目的地”项目名称，选择“目的地”项的“状态图像”及“鼠标经过图像”图像；在【插入导航条】对话框中的参数设置。 步骤7 单击“”按钮，输入“酒店机票”项目名称，用与“首页”相同的方法选择所需要的图像，【插

3、入导航条】对话框中的参数设置。,6.2 网页制作,步骤8 用同样的方法添加导航条中的其他项目，添加完6个项目后，单击“确定”按钮，完成导航条的插入，保存网页在letuwebch5文件夹中，并命名为：destination.htm。 步骤9 单击“预览”按钮，在浏览页面的导航条上移动光标，导航条会产生相应的变化，单击可以跳转到相应的页面上。,6.2 网页制作,6.2.2 创建文本与图片超链接 步骤1 创建文本超链接。在【属性】面板上单击“页面属性”按钮，设置文本链接的属性，参数设置。 步骤2 在“目的地”页面中选择文本“预订酒店”；在【属性】面板上单击“链接（L）”右侧的“浏览文件”按钮。 步骤

4、3 在弹出的【选择文件】对话框中，选择文件：QA.htm，单击“确定”按钮。,6.2 网页制作,步骤4 单击“预览”按钮，当鼠标指向文本“预订酒店”时，单击即可跳转到“酒店预订”页面上。 步骤5 创建图片超链接。在“目的地”页面上单击“黄山”图像。 步骤6 在【属性】面板上单击“链接（L）”右侧的“浏览文件”按钮，或直接输入超链接的目标文件名。 步骤7 单击“预览”按钮，当鼠标指向文本“黄山”图片时，单击即可跳转到“黄山”页面上。,6.2 网页制作,6.2.3 创建图像映像超链接 步骤1 在“目的地”页面上单击“地图”图片，在【属性】面板单击“矩形热点工具”按钮，在地图上的“北京”处绘制“矩形

5、。 步骤2 在【属性】面板上单击“链接（L）”右侧的“浏览文件”按钮，或直接输入超链接的目标文件名。 步骤3 单击“预览”按钮，当鼠标指向地图上的“北京”时，单击即可跳转到“北京”页面上。,6.2 网页制作,步骤4 在“目的地”页面上单击“地图”图片，在【属性】面板单击“多边形热点工具”按钮，在地图上的“广西”处绘制“多边形”。 步骤5 在【属性】面板上“链接（L）”文本框中直接输入超链接的目标文件名。 步骤6 单击“预览”按钮，当鼠标指向地图上的“广西”时，单击即可跳转到“广西”页面上。,6.2 网页制作,6.2.4 插入锚记超链接 步骤1 在“目的地”页面上，将光标定位在第1行左边（目标端

6、点）。 步骤2 执行【插入】【命名锚记】菜单命令，弹出【命名锚记】对话框，输入锚记名称。 步骤3 单击“确定”按钮，在光标定位处会出现一个“锚记”。,6.2 网页制作,步骤4 在“目的地”页面上选择源端点文本“返回到顶部”。 步骤5 在【属性】面板上“链接（L）”文本框中输入锚记名称：#page_top。 步骤6 单击“预览”按钮，当鼠标指向页面底部“返回到顶部”文本时，浏览页面将返回到顶部“锚记”处。,6.2 网页制作,6.2.5 创建电子邮件、下载文件、外部超链接 步骤1 创建电子邮件超链接。在“目的地”页面上选择“推荐本页给朋友”文本。 步骤2 执行【插入】【电子邮件链接】菜单命令，弹出

7、【电子邮件链接】对话框，在“E-Mail”文本框中输入地址，单击“确定”按钮。 步骤3 单击“预览”按钮，当鼠标指向地图上的“推荐本页给朋友”文本时单击，弹出【新邮件】对话框，即可实现邮件超链接。 步骤4 创建下载文件超链接。在“目的地”页面上，选择“照片下载”文本。,6.2 网页制作,步骤5 在【属性】面板上单击“链接（L）”右侧的“浏览文件”按钮，在弹出的【选择文件】对话框中，选择文件：风景图片.rar，单击“确定”按钮。 步骤6 单击“预览”按钮，当鼠标指向“照片下载”文本时单击，弹出【文件下载】对话框，单击“保存”按钮，可以下载文件。,6.2 网页制作,步骤7 创建外部超链接。在“目的

8、地”页面上，选择“火车时刻表”文本。 步骤8 在【属性】面板上“链接（L）”文本框中直接输入外部超链接的网址，如：http:/ 步骤9 单击“预览”按钮，在网页中单击“火车时刻表”文本，即可跳转到外部链接网页。,6.3 知识链接,网上冲浪时，,网上冲浪时，在Web页面中从一个页面跳转到另一个页面，即超级链接。通过设定超级链接把网上的资源链接起来，浏览者无须知道资源在哪里，也不会因为资源在“千里之外”就无法访问。这就是Web与其他媒体的最大区别和优势所在，不受地域、距离和时间的限制。,1超链接的概念 所谓超链接就是浏览者可以通过点击设置超链接的文字、图像等网页元素来访问与其链接的页面、图像等网页

9、元素或网站。Dreamweaver提供了多种创建链接的方法，可创建到文档、图像、多媒体文件或可下载软件的链接，可以建立到文档内任意位置的任何文本或图像的链接，包括标题、列表、表、绝对定位的元素或框架中的文本或图像。 超级链接由源端点和目标端点两部分组成，有超链接的一端为源端点（鼠标指针指向其上时光标形状为： ），跳转到的页面为目标端点。,6.3.1 超链接,6.3.1 超链接,2超链接的类型 （1）内部链接 内部链接可以跳转到本网站内其他文档或文件，如图形、电影、PDF或者声音文件。 （2）外部链接 外部链接可以链接到不属于本网站的资源，丰富网站的内容。 （3）锚记链接 锚记链接可以跳转到本站

10、点指定文档的位置。 （4）电子邮件链接 电子邮件链接可以启动电子邮件程序，允许用户书写电子邮件，并发送到指定地址。,6.3.1 超链接,3路径 从一个网页到另一个网页的链接是通过每个网页的地址来完成的。每个Web页面的唯一的地址，即统一资源定位器URL。链接路径有三种类型：绝对路径、相对路径、站点根目录相对路径。 （1）绝对路径 绝对路径提供所链接文档的完整URL，而且包括所使用的协议（如对于Web页面，通常使用HTTP协议），例如http:/ 对于外部链接必须使用绝对路径才能链接到其他服务器上的文档。对于内部链接也可以使用绝对路径链接，但是采用绝对路径不利于站点的移植。通过对内部链接使用相对

11、路径，能够提高文件在站点内移动时的灵活性。,6.3.1 超链接,（2）相对路径 对于大多数Web站点的本地链接来说，文档相对路径通常是最适合的路径。在当前文档与所链接的文档位于同一文件夹中，而且可能保持这种状态的情况下，文档相对路径特别有用。文档的相对路径还可用于链接到其他文件夹中的文档，方法是利用文件夹层次结构，指定从当前文档到所链接文档的路径。例如dreamweaver/contents.html。 文档的相对路径省略掉对于当前文档和所链接的文档都相同的绝对路径部分，而只提供不同的路径部分。例如，某站点的结构如图所示。,站点结构,6.3.1 超链接,（3）站点根目录相对路径 站点根目录相对

12、路径描述从站点的根文件夹到文档的路径。如果在处理使用多个服务器的大型Web站点，或者使用承载多个站点的服务器，则可能需要使用这类型路径。 站点根目录相对路径以一个正斜杠（/）开始，该正斜杠表示站点根文件夹。例如/support/dreamweaver/contents.html。,6.3.1 超链接,4设置文本超链接的属性 执行【修改】|【页页属性】菜单命令，或在【文件名】属性面板上单击“页面属性”按钮，在弹出的【页页属性】对话框中设置文本超链接的属性，如图所示。,设置“文本”链接属性,6.3.2 内部超链接,1创建文本或图像超链接 创建文本或图像超链接后，单击该文本或图像便可以打开链接所指向

13、的目标网页。创建文本与图像超链接的方法相同，下面仅以文本超链接为例，讲述文本或图像超链接的几种方法。 方法一：步骤1 在文档中选中超链接源端点的文本“欢迎您的光临”，如图所示。,教务处网站首页,6.3.2 内部超链接,步骤2 执行【插入】|【超级链接】菜单命令，或在【插入】面板中单击【常用】|【超级链接】按钮，打开【超级链接】对话框，如图所示。,【超级链接】对话框,6.3.2 内部超链接,步骤3 单击“链接”项右边的“浏览”按钮，在打开的【选择文件】对话框中选择超链接目标端点的文件：kcb.html，如图所示，单击“确定”按钮。,【选择文件】对话框,6.3.2 内部超链接,步骤4 返回【超级链

14、接】对话框，设置其他参数，如图所示，单击“确定”按钮。,超级链接参数设置,6.3.2 内部超链接,步骤5 保存文件，单击“预览”按钮，在打开的网页中点击“欢迎您的光临”文字后，页面就会跳转到教务处网站。 方法二： 在文档中选中超链接源端点的文本，在【属性】面板中的单击“链接（L）”文本框右侧的“浏览文件”按钮，也可以打开【选择文件】对话框，选择超链接目标端点的文件后，单击“确定”按钮，即可完成文本超链接。,6.3.2 内部超链接,方法三： 在文档中选中超链接源端点的文本，鼠标指向【属性】面板上的“指向文件”按钮，按下左键并拖动鼠标将出现指向线，指向【文件】面板中超链接目标端点的文件即可完成文本

15、超链接。 方法四： 选择超链接源端点的文本，按下Shift键，拖动鼠标将出现指向线，指向【文件】面板中超链接目标端点的文件即可完成文本超链接。,6.3.2 内部超链接,2创建图像映像 图像映像是指将一个图像分为多个部分，称为热区或热点，当用户单击某个热区时，会发生某种操作，比如打开链接网页等。图像映像可以将图像分成多个区域，链接到不同网页，也称为图像热点链接。 （1）定义图像热区 选中图像对象，在【图像】属性面板中选择热点工具：矩形、 圆形或多边形工具，如图所示，在需要创建超链接的区域上拖动鼠标创建热区形状。,热点工具,6.3.2 内部超链接,“热点工具”的功能如下： 矩形工具：拖动鼠标可以绘

16、制矩形热区； 圆形工具：拖动鼠标可以绘制圆形热区； 多边形工具：在起点处单击鼠标，依次在下一个节点处单击，可以创建不规则的多边形热区； 指针热点工具：单击选中热区，可以编辑或移动热区。,6.3.2 内部超链接,（2）创建图像映像 步骤1 选中图像，在【图像】属性面板中单击矩形工具，在图像上绘制“圆形”热区，如图所示。 步骤2 在【图像】属性面板中单击指针热点工具，编辑热区，如图所示。,绘制热区,编辑热区,6.3.2 内部超链接,步骤3 选中热区，并命名热区，在【热区】属性面板中单击“链接（L）”项右侧的“浏览文件”按钮，选择超链接的目标文件，如图所示。,设置“热区”的超链接,步骤4 保存文件，在浏览网页时，单击某个运动图标即可跳转到不同的运动说明网页。,6.3.2 内部超链接,3创建锚记链接 锚记链接可以将文档中的文字或图像链接到文档中指定的位置，文档可以是同