网页设计与制作6.ppt

1、通过本章学习，应该掌握以下内容：认识超链接 利用Dreamweaver MX创建各种超连接的方法 利用Dreamweaver MX编辑各种超连接的方法 利用HTML创建、编辑超链接的方法 利用站点地图管理超链接的方法,第6章 在网页中使用超链接,1、利用Dreamweaver MX处理超链接2、利用HTML创建超链接3、利用站点地图管理超链接,6.1 利用Dreamweaver MX处理超链接,6.1.1 超链接简介,1什么是超链接,所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个

2、应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。,按照链接路径的不同，网页中超链接一般分为以下3种类型：,内部链接：即在同一个站点内的不同页面之间相互联系的超链接。锚点链接：可以链接到网页中某个特定位置的链接。外部链接：把网页与Internet中的目标相联系的链接。如果按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等,合理安排超链接在网页的制作中是非常重要的。采用什么结构的链接会直接影响到网页的布局。建议：

3、避免孤立文件的存在 在网页中避免使用过多的超链接 网页中的超链接不要超过4层 页面较长时可以使用书签 设置主页或上一层的链接,2合理安排超链接,3文档路径类型,在一个网站中，有绝对路径、和根目录相对路径以及和文档相对路径3种类型的文档路径。绝对路径：是包含服务器协议（对于网页来说通常是http:/或ftp:/）的完全路径。和根目录相对的路径：是从当前站点的根目录开始的路径。站点上所有可公开的文件都存放在站点的根目录下。和文档相对的路径：是指和当前文档所在的文件夹相对的路径。,6.1.2 创建文本超链接,1建立文本超链接,在浏览网页时，鼠标指针经过某些文本时，指针的形状发生变化，同时文本也会发生

4、变化（如出现下划线、文本的颜色发生变化、字体发生变化等），提示这是带链接的文本。此时点击鼠标，就会打开所链接的网页，这就是文本超链接。,在Dreamweaver MX中创建文本超链接的步骤为：（1）在网页上选择需要添加超链接的文本，打开文本的属性面板。（2）在属性面板上指定文字的链接目标。（3）在“目标”下拉列表框中选择目标文件打开的方式。设置结束后，在网页中被选择的文字改变了颜色，且在文字底部出现一条下划线，即文字的超链接设置完成。在键盘上按“F12”键，即可将网页在浏览器中打开。单击链接的文字，即可打开目标文件。,2编辑文本超链接,（1）设置文本链接的状态 一个未被访问过的链接与一个被激活

5、的链接在形式上肯定会有所区别，链接被访问过了也会发生变化，提示用户这是一个已经点击过的链接，所有这些都是链接的状态。通过设置不同的文本颜色可以使各个状态区别开来。,（2）删除文本超链接 在Dreamweaver MX中要删除一个文本超链接很容易，先用鼠标选定文本对象，将光标定位于属性面板的“链接”文本框中，用“BackSpace”键或“Delete”键，将其显示的超链接对象文件名删除，再回车，或选择“修改”|“移除链接”命令，都可以删除超链接而保留原文本对象。,1创建图像超链接,6.1.3 创建图像超链接,给图像添加链接，使其指向其他的网页或者文档，就是图像超链接。（1）选中需要建立超链接的图

6、像，此时属性面板显示图像的属性。（2）在属性面板中为图像添加文档相对路径的链接。（3）按“F12”预览网页。,2删除图像超链接,删除图片超链接与删除文本超链接的方法相同。,锚记，也称为书签或锚点，用来标记文档中的特定位置，使用其可以跳转到当前文档或其他文档中的标记位置，免去浏览者翻阅网页寻找信息的麻烦。在网页中加入锚记包括两方面的工作，一是在网页中创建锚记，另一个就是为锚记建立链接。,6.1.4 创建锚记超链接,创建锚记的步骤如下：（1）将光标移到需要加入锚记的地方，一般是将光标放置在一行或是一段文字的开头部分。（2）单击插入“常用”面板上的按钮，或是选择主窗口的菜单“插入”|“命名锚记”命令

