电子商务网页设计(第二版)第二章

1、第2章 超链接制作本章要点Ø 超链接的基本概念、主要类型和表示方法Ø 超链接路径的概念、分类及书写规则Ø 超链接的文字超链接、图片超链接、Email超链接等实现方式重点难点Ø 超链接的多种实现方式§2.1 超链接概述一、 超链接基础(1) 超链接的概念 1) 超链接(hyperlink)是网页中的最重要元素，是网页的灵魂，它合理、协调地把网站中的众多页面构成一个有机整体，使访问者可以到达想要访问的页面。所谓的超链接是指从一个网页指向一个目标的链接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一

2、个文件，甚至是一个应用程序。 2) 超链接由两部分组成，即超链接源与超链接目标。超链接源可以是一段文本、一张图片或者一个按钮等。超链接目标同样也可以是一段文本、一张图片等。当浏览者单击已经链接的文字或图片后,超链接的目标将显示在浏览器上，并且根据目标的类型来打开或运行。(2) 超链接的分类 1) 按照超链接路径的不同,网页中超链接一般分为3种类型: 内部超链接,锚点超链接和外部超链接。在同一个网站内部，不同的html页面之间的链接关系称为内部超链接。在文档中插入一个位置标记,并给该位置设置一个名称,以便链接,把这样的超链接关系称为锚点超链接。打开的超链接目标在WWW(万维网)中的其他网站中时,

3、把这样的超链接关系称为外部超链接。 2) 按照超链接对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail超链接，锚点超链接，多媒体文件超链接，空链接等。 如图 2-1所示即为国内著名电子商务网站淘宝网首页内的部分不同类型的超链接。图片超链接表单超链接文字超链接图 2-1 存在多种超链接的电子商务页面讨论：请同学们再仔细找找，除图中提示的超链接还有没有其他类型的超链接？二、 超链接路径(1) URL（统 一资源定位符）在超链接中,是通过URL表达超链接路径的。一个网站就像一本书一样，一个网页就是书的一页，封面是主页，页码是网址，网址又称为“统一资源定位符”， 即URL（Uni

4、form Resource Locator）, URL与页面是一一对应的，互联网上的每一个页面都有一个特定的URL来对应。URL一般由协议、主机地址、目录、文档名等构成（图2-2）。 图2-2 URL的构成协议的常见类型见表 2-1所示。表2-1 URL协议表协议形式协议名称http:/超文本传输协议ftp:/文件传输协议Gopher:/分布型的文件搜集获取网络协议File:/本地文件访问协议Mailto:电子邮件地址News:Usernet新闻组Telnet:远程登陆协议(2) 文档路径类型文档路径类型通常分为三种：绝对路径、文档相对路径、根相对路径。各种路径类型的含义、表示方法及用途见表2

5、-2。表中以存放在c盘的website目录下img子目录中的文件index.htm为例进行讲解，并设在img子目录中，还存放有一名为jsj.htm的文件。表2-2 路径类型的含义、表示方法及用途路径类型含义表示方法实例用途优点绝对路径被链接的文档的完整的URL，包括所使用的传输协议c:/website/img/index.htm从一个网站的网页链接到另一个网站的网页时保证当一个网站的网址发生变化时，被引用的另一个页面的链接还是有效的文档相对路径以原来文档所在位置为起点到被链接文档经由的路径当在jsj.Htm网页文件内要链接到主页文件index.htm时：（index.htm为站点的主页）<

6、;a href="index.htm">主页</a>适用于本地链接当链接关系发生在一个同一个站点内时，链接速度将得到很大的提高根相对路径从站点根文件夹到被链接文档经由的路径website/img/index.htm指定网站内文档链接在移动一个包含相对链接的文档时，无需对原有的链接进行修改实战演练：利用http、ftp、file等协议在计算机上访问服务器中的相关文件§2.2 超链接的实现一般网页都是图文并茂，因为这样的网页看起来具有相当好视觉的效果，但是这对于网页来说还不够，为了网站中的众多网页能够成为一个有机的整体，必须将各个网页通过超链接方式相

