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

第5章 超级链接的使用,编写组,本章学习目标,掌握超级链接的作用及类型 掌握文本和图片链接的创建方法 掌握Email、锚点链接的创建方法 掌握热区链接的创建方法 掌握链接效果的编辑方法,5.1 创建超级链接,5.1.1 超级链接的作用及类型 超链接是文档与文档之间的链接，当单击它时，超链接可指向另外一个页面或文件。链接目标通常是另外一个网页，但也可以是一幅图片、一个电子邮件地址或其他文档。 在浏览器中，超链接通常以带下划线的文本以及特定的颜色区别于网页内的其他内容，当鼠标指向它的时候，会变成手形，单击即可打开超链接。,有三种类型的链接路径： 1、 绝对地址 绝对路径由http:/、ftp:/等开始的，它不仅提供所链接文档的完整 URL，而且包括所使用的协议（如对于 Web服务为http:/，FTP服务为ftp:/）。 注意： 尽管对本地链接（即到同一站点内文档的链接）也可使用绝对路径链接，但不建议采用这种方式，因为一旦将此站点移动到其它服务器，则所有本地绝对路径链接都将断开。对本地链接使用相对路径还能在需要在站点内移动文件时，提供更大的灵活性。,2、相对地址 相对地址是由文件名及其扩展名组成的，并且假设URL指向位于同一台WEB服务器上的文件。 例如，假设一个站点的结构如图5-1-1所示：,创建从booklist1.htm到其它文件的链接，如下所示 (1) 要从 booklist1.htm 链接到booklist2.htm （两个文件在同一文件夹中），文件名就是相对路径：booklist2.htm或 ./booklist2.htm。其中./ 表示在同一文件夹中。 (2) 若要链接到 book1.htm（在名为 book1 的子文件夹中），可使用相对路径 book1/book1.htm。每个正斜杠 (/) 表示在文件夹层次结构中下移一级。,(3) 若要链接到 index.html （在父文件夹中，booklist1.htm 向上一级），可使用相对路径/index.htm。每个 / 表示在文件夹层次结构中上移一级。 (4) 若要链接到 picture1.htm（在父文件夹的其它子文件夹中），可使用相对路径/mypictures/picture1.htm。其中 / 向上移至父文件夹； mypictures/ 向下移至 mypictures子文件夹中。,3、站点根目录相对路径 站点根目录相对路径以一个正斜杠(/)开始，该正斜杠表示站点根文件夹。例如， /mybooks/ booklist1.htm 是文件 (booklist1.htm) 的站点根目录相对路径，该文件位于站点根文件夹的 mybooks子文件夹中。 在某些 Web 站点中，需要经常在不同文件夹之间移动 HTML 文件，在这种情况下，站点根目录相对路径通常是指定链接的最佳方法。移动含有根目录相对链接的文档时，不需要更改这些链接 。,在一个文档中可以创建几种类型的链接： 链接到其它文档或文件（如图形、影片、PDF 或声音文件）的链接。 命名锚记链接，此类链接跳转至文档内的特定位置。 电子邮件链接，此类链接新建一个收件人地址已经填好的空白电子邮件。 空链接和脚本链接，此类链接使您能够在对象上附加行为，或者创建执行 JavaScript 代码的链接。 注意：创建链接之前，一定要清楚文档相对路径、站点根目录相对路径以及绝对路径的工作方式。,5.1.2 实例：创建超级链接 1、实例创意 下面以实例制作一个简单网页，实例中只用到简单的几个页面元素，主要有表格、文本和图片。各个文件的文件名及位置如图5-1-2如示。,2制作步骤 （1）定义本书素材source目录下的文件夹5-1-2为本地站点目录。 （2）创建链接 创建超级链接有多种方法，本节将分别介绍几种不同 方式来完成超级链接的创建。 多数情况下，创建链接在【属性】面板中完成，也可以通过主菜单“【插入】【超级链接】”来完成。 打开根目录下的index.htm文件并选择“【窗口】【属性】”菜单命令，打开【属性】面板，如图5-1-3所示。,方法一： 选择页面上方文字“语言学习”，然后单击属性面板上“链接”文本框右侧的文件夹图标，弹出“选择文件”对话框，选择“learnlanguage.htm”文件，在对话框“相对于”中选择“文档”，单击“确定”按钮关闭对话框，如图5-1-4所示。,默认为“文挡”,完成上述步骤，属性面板相应各项设置如图5-1-5所示。,链接目标文件,方法二： 将鼠标光标定位于页面中的文字“关于本站”后，选择主菜单“【插入】【超级链接】”，弹出“超级链接”对话框，输入相应内容，如图5-1-6所示。,在“超级链接”对话框中，设置以下选项： 文本：显示在页面中的文字。 链接：所要链接的目标文档。 目标：为打开的窗口类型（详见本例最后一段）。 标题：为鼠标置于链接文字上方时所出现的提示。 效果如图5-1-7所示。,方法三： 打开属性面板，选择“链接(L)”右边的“指向文件”图标“”，拖动该图标至站点目录下的“learnlanguage.htm”文件，即可自动生成链接。如图5-1-8所示。,“指向文件”图标,如果同时打开两个或以上编辑窗口，则只需将“指向文件”图标直接拖动至目标窗口的任意位置即可自动生成链接。如图5-1-9所示。,“指向文件”图标指向目标窗口任意位置,方法四： 打开属性面板，在“链接(L)” 直接输入链接地址，如要链接到站点内的其他文档，输入目标文件的具体路径与文件名；要链接到站点以外的文档，则输入完整 URL，而且包括所使用的协议。 例如，选中“index.htm”文档中的“logo.gif”图片，打开属性面板，在“链接(L)”直接输入,直接输入 ,在默认情况下，被链接的文件在当前窗口或框架内打开。要使被链接的文档显示在其他窗口或新的窗口或框架内，则需设置属性面板中的“目标(R)”选项，如图5-1-11所示。,目标选项,“目标(R)”的各选项设置如下： _blank。 将链接的文档在一个新的、未命名的浏览器窗口中打开。 _parent。 将链接的文档在该链接所在框架的父框架或父窗口中打开。如果包含链接的框架不是嵌套框架，则所链接的文档在整个浏览器窗口中打开。 _self。 将链接的文档在链接所在的同一框架或窗口中打开，此目标为默认值，即不指定目标，则在同一框架或窗口打开文档。 _top。 将链接的文档在整个浏览器窗口中打开，从而取代当前窗口的所有框架。 l,5.1.3 实例：创建电子邮件链接 1、 实例创意 电子邮件链接在网页中也经常可见，在网页中添加电子邮件的目的在于可以使网页的浏览者方便发送邮件，点击电子邮件链接即可自动打开Microsoft Outlook Express，并自动创建新邮件，在“收件人”栏自动添加电子邮件地址等。 2、 制作步骤 （1）定义本书素材source目录下的文件夹5-1-3为本地站点目录。,打开根目录下的about.htm文件，选择“【窗口】【属性】”菜单命令，打开属性面板，如图5-1-12所示。,（2）创建电子邮件链接 在大多数情况下，创建电子邮件链接在属性面板中完成，也可以通过主菜单“【插入】【电子邮件链接(L) 】”来完成。我们分别以几种不同方式来完成电子邮件链接的创建。 方法一： 选中所要创建电子邮件的文本“echo”，属性面板的“链接(L)”输入mailto:echo即可，如图5-1-13所示。,直接输入 mailto:echo,方法二： 将鼠标光标定位于页面中要显示电子邮件的地方，选择主菜单“【插入】【电子邮件链接(L) 】”，弹出“电子邮件链接”对话框，输入相应内容后单击“确定”按钮，如图5-1-14所示。,“电子邮件链接”对话框中，设置以下选项： 文本。显示在页面中的文字，可以为Email地址或其它文字。 E-mail。邮件地址。,5.1.4 实例：创建锚点链接 1、 实例创意 锚点即为一个文档中的某一个特定的位置的标记，通过首先创建锚点，可使某个超级链接链接到文档的某个锚点，方便文档之间的跳转。 锚点通常放在文档的特定主题处或顶部。然后可以创建到这些锚点的链接，这些链接可快速将访问者带到指定位置。 创建到锚点的链接的过程分为两步。首先，创建锚点，然后创建到该锚点的链接。,2、 制作步骤 （1）定义本书素材source目录下的文件夹5-1-4为本地站点目录。 打开根目录下的traandwri.htm文件，选择“【窗口】【属性】”菜单命令，打开属性面板。如图5-1-15所示,（2）创建锚点 将鼠标光标定位于页面中标题“翻译与写作”文字之后，选择主菜单“【插入】【命名锚记(N) 】”，弹出“命名锚记”对话框，输入“命名锚记返回顶部”文字后单击“确定”按钮，如图5-1-16所示。,创建锚点后，在锚点的插入处出现一个锚点标记，如图5-1-17所示。,锚点标记,注意： 命名锚记名称只能包含字母和数字并且不能以数字开头。,（3）创建到锚点的链接 1）选中所打开的文档中的“返回顶部”文字； 2）拖动属性面板中“链接(L)”右边的“指向文件”图标“”至所创建的锚点标记即完成创建到该锚点的链接。如图5-1-18所示。,“指向文件”图标锚点标记时，在“链接”处会出现该锚的名称。,注意： 1.创建到锚点的链接，会在锚点名称前加一个“”号，表示后面为一个锚点的名称。 2.若要创建到其他文档的锚点，只要在文档名后加“锚点名称”即可。如要链接到abount.htm文档中一个名为aboutme的锚点，只需在链接中输入“about.htm#aboutme”即可。如图5-1-19所示。 3.选中打开的文档中文本或图像，并拖动到所要链接的锚点，也同样可以创建到锚点的链接。,直接输入：about.htm#aboutme,5.1.5 实例：创建热区链接 1、 实例创意 一张图片内可以创建包含多个链接，图像内不同的区域或文字都可以指向具体链接目标。图像图内创建链接的区域称为“热区”，热区与链接目标逐一对应，单击热区后，即可对链接目标进行跟踪、访问。 热区的形状有三种：矩形、圆形与多边形，在Dreamweaver MX 2004的“设计视图”模式下，这些热区是可见的，但在WEB浏览内这些边框却是不可见的，因此有必要在图像地图内添加一些文本标识，为浏览者了解热点的确切位置提供帮助。,2、 制作步骤 1）定义本书素材source目录下的文件夹5-1-5为本地站点目录。 打开根目录下的map.htm文件，选择“【窗口】【属性】”菜单命令，打开属性面板。如图5-1-20所示。,选中文档中的图片，属性面板出现相应的各项设置。如图5-1-21所示。,选择“属性”面板中“地图（M）”下图标中的某一形状，按住鼠标左键在图片中相应位置拖动即可建立一个矩形的“热区”，在默认情况下，刚创建的热区的“链接(L)”为“”，需要手动设置链接的目标网址，同时也可设置“目标(R)”及“替代（T）”。如图5-1-22所示。,在“属性”面板中，设置以下选项： 链接：链接的目标地址。 目标：链接打开的窗口设置：_blank、_parent、_self、_top。 替代：当图片无法显示时，在图片的位置用文字代替显示。创建热区链接后，在浏览器中打开map.htm文档预览其效果，如图5-1-23所示。,5.2 编辑链接效果,5.2.1 实例：自定义链接颜色 链接颜色可分为三种状态：链接颜色（Link）、访问过的链接颜色（Visited）、活动链接颜色（Active），通过CSS设置，链接还有第四种状态，即指向链接时的动态颜色（Hover），默认的文字链接样式都是带下划线的效果。在Dreamweaver MX 2004中允许用户自定义链接的颜色（如果通过CSS的设置还可以编辑各种链接的样式）。,1、 实例创意 自定义简单的链接颜色。 2、 制作步骤 （1）定义本书素材source目录下的文件夹5-2-1为本地站点目录。 （2）创建链接 自定义链接颜色可以通过主菜单“【修改（M）】【页面属性(P)】”来完成。,打开根目录下的linkcolor.htm文件并选择主菜单“【修改（M）】【页面属性(P)】”打开“页面属性”对话框。如图5-2-1所示。,在“页面属性”对话框中，通过颜色拾取器或直接输入各颜色代码。如图5-2-2所示。,创建热区链接后，在浏览器中打开linkcolor.htm文档预览其效果，如图5-2-3所示。,5.2.2 实例：同一网页中设置 二种不同的链接 默认的文字链接样式都是带下划线的效果，通过对CSS样式的重新编辑，可以设计出多彩的文字链接效果。对链接样式的设计通过Dreamweaver MX 2004的样式编辑器完成。,1、 实例创意 完成在同一网页中设计二种不同的链接样式，如图5-2-4所示。,2、 制作步骤 （1）定义本书素材source目录下的文件夹5-2-2为本地站点目录。 （2）自定义链接颜色 打开根目录下的2linkcolor.htm文件，选择主菜单“【窗口(W)】【CSS样式(Y)】”，出现“设计”面板。如图5-2-5所示,单击“设计”面板中 “新建CSS样式”的图标，弹出“新建CSS样式”对话框，如图5-2-6所示。,选择“选择器类型”中的“高级（ID、上下文选择器等）（A）”，并在“选择器”中选择“a:link”，在“定义在”选择“仅对该文档”，单击“确定”按钮，弹出“a:link的CSS样式定义”对话框，在“分类”中选择“类型”后，在”颜色(C)”中输入“#FF0000”。单击“确定”按钮退出对话框。如图5-2-7所示。,选择“类型”,输入颜色：#FF0000,同样，单击“设计”面板中 “新建CSS样式”的图标，弹出“新建CSS样式”对话框。 选择“选择器类型”中的“高级（ID、上下文选择器等）（A）”，并在“选择器”选择“a:visited”，单击“确定”按钮，弹出“a:visited的CSS样式定义”对话框，在“分类”中选择“类型”，在”颜色(C)”中输入“#00FF00”。单击“确定”按钮退出对话框。 单击“设计”面板中 “新建CSS样式”的图标，弹出“新建CSS样式”对话框。 选择“选择器类型”中的“高级（ID、上下文选择器等）（A）”，并在选择器中选择“a:hover”，单击“确定”按钮，弹出“a:hover的CSS样式定义”对话框，在“分类”中选择“类型”，在”颜色(C)”中输入“#0000FF”。单击“确定”按钮退出对话框。,单击“设计”面板中 “新建CSS样式”的图标，弹出“新建CSS样式”对话框。 选择“选择器类型”中的“高级（ID、上下文选择器等）（A）”，并在选择器中选择“a:active”，单击“确定”按钮，弹出“a:active的CSS样式定义”对话框，在“分类”中选择“类型”，在”颜色(C)”中输入“#FFFF00”。单击“确定”按钮退出对话框。 此时，已自定义超级链接的所有状态颜色：超级链接显示为红色（#FF0000），访问过的超级链接显示为绿色（#00FF00），指向超级链接显示为蓝色（#0000FF），活动超级链接为黄色（#FFFF00）。,凡是页面中的所有超级链接均按以上自定义的几种颜色显示。如图5-2-8所示。,通过CSS的设置，在页面还可以再定义不同的超级链接颜色。 单击“设计”面板中 “新建CSS样式”的图标，弹出“新建CSS样式”对话框。 选择“选择器类型”中的“高级（ID、上下文选择器等）（A）”，并在选择器中输入“a.dbline:link”，单击“确定”按钮，弹出“a.dbline:link的CSS样式定义”对话框，在“分类”中选择“类型”，在”颜色(C)”中输入“#FF00FF”，在“装饰”中选择“无（N）”。单击“确定”按钮退出对话框。如图5-2-9所示。,单击“设计”面板中 “新建CSS样式”的图标，弹出“新建CSS样式”对话框。 选择“选择器类型”中的“高级（ID、上下文选择器等）（A）”，并在选择器中输入“a.dbline:visited”，单击“确定”按钮，弹出“a.dbline: visited的CSS样式定义”对话框，在“分类”中选择“类型”，在“颜色(C)”中输入“#FFFF00”，在“装饰”中选择“无（N）”。单击“确定”按钮退出对话框。,单击“设计”面板中 “新建CSS样式”的图标，弹出“新建CSS样式”对话框。 选择“选择器类型”中的“高级（ID、上下文选择器等）（A）”，并在选择器中输入“a.dbline:active”，单击“确定”按钮，弹出“a.dbline: active的CSS样式定义”对话框，在“分类”中选择“类型”，在”颜色(C)”中输入“#FFFF00”，在“装饰”中选择“无（N）”。单击“确定”按钮退出对话框。,单击“设计”面板中 “新建CSS样式”的图标，弹出“新建CSS样式”对话框。 选择“选择器类型”中的“使高级（ID、上下文选择器等）（A）”，并在选择器中输入“a.dbline:hover”，单击“确定”按钮，弹出“a.dbline: hover的CSS样式定义”对话框，在“分类”中选择“类型”，在”颜色(C)”中输入“#FF6600”，在“装饰”中选择“下划线（U）”、“上划线（O）”。单击“确定”按钮退出对话框。如图5-2-10所示。,以上自定义了一个名为“dbline”的CSS样式，及该样式的超级链接颜色。在页面中要引用此样式，只需在要引用此样式的HTML标记中，加入属性“class=dbline”，即“无下划线样式的链接”。 CSS创建完成后，设计面板如图5-2-11所示。,在同一网页中设置二种不同的链接的效果如图5-2-12所示。,本章小结,本章主要介绍了Dreamweaver MX 2004超级链接的概念、类型和使用方法，包括文本链接、图片链接、Email链接、锚点链接、热区链接等，以及介绍链接的效果的编辑方法。 超级链接是网站及网页的基本元素，要建立一个能够实际应用的网站，必须将网站中的各个网页通过超链接方式联系起来，这样才能够让浏览者在不同的页面之间跳转。 超级链接又可以分为多种类型：文字、图片、Email、锚点、热区等。读者应熟练掌握这些类型。,综合练习,一、选择题 1、以下哪个不是绝对路径？ A）ftp:/ B） C） D） /index.asp 2、以下哪个不能创建超级链接？ A）文本 B）图片 C）邮件地址 D）视频,二、填空题 1超级链接路径可分为 、 、 。 2链接颜色可分为四种状态： 、 、 、 。 3热区的形状有： 、 、 三种。,三、思考题 1简述超级链接的作用及类型。 2在一个文档中可以创建哪几种类型的链接? 3简述锚点链接的创建方法。 4简述绝对路径和相对路径的区别。 5简述链接颜色四种状态的区别。,四、上机练习 1创建一组html文件，包括：首页(index.htm)、我的个人信息(info.htm)、我的爱好(favorite.htm)、我的相册(photos.htm)，并在每个文件中添加一组链接，首页（index.htm）如图1所示。,每个文件中都包含这组链接,