网页设计与制作课件第5章.ppt

《网页设计与制作课件第5章.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作课件第5章.ppt（65页珍藏版）》请在金锄头文库上搜索。

1、第5章超级链接的使用编写组本章学习目标vv掌握超级链接的作用及类型vv掌握文本和图片链接的创建方法vv掌握Email、锚点链接的创建方法vv掌握热区链接的创建方法vv掌握链接效果的编辑方法5.1创建超级链接5.1.1超级链接的作用及类型 超链接超链接是文档与文档之间的链接，当单击它时，是文档与文档之间的链接，当单击它时，超链接可指向另外一个页面或文件。链接目标通常是超链接可指向另外一个页面或文件。链接目标通常是另外一个网页，但也可以是一幅图片、一个电子邮件另外一个网页，但也可以是一幅图片、一个电子邮件地址或其他文档。地址或其他文档。 在浏览器中，超链接通常以带下划线的文本以及在浏览器中，超链接

2、通常以带下划线的文本以及特定的颜色区别于网页内的其他内容，当鼠标指向它特定的颜色区别于网页内的其他内容，当鼠标指向它的时候，会变成手形，单击即可打开超链接。的时候，会变成手形，单击即可打开超链接。 有三种类型的链接路径：有三种类型的链接路径： 1 1、 绝对地址绝对地址 绝对路径由绝对路径由http:/http:/、ftp:/ftp:/等开始的，它不仅提等开始的，它不仅提供所链接文档的完整供所链接文档的完整 URLURL，而且包括所使用的协议，而且包括所使用的协议（如对于（如对于 WebWeb服务为服务为http:/http:/，FTPFTP服务为服务为ftp:/ftp:/）。）。注意：注意：

3、 尽尽管管对对本本地地链链接接（即即到到同同一一站站点点内内文文档档的的链链接接）也也可可使使用用绝绝对对路路径径链链接接，但但不不建建议议采采用用这这种种方方式式，因因为为一一旦旦将将此此站站点点移移动动到到其其它它服服务务器器，则则所所有有本本地地绝绝对对路路径径链链接接都都将将断断开开。对对本本地地链链接接使使用用相相对对路路径径还还能能在在需需要要在站点内移动文件时，提供更大的灵活性。在站点内移动文件时，提供更大的灵活性。 2 2、相对地址、相对地址 相对地址是由文件名及其扩展名组成的，并且假设相对地址是由文件名及其扩展名组成的，并且假设URLURL指向位于同一台指向位于同一台WEBW

4、EB服务器上的文件。服务器上的文件。例如，假设一个站点的结构如图例如，假设一个站点的结构如图5-1-15-1-1所示：所示：创建从创建从booklist1.htmbooklist1.htm到其它文件的链接，如下所示到其它文件的链接，如下所示(1) (1) 要要从从 booklist1.htm booklist1.htm 链链接接到到booklist2.htm booklist2.htm （两两个个文文件件在在同同一一文文件件夹夹中中），文文件件名名就就是是相相对对路路径径：booklist2.htmbooklist2.htm或或 ./booklist2.htm./booklist2.htm。其

5、其中中./ ./ 表表示示在同一文件夹中。在同一文件夹中。 (2) (2) 若要链接到若要链接到 book1.htmbook1.htm（在名为（在名为 book1 book1 的子文的子文件夹中），可使用相对路径件夹中），可使用相对路径 book1/book1.htmbook1/book1.htm。每。每个正斜杠个正斜杠 (/) (/) 表示在文件夹层次结构中下移一级。表示在文件夹层次结构中下移一级。 (3) (3) 若若 要要 链链 接接 到到 index.htmlindex.html （ 在在 父父 文文 件件 夹夹 中中 ，booklist1.htm booklist1.htm 向向 上

6、上 一一 级级 ） ， 可可 使使 用用 相相 对对 路路 径径././index.htmindex.htm。每每个个 ./ ./ 表表示示在在文文件件夹夹层层次次结结构构中中上上移一级。移一级。 (4) (4) 若若要要链链接接到到 picture1.htmpicture1.htm（在在父父文文件件夹夹的的其其它它子子文文件件夹夹中中），可可使使用用相相对对路路径径./mypictures/picture1.htm./mypictures/picture1.htm。其其中中 ./ ./ 向向上上移移至至父父文文件件夹夹； mypicturesmypictures/ / 向向下下移移至至 my

7、picturesmypictures子子文文件件夹中。夹中。 3 3、站点根目录相对路径、站点根目录相对路径 站站点点根根目目录录相相对对路路径径以以一一个个正正斜斜杠杠(/)(/)开开始始，该该正正斜斜杠杠 表表 示示 站站 点点 根根 文文 件件 夹夹 。 例例 如如 ， / /mybooksmybooks/ / booklist1.htm booklist1.htm 是是文文件件 (booklist1.htm) (booklist1.htm) 的的站站点点根根目目录录相相对对路路径径，该该文文件件位位于于站站点点根根文文件件夹夹的的 mybooksmybooks子子文件夹中。文件夹中。

