第 5 章网页制作基础

第5章网页制作基础

主要内容 • 概述 • 设计站点 • 编辑网页 • 页面布局 • 建立超链接 • 使用CSS样式 • 层、行为和时间轴 • 模板 • 管理和发布站点《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5 建立超链接 超链接概述超链接基本概念两种链接路径创建各种超链接文本超链接电子邮件链接制作图像地图链接创建图像地图修改图像地图创建特定位置的链接插入命名锚记建立命名锚记链接使用属性检查器“指向文件”按钮《大学计算机信息科技教程（第二版）》——第5章网页制作基础

《大学计算机信息科技教程（第二版）》——第5章 网页制作基础

5.5.1 超链接概述 • 超链接基本概念 • 超链接是从源端点到目标端点的一种跳转。 • 源端点是被链接的对象，可以是: • 文本 • 图像等 • 目标端点是连接到的对象，可以是任何网络资源： • 一个页面 • 一幅图像 • 一段视频 • 一个页面中的某个位置等 • 浏览网页时，单击超链接后显示对应的页面、图像和视频，或者跳转到网页中的某个位置。如果超链接的链接到的对象无法在浏览器中直接打开，则弹出“文件下载”对话框，从而达到了下载文件的目的。《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.1 超链接概述 • 在浏览器中访问网页时，作为超链接源端点的文本（即超文本）有3种状态： • 未被访问的超文本 • 已被访问的超文本 • 正在被访问的超文本 • 默认状态下，不同状态的超文本的颜色由浏览器决定。通过设置页面属性，可以定义各种链接状态下文本的字体颜色。《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.1 超链接概述 • 根据目标端点的对象不同，可以把超链接分为 • 外部链接 • 外部链接的目标端点是本站点以外的站点或文档，利用外部链接可以跳转到其他网站。 • 内部连接 • 内部链接的目标端点是本站点中的文档，利用内部链接可以跳转到本站点中的其他页面。 • E-mail链接 • E-mail链接的目标端点是电子邮件程序，单击这种超链接后自动启动电子邮件程序，并以超链接指定的E-mail地址为收件人，开始撰写新邮件。 • 局部链接 • 局部链接的目标端点是网页中标记的位置，利用局部链接可以跳转到网页中的指定位置。《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.1 超链接概述 • 链接路径 • 绝对路径 • 提供所链接文档的完整URL，它包括了所使用的协议，例如http://www.traveler.net.cn/travel/jianzhu/hebjzzl.htm • 绝对路径与链接的源端点没有任何关系，只要目标端点的地址不变，无论超链接所在的网页文件在站点文件夹中如何移动，都可以实现正常的跳转而不会出错。 • 绝对路径通常用于表示外部链接。 • 相对路径 • 常用于表示内部链接，相对路径包括文档相对路径和站点根目录相对路径两种。《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.1 超链接概述 • 文档相对路径 • 是以当前网页所在文件夹为基础来描述路径的，对于Web站点中的文件来说，使用相对路径比较适合。 • 站点根目录相对路径 • 从当前站点的根目录开始描述路径的，站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹。例如：/contents/yjsx.html是相对路径，表示yjsx.html文件位于站点的根文件夹的contents文件夹中。《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.1 超链接概述 • 例 • 若要从yjsx.html链接到rwjg.html，其相对路径是rwjg.html。 • 若要从yjsx.html链接到mulu.html，其相对路径为lywh/mulu.html。 • 若要从yjsx.html链接到index.html，其相对路径为../index.html。 • 若要从yjsx.html链接到changjiang.jpeg，其相对路径为../photo/changjiang.jpeg。《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.1 超链接概述 • 在 “文件”面板中改变文件名或者移动文件时，将弹出“更新文件”对话框，显示出需要更新的文件名列表，单击“更新”按钮可以完成超链接的路径更新。《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.2 创建各种超链接 选中文本 • 插入文本超链接★ ①插入工具栏/“常用”/“超级链接”按钮 ②“插入”/“超级链接”命令 ③属性检查器下一张《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.2 创建各种超链接 《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.2 创建各种超链接 • 使用属性检查器建立超链接 • 在属性检查器的“链接”文本框中输入超链接目标文档的路径和文件名； • 单击“链接”文本框右侧的文件夹图标，可以通过浏览选择一个文件作为超链接的目标文件； • 将“链接”文本框右侧的“指向文件”图标拖动到“文件”面板中的文件上。《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.2 创建各种超链接 • 建立电子邮件链接 • 自动设置邮件的主题，例如：fdcs@etang.com?subject=咨询旅游线路 ①插入工具栏/“常用”/“电子邮件链接”按钮 ②“插入”/“电子邮件链接”命令《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.3 制作图像地图链接 同一幅图像上不同区域超链接到不同的目标端点 • 热点是在图像地图上画出的封闭区域，图像地图是含有多个热点的图像，不同的热点指向不同的超链接。在图像地图中，单击不同的热点，可以超链接到相应的网页。 • 图像地图有服务器端图像地图和客户端图像地图两种，它们的不同之处在于鼠标单击热点后的处理方法上。《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.3 制作图像地图链接 椭圆形热点矩形热点多边形热点《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.3 制作图像地图链接 • 创建客户端图像地图 • 首先在网页中插入作为图像地图的图像； • 单击图像的属性检查器中的热点工具，绘制出一个热点区域： • 矩形热点工具 • 椭圆形热点工具 • 多边形热点工具 • 通过属性检查器设置热点对应的超链接和目标位置。三种热点《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.3 制作图像地图链接 ③在图片上拖曳 ①单击图片②单击热点工具 ④拖曳指向文件按钮《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.3 制作图像地图链接 • 修改图像地图 • 选中热点 • 选中图像地图后，单击“指针热点工具”按钮，然后单击热点，即可选中热点。若需要同时选中多个热点，可以从选择第二个热点开始，按住Shift键同时单击需要选择的热点。按Ctrl+A键，则选中图像地图中的所有热点。 • 改变热点的位置 • 选中热点后，将鼠标移到热点上然后进行拖动 • 改变热点区域的形状或大小 • 选中热点后，拖动热点的控制点 • 改变叠放次序 • 右单击热点区域，在快捷菜单中选择“移到最上面”或“移到最下面”命令单击拖曳拖曳控制点快捷菜单《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.4 创建特定位置的链接 • 锚记 • 通过插入命名锚记可以，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。设置标记，超链接到网页指定位置《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.4 创建特定位置的链接 ②插入工具栏命名锚记 • 插入命名锚记 • 将插入点定位于要设置标记的位置 • 选择“插入”/“命名锚记”命令。 • 插入命名锚记后，网页中出现一个标记，标志出锚记的位置。如果看不到锚记标记，可以选中“查看”/“可视化助理”/“不可见元素”命令，将锚记标记显示出来。 ①定位插入点或“插入”/ “命名锚记” 《大学计算机信息科技教程（第二版）》——第5章网页制作基础