7、互联系起来，这样才能够让浏览者在不同的页面之间跳转。如果没有了超链接，浏览者也就无法在WEB页面上访问到自己喜好的相关资料，比如电影、游戏、新闻等。如图 2-2所示即为国内著名电子商务网站淘宝网首页，该页面中存在多种类型的超链接。图 2-2 存在多种类型超链接的电子商务购物网页面讨论：请同学们以上图为例，说说图中哪几部分是超链接的？有哪些类型的超链接？在Dreamweaver 8 中，我们可以创建文档、图象、多媒体等文件或可下载软件的链接。因特网上的一切元素和内容都是通过链接来访问的，所以我们在学习网页制作时一定要全面地认识链接方面的知识。在本节的学习中我们可以了解到如何制作不同类型的链接，实

8、现超链接方式有多种，有文字、图片、热点、Email、锚点、行为、表单、Flash、下载链接。一、文本超链接在Dreamweaver 8 中，若要指定链接，可以先选中文字，打开“属性”面板的链接文本框，在其中输入要链接的文档名称或站点地址，也可以单击文本框右边的文件夹图标，在弹出的对话框中选择要链接的网页。 l 操作一 直接输入要链接的地址 （1）选中要做超链接的文本，打开“属性”面板的链接文本框。如图2-3所示选中要链接的文本在链接文本框中输入要链接的地址图 2-3 文本超链接的制作界面（2）在“链接”文本框里输入要链接的地址，例如：字体颜色蓝色，有下划线图 2-4 制作好的文本超链接样式l

9、操作二 单击“链接”框右边的文件夹图标，如图 2-5所示，在打开的“选择文件”对话框中浏览并选择一个文件。注意：在“选择文件”对话框中的“相对于”下拉菜单中，通常选择“文档”而不是选择“站点根目录”。单击“选择文件”对话框中的“确定”按钮，在“链接”框中将显示出被链接文件的路径。文件夹图标选择文件对话框图 2-5 属性面板上的“文件夹图标”及“选择文件”对话框l 操作三 选择被链接文档的载入位置，如图 2-6所示，在默认的情况下，被链接文档在当前窗口或框架中打开。要使被连接的文档显示在其他地方，需要从“属性”面板的“目标”下拉列表中选择一个选项。_black表示“新建窗口”，_self表示“相

10、同框架”，_top表示“整页”，_parent表示“父框架”。图 2-6 被链接文档的载入位置二、图片热点超链接 在Dreamweaver 8 中，若要使用图片制作链接，可以先选中图片，打开“属性”面板的链接文本框，在其中输入要链接的文档名称或站点地址，也可以单击文本框右边的文件夹图标，在弹出的对话框中选择要链接的网页。l 操作 在Dreamweaver 8中为图片建立热区 1启动Dreamweaver 8（其他版本请仿照操作），打开需要建立图片热区的网页文件，选中相应的图片，此时“属性”面板自动切换到“图片属性”状态（如图2-7）。单击该图片单击图片后的属性面板图 2-7 “属性”面板自动切

11、换到“图片属性”状态 2选中一种热区类型（如“椭圆”），然后在图片上拖来出一个热区来（参见图2-8） 注意：热区相当于是在图片上增加了一个图形层，象调整图片一样，可以通过鼠标调整热区的大小和位置。 使用热区选择按钮选取的热区 图 2-8 使用热区选取按钮选取的热区 3在“链接”右边的方框中输入要链接的网址（如“”）；在“替代”后面的方框中输入一些说明字符（如“天极网”）；按“目标”右边的下拉按钮，在随后出现的下拉列表中选择一种链接页面的打开方式（如需要让链接的页面在新窗口中打开，就选择“_blank”选项）。 注意：“替代”方框中输入的字符，在以后浏览网页时，当鼠标指向该热区时，在页面上会显示

12、出该字符（如图2-9）。当鼠标移动到热区的时候所显示的文字图 2-9 在页面上会显示出的字符 4重复上述2、3步的操作，在图片的不同部位建立多个热区。 三、E-mail超链接在网制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序 ，联系人的地址也已经填写好了。这也是一种超级链接。制作方法是：在编辑状态下，先选定 要链接的图片或文字（比如：欢迎您给提出更好的意见！），在插入栏点或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。（如图2-10） 字串图 2-9 电子邮件链接窗口图21 提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮

13、件地址 ”。 属性栏里所显示的邮件地址电子邮件链接属性窗口（如图2-10） 图2-10 电子邮件链接属性窗口创建完成后，保存面，按F12预览网效果。 四、锚点超链接假如网页上的内容很多，浏览者在浏览的时候就需要不断拖拉滚动条，很不方便。如果在该网页上建立一个目录，浏览者单击目录上的内容，就能自动跳转到相应的位置，就可以大大方便浏览，它相当于在网页上添加了一个书签，锚点链接就起到这样的作用，下面这个例子讲述了在网页中制作锚点链接的过程。       操作步骤：     （1）打开Dreamweaver 8，

14、按CtrlN新建一个HTML文档,在文档工具栏【标题】后面的文本框中输入“锚点链接”。     （2）执行【插入】|【表格】命令，打开【表格】对话框，设置【行数】为2，【列数】为1，【表格宽度】为700，在【表格宽度】后面的下拉列表中选择像素，【边框粗细】设为0【单元格边距】设为1，【单元格间距】设为2。如图2-11所示图2-11 表格设置图（3）将光标移到第1行单元格内，执行【插入】|【表格】命令，打开【表格】对话框，设置【行数】为1，【列数】为4，【表格宽度】为100，在【表格宽度】后面的下拉列表中选择百分比，【边框粗细】设为0，【单元格边距】设为1

15、，【单元格间距】设为2，为单元格插入一个嵌套表格。（4）将光标移到第2行单元格内，输入文字内容，并排好版式。如图2-12所示 (5) 将光标移到第1行第1列单元格内，输入文字，同样的，为其他3列也分别输入文字，然后同时选中4列单元格，执行【窗口】|【属性】命令，打开【属性检查器】，单击上面的【居中对齐】按钮 ，将文字居中对齐。如图2-13所示图2-12 输入文字图2-13 光标移到第1行第1列单元格内输入文字（6）将光标移到第二行文本中的标题“新浪科技讯”前面，执行【插入】|【命名锚记】命令，弹出【命名锚记】对话框，在【锚记名称】后面输入名称“xinlang”，单击【确定】按钮，此时，在文本中

16、“新浪科技讯”3个字前面加入了一个锚记图标 。如图2-14所示锚记符号锚记名称图2-14 锚记符号及锚记名称的输入（7）将光标移到第1行第1列单元格内，选中其中的文字“新浪科技讯”，执行【窗口】|【属性】命令，打开它的【属性检查器】，在【链接】后面输入锚记名称“#xinlang”。如图2-15输入#xinlang选中文本图2-15 制作好的锚记链接（8）同第（6）、（7）步，依次为其余的3个标题加入锚点链接，然后单击设计视图窗口左下角的<table>标签，选中整个表格，执行【窗口】|【属性】命令，打开【属性检查器】，在【背景颜色】后面的文本框中输入“#FFFF33”。可以为表格的文

17、本内容设置背景。如图2-16图2-16 设置背景后的网页（9）下面我们在文本中加入“返回”按钮，将光标移到第一行第一列，将光标移到第一列单元格，执行【插入】|【命名锚记】命令，弹出【命名锚记】对话框，在【锚记名称】后面输入名称“home”，单击【确定】按钮，此时，在第一列单元格内加入了一个锚记图标。如图2-17插入锚记图2-17 在第一行插入了锚记（10）在一段文字后面输入“【返回】”并选中该文字，执行【窗口】|【属性】命令，打开【属性检查器】，在【链接】后的文本框中输入锚记名称“#home”。如图2-18插入返回图2-18 插入返回锚记链接（11）按照第（10）步的设置，分别在其他段落末尾加

18、入“【返回】”链接。（12）按CtrlS保存文件，按下F12键，最终效果如图2-19图2-19 最终效果图五、创建本地网页间的链接制作网站时最常建立的链接是本地链接，在本地链接里我们分为同一个站点上的网页链接和本地不同站点间的网页链接。同一站点内的网页链接就是指在同一个站点内的不同页面间的链接，如2.2.4的锚点链接就是同一站点内的不同页面间的链接。本地不同站点是指一个服务器可以存放多个站点，如一些大型的网站服务器里可以存放多个站点，这一站点有些类似个人计算机中可以存放不同的文件，这些文件都有自己的存放位置而不会相互影响。或也可以理解成我们学生宿舍，虽然在一栋楼里，但是每个宿舍都是一个独立的房