8、在在某某些些 Web Web 站站点点中中，需需要要经经常常在在不不同同文文件件夹夹之之间间移移动动 HTML HTML 文文件件，在在这这种种情情况况下下，站站点点根根目目录录相相对对路路径径通通常常是是指指定定链链接接的的最最佳佳方方法法。移移动动含含有有根根目目录录相相对对链链接的文档时，不需要更改这些链接接的文档时，不需要更改这些链接 。在一个文档中可以创建几种类型的链接：在一个文档中可以创建几种类型的链接：vv 链链接接到到其其它它文文档档或或文文件件（如如图图形形、影影片片、PDF PDF 或或声声音音文件）的链接。文件）的链接。vv 命名锚记链接，此类链接跳转至文档内的特定位置。

9、命名锚记链接，此类链接跳转至文档内的特定位置。vv 电电子子邮邮件件链链接接，此此类类链链接接新新建建一一个个收收件件人人地地址址已已经经填填好的空白电子邮件。好的空白电子邮件。vv 空空链链接接和和脚脚本本链链接接，此此类类链链接接使使您您能能够够在在对对象象上上附附加加行为，或者创建执行行为，或者创建执行 JavaScript JavaScript 代码的链接。代码的链接。注注意意：创创建建链链接接之之前前，一一定定要要清清楚楚文文档档相相对对路路径径、站站点点根根目录相对路径以及绝对路径的工作方式。目录相对路径以及绝对路径的工作方式。 5.1.2 实例：创建超级链接1 1、实例创意、实例

10、创意 下下面面以以实实例例制制作作一一个个简简单单网网页页，实实例例中中只只用用到到简简单单的的几几个个页页面面元元素素，主主要要有有表表格格、文文本本和和图图片片。各各个个文文件件的文件名及位置如图的文件名及位置如图5-1-25-1-2如示。如示。2 2制作步骤制作步骤（1 1）定定义义本本书书素素材材sourcesource目目录录下下的的文文件件夹夹5-1-25-1-2为为本本地地站点目录。站点目录。（2 2）创建链接）创建链接 创创建建超超级级链链接接有有多多种种方方法法，本本节节将将分分别别介介绍绍几几种种不不同同 方式来完成超级链接的创建。方式来完成超级链接的创建。 多多数数情情况

11、况下下，创创建建链链接接在在【属属性性】面面板板中中完完成成，也也可可以以通过主菜单通过主菜单“ “【插入插入】【超级链接超级链接】” ”来完成。来完成。 打开根目录下的打开根目录下的index.htmindex.htm文件并选择文件并选择“ “【窗口窗口】【属性属性】” ”菜单命令，打开菜单命令，打开【属性属性】面板，如图面板，如图5-1-35-1-3所所示。示。 方法一：方法一： 选选择择页页面面上上方方文文字字“ “语语言言学学习习” ”，然然后后单单击击属属性性面面板板上上“ “链链接接”文文本本框框右右侧侧的的文文件件夹夹图图标标，弹弹出出“ “选选择择文文件件” ”对对话话框框，选

12、选择择“ “learnlanguage.htmlearnlanguage.htm”文文件件，在在对对话话框框“ “相相对对于于” ”中中选选择择“ “文文档档” ”，单单击击“ “确确定定” ”按按钮关闭对话框，如图钮关闭对话框，如图5-1-45-1-4所示。所示。 默认为“文挡”完成上述步骤，完成上述步骤，属性面板相应各项设置如图属性面板相应各项设置如图5-1-55-1-5所示。所示。 链接目标文件方法二：方法二： 将鼠标光标定位于页面中的文字将鼠标光标定位于页面中的文字“关于本站关于本站”后，选后，选择择主菜单主菜单“ “【插入插入】【超级链接超级链接】” ”，弹出，弹出“ “超级超级链接

13、链接” ”对话框，输入相应内容，如图对话框，输入相应内容，如图5-1-65-1-6所示。所示。 在在“ “超级链接超级链接” ”对话框中，设置以下选项：对话框中，设置以下选项：vv 文本文本文本文本：显示在页面中的文字。：显示在页面中的文字。vv 链接链接链接链接：所要链接的目标文档。：所要链接的目标文档。vv目目目目标标标标：为为打打开开的的窗窗口口类类型型（详详见见本本例例最最后后一一段）。段）。vv标标标标题题题题：为为鼠鼠标标置置于于链链接接文文字字上上方方时时所所出出现现的的提示。提示。效果如图效果如图5-1-75-1-7所示。所示。方法三：方法三： 打开打开属性面板，选择属性面板，