5.5.4 创建特定位置的链接 • 建立锚记链接 • 选择“插入”/“超级链接”命令，输入超链接文本内容，并在“链接”下拉列表中选择锚记名称。 • 属性检查器中，链接到锚记的超链接的表示形式为锚记名称前加数字符号“#”。在属性检查器中直接输入这样的超链接（如：#psj）。 • 如果要链接到其他网页的命名锚记，则需要在锚记前加上网页文档名称。例如，如果要链接到网页maoji.html名为xdj的锚记，应在“链接”文本框中输入：maoji.html#xdj。 • 在属性检查器中将“链接”文本框右侧的“指向文件”图标拖动到网页中的锚记标记上。 ①选定文本 ②属性检查器“链接”文本框输入：(网页文件名)#锚记名例如:#1、index.htm1#b 《大学计算机信息科技教程（第二版）》——第5章网页制作基础

作业 • 完善课堂演示页面 • 为文字“杜甫”、“白居易”、“李商隐”添加链接，单击这些链接时在右侧显示相应的作品列表页面。作品列表页面仿照“李白”的作品列表页面。 • 为图片“宋词”添加链接，当鼠标移上去时，图片文字显示阴影；单击“宋词”图片则在左侧显示文字“苏轼”、“辛弃疾”。 • 为文字“苏轼”、“辛弃疾”添加链接，所链接至的作品列表页面参照“李白”的作品列表页面。《大学计算机信息科技教程（第二版）》——第5章网页制作基础

第 5 章 网页制作基础