网页设计教程-第3章.ppt

第3章 制作网页的基本元素,（时间：3次课，6学时）,第3章 制作网页的基本元素,教学提示：本章还将介绍如何利用Dreamweaver 8在文档中实现超链接，其中包括链接到文档或其他页面、链接到指定的锚、链接到电子邮件地址和链接到空链接等各种超链接，并将详细讲述改变这些超链接的属性设置和测试链接的方法，以便用户能创建一个具有各种超链接的网站，而且能使网站中的所有超链接都能保持完全正确的链接，从而使访问者可以方便地穿梭于网站中。教学目标：文档操作是设计网页的基本操作，它包括打开和编辑文档、设置文档属性、定义文档标题等多个方面，在设计网页时都是必须考虑到的。Dreamweaver 8提供了强大的页面图像控制能力，能够帮助用户创建专业的图文并茂的页面。本章将介绍如何利用Dreamweaver 8创建文档，并在文档中添加和控制图像。能否掌握好这些网页基本元素的制作，对制作网页至关重要。,第3章 制作网页的基本元素,3.1 制作文本特效3.2 设置图像效果3.3 映射图的应用3.4 导航条的使用3.5 创建与管理链接3.6 上 机 实 战,3.1 制作文本特效,3.1.1 创建文档3.1.2 添加文本3.1.3 设置文本格式3.1.4 设置字符格式,3.1 制作文本特效,文本是网页中最基本的元素。好的文本格式，能够充分体现文档要表述的意图，激发读者的阅读兴趣。在网页中设置丰富的字体、多种的段落格式以及赏心悦目的文本效果，对于一个专业的网站来说，是必不可少的要求之一。在本节中将讲述如何创建一个文档，并在文档中添加各种各样的文字。,3.1.1 创建文档,在Dreamweaver中，用户可以从一个空白的HTML页面创建新文档，也可以从模板创建，还可以打开并修改其他应用程序创建的HTML文档。1.创建新文档启动Dreamweaver 8后，就可直接创建一个空文档。如果已经启动Dreamweaver 8，要创建空白文档，可以在菜单栏中选择【文件】|【新建】命令，则会出现如图3.1所示的【新建文档】对话框。该对话框中默认显示的是【常规】选项卡，可以在其中选择不同的文档格式。在【类别】列表框中选择【框架集】选项，在【框架集】列表框中选择【上方固定，左侧嵌套】选项，在右边的【预览】框中可以预览新建文档的结构。单击并打开该对话框的【模板】选项卡，对话框如图3.2所示。可以在其中选择不同的模板，在右边的【预览】框中可以预览新建文档的结构。,3.1.1 创建文档,图 3.1【新建文档】对话框,3.1.1 创建文档,图 3.2 选择新建文档的模板,3.1.1 创建文档,图3.3所示为新建的一个框架结构类型的空文档，其中包含3个框架，分别为：上框架、左框架和主框架。在创建一个新文档后，如果打开HTML源代码检视器，实际上Dreamweaver已经为用户打开了一个名为“Default.htm”的模板，每次开始新建网页时，Dreamweaver都会将它打开。单击文档编辑窗口上的【代码】按钮查看，源代码如图3.4所示。在这段源代码中设置了网页的一些基本属性如页名、标题、正文和页面背景色等。2.保存文档当创建一个新的文档并编辑后，就要保存该文档。保存文档可以单击【文件】|【保存】命令，或是按下Ctrl+S组合键。如果文档尚未被保存，则会出现如图3.5所示的【另存为】对话框。选择路径并输入文件名，单击【保存】按钮，即可保存文档。如果文档已经被保存过，则会直接保存文档，不会出现该对话框。,3.1.1 创建文档,图 3.3 新建文档,3.1.1 创建文档,图 3.4 查看新建文档的源代码,3.1.1 创建文档,图3.5【另存为】对话框,3.1.1 创建文档,3.设置文档的页面属性文档的页面属性包括文档的标题、文档的文字编码方式、文档正文中各个元素的颜色等。正确设置文档属性是成功编写网页的必要前提。要设置文档的页面属性，其具体操作如下。(1)选择【修改】|【页面属性】命令，或在文档窗口中右击，然后从快捷菜单中选择【页面属性】命令。这时会打开如图3.6所示的对话框，设置文档页面的外观属性。(2)利用【文本颜色】文本框可以设置文档中文字的前景颜色。在Dreamweaver中选择颜色的方法很简单，单击【文本颜色】文本框旁边的色块，会弹出一个调色板，如图3.7所示，在所需的颜色上单击就可以选定这种颜色。(2)利用【文本颜色】文本框可以设置文档中文字的前景颜色。在Dreamweaver中选择颜色的方法很简单，单击【文本颜色】文本框旁边的色块，会弹出一个调色板，如图3.7所示，在所需的颜色上单击就可以选定这种颜色。,3.1.1 创建文档,图3.6 设置页面的外观属性,3.1.1 创建文档,图 3.7 选择文本颜色,图 3.8 选择更精确的文本颜色,3.1.1 创建文档,图3.9 设置页面的链接属性,3.1.1 创建文档,利用【链接颜色】文本框可以设置文档页面中尚未访问过的超链接的文字颜色。利用【已访问链接】文本框可以设置文档页面中已经访问过的超链接的文字颜色。利用【下划线形式】文本框可以设置文档页面中超链接的文字是否有下划线等。(5)设置完页面的链接属性后，选择【分类】列表框中的【标题/编码】选项，在如图3.10所示的对话框中设置标题/编码属性。在【标题】文本框中，输入文档的页面标题。在浏览页面时，它会显示在浏览器的标题栏上。这里输入“物理篇不知道的世界”。(6)设置完毕后，单击【确定】按钮。,3.1.1 创建文档,图3.10 设置页面的标题/编码属性,3.1.2 添加文本,Dreamweaver是一种“所见即所得”的网页创作工具，插入文本非常方便，可以直接在文档窗口中输入，也可以把其他应用程序，(如Word、Internet Explorer等)中的文本粘贴到文档窗口。1.在文档窗口直接输入文本在文档窗口中直接输入文本时，其操作和Word中的操作类似，只需正常输入文本即可，如图3.11所示。Dreamweaver是一种“所见即所得”的网页创作工具，插入文本非常方便，可以直接在文档窗口中输入，也可以把其他应用程序，(如Word、Internet Explorer等)中的文本粘贴到文档窗口。1.在文档窗口直接输入文本在文档窗口中直接输入文本时，其操作和Word中的操作类似，只需正常输入文本即可，如图3.11所示。当选择【编辑】|【选择性粘贴】时，将出现如图3.13对话框，在此对话框中可设置粘贴格式。选择【仅文本】选项，则原文档所有格式清除，结果如图3.14所示。当选择【带结构的文本(段落、列表、表格等)】，则原文档相应的格式都保留。,3.1.2 添加文本,图3.11 在文档窗口中直接输入文本,3.1.2 添加文本,图3.12 选择【编辑】|【粘贴】,图3.13【选择性粘贴】对话框,3.1.2 添加文本,图3.14【选择性粘贴】结果,3.1.3 设置文本格式,Dreamweaver是一种“所见即所得”的网页创作工具，这意味着对文本格式进行设置时可以直接从屏幕上看到设置结果。Dreamweaver提供了强大的文本格式化功能，用户可以随意地对文档进行各种格式化操作。在Dreamweaver 8中，文本的格式化操作是非常简单的。Dreamweaver像是一个普通的文字处理程序，就像Word，用户很容易就可以完成对文本的格式化操作。1.设置段落格式在HTML中，段落主要由标记和定义，在Dreamweaver的文档窗口中，每按一次Enter键，都会自动为上面键入的段落加上和标记。要设置段落格式，只需将插入点置于段落中的任意位置，然后设置段落格式即可，即只要确保插入点位于该段落的和之间即可。,3.1.3 设置文本格式,使用HTML标记格式化文本，这是最为“正统”的格式化方式。利用HTML标记，可以对段落和字符进行丰富的格式化设置。用户可以按照如下方法进行操作。(1)在文档中，将插入点置于要设置标题的段落中，如果希望将多个段落设置为标题，也可以选中多个段落。(2)选择【文本】|【段落格式】命令，再选择相应的标题选项，如图3.15所示。可选的标题格式包括【标题1】【标题6】。2.对齐段落段落的对齐方式，指的是段落相对文档窗口(或浏览器窗口)在水平位置的对齐方式。对齐的方式有三种：左对齐、居中和右对齐。对齐段落的具体步骤如下。(1)将插入点放在要设置对齐方式的文档中，如果要设置多个文档段落的对齐方式，可以同时选中这些段落。(2)选择【文本】|【对齐】命令，再选择如图3.17所示的对齐方式。【左对齐】选项设置段落相对文档窗口左对齐；【居中对齐】选项设置段落相对文档窗口居中对齐；【右对齐】选项设置段落相对文档窗口右对齐；【两端对齐】选项设置段落。相对文档窗口两端对齐。,3.1.3 设置文本格式,图 3.15 设置段落格式为标题,3.1.3 设置文本格式,图 3.16 利用【属性】面板设置段落格式,3.1.3 设置文本格式,图 3.17 设置段落对齐方式,3.1.3 设置文本格式,3.1.4 设置字符格式,如果说段落格式能够从整体上把握文档的结构，使文档便于阅读理解，那么合适的字符格式则能够为文档带来美感，进一步突出文档要表达的中心思想。在Dreamweaver中，用户可以对字符的字体、字号、颜色和样式等进行深入的设置。如果希望设置文本的字符格式，则需要选中这些文字，使这些文字高亮显示。1.设置字符的字体要为字符设置字体，首先得选中要设置字体的文字，然后选择【文本】|【字体】命令，再选择相应的字体。如图3.19所示。如果在【字体】菜单中没有用户需要的字体，可以自行编辑字体列表，编辑字体列表的具体操作如下。(1)如图3.19或图3.20所示选择菜单中的【编辑字体列表】选项。这时会打开如 图3.17所示的【编辑字体列表】对话框，在这里用户可以对字体列表进行设置。(2)要在【字体】列表框中添加新字体，可以单击对话框左上角的“”按钮，然后从【可用字体】列表框中选择需要的字体，再单击“”按钮，被添加的字体就会出现在【选择的字体】列表框中。图3.21为添加“方正姚体”字体。(3)设置完毕，单击【确定】按钮。,3.1.4 设置字符格式,图 3.19 设置字符的字体,3.1.4 设置字符格式,图 3.20 利用【属性】面板为字符设置字体,3.1.4 设置字符格式,图 3.21【编辑字体列表】对话框,3.1.4 设置字符格式,2.设置字符的字号字号指的是字符的大小，简单地说就是字的号码。要在Dreamweaver中设置字符的字号，其具体操作如下。(1)选中要设置字号的文本。(2)单击【文本】|【大小】命令，然后在如图3.22所示的子菜单中选择需要的字号，字号从1到7共有7级。如果希望使用默认的字体大小，可以选择【默认】选项，这样就从源代码中除去了相应的字体大小的设置代码。(3)如果希望以默认字符大小为基准，设置字符相对默认字符大小的增减量，可以选择【文本】|【改变大小】命令，然后在如图3.23所示的子菜单中选择要增减的级别。3.设置字符的颜色丰富的字符颜色能够极大地增强文档的表现力，在Dreamweaver 中，要设置字符颜色，并希望利用Web安全色来设置字符色，应该使用【属性】面板上的调色板，具体操作如下。(1)选中要设置颜色的文字。(2)在【属性】面板上，单击【大小】文本框右边的【文本颜色】按钮，打开如图3.25所示的调色板，然后选择需要的颜色即可，也可以在该按钮右方的文本框中，输入颜色的十六进制数值。,3.1.4 设置字符格式,图 3.22 选择字体大小,图 3.23 改变字体大小,3.1.4 设置字符格式,图 3.24 选择字号,3.1.4 设置字符格式,图 3.25 设置文本颜色,3.1.4 设置字符格式,4.设置字符的样式字符的样式(style)，也称作字符的风格，指的是字符的外观显示方式，如字符的加粗、倾斜和下划线等。利用Dreamweaver，可以很容易地设置多种字符样式，具体操作如下。(1)选中要设置格式的字符。(2)选择【文本】|【样式】命令，打开如图3.26所示的子菜单。(3)从子菜单中选择需要的样式，即可为选中的字符设置相应的样式，被选中的选项左边会带有选中标记。,3.1.4 设置字符格式,图 3.26 选择字符样式,3.2 设置图像效果,3.2.1 插入图像 3.2.2 修改图像属性3.2.3 加入背景图像,3.2 设置图像效果,为了增加网页的吸引力，几乎所有的主页上都或多或少的带有一些图像。在页面中恰当地使用图像，能够极大地吸引浏览者的注意。Dreamweaver提供了强大的页面图像控制功能，能够帮助用户创建专业的图文并茂的页面。本节将介绍如何利用Dreamweaver在文档中控制图像。,3.2.1 插入图像,要在Dreamweaver的文档窗口中插入图像，其具体操作如下。(1)在文档中确定需要插入图像的位置。(2)选择【插入】|【图像】命令，如图3.27所示，或是单击【插入】面板上的【图像】按钮，从菜单中选择【图像】命令。这时会出现如图3.28所示的对话框，用户可以从文件夹中选择图像文件。(3)选中需要的文件后，在对话框的URL文本框中会显示当前文件的URL地址。(4)选中图像文件后，单击【确定】按钮，即可将图像插入到文档中。如果选择的图像没有位于本地站点的目录中，则会出现如图3.29所示的对话框，询问是否要将该图像文件复制到用户的本地站点中。单击【是】按钮，则会将选中的图像复制到站点目录中，同时会出现一个对话框，提示从站点中选择目录。,3.2.1 插入图像,图 3.27 利用【插入】菜单或【插入】面板插入图像,3.2.1 插入图像,图 3.28 在文件夹中选择插入的图像,3.2.1 插入图像,图 3.29 确定是否保存图像文件到本地站点中,3.2.2 修改图像属性,在文档窗口中插入图像后，该图像会以其原始大小显示。用户可以在【属性】面板中修改图像的属性，如替换文字、显示尺寸、对齐方式和边缘空距等，也可以在可视化状态下修改图像的大小。从文档窗口中，选中插入的图像，即可在【属性】面板中设置图像的属性。这时的属性面板如图3.30所示。在这个【属性】面板中对图像属性进行设置的具体操作如下。(1)【属性】面板的左上角显示了当前图像的缩略图，同时显示图像的大小。在缩略图的右边有一个文本框，在其中输入图像的名称为“liuxiang1”。(2)在【宽】和【高】文本框中，可以设置图像在页面中显示的宽度和高度。在插入图像时，会自动在这里填入图像100大小的宽度和高度，也可以在这里修改其宽度和高度。如果希望恢复图像的原来大小，可以单击【宽】和【高】文本框右边的【重置大小】按钮。(3)在【源文件】文本框中，可以指定图像文件的URL路径，如“wuliweizhi.JPG”。(4)在【低解析度源】文本框中可以指定在主图像被载入之前所载入的图像来源。一般选择和源文件一样的URL地址。(5)在【对齐】下拉列表中，可以设置在一行中图像和文本的对齐方式，这里为“左对齐”。,3.2.2 修改图像属性,(6)在【垂直边距】和【水平边距】文本框中，可以设置在图像垂直方向和水平方向上的空白间距。这里都设置为“5”。(7)在【边框】文本框中，可以设置图像边框的大小。在很多情况下添加图像的边框可能破坏图像的美观，所以一般设置为“0”。,图 3.30 图像的【属性】面板,3.2.3 加入背景图像,背景图像的加入可以使网页更加绚丽多彩，在Dreamweaver中加入的背景图像可以有两种附加样式：固定和滚动。这两种样式是在【CSS样式】面板中设置的。为页面添加背景图像的具体操作如下。(1)选择【窗口】|【CSS样式】命令，或者选择【设计】面板中的【CSS样式】选项卡，打开【CSS样式】面板。(2)在如图3.31所示的【CSS样式】面板中只有“未定义样式”，要添加新的样式，可以单击下面的【新建CSS样式】按钮，打开如图3.32所示的【新建CSS样式】对话框。选中【类(可应用于任何标签)】单选按钮，设置其名称为.bg，并选中下面的【仅对该文档】单选按钮。单击【确定】按钮打开如图3.33所示的【.bg的CSS样式定义】对话框。(3)在【.bg的CSS样式定义】对话框左边的【分类】列表框中选择【背景】选项，在这个对话框中可以设置【背景颜色】和【背景图像】的属性。(4)单击【浏览】按钮，从文件夹中选择一个图像文件作为当前页面的背景图像。(5)在【附件】下拉列表中有两个选项：【固定】和【滚动】，可以按照页面制作的要求选择。(6)单击【确定】按钮，在【样式】面板中将添加一个新的样式“.bg”样式，如 图3.34所示。(7)选中整个页面，并在【CSS样式】面板中右击“.bg”样式，弹出如图3.35所示对话框，选择【套用】命令就可将背景图像添加到页面中了。,3.2.3 加入背景图像,图 3.31【CSS样式】面板,图 3.32【新建CSS样式】对话框,3.2.3 加入背景图像,图 3.33 设置页面的背景属性,3.2.3 加入背景图像,图 3.34 添加新样式“.bg”,图 3.35 选择【套用】命令,3.3 映射图的应用,3.3.1 创建图像热点3.3.2 创建客户端映射图,3.3 映射图的应用,3.3.1 创建图像热点,利用文字作为超级链接的触发点，是网页上创建链接的主要方式。然而，千篇一律使用文字来创建超级连接，未免有些单调。Dreamweaver 8允许使用图像或图像中的某些区域来创建超级链接，确实为网页设计增色不少。也可不把整个图像设为链接，只是当鼠标移到图像的某些区域，显示一些提示信息或对图的注释。为了实现这一效果，就需要目标图像上创建热点。要在图像上创建热点，其具体操作如下。(1)单击目标图像，【属性】面板下方出现的热点工具，可以创建矩形、圆形或多边形热点。(2)在图像选定位置插入选定的热点形状，方法如下。选择圆形工具，并将鼠标指针拖至图像上，创建一个圆形热点。选择矩形工具，并将鼠标指针拖至图像上，创建一个矩形热点。选择多边形工具，在各个顶点上单击一下，定义一个不规则形状的热点。然后单击箭头工具封闭此形状。图3.37是插入矩形热点后的结果。,3.3.1 创建图像热点,图 3.37 插入矩形热点,3.3.1 创建图像热点,(3)热点区域创建完成后，选中热点区，打开属性检查器，对热点区进行设置，设置选项说明如下。【链接】：在该链接文本域中可输入一个被链接的文件名或页面，也可单击文件夹选择一个文件名或页面。这个页面是单击热区时所链接的页面。【目标】：要使被链接的文档显示其他地方而不是在当前窗口或框架，可在目标框中输入窗口名或从目标弹出菜单中选择一个框架名。【替换】：在该文本域中输入所定义的热区的代替文本。该文本在浏览器中，当用户的鼠标移到该热点区域中将显示该文本。可以对于不同部位的热区输入不同的文本。,3.3.2 创建客户端映射图,1.图像“映射”、“映射图”与“客户端映射图”“超链接”在网页设计中经常用到，用鼠标单击文字链接、图像链接，浏览器就可以指定到某个目标地址进行链接。对于图像链接，还有一种更灵活的方法，就是当你用鼠标指向页面中一幅较大图像中的不同部分时，鼠标所点的每一个部分都连接着一个页面，而且不同的部分其链接目标也不同，这项技术我们称之为“热点映射”或者简称为“映射”。它就是利用我们前面介绍的图像热点来设置的“链接”。“映射图”是指被分为多个区域(或称“热点”)的图像；当用户单击某个热点时，会触发某种操作(例如，打开一个新文件)。“映射图”又分为服务器端和客户端两种类型，其不同之处在于对鼠标在图像内单击后的处理方法。“客户端映射图”将超文本链接信息存储在 HTML 文档中，而不是像“服务器端映射图”那样，存储在单独的地图文件中。“客户端映射图”不需要与Web服务器交互，因为图像的坐标与其链接的网页已经传送到浏览器中，当单击图像的“热点”区域时，浏览器只是简单地查询与坐标对应的链接网址，这样就能减轻服务器处理“图像映射”的负担，并与服务器的类型无关。Netscape Navigator 2.0 及后续版本、NCSA Mosaic 2.1/3.0 以及 Internet Explorer 的所有版本都支持“客户端映射图”。Dreamweaver 支持在同一文档中同时使用“客户端映射图”和“服务器端映射图”。不过，同时支持这两种图像“映射”类型的浏览器赋予“客户端映射图”以优先权。若要在文档中包含“服务器端映射图”，必须编写相应的 HTML 代码。由于编写“服务器端映射图”的代码比较复杂，并且利用Dreamweaver 8提供的“客户端映射图”已经能够很好的实现“图像映射”，本书只介绍如何在Dreamweaver 8中创建“客户端映射图”。,3.3.2 创建客户端映射图,2.创建“客户端映射图”在最初用HTML语言来设计网页时，实现图像“映射”比较麻烦，它需要设计者能准确提供图像中需要实现“映射”功能的区域的位置信息，以便使用map标签命令来对指定位置的区域来建立超级链接。现在，我们可以使用Dreamweaver 8轻松完成“客户端映射图”的制作。“客户端映射图”的制作步骤如下。(1)单击目标图像，【属性】面板下方出现如图3.36所示的热点工具，可以创建矩形、圆形或多边形热点。(2)在【地图】文本框中为该“映射图”输入惟一的名称，如图3.38所示。(3)在“映射图”上创建完成所有热点区域后，选中热区，打开【属性】面板，设置好各个热点的属性，图3.39显示“客户端映射图”“hotmap”中的矩形热点链接到文件“train.htm”。,3.3.2 创建客户端映射图,图 3.38【属性】面板,3.3.2 创建客户端映射图,图 3.39“映射图”中矩形热点的链接,3.4 导航条的使用,3.4.1 插入导航条3.4.2 编辑导航条,3.4 导航条的使用,导航条，也称导航栏，是图像超链接在HTML文档中的又一种应用。导航条实际上是一系列显示为按钮的图像，每个图像按钮链接到站点中不同的文档上，通过单击图像按钮，就可以实现在站点中的浏览。同时，也可以为这些图像实现翻转效果，或为图像添加更多的动感特性，使网页更生动，如弹起状态和按下状态等。,3.4.1 插入导航条,导航条是由一幅图像(或一组图像)组成的，这些图像将根据用户的操作而改变显示内容。导航条是在站点页面和文件中移动的最简单方式。在使用【插入导航条】命令前，首先应该创建每个导航元素显示状态所对应的一组图像(将导航元素看作是按钮将比较有助于理解，因为它们被选中时也将把用户带到另外一个页面)。一个导航元素可以有4种状态。正常显示：该图像在用户尚未单击该导航元素或者未和该导航元素进行任何交互时显示。鼠标经过图像：当鼠标指针从正常显示图像经过时，该图像出现。导航元素的外观也随之改变(例如，变得更亮)以让用户知道可以和它进行交互。按下图像：该图像在导航元素被单击后出现。例如，当用户单击一个导航元素时，新页面加载并且同时仍然显示导航条，只是被单击的导航元素变暗以表明它已经被选取。按下鼠标时经过图像：导航元素被单击后将显示按下鼠标时图像，如果此时鼠标指针经过按下鼠标时图像上方，则显示该图像。例如，元素可能会变灰暗。用户可以使用这个状态告诉浏览者该元素已经不能再单击，因为正处在所链接的页面中了。,3.4.2 编辑导航条,为文档创建好导航条后，就可以使用编辑导航条的命令添加或删除其中的图像、修改一幅或一组图像、修改单击导航元素时关联的文件、选择打开文件的窗口或框架、重新排列图像等，还可以利用【行为】面板编辑导航条。1.常规编辑导航条要编辑导航条，其具体操作如下。(1)选择【修改】|【导航条】命令。这时会打开【修改导航条】对话框。(2)用类似插入导航条的方法设置【修改导航条】对话框中的各选项。2.利用【行为】面板编辑导航条使用设置导航条图像的高级功能，可以改变文档中基于当前按钮下的其他图像。在默认情况下，单击导航条中的元素时，所有导航条中的元素都会自动返回原来默认的状态。要设置被选中图像的上浮或下沉的不同效果，可使用导航条中的高级功能，具体操作如下。(1)选中需要设置高级属性的导航条，选择【标签】面板中的【行为】选项卡，在【行为】面板中用户可以看到如图3.43所示的导航条信息。,3.4.2 编辑导航条,(2)单击【行为】面板上的“”按钮，这时会弹出一个动作菜单，如图3.44所示。这些菜单是Dreamweaver中内置的动作菜单，在以后章节中将详细介绍这些菜单的作用和使用方法。(3)在动作菜单中选择【设置导航栏图像】命令，就会打开如图3.45所示的【设置导航栏图像】对话框。(4)该对话框中的【高级】选项卡如图3.46所示。在【当项目“main”显示：】的下拉列表框中，选择【鼠标经过图像或点击时鼠标经过图像】选项，则当鼠标经过图像时显示其上面的图像，有上浮或下沉的效果。(5)在【同时设置图像】列表框中选择要显示的图像。(6)在【按下时，变成图像文件】文本框中设置当鼠标按下时要显示的图像路径。(7)单击【确定】按钮，确定设置。,3.4.2 编辑导航条,图 3.43【行为】面板,图 3.44 在【动作】菜单中选择【设置导航栏图像】命令,3.4.2 编辑导航条,图 3.45【设置导航栏图像】对话框,3.4.2 编辑导航条,图 3.46 设置导航栏图像高级属性,3.5 创建与管理链接,3.5.1 创建各种链接3.5.2 Dreamweaver的管理链接特性3.5.3 设置站点缓存3.5.4 更新链接及链接范围3.5.5 测试链接,3.5 创建与管理链接,利用超链接可以实现在文档间或文档中的跳转。超链接由两个端点(也称锚)和一个方向构成。通常将开始位置的端点称作源端点(或源锚)，而将目标位置的端点称作目标端点(或目标锚)，链接就是由源端点指向目标端点的一种跳转。目标端点可以是任意网络资源，例如，它可以是一个页面、一幅图像、一段声音、一段程序，甚至也可以是页面中的某个位置。,3.5.1 创建各种链接,根据链接源端点的不同，可以将链接分为两种：超文本和超链接。超文本就是利用文本构建的超链接。在这种链接中，链接的源端点是文本。在浏览器中，超文本一般显示为下方带有下划线的文本，默认显示为蓝色。超链接是利用除了文本之外其他对象构建的链接。在这种链接中，源端点是除了文本之外的其他对象，如一幅图像或一个表单等。为了充分美化网页，利用图像构建超链接成为最常见的手段之一。为了明确链接路径，并能正确使用路径，下面简单介绍一下路径的概念和种类。每个页面都有一个惟一的地址，称为“统一资源定位器”(URL)。一般情况下，当用户创建本地链接时(链接所在文档和目标文档位于同一站点内)时，用户不需要指定链接目标文档的完整URL。作为代替，用户可以指定一个相对于当前文档或站点根目录的相对路径。下面分别介绍3种类型的链接路径。绝对路径如果在链接中使用完整的URL地址，这种链接路径就称作绝对路径。绝对路径的特点是：路径同链接的源端点无关。假设在站点中要创建指向如图3.47所示“science”目录中的computer.htm文档的链接，则可以使用如下的绝对路径：http:/。如果希望在文档中链接主页，在绝对路径中可以指定主页的名称，也可以不指定主页的名称，如http:/或http:/index.htm。,3.5.1 创建各种链接,图3.47 网上书库中“science”目录中的computer.htm,3.5.1 创建各种链接,相对路径为了避免绝对路径的缺陷，对于在本站点之中的链接来说，使用相对路径是一个很好的方法。相对路径可以表述源端点同目标端点之间的相互位置，它同源端点的位置密切相关。如果链接中源端点和目标端点位于一个目录下，则在链接路径中只需要指明目标端点的文档名就可以了。例如，在站点中，如果希望在如图3.47所示“science”目录的“computer.htm”文档中创建指向“computer”目录中“math.htm”文档的链接，可以使用如下的相对路径：math.htm。如果在链接中源端点和目标端点不位于同一个目录下，则只需要将目录的相对关系表达出来就可以了。如果链接指向的文档位于当前目录的子级目录中，可以直接输入目录名和文档名。例如，如果希望在“index.htm”文档中创建指向位于图3.47所示“science”目录中的“math.htm”文档的链接，可以使用如下的相对路径：science/math.htm。如果链接指向的文档没有位于当前目录的子级目录中，则可以利用“.”符号来表示当前位置的父级目录，利用多个“.”符号可以表示更高的父级目录，从而构建出目录的相对位置。例如，如果希望在“science”目录中的“math.htm”文档中创建指向位于网站根目录中的“index.htm”文档的链接，可以使用如下的相对路径：./index.htm。基于根目录的路径基于根目录的路径可以看作是绝对路径和相对路径之间的一种折中表示方式。在这种路径表达方式中，所有的路径都是从站点的根目录开始的，它同源端点的位置无关。通常用一个斜线“/”表示根目录，所有基于根目录的路径都从该斜线开始。假设在站点中要创建指向如图3.47所示“science”目录中的“computer.htm”文档的链接，则可以使用如下的基于根目录的路径：/science/computer.htm。如果希望在文档中链接主页，则必须指定主页的名称，如：/index.html。,3.5.1 创建各种链接,1.链接到文档最常见的链接是创建于文档之间的链接，利用这种链接，可以从一个文档跳转到另一个文档，如图3.48所示。通过Dreamweaver可以使用多种方式创建本地链接(在同一站点的文档间)。用户可以使用站点地图查看、创建、更改和删除链接或在文档窗口中使用【修改】菜单中的【创建链接】命令，选择链接指向的文件；也可以使用【属性】面板来链接文件，单击【浏览文件】图标选择文件，也可以使用【指向文件】图标选择文件或者直接输入文件路径。使用【属性】面板可以方便地为文本或图像添加链接。为这些元素创建链接的具体操作如下。(1)选中要作为链接的文本或图像等网页元素。(2)在【属性】面板的【链接】文本框中，输入链接的路径，即目标端点的URL。在这里我们为导航条“首页”输入相对路径：./index.html。(3)在【属性】面板的【目标】下拉列表框中，可以指定链接文档打开的框架，如 图3.49所示，其含义如下。,3.5.1 创建各种链接,图 3.48 文档之间的链接,3.5.2 Dreamweaver的管理链接特性,当用户在本地站点中移动或重命名文档时，Dreamweaver可以更新选定文档中或指向选定文档的链接。如果用户将整个站点(或站点的整个自包含部分)都存放在本地文件夹中时，该特性可以发挥最大的作用。但是Dreamweaver并不会对远程站点做任何修改，除非用户向远程服务器存入或取出文件。如果在一个本地站点对文档进行编辑，Dreamweaver会自动对站点中的链接进行管理。无论用户在本地站点对文档进行重命名操作，还是将文件在站点中移动，Dreamweaver都会自动维护文档中的链接，确保链接不被中断。,3.5.3 设置站点缓存,可以使用站点缓存使链接的更新操作更快捷、更准确。站点缓存是由Dreamweaver创建的缓存文件，其中存储本地站点中所有的链接信息。如果在定义站点的时候激活站点的缓存选项，则在本地站点中，通过Dreamweaver对站点中的文件进行添加、删除、移动、复制和重命名等操作时，缓存中会自动记录这些信息，并对链接进行更新。设置站点缓存的具体操作如下。(1)选择【站点】|【管理站点】命令，打开【管理站点】对话框。(2)从站点列表框中，选择要设置缓存的站点“NetBook”，然后单击【编辑】按钮，打开站点定义对话框来编辑站点。可以使用站点缓存使链接的更新操作更快捷、更准确。站点缓存是由Dreamweaver创建的缓存文件，其中存储本地站点中所有的链接信息。如果在定义站点的时候激活站点的缓存选项，则在本地站点中，通过Dreamweaver对站点中的文件进行添加、删除、移动、复制和重命名等操作时，缓存中会自动记录这些信息，并对链接进行更新。设置站点缓存的具体操作如下。(1)选择【站点】|【管理站点】命令，打开【管理站点】对话框。(2)从站点列表框中，选择要设置缓存的站点“NetBook”，然后单击【编辑】按钮，打开站点定义对话框来编辑站点。,3.5.4 更新链接及链接范围,当移动或重命名文件时，Dreamweaver会提示是否要对链接进行更新。用户可以设置Dreamweaver自动更新所有链接，这时会打开【更新文件】对话框，提示用户当前的操作需要更新的文件。单击【更新】按钮，则可更新链接。单击【不更新】按钮，则不更新链接。当移动或重命名文件时，Dreamweaver会提示是否要对链接进行更新。用户可以设置Dreamweaver自动更新所有链接，这时会打开【更新文件】对话框，提示用户当前的操作需要更新的文件。单击【更新】按钮，则可更新链接。单击【不更新】按钮，则不更新链接。(3)在【更改所有的链接】文本框中，会显示当前在站点窗口中选中的文件URL，可以对其中的地址进行修改，或单击右边的文件夹按钮，然后从文件夹中选择文件。(4)在【变成新链接】文本框中，可以输入修改后的链接地址，也可以单击右边的文件夹按钮，然后从文件夹中选择文件。(5)设置完毕，单击【确定】按钮，确定操作。这时Dreamweaver会对站点中的文档进行扫描，查找包含要替换链接的文档。如果找到了包含要替换链接的文档，会打开话框，提示用户更新其链接。(6)单击【更新】按钮，可更新链接；单击【不更新】按钮，则不更新链接；单击【确定】按钮，确定操作。,3.5.5 测试链接,所有链接都已经创建以后，用户需要对这些链接进行一系列的测试，以确保链接的正确和链接设置结果的显示正确。在文档窗口中是无法对链接进行测试的，也就是说，如果在文档中单击链接，并不会在浏览器中打开它所链接的文档。但用户可以利用Dreamweaver的预览功能测试链接，也可以在文档窗口中直接打开链接的文档进行编辑。如果希望对链接进行真正的测试，必须在浏览器中进行，用户可以选择【文件】|【在浏览器中预览】命令，然后再选择相应的浏览器；或者按F12键使用默认的浏览器打开文档。预览本书实例网页的示意图。这时鼠标单击“文学作品”导航条。,3.6 上 机 实 战,本节上机实战要求制作一个带有图片的网页。1.实战目的通过该实战训练学会在网页中插入图片的方法。2.实战步骤要制作一个带有图片和文本的网页，操作步骤如下。(1)在前面实例网站中添加一个名为“DW2004.htm”的网页文件，双击打开设计窗口。(2)设置好网页的页面属性之后，在文档中设置好插入点，插入想放置于网页中的图片，本实例制作一本书的简介网页，首先插入书的封面，设置其边框为0，垂直、水平边距均为5，结果如图3.66所示。(3)输入本书的前言，作为内容，结果如图3.67所示。(4)在文本属性中将“前言”设置为“黑体”、“居中对齐”，颜色为黑色，样式为标题2。将内容设置为“宋体”、“左对齐”，颜色为蓝色，字号大小为18，结果如图3.68所示。按照前面讲述的方法为文档设置背景图像，一个利用文本和图像创建的网页基本已经制作完成，我们可以在浏览器中预览网页的效果。保存文档后，按F12键在Internet Explorer中预览网页效果，如图3.69所示。3.实战总结本实战通过向制作一本书的介绍页面，让读者学会如何利用Dreamweaver制作带图片的网页，如果想把页面做得更丰富，还可以加入更多的网页元素。,3.6 上 机 实 战,图3.66 在页面中插入图片,3.6 上 机 实 战,图3.67 输入文本后的效果,3.6 上 机 实 战,图3.68 设置文本后的效果,3.6 上 机 实 战,图 3.69 预览页面效果,3.7 习 题,1 单项选择题 2 多项选择题 3 判断题 4 问答题,3.7 习 题_单项选择题,(1)激活【查看】中的 选项，可以在文档窗口中看到锚记。A代码 B切换视图C文件头内容 D不可见元素(2)如果希望将所有文档都保存，可以在任意一个Dreamwe