14、选择“ “链接链接(L)”(L)”右边的右边的“ “指向文指向文件件” ”图标图标“”“”，拖动该图标至站点目录下的，拖动该图标至站点目录下的“ “learnlanguage.htmlearnlanguage.htm”文件，即可自动生成链接。如文件，即可自动生成链接。如图图5-1-85-1-8所示。所示。 “指向文件”图标 如果同时打开两个或以上编辑窗口，则只需将如果同时打开两个或以上编辑窗口，则只需将“指指向文件向文件”图标直接拖动至目标窗口的任意位置即可自图标直接拖动至目标窗口的任意位置即可自动生成链接。如图动生成链接。如图5-1-95-1-9所示。所示。 “指向文件”图标指向目标窗口任意

15、位置方法四：方法四： 打开属性面板，在打开属性面板，在“ “链接链接(L)(L)” 直接输入链接地址，直接输入链接地址，如要链接到站点内的其他文档，输入目标文件的具体如要链接到站点内的其他文档，输入目标文件的具体路径与文件名；要链接到站点以外的文档，则输入完路径与文件名；要链接到站点以外的文档，则输入完整整 URLURL，而且包括所使用的协议。，而且包括所使用的协议。 例如，选中例如，选中“index.htmindex.htm”文档中的文档中的“logo.giflogo.gif”图片，打开图片，打开属性面板，在属性面板，在“ “链接链接(L)(L)”直接输入直接输入http:/http:/ 在

16、默认情况下，被链接的文件在当前窗口或框架内在默认情况下，被链接的文件在当前窗口或框架内打开。要使被链接的文档显示在其他窗口或新的窗口打开。要使被链接的文档显示在其他窗口或新的窗口或框架内，则需设置或框架内，则需设置属性面板中的属性面板中的“ “目标目标( (R R) )”选项，选项，如图如图5-1-115-1-11所示。所示。 目标选项“ “目标目标( (R R) )”的各选项设置如下：的各选项设置如下：vv _blank_blank_blank_blank。 将将链链接接的的文文档档在在一一个个新新的的、未未命命名名的的浏浏览览器窗口中打开。器窗口中打开。vv _parent_parent_

17、parent_parent。 将将链链接接的的文文档档在在该该链链接接所所在在框框架架的的父父框框架架或或父父窗窗口口中中打打开开。如如果果包包含含链链接接的的框框架架不不是是嵌嵌套套框框架，则所链接的文档在整个浏览器窗口中打开。架，则所链接的文档在整个浏览器窗口中打开。 vv _self_self_self_self。 将将链链接接的的文文档档在在链链接接所所在在的的同同一一框框架架或或窗窗口口中中打打开开，此此目目标标为为默默认认值值，即即不不指指定定目目标标，则则在在同同一框架或窗口打开文档。一框架或窗口打开文档。 vv _top_top_top_top。 将将链链接接的的文文档档在在整

18、整个个浏浏览览器器窗窗口口中中打打开开，从从而取代当前窗口的所有框架。而取代当前窗口的所有框架。 ll5.1.3实例：创建电子邮件链接1 1、 实例创意实例创意 电子邮件链接在网页中也经常可见，在网页中添加电子邮件链接在网页中也经常可见，在网页中添加电子邮件的目的在于可以使网页的浏览者方便发送邮电子邮件的目的在于可以使网页的浏览者方便发送邮件，点击电子邮件链接即可自动打开件，点击电子邮件链接即可自动打开Microsoft Microsoft Outlook ExpressOutlook Express，并自动创建新邮件，在，并自动创建新邮件，在“收件人收件人”栏自动添加电子邮件地址等。栏自动添

19、加电子邮件地址等。2 2、 制作步骤制作步骤 （1 1）定定义义本本书书素素材材sourcesource目目录录下下的的文文件件夹夹5-1-35-1-3为为本本地地站点目录。站点目录。打打开开根根目目录录下下的的about.htmabout.htm文文件件，选选择择“ “【窗窗口口】【属属性性】” ”菜单命令，打开属性面板，如图菜单命令，打开属性面板，如图5-1-125-1-12所示。所示。 （2 2）创建电子邮件链接）创建电子邮件链接 在大多数情况下，创建电子邮件链接在属性面板中完在大多数情况下，创建电子邮件链接在属性面板中完成，也可以通过主菜单成，也可以通过主菜单“ “【插入插入】【电子邮

