模块二网页排版技术 单元4：超链接技术的应用 一、简单个人网页分析 OcO断 欢迎光临我的个人网站 直丝1E1健1的 自我年位 :蓝理 0·,ar 根系方 书酒状流 图2-4-1简单个人网页效果图 打 开示例网页 平常上网大多是通过鼠标点击网页上的文字、图像等在网络里遨游， 这种效果就叫做超级链接。 比如上面的个人网站，我们可以通过点击“自我介绍中的“西南交通 大学”的链接使我的母校的网站展现在我们面前。你也可以通过点击“联 系方式”中的“qml86@163.com”给我发邮件。 问题：这种效果是如何制作的哪？在这种效果下隐含了哪些知识点 呢？ 让我们示例页面的制作中慢慢体会。 二、丰富页面内容
模块二 网页排版技术 单元 4：超链接技术的应用 一、简单个人网页分析 图 2-4-1 简单个人网页效果图 打 开示例网页 平常上网大多是通过鼠标点击网页上的文字、图像等在网络里遨游， 这种效果就叫做超级链接。 比如上面的个人网站，我们可以通过点击“自我介绍”中的“西南交通 大学”的链接使我的母校的网站展现在我们面前。你也可以通过点击“联 系方式”中的“qm186@163.com”给我发邮件。 问题：这种效果是如何制作的哪？在这种效果下隐含了哪些知识点 呢？ 让我们示例页面的制作中慢慢体会。 二、丰富页面内容
1.为页面增加导航：在页面顶端的输入文字“自我介绍」个人简历 联系方式」友情链接”。 2.在页面的底部输入“返回顶部字样。 3.新建一个HTML页面，命名为JianLi.htm”,作为个人简历的页面， 在该页面中输入简单的文字“个人简历页面”。 三、为页面添加超级链接 1.为页面添加锚点链接 返回“index.htm”页面，为顶部导航“自我介绍”、“联系方式”、“友 情链接”及底部返回顶部”添加锚点链接。 (1)在页面顶部添加返回顶部的锚点，步骤如图2-4-2所示。 2插入>命名描点心 1选中文字 欢迎光临我的个人网站 线维我升研 3.命名，确定。 解装方式 983a 图2-4-2 (2)重复第一步，在分别为一、自我介绍”添加锚点，锚点名为 JieShao”、“二、联系方式”锚点名为LianXi”、“三、友情链接”锚点名 为Link”。效果如图2-4-3所示
1.为页面增加导航：在页面顶端的输入文字“自我介绍 | 个人简历 | 联系方式 | 友情链接”。 2.在页面的底部输入“返回顶部”字样。 3.新建一个 HTML 页面，命名为“JianLi.htm”，作为个人简历的页面， 在该页面中输入简单的文字“个人简历页面 ”。 三、为页面添加超级链接 1.为页面添加锚点链接 返回“index.htm”页面，为顶部导航“自我介绍 ”、“联系方式”、“友 情链接”及底部“返回顶部”添加锚点链接。 （1）在页面顶部添加返回顶部的锚点，步骤如图 2-4-2 所示。 图 2-4-2 （2）重复第一步，在分别为“一、自我介绍”添加锚点，锚点名为 “JieShao”、“二、联系方式”锚点名为“LianXi”、“三、友情链接”锚点名 为“Link”。效果如图 2-4-3 所示
4 。对迎光临我的个人网站 国长方属1袖金盖：速马 图2-4-3 (3)为导航“自我介绍添加锚点链接。选中“自我介绍”，点击“”， 在弹出的对话框中选择前面定义的JieShao”锚点，点击确定，步骤如图 2-4-4所示。 代码分计 代码将图痘.区.心标艳：无标楚女档 ◆◇。个地批百 插入招级链接 @ 欢迎光临我的个人网站 1.选电政有联三方式！动画欧怎引锐的篮历 3.弹窗中选择需要链接的锚点 文本白我分裙 日撞#g 日自我介绍 49 目标 标延 ·姓名：强 TaD键常张 ·性别：男 ·工作地点，四川省广元市 自联系方式： 1.Q021376712312 图2-4-4
图 2-4-3 （3）为导航“自我介绍”添加锚点链接。选中“自我介绍”，点击“ ”， 在弹出的对话框中选择前面定义的“JieShao”锚点，点击确定，步骤如图 2-4-4 所示。 图 2-4-4
(4)重复上一步骤，分别为联系方式”、“友情链接”及“返回顶部” 添加锚点链接 2.为我的简历添加站内链接 (1)选中我的简历，点击点击“”，在弹出的对话框中点击“” 按钮，弹出目标浏览对话框，效果如图2-4-5。 选择文件 ②☒ 选取文件名自 ⊙文件系统 站点和服务器。 ○数据源 查找范围)：鱼ly Web Sites ⊙金少厨 )_private inages YebChanPinl 文件名国) JianLi 确定 文件类型)： 所有文件像*) 取消 VRL: JianLi.htm ■梦数.。 相对于： 文档 index.html 在站.点定义中申配改款以的慎接相对于 图2-4-5 (2)在图2-4-5对话框中选择刚才新建的JianLi.htm页面，点击确 定”，返回超级链接对话框，如图2-4-6所示
（4）重复上一步骤，分别为“联系方式”、“友情链接”及“返回顶部” 添加锚点链接 2.为我的简历添加站内链接 （1）选中我的简历，点击点击“ ”，在弹出的对话框中点击“ ” 按钮，弹出目标浏览对话框，效果如图 2-4-5。 图 2-4-5 （2）在图 2-4-5 对话框中选择刚才新建的 JianLi.htm 页面，点击“确 定”，返回超级链接对话框，如图 2-4-6 所示
超级链接 文本：我的简历 确定凡 链接 JianLi.htm 取消 目标 帮助) 标题 访问键 Tab键索引： 图2-4-6 图2-4-6对话框中有目标一栏，可以定义目标打开的方式blank”为 在新窗口中打开，默认为在原窗口中打开。标题是鼠标放到该链接源上 显示的文字。 (3)点击“确定”按钮，就完成了站内超链接的创建。 3.为网页添加互联网链接 类似与站内超级链接（步骤2)，不同的是，在图2-4-6对话框的链 接一栏要手工输入目标的地址(URL),包括协议的名字 为西南交通大学”添加超级链接，在图2-4-6对话框的链接一栏输入 "http://www.swjtu.edu.cn" 4.为网页添加邮件链接 步骤同2在图2-4-6对话框的链接一栏输入mailto:邮件地址”，例如 "mailto:qm186@163.com' 5.为图片添加热点链接，使其链接到原图片，并在新窗口打开
图 2-4-6 图 2-4-6 对话框中有目标一栏，可以定义目标打开的方式“_blank”为 在新窗口中打开，默认为在原窗口中打开。标题是鼠标放到该链接源上 显示的文字。 （3）点击“确定”按钮，就完成了站内超链接的创建。 3.为网页添加互联网链接 类似与站内超级链接（步骤 2），不同的是，在图 2-4-6 对话框的链 接一栏要手工输入目标的地址（URL），包括协议的名字. 为“西南交通大学”添加超级链接,在图 2-4-6 对话框的链接一栏输入 “http://www.swjtu.edu.cn” 4.为网页添加邮件链接 步骤同 2 在图 2-4-6 对话框的链接一栏输入“mailto:邮件地址”，例如 “mailto:qm186@163.com” 5.为图片添加热点链接，使其链接到原图片，并在新窗口打开
(1)选中目标图像，调出属性面板，选择属性面板中的人一种热区， 效果如图2-4-7所示。 34.。在 。欢迎光临我的个人网站 鱼北组工方式的盖份置世的望西 自我介绍 与联系方式 口6 图2-4-7 (2)选中某一热区形状，在图片上绘制热点区域，在下面弹出的属 性区域中选择链接目标及打开方式，步骤如图2-4-8。 欢迎光临我的个人网站 自我金纽联系方式动画欣赏！我的面历 自我介绍： ,工作地点：四川省广元市 电联系方式： 1.QQ,21376712312 2.邮编：628123 3地址，四省广元市雪峰 4,邮箱，2@163c0m 功画欣贺： boly)(5.b2)(mot>ary 边91o10%157,3118秒hed0-) 热5 90 自银Q) 。赞锁a) 扩图地 口b
（1）选中目标图像，调出属性面板，选择属性面板中的人一种热区， 效果如图 2-4-7 所示。 图 2-4-7 （2）选中某一热区形状，在图片上绘制热点区域，在下面弹出的属 性区域中选择链接目标及打开方式，步骤如图 2-4-8
图2-4-8 四、超级链接的HTMⅫ语法结构分析 切换到代码视图模式。观察页面中的超级链接语法格式。 l.自我介绍为锚点链接，代码：“自我介绍 ” 2.在“一、自我介绍”处，我们定义了锚点，代码 一、自我介绍” 3.在“我的简历”处，我们定义了一个内部网页链接，代码“我的简历”,注意：此处为相对路径 4.在该页面的自我介绍部分有一个西南交通大学的超级链接，这是 一个外部链接，实现代码为：西南交通大学 5.有一个电子邮件的超级链接，它有别于前面两种，结合前面讲到的 邮件链接的例子，此处代码应为： qm186@163.com 6.我们还定义了图片的热点链接，热点链接的定义为： 7.通过上面的例子，我们总结超级链接代码书写规则如下
图 2-4-8 四、超级链接的 HTMl 语法结构分析 切换到代码视图模式。观察页面中的超级链接语法格式。 1.自我介绍为锚点链接，代码：“自我介绍 ” 2.在“一、自我介绍”处，我们定义了锚点，代码“ 一、自我介绍” 3.在“我的简历”处，我们定义了一个内部网页链接，代码“我的简历”，注意:此处为相对路径 4.在该页面的自我介绍部分有一个西南交通大学的超级链接，这是 一个外部链接，实现代码为:西南交通大学 5.有一个电子邮件的超级链接，它有别于前面两种，结合前面讲到的 邮件链接的例子，此处代码应为： qm186@163.com 6.我们还定义了图片的热点链接，热点链接的定义为： 7.通过上面的例子，我们总结超级链接代码书写规则如下
一个锚标签（a)用来定义一个链接，但是通常会添加一个目的地址 来实现连接。连接的目的地在标签href属性中被定义。 超级链接的语法格式分为：〈a href="URL">、《a href="mailto:EMAIL">,a href="NAME">四种。 :URL分为绝对路径和相对路径，如果是网站内 部的链接，一般用相对路径，否则用绝对路径。 例如： 外部链接 点击进入四川信息职业技 术学院 绝对地址 内部链接 打开站点首页 相对地址 〈a 内部文件链接 href="ChaoJiLink/images/rwmdqsj.wma"> 相对地址 乐试听（让我们荡起双桨） :创建一个自动发送电子邮件的链接。 Mailto:后面跟Email地址。 例如：邮件链接 与联系我 创建一个位于文档内部的锚点链接： 1.定义锚点：〈a name="NAME"> 2.创建一个指向位于文档内部锚点的链接：〈a href="NAME"></a》
一个锚标签 (a) 用来定义一个链接，但是通常会添加一个目的地址 来实现连接。连接的目的地在标签 href 属性中被定义。 超级链接的语法格式分为：、、和四种。 ：URL 分为绝对路径和相对路径，如果是网站内 部的链接，一般用相对路径，否则用绝对路径。 例如： 外部链接 点击进入四川信息职业技 术学院 绝对地址 内部链接 打开站点首页 相对地址 内部文件链接 音 乐试听（让我们荡起双桨） 相对地址 ：创建一个自动发送电子邮件的链接。 Mailto:后面跟 Email 地址。 例如：邮件链接 与联系我 创建一个位于文档内部的锚点链接： 1.定义锚点： 2.创建一个指向位于文档内部锚点的链接：
例如：内部锚点链接 在网站顶部创建锚点 〈a names="top">联系我 在网站底部创建链接到该锚点的链接 返回顶部 2.创建一个指向位于文档内部锚点的链接：〈a href="URL#NAME"> 例如：外部锚点链接 在另外一个网页“me.htm”的某处创建锚 〈a name="here">链接到此处 点“here” 在“index..htm”中创建链接到 〈a href="me.htm#top">点击此 ‘me.htm”锚点“here”处的链接 处 注意： A标签可以通过“target”属性设置“blank”值在新的窗口中打 开被链接的文件。 例如：欢 迎访问四川信息职业技术学院 〈a href="ChaoJiLink/images/rwmdqsj.wma”targeti=”_blank">音乐试 听（让我们荡起双桨） 【课后小结】
例如：内部锚点链接 在网站顶部创建锚点 联系我 在网站底部创建链接到该锚点的链接 返回顶部 创建一个位于外部文档的锚点链接： 1.定义锚点： 2.创建一个指向位于文档内部锚点的链接： 例如：外部锚点链接 在另外一个网页“me.htm”的某处创建锚 点“here” 链接到此处 在“index.htm”中创建链接到 “me.htm”锚点“here”处的链接 点击此 处 注意: A 标签可以通过“target”属性设置“blank”值在新的窗口中打 开被链接的文件。 例如： 欢 迎访问四川信息职业技术学院 音乐试 听（让我们荡起双桨） 【课后小结】
本节课通过实例分析了超级链接的概念、分类及应用，要求学生掌 握Dream weaver中超级链接的应用及常用超级链接的基本语法格式
本节课通过实例分析了超级链接的概念、分类及应用，要求学生掌 握 Dreamweaver 中超级链接的 应用及常用超级链接的基本语法格式