网页设计与制作第6章 网页中的超级链接
网页设计与制作立体化教程 第2版 项目四 编辑网页中的超链接
三、任务实施
16
（一）插入文本超链接 下面打开“show.html”网页，在网页中插入文本超链接，具体操作如下。
选择文本
选择文件
三、任务实施
17
（一）插入文本超链接
创建超链接 为“关于我们”创建超链接
三、任务实施
18
（一）插入文本超链接
为“新上架”创建超链接
三、任务实施
19
（二）设置超链接CSS样式 创建的文本超链接是默认样式，可以通过设置链接CSS样式来美化文本超链接，具体操作如下。
5
空链接 电子邮件链接 锚点链接
二、相关知识
（一）认识超链接 3．超链接的路径
绝对路径：绝对路径指包括服 务器地址在内的完全路径，常用于 链接到其他站点上的内容。
6
文档相对路径：文档相对路径是本 地站点链接中最常用的链接形式。使用 相 对 路 径 时 无 需 给 出 完 整 的 URL 地 址 ， 可省去URL地址的协议，只保留不同的 部分。
站点根目录相对路径：站点根目录 相对路径适合创建内部链接，与绝对路 径非常相似，只是省去了绝对路径中带 有协议的地址部分，且以“/”开始，然 后是目录下的目录名。
二、相关知识
7
（一）认识超链接
3．超链接的路径
文档相对路径是制作网站时最常用的链接形式，它的基本 思想是省略掉对于当前文档和所链接的文档都相同的绝对路径 部分，而只提供不同的路径部分。假设一个站点的结构如右图 所示，文档之间相对路径的设置方式通常有以下4种形式。
调整热点
二、相关知识
同目录
子目录
父目录
父目录的子目录
二、相关知识
（二）创建超链接 1．创建文本超链接
通过菜单命令
ch06-网页中超级链接的应用
6.4.1 创建文本超链接
• 启动Dreamweaver CS5,在菜单栏中,选择[文 件]→[打开]菜单项,打开素材文件.
• 展开[属性]面板,在面板中,选择[链接]文本框右侧 的[浏览文件]按钮.
• 弹出[选择文件]对话框,选择准备插入的文件,单击 [确定]按钮.
• 保存文档,按下键盘上的[F12]键,即可在浏览器中 预览到网页的效果.
6.2.3 根路径
• 站点根目录相对路径提供从站点的根文件夹到 文档的路径,如果在处理使用多个服务器的大 型Web站点,或者在使用承载有多个不同站点 的服务器,则可能需要使用这些类型的路径,如 果不熟悉此类型的路径,最好坚持使用文档相 对路径.
6.3 创建超级链接的方法
• 使用[属性]面板创建链接 • 使用指向文件图标创建链接 • 使用菜单创建链接
• 首先需要将鼠标光标定位于准备要插入锚记的 位置,在菜单栏中,选择[插入]→[命名锚记]菜单 项,弹出[命名锚记]对话框,在[锚记名称]文本框 中输入锚记的名称,单击[确定]按钮,即可完成 创建锚记的操作.
6.4.5 创建空链接
• 启动Dreamweaver CS5,在菜单栏中,选择[文 件]→[打开]菜单项,打开素材文件.
在站点范围内更改链接
• 启动Dreamweaver CS5,在[文件]面板中,在[本地文件] 区域中选择一个文件.
• 在菜单栏中,选择[站点]→[改变站点范围的链接]菜单 项.
• 弹出[更改整个站点链接]对话框,在[变成新链接]文本 框中,输入准备准备链接的文件,单击[确定]按钮,即可 完成在站点范围内更改链接的操作.
Dreamweaver CS5网页设计与制 作基础教程
第6章 网页中超级链接的应用
《网页设计与制作》习题及答案
第1章网页设计基础1.网页文件不包括 ( D )A HTML文件 B多媒体文件 C图像文件 D Dos文件2.网页构成元素按照元素划分为（ABCD ）A 文本B 图像 C超链接 D音频和视频3. HTML文档结构中表示头部信息的（ B）A < body > < /body > B<head></head> c <html></html> D<title></title>4.在HTML文档中，使文本内容强制换行的标签是（B）A<hr> B<br> C<pre> D<hn>5.以下哪个标签语言符合HTML的语法规范（D）A<img src=pic.jpg width=150 height=200/>B<p><div>文字加粗</p></div>C<p align=center>D<hr width=”400” color=”#000000”>6．不属于HTML标记的是（ C ）A.<html>B.<head>C.<color>D.<body>7．为了标记一个HTML文件，应该使用的HTML标记是（ C ）A.<p></p>B.<body></body>C.<html></html >D.<title></ title>二填空1.网页分为（静态网页）和（动态网页）两种类型。
2.HTML中的所有标签都是有一对（<>）围住。
3.HTML网页的标题是通过（<title></title>）标签显示的。
4.（<hr>）是水平线标签，可以在页面生成一条水平线。
网页设计与制作 名词解释
1协议：事先约定货定义的一组精确地规定所交换数据的格式和传输方式的方法和规则，即计算机在交换信息时都要遵守的表达方式。
主要包括用户数据和控制信息的结构和格式，需要发出的控制信息以及相应要完成的操作与响应、对事件实现顺序的详细说明等三个部分。
2网站的层次：指整个站点各个层次之间的结构关系。
这是一种逻辑上的概念，目的在于合理组织整个站点中的所有内容，便于访问者查找和浏览，一般来说站点都把自身的内容分为多个层次，每个层次逐渐递进,最后达到最相信的内容。
3表单：是网页中站点服务器处理的一组数据输入域。
当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。
它是非常重要的通过网页在与服务器之间传递信息的途径，表单网页可以用来说收集浏览者的意见和建议，以实现浏览者与站点之间的互动。
4内联式样式单：它利用于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中。
5虚拟主机:使用特殊的软硬件技术，把一台运行在因特网上的服务器主机分为多台“虚拟"主机,每一台虚拟主机都具有独立的域名和IP地址,具有完整的Internet服务器功能，虚拟主机之间完全独立,并可由用户自行管理，每一台虚拟主机和一台独立的主机完全一样.6标记型网页制作工具：指创建的网页文件在编辑过程中只能看到页面的源代码，只需要转到浏览器中就能看到页面的效果。
要求用户对HTML的使用方法非常熟悉才能够做出希望要的页面，其优点在于可以完全的控制页面元素，写出精简的代码.7色相：是颜色的基本属性，反应颜色的原貌,通过色相,人们才能区分种种颜色。
8客户端图像地图：它可将每个作用区的URL位置直接对应在Web网页的图像。
客户端图像映射并不需要通过服务器处理来允许站点访问者是否可在图像映射上进行超级链接。
但是,并非所有的浏览器都支持客户端图像映射。
9嵌入式样式单：和Script类似，嵌入到HTML文件的头部中去（<html>和<body>标记之间的〈head〉〈/head>标记之间）使用<Style>和〈/style>标记装载。
网页设计与制作第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的消息正文中发送表单的值，并发送服务器
00900《网页设计与制作》复习资料
《网页设计与制作》自考课程复习资料1．网络协议分为：硬件协议和软件协议。
2．TCP/IP协议：TCP为传输控制协议，工作在传输层，FTP默认端口号为21；IP为网际协议，工作在网络层，WEB默认端口号为80；Telnet为远程登录协议，默认端口号为23；SMTP为简单邮件传输协议，默认端口号为25；POP3为邮局协议，默认端口号为110。
3．IP地址：由32位二进制数表示，每8位为一组，以圆点“．”分隔；其中IP直观表示时采用十进制，每组的有效范围是0~255；主要分为三个层次，分别是主机、由主机构成的网络和网络构成的互联网；IP分为5类IP地址，A类1~126，B类128~191，C类192~223，D类224~239，E类240~254。
4．域名与域名系统：IP是三个层次的由数字表示，而域名是多个层次由字符表示，域名分为国内域名（中国.cn）和国际域名（商业.com/网络.net/教育.edu/政府.gov/组织.org），DNS即（Domain Name System/ Domain Name Server）实现域名与IP地址的一一对应关系。
5．URL：即统一资源定位器，基本格式为：访问类型：//访问主机[：端口号]/访问的文件。
6．网页：即基于超文本和超媒体的信息载体；超文本指一个网页可以通过事先嵌入的超级链接跳转到存储于其他任何地方的网页；超媒体指网页包含了种种多媒体信息或多媒体链接。
7．网页的核心是HTML，它并不是一种程序设计语言，而是一种页面描述语言。
8．WEB浏览器是指一个运行在用户计算机上的程序，它负责下载、显示网页，因此也称为WWW客户程序。
9．超媒体的两大应用：一是指网页中的图形本身就是一个链接，二是指WEB链接可以打开某一程序，而且显示并播放其中的图片、音频或视频剪辑。
10．目前流行的两大浏览器：Internet Explorer和Netscape Navigator。
《网页设计与制作》习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述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等各种特效。
《网页设计与制作》课程标准
《网页设计与制作》课程标准序言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
本课程定位于WEB技术开发工作岗位。
它是WEB前端技术开发的必备课程，在整个课程系统中拥有重要的作用，一、课程的说明：经过本课程的学习，使学生认识网页设计技术的发源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，经过运用Photoshop图像办理软件和Flash动画制作软件，三个软件相互当合，达成网页设计与制作任务的方法。
为此后从事网页设计与制作、网站开发和管理确立基础。
在网页设计的实践中要点培育团队协作、交流交流能力，培育自主学习能力和探究创新能力。
二、课程内容与基本要求：该课程波及的知识是网页设计人员必备的基本技术，职业活动与课程内容的对应关系以下：三、教课目的1、职业要点能力目标(1) 掌握使用Photoshop进行图像办理的基本方法及操作技术(2) 掌握DreamweaverCS5的基本知识及操作技术(3) 掌握成立与管理站点的方法(4) 掌握制作主要内容为文本的网页的方法(5) 掌握在网页中插入与编写图像的方法(6) 掌握在网页中插入多媒体元素的方法(7) 掌握表格办理与网页布局的方法(8) 掌握创立超级链接的方法(9) 掌握使用框架制作旅行网站的方法(10) 掌握创立和使用模板的方法(11) 掌握创立和使用库的方法(12) 掌握在网页中增添AP Div的方法(13) 掌握在网页中使用行为的方法(14) 掌握HTML基础知识及经过代码修饰网页的方法(15) 掌握使用CSS款式表修饰网页的方法(16) 掌握动向网页的观点及简单动向网页的制作方法2、职业特意能力目标(1) 经过达成有关的项目，掌握网页设计的基本工作流程。
(2) 经过达成有关的项目，掌握网页设计常用工具的使用方法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 2. 根据超链接目标位置的不同分 • （1）内部链接：指在同一站点内部，不同页面之 间的超链接。 • （2）锚记链接：网页内部的链接。通常情况下， 锚记链接用于链接到网页内部某个特定的位置。 • （3）外部链接：站点外部的链接，是网页与因特 网中某个目标网页的链接。 • （4）E-mail链接：指链接到电子邮箱的链接。单 击该链接可以用于发送电子邮件。 • （5）可执行文件链接：通常又称为下载链接，单 击该链接可以运行可执行文件，可以用于下载文 件或或在线运行可执行文件。 • 超链接源与目标路径概括如图6-1所示。
6.1 超级链接概述
• 超级链接在通过网页浏览获取信息中有如此重要的作用， 所以要想实现一个科学合理的链接，就应学习超级链接的 相关知识并熟练掌握实现的技术。
6.1.1 超级链接的定义
• 所谓的超链接是指从一个网页指向一个目标的连接关系， 这个目标可以是另一个网页，也可以是相同网页上的不同 位置，还可以是一个图片、一个电子邮件地址、一个文件， 甚至是一个应用程序。能合理、协调地把网站中的各个元 素以及网站中的页面通过超级链接构成了一个有机整体， 使浏览者能快速地访问到想要访问的页面。 • 超链接由源端点和目标端点两部分组成，其中设置了链接 的一端称为源端点，跳转到的页面或对象称为链接的目标 端点，同样，超级链接也是网页中最重要、最基本的元素 之一。 • 而在一个网页中用来作超链接的对象，可以是一段文本或 者是一个图片。当浏览者单击已经链接的文字或图片后， 链接目标将显示在浏览器上，并且根据目标的类型来打开 或运行。
第6章 网页中的超级链接
• 在主页制作中，大家对链接的作用并不陌生，可以这样说， 链接是主页的灵魂是网页的核心。有了它，就能够轻而易 举地实现互联网上的信息访问、资源共享。在此，作为超 文本标记语言（HTML）可以链接到其他的网页、图像、多 媒体、电子邮件地址、可下载的文件等。可以说只要浏览 器能够显示的内容，都可以从一个HTML文件中得到。我们 只所以能在网络世界恣意畅游，页面之间的链接功不可没。 而对于网页制作者来说，链接看似简单却并不容易。 • 本章对网页中的链接进行一个综合的介绍，以期让大家对 它有一个全面而深入的理解。对于链接在HTML 中的写法， 在这里就不作过多讲解，有兴趣的读者可参考有关资料学 习。
图6-1 链接源与目标路径
6.1.3 内部、外部与脚本链接
• 常规的链接包括内部超链接、外部超链接和脚本链接。下 面介绍各个链接的操作方法。3.脚本超链接 • 就是通过脚本的方法来控制链接。其主要用来执行计算、 表单验证和其他处理。 • 1.内部超链接 • 内部超链接是指目标端点内部的超链接，其设置非常灵活。
6.2.2 相对路径
• 文档的相对路径，例如data/html/doc/201212/21/25126/index.html。 • 相对路径对于绝大多数Web站点的本地链接，是最全适的 路径。相对路径还可以需要站点内移动文件时，提供更大 的灵活性。 • 在当前文档与所要链接的文档处于同一文件夹内，而且在 继续保持这种状态的情况下，文档相对路径非常有用。 • 文档相对路径还可以用来链接到其他文件夹中的文档，方 法是利用文件夹层次结构，指定从当前文档所链接的文档 的路径。 • 文档相对路径，是省略掉了当前文档和所链接的文档都相 同的绝对URL部分，而只提供不同的路径部分。如图6-2所 示我们建立的一个站点的内部结构。
6.2 关于链接路径
• 链接是有路径的，深入理解路径的含意， 根据网站的不同需要选择不同的路径，对 创建网站非常重要。
6.2.1 绝对路径
• 绝对路径提供链接文档的完整的URL，包括所使用的协议， 比如对于Web页来说，通常使用http:/，其中http （Hypertext Transfer Protocol）就超文本传输协议。 例如，/cms/data/html/doc/201212/21/25126/index.html就是一个绝对路径。 • 尽管本地链接（即到同一站点文档的链接）也可以使用绝 对路径链接，但最好不要采用这种方式，因为一旦将此站 点移动到其它域，则所有本地绝对路径链接都将断开。 • 绝对路径也会出现在尚未保存的网页上，在没有保存的网 页上插入图像或添加链接，Dreamweaver会暂时使用绝对 路径。 • 当插入图像（非链接）时，如果使用图像的绝对路径，而 图像又驻留在远程服务器而不在本地硬盘驱动器上，则将 无法在文档窗口中查看该图像，此时，必须在浏览器中预 览该文档才能看到，只要情况允许，对于图像，就要使用 文档或站点根目录相对路径。
图6-2 站点结构
• 如果成组移动一组文件，例如移动整个文件夹时，该文件 夹内所有文件保持彼此间的相对路径不变，此时不需要更 新文件间的文档相对链接。如果，移动含有文档相对链接 的单个文件或者移动文档相对链接到的单个文件时，则必 须更新这些链接
6.2.3 根路径
• 站点根目录相对路径，例如/cms/data/html/doc/201212/21/25126/index.html。即紧跟在网站域名后。 • 站点根目录相对路径提供从站点的根文件夹到文档的路径， 在处理使用多个服务器的大型Web站点，或者在承载有多 个不同站点的服务器，则可能需要使用这个类型的路径， 如果不太熟悉这个类型的路径，最好使用文档相对路径为 妥。 • 站点根目录相对路径以一个正斜扛“/”开始，正斜扛表 示站点根文件夹。比如/lwjun/index.html是文件 index.html的站点根目录相对路径，该文件位于站点根文 件夹的lwjun子文件夹中。 • 在有些Web站点中，需要经常在不同文件夹之间移动HTML 文件，在这种情况下，站点根目录相对路径通常是指定链 接的最佳方法。 • 如果移动或重命名根目录相对链接所链接的文档，即使文 档如果移动某个文件夹，则指向该文件夹中文件的所 有根目录相对链接都必须更新。
6.1.2 超链接的类型
• 1. 根据超链接的链接路径分 • 通常情况下将超链接分为以下三种： • （1）绝对URL超链接也称为绝对路径。页面之间的链接是 用统一资源定位符URL(United Resource Location)来表 示。 • （2）相对URL的超链接，又称为相对路径。 • （3）同一网页的超链接。