4.3.7插入超链接

1、本章简介： 网络中的每个网页都是通过超链接的形式关联在一起的，超链接是网页中最重要、最根本的元素之一。浏览者可以通过鼠标单击网页中的某个元素，轻松地实现网页之间的转换或下载文件、收发邮件等。要实现超链接，还要了解链接路径的知识。,第4章超链接,课堂学习目标,超链接的概念与路径知识 文本超链接 图像超链接 命名锚记超链接 热点链接,4.1实木地板网页,案例分析 设计理念 操作步骤 相关工具,4.1.1案例分析,实木地板是天然木材经烘干、加工后形成的地面装饰材料。它呈现出的天然原木纹理和色彩图案，给人以自然、柔和、富有亲和力的质感，是卧室、客厅、书房等地面装修的理想材料。网页设计要求突出产品特性，

2、营造出温馨的氛围。,4.1.2设计理念,在网页设计、制作过程中，通过室内家庭摄影作为网站背景，展现了网页宣传的主体；左侧的导航设计简单清晰，使浏览者一目了然，同时很好的分割了画面，形成丰富饱满的画面效果；整体温馨的色调营造出家的温暖氛围，使浏览者感到舒适和温馨。,实木地板网页效果图,4.1.3操作步骤,1 2,3 4,4.1.4相关工具,1. 超链接的概念与路径知识 超链接的主要作用是将物理上无序的内容组成一个有机的统一体。超链接对象上存放某个网页文件的地址，以便用户打开相应的网页文件。在浏览网页时，当用户将鼠标指针移到文字或图像上时，鼠标指针会改变形状或颜色，这就是在提示用户：此对象为链接对

3、象。单击这些链接对象，就可完成打开链接的网页下载文件、打开邮件工具收发邮件等操作。,2.创建文本链接 创建文本链接的方法非常简单，主要是在链接文本的“属性”面板中指定链接文件。指定链接文件的方法有3种。,直接输入要链接文件的路径和文件名 使用“浏览文件”按钮 使用指向文件图标,3.文本链接的状态,一个未被访问过的链接文字与一个被访问过的链接文字在形式上是有所区别的，以提示用户链接文字所指示的网页是否被看过。设置文本链接状态的具体操作步骤如下。,（1）选择“修改 页面属性”命令，弹出“页面属性”对话框。 （2）在对话框中设置文本的链接状态。选择“分类”列表框中的“链接”选项，单击“链接颜色”选项

4、右侧的图标 ，打开调色板，选择一种颜色来设置链接文字的颜色。,4.下载文件链接 浏览网站的目的往往是查找并下载文件，下载文件可利用下载文件链接来实现。建立下载文件链接的步骤如同创建文字链接，区别在于所链接的文件不是网页文件而是其他文件，如.exe、.zip等文件。 建立下载文件链接的具体操作步骤如下。 （1）在文档窗口中选择需添加下载文件链接的网页对象。 （2）在“链接”选项的文本框中指定链接文件。 （3）按F12键预览网页。,5.电子邮件链接 网页只能作为单向传播的工具，将网站的信息传给浏览者，但网站建立者需要接收使用者的反馈信息，一种有效的方式是让浏览者给网站发送E-mail。在网页制作中

5、使用电子邮件超链接就可以实现。 每当浏览者单击包含电子邮件超链接的网页对象时，就会打开邮件处理工具（如Outlook Express），并且自动将收信人地址设为网站建设者的邮箱地址，方便浏览者给网站发送反馈信息。,利用“属性”面板建立电子邮件超链接 利用“电子邮件链接”对话框建立电子邮件超链接,4.1.5 实战演练-摩托车改装网页,使用“属性”面板为文字制作空链接效果；使用“电子邮件链接”按钮制作电子邮件链效果；使用“属性”面板为文字制作下载链接效果；使用“CSS样式”改变链接的显示效果。,效果图,4.2口腔护理网页,案例分析 设计理念 操作步骤 相关工具,4.2.1案例分析,口腔是消化管的起

