网页超链接的制作
Dreamweaver中怎样制作超链接
Dreamweaver中怎样制作超链接【页面之间的超级连接】在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。
1、在网页中选中要做超级链接的文字或者图片。
2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的'网页文件就完成了。
做好超级链接属性面板出现链接文件显示。
3、按F12预览网页。
在浏览器里光标移到超级链接的地方就会变成手型。
〖提示〗你也可以手工在链接输入框中输入地址。
给图片加上超级链接的方法和文字完全相同。
如果超级链接指向的不是一个网页文件。
而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。
超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。
例如，在链接框里写上那么，单击链接就可以跳转到老小孩网站。
【邮件地址的超级连接】在网页制作中，还经常看到这样的一些超级链接。
单击了以后，会弹出邮件发送程序，联系人的地址也已经填写好了。
这也是一种超级链接。
制作方法是：在编辑状态下，先选定要链接的图片或文字(比如：欢迎您来信赐教!)，在插入栏点或点插入菜单选“电子邮件链接”弹出如下对话框，填入E-Mail地址即可。
提示：还可以选中图片或者文字，直接在属性面板链接框中填写“mailto：邮件地址”。
创建完成后，保存页面，按F12预览网页效果。
【制作图片上的超级链接】注意，我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。
比如一张中国地图的图片，单击了不同的省跳转到不同的网页。
可点的区域就是热区。
为了演示制作效果下面的中国地图我加了一些链接，你可以用鼠标测试。
鼠标移动到省份的热区，会显示提示，如果有预先设置的网站，点击会进入对方的网站。
【制作方法】1、首先插入图片。
单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。
2、属性面板改换为热点面板如图：链接输入框：填入相应的链接。
替代框：填入你的提示文字说明。
超链接用法
【查找更多】【我要推荐】熟悉网页制作的朋友，当然对超链接比较熟悉了，但是当我们在用Word进行文档处理，有时候也需要设置超链接的，比如在超长文档中创建文档目录，为书稿创建目录等，这样以来我们只需要点击第一页的超链接即可快速跳转到需要的页面，那在Word中如何来快速地创建文档内的超链接呢？至少有三种方法可以达到目的。
●拷贝粘贴法：利用鼠标拖放法创建超链接很方便，但是有时超级链接的起点和终点在文档中相距较远，使用拖放式编辑的方法是很不方便的。
这时可以选择超级链接的目标词、句或图像，按下Ctrl+C复制选定内容，把光标移动到需要加入链接的位置，然后执行菜单“编辑”——“粘贴为超链接”即可。
●拖放编辑法：首先保存文档，然后拖动鼠标选中特定的词、句或图像作为超级链接的目标，然后点击鼠标右键，把选定的目标拖到需要链接到的位置，释放鼠标按键，在快捷菜单中选择“在此创建超级链接”选项即可。
●使用书签法：我们也可以通过使用书签来实现。
首先保存文档，选择特定的词、句或图像作为超级链接的目标，选择菜单“插入”——“书签”，插入书签时，需要为书签命名，命名后单击“添加”按钮，把光标移到需要添加超级链接的位置，选择“插入”——“超级链接”，在“编辑超链接”对话框中单击“书签”按钮，并在“在文档中选择位置”对话框中选择特定的书签，单击“确定”按钮即可。
在使用Word编辑文档的时候，有些输入的内容会被自动变成蓝色的带有下划线的“超级链接”，单击后可以转向Internet中的文件、文件的位置或HTML网页，也或是Intranet上的HTML网页；还可以转到新闻组或Gopher、Telnet和FTP站点。
在一般情况下，Word的这种自动功能给我们编辑文档带来了不少便利。
但有时候，我们可能并不需要Word的这些“热心”举动，该怎样灵活处理这些不同的情况呢？让我们一起来探讨一下使用Word时有关超级链接的技巧吧。
★创建文档内部的超级链接我们经常需要在一个文档内部创建超级链接，来实现阅读中的跳转，其实这有3种方法可以选择。
第4章 建立超链接
“Internet属性 属性” 图4-6 “Internet属性”对话框
4.1.4 特定目标的链接 在制作网页时， 在制作网页时，可能会出现网页内容 过长或者是网页内容繁杂混乱的情况， 过长或者是网页内容繁杂混乱的情况，这 样当用户浏览网页时就会很不方便。 样当用户浏览网页时就会很不方便。要解 决这个问题， 决这个问题，可以使用超链接的手段在网 页开头的地方制作一个向导链接， 页开头的地方制作一个向导链接，直接链 接到特定的目标，这个目标成为“锚记” 接到特定的目标，这个目标成为“锚记”。
• • • • •
图4 - 5
超链接文字的颜色设置
【例4-3】 超链接颜色设置示例 】 <html> <head> <title>链接颜色的变化 链接颜色的变化</title> 链接颜色的变化 </head> <body text=blue alink=red vlink=yellow link=green> 注意<a 颜色</a>的变化 注意 href=1.html>颜色 颜色 的变化 </body> </html>
【例4-4】 锚记应用示例 】
<html> <head> <title>特定链接 特定链接</title> 特定链接 </head> <body> <h1>古诗鉴赏 古诗鉴赏</h1><p> 古诗鉴赏 <h3>单击 href=#春宫怨 春宫怨 单击<a 春宫怨>春宫怨 单击 春宫怨 春宫怨</a></h3><p> <h3>单击 href=#登科居 登科居 单击<a 登科居>登科居 单击 登科居 登科居</a></h3><p> <h3>单击 href=#五十言怀诗 五十言怀诗 单击<a 五十言怀诗>五十言怀诗 单击 五十言怀诗 五十言怀诗</a></h3><p> <a name=春宫怨 春宫怨><h2>春宫怨 春宫怨</h2></a> 春宫怨 春宫怨 昨夜风开露井桃， 昨夜风开露井桃，<p> 未央前殿月轮高。 未央前殿月轮高。<p> 平阳歌舞新承宠， 平阳歌舞新承宠，<p> 帘外春寒赐锦袍。 帘外春寒赐锦袍。<p> <br><br><br>
创建超链接实验报告
一、实验目的1. 理解超链接的概念和作用。
2. 掌握在网页中创建超链接的方法。
3. 学会使用不同类型的超链接，如文本超链接、图像超链接等。
4. 熟悉超链接属性设置，提高网页设计水平。
二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 网页制作软件：Dreamweaver CC三、实验内容1. 超链接的基本概念超链接（Hyperlink）是网页中的一种重要元素，用于连接不同的网页或页面元素。
通过超链接，用户可以轻松地在不同的页面之间进行跳转，提高浏览体验。
2. 创建文本超链接（1）打开Dreamweaver CC，创建一个新的HTML文档。
（2）在“设计”视图中，选中要设置为超链接的文本。
（3）在“属性”面板中，找到“链接”属性，输入目标网页的URL。
（4）点击“保存”按钮，保存网页。
3. 创建图像超链接（1）打开Dreamweaver CC，创建一个新的HTML文档。
（2）在“设计”视图中，选中要设置为超链接的图像。
（3）在“属性”面板中，找到“链接”属性，输入目标网页的URL。
（4）点击“保存”按钮，保存网页。
4. 创建锚点超链接（1）打开Dreamweaver CC，创建一个新的HTML文档。
（2）在需要创建锚点的位置，插入一个锚点标记（在“插入”面板中找到“常用”类别，选择“锚点”）。
（3）在“属性”面板中，为锚点设置一个ID，例如“top”。
（4）在目标位置，创建一个文本超链接，在“链接”属性中输入锚点的ID，如“#top”。
5. 设置超链接属性（1）在“属性”面板中，可以设置超链接的以下属性：- 链接目标：选择在新窗口中打开链接，或在当前窗口中打开链接。
- 图像映射：为图像创建热点区域，实现多个链接。
- 替换文本：为超链接设置鼠标悬停时的提示文本。
- 转换效果：设置超链接的显示效果，如边框、颜色等。
（2）根据实际需求，设置超链接属性，提高网页美观度。
四、实验结果与分析通过本次实验，我们掌握了以下内容：1. 超链接的基本概念和作用。
在网页中建立各种超级链接
在网页中建立各种超级链接实训目标1．掌握内部、外部超级链接的创建方法；2．掌握E-mail链接的创建方法；3．掌握锚点链接的制作方法；4．掌握链接颜色的设置方法；5．了解图像映射的制作方法；6．了解跳转菜单、翻转图像实例、导航栏的制作方法。
实训内容准备工作本实训所需的网页及图象文件均在实训二课件的“实训\materials”文件夹下。
1、解压文件解压文件“实训二在网页中建立各种超级链接.rar”，请将“课堂实训”文件夹中的“materials”文件夹复制到D盘根目录下，并将其重命名为“future”。
2．新建站点新建网站“畅想未来”，将站点和个人文件夹future建立一一对应的关系。
任务一、在网页中建立各种超级链接设计目标在实训一完成的index.htm页面中，制作一个具有超级链接的网页。
其浏览效果见“实训\result”文件夹中的index4.html文件所示。
当鼠标移到栏目标题文本上时就会变成手形，同时在浏览器下方的状态栏中显示链接地路径，单击时便会跳转到相应的链接内容。
2、页面分析该页面包含了内部超级链接、外部超级链接、空链接和脚本链接、Email超级链接等。
页面效果请参见实训二课件中“实训\result”文件夹下的index4.html文件。
3．制作步骤说明：请在完成下面操作前，先将所有的素材文件放置在对应的文件夹下；在Dreamweaver 中本地站点future 中打开index.html 页面，依次按照下述内容在页面中创建各种超级链接。
（1）创建内部超级链接内部超级链接：就是在同一个站点内的不同页面之间建立超级链接关系； ☞ 为“未来都市”文本创建超级链接在网页中选定文本“未来都市”，在“属性“面板中单击“浏览文件”，在打开的“选择文件”对话框中选择需要的网页文件（ex4_city.html ）；☞在“目标”选择框中选择“_blank ”，以确保在新的浏览窗口中打开连接文件；☞使用相同的方法分别为“未来旅游”和“科幻小说”创建超级链接；对应的网页文件分别为ex4_travel.html、ex4_novel.html；（2）创建外部超级链接外部超级链接：链接目标在网站之外，即与网站之外的文件链接；如果按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail 链接、锚点链接、多媒体文件链接、空链接等 （3）创建空链接和脚本链接空链接是一个未指定目标的链接，在属性面板中的“链接”栏中输入一个数值符“#”即可。
谈谈超级链接的种类及建立方法
谈谈超级链接的种类及建立方法超链接是中一个页面到另一个页面的链接关系。
链接的目标通常是另一个网页，但也可以是图片、电子邮件地址、多媒体文件，甚至是一个程序。
超链接能使任何页面与其他页面之间相互链接，而不用知道这些页面的具体存放位置。
超大型链接给出了页面之间相互联系的情况，而且它能使页面保持动态、有生命力的特性。
中链接的这些特性是它得以广泛应用的主要原因。
这里的“超链接”指的是一种对象，它“隐藏”在页面文字或图形之中。
如果将鼠标指向或点击它，就相当于指示浏览器跳转到一个新的地方。
单击超级链接以后，浏览器才能接收到一个名为“统一资源定位”()的地址，随后，浏览器就会打开位于那个地址的网页。
这个网页可以是当前的站点的一部分，也可以是同一台服务器内的另一个站点的一部分，还可以是中的任何位置、任何站点内的任何一部分。
当这些超链接所指向的内容在同一站点内时用相对地址，当这些链接所指向的内容在站点之外时用绝对地址。
从本质上讲，超级链接属于页面的一部分，它是一种允许我们与其他网页相互链接的元素，各个网页链接到一起以后，才能真正构成一个站点。
超级链接为站点提供了第一级、也是最重要的一级交互措施。
用户在浏览器中所看到的超级链接，通常采用与普通文本不同的形式表现显示。
如通过特殊的高亮文本(而且加上了下划线)、一幅图画、一个微标或者一张相片来显示，当鼠标移到一个超链接上面时，便会变成一个手掌形状。
同时，与该超链接对应的将会在窗口底部的状态栏中显示出来。
访问以后的超级链接颜色会变化。
但是在超链接的幕后却是代码。
超链接为浏览器提供了一个，作为的目标地址。
当访问者单击超链接时，浏览器就会跳转到这个目标地址的页面。
下面从超级链接的内容和外部表现形式来说说超链接的种类。
从超链接的内容在网站之外和网站之内来看可分为内部超链接、外部超链接和书签链接三种：内部超链接是指在同一个站点内的不同页面之间相互联系的超链接；外部链接是指把站点中的一个页面与另一个站点外的其他页面联系的超链接。
网页制作ppt课件第4章超链接
超链接的重要性
总结词
超链接在网页制作中起着至关重要的作用，它能够提高用户体验、增强网站导航、增加网站流量和提升搜索引擎 排名。
详细描述
超链接是网页中不可或缺的一部分，它能够提高用户体验，使用户能够方便地浏览和获取信息。通过设置合理的 超链接，可以增强网站的导航结构，使用户更容易找到所需内容。同时，超链接还可以增加网站的外部链接数量， 提高网站的权重和流量，从而提升搜索引擎排名。
问。
图片链接
总结词
图片链接是指将一张图片设置为超链接 ，当用户点击这张图片时，会跳转到指 定的片链接，首先需要插入一 张图片，然后选中这张图片，选择“插入 ”菜单中的“超链接”选项。在弹出的对 话框中，输入要链接到的网址或文件路径 ，并设置好显示的文字和颜色等属性。点 击确定后，选中的图片就会变成超链接， 用户可以直接点击访问。
确保超链接指向的内容合法、合规， 不涉及任何违法、侵权或不良信息。
避免在超链接中传递任何误导、虚假 或欺诈信息，以免引起法律纠纷和不 良后果。
在使用外部链接时，尊重原网站的版 权和隐私政策，避免侵犯他人的权益。
06
案例分析
优秀超链接案例一
01
案例名称
旅游网站导航栏
02 03
描述
该网站通过超链接将各个旅游景点的页面相互连接，使用户可以轻松跳 转到感兴趣的景点页面，同时每个景点页面都提供了返回主页的超链接， 方便用户浏览。
使用链接管理工具或插件来检 测和清除死链，提高网站的用 户体验和搜索引擎优化效果。
优化用户体验
确保超链接的文本清晰、简洁， 易于理解，避免使用过于复杂或
难以理解的链接描述。
合理规划超链接的位置和布局， 使其符合用户的浏览习惯和阅读
小学信息技术网页超链接的制作教案
小学信息技术《网页超链接的制作》教案教学目标:知识与技术了解超级链接的含义及链接源和链接目标的含义,把握同一站点内和不同站点间网页超级链接的创建方式。
把握网页内书签的作用及创建书签链接方式,把握交互式按钮、框架网页内超级链接的设置方式。
明白得热区链接的含义及创建方式。
2进程与方式通过创建网页超级链接的操作,使学生了解网页中创建超级链接的大体方式,破除对网页链接的神秘感。
通过对不同对象设置超级链接的操作,使学生总结出操作的规律,培育学生自主学习与操作的能力。
通过网页不同的超级链接方式,拓展学生思维,创建多种形式的网页链接。
3情感态度与价值观通过链接我国要紧自然爱惜区网页,激发学生酷爱祖国、酷爱自然、酷爱生命的激情。
完成超级链接,使学生感受成功的喜悦和欢乐。
教学重、难点:教学重点:超级链接的含义及链接源和链接目标的含义。
超链接的制作方式--给文字、图片制作超链接,制作书签链接,给交互式按钮制作超链接,框架页面内的超链接,图片区域制作超链接等。
2教学难点书签链接中名称及对应链接位置的设定。
在框架页面中制作超链接时,目标对象所选择的显示窗口形式。
教学方式与教学手腕:任务驱动法、讨论探讨法、讲解与演示法、类比知识迁移法。
教学预备:"动物--人类的朋友"站点,包括未链接的网页,如欢迎页、表格页、框架页,表单页等。
教学进程:引入展现两个主页,一个已经创建了链接,一个没有创建链接,让学生进行比较并找出区别,引出此题--超级链接。
提出:咱们在先前的学习中,哪个软中的相关操作与它类似?什么是超级链接?找一个例子,分析链接源和链接目标别离是什么?学生展开交流,通过对照找出不同点,并踊跃试探,回答教师的问题。
设计用意:通过对照操作、交流,再辅以知识迁移,明确本节教学内容。
2新授站内超级链接引导学生回忆PerPint中超链接的制作方式,辅以教材中的内容,让学生自行探讨并完成以下操作:任务1同一站点内不同页面之间的链接○1制作首页到表格页的超链接。
设置超链接的操作方法
设置超链接的操作方法
超链接是网页制作中常用的功能，它可以让用户点击某个文本或图片后跳转到另外一个网页或文件。
以下是设置超链接的操作方法： 1. 打开网页编辑软件，在需要添加超链接的文本或图片上点击右键，选择“超链接”或“链接属性”。
2. 在弹出的超链接设置窗口中，输入目标网页或文件的URL地址或选择本地文件。
3. 选择链接类型，包括普通链接、打开新窗口链接、邮件链接等。
4. 可以设置链接的标题、颜色、字号、下划线等样式，使其更加突出。
5. 点击“确定”或“应用”按钮，保存修改后即可完成超链接的添加。
需要注意的是，超链接的URL地址应该是可用的，否则用户点击后会出现404错误页面。
同时，为了让用户更加方便地使用超链接，应该设置好链接的文字描述，以便用户清楚地知道点击后将跳转到哪个页面。
- 1 -。
第6章 网页中的超级链接
第6章网页中的超级链接6.1任务题目灵活运用链接知识建立各种超级链接6.2 任务导入如何使一个个独立的网页彼此联系起来，又如何使这些独立的网页和其他网站联系起来呢？这就需要使用超链接。
通过超链接，把Internet上的众多的网站和网页联系起来，构成一个有机整体。
在Internet上浏览，实际上就是通过在页面上单击链接，从当前页面跳转到另一个页面。
本章主要介绍各种超链接工具的使用，在建立和设置超链接属性的同时，运用超链接知识制作出灵活跳转的各个链接页面。
6.3 任务分析1．目的（1）掌握简单超链接的设计能力。
（2）掌握各种链接的创建及属性设置。
2．重点（1）掌握超链接的概念。
（2）掌握内部超链接、外部超链接创建方法及设置。
（3）掌握E-mail链接创建方法及设置。
（4）掌握锚点链接创建方法及设置。
（5）掌握图像映射链接的创建及设置。
3．难点（1）掌握如何设置链接目标。
（2）掌握锚点链接的创建及设置。
（3）掌握图像映射链接的创建及设置。
6.4 技能目标1．根据任务要求，能设计网页的简单超链接。
2．根据网页效果需要，能合理运用超链接属性进行参数设置。
6.5 任务讲析6.5.1实例演练——奥运网页超级链接的制作【任务一】设计思路◆打开网页1．在D盘创建新文件夹名为“任务6-1”，作为站点文件夹用于存放站内的文档。
2．启动Dreamweaver CS4软件，进入Dreamweaver CS4主窗口中，单击菜单【文件】>【打开】，弹出【查找文件】对话框，打开“光盘/素材/第6章/任务1/ind ex.html”。
◆设置内部超级链接[1]1．选中页面里的文字“奥运动态”，然后执行【插入】>【超级链接】命令，如图6-1所示，弹出【超级链接】对话框，如图6-2所示。
图6-1应用菜单命令插入超级链接图6-2“超级链接”对话框2．单击图6-2面板上【链接】项右边的文件夹图标，打开【选择文件】对话框，在该对话框中选择“光盘/素材/第6章/任务1/ ch6-11.html”。
超链接的制作
超链接的制作用文本和图形建立链接怎样才能将自己做的网页相互联系起来呢?也就是说让别人点页面上的图形或文本就跳转到其他页面呢？在网页里，我们把这种点击后会进行页面切换的网页界面元素叫超链接。
一、用文字来建立链接。
1、创建一个指向站点内其他网页（以连接到“页面1“为例）的超链接。
前提：站点内已经有几个网页。
具体步骤：在网页“普通”状态下，选中要进行超链接设置的文字，选择“插入”菜单的“超链接”命令，在文件列表框内选择“页面1.htm”文件，注意，选中后在URL文本框中显示了该文件的地址。
单击“确定”按钮.超链接就制作成功了。
我们切换到预览模式可以查看效果。
（单击预览按钮，）当我们把鼠标指向“主页”两字时鼠标变成手形，单击它，我们就切换到主页了。
注意：为什么不在普通模式下试呢？：因为普通模式主要是用来编辑网页的，当我们在普通模式把鼠标指向“主页”两字时鼠标没有变成小手状，因此不能进行页面切换。
不过如果按住CTRL键，鼠标就变成了小手状。
这时单击就可以进行切换了。
也就是说在普通模式中按住CTRL键才能激活超链接。
2、创建指向其他站点的网页的超链接。
具体步骤：选中作为超链接的文本，单击“常用”工具栏的“超链接”按钮，这和选择插入菜单的超链接命令的结果是一样的，只是方法不同而已。
在“创建超链接”对话框里，在URL地址栏直接输入要连接的网页或网站的地址。
如果不清楚要作超链接的地址，只要单击URL地址框后面的放大镜就可以用浏览器在INTERNET上查找要链接的网页，FRONTPAGE会自动记录你找到的地址。
单击“确定”按钮就可以了。
3、改变已经设置好的超链接。
首先确认是普通模式，在要改变的超链接文本下单击鼠标右键，选择“超链接属性”命令，输入新的URL地址就可以了。
4、取消超链接，删除所有URL地址框里的内容就可以了。
5、一种可以链接电子邮件的超链接这样可以使你的网上朋友通过Email及时与你联系，这是一个网站站长和网友交流的重要手段。
网页设计实用教程 第4章 超链接.
(6) 一个图像热区链接创建完成，单击【保存】按钮，按 F12按钮预览网页。
4.2.5
创建锚链接
超链接除了可以链接到文件外，还可以链接到本页中的 任意位置，这种链接方式称为“锚链接”。当一个网页的主 题或文字较多时，为了方便用户浏览，可以在网页内的某些 分项内容上建立多个标记点，将超链接指定到这些标记点上， 使用户能快速找到要阅读的内容。我们将这些标记点称为锚 点（Anchor）
图4-3 电子邮件链接对话框
4.2.3
创建E-mail链接
(3) 对话框中“文本”指在网页上显示的文本， “ E-mail”指需要链接到的邮箱地址，这里输入 “wysj@” ，单击【确定】按钮完成Email链接的设置。 也可以在属性面板的“链接”文本框中输入 “mailto:”和邮箱地址，这里是“mailto: wysj@”。 (4) 一个E-mail链接创建完成，单击【保存】按钮， 按 F12按钮预览网页。
4.2典例剖析—信息导航列表
本节将通过建立一个信息导航网页的实例来讲解超链接的使 用。本节操作任务： （1）在“Mystuhome”下建立文件夹“超链接”，在 “超链 接”文件夹下建立网页“index.html”和文件夹“image” （2）在网页中创建链接。 （3）在网页中创建E-mail链接。 （4）在网页中制作图像映射，设置图像热点的超链接。
4.4
习 题
三、上机实践 1. 在超链接文件夹下创建“名站收藏..html”网页文档，在网页 中列举自己经常访问的网站名称，为他们建立到网站网址的 超链接。 2. 在超链接文件夹下创建“相册..html”网页文档，在网页中插 入图片，在图片上建立热区图像链接。 3. 为网页“相册.html”建立到底端和到顶端的锚链接。
如何制作超链接
9
二、链接路径
因此，链接可以分以下三种：
12
2、相对路径
– 如果链接到同一目录下，则只需输入要链接文件的 名称。
– 要链接到下级目录中的文件。只需先输入目录名， 然后加"/"，再输入文件名。
– 要链接到上一级目录中文件，则先输入"../"，再输 入文件名。
13
2、相对路径
14
例2：
如果文档“page1.html”存放在目录 d:/lianjie/example/page下， • 使用相对路径时可写成： <A href=" page/page1.html">第一部分</A>
2
一、概述
• 建立超链接的标签为<A>和</A>
• 格式为：<A HREF="资源地址" TARGET="窗口名 称" TITLE="指向连接显示的文字">超链接名称</A>
• 说明：标签<A>表示一个链接的开始，</A>表示链接 的结束；
• 属性“HREF”定义了这个链接所指的目标地址；目标 地址是最重要的，一旦路径上出现差错，该资源就无 法访问
• TARGET:该属性用于指定打开链接的目标窗口，其默
认方式是原窗口。
3
一、概述
• TITLE：该属性用于指定指向链接时所显示的标题文字。 • “超链接名称”是要单击到链接的元素，元素可以包含文
第4章 在网页中建立各种超级链接
网页设计与制作
许多网站提供了文件下载的功能，实现文件 下载的功能很简单，就是建立一个到文件的超级 链接！（下载的文件和其它网页文件都放在本地 站点中。）
网页设计与制作
二、创建外部超级链接
所谓外部超级链接：即链接了本地站点以外 的网页文件。我们平时常见的“友情链接”就是 外部超级链接，当单击“友情链接”中的某个链 接时，浏览器将打开相应网站。
例如， 设计目标：在网页中为“与我联系”文本创建 E-mail链接，其E-mail地址为yiiz@
网页设计与制作
实现步骤：
（1）添加“与我联系”文本。 （2）选中文本 （3）添加链接的方法 A、插入浮动面板常用电子邮件链接图标 B、菜单栏插入（insert）Email link打开 “insert Email link(插入E-mail链接)”对 话 框进行设置 C、在文本属性面板上link文本框中直接输入： “mailto:yiiz@” 网页设计与制作
网页设计与制作
创建空链接的步骤如下：
（1）选择需要创建链接的文本或图像 （2）在属性面板中的“Link”文本框中输入空链接符号 “#”， 即创建了一个空链接
创建空链接
网页设计与制作
四、创建脚本链接
利用脚本链接可以执行JavaScript代码或者 调用JavaScript函数。当来访者单击了某个指定 项目时，脚本链接也可以用于执行计算、表单确 认和其它任务。
设置链接目标
网页设计与制作
说明： 在“Target（目标）”文本框的下拉列表中 “_blank”表示在新的未命名的浏览器窗口中打 开链接文档。 “_parent”、 “_self”、 “_top”选项的含义与 框架有关。
网页设计与制作
网页设计与制作项目7超链接
鼠标指向导航图像
7.2 网页制作
步骤 10 重复同样的操作，插入鼠标经过图像，在 图像名称的文本输入框中输入“酒店机票”，用与设置 “首页”相同的方法选择所需要的图像，【插入鼠标经过 图像】对话框中的参数设置如图所示。
【插入鼠标经过图像】对话框参数设置
7.2 网页制作
7.2.2 创建文本与图片超链接 步骤1 创建文本超级链接。在【属性】面板上单击 “页面属性”按钮 ，设置文本链接的属性，参数设置如 图所示。 步骤2 在“目的地”页面中选择文本“预订酒店”， 如图所示；在【属性】面板上单击“链接（L）”右侧的 “浏览文件”按钮 。
步骤7 单击“预览”按钮 ，当鼠标指向 文本“黄山”图片时，单击即可跳转到“黄山” 页面上。 步骤8 按照相同的操作，可以完成图片 “苏州园林”、“桂林”的超级链接。
7.2 网页制作
7.2.3 创建图像映像超链接 步骤1 在“目的地”页面上单击“地图”图片，在 【属性】面板单击“矩形热点工具”按钮 ，在地图上的 “北京”处绘制“矩形”，如图所示。 步骤2 在【属性】面板上单击“链接（L）”右侧的 “浏览文件”按钮 ，或直接输入超级链接的目标文件名， 如图所示。
“目的地”页面效果
7.2 网页制作
7.2.1 设置导航条超链接 步骤1 启动Dreamweaver CS6后，在letuweb 站点中创建新文档，命名为“destination.html”。 步骤2 在destination文档中绘制表格布局页面，输 入相应的文字、选择图像等素材，插入页面顶部LOGO及其 他元素，如图所示。
7.2 网页制作
步骤3 在表格的第3行定位光标，执行【插入】| 【图像对象】|【鼠标经过图像】菜单命令，弹出【插 入鼠标经过图像】对话框，如图所示。
网页设计与制作 项目 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代码 或函数调用即可
第4章_用HTML建立超链接
语法: 说明:
框架之间的链接 -- p59
1建立框架与框架集 2用COLS属性将窗口分为左右两部分 3用ROWS属性将窗口分为上中下三部分 4框架的嵌套 5用SRC属性在框架中插入网页 6用SRC属性在框架之间链接 7创建嵌入式框架
框架 框架集页面 (FrameSet.htm)
客户端图像地图：该地图将直接被浏览器处理 服务器端图像地图：该地图将被Web服务器上的一段程序负责解 析处理
影像地图标记<map> </map>
标记形式
<img src=" " usemap="#mapname" ismap width="" height=""> <map name="mapname"> <area href="1.htm" shape="circle" coords="379, 1212, 79" target="_blank" title=" "> <area href="2.htm" shape="rect" coords="224,159,274,180" target="_blank" title="" > … </map>
超级链接的制作(2)
通过问题的重新架设，让学生加深对本节知识要点的回顾及梳理，掌握本节的重难点。
作业布置
加强训练
（2分钟）
把课后作业（素材2）整个放入店铺首页，并完成店铺首页的超级链接的制作。
学习评价
与考核
姓名：
组号：
评价内容
分值
自评
组内互评
1、在小组中的完成程度
通过微课的方式，让学生自我探究，结合学生已有的DREAMWEAVER基础，完成相应的任务，遇到问题组内进行互助，之后再组内进行互助，之后再组间进行疑难解答，而教师以探究者的身份与学生一同讨论学习。
知识提炼
理论总结
（15分钟）
根据使用对象不同分为：文本链接、图像链接、E-mail链接、锚记链接、热点链接、脚本链接等。
邀请一位快速完成的同学，在教师机端进行演示，同时讲解每个步骤的作用。
根据完成程度进行点评、补充
根据每组的回答情况，对每个小组进行评分
小组讨论，以小组为单位进行制作。
报名参加教师机端的演示
每组完成各自的店铺链接，学生模拟顾客角度来测试超级链接的准确性，及以顾客为中心的体验性。
将学到的知识与本专业的实际运用相结合，进行知识的拓展与应用。
微课
自主学习
组内探究
（25分钟）
超级链接的几种类型，以及制作步骤
布置任务，说明任务要求。
巡视走动，记录存在的问题。
汇总小组学习情况。
邀请1位操作快的学生演示，同时讲解操作步骤。
邀请1位操作有不足的学生演示，提醒其他学生注意观察错误之处。
分析错误之处，解决学生中存在的普遍问题
小结点评，布置分层任务：尚未完成任务的同学继续完成超级链接的制作，已经完成的同学探究超级链接文本样式属性与链接参数
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页超链接的制作
教学目标：
1．知识与技能
（1）了解超级链接的含义及链接源和链接目标的含义，掌握同一站点内以及不同站点间网页超级链接的创建方法。
（2）掌握网页内书签的作用及创建书签链接方法，掌握交互式按钮、框架网页内超级链接的设置方法。
（3）理解热区链接的含义及创建方法。
2．过程与方法
（1）通过创建网页超级链接的操作，使学生了解网页中创建超级链接的基本方法，破除对网页链接的神秘感。
（2）通过对不同对象设置超级链接的操作，使学生总结出操作的规律，培养学生自主学习与操作的能力。
（3）通过网页不同的超级链接方法，拓展学生思维，创建多种形式的网页链接。
3．情感态度与价值观
（1）通过链接我国主要自然保护区网页，激发学生热爱祖国、热爱自然、热爱生命的激情。
（2）完成超级链接，使学生感受成功的喜悦和快乐。
教学重、难点：
1．教学重点：
（1）超级链接的含义及链接源和链接目标的含义。
（2）超链接的制作方法——给文字、图片制作超链接，制作书签链接，给交互式按钮
制作超链接，框架页面内的超链接，图片区域制作超链接等。
2．教学难点
（1）书签链接中名称及对应链接位置的设定。
（2）在框架页面中制作超链接时，目标对象所选择的显示窗口形式。
教学方法与教学手段：
任务驱动法、讨论探究法、讲解与演示法、类比知识迁移法。
教学准备：
“动物——人类的朋友”站点，包括未链接的网页，如欢迎页、表格页、框架页，表单页等。
教学过程：
１．引入
展示两个主页，一个已经创建了链接，一个没有创建链接，让学生进行比较并找出区别，引出本课课题——超级链接。
提出：我们在先前的学习中，哪个软件中的相关操作与它类似？什么是超级链接？找一个例子，分析链接源和链接目标分别是什么？
学生展开交流，通过对比找出不同点，并积极思考，回答老师的问题。
设计意图：通过对比操作、交流，再辅以知识迁移，明确本节课教学内容。
2．新授
（1）站内超级链接
引导学生回顾PowerPoint中超链接的制作方法（教师提示：右击链接源，利用快捷菜单制作超链接），辅以教材中的内容，让学生自行探究并完成以下操作：
任务1 同一站点内不同页面之间的链接
○1制作首页（欢迎页）到表格页的超链接。
○2给表格页内交互式按钮设置超级链接，链接到相关页面。
○3给框架页内交互式按钮设置超级链接，链接到相关页面。
教师巡视，及时指导，安排学生示范操作并讲解如何制作超链接。
交互式按钮的超链接制作要求在框架网页中演示操作。
老师可以提问学生：演示者操作的对吗？有没有问题？
引导学生发现问题：超链接制作完成后需要检验（保存后预览）。
教师讲解，突破难点，再交由学生操作。
以上是同一站点内不同网页之间的链接，有时一个页面中内容过多，需要不断拖动滚动条实现阅读，能否实现快速跳转呢？
任务2 同一站点内同一页面内的跳转（链接）：在“动物趣闻”页面内制作书签链接。
教师讲解：由生活中的书签引入，介绍“书签链接”的概念，然后再演示如何操作。
提示：书签链接的双向性问题（返回）。
学生认真听讲后模仿制作，教师巡视进行指导并反馈学生的完成情况。
（2）站间超级链接
仅凭我们课堂上制作的这些页面还不足以详细介绍我们的主题，此时我们还可以借助超链接，链接到因特网上的其他网站，以丰富我们的内容。
任务3 借助热区链接，为“友情链接”页面制作超链接，链接我国一些自然保护区网站。
有了以上基础，可安排学生自学教材中有关热区链接的相关内容，学生探究操作后
教师再安排学生进行演示，辅助以提问的形式检验学生的自学情况。
3．总结与评价
开展同学间的互助，检验其链接完成情况，推荐优秀同学做展示。
引导学生分类总结本节课的知识点。