网页设计与制作第5章 创建超级链接
《网页设计与制作实例教程》课件第5章
第5章 设置超级链接
5.2 创建超级链接
教学内容
5.2.2 创建文本超链接
文本超链接的创建，有多种方法，可以在“链接”文本框中输入内容，
也可以利用工具按钮来创建链接。 实例2 安徽省各地简介 给网页中的文本“淮北”、“合肥”、“阜阳”、“宿州”创建超
链接，效果如下图所示。
单击 ②删除
打开网页
第5章 设置超级链接
5.2.1 创建图像超链接
教学内容
给网页上的图像设置超链接，使得用户通过单击图像就可以打开相应 的内容，让网页更加生动。例如常见的友情链接，可以将站点页面链接到本 地站点以外的页面，设计者需要事先给相应的图像指定一个完整的地址。
实例1 创建友情链接 在网页文档中插入3张图像，并将它们用新窗口的方式分别链接到相应 的网页，如下图所示。
A. 1像素 B. 5像素 C. 10像素 D. 20像素
第5章 设置网页超级链接
5.4 小结和习题
5.4.2 强化练习
教学内容
二、判断题
1．设置电子邮件超链接时，在“链接”框中直接输入邮箱地址即可，例如
teacher@。
()
2．使用根目录相对路径时，以“\”开头。
()
3．超链接创建后无法删除或更改。
5.3.1 自动更新超链接 5.3.2 检查链接错误
第5章 设置网页超级链接
5.4 小结和习题
教学内容
5.4.1 本章小结
网络中的所有资源都是通过超链接联系在一起的，利用好超链接，可 以让网页变得更加方便、清晰和更富有灵性。本章详细介绍了超级链接的制 作方法和技巧，具体包括以下主要内容。
1. 超链接的基本概念 超链接的定义、分类、地址、URL等。 2. 创建超链接 主要介绍了在Dreamweaver中创建图像超链接、文本超 链接、电子邮件超链接、空链接和脚本超链接、下载文件超链接以及热点超 链接的方法。 3. 管理超链接 包括自动更新和检查链接错误的方法。
Dreamweaver CS6网页设计与制作标准教程 (5)
超链接
本章简介：
网络中的每个网页都是通过超链接 的形式关联在一起的，超链接是 网页中最重要、最根本的元素之 一。浏览者可以通过鼠标单击网 页中的某个元素，轻松地实现网 页之间的转换或下载文件、收发 邮件等。要实现超链接，还要了 解链接路径的知识。下面对超链 接进行具体的讲解。
课堂学习目标
了解超链接的概念与路径知识 掌握文本、图像超链接的创建方法 掌握命名锚点、热点超链接的创建 方法
利用“属性”面板建立电子邮件超链接
（ 1 ）在文档窗口中选择对象，一般是文字，如“请联系我
们”。 （2）在“链接”选项的文本框中输入“mailto”网址。例如， 网站管理者的E-mail地址是xuepeng8962@，则在“链接” 选项的文本框中输入“mailto: xuepeng8962@” 。
5.3.3 鼠标经过图像链接
“鼠标经过图像”是一种常用的互动技术，当鼠标指针经过
图像时，图像会随之发生变化。一般，“鼠标经过图像”效果由两
张大小相等的图像组成，一张称为主图像，另一张称为次图像。主 图像是首次载入网页时显示的图像，次图像是当鼠标指针经过时更 换的另一张图像。“鼠标经过图像”经常应用于网页中的按钮上。 建立“鼠标经过图像”的具体操作步骤如下。 （1）在文档窗口中将光标放置在需要添加图像的位置。 （2）通过以下几种方法打开“插入鼠标经过图像”对话框。 选择“插入 > 图像对象 > 鼠标经过图像”命令。 在“插入”面板“常用”选项卡中，单击“图像”展开式工 具按钮 ，选择“鼠标经过图像”选项 。 （3）在对话框中按照需要设置选项，然后单击“确定”按钮 完成设置。按F12键预览网页。
“电子邮件链接”对话框
5.3 图像超链接
课堂案例——温泉度假网页 图像超链接 鼠标经过图像链接
第五章__创建超级链接
③“目标”下拉菜单中，选择文档的打开位置。 _self：会在当前网页所在的窗口或框架中打开（默认方式）。 _blank :每个链接会创建一下新的窗口。 _new：会在同一个刚创建的窗口中打开。 _parent：如果是嵌套的框架，则在父框架中打开，如果不是嵌 套框架，则所链接的文档载入整个浏览器窗口。 _top：将链接的文档载入整个浏览器窗口，从而删除所有框架 。
作用：
外部链接主要有两个作用。一个作用是面向用户，用户 可以通过A网站的链接点击到B网站从而带来访问者；另一个 作用是外部链接可以分享到一部分权重，A网站链接到B网站 代表A网站告诉搜索引擎它信任B网站，觉得B网站是一个不错 的网站从而给B网站投了一票，这样B网站就可以从A网站分享 到一定权重，并在搜索引擎那的权重得到提高。
如果链接的目标锚记在同一站点的其他网页中，需要先输入 该网页的路径和名称，再输入“#”和锚记名称，如 “index.htm#a”。
如果链接的目标锚记在Internet上某个站点的网页中，需要 先输入该网页的完整地址，再再输入“#”和锚记名称，如 “/yx/200803.htm#b”。
3、脚本链接
执行 JavaScript 代码或调用 JavaScript 函数。它非常 有用，能够在不离开当前 Web 页面的情况下为访问者提供有 关某项的附加信息。脚本链接还可用于在访问者单击特定项时 ，执行计算、验证表单和完成其它处理任务。
5.2文本超级链接
一、文本超级链接
文本超级链接是最常见的超级链接，通过使用鼠标点击 文本即可从一个网页跳转到另一个网页。 1、通过HTML属性检查器创建 ①先选中文字，打开“属性”面板中的“链接”文本框，在其 中输入要链接的文档名称或站点地址。 如果是同一站点内的文件，也可以单击“链接”文本框右侧的 文件夹图标，在弹出的对话框中选择要链接的网页。 将“链接”文本框右侧的“指向文件”图标拖动到“文件面板 ”中的目标文件上。 ②在“标题”文本框中输入提示性的内容。
Dreamweaver 8中文版网页制作-教学大纲第5章 创建超级链接-电子教案
6.设置鼠标经过图像和导航条的方法。
7.设置脚本链接的方法。
重点
难点
设置文本超级链接及其状态的方法
设置图像和热点超级链接的方法
设置锚记超级链接的方法
要求掌握
的知识点
文档位置和路径以及超级链接的分类、文本超级链接、文本超级链接的状态、图像超级链接、图像热点超级链接、空链接、电子邮件超级链接、锚记超级链接、鼠标经过图像、导航条、脚本链接
1、教学思路
2、教学手段
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
3、让学生自己动手重新制作教学案例。
作业布置
作业：一～三
主要
参考资料
备注
中等职业学校教案
教研室：
课程名称：Dreamweaver 8中文版网页制作
任课教师：
XXXX学校教务处制
中等职业学校教案
第5次课讲授2学时实践2学时
章节
第5章创建超级链接
讲授主
要内容
1.文档位置和路径以及超级链接的分类。
2.设置文本超级链接及其状态的方法。
3.设置图像和热点超级链接的方法。
4.设置电子邮件超级链接的方法。
Web习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
五章超链接ppt课件
第五章 超链接
14
5.3 超链接的设置
5.3.4 锚点链接
所谓锚点链接，是指同一页面中的不同位置链接，锚记链接主 要应用于文本内容较多的网页。 （1）将光标定位在要设置标记的位置，在【插入】面板的【常 用】模式中，选择【命名锚记】按钮，如下图所示。
第五章 超链接
15
5.3 超链接的设置
5.3.4 锚点链接
（2）在弹出的【命名锚记】对话框中键入该锚记的名称，如top， 然后单击【确定】按钮（注意：区分大小写），名为top的锚点即 被插入到文档中的相应的位置。如图所示。
第五章 超链接
16
5.3 超链接的设置
5.3.4 锚点链接
（3）选择要创建链接的文本或图像，例如选中“返回顶部”四个字， 在【属性】面板的“链接”文本框中，键入＃号和锚记名称“＃top”。 如图所示。
18
5.3 超链接的设置
5.3.5 下载链接与空链接
2. 空链接
空链接也叫无址链接，也就是没有链接对象的链接即是未指派
的链接，在空链接中，目标URL是用“#”来表示的。即在【属性】 板的链接输入框中录入#标记，如图所示。
第五章 超链接
19
5.3 超链接的设置
5.3.6 图像链接
方法与文本链接一样，选择“图像”对象，在【属性】板的链
• 站点根目录相对路径
提供了站点根文件夹到所链接页面文档的路径，与当前页面 文档位置无关。站点根目录相对路径以“/”开始，该符号表示站点 根文件夹，例如：/index/index.html。
第五章 超链接
5
5.2 超链接路径
• 相对路径
指某个文件（文件夹）相对于别外一个文件（文件夹）的相对位置。
Dreamweaver cs5标准实例课件第5章 制作超链接
5.2.5 虚拟链接和脚本链接
虚拟链接也称为空链接，是指没有指定的链接，一般用于向页面上的文本或 对象添加行为。虚拟链接主要包含以下两种格式：
<a href=#>虚拟链接</a> <a href=javascript:;>虚拟链接</a> 第1种格式被单击时将返回到页面顶部，这种格式无法添加行为；第2种格式
5.3 使用热点制作图像映射
简单地说，图像映射就是将一幅图像用热点工具分割为若干个区域，并将这些 子区域设置成热点区域，然后将这些不同的热点区域链接到不同的页面。当用户单 击图像上不同热点区域时，就可以跳转到不同的页面。
在绘制热点区域后，常常需要调整热点区的大小和形状，以满足设计需要。 （1）在属性设置面板左下角单击调整热点工具按钮，然后单击需要调整大小的热 点区域。此时被选中的热点区域周围会出现控制手柄。 （2）把鼠标放在这些小方块上，然后拖拉鼠标即可改变热点区域的大小或形状。 如果是矩形或多边形热点区域，如此操作会改变区域的形状；而对于圆形热点区域 ，上述操作只会改变形状的大小。
5.2 创建、管理超级链接
5.2.1 创建文本超链接
1、在文档窗口中选中需要建立链接的文本。 2、在属性面板的“链接”文本框中输入链接目标；或选择“窗口”/“属性”菜单 命令打开属性面板。在“链接”后的文本框中输入链接目标。
默认情况下，文本链接显示为蓝色，并加有下划线。用户可以选择“修 改”/“页面属性”菜单命令，在“页面属性”面板的“链接”分类页面设置超级 链接在各种状态下的颜色，以及选择是否显示下划线。 如果链接目标是计算上的一个文件或图片，可以单击“链接”文本框右侧的文件 夹图标，打开“选择文件”对话框，查找并选择文件。或者选择“指向文件”图标 ， 并按下鼠标左键拖动到“文件”面板中一个现存的页面。 注意：Dreamweaver不支持扩展字符集（也被称为High ASCII），所以在指定链 接的URL时，不能包含扩展字符集，且完全的URL最多不能超过255个字符。此外， 尽管大多数浏览器可以解释路径名或URL中的空格，但在UNIX应用中，空格会被变为 %20，这将使得URL比较难看。
网页设计与制作_第05章创建和设置超级链接ppt课件
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清 能形成 生产能 力。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
文本超级链接 图像超级链接 图像地图 电子邮件超级链接 锚记超级链接 空链接 鼠标经过图像 导航条 Flash文本 Flash按钮 脚本链接
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
(2) 根据目标端点的不同，超级链接可分为内部超级链接、外部超 级链接、电子邮件超级链接和锚记超级链接。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
5.2 创建超级链接
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
5.1.3 链接目标
链接目标用于设置单击某个链接时，被链接文件打开的位置。 通常，链接目标有以下4种形式。
【_blank】：将链接的文档载入一个新的浏览器窗口。 【_parent】：将链接的文档载入该链接所在框架的父框架或 父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档 载入整个浏览器窗口。 【_self】：将链接的文档载入链接所在的同一框架或窗口。 此目标是默认的，因此通常不需要特别指定。 【_top】：将链接的文档载入整个浏览器窗口，从而删除所有 框架。
《网页设计与制作》课程标准
广西玉林高级技工学校《网页制作与设计》课程标准一、课程基本信息二、课程性质本课程是中职计算机术专业的一门主干专业课程。
通过本课程的学习，要求学生掌握网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的静态和动态网页，具备网站的建立和维护能力。
同时通过本课程的学习，培养学生的综合职业能力、创新精神和良好的职业道德。
三、设计思路本课程标准的总体设计思路：以计算机专业学生的就业为导向，根据行业专家对计算机网络技术专业所涵盖的岗位群进行的任务和职业能力分析，紧紧围绕完成工作任务的需要来选择课程内容，设定职业能力培养目标；以“工作项目”为主线，创设工作情景；以书本知识的传授变为动手能力的培养为重点，强化学生实践动手能力的培养，以实现职业能力的培养目标。
四、课程目标1.职业知识目标1．熟悉HTML 语言的作用和开发环境，能够编写HTML 代码；2．掌握常用的HTML 标签，能够实现基本的图文信息显示；3．理解HTML 页面框架的作用，能够针对需求进行框架的设计；4．掌握各类HTML 表单元素标签，能够进行表单设计；5．掌握各类HTML 多媒体元素标签，能够进行多媒体页面设计；6．掌握CSS 样式的基本使用方法，能够应用CSS 样式表美化页面；7．掌握CSS 网页布局的方法，能够结合DIV 标签进行页面布局；8．掌握JavaScript 的语法基础，能够编写简单的JavaScript 应用程序；9．掌握JavaScript 的函数、内置对象、事件等，能够实现表单的验证；10．掌握DOM 树形结构及其操作方法，能够控制DOM 对象。
2.职业技能目标1．能独立进行资料收集与整理、具备用户需求的理解能力；2．能根据项目需求，具备项目页面的设计与实现能力；3．能根据静态页面设计原则与CSS 技术规范，实现页面美化与布局；4．具有使用JavaScript 技术进行页面事件处理与表单验证的能力；5．能根据DOM 树形结构，进行页面DOM 的控制；6．具有综合应用HTML 语言、CSS 样式、JavaScript 脚本进行页面的设计、编码、调试、维护能力。
网页制作与网站设计_05Dreamweaver CS3创建超级链接
任务三
任务描述 任务说明
操作步骤
3)按F12键，保存网页文档并在浏览 器中检验该文档。
任务四
任务描述 任务说明 操作步骤
小张想自己设立了一个网页，在
运行过程中可能会出现问题，通过浏
览者能反馈的信息，及时改进，提高 网页的制作水平。
任务四
任务描述 任务说明
在网页上创建E-mail链接，可以使浏
任务一
任务描述
任务说明 操作步骤
“_blank”:在弹出的新窗口中打开所链接 的目标。 “_parent”:如果是嵌套的框架，表示在 父框架 “_self”:浏览器默认的设置，在当前网页 所在的窗口中打开链接的网页。 “_top”:在完整的浏览器窗口的顶层打开 链接目标。
任务一
任务描述
任务说明 操作步骤
任务一
任务描述
任务说明 操作步骤
在“属性”面板中，单击“链接”文
本框右侧的指向文件图标，拖动鼠标时会
出现一条带箭头的细线，指示到链接的文 件后，释放鼠标，可以链接该文件⑻如图
5-4所示。
任务一
任务描述
任务说明 操作步骤
图5-4 创建指向文件图标链接
任务二
任务描述
任务说明 操作步奏
小张在浏览网页时，看见鼠标经过 某些文本时，会出现一个小手，点击后 会出现新的窗口，自己也想试一试。
图5-2 目标选项
任务一
任务描述
任务说明 操作步骤
④“标题”:设置超链接的标题。当鼠 标悬停在超级链接上时出现的说明文字。 ⑤“访问键”:设置键盘快捷键，设置 好后，如果按键盘上的快捷键将选中这个 超级链接。 ⑥“Tab键索引”:设置在网页中用 Tab键选中这个超链接的顺序。 2）完成参数设置后，单击“确定”按钮， 即可完成链接。
(完整版)《网页设计与制作》课程教案
(完整版)《网页设计与制作》课程教案《网页设计与制作》课程教案一、课程定位本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面,为就业做好准备。
本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks的使用方法,并能够使用这3款软件制作出美观实用的网页。
二、课程总目标掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分.（一）知识目标:1.熟悉网页制作的基本元素;2。
掌握Dreamweaver CS6软件的基本操作方法；3.掌握在网页中插入文字、图片、声音、flash等的方法；4。
掌握常见的网页布局方法，学会使用CSS美化网页;5。
掌握在网页中使用表单和制作网页特效的方法；6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画并巧妙地和网页中内容搭配起来。
7。
掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静态页面部分。
（二）职业能力培养目标1。
能够根据网站开发需求,去寻找网页设计和网站开发所需要的文字、图片、动画、声音、视频等素材并作美化处理；2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览者接受和喜爱；3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态页面。
（三）素质目标1.具有勤奋学习的态度，严谨求实、创新的学习精神；2。
具有良好的心理素质和职业道德素质;3。
具有高度责任心和良好的团队合作精神；4.具有运用理论知识发现问题、分析问题并解决问题的能力,同时能够不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。
（四）职业技能证书考核要求：可以根据自身情况考取“全国计算机信息高新技术资格证”,“网页设计制作员"，“网页设计师”等职业技能证书。
网页设计 第5章超级链接及使用 共九章ppt
2、 制作步骤 1 ）定义本书素材 source 目录下的文件夹 5-1-5 为本 地站点目录。 打开根目录下的 map.htm文件，选择“【窗口】→【 属性】”菜单命令，打开属性面板。如图5-1-20所示。
选中文档中的图片，属性面板出现相应的各项设 置。如图5-1-21所示。
选择“属性”面板中“地图（M）”下图标中的某 一形状，按住鼠标左键在图片中相应位置拖动即可建 立一个矩形的“热区”，在默认情况下，刚创建的热 区的“链接(L)”为“＃”，需要手动设置链接的目标 网址，同时也可设置“目标(R)”及“替代（T）”。如 图5-1-22所示。
2、 制作步骤 （ 1 ）定义本书素材 source 目录下的文件夹 5-1-4 为本 地站点目录。 打开根目录下的 traandwri.htm文件，选择“【窗口】→ 【属性】”菜单命令，打开属性面板。如图5-1-15所示
（2）创建锚点 将鼠标光标定位于页面中标题“翻译与写作”文 字之后，选择主菜单“【插入】→【命名锚记(N) 】” ，弹出“命名锚记”对话框，输入“命名锚记返回顶 部”文字后单击“确定”按钮，如图5-1-16所示。
直接输入 mailto:echo@
方法二： 将鼠标光标定位于页面中要显示电子邮件的地方， 选择主菜单“【插入】→【电子邮件链接(L) 】”，弹 出“电子邮件链接”对话框，输入相应内容后单击“ 确定”按钮，如图5-1-14所示。
“电子邮件链接”对话框中，设置以下选项： 文本。显示在页面中的文字，可以为Email地址 或其它文字。 E-mail。邮件地址。
“ 指向文件”图标指向 目标窗口任意位置
方法四： 打开属性面板，在“链接(L)” 直接输入链接地址 ，如要链接到站点内的其他文档，输入目标文件的具 体路径与文件名；要链接到站点以外的文档，则输入 完整 URL，而且包括所使用的协议。 例如，选中“index.htm”文档中的“logo.gif”图片 ，打开属性面板，在“链接(L)”直接输入 /index.asp，即可自动生成目 标指向网站下的index.asp文档 的链接。如图5-1-10所示。
06386网页设计与制作
湖北省高等教育自学考试课程考试大纲课程名称：网页设计与制作课程代码：06386第一部分课程性质与目标一、课程的性质与特点“网页设计与制作”是湖北省高等教育自学考试网络传播专业（专科段）开设的一门专业实践课程。
网页是网络中信息传播的重要载体，是当今网络传播应用的主要形式。
作为网络与新媒体专业的学生只有了解、掌握了网页设计与制作的基本原理、基本操作方法，才能更好进行网络传播的应用与实践。
本课程通过对网页的基本原理、CSS基础、网页页面的布局结构、文本图像与多媒体的使用、页面链接、列表与表格、表单与程序控制制作流程、以及对相关软件的操作掌握后，可以独立完成对网页的制作设计与编辑，从而将新闻等网络信息通过网页展现，更好将网络新闻的采编评与网络传播的网页展现形式结合，充分发挥网络传播的特点。
在网络与新媒体专业学生将来的实际工作中需要经常用到本课程内容中介绍的基本原理和方法。
因此，本课程是该专业学生必须掌握的一门课程。
本课程是本专业及相关专业相关课程进一步学习的基础课程。
二、课程目标和基本要求网页的设计与制作是一门与计算机结合十分紧密的课程。
既需要一定的理论知识，也需要一定的实际操作能力。
通过本课程自学、上机实习、作业等方式的学习，要求学生掌握网页的基本原理、网页制作与设计的基本方法、能操作相关应用软件，最终达到可以独立或者与他人分工合作完成简单和复杂网页的设计与制作。
具体地说，包括以下几个方面：（1）考生了解网页的基本概念、基本结构、制作流程和设计原则等相关基础知识，掌握网站的开发流程，能独立规划和设计网站。
（2）要求考生能熟练掌握多媒体素材在网页制作中的运用。
（3）使考生掌握网页描述语言HTML、CSS的用法，能熟练运用常见的网页标记。
掌握JavaScript 脚本语言程序设计的基础知识，能编写JavaScript脚本创建具有动态效果的网页。
本课程要求学生在自学过程中，特别要加强实践环节，培养动手能力，掌握相关软件的使用方法，要求应试者具备一定的上机能力和实际应用能力。
网页设计 超级链接
2．添加下载文件的链接 • 每一个下载的文件必须对应一个下载链接。
• 多个文件需要利用压缩软件将这些文件或者
文件夹压缩成为一个文件。
– 即首先建立一个“rar”文件夹，然后将文件打包 成“pic.rar”文件，存放到该文件夹中。
例：为“学习心得一”创建下载文件链接。
4.2 超链接应用简介 4.2.1 锚点链接 4.2.3 链接提示
4.2.1 锚点链接 • 锚点链接
– 在文档中设置位置标记，并给该位置一个名 称，以便引用。
• 锚点的作用
– 用来跳转到特定的主题或文档的顶部，使访
问者能够快速浏览到选定的位置，加快信息
检索速度。
教 师：刘抗 E-mail：sqlk007@
本节要点 • 创建各种常用超级链接
• 给链接增加提示
• 链接的管理
4.1 超级链接的基本操作简介 4.1.1 网站内部链接的创建
4.1.2 网站外部链接的创建
4.1.3 对链接进行管理
4.1.1 网站内部链接的创建 • 文本超级链接
。
• 方法三
– 使用【属性】面板上的【指向文件】按钮
4.1.2 网站外部链接的创建 1．创建邮件链接 2．添加下载文件的链接 3．空链接
1．创建邮件链接 • 方法一
– 用【属性】面板的【链接】文本框实现。
• 方法二
– 单击【常用】工具栏中【电子邮件链接】按 钮。
• 方法三
– 执行【插入】|【电子邮件链接】命令。
– 浏览网页时，鼠标指针经过某些文本时，形
状会发生变化，同时文本也可能发生相应的
变化，这就是带链接的文本，单击它可以打
开所链接的网页，这就是“文本超级链接” 。
制作文本超级链接的方法
精品课件-网页设计与制作实践-第5章 列表与超链接
</dl>
5.1 列表标记
• 5.1.3 定义列表dl • 在上面的语法中，<dl></dl>标记用于指定定义列表， <dt></dt>和<dd></dd>并列嵌套于<dl></dl>中，其中， <dt></dt>标记用于指定术语名词，<dd></dd>标记用于对 名词进行解释和描述。一对<dt></dt>可以对应多对 <dd></dd>，即可以对一个名词进行多项解释。
5.3 超链接标记
• 5.3.1 创建超链接 href：用于指定链接目标的url地址，当为<a>标记应用 href属性时，它就具有了超链接的功能。 target：用于指定链接页面的打开方式，其取值有_self 和_blank两种，其中_self为默认值，_blank为在新窗口 中打开方式。
5.3 超链接标记
第五章 列表与超链接
列表标记 CSS控制列表样式 超链接标记 链接伪类控制超链接
5.1 列表标记
• 5.1.1 无序列表ul
• 无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如
下：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li>
网页设计与制作 项目 5使用超链接
注意：在创建E-mail链接时，mailto:和 “@”是必不可少的
5.2.5 创建空链接
空链接实际上是一个未指派目标的链接，利用 空链接可以激活网页上的对象或文本。
（1）打开HTMI，选择文字或图片
页
Javascript：window.close()：关闭窗口
任务2 管理超链接
5.3.1 链接检查器的使用
在DreamweaverCS4中可以使用链接检查器来 管理当前站点的超链接，帮助站点制作者检查站 点的链接是否有效，统计有效连接、无效链接、 断开连接和外部链接的个数，修改断开或无效的 链接。
2.图像地图
图像地图，也称为图像热区、图像热点，在“属 性”面板上的矩形、圆形和多边形热点工具建立 需要的热点区域
5.2.3 创建锚点连接
1.创建目标在本页上的锚点链接
（1）打开HTML，光标定位在热字前面， “插入”——“命名锚记”命令，或者在“常 用”选项卡中单击“命名锚记”按钮
（2）在“锚记名称”文本框中输入锚记的 名称abc，单击“确定
（2）在“属性”面板“链接”下拉列表中输入 “javascript:;”或输入“#”就可以了
5.2.6 创建文件下载链接
选择需要创建文件下载链接的源文本，在 “属性”面板“链接”下拉列表输入目标文件的 URL
5.2.7 创建脚本链接
网站中的超链接不但可以实现网页页面之间的跳转， 还可以直接调用Javascript代码，这种超链接就成为脚本 链接或Javascript链接。 （1）选定文字或图片，在“属性”面板“链接”下拉列表 中输入“Javascript ：”，然后输入一些Javascript代码 或函数调用即可
网页设计与制作第5章 超链接
<br><br><hr><br><br><br><br> <h3><a id="T2">计算机基础</a> </h3> <p>《计算机基础》是……。</p> <a href="#top">返回页首</a>
_blank：在新窗口载入文档，可同时打开多个相同窗口。 但如无特殊需要请勿滥用。
_self：在被点击的同一框架中打开被链接文档（默认）。 _parent：在父框架集中打开被链接文档。 _top：在窗口主体中打开被链接文档。 new：在新窗口载入文档，但只打开一个窗口（受浏览
器限制）。 说明：_self、_parent 和_top 这三个值大多数时候与iframe一起 使用。
<br><br><hr><br><br><br><br> <h3><a id="T3">计算机网络</a> </h3> <p>计算机网络是……。</p> <a href="#top">返回页首</a>
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 主机名：指服务器在网络中的IP地址或域名，在因特网中使 用的多是域名。
• 路径和文件名：主机名与路径及文件名之间以“/”分隔。
5.1.2
链接路径的类型
绝对路径提供所链接文档的完整的URL，没能任何省略部分， 其中包括所使用的通信协议，例如， “/support/dreamweaver/contents.html”。对于图像文 件，完整的URL可能会类似于 “/support/dreamweaver/images/01.jpg”。在一个站点 链接其他站点上的文档时，通常使用绝对路径。 文档相对路径是指省略当前文档和所链接的文档都相同的绝对 路径部分，而只提供不同的路径部分，例如， “dreamweaver/contents.html”。对于大多数站点的本地链接来说，文 档相对路径通常是最合适的路径。 站点根目录相对路径描述从站点的根文件夹到文档的路径，站 点根目录相对路径以“/”开始，“/”表示站点根文件夹，例如， “/support/dreamweaver/contents.html”。在处理使用多个服务器的大 型站点或者在使用承载多个站点的服务器时，可能需要使用这种路 径。如果需要经常在站点的不同文件夹之间移动HTML文件，那么使 用站点根目录相对路径通常也像压缩包”的链接目标文件为 “images/images.rar”，标题文本为“下载图像”。
(5) 设置文本“反馈给我们”的链接目标为电子邮件地址 “us@”，标题文本为“反馈意见或建议”。
• 外部超级链接：链接目标位于站点外的超级链接形式。外部超级链 接可以实现网站之间的跳转，从而将浏览范围扩大到整个网络。
5.1.3
超级链接的分类
根据链接目标对象的不同，超级链接可分为以下几种类型。 • 网页超级链接：链接到HTML、ASP、PHP等网页文档的链接，这 是网站最常见的超链接形式。 • 下载超级链接：链接到图像、影片、音频、Word文档、Excel文档、 PowerPoint文档、PDF文档等资源文件或RAR、ZIP等压缩文件的链接。 • 电子邮件超级链接：链接到电子邮件的超链接形式，将会启动邮件 客户端程序，可以写邮件并发送到链接的邮箱中。 • 空链接：链接目标形式上为“#”，主要用于在对象上附加行为等。
5.1.1 超级链接的概念
在因特网中，每个网页都有惟一的地址，通常称为URL（ Uniform Resource Locator，统一资源定位符）。URL的书写格式通常 为“协议://主机名/路径/文件名”，例如， “/bbs/index.htm”便是网站论坛的URL，而 “”省略了路径和文件名，但服务器会将首页文件回 传给浏览器。由此可以看出，URL主要用来指明通信协议和地址， 以便取得网络上的各种服务，它包括以下几个组成部分。 • 通信协议：包括HTTP、FTP、Telnet和Mailto等几种形式。
5.1.3
• • •
超级链接的分类
按照不同的标准，超级链接可以有不同的分类。根据链接载体对象的 不同，超级链接通常可分为以下两种。 文本超级链接：以文本作为超级链接载体。 图像超级链接：以图像作为超级链接形体。
根据链接路径类型的不同，超级链接通常可分为以下两种。 内部超级链接：链接目标位于同一站点内的超级链接形式。
• 脚本链接：链接目标为一段JavaScript脚本代码，用于执行某项操作。 • 锚记超级链接：链接目标为网页文档中的某一位置，这一位置可以 位于当前网页或其他网页中，这个网页可以位于当前站点内，也可以位于其 他站点内。
5.2 文本超级链接
5.2.1 教学案例━━1932年我国首次参加奥运会 5.2.2 文本超级链接 5.2.3 下载超级链接和空链接 5.2.4 电子邮件超级链接 5.2.5 本超级链接的状态 55.1.1 超级链接的概念 5.1.2 链接路径的类型 5.1.3 超级链接的分类
5.1.1 超级链接的概念
超级链接习惯简称为超链接，是指从一个网页指向一个目标的 连接关系，这个目标对象可以是另一个网页，也可以是一个图像、 一个电子邮件地址、一个文件（如Word、Excel、Rar、Zip文件等）， 甚至是一个应用程序，还可以是相同网页上的不同位置。而在一个 网页上用作超级链接的载体对象，可以是一段文本或者是一幅图像， 甚至可以是一幅图像的某一部分。当浏览者在浏览器中单击已经设 置链接的文本或图像后，链接目标将显示在浏览器窗口中，并且根 据目标的类型来打开或运行。超级链接在本质上属于一个网页的一 部分，它是一种允许用户同其他网页或站点之间进行交互的元素。 各个网页链接在一起后，才能真正构成一个网站。
5.2.1 教学案例━━1932年我国首次参加奥运会
将素材文档复制到站点文件夹下，然后根据要求设置超级链接，在浏 览器中的显示效果如图5-1所示。 (1) 设置网页中文本“奥运会首位中国运动员刘长春”的链接目标文件 为“liuchangchun.htm”，打开目标窗口的方式为在新窗口中打开，标题文本 为“刘长春”。 (2) 设置网页中文本“奥运会首位中国运动员刘长春纪念雕塑”的链接 目标文件为“diaosu.htm”，打开目标窗口的方式为在新窗口中打开，标题文 本为“刘长春纪念雕塑”。
第5章 创建超级链接
超级链接是网站中使用比较频繁的HTML 元素，因为网站的各种页面都是由超级链接 串接而成，超级链接完成了页面之间的跳转。 本章将介绍超级链接的基本知识以及创建超 级链接的基本方法。
学习目标
了解超级链接的概念和分类。 掌握设置文本和图像超级链接的方法。 掌握设置锚记和脚本超级链接的方法。 掌握测试和更新超级链接的方法。