6、始部分，对于人类具有重要作用，口腔护理是我们每天必做的功课，因此长期不懈的努力才是根本之道，本例是口腔护理的宣传网页，要求体现健康、安全等信息。,4.2.2设计理念,在网页设计、制作过程中，背景采用浅灰色，使页面看起来洁净整洁、清新明快；导航栏放在页面的上方，方便用户浏览；板块分类明确，简洁直观，下方知识介绍充满趣味，增加了活泼的气息；整体设计干净清爽，版块分类清晰，视觉效果强烈。,口腔护理网页效果图,4.2.3操作步骤,1 2,3 4,4.2.4相关工具,1.图像超链接 建立图像超链接的操作步骤如下。 （1）在文档窗口中选择图像。 （2）在“属性”面板中，单击“链接”选项右侧的“浏览文件”按

7、钮 ，为图像添加文档相对路径的链接。 （3）在“替代”文本框中可输入替代文字。设置替代文字后，当图片不能下载时，会在图片的位置上显示替代文字；当浏览者将鼠标指针指向图像时也会显示替代文字。 （4）按F12键预览网页的效果。,2.鼠标经过图像链接 “鼠标经过图像”是一种常用的互动技术，当鼠标指针经过图像时，图像会随之发生变化。一般，“鼠标经过图像”效果由两张大小相等的图像组成，一张称为主图像，另一张称为次图像。主图像是首次载入网页时显示的图像，次图像是当鼠标指针经过时更换的另一张图像。“鼠标经过图像”经常应用于网页中的按钮上。,3.命名锚记链接 若网页的内容很长，为了寻找一个主题，用户往往需要拖

8、曳滚动条进行查看，非常不方便。Dreamweaver CS5提供了锚点链接功能可快速定位到网页的不同位置。,创建锚点 建立锚点链接,4.创建热区链接 创建热区链接的具体操作步骤如下。 （1）选取一张图片，在“属性”面板的“地图”选项下方选择热区创建工具。 （2）利用“矩形热点工具”、“圆形热点工具”、“多边形热点工具”和“指针热点工具”在图片上建立或选择相应形状的热区。 （3）在“属性”面板中进行设置。 （4）按F12键预览网页的效果。,4.2.5实战演练-花卉百科网页,使用命名“锚记”按钮插入锚点，制作文档底间移动到顶部效果。,效果图,4.3综合演练-茶文化网页,案例分析 设计理念 知识要点

9、,茶文化包括茶叶品评技法、艺术操作手段的鉴赏、品茗美好环境的领略等整个品茶过程的美好意境。其过程体现形式和精神的相互统一，是饮茶活动过程中形成的文化现象。它起源久远，历史悠久，文化底蕴深厚，网页设计要求突出茶文化的文化底蕴，以及它的美好意境。,4.3.1案例分析,在网页设计、制作过程中，淡雅朴素的色彩给人悠闲舒适的印象；素雅古朴的茶具和新鲜的茶叶搭配清新自然之感油然而生，具有民族特色和中国文化的特点，配上关于茶的诗词，更加提升了画面的中国文化气息；整体风格符合茶文化的特色，画面搭配舒适和谐。,4.3.2设计理念,使用输入链接地址制作外部链接效果；使用“电子邮件链接”命令制作电子邮件链接效果；使用“链接”按钮为文字添加下载链接效果。,效果图,4.3.3知识要点,4.4综合演练-绿色食品网页,案例分析 设计理念 知识要点,由于生活水平的提升居民对食物的要求提升，对绿色食品相当追求，绿色食品在中国是对具有无污染的安全、优质、营养类食品的总称，是无污染、无公害、安全、优质、营养型的食品。网页设计要求突出绿色食品健康无污染等特色。,4.4.1案例分析,在网页设计、制作过程