第4章网页超链接2013

1、第第4章网页超链接章网页超链接4.1 4.1 编织网站链接编织网站链接足球新闻足球新闻4.24.2 超链接构成及类别超链接构成及类别4.3 4.3 管理超链接管理超链接4.1 4.1 编织网站链接编织网站链接足球新闻足球新闻1 案例综述案例综述 “ “足足球新闻球新闻”网页中的超链接网页中的超链接n到网站到网站内内页面的超链接页面的超链接 内部内部链接；链接；n外外 外部外部链接；链接；n电子邮件形式的超链接电子邮件形式的超链接 E-mail链接；链接； ( (联系我们联系我们热点热点) )n到网页某一特定位置的超链接到网页某一特定位置的超链接 锚点锚点链接；链接；n下载下载链接。链接。 4.

2、1 4.1 编织网站链接编织网站链接足球新闻足球新闻2 实现步骤实现步骤1 1）准备网页内容）准备网页内容 将素材文件夹中的相关文档复制到站点文件夹下。将素材文件夹中的相关文档复制到站点文件夹下。2 2） 创建超链接创建超链接 步骤步骤1 1选中页面中的选中页面中的文字文字或或图像图像， 步骤步骤2 2 在在属性面板属性面板中单击中单击“链接链接”文本框右侧的文件夹图标，文本框右侧的文件夹图标，以通过浏览方式选择一个文件（以通过浏览方式选择一个文件（内部链接内部链接）。）。 或者直接在或者直接在“链接链接”文本框输入网址（文本框输入网址（外部链接外部链接）。）。 步骤步骤3 3从从“目标目标”

3、下拉菜单中，选择文档的打开位置。下拉菜单中，选择文档的打开位置。n_ _blank :blank :新打开的空窗口（每次新建空窗口）新打开的空窗口（每次新建空窗口）n_ _parentparent：如果是嵌套的如果是嵌套的框架框架，则在，则在父框架父框架中打开。中打开。n_ _selfself：会在当前网页所在的窗口或框架中打开会在当前网页所在的窗口或框架中打开( (默认默认) )。n_ _toptop：会在完整的浏览器窗口中打开。会在完整的浏览器窗口中打开。nnewnew：在名称为：在名称为“newnew”的窗口中，可取的窗口中，可取别的别的名字。名字。n框架名框架名：3) 锚点链接锚点链接

4、指同一个页面中的某位置，或其他页面中的某位置。指同一个页面中的某位置，或其他页面中的某位置。分为两步：分为两步：4.1 4.1 编织网站链接编织网站链接足球新闻足球新闻n创建命名锚记创建命名锚记 (用锚点用锚点 标记位置标记位置)n将光标定位在要设置将光标定位在要设置锚点锚点的位置，的位置，n插入栏命名锚记输入插入栏命名锚记输入锚点名称锚点名称（注意：区分大小写）（注意：区分大小写）n创建到锚点的链接创建到锚点的链接n选择要创建链接的文本或图像选择要创建链接的文本或图像n在属性面板的链接文本框中，键入在属性面板的链接文本框中，键入号和号和 锚点名称锚点名称n或在浏览对话框中，选中要链接的或在浏

5、览对话框中，选中要链接的文件文件后加后加和和锚记名称锚记名称。4）Email链接链接当浏览者单击电子邮件链接时，可即时打开浏览器默认当浏览者单击电子邮件链接时，可即时打开浏览器默认的电子邮件程序处理程序。的电子邮件程序处理程序。步骤：步骤：n 选中文本和图像选中文本和图像n 插入栏常用电子邮件链接输入邮件地址插入栏常用电子邮件链接输入邮件地址 或在属性面板的链接栏中直接输入或在属性面板的链接栏中直接输入4.1 4.1 编织网站链接编织网站链接足球新闻足球新闻mailto:邮件地址邮件地址5) 5) 下载链接下载链接 当被链接的文件是当被链接的文件是exeexe文件或文件或rarrar文件等浏览

6、器不支持的文件等浏览器不支持的类型时，这些文件会被下载，这就是网页上下载文件的方法。类型时，这些文件会被下载，这就是网页上下载文件的方法。 创建方法和链接到网页的方法完全一样。创建方法和链接到网页的方法完全一样。4.1 4.1 编织网站链接编织网站链接足球新闻足球新闻6 6）空链接）空链接-占位符作用占位符作用n选中要制作空链接的对选中要制作空链接的对象，在链接文本框中直接输入象，在链接文本框中直接输入。n一般在站点首页的导航栏中的首页链接，就可以是一个空一般在站点首页的导航栏中的首页链接，就可以是一个空链接。链接。7 7) ) 图像分区链接图像分区链接在图像上画出一个或多个在图像上画出一个或

