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

第2章 超链接制作 本章要点 超链接的基本概念、主要类型和表示方法 超链接路径的概念、分类及书写规则 超链接的文字超链接、图片超链接、Email超链接等实现方式 重点难点 超链接的多种实现方式 §2.1 超链接概述 一、 超链接基础 (1) 超链接的概念 1) 超链接(hyperlink)是网页中的最重要元素，是网页的灵魂，它合理、协调地把网站中的众多页面构成一个有机整体，使访问者可以到达想要访问的页面。 所谓的超链接是指从一个网页指向一个目标的链接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。 2) 超链接由两部分组成，即超链接源与超链接目标。超链接源可以是一段文本、一张图片或者一个按钮等。超链接目标同样也可以是一段文本、一张图片等。当浏览者单击已经链接的文字或图片后,超链接的目标将显示在浏览器上，并且根据目标的类型来打开或运行。 (2) 超链接的分类 1) 按照超链接路径的不同,网页中超链接一般分为3种类型: 内部超链接,锚点超链接和外部超链接。在同一个网站内部，不同的html页面之间的链接关系称为内部超链接。在文档中插入一个位置标记,并给该位置设置一个名称,以便链接,把这样的超链接关系称为锚点超链接。打开的超链接目标在WWW(万维网)中的其他网站中时,把这样的超链接关系称为外部超链接。 2) 按照超链接对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail超链接，锚点超链接，多媒体文件超链接，空链接等。 如图 2-1所示即为国内著名电子商务网站淘宝网首页内的部分不同类型的超链接。 图 2-1 存在多种超链接的电子商务页面 讨论：请同学们再仔细找找，除图中提示的超链接还有没有其他类型的超链接？ 二、 超链接路径 (1) URL（统 一资源定位符） 在超链接中,是通过URL表达超链接路径的。一个网站就像一本书一样，一个网页就是书的一页，封面是主页，页码是网址，网址又称为“统一资源定位符”， 即URL（Uniform Resource Locator）a href=\index.htm\主页/a 适用于本地链接 当链接关系发生在一个同一个站点内时，链接速度将得到很大的提高 根相对路径 从站点根文件夹到被链接文档经由的路径 website/img/index.htm 指定网站内文档链接 在移动一个包含相对链接的文档时，无需对原有的链接进行修改 实战演练： 利用http、ftp、file等协议在计算机上访问服务器中的相关文件 §2.2 超链接的实现 一般网页图文并茂，具有相当的效果，但是这对于网页来说还不够，为了网站中的众多网页能够成为一个有机的整体，必须将各个网页通过方式联系起来，这样才能够让浏览者在不同的页面之间跳转 图 2-3 文本超链接的制作界面 （2）在“链接”文本框里输入要链接的地址，例如：/gwzn,输入完后，我们可以看到“购物指南”已经是一个超链接，字体颜色变成蓝色，并带有下划线。如图2-4所示 图 2-4 制作好的文本超链接样式 操作二 单击“链接”框右边的文件夹图标，如图 2-5所示，在打开的“选择文件”对话框中浏览并选择一个文件。注意：在“选择文件”对话框中的“相对于”下拉菜单中，通常选择“文档”而不是选择“站点根目录”。单击“选择文件”对话框中的“确定”按钮，在“链接”框中将显示出被链接文件的路径。 图 2-5 属性面板上的“文件夹图标”及“选择文件”对话框 操作三 选择被链接文档的载入位置，如图 2-6所示，在默认的情况下，被链接文档在当前窗口或框架中打开。要使被连接的文档显示在其他地方，需要从“属性”面板的“目标”下拉列表中选择一个选项。_black表示“新建窗口”，_self表示“相同框架”，_top表示“整页”，_parent表示“父框架”。 图 2-6 被链接文档的载入位置 二、图片热点超链接 在Dreamweaver 8 中，若要使用图片制作链接，可以先选中图片，打开“属性”面板的链接文本框，在其中输入要链接的文档名称或站点地址，也可以单击文本框右边的文件夹图标，在弹出的对话框中选择要链接的网页。 操作 在Dreamweaver 8中为图片建立热区 1．启动Dreamweaver 8（其他版本请仿照操作），打开需要建立图片热区的网页文件，选中相应的图片，此时“属性”面板自动切换到“图片属性”状态（如图2-7）。 图 2-7 “属性”面板自动切换到“图片属性”状态 2．选中一种热区类型（如“椭圆”），然后在图片上拖来出一个热区来（参见图2-8） 注意：热区相当于是在图片上增加了一个图形层，象调整图片一样，可以通过鼠标调整热区的大