网页设计与制作项目7超链接(1)

站点结构
7.3.1 超链接
（3）站点根目录相对路径 站点根目录相对路径描述从站点的根文件夹到文
档的路径。如果在处理使用多个服务器的大型Web 站点，或者使用承载多个站点的服务器，则可能需要 使用这类型路径。
站点根目录相对路径以一个正斜杠（/）开始， 该正斜杠表示站点根文件夹。例如 /support/dreamweaver/contents.html。
步骤4 创建下载文件超级链接。在“目的地”页面上， 选择“照片下载”文本，如图所示。
步骤5 在【属性】面板上单击“链接（L）”右侧的 “浏览文件”按钮 ,在弹出的【选择文件】对话框中，选择 文件“风景图片.rar”，如图所示，单击“确定”按钮。
选择文本
【选择文件】对话框
7.2 网页制作
步骤6 单击“预览”按钮 ，当鼠标指向“照片下载” 文本时单击；弹出【文件下载】对话框，如图所示，单击 “保存”或者“另存为”按钮，可以下载文件。
设置文本超级链接的属性
选择文本
7.2 网页制作
步骤3 在弹出的【选择文件】对话框中，选择 文件“QA.html”，如图所示，单击“确定”按钮。
在【选择文件】对话框中选择目标页面
7.2 网页制作
步骤4 单击“预览”按钮 ，当鼠标指向文本 “预订酒店”时，如图所示，单击即可跳转到“酒11 单击“预览”按钮 ，在网页中单击“关 闭窗口”文本，出现如图所示关闭网页的提示框。单击 “是”按钮即可关闭当前网页。
关闭窗口提示框
7.3 知识链接
网上冲浪时，在Web页面中从一个页面跳转 到另一个页面，即超级链接。通过设定超级链接 把网上的资源链接起来，浏览者无须知道资源在 哪里，也不会因为资源在“千里之外”就无法访 问。这就是Web与其他媒体的最大区别和优势所 在，不受地域、距离和时间的限制。
7.2 网页制作
步骤3 在表格的第3行定位光标，执行【插入】| 【图像对象】|【鼠标经过图像】菜单命令，弹出【插 入鼠标经过图像】对话框，如图所示。
【插入鼠标经过图像】对话框
7.2 网页制作
步骤4 在【插入鼠 标经过图像】对话框中 图像名称的文本框中输 入“首页”；分别单击 “原始图像”及“鼠标 经过图像”右侧的“浏 览”按钮，选择所需要 的图像，如图所示为选 择原始图像。
绝对路径提供所链接文档的完整URL，而且包括所使用 的协议（如对于Web页面，通常使用HTTP协议），例如 http://www//support/dreamweav er/contents.html。
对于外部链接必须使用绝对路径才能链接到其他服务器 上的文档。对于内部链接也可以使用绝对路径链接，但是采 用绝对路径不利于站点的移植。通过对内部链接使用相对路 径，能够提高文件在站点内移动时的灵活性。
【文件下载】对话框
7.2 网页制作
步骤7 创建外部超级链接。在“目的地”页面上，选 择“火车时刻表”文本，如图所示。
选择文本
步骤8 在【属性】面板上“链接（L）”文本框中直接 输入外部超级链接的网址，如 “/ss/lccx.htm”，如 图所示。
【属性】面板设置外部超级链接
选择源端点文本
7.2 网页制作
步骤5 在【属性】面板上“链接（L）”文 本框中输入锚记名称“#page_top”，如图所 示。
步骤6 单击“预览”按钮 ，当鼠标指向页 面底部“返回到顶部”文本时，浏览页面将返回 到顶部“锚记”处。
【属性】面板中的参数设置
7.2 网页制作
7.2.5 创建电子邮件、下载文件、外部超链接 步骤1 创建电子邮件超级链接。在“目的地”页
【插入鼠标经过图像】对话框参数设置
7.2 网页制作
步骤7 重复同样的操作，插入鼠标经过图像，在图 像名称的文本输入框中输入“酒店机票”，用与设置 “首页”相同的方法选择所需要的图像，【插入鼠标经 过图像】对话框中的参数设置如图所示。
【插入鼠标经过图像】对话框参数设置
7.2 网页制作
步骤8 用同样的方法添加导航条中的其他图像，添加完 6个项目后，即完成导航条的插入，将“destination.html” 保存在“letuweb\ch7”文件夹中。
项目7
实现网页间的跳转——超级链接
知识要点 1 了解超级链接的概念 2 掌握内部、外部超链接的类型及创建方法 3 掌握邮件超链接的方法 4 掌握下载文件超链接的方法 5 掌握使用导航工具条的方法
7.1 网页展示：在“目的地”页面中应用超级链接
网页的最大特点体现 在它可以通过超链接功能 在众多的网页中互相跳转， 在“乐途网”的“目的地” 页面中分别应用了网页之 间超链接，插入文本超链 接、锚记超链接、外部超 链接、图像超链接、导航 工具条超链接、邮件超链 接和下载文件超链接， “目的地”页面效果如图 所示。
预览时鼠标指向超级链接文本
目标页面显示效果
7.2 网页制作
步骤5 创建图片超级链接。在“目的地”页 面上单击“黄山”图像，如图所示。
选择图像
7.2 网页制作
步骤6 在【属性】面板上单击“链接（L）” 右侧的“浏览文件”按钮 ，或直接输入超级链 接的目标文件名，如图所示。
【属性】面板中的参数设置
7.2 网页制作
7.3.1 超链接
（2）相对路径 对于大多数Web站点的本地链接来说，文档相对路径通常是最适合的路径。
在当前文档与所链接的文档位于同一文件夹中，而且可能保持这种状态的情况 下，文档相对路径特别有用。文档的相对路径还可用于链接到其他文件夹中的 文档，方法是利用文件夹层次结构，指定从当前文档到所链接文档的路径。例 如dreamweaver/contents.html。
7.2 网页制作
步骤9 单击“预览”按钮 ，在网页中单击“火车时 刻表”文本，即可跳转到外部链接网页。
步骤10 在“目的地”页面上，选择“关闭窗口” 文本，在【属性】面板上“链接（L）”文本框中直接输 入“javascript:window.close()”，可实现脚本链 接，如图所示。
【属性】面板设置脚本链接
【插入鼠标经过图像】对话框参数设置
7.2 网页制作
7.2.2 创建文本与图片超链接 步骤1 创建文本超级链接。在【属性】面板上单击
“页面属性”按钮 ，设置文本链接的属性，参数设置如 图所示。
步骤2 在“目的地”页面中选择文本“预订酒店”， 如图所示；在【属性】面板上单击“链接（L）”右侧的 “浏览文件”按钮 。
超级链接由源端点和目标端点两部分组成，有超链接 的一端为源端点（鼠标指针指向其上时光标形状为： ）， 跳转到的页面为目标端点。
7.3.1 超链接
2．超链接的类型 （1）内部链接 内部链接可以跳转到本网站内其他文档或文件，如图形、
电影、PDF或者声音文件。 （2）外部链接 外部链接可以链接到不属于本网站的资源，丰富网站的内
选择原始图像
7.2 网页制作
步骤5 在【插入 鼠标经过图像】对话框 中单击“按下时，前往 的URL” 右侧的“浏览” 按钮，选择超级链接的 目标文件。
选择目的地原始图像
7.2 网页制作
步骤6 重复以上操作，执行【插入】|【图像对象】 |【鼠标经过图像】菜单命令，在图像名称的文本框中输 入“目的地”，分别单击“原始图像”及“鼠标经过图像” 右侧的“浏览”按钮，选择所需要的图像，如图所示为选 择原始图像；在【插入鼠标经过图像】分别单击对话框中 的参数设置如图所示。
绘 制 “ 多 边 形 ” 热 区
7.2 网页制作
步骤5 在【属性】面板上“链接（L）”文本框中 直接输入超级链接的目标文件名，如图所示。
步骤6 单击“预览”按钮 ，当鼠标指向地图上的 “广西”时，即可跳转到“广西”页面上。
【属性】面板参数设置
7.2 网页制作
7.2.4 插入锚记超链接 步骤1 在“目的地”页面上，将光标定位在第1行左
“目的地”页面效果
7.2 网页制作
7.2.1 设置导航条超链接 步骤1 启动Dreamweaver CS6后，在letuweb
站点中创建新文档，命名为“destination.html”。 步骤2 在destination文档中绘制表格布局页面，输
入相应的文字、选择图像等素材，插入页面顶部LOGO及其 他元素，如图所示。
7.3.1 超链接 4．设置文本超链接的属性
执行【修改】|【页页属性】菜单命令，或在【文件 名】属性面板上单击“页面属性”按钮，在弹出的【页页 属性】对话框中设置文本超链接的属性，如图所示。
设置“文本”链接属性
7.3.2 内部超链接
1．创建文本或图像超链接 创建文本或图像超链接后，单击该文本或图像便可以打
步骤7 单击“预览”按钮 ，当鼠标指向 文本“黄山”图片时，单击即可跳转到“黄山” 页面上。
步骤8 按照相同的操作，可以完成图片 “苏州园林”、“桂林”的超级链接。
7.2 网页制作
7.2.3 创建图像映像超链接 步骤1 在“目的地”页面上单击“地图”图片，在
【属性】面板单击“矩形热点工具”按钮 ，在地图上的 “北京”处绘制“矩形”，如图所示。
步骤9 单击“预览”按钮 ，在浏览页面的导航条上移动 光标，导航条会产生相应的变化，如图所示，单击可以跳转到 相应的页面上。
鼠标指向导航图像
7.2 网页制作
步骤10 重复同样的操作，插入鼠标经过图像，在 图像名称的文本输入框中输入“酒店机票”，用与设置 “首页”相同的方法选择所需要的图像，【插入鼠标经过 图像】对话框中的参数设置如图所示。
边（目标端点），如图所示。
在页面左上角定位光标
步骤2 执行【插入】︱【命名锚记】菜单命令，弹出 【命名锚记】对话框，输入锚记名称，如图所示。
【命名锚记】对话框
7.2 网页制作
步骤3 单击“确定”按钮，在光标定位处会出现 一个“锚记”，如图所示。
在页面左上角添加“锚记”标记