7、多个区域区域（热点），在每个区域上建立链（热点），在每个区域上建立链接。操作：接。操作：n选中图像选中图像n在图像属性面板中，使用分区工具（矩形、椭圆、多边形）在图像属性面板中，使用分区工具（矩形、椭圆、多边形）在图像上划分区域。在图像上划分区域。a.a.为区域设置链接为区域设置链接8 8） 跳转菜单跳转菜单 弹出式菜单，每一菜单项上有一链接。弹出式菜单，每一菜单项上有一链接。DreamWeaverDreamWeaver内置组件内置组件：下拉式列表框：下拉式列表框+JavaScript+JavaScript代码代码操作方法：操作方法：n 插入栏表单跳转菜单插入栏表单跳转菜单a.a. 在在“插入

8、跳转菜单插入跳转菜单”对话框中，单击号添加菜单项对话框中，单击号添加菜单项4.1 4.1 编织网站链接编织网站链接足球新闻足球新闻n 在在“选择时。转到选择时。转到URL”URL”文本框中，输入该文件的路径。文本框中，输入该文件的路径。超链接源超链接源链接资源链接资源热点热点(文本、图片、图片分区文本、图片、图片分区)1) 网页网页(含路径含路径)2) 网页中的书签网页中的书签(锚点锚点) #锚点，锚点， #top, 网页网页#锚点锚点3) 脚本程序脚本程序, javascript:代码代码 javascript:window.close(); javascript:alert(警告警告);4

9、) 空空#， javascript:;5) 电子邮件电子邮件 mailto:zhou_6) 媒体文件媒体文件x.jpg, y.swf7) 浏览器不能识别的文件浏览器不能识别的文件x.doc y.rar z.exe资源显示位置资源显示位置 超链接源超链接源 链接类别链接类别1) 按按热点热点不同不同n文本链接文本链接, n图片图片，n图片热点图片热点,2) 按按链接资源不同链接资源不同n普通网页链接普通网页链接,n锚点链接，锚点链接，n脚本代码连接，脚本代码连接，n空连接，空连接，n邮件连接，邮件连接，n媒体文件链接，媒体文件链接，n下载连接下载连接4.2 4.2 超链接构成及类别超链接构成及类

10、别(某窗口窗口,框架框架)跳转菜单（跳转菜单（表单表单+下拉列表框下拉列表框+javascript代码代码）4.2 4.2 超链接构成及类别超链接构成及类别 网页路径网页路径 （与（与图片路径表示方法图片路径表示方法相同）相同）1 1）绝对路径绝对路径：在链接中使用完整的：在链接中使用完整的URLURL地址。地址。a =“http:/ 2 2）相对路径相对路径：相对于网页文件（位于当前目录）的相对于网页文件（位于当前目录）的位置位置 当前目录的文件引用方式：当前目录的文件引用方式： hrefhref= =“* *. .* *” ” 的下级目录：的下级目录： hrefhref=“=“下级目录名下