19、间，那这栋楼我们就可以理解为一个服务器，每个宿舍就可以理解为个人站点。我们可以使用完整的URL建立本地网页的链接，但我们需要建立最快捷的链接到其他网页的方式，这样可以节省时间和系统资源。例如我们学生想到其他宿舍里去串们，这时我们只需要走过去就可以了，不需要按照我们宿舍的地址现到哪个市哪条路，然后在去学校找宿舍号。建立本地链接与我们这个去其他宿舍的例子类似，我们只需根据目前所在位置寻找一条最快捷的路径就可以了。1建立站点内的链接站点内的链接是建立网站最常用的链接方式，下面以文字链接为例说明建立站点内链接的方法。操作步骤：（1） 打开一个已建立好的站点的页面文件，输入文字。（2） 选中源链接文字。

20、（3） 执行“窗口/文件”命令，打开文件面板（文件面板内显示的是当前站点）。（4） 如图2-20所示，拖拽属性面板的指向文件按钮到目标网页，完成站点内网页间的链接设置。目标网页选中链接源单击文件按钮图2-20 注：在前面章节我们已经学习到构建网站的基本结构，如存放网页的文件夹、存放站点中图片的文件夹等，并使用文件面板建立相关的文件和文件夹。当我们使用文件面板打开站点时，站点会清晰地显示在文件面板中，这样我们可以利用文件面板方便地建立站点链接。2建立本地不同站点间网页的链接建立本地不同站点间的网页链接和建立本地站点内的网页链接有些类似。我们可以通过文件面板建立不同站点间的网页链接。下面以文字链接

21、为例子讲解不同站点间网页的链接。操作步骤：（1） 打开一个站点文件，输入文字。（2） 打开文件面板。（3） 在文件面板中选择其他站点，如图2-21所示。其他站点选中链接源图2-21 拖拽文件按钮指向其他站点链接地址栏（4） 选择链接的源文字，拖拽属性面板的指向文件按钮到目标网页，如图2-22所示，松开鼠标完成设置。图2-22 链接地址栏的地址为其他站点地址注：以上介绍的方法基于这个服务器中所有链接的网页站点均由你本人设计，你可以在本机中通过文件面板直接完成站点间的文件查找。当你有设置本地某个站点的权限时，你可以通过打开对方网页的方式获得对方网页的相对路径,例如网址, http:/taobao-

22、store/go58/t=7878778去掉基本的协议，得到/ taobao-store/go58/t=7878778，这就是这个网页的相对路径信息，在“链接”框中输入如file:/ taobao-store/go58/t=7878778即可。六、创建下载文件链接下载链接是一个比较常用的链接，许多网站都提供下载服务，这些下载服务提供的就是下载文件链接。下面我们一起来用实例介绍下载链接的制作方法。注：在制作前我们应该先在要使用站点内建立一个用来存储下载文件的文件夹，将下载文件存储到这个文件中。1 打开站点文件，在站点页面中输入“下载链接”。2 如图2-23所示，选中“下载链接”文字，点击属性面板

23、的浏览文件按钮，打开选择文件对话框。选择文件对话框选中链接源图2-23 选择文件对话框下载链接的下载文件3 如图2-24所示，在选择文件对话框中选择站点中的目标下载文件，点击“确定”按钮完成下载文件的建立。图2-24 在链接栏可以查看到下载文件注：也可以拖拽属性面板中的指向文件按钮，拖拽到目标下载文件，完成链接的建立。七、设置链接网页的打开方式当我们在Interenet中浏览网页的时候，我们单击超链接的时候，往往不同的网站的超链接打开方式也会不同。为什么我们在单击超链接的时候会有不同的打开方式呢，因为我们在设置链接的时候，链接网页的打开方式也是我们在制作超链接的同时需要设置的。下面我们看下面一个例子，如何设置链接网页的打开方式：1. 如图2-25所示，建立链接后，点击属性面板的目标选项，弹出网页打开方式菜单。2. 点击选择所需打开方式，完成设定。网页打开方式菜单图2-25 网页打开方式菜单链接网页打开方式菜单中个选项含义如下：见表2-2_black：将链接的文件在一个新的窗口中打开_parent：链接的文件在父窗口的框架下打开。如果这个父窗口中该部分内容是显示在下级窗口中，如某些网站中的滚动窗口等，那么这个链接内容会显示在这个小窗口中；如果这个链接框架不是嵌套的，那么直接在该窗口中显示新的网页内容_self：将链接的文件载入该链接所在的同一框架或窗口中。此项为默认值，不用