7、，将弹出“命名锚记”对话框。（3）在对话框的“锚记名称”文本框输入锚记的名称。（4）单击“确定”按钮。,1创建锚记,在命名锚记时，必须遵循以下规定：只能使用字母和数字，锚记命名不支持中文。虽然在插入锚记对话框中能输入中文，但在属性面板上显示的则是一堆乱码，且在为锚记添加链接的时候，也无法工作。锚记名称的第1个字符最好是英文字母，一般不要以数字作为锚记名称的开头。锚记名称区别英文字母的大小写。锚记名称间不能含有空格，也不能含有特殊字符。,创建锚记后，还必须链接锚记。选择想要链接到锚记的文字或图片，然后按如下方法中的任意一种进行操作。,2链接锚记,（1）在属性面板上的“链接”文本框中输入符号#和锚

8、记名称。（2）选择文字或图片后，按住Shift键，然后拖动鼠标指向锚记。（3）按住属性面板上的“指向文件”按钮，并拖动鼠标指向锚记。,在链接锚记时，应注意以下事项：在#和锚记名之间不要留有空格，否则链接会失败。在不同文件夹中为锚记创建链按时，其文件名后缀必定是“.htm”，而不能写成“.html”，否则链接也会失败。符号#必须是半角符号，而不能为全角符号。,如果希望浏览者在浏览网页时，只要浏览者单击E-mail链接时，就会在浏览端自动打开浏览器默认的E-mail处理程序，收件人的地址将会被E-mail超链接中的指定地址自动装入，无需浏览者输入，就需要创建电子邮件链接。,6.1.5 创建电子邮件

9、超链接,创建电子邮件链接的步骤如下：（1）将光标置于网页中要添加E-mail链接的地方，或选中文字，通过插入“常用”面板上的“电子邮件链接”按钮，或通过主窗口菜单“插入”|“电子邮件链接”命令，将弹出“电子邮件链接”对话框。（2）如果未选中文字，可以在“文本”文本框中添加所需文字；如果已经选中超链接文字，将会在“文本”文本框中自动显示。然后在“E-mail”文本框中输入E-mail地址，单击“确定”按钮，就可以了。,如果想让网站提供文件下载的功能，就必须建立下载文件超链接。实现文件下载的功能很简单，只需加入连接到文件的超链接就可以了。连接到网站中下载文件的超链接也算是内部超链接中的一种。创建下

10、载文件超链接的方法如下：首先选择主窗口的菜单“站点”|“站点文件”命令，打开站点窗口，找到需要链接的目标文件。然后选择网页中需建立超链接的文字，按下“Shift”键拖动鼠标到站点窗口中的目标文件。,6.1.6 创建下载文件超链接,空链接是一个未指定目标的链接，Dreamweaver MX的行为面板中列出了许多行为，这些行为相当于使用JavaScript编写的程序或函数，要想对文本设置行为，首先为文本建立空链接，这样行为才有效。为文本建立空链接时，只要先在文档窗口选定文本，然后在属性面板中的“链接”栏中输入一个数值符“#”即可。建立空链接的目的就是为了应用行为，其他情况下不必建立空链接。,6.1

11、.7 创建空链接,用HTML创建超链接需要使用A标记符（结束标记符不能省略），它的最基本属性是href，用于指定超链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。另外，在和之间可以用任何可单击的对象作为超链接的源，例如文字或图像。(链接图像即加入标记),6.2 利用HTML创建超链接,6.2.1 页面链接,href的值,href的值可以是URL形式，即网址或相对路径，语法为，这就能创建一个超文本链接了，例如：这是我的网站,还具有target属性，此属性用来指明浏览的目标帧如果不使用target属性，当浏览者点击了链接之后将在原来的浏览器窗口中浏览新的Html文档，若targ