11、级目录名/ /* *. .* *” ” 的上一级目录：的上一级目录： hrefhref=“ ./=“ ./当前文件夹名当前文件夹名/ /* *. .* *” ” 3 3）基于站点根目录的路径基于站点根目录的路径：以站点的根目录为参考点，用一：以站点的根目录为参考点，用一个斜线个斜线“/ /”表示根目录。表示根目录。( (要在要在webweb服务器上运行服务器上运行) ) 根目录的文件引用方式：根目录的文件引用方式： hrefhref=“=“/ /* *. .* *” ” 的下级目录：的下级目录： hrefhref=“=“/ /下级目录名下级目录名/ /* *. .* *” ” 4.2 4.2

12、超链接构成及类别超链接构成及类别1 自动更新链接设置自动更新链接设置 在首选参数对话框中设置自动更新。在首选参数对话框中设置自动更新。 选择选择“编辑编辑”|“|“首选参数首选参数”命令，打开命令，打开“首选参数首选参数”对话框，在对话框，在“移动文件时更新链接移动文件时更新链接”选项的下拉列表中进行选项的下拉列表中进行选择。选择。n总是总是每当每当移动移动或或重命名重命名选定文档选定文档时，时，DreamweaverDreamweaver将将自动更新自动更新其他文档其他文档中指向中指向该文档该文档的所有链接。的所有链接。n提示提示将显示一个提示对话框，列出更改影响到的所有将显示一个提示对话框

13、，列出更改影响到的所有文件，以进行进一步选择，系统默认的选项是文件，以进行进一步选择，系统默认的选项是“提示提示”。 4.3 4.3 管理超链接管理超链接 4.3 4.3 管理超链接管理超链接 2 更改链接更改链接1） 移动、更名文档时更新链接移动、更名文档时更新链接如 果 对 站 点 中 的 文 档 要 进 行 移 动 、 更 名 操 作 ，如 果 对 站 点 中 的 文 档 要 进 行 移 动 、 更 名 操 作 ，Dreamweaver CS5Dreamweaver CS5会弹出会弹出“更新文件更新文件”对话框，点击对话框，点击“更新更新”按钮，则会修改文本框中文件的链接；点击按钮，则会

14、修改文本框中文件的链接；点击“不更新不更新”按钮，按钮，则不会修改文本框中文件的链接。则不会修改文本框中文件的链接。b.htm a.htm c . htmddd4.3 4.3 管理超链接管理超链接2)2) 改变链接改变链接n 直接修改超链接（在编辑源文件的窗口）直接修改超链接（在编辑源文件的窗口）n 使用菜单命令更改超链接使用菜单命令更改超链接n 在在“文件文件”面板中选择一个文件，如果更改电子邮件链接、面板中选择一个文件，如果更改电子邮件链接、FTPFTP链接、空链接则不需要选择文件。链接、空链接则不需要选择文件。n 选择选择“站点站点”|“|“改变站点范围内链接改变站点范围内链接”命令，出

15、现命令，出现“更改整更改整个站点链接个站点链接”对话框，对话框，n 单击单击“确定确定”按钮，会出现按钮，会出现“更新文件更新文件”对话框，其中列出对话框，其中列出了需要更新的链接文件，单击了需要更新的链接文件，单击“更新更新”按钮。按钮。 3 3 删除链接删除链接1) 1) 使用菜单命令删除超链接使用菜单命令删除超链接 点击点击“修改修改”菜单，选择菜单，选择“移除链接移除链接”命令，或者按命令，或者按Ctrl+Shift+LCtrl+Shift+L组合键即可删除或者取消一个超链接组合键即可删除或者取消一个超链接。2) 2) 使用快捷菜单删除超链接使用快捷菜单删除超链接 点击鼠标右键，在弹出

16、的子菜单上选择点击鼠标右键，在弹出的子菜单上选择“删除标签删除标签”命命令即可删除超链接。令即可删除超链接。3) 3) 使用属性面板删除超链接使用属性面板删除超链接 单击属性面板中的单击属性面板中的“链接链接”下拉列表框，使之呈现为选择状下拉列表框，使之呈现为选择状态，按态，按DeleteDelete键删除原来的链接地址即可。键删除原来的链接地址即可。4.3 4.3 管理超链接管理超链接 4 检查链接检查链接1)1) 检查检查当前文档当前文档中的链接中的链接 在在“文件文件”面板中，从面板中，从“当前站点当前站点”弹出菜单中选择一个站点。弹出菜单中选择一个站点。 在在“本地本地”视图中，选择要

17、检查的文件或文件夹。视图中，选择要检查的文件或文件夹。 选择选择“文件文件”“检查页检查页”“链接链接”命令，或右键单击一个命令，或右键单击一个选定的文件，然后从上下文菜单中选择选定的文件，然后从上下文菜单中选择“检查链接检查链接”“选定的文选定的文件件/ /文件夹文件夹”。“断开的链接断开的链接”报告出现在报告出现在“链接检查器链接检查器”面板中面板中. .在在“链接检查器链接检查器”面板中，从面板中，从“显示显示”弹出菜单中选择弹出菜单中选择“检查站检查站点中所选文件的链接点中所选文件的链接”以查看其结果报告以查看其结果报告. .4.3 4.3 管理超链接管理超链接 2) 2) 检查检查整

18、个站点整个站点中的链接中的链接 在在“文件文件”面板中，从面板中，从“当前站点当前站点”弹出菜单中选择一个站点。弹出菜单中选择一个站点。 选择选择“站点站点”|“|“检查站点范围的链接检查站点范围的链接”。 “ “断开的链接断开的链接”报告出现在报告出现在“链接检查器链接检查器”面板中。面板中。 在在“链接检查器链接检查器”面板中，从面板中，从“显示显示”弹出菜单中选择弹出菜单中选择“检查整检查整个站点中的链接个站点中的链接”，可查看其它报告。，可查看其它报告。 5 5 修复断开的链接修复断开的链接 1) 1) 在在链接检查器面板链接检查器面板中修复链接中修复链接 运行链接检查报告。运行链接检

19、查报告。 在在“链接检查器链接检查器”面板（在面板（在“结果结果”面板组中）中的面板组中）中的“断开的链断开的链接接”列（而不是列（而不是“文件文件”列），选择该断开的链接。列），选择该断开的链接。 单击断开的链接旁边的单击断开的链接旁边的文件夹文件夹图标图标 ，以浏览到正确文件，或者，以浏览到正确文件，或者键入正确的路径和文件名。键入正确的路径和文件名。 如果还有对同一文件的其它断开引用，会提示修复其它文件中的如果还有对同一文件的其它断开引用，会提示修复其它文件中的这些引用。单击这些引用。单击“是是”，Dreamweaver Dreamweaver 将更新列表中引用此文件的将更新列表中引用此文件的所有文档。如果单击所有文档。如果单击“否否”，Dr