20、件链接电子邮件链接(L) (L) 】” ”来完成。我们分别以几种不同方式来完成电来完成。我们分别以几种不同方式来完成电子邮件链接的创建。子邮件链接的创建。 方法一：方法一：选选中中所所要要创创建建电电子子邮邮件件的的文文本本“ “”，属属性性面面板板的的“ “链链接接( (L L) )” ”输输入入mailto:mailto:即可，如图即可，如图5-1-135-1-13所示。所示。 直接输入mailto:方法二：方法二： 将将鼠鼠标标光光标标定定位位于于页页面面中中要要显显示示电电子子邮邮件件的的地地方方，选选择择主主菜菜单单“ “【插插入入】【电电子子邮邮件件链链接接( (L L) ) 】”

21、 ”，弹弹出出“ “电电子子邮邮件件链链接接” ”对对话话框框，输输入入相相应应内内容容后后单单击击“ “确定确定” ”按钮，如图按钮，如图5-1-145-1-14所示。所示。“ “电子邮件链接电子邮件链接” ”对话框中，设置以下选项：对话框中，设置以下选项：vv文本文本文本文本。显示在页面中的文字，可以为。显示在页面中的文字，可以为EmailEmail地址地址或其它文字。或其它文字。vvE-mailE-mailE-mailE-mail。邮件地址。邮件地址。5.1.4实例：创建锚点链接 1 1、 实例创意实例创意 锚锚点点即即为为一一个个文文档档中中的的某某一一个个特特定定的的位位置置的的标标

22、记记，通通过过首首先先创创建建锚锚点点，可可使使某某个个超超级级链链接接链链接接到到文文档档的的某个锚点，方便文档之间的跳转。某个锚点，方便文档之间的跳转。 锚锚点点通通常常放放在在文文档档的的特特定定主主题题处处或或顶顶部部。然然后后可可以以创创建建到到这这些些锚锚点点的的链链接接，这这些些链链接接可可快快速速将将访访问问者者带带到指定位置。到指定位置。 创建到锚点的链接的过程分为两步。首先，创建创建到锚点的链接的过程分为两步。首先，创建锚点，然后创建到该锚点的链接。锚点，然后创建到该锚点的链接。 2 2、 制作步骤制作步骤 （1 1）定定义义本本书书素素材材sourcesource目目录录

23、下下的的文文件件夹夹5-1-45-1-4为为本本地站点目录。地站点目录。打打开开根根目目录录下下的的traandwri.htmtraandwri.htm文文件件，选选择择“ “【窗窗口口】【属属性性】” ”菜菜单单命命令令，打打开开属属性性面面板板。如如图图5-1-155-1-15所所示示（2 2）创建锚点）创建锚点 将鼠标光标定位于页面中标题将鼠标光标定位于页面中标题“翻译与写作翻译与写作”文文字之后，选择字之后，选择主菜单主菜单“ “【插入插入】【命名锚记命名锚记( (N N) ) 】” ”，弹出，弹出“ “命名锚记命名锚记” ”对话框，输入对话框，输入“ “命名锚记返回命名锚记返回顶部顶

24、部” ”文字后单击文字后单击“ “确定确定” ”按钮，如图按钮，如图5-1-165-1-16所示。所示。 创建锚点后，在锚点的插入处出现一个锚点标记，创建锚点后，在锚点的插入处出现一个锚点标记，如图如图5-1-175-1-17所示。所示。 锚点标记注意：注意： 命名锚记名称只能包含字母和数字并且不能以命名锚记名称只能包含字母和数字并且不能以数字开头。数字开头。 （3 3）创建到锚点的链接）创建到锚点的链接 1 1）选中所打开的文档中的）选中所打开的文档中的“返回顶部返回顶部”文字；文字； 2 2）拖动）拖动属性面板中属性面板中“ “链接链接(L)(L)”右边的右边的“ “指向文件指向文件” ”

25、图标图标“”“”至所创建的锚点标记即完成创建到该锚点的至所创建的锚点标记即完成创建到该锚点的链接。如图链接。如图5-1-185-1-18所示。所示。 “指向文件”图标锚点标记时，在“链接”处会出现该锚的名称。注意：注意： 1.1.创建到锚点的链接，会在锚点名称前加一个创建到锚点的链接，会在锚点名称前加一个“”号，号，表示后面为一个锚点的名称。表示后面为一个锚点的名称。2.2.若要创建到其他文档的锚点，只要在文档名后加若要创建到其他文档的锚点，只要在文档名后加“锚点名称锚点名称”即可。如要链接到即可。如要链接到abount.htmabount.htm文档中一个文档中一个名为名为aboutmeab