12、et的值等于“_blank”，点击链接后将会打开一个新的浏览器窗口来浏览新的Html文档。例如：这是我的网站,如果要设置锚记超链接，首先应为页面中需要跳转到的位置命名。命名时应使用A标记符的name属性，在标记符与之间可以包含内容，也可以不包含内容。例如，可以在页面开始处用以下HTML语句进行标记：目录 对页面进行标记之后，就可以用A标记符设置指向这些标记位置的超链接。如果在页面开始处标记了top，则可以用以下HTML语句进行链接：返回目录,6.2.2 锚记链接,标记对要结合标记对使用才有效果。标记对用来在Html文档中创建一个标签(即做一个记号)，属性name是不可缺少的，它的值也即是标签名

13、，例如：此处创建了一个标签 创建标签是为了在Html文档中创建一些链接，以便能够找到同一文档中的有标签的地方。要找到标签所在地，必须使用标记对。例如要找到“标签名”这个标签，编写代码：点击此处将使浏览器跳到“标签名”处 注意：href属性赋的值若是标签的名字，必须在标签名前边加一个“#”号。,如果将href属性的取值指定为“mailto:电子邮件地址”，那么就可以获得电子邮件链接的效果。例如，使用以下HTML代码可以设置电子邮件超链接：作者邮箱 当浏览网页的用户单击了指向电子邮件的超链接后，系统将自动启动邮件客户程序，并将指定的邮件地址填写到“收件人”栏中，用户可以编辑并发送该邮件。,6.2.

14、3 电子邮件链接,利用站点地图建立网页间的超链接的步骤如下：（1）在菜单栏中单击“站点”|“站点地图”，或按Alt+F8组合键打开站点窗口（按F8键，可快速打开Site窗口）。（2）选中需要链接的文件，比如index.htm，在鼠标右键快捷菜单中选择“链接到新文件”或“链接到已有文件”，即可建立网页间的超链接。,6.3 利用站点地图管理超链接,6.3.1 建立网页间的超链接,对于不需要的链接关系，在站点地图的树状结构上可以非常轻松地解除。解除超链接的步骤如下：（1）树状结构上选择要解除链接关系的对象图标。（2）在右键快捷菜单中选择“移除链接”命令，即可解除网页间的超链接。,6.3.2 解除网页

15、间的超链接,在“站点”浮动面板的站点地图上更改文件的名称与Windows下的操作基本相同。（1）首先单击选中欲更改名称的文件。（2）再次单击该文件的文件名，输入新的文件名后按一下回车键即可。（3）当文件被更名后，系统会弹出“更新文件”对话框，询问站点中被链接的网页名称是否也作修改。（4）在该对话框中单击“更新”按钮即可完成操作。,6.3.3 更新超链接,Dreamweaver MX提供“结果”浮动面板组，除了具有检查浏览器兼容性、代码兼容性等强大功能外，还可以利用它来检查甚至修改站点中的超链接。,6.3.4 检查超链接,可以在Dreamweaver MX的“站点”浮动面板上选择“文件”|“检查

16、链接”命令，在打开的下拉菜单中选择“为整个站点检查链接”命令。,1自动对整个站点的超链接情况进行检查。,如果在“链接检查器”浮动面板的“显示”标识符后的下拉列表框中选择“断掉的链接”选项，则Dreamweaver MX将自动列出网站中所有的断掉的链接。,2修复站点中的超链接,如果在“结果”面板中“链接检查器”选项卡的“显示”标识符后的下拉列表中选择“外部链接”选项，则Dreamweaver MX将自动列出网站中所有的外部超链接文件。,3处理外部超链接,所谓孤立文件并不是指没有用的文件，而是指没有与其他网页发生链接的文件。如果在“结果”面板中“链接检查器”选项卡的“显示”标识符后的下拉列表中选择“孤立文件”选项，则Dreamweaver MX将自动列出网站中所有孤立的文件。对于该列表中的文件，除非是经过检查后确定这些文件是没有用的，才可以删除，否则最好不要一次全部删除，以免追悔莫及。,4处理孤立文件,