第6章 网页中超级链接的应用
超级链接标签的基本格式
超级链接标签的基本格式超级链接标签是一种HTML标签，用于在网页中创建可点击的链接。
它可以将用户引导到其他页面、文档或资源，为用户提供更丰富的浏览体验。
超级链接标签的基本格式如下：<a href="链接地址">链接文本</a>其中，href属性用于指定链接的目标地址，链接文本则是用户在页面上看到的可点击文本。
超级链接标签的基本格式是非常简单的，但是它却在网页设计中扮演着非常重要的角色。
它能够链接相关的信息，丰富页面内容，提供更广阔的信息访问范围。
通过超级链接标签，我们可以实现以下几个方面的功能：1.跳转到其他页面：超级链接最基本的功能就是将用户引导到其他页面。
无论是跳转到新闻页面、商品详情页还是其他相关内容，超级链接都能够实现一键跳转，方便用户快速访问所需页面。
2.下载文件：除了跳转到页面，超级链接还可以用于下载文件。
通过设置链接的目标地址为文件的URL，用户可以轻松地下载各种格式的文件，如PDF文档、音频文件、图片等。
3.邮件发送：除了跳转到页面和下载文件，超级链接还可以用于发送邮件。
可以通过设置链接的目标地址为"mailto:邮箱地址"的格式，用户点击链接后系统会自动打开默认邮件客户端，并自动填写收件人地址，方便用户快速发送邮件。
4.锚点定位：超级链接还可以用于页面内的锚点定位。
通过设置链接的目标地址为带有锚点标识的部分，用户点击链接后会直接跳转到页面指定位置，方便用户快速定位到所需内容。
5.弹出新窗口：超级链接还可以设置在新窗口中打开链接。
通过添加target="_blank"属性，用户点击链接后会在新的浏览器窗口中打开链接页面，不会影响当前页面的浏览。
超级链接标签的基本格式简单灵活，它为网页设计师提供了更多的可能性和创造力。
通过灵活运用超级链接标签，我们可以打造出生动有趣、功能丰富的网页，为用户提供更好的浏览体验。
ch06-网页中超级链接的应用
6.4.1 创建文本超链接
• 启动Dreamweaver CS5,在菜单栏中,选择[文 件]→[打开]菜单项,打开素材文件.
• 展开[属性]面板,在面板中,选择[链接]文本框右侧 的[浏览文件]按钮.
• 弹出[选择文件]对话框,选择准备插入的文件,单击 [确定]按钮.
• 保存文档,按下键盘上的[F12]键,即可在浏览器中 预览到网页的效果.
6.2.3 根路径
• 站点根目录相对路径提供从站点的根文件夹到 文档的路径,如果在处理使用多个服务器的大 型Web站点,或者在使用承载有多个不同站点 的服务器,则可能需要使用这些类型的路径,如 果不熟悉此类型的路径,最好坚持使用文档相 对路径.
6.3 创建超级链接的方法
• 使用[属性]面板创建链接 • 使用指向文件图标创建链接 • 使用菜单创建链接
• 首先需要将鼠标光标定位于准备要插入锚记的 位置,在菜单栏中,选择[插入]→[命名锚记]菜单 项,弹出[命名锚记]对话框,在[锚记名称]文本框 中输入锚记的名称,单击[确定]按钮,即可完成 创建锚记的操作.
6.4.5 创建空链接
• 启动Dreamweaver CS5,在菜单栏中,选择[文 件]→[打开]菜单项,打开素材文件.
在站点范围内更改链接
• 启动Dreamweaver CS5,在[文件]面板中,在[本地文件] 区域中选择一个文件.
• 在菜单栏中,选择[站点]→[改变站点范围的链接]菜单 项.
• 弹出[更改整个站点链接]对话框,在[变成新链接]文本 框中,输入准备准备链接的文件,单击[确定]按钮,即可 完成在站点范围内更改链接的操作.
Dreamweaver CS5网页设计与制 作基础教程
第6章 网页中超级链接的应用
制作网站链接
实训操作一
练习对网页中的元素设置外部链接 练习对网页中的元素设置内部链接 练习设置邮件链接 练习设置空链接 练习设置脚本链接
实训操作二
练习制作锚点链接 练习制作图像映射
练习思考
选择题： 制作外部链接，使用（A）； 制作内部链接，使用（B）。 A 绝对路径 B 相对路径
练习思考
要求：为某网页中的文字设置邮件链 接，并链接“bingbing@”。 操作： 选中文字； 在“属性”面板的“链接”文本框 中输入 “mailto:bingbing@”
制作邮件链接
mailto： 在“链接”文本框中输入 mailto:ddc@
制作邮件链接
加入邮件主题： 在“链接”文本框中输入 mailto:ddc@?subject =网站的意见和建议
制作邮件链接
抄送另一个邮箱： 在“链接”文本框中输入 mailto:ddc@?subject =网站的意见和建议 &cc=happyhelen@
练习思考
要求：为某网页中的文字设置邮件链接， 并链接bingbing@，同时自动 填写主题“咨询问题”。
操作： 选中文字； 在“属性”面板的“链接”文本框中输 入 “mailto:bingbing@?subjec t=咨询问题”
练习思考
问：创建不同锚点链接的步骤是什么： 答： 在原始页面创建命名锚点 进入目标页面 创建到命名锚点的链接
制作空链接
空链接用来激活页面中的对象或文本。 在“链接”文本框中输入#
制作脚本链接
脚本链接可给浏览者提供某个方面的 额外信息。 在“链接”文本框中输入 “javascript:window.close()”
制作锚点链接
网页设计与制作第6章 表单的使用
❖ 一个跳转按钮。
6.3.7 跳转菜单
❖ 1．添加一个跳转菜单 ❖ 2．修改跳转菜单
第6章 表单的使用
操作题: 新建一个文档，在该文档中建立一个个人资料
的表单。该表单如下图所示。
POST请求。 ❖ 【目标】：指定打开链接文件的框架或窗口。 ❖ 【MIME类型】：指定提交服务器处理的数据的MIME编码方式，与 ❖ POST方法连用的一般是application/x-www-form-urlencode。如果创建 ❖ 的是文件上载区域，则指定multipart/form-data MIME格式。
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
❖ 【按钮名称】：设置按钮的名字。按钮名有提交和重置两个 保留名。提交用于将表单信息提交至处理信息的应用或脚本； 重置用于以原始值重新设置所有的表单区。
❖ 【标签】：设置在按钮上显示的文本。
❖ 【动作】：指定在单击这个按钮时发生的事件。选择【提交 表单】单选按钮，将会自动将按钮标签设置为【提交】；选 择【重设表单】阅览单选按钮，将会自动将按钮标签设置为 【重置】；选择【无】单选按钮，则表示在按钮被单击后， 既不提交表单也不重置表单。
6.2 表单的创建
❖ 默认，使用浏览器默认的方法（一般为GET）。 ❖ 选择GET，追加表单值到URL，并发送服务器GET请求， ❖ URL限制长度为819个字符，超出长度的部分会被去掉，所以不要对长 ❖ 表单使用GET方法，也不要用GET方法传送用户名、密码、信用卡账号 ❖ 或其他机密信息，因为GET方法不是传送信息的安全方式。 ❖ 选择POST，在HTTP request的消息正文中发送表单的值，并发送服务器
高中信息技术 第六章 信息集成与信息交流
高中信息技术第六章信息集成与信息交流高中信息技术第六章信息集成与信息交流高中信息技术第六章信息集成与信息交换教学设计6.1信息集成一、教科书分析教学内容是设计制作用于展示学生学习和研究成果的网站，学习任务有网站的规划、网页内容的设计、设计网页等。
通过网站的设计与制作，不仅让学生加深理解和掌握前面所学网页制作知识，也提高了学生的网站设计能力和动手实践能力。
二、学生分析在之前的研究中，学生已经学习了网页制作的基本知识，他们设计和制作网页来介绍自己。
经过前期研究，学生对网站的设计有一定的基础，对网站的建设有浓厚的兴趣。
3、教学目标：知识和技能：1、了解信息集成的一般过程2、理解信息集成的含义3.了解各种信息交流，了解信息交流是人们学习、生活和工作中不可或缺的重要活动。
4、选择适当的信息工具与他人交流信息，注意保护好个人隐私过程与方法：通过教师的讲述和演示，让学生了解信息整合的一般过程，有效利用网络进行信息交流。
情感与态度：培养学生的整体观，培养学生成为具有自我保护意识的文明网民。
4、教学重点和难点：1。
信息集成方法2、素材的选择五、课时安排2课时六、教学方法：讲授法，演示法，实践法教学过程一、导入新课通过之前的研究，我们知道课件演示的文本、表格和PPT都相对简单。
本章学习的是有效整合处理后的信息，整合的形式是制作一个网页。
2、新的第1课。
信息集成概念：信息集成的过程主要指将文本、图象、声音、动画、视频等媒体素材，有计划有目的的组织在一起，为表达某一主题服务。
信息集成过程通常遵循以下四个阶段（每个阶段给出一个或两个分析示例）：① 主题选择和价格部分的目的这一阶段的中心任务是确定要表达的主题和设计的目标，并用一个贴切而有特色的名字来表达。
归纳主题:问题：你喜欢在互联网上浏览哪些网站？这一阶段的任务是根据第一阶段确定的主题设计作品的内容和结构，并收集、整理和选择作品中需要使用的素材。
1、设计作品的内容和结构总体设计从系统的角度，设计工作的总体框架，把握要表达的主要内容。
信息技术基础每章练习试题
第1章单元测试◆本测试共10小题，每题10分，共100分。
◆每小题给出的4个选项中，只有一个正确选项，选错或不答的均得0分。
◆做完后，选择“提交”，可以批分；选择“答案”，可以显示答案；需要重做，选择“重做”。
--------------------------------------------------------------------------------1．不属于信息的主要特征B 。
（A）普遍性（B）科学性（C）依附性（D）共享性2. 现代社会中，人们把 D 称为人类不可缺少的三类资源。
（A）物质、知识、信息（B）能量、知识、信息（C）物质、能量、知识（D）物质、能量、信息3．信息技术已经经历了D 次革命。
（A）2（B）3（C）4（D）54．信息是“事物运动的状态与方式”，这是 C 提出的。
（A）香农（B）维纳（C）钟义信（D）比尔·盖茨5．最近一次信息技术革命的一个重要标志是 A 的应用。
（A）计算机（B）电报（C）电视（D）电话6．中国古代四大发明中的造纸术和印刷术与第 C 次信息技术革命有密切联系。
（A）一（B）二（C）三（D）四7．以下对信息特征的描述， D 是不正确的。
（A）只要有物质存在，有事物运动，就会有他们的运动状态和方式，就会有信息存在（B）所有的信息都必须依附于某种载体，但是，载体本身并不是信息（C）同一信息能同时或异时、同地或异地被多个人所共享（D）信息不但能直接满足人们的物质需求，还能满足人们的精神需求8．信息技术的英文全称是A ，简称IT。
（A）Information Technology （B）Information Technique（C）Communication Transmit （D）Information Transmit9．现代信息技术是以 A 为基础，以为核心，以为支柱，以应用为目的的科学技术群。
（A）计算机技术微电子技术通信技术信息技术（B）通信技术微电子技术信息技术计算机技术（C）微电子技术计算机技术通信技术信息技术（D）信息技术微电子技术通信技术计算机技术10．当今的计算机能处理文字、声音、图像等信息，这要归功于信息的 B 。
网页基本设计题目及答案
第6章习题答案学号：姓名：一、单选题1.按下___B____快捷键，即可打开默认主浏览器，浏览网页。
A. F4B. F12C. Ctrl+VD. Alt+F122.以下____D____不属于本地Web网站的组成部分。
A. 本地文件夹B. 远程文件夹C. 动态文件夹D. 网站地图文件夹3.“项目列表”功能作用的对象是___B_____。
A. 单个文本B.段落C. 字符D. 图片4.鼠标经过图像包括以下___D_____对象。
A. 主图像和原始图像B. 主图像、次图像和原始图像C.次图像和鼠标经过图像D.主图像和次图像5.为网页插入以下____B____，可添加可控制的音乐播放器。
A.参数B.插件C.APPLETD.导航条6.Dreamweaver的常用面板中“图像”按钮，在____A____区域中。
A.插入面板B.“属性面板”C.面板组D.菜单栏7.一般网页中的基本元素是指____D____。
A.文本B.图像C.超级链接D.以上都是8.在表单中允许用户从一组选项中选择多个选项的表单对象是___C_____。
A.单选按钮B.列表/菜单C.复选框D.单选按钮组9.在Dreamweaver中，超级链接主要是指文本链接、图像链接和____A____。
A.锚链接B.点链接C.卯链接D.瑁链接10.在网页设计中CSS一般是指____C____。
A.层B.行为C.样式表D.时间线11.____C____HTML标记是用来标识一个HTML文件的。
A.<p></p>B.<body></body>C.<html></html>D.<table></table>12.在网页设计中，____C____的说法是错误的。
A.可以给文字定义超级链接B.可以给图像定义超级链接C.只能使用默认的超级链接颜色，不可更改D.链接、已访问过的链接、当前访问的链接可设为不同的颜色13.对“超级链接”错误的解释是___B____。
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等各种特效。
超级链接的使用
7.2 创建超级链接
7.2.1 实例：创建超级链接（文本和图片）
1、实例创意 下面以实例
制作一个简单 网页，实例中 只用到简单的 几个页面元素。 各个文件的文 件名及位置如 图如示。
方法一： 选择文字，然后单击属性面板上“链接”文本框右侧的文件夹
图标，弹出“选择文件”对话框，选择文件单击“确定”按钮关 闭对话框。 方法二：
直接输入：about.htm#aboutme
综合练习
一、选择题
1、以下哪个不是绝对路径？
A）ftp://
B）
C）/bobo/index.asp
D） ../index.asp
2、以下哪个不能创建超级链接？
① 链接目标与当前网页在 同一文件夹中时，只需提供 被链接网页的文件名即可。 如：“herf.html”
② 链接目标位于当前网页 所在文件夹的子文件夹中时 ，需要提供子文件夹名和文 件名，中间用正斜杠(/)分 隔。如： “file/herf2.html”。
③ 链接目标位于当前网页 所在文件夹的父文件夹中时 ，要在文件名前加上 “../”(“..”表示上级文件夹) 。如：“../index.html”
这段代码表示：当鼠标移动到“搜狐主页”上要显示 “”
当单击“搜狐主页”这几个文字时，将 网站主页。
中打开“ ”
“目标(R)”的各选项作用如下：
❖ _blank：将链接的文档在一个新的、未命名的浏览 器窗口中打开。
❖ _parent：将链接的文档在该链接所在框架的父框架 或父窗口中打开。如果包含链接的框架不是嵌套框架， 则所链接的文档在整个浏览器窗口中打开。
7.2.3 实例：创建锚点链接
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”。
网页制作案例教程第6章已完成
本章要点 • 掌握站点的创建和管理 • 掌握各种超级链接的创建 • 掌握电子邮件、无址和脚本链接 • 熟悉如何维护和修改站点 • 了解库和模板的应用 • 了解如何在Internet上发布站点
6.1 6.1.1
站点管理 新建站点
（ 1 ）单击【站点】/【管理站点】命令，调 出【管理站点】窗口，如图6-1所示。
（2）单击【属性】面板中的【链接】栏中的 文件夹按钮 ，调出【选择文件】对话 框，利用该对话框选择要链接的HTML文件 或图像文件（即目标文件）。也可以直接 在文本框内输入要链接的HTML文件或图像 文件的路径与文件名。
2.利用【属性】栏内的指向图标建立链接 利用【属性】栏内的指向图标建立链接的操 作如下。 （1）在网页编辑窗口内，同时打开要建立链 接的源文件和要链接的目标文件（HTML文 件），如图6-10所示。
（6）单击图6-2中的【高级设置】前面的黑 色三角，展开【高级设置】中的具体内容， 选择【本地信息】，将【默认图像文件夹】 设置为“D:\Web\IMG”。选中【启用缓存】 复选框后，可加速链接的更新速度。当硬 盘容量足够大时可选中它。
（7）单击‘确定’按钮，返回【管理站点】 对话框。在对话框的左边将列出刚创建的 站点名称（见图6-1）。单击‘完6-1 【管理站点】窗口
（2）单击【管理站点】对话框中的【新建】 按钮，弹出站点设置对话框，如图 6-2所示。
图6-2 站点定义为（高级）对话框
（3）在【站点名称】文本框内输入站点的名 称【我的站点】。在【本地根文件夹】文 本框内输入站点在本主机硬盘上的存储位 置，即路径和文件夹名称（“D:\web\”）。 （4）在图6-2左侧提供了进一步设置站点的 一些操作信息，利用鼠标单击可以对站点 其他信息进行设置，通常做以下设置。
超级链接
二、下载链接的创建
如何制作下载文件 要点：
被链接的文件后缀名必须是 ①.rar ②.exe③.mp3④.zip（压缩文件） ⑤.asp⑥.jsp⑦.php（动态脚本语言程序） 被链接的文件后缀名不能是 ①.doc②.xls③.htm ④.swf等
如何让网友下载Word 或Excel格式的文件？
建立超链接的标签为<A>和</A>
项目四
超级链接的应用
超链接允许我们从自己的页面出发直接 指向因特网上存在的任何一个页面，或 者说，在一台计算机上可以打开因特网 上成千上万的网页文件。
项目四
一、
超级链接的应用
绝对URL、相对URL及常见的超级链接类型
超级链接是网页中最重要、最根本的元素之一。它
五、热点链接的创建
多边形热点工具
椭圆热点工具 矩形热点工具 指针热点工具
六、命名锚记链接的创建
锚点常常被用来实现到特定的主题或 者文档顶部的跳转链接，使访问者能
够快速跳转到选定的位置，加快信息
检索的速度。
创建锚点链接
1.首先要设置一个锚点（即链接目标）
方法是将插入点放在需要创建锚点的地 方，单击“常用”------“命名锚记”，设 置“锚记名称”。
项目四
一、
超级链接的应用
绝对URL、相对URL及常见的超级链
接类型 二、各种超级链接的创建方法 三、实例
超级链接案例分析
超级链接案例分析引言：随着互联网的普及和发展，超级链接（Hyperlink）已经成为链接各种网络资源和信息的重要工具。
超级链接可以在网页中实现随意跳转至其他网页、文件和信息的功能。
本文将通过具体案例分析超级链接的应用和效果，包括超级链接的设计原则、实际应用中遇到的问题及解决方法。
案例一：新闻网站超级链接设计新闻网站上有一篇关于宇航员登陆火星的报道。
报道中提到了相关的研究成果和参与机构。
为了方便读者获取更多关于这些研究成果和机构的信息，超级链接被用来链接到相关的研究论文和参与机构的官方网站。
这样一来，读者可以通过点击超级链接，直接跳转到对应的网页，获取更多的相关信息。
超级链接设计原则：在新闻网站中使用超链接应该遵循以下原则：首先，链接应准确地指向相关信息，以提供更多的内容和背景信息。
其次，链接的显示文本应简洁明了，能反映链接内容的核心信息。
最后，超链接的颜色和样式应与页面中其他链接保持一致，以提高用户体验。
案例二：在线教育平台超级链接设计一家在线教育平台提供各种课程和学习资源，为了帮助学生更方便地找到合适的学习资源，超级链接被用来链接到相关的课程、教材和作业。
通过点击超链接，学生可以直接跳转到相应的位置，减少了查找和浏览时间，提高了学习效率。
超级链接设计原则：在在线教育平台中使用超链接应遵循以下原则：首先，链接应与学习内容紧密相关，提供更多的学习资料和参考资源。
其次，链接的显示文本应能够清晰地表达链接的内容，避免学生点击后产生困惑。
最后，超链接的布局和样式应与整个网站保持一致，以确保用户体验的统一案例三：企业官方网站超级链接设计一家企业的官方网站上提供了企业历史、产品介绍、新闻动态等信息。
为了帮助用户更好地了解企业的背景和产品，超级链接被用来链接到相关的企业历史、产品特色和新闻报道。
用户通过点击超链接，可以直接跳转到目标页面，获取更多的信息。
超级链接设计原则：在企业官方网站中使用超链接应遵循以下原则：首先，链接的内容应与网站的整体主题和业务相关。
网页中使用超链接
第五章网页中使用超超是的魅力所在。
为了把Internet上众多分散的的网页联系起来,构成一个有机的整体,就是在网页上加入。
通过点击网页上的,才能真正实现网络无国界,我们才可以在信息海洋中尽情遨游。
Macromedia Dreamweaver 8提供多种创建超文本的方法,可创建到文档、图像、多媒体文件或下载软件的,可以建立到文档内任意位置的任何文本或图像〔包括标题列表、表、层或框中的文本或图像〕的。
本章主要介绍利用Dresmweaver 创建的编辑各种超的方法。
通过本章的学习,读者应该掌握以下内容；●认识超●掌握利用Dreamweaver创建各种超的方法●掌握利用Dreamweaver编辑各种超的方法●管理超下的方法5.1超基础5．1．1超的种类超为畅游网络提供了方便,它是网页制作中使用比较多的一种技术。
超是用预先准备的好文本、按钮、图像等对象与其他对象建立的一种,也就是源端和目标端点之间的建立一种。
源端点是超的超始端点,也称为源锚；目标端点是的像,也签名为目标锚。
超按源端点的划分,可分为超文本和非超文本两类。
超文本的源锚文本下方有下划线,而非超文本是用除文本之外的其他对象构建的,其源锚可以是图像、表格、列表、表单、多媒体等对象。
超按目标端点的划分,可分为外部、内部、电子、局部、脚本等。
5．1．2文档路径类型掌握从作为起点的文档到作为目标文档之间的文件路径,对于创建至关重要。
文档路径类型有绝对路径和相对路径两种。
1.绝对路径绝对路径是包括服务器协议〔本例中为〕的完全路径,比发如"洪恩在线——电脑乐园",完全路径为; honggen /pe/index..htm.如果要当前站点之外的文档,就必须使用绝对路径。
每个网页都有一个惟一的地址,称为统一资源定位器<URL>。
绝对路径提供文档的完整URL,包括使用的协议<对于网页通常是>。
例如, macromedia /support/dreamweaver/contents.html 就是一个绝对路径。
网页中的超链接 说课稿
综合练习
1、做一个书签式的超链接。 2、做一个两相已有页面间的超链接。 3、建立一个指向Internet上的链接。 4、建立一个E-mail链接。 5、与因特网上的站点建立超链接
LOGO
创建超链接
1．创建文本超链接 （1）创建一个指向站点内其他网页的超链接。 选择“插入”菜单的“超链接”命令，在文件 列表框内选择“页面1.htm”文件，注意在URL文本 框中显示了该文件的地址。 单击“确定”按钮， 文本超链接完成。
我们也可以将超链接指向其他 站点的网页。在“创建超链接”对 话框里，在URL地址栏直接输入要 连接的网页或网站的地址。 如果不清楚要作超链接的地址， 只要单击URL地址框后面的放大镜 就可以用浏览器在Internet上查找 要链接的网页，FrontPage会自动 记录你找到的地址。单击“确定” 按钮。 我们还可以改变已经设置好的 超链接。在普通模式页面，在要改 变的超链接下单击鼠标右键，选择 “超链接属性”命令，输入新的 URL地址就可以了。要想取消超链 接，删除所有URL地址框里的内容 就可以了。
（2）使用书签创建链接 书签创建超级链接的操作步骤。 ① 选中要创建超级链接的文本； ② 单击工具栏中的“插入超链接”按钮，打开“插入超链 接”对话框； ③ 单击“书签”按钮，弹出“在文档中选择位置”对话框； ④ 选择要链接的书签，单击“确定”按钮，完成书签的链 接。
修改书签：选择“插入”菜单的“书签”命令， 在对话框中选中你要修改的书签，选择“转到”
教学方法&设计思路
运用案例教学法，让学生了解超链接的特点，明确超链接 的特点，明确超链接的意义，结合实例，让学生了解热区 域的概念 在教学过程中，除了我们教会学生“怎么做”，还有一点 非常的关键就是要让学生了解“为什么这么做”，所以我 们在课堂不仅仅要简单演示操作，学生也不是简单模仿教 师的操作。我们要通过有效的方法，让学生有趣的、迅速 的了解操作背后的相关概念和术语，达到举一反三的目的。 本实例的操作过程中，高中学生完全有自学能力，能让在 探究过程中有困难的学生得到帮助，让基础好的学生有自 我挑战的余地，探究更多的技术，更好发展不同层次学生 的能力，体验成功的快乐。 这些都是基础，最关键的是“怎么用”，所以我在课堂上 给学生一个空间让学生去发挥，自己设计超级链接的应用， 然后展示，让学生从别人的创意中得到启发。
《网页设计》课程考试大纲
《网页设计》课程考试大纲一、课程基本信息课程名称：网页设计课程代码：090184课程性质：专业必修课二、学时与学分学时：总学时 72 学时，其中讲授 36 学时，实践 36 学时学分：4 学分三、适用专业软件技术、网络技术四、考试方式开卷（课程设计）五、成绩构成综合成绩=平时成绩×40%+技能成绩+期末课程设计成绩×60%六、主要参考书《Dreamweaver网页制作实用教程（第一版）》，缪亮彭宗勤，清华大学出版社，2008年1月七、考试基本题型及分数分布综合设计题（100分）八、考试内容及要求1. 网页设计基础（1）识记并区分站标、导航条、广告条、按钮、网页、网站、静态网页、动态网页、HTTP、 URL的含义；（2）了解网页的本质、网页的布局类型和HTML文档的基本结构，了解网页中常用的标记（html、head、title、body，img、table、tr、td、style、link、script、ul、ol、li、p、br、div等）及常用的属性设置（bgcolor、width、height、src、border、align等），区分head和body中使用的标记；（3）了解网页的设计理念、网页的结构、网页的组成元素、网页“三剑客”；（4）识记网站的规划流程。
本章占试卷总分15%2. Dreamweaver基础（1）识记DW中常用的菜单及其中的常用命令；（2）识记站点和网站的概念，掌握站点的3个组成部分；（3）熟练掌握站点的创建步骤和站点结构的组织方法，识记组织站点结构时创建的各个文件夹的作用，识记DW中文件（或称文档）和文件夹的命名规则；（4）能在Dreamweaver的设计视图和代码视图制作简单页面；（5）了解代码提示工具、标记选择器、标签选择器、快速标签编辑器的功能和用法；（6）熟练掌握页面的总体设置，能熟练地设置页面属性。
本章占试卷总分8%3. 网页中的基本元素和Dreamweaver扩展管理（1）识记文本的3种插入方法；（2）对插入的文本能够快速地设置标题、段落效果、格式、列表；（3）识记网页中常用的图像、视频和音频的格式；（4）掌握页面中图像、鼠标经过图像的插入操作；（5）掌握在网页中插入音频文件的2种方式，能够熟练设置背景音乐的相关属性；（6）掌握网页中视频的使用，尤其是flash、flash文本、flash元素、flash 视频、插件等多媒体对象的插入和属性设置；（7）Dreamweaver扩展插件：识记常见的扩展插件（marquee、sound、persistent layers、Page transitions等），能分清安装后所属的类型（即应在什么地方找到该扩展插件）。
创建锚记超级链接的方法
6.2.4 电子邮件超级链接
电子邮件超级链接与一般的文本和图像链接不同，因为电子邮件链接要 将浏览者的本地电子邮件管理软件（如Outlook Express、Foxmail等）打开， 而不是向服务器发出请求，因此它的添加步骤也与普通链接有所不同。 使用以下两种方法打开【电子邮件链接】对话框进行设置。
6.2 普通超级链接
文本和图像超级链接 图像热点超级链接 下载超级链接和空链接 电子邮件超级链接 锚记超级链接
6.2.1 文本和图像超级链接
一、文本超级链接 用文本做链接载体就是文本超级链接，它是最常见的超级链接 类型。创建文本超级链接比较常用的方式主要有两种：一种是在【属 性】面板中创建超级链接，另一种是在【超级链接】对话框中设置超 级链接。对于文本超级链接，还可以通过【页面属性】对话框设置文 本的颜色、下划线等样式。 1、通过【属性】面板创建超级链接。
选择【插入记录】/【电子邮件】命令 在【插入】/【常用】面板中单击 （电子邮件链接）按钮
6.2.5 锚记超级链接
一般超级链接只能从一个网页文档跳转到另一个网页文档，使 用锚记超级链接不仅可以跳转到同一网页中的指定位置，还可以跳 转到其他网页中指定的位置，包括同一站点内的和不同站点内的。 创建锚记超级链接，需要经过两步：首先需要命名锚记，即在文档 中设置标记，这些标记通常放在文档的特定主题处或顶部，然后在 【属性】面板中设置指向这些锚记的超级链接。 创建锚记超级链接的方法： （ 1 ）使用以下两种方式之一打开【命名锚记】对话框来插入 锚记。 选择【插入记录】/【命名锚记】命令 在【插入】/【常用】面板中单击 （命名锚记）按钮 （ 2 ） 选中链接文本，在【属性】面板的【链接】下拉列表 中输入锚记名称，或者选择【插入记录】/【超级链接】命令，打开 【超级链接】对话框进行设置。
第6章 DW中的超链接与图片
绝对URL 绝对URL是指Internet上资源的完整地址，包括完整的协议种类、计算机域 名（所谓域名是指一个能够反映出Web服务器实际位置的化名）和包含路径的 文档名。其形式为：协议：//计算机域名/文档名。 相对URL 相对URL是指Internet上相对于当前页面（即正在访问的页面）的地址， 它包含从当前页面指向目的页面位置的路径。例如，public/example.htm就是 一个相对URL，它表示当前页面所在目录下public子目录中的example.htm文档。 当使用相对URL时，可以使用与DOS文件目录类似的两个特殊符号：句点 （.）和双重句点（..），分别表示当前目录和上一级目录（父目录）。 超链接的分类 根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、 电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、 图像超链接、图像映射等。
Web 图像的处理流程 1．创建图形图像 2．创建 Web 对象 3．优化图像 4．导出图形
Web 图像使用要点 1．确保文件较小 2．控制图像的数量和质量 3．合理使用动画
在网页中使用图像
1 插入图像 在 Dreamweaver中插入图像的步骤如下。 （1）将光标置于要插入图像的位置，在“插入”栏的“常用”选项卡中 单击“图像”按钮 或选择“插入”菜单中的“图像”命令。 （2）此时将打开“选择图像源”对话框，选取存放在站点中的图像文件 ，最后单击“确认”按钮即可将图片插入到指定区域。 （3）如果所选择的图像文件不是站点中的文件，则将打开 “Macromedia Dreamweaver MX”对话框，如图所示。提示是否将图像 文件保存到根目录下，单击“是”按钮，然后打开“拷贝文件为”对话 框，定位到站点中用于存放图像文件的文件夹，最后单击“保存”按钮 即可。
DW超级链接
2020/11/14
*
6.2超级链接的路径
• 相同文件夹只提供“文件 名”；
• 与位于当前文档所在文件夹的 子文件夹中的文件链接时要提 供“子文件夹名/文件名”；
• 与位于当前文档所在文件夹的 父文件夹中文件链接时要提供 “../文件名”。
2020/11/14
*
6.2超级链接的路径
3.站点根目录相对路径 站点根目录相对路径是指从站点跟文件夹到被链 接文档经由的路径；以一个正斜杠开始，该正斜 杠表示站点根文件夹。
*ห้องสมุดไป่ตู้
6.5几种特殊的超级链接的创建
（2）链接锚记 在同一文档中创建时，选择想要链接到锚记的文字 或图片，然后按如下方法中的任意一种进行操作。
（1）在属性面板上的“链接”文本框中输入符号# 和锚记名称。 （2）按住属性面板上的“指向文件”按钮，并拖动 鼠标指向锚记。 （3）选择文字或图片后，按住Shift键，然后拖动 鼠标指向锚记。
（1）将光标置于网页中要添加E-mail链接的地方，或 选中文字，通过插入“常用”面板上的“电子邮件 链接”按钮，或通过主窗口菜单“插入”|“电子邮 件链接”命令，将弹出 “电子邮件链接”对话框。 完成该对话框的设置即可。
2020/11/14
*
6.5几种特殊的超级链接的创建
（2）在属性面板的链接文本框中直接输入“mailto： E-mail地址”可。
【注】：创建空链接时，这里的冒号与分号不能省略。 为文本建立空链接的目的就是为了应用行为。当链 接载体不是文本时，不需添加空链接就可以应用行 为。
2020/11/14
*
6.创建脚本链接
（1）创建弹出对话框的脚本链接，具体操作：
在“文档”窗口的“设计”视图中选择文本、图 像或对象。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
6.4 创建各种类型的链接
4. 创建下载链接
如.exe,.zip,.rar等。
网 页 制 作 基 础 教 程
如想提供文件下载 ，只需将浏览器无法识别的文件链接到网页中 ，
选择要创建链接的文本或图像，在“属性窗口”的“链接”文本框
中拖动文件指向按钮，指向一个浏览器无法识别的文件，如rar文件。
1.
管理超链接
在首选参数对话框中设置自动更新 选择“编辑”|“首选参数”命令，打开“首选 参数”对话框，在“移动文件时更新链接”选 项的下拉列表中进行选择。 总是——每当移动或重命名选定文档时， Dreamweaver将自动更新该文档的所有链接。 提示——将显示一个提示对话框，列出更改 影响到的所有文件，以进行进一步选择，系统 默认的选项是“提示”。
5 使用图像与多媒体丰富网页内容
网 页 制 作 基 础 教 程
插入FLV视频
“插入”菜单→“媒体” →FLV “插入”面板→“常用”子面板→“媒体” →FLV
直接将flv视频文件拖动到Dreamweaver的设计窗口
为网页添加背景音乐
在“代码”窗口的<body>后面插入<bgsound src=“…mp3文件 autostart=true loop=-1”/>
每当在本地站点内移动或重命名文件时，Dreamweaver可自动更新 指向该文件的链接。
“编辑”菜单—>“首选参数”，在“常规”中单击展开“移动文件 时更新链接”下拉按钮，选择不同的选项，则进行不同的设置。
2.
在整个站点范围内更改链接
手动更改所有链接，包括电子邮件链接、FTP链接、空链接和脚本
链接使其指向其他位置。
5 使用图像与多媒体丰富网页内容
网 页 制 作 基 础 教 程
插入音频文件
“插入”菜单→“媒体” →插件 “插入”面板→“常用”子面板→“媒体” →插件
第6章 网页中超级链接的应用
本章重点：内部链接、外部链接、锚 点链接、E-mail链接的创建方法。
第六章 网页中超级链接的应用
6.1 认识超链接 6.2 关于链接路径 6.3 创建超链接的方法 6.4 创建各种类型的链接 6.5 管理超链接
是一个空链接
4.1 编织网站链接—足球新闻
6、创建跳转菜单
网 页 制 作 基 础 教 程
跳转菜单是文档中的弹出式菜单，可以创建 到可在浏览器中打开的任何文件类型的链接。 方法：
1. 2.
插入栏｜表单｜跳转菜单 在“插入跳转菜单”对话框中，单击＋号 添加菜单项
3.
在“选择时。转到URL”文本框中，输入该 文件的路径。
“HTML”中进行链接选择
选择需要创建超级链接的文字，单击“插入”面板中“常 用”子面板的“超级链接”选项。
6.4 创建各种类型的链接
网 页 制 作 基 础 教 程 2. 创建E-mail链接
电子邮件链接的链接目标是将超级链接引到一个邮箱地址。 作为电子邮件链接的载体可以是图片或者文字。
将光标放置在页面准备插入电子邮件链接的位置，在“插 入”菜单中选择“电子邮件链接”，在弹出的对话框中输 入文本内容和电子邮箱地址，单击“确定”。
步骤1 选中页面中的文字或图像，在属性面板中 单击“链接”文本框右侧的文件夹图标，以通过 浏览选择一个文件 步骤2 从“目标”下拉菜单中，选择文档的打开 位置。
_blank :新打开的空窗口 _parent：如果是嵌套的框架，则在父框架中打开。 _self：会在当前网页所在的窗口或框架中打开。 _top：会在完整的浏览器窗口中打开。
5 使用图像与多媒体丰富网页内容
网 页 制 作 基 础 教 程
插入Flash动画
“插入”菜单→“媒体” →swf “插入”面板→“常用”子面板→“媒体” →swf
快捷键Ctrl+Alt+F
Flash占位符属性设置
对齐：flash动画与页面的对齐方式 品质：设置flash动画播放的效果 比例：设置flash动画文件的比例
链接路径
（1）绝对路径：如果在链接中使用完整的URL地址，这种 链接路径就称作绝对路径。路径同链接的源端点无关。
（2）相对路径：相对路径可以表述源端点同目标端点之
间的相互位置，它同源端点的位置密切相关。 （3）基于目录的路径：所有的路径都是从站点的根目录 开始的，它同源端点的位置无关。通常用一个斜线“/”表 示根目录。
4.2 超链接概述
网 页 制 作 基 础 教 程
4.2.3
1.
创建超链接
在文档窗口中选中想作为链接的文本或图片 在属性面板链接一项的空白处填入链接的路 径，或者单击浏览按钮，在弹出的【选择文 件】对话框中，选定要链接的文档及采用哪
2.
种方式表达路径。
3.
链接的对象可以是多样的，如图片文件，电 子表格，或者某个网站。
《网页制作基础教程（Dreamweaver CS5）》 电子教案
主讲：刘丽杰
5 使用图像与多媒体丰富网页内容
多媒体元素
网 页 制 作 基 础 教 程
定义：是指文本、图像、声音、动画、视频等元 素统称为多媒体元素。
Flash创建的文件类型有：
fla文件(.fla):所有flash项目的源文件，这种类型的文 件只能在flash中打开而无法在Dreamweaver或浏览 器中打开 swf文件(.swf):fla文件的编译版本，它可以在浏览器 中播放，也可以在Dreamweaver中进行预览，但不 能在flash中进行编辑。 FLV文件(.flv):一种视频文件，它包含经过编码的音频 和视频数据
选择需要创建电子邮件链接的文本或图片，直接在“属性
窗口”的“链接”文本框中输入“mailto:电子邮件地址”
将光标放置在页面准备超如电子邮件链接的位置，单击 “插入”面板中“常用”子面板的“电子邮件链接”选项。
6.4 创建各种类型的链接
3. 创建锚记链接
网 页 制 作 基 础 教 程
锚记链接是网页链接中的一种，用来标记文档的特定位置， 使网页中的内容可以快速跳转到当前文档的某个位置或者
不支持的类型时，这些文件会被下载，这就是 网上下载的方法。
链接到下载文件的方法，和链接到网页的方法
完全一样。
4.1 编织网站链接—足球新闻
网 页 制 作 基 础 教 程
5、创建其他类型的链接
（2）、创建空链接
空链接用来激活页面中的对象或文本。当文本或 对象被激活后，可以为之添加行为。
方法：选中要制作空链接的对象，在链接文本框 中直接输入＃。 在一般站点首页的导航栏中的首页链接，就可以
3、创建E－mail链接
网 页 制 作 基 础 教 程 －－当浏览者单击电子邮件链接时，可即时打开 浏览器默认的电子邮件程序处理程序。
方法：
1.
选中文本和图像 插入栏｜常用｜电子邮件链接｜输入邮件地址 或在属性面板的链接栏中直接输入
2.
3.
mailto:邮件地址
4.1 编织网站链接—足球新闻
网 页 制 作 基 础 教 程
6.1 认识超链接
网 页 制 作 基 础 教 程 1. 超链接的定义
超链接由源端点和目标端点两部分组成，其中设 置了链接的一端称为源端点，跳转到的页面或对 象称为目标端点。
2.
常见超链接分类
内部超链接：指目标端点位于站点内部的超链接。
外部超链接：指目标端点位于其他网站中，通过它可跳 转到其他网站的超链接。
4.2 超链接概述
4.2.4 插入导航条
网 页 制 作 基 础 教 程
导航条中按钮图像的状态根据浏览者的鼠 标动作而改变。 方法： 1、将光标放到要插入导航条的位置； 2、选择插入|图像对象|导航条命令 ； 3、或选择插入|常用|图像|导航条命令。
4.3
4.3.1 自动更新链接
网 页 制 作 基 础 教 程
在“文件”面板的“本地文件”区域中选择一个文件，选择“站点” 菜单中的“改变站点范围内的链接”，在弹出的对话框中的“变成
新链接”文本框中输入准备链接的文件，单击“确定”。
4.1 编织网站链接—足球新闻
网 页 制 作 基 础 教 程
4.1.2
案例分析
为实现网页的跳转，将创建：
到网站内页面的超链接――内部链接； 到网站外页面的超链接――外部链接； 电子邮件形式的超链接――E-mail链接； 到网页某一特定位置的超链接――锚点链接； 以及其他一些链接。
站点的其他文档的标记位置。
（1）命名锚记
将光标放置在准备要插入锚记的位置，在“插入”菜单中选择“命 名锚记”，在弹出的对话框中输入锚记名称，单击“确定”。
将光标放置在准备要插入锚记的位置，单击“插入”面板中“常用” 子面板的“命名锚记”选项。
（2）链接到锚记
选择要创建链接的文本或图像，在“属性窗口”的“链接”文本框
脚本链接：通过脚本控制链接。
6.2 关于链接路径
网 页 制 作 基 础 教 程 1. 绝对路径
绝对路径提供所链接文档的完整URL，而且包括所使用的 协议。
2.
相对路径
相对路径是省略掉对于当前文档和所链接的文档都相同的 绝对URL部分，而只提供不同的路径部分。
3.
根路径
站点根目录相对路径是提供从站点的根文件夹到文档的
②
创建到命名锚记的链接
a) b)
选择要创建链接的文本或图像 在属性面板的链接文本框中，键入＃号和锚 记名称 或在浏览对话框中，选中要链接的文件后加
c)
＃和锚记名称。