26、outme的锚点，只需在链接中输入的锚点，只需在链接中输入“about.htm#aboutmeabout.htm#aboutme”即可。如图即可。如图5-1-195-1-19所示。所示。3.3.选中打开的文档中文本或图像，并拖动到所要链接的选中打开的文档中文本或图像，并拖动到所要链接的锚点，也同样可以创建到锚点的链接。锚点，也同样可以创建到锚点的链接。 直接输入：about.htm#aboutme5.1.5 5.1.5 实例：创建热区链接实例：创建热区链接 1 1、 实例创意实例创意 一一张张图图片片内内可可以以创创建建包包含含多多个个链链接接，图图像像内内不不同同的的区区域域或或文文字字都都

27、可可以以指指向向具具体体链链接接目目标标。图图像像图图内内创创建建链链接接的的区区域域称称为为“热热区区”，热热区区与与链链接接目目标标逐逐一一对对应应，单击热区后，即可对链接目标进行跟踪、访问。单击热区后，即可对链接目标进行跟踪、访问。 热区的形状有三种：矩形、圆形与多边形，在热区的形状有三种：矩形、圆形与多边形，在DreamweaverDreamweaver MX 2004 MX 2004的的“设计视图设计视图”模式下，这些模式下，这些热热区是可见的区是可见的，但在，但在WEBWEB浏览内这些边框却是不可见的，浏览内这些边框却是不可见的，因此有必要在图像地图内添加一些文本标识，为浏览因此有

28、必要在图像地图内添加一些文本标识，为浏览者了解热点的确切位置提供帮助。者了解热点的确切位置提供帮助。 2 2、 制作步骤制作步骤 1 1）定定义义本本书书素素材材sourcesource目目录录下下的的文文件件夹夹5-1-55-1-5为为本本地站点目录。地站点目录。 打打开开根根目目录录下下的的map.htmmap.htm文文件件，选选择择“ “【窗窗口口】【属性属性】” ”菜单命令，打开属性面板。如图菜单命令，打开属性面板。如图5-1-205-1-20所示。所示。 选中文档中的图片，属性面板出现相应的各项设选中文档中的图片，属性面板出现相应的各项设置。如图置。如图5-1-215-1-21所示

29、。所示。 选择选择“ “属性属性” ”面板中面板中“ “地图（地图（M M）” ”下图标中的某下图标中的某一形状，按住鼠标左键在图片中相应位置拖动即可建一形状，按住鼠标左键在图片中相应位置拖动即可建立一个矩形的立一个矩形的“ “热区热区” ”，在默认情况下，刚创建的热，在默认情况下，刚创建的热区的区的“ “链接链接( (L L) )”为为“ “” ”，需要手动设置链接的目标，需要手动设置链接的目标网址，同时也可设置网址，同时也可设置“ “目标目标( (R R) )”及及“ “替代（替代（T T）” ”。如图如图5-1-225-1-22所示。所示。 在在“ “属性属性” ”面板中，设置以下选项：

30、面板中，设置以下选项：vv 链接链接链接链接：链接的目标地址。：链接的目标地址。vv 目标目标目标目标：链接打开的窗口设置：链接打开的窗口设置：_blank_blank、_parent_parent、_self_self、_top_top。vv 替代替代替代替代：当图片无法显示时，在图片的位置用文字代替：当图片无法显示时，在图片的位置用文字代替显示。显示。创建热区链接后，在浏览器中打开创建热区链接后，在浏览器中打开map.htmmap.htm文档文档预览其效果，如图预览其效果，如图5-1-235-1-23所示。所示。 5.2编辑链接效果5.2.1 实例：自定义链接颜色 链接颜色可分为三种状态：

31、链接颜色链接颜色可分为三种状态：链接颜色（LinkLink）、访问过的链接颜色（）、访问过的链接颜色（VisitedVisited）、）、活动链接颜色（活动链接颜色（ActiveActive），通过），通过CSSCSS设置，链设置，链接还有第四种状态，即指向链接时的动态颜色接还有第四种状态，即指向链接时的动态颜色（HoverHover），默认的文字链接样式都是带下划），默认的文字链接样式都是带下划线的效果。在线的效果。在DreamweaverDreamweaver MX 2004 MX 2004中允许用中允许用户自定义链接的颜色（如果通过户自定义链接的颜色（如果通过CSSCSS的设置还的设置还

32、可以编辑各种链接的样式）。可以编辑各种链接的样式）。 1 1、 实例创意实例创意 自定义简单的链接颜色。自定义简单的链接颜色。2 2、 制作步骤制作步骤 （1 1）定义本书素材）定义本书素材sourcesource目录下的文件夹目录下的文件夹5-2-15-2-1为本地为本地站点目录。站点目录。（2 2）创建链接）创建链接 自定义链接颜色可以通过主菜单自定义链接颜色可以通过主菜单“ “【修改（修改（M M）】【页面属性页面属性( (P P)】” ”来完成。来完成。 打打开开根根目目录录下下的的linkcolor.htmlinkcolor.htm文文件件并并选选择择主主菜菜单单“ “【修修改改（M

33、 M）】【页页面面属属性性( (P P)】” ”打打开开“ “页页面面属属性性” ”对话框。如图对话框。如图5-2-15-2-1所示。所示。 在在“ “页面属性页面属性” ”对话框中，通过颜色拾取器或直接对话框中，通过颜色拾取器或直接输入各颜色代码。如图输入各颜色代码。如图5-2-25-2-2所示。所示。 创建热区链接后，在浏览器中打开创建热区链接后，在浏览器中打开linkcolor.htmlinkcolor.htm文档预览其效果，如图文档预览其效果，如图5-2-35-2-3所示。所示。 5.2.2 实例：同一网页中设置 二种不同的链接 默认的文字链接样式都是带下划线的效果，通过默认的文字链接

34、样式都是带下划线的效果，通过对对CSSCSS样式的重新编辑，可以设计出多彩的文字链接效样式的重新编辑，可以设计出多彩的文字链接效果。对链接样式的设计通过果。对链接样式的设计通过DreamweaverDreamweaver MX 2004 MX 2004的样的样式编辑器完成。式编辑器完成。 1 1、 实例创意实例创意 完成在同一网页中设计二种不同的链接样式，如完成在同一网页中设计二种不同的链接样式，如图图5-2-45-2-4所示。所示。 2 2、 制作步骤制作步骤 （1 1）定定义义本本书书素素材材sourcesource目目录录下下的的文文件件夹夹5-2-25-2-2为为本本地地站点目录。站点

35、目录。（2 2）自定义链接颜色）自定义链接颜色 打打开开根根目目录录下下的的2linkcolor.htm2linkcolor.htm文文件件，选选择择主主菜菜单单“ “【窗窗口口( (W)W)】【CSSCSS样样式式( (Y Y) )】” ”，出出现现“ “设设计计” ”面板。如图面板。如图5-2-55-2-5所示所示 单击单击“ “设计设计” ”面板中面板中 “ “新建新建CSSCSS样式样式” ”的图标，的图标，弹出弹出“ “新建新建CSSCSS样式样式” ”对话框，如图对话框，如图5-2-65-2-6所示。所示。 选择选择“ “选择器类型选择器类型” ”中的中的“ “高级（高级（IDID

36、、上下文选、上下文选择器等）（择器等）（A A）” ”，并在，并在“ “选择器选择器” ”中选择中选择“ “a:linka:link”，在，在“ “定义在定义在” ”选择选择“ “仅对该文档仅对该文档” ”，单击，单击“ “确定确定” ”按钮，弹出按钮，弹出“ “a:linka:link的的CSSCSS样式定义样式定义” ”对话框，在对话框，在“ “分分类类” ”中选择中选择“ “类型类型” ”后，在后，在” ”颜色颜色(C)(C)”中输入中输入“ “#FF0000#FF0000”。单击。单击“ “确定确定” ”按钮退出对话框。如图按钮退出对话框。如图5-5-2-72-7所示。所示。 选择“类

37、型”输入颜色：#FF0000 同同样样，单单击击“ “设设计计” ”面面板板中中 “ “新新建建CSSCSS样样式式” ”的的图图标，弹出标，弹出“ “新建新建CSSCSS样式样式” ”对话框。对话框。 选择选择“ “选择器类型选择器类型” ”中的中的“ “高级（高级（IDID、上下文选、上下文选择器等）（择器等）（A A）” ”，并在，并在“ “选择器选择器” ”选择选择“ “a:visiteda:visited”，单击，单击“ “确定确定” ”按钮，弹出按钮，弹出“ “a:visiteda:visited的的CSSCSS样式定义样式定义” ”对话框，在对话框，在“ “分类分类” ”中中选择

38、选择“ “类型类型” ”，在，在” ”颜色颜色(C)(C)”中输入中输入“ “#00FF00#00FF00”。单击单击“ “确定确定” ”按钮退出对话框。按钮退出对话框。 单单击击“ “设设计计” ”面面板板中中 “ “新新建建CSSCSS样样式式” ”的的图图标标，弹弹出出“ “新建新建CSSCSS样式样式” ”对话框。对话框。 选择选择“ “选择器类型选择器类型” ”中的中的“ “高级（高级（IDID、上下文选、上下文选择器等）（择器等）（A A）” ”，并在选择器中选择并在选择器中选择“ “a:hovera:hover”，单击单击“ “确定确定” ”按钮，弹出按钮，弹出“ “a:hove

39、ra:hover的的CSSCSS样式定义样式定义” ”对话框，在对话框，在“ “分类分类” ”中选择中选择“ “类型类型” ”，在，在” ”颜色颜色(C)(C)” ”中输入中输入“ “#0000FF#0000FF” ”。单击。单击“ “确定确定” ”按钮退出对话框。按钮退出对话框。 单单击击“ “设设计计” ”面面板板中中 “ “新新建建CSSCSS样样式式” ”的的图图标标，弹弹出出“ “新建新建CSSCSS样式样式” ”对话框。对话框。 选选择择“ “选选择择器器类类型型” ”中中的的“ “高高级级（IDID、上上下下文文选选择择器器等等）（A A）” ”，并并在在选选择择器器中中选选择择

40、“ “a:activea:active”，单单击击“ “确确定定” ”按按钮钮，弹弹出出“ “a:activea:active的的CSSCSS样样式式定定义义” ”对对话话框框，在在“ “分分类类” ”中中选选择择“ “类类型型” ”，在在” ”颜颜色色(C)(C)”中中输入输入“ “#FFFF00#FFFF00”。单击。单击“ “确定确定” ”按钮退出对话框。按钮退出对话框。 此时，已自定义超级链接的所有状态颜色：超级此时，已自定义超级链接的所有状态颜色：超级链接显示为红色（链接显示为红色（#FF0000#FF0000），访问过的超级链接显示），访问过的超级链接显示为绿色（为绿色（#00FF

41、00#00FF00），指向超级链接显示为蓝色），指向超级链接显示为蓝色（#0000FF#0000FF），活动超级链接为黄色（），活动超级链接为黄色（#FFFF00#FFFF00）。）。 凡是页面中的所有超级链接均按以上自定义的几凡是页面中的所有超级链接均按以上自定义的几种颜色显示。如图种颜色显示。如图5-2-85-2-8所示。所示。 通通过过CSSCSS的的设设置置，在在页页面面还还可可以以再再定定义义不不同同的的超超级级链接颜色。链接颜色。 单单击击“ “设设计计” ”面面板板中中 “ “新新建建CSSCSS样样式式” ”的的图图标标，弹弹出出“ “新建新建CSSCSS样式样式” ”对话框。

42、对话框。 选择选择“ “选择器类型选择器类型” ”中的中的“ “高级（高级（IDID、上下文选、上下文选择器等）（择器等）（A A）” ”，并在选择器中输入，并在选择器中输入“ “a.dbline:linka.dbline:link”，单击，单击“ “确定确定” ”按钮，弹出按钮，弹出“ “a.dbline:linka.dbline:link的的CSSCSS样式定义样式定义” ”对话框，在对话框，在“ “分类分类” ”中选择中选择“ “类型类型” ”，在，在” ”颜色颜色(C)(C)”中输入中输入“ “#FF00FF#FF00FF”，在，在“ “装饰装饰” ”中选择中选择“ “无（无（N N）

43、” ”。单击。单击“ “确定确定” ”按钮退出对话框。如图按钮退出对话框。如图5-2-95-2-9所示。所示。 单单击击“ “设设计计” ”面面板板中中 “ “新新建建CSSCSS样样式式” ”的的图图标标，弹弹出出“ “新建新建CSSCSS样式样式” ”对话框。对话框。 选择选择“ “选择器类型选择器类型” ”中的中的“ “高级（高级（IDID、上下文选、上下文选择器等）（择器等）（A A）” ”，并在选择器中输入，并在选择器中输入“ “a.dbline:visiteda.dbline:visited”，单击，单击“ “确定确定” ”按钮，弹出按钮，弹出“ “a.dblinea.dbline

44、: visited: visited的的CSSCSS样式定义样式定义” ”对话框，在对话框，在“ “分类分类” ”中选择中选择“ “类型类型” ”，在，在“ “颜色颜色(C)(C)”中输入中输入“ “#FFFF00#FFFF00”，在，在“ “装饰装饰” ”中选择中选择“ “无（无（N N）” ”。单击。单击“ “确定确定” ”按钮退出对话框。按钮退出对话框。 单单击击“ “设设计计” ”面面板板中中 “ “新新建建CSSCSS样样式式” ”的的图图标标，弹弹出出“ “新建新建CSSCSS样式样式” ”对话框。对话框。 选择选择“ “选择器类型选择器类型” ”中的中的“ “高级（高级（IDID

45、、上下文选、上下文选择器等）（择器等）（A A）” ”，并在选择器中输入，并在选择器中输入“ “a.dbline:activea.dbline:active”，单击，单击“ “确定确定” ”按钮，弹出按钮，弹出“ “a.dblinea.dbline: active: active的的CSSCSS样式定义样式定义” ”对话框，在对话框，在“ “分分类类” ”中选择中选择“ “类型类型” ”，在，在” ”颜色颜色(C)(C)”中输入中输入“ “#FFFF00#FFFF00”，在，在“ “装饰装饰” ”中选择中选择“ “无（无（N N）” ”。单击。单击“ “确定确定” ”按钮退出对话框。按钮退出对

46、话框。 单单击击“ “设设计计” ”面面板板中中 “ “新新建建CSSCSS样样式式” ”的的图图标标，弹弹出出“ “新建新建CSSCSS样式样式” ”对话框。对话框。 选择选择“ “选择器类型选择器类型” ”中的中的“ “使高级（使高级（IDID、上下文、上下文选择器等）（选择器等）（A A）” ”，并在选择器中输入，并在选择器中输入“ “a.dbline:hovera.dbline:hover”，单击，单击“ “确定确定” ”按钮，弹出按钮，弹出“ “a.dblinea.dbline: hover: hover的的CSSCSS样式定义样式定义” ”对话框，在对话框，在“ “分分类类” ”中

47、选择中选择“ “类型类型” ”，在，在” ”颜色颜色(C)(C)”中输入中输入“ “#FF6600#FF6600”，在，在“ “装饰装饰” ”中选择中选择“ “下划线（下划线（U U）” ”、“ “上划线（上划线（O O）” ”。单击。单击“ “确定确定” ”按钮退出对话框。如按钮退出对话框。如图图5-2-105-2-10所示。所示。 以上自定义了一个名为以上自定义了一个名为“ “dblinedbline”的的CSSCSS样式，样式，及该样式的超级链接颜色。在页面中要引用此样式，及该样式的超级链接颜色。在页面中要引用此样式，只需在要引用此样式的只需在要引用此样式的HTMLHTML标记标记中，加

48、入属性中，加入属性“ “class=class=dblinedbline”，即，即“ “a 无下划线样式的链接无下划线样式的链接”。 CSSCSS创建完成后，设计面板如图创建完成后，设计面板如图5-2-115-2-11所示。所示。 在同一网页中设置二种不同的链接的效果如图在同一网页中设置二种不同的链接的效果如图5-5-2-122-12所示。所示。 本章小结vv 本章主要介绍了本章主要介绍了DreamweaverDreamweaver MX 2004 MX 2004超级链接的概超级链接的概念、类型和使用方法，包括文本链接、图片链接、念、类型和使用方法，包括文本链接、图片链接、EmailEmail

49、链接、锚点链接、热区链接等，以及介绍链接的链接、锚点链接、热区链接等，以及介绍链接的效果的编辑方法。效果的编辑方法。vv 超级链接是网站及网页的基本元素，要建立一个能超级链接是网站及网页的基本元素，要建立一个能够实际应用的网站，必须将网站中的各个网页通过超够实际应用的网站，必须将网站中的各个网页通过超链接方式联系起来，这样才能够让浏览者在不同的页链接方式联系起来，这样才能够让浏览者在不同的页面之间跳转。面之间跳转。vv 超级链接又可以分为多种类型：文字、图片、超级链接又可以分为多种类型：文字、图片、EmailEmail、锚点、热区等。读者应熟练掌握这些类型。、锚点、热区等。读者应熟练掌握这些类

50、型。 综合练习一、选择题一、选择题 1 1、以下哪个不是绝对路径？以下哪个不是绝对路径？ A A）ftp:/ftp:/ B B）http:/http:/ C C）http:/http:/ D D） ././index.aspindex.asp 2 2、以下哪个不能创建超级链接？以下哪个不能创建超级链接？ A A）文本文本 B B）图片图片 C C）邮件地址邮件地址 D D）视频视频 二、填空题二、填空题 1 1超级超级链接路径可分为链接路径可分为 、 、 。2 2链接颜色可分为四种状态：链接颜色可分为四种状态： 、 、 、 。3 3热区的形状有：热区的形状有： 、 、 三种。三种。三、思考题三

51、、思考题 1 1简述超级链接的作用及类型。简述超级链接的作用及类型。2 2在一个文档中可以创建哪几种类型的链接在一个文档中可以创建哪几种类型的链接? ?3 3简述锚点链接的创建方法。简述锚点链接的创建方法。4 4简述绝对路径和相对路径的区别。简述绝对路径和相对路径的区别。 5 5简述链接颜色四种状态的区别。简述链接颜色四种状态的区别。 四、上机练习四、上机练习 1 1创建一组创建一组htmlhtml文件，包括：首页文件，包括：首页( (index.htmindex.htm) )、我的、我的个人信息个人信息( (info.htminfo.htm) )、我的爱好、我的爱好( (favorite.htmfavorite.htm) )、我、我的相册的相册( (photos.htmphotos.htm) )，并在每个文件中添加一组链接，并在每个文件中添加一组链接，首页（首页（index.htmindex.htm）如图）如图1 1所示。所示。 每个文件中都包含这组链接