PART 1 实例入门篇

Chapter 01 准备工作与创建站点

1.1 相关知识介绍

虽然Dreamweaver 8 这款专业的 HTML 编辑器为用户提供了手工编写 HTML 代码和可视化编辑界面两种创作Web页的方式，使用户不需要掌握复杂的源代码语言就可开发出专业的网页，但是，作为网页制作者仍然需要了解相关的网络知识，否则无法充分感受Dreamweaver 8所带来的方便与快捷。

1.1.1 IP地址与域名

万维网上连接着数百万台计算机，如果想同某台计算机通信，就必须知道该机的地址。万维网是通过IP地址来标识网上每台计算机的，如同用房间号标识房间一样。IP地址由4个字节的数字组成，可以标识232台计算机。要让万维网用户记住计算机的IP地址实属不易，因此，人们给每台计算机赋予一个由英文字母和数字组成的主机名，这就是域名。由于计算机只识别IP地址，因此当用户使用域名时，万维网上的域名服务器还要将其解析为IP地址。

域名是分层的。顶级域分为两类，分别为地理和机构，如cn表示中国、jp表示日本、com表示商业机构、edu表示教育机构、net表示网络机构、org表示非赢利组织等。得到顶级域的管理权后，可以将其管理依次向下分为二级域和三级域，一般在三级域下是主机名。比如，通过域名www.sina.com.cn可以知道，要访问的计算机是sina.com.cn域下的www服务器。

1.1.2 本地计算机和Internet服务器

所谓Internet服务器是指提供Internet服务的计算机，它可提供WWW服务、FTP服务、E-mail服务等，我们现在谈的主要是WWW服务器。WWW服务器通常是指安装了Internet信息服务软件的计算机，它以客户机/服务器模式运行，主要用于存储浏览者所浏览的Web站点的页面及处理浏览者上传信息的服务器程序。常见的Web服务器软件包括Microsoft的IIS和PWS。

对于浏览网页的浏览者来说，他们使用的计算机被称为本地计算机。本地计算机和Internet服务器间通过拨号等多种方式进行连接，实现相互之间的通信。本地计算机的浏览者只需在浏览器软件的地址栏中输入WWW服务器的名称，就可轻松实现对网页的浏览。

1.1.3 浏览器

万维网（Web）的用户要想“阅读”网页中的信息，就必须安装浏览器。浏览器安装在客户端，是用来查看万维网中超文本的一种工具。常用的Web浏览器有Netscape 公司的Netscape Navigator和微软公司的Microsoft Internet Explorer（IE）。

虽然Netscape Navigator和Microsoft Internet Explorer是不同公司的浏览器软件，但界面和功能大致相同。Netscape浏览器界面如图1-1、图1-2所示，Microsoft浏览器界面如图1-3、图1-4所示。

下面介绍浏览器的界面。IE浏览器窗口包括标题栏、菜单栏、地址栏、常用工具栏和浏览区几个部分，如图1-5所示。其中，用户经常使用的是地址栏、常用工具栏和浏览区三个部分。

地址栏：通过在地址栏中输入URL地址，用户可以打开世界各地的网页。

常用工具栏：将常用的菜单命令以按钮的形式显示。用户通过单击按钮便可完成最基本的操作，如向前或向后翻页、刷新网页、打开默认主页、停止下载网页、打印网页等。

浏览区：显示用户正浏览的网页内容。

1.1.4 上传和下载

将资源从Internet服务器复制到本地计算机的过程称为下载。而将资源从本地计算机复制到Internet服务器的过程称为上传。

在日常生活中进行上传和下载的工作很多。比如，浏览网页的过程就是一个下载过程。当浏览者在浏览器上输入网址后，就将请求发送到WWW服务器。WWW服务器接到请求后，将网页下载到浏览者的本地计算机，这样，浏览者就可以看到要浏览的网页了。

除了下载信息外，我们还常将本地计算机资源上传到网上，让大家共享。文件的上传和下载可利用专用工具进行操作，如CUTEFTP等。Dreamweaver 8内置了强大的FTP功能，帮助用户实现站点文件的上传和下载。

1.1.5 超文本

超文本不同于普通文本，是一种使用户与计算机之间进行密切交流的文本显示技术。超文本技术是通过对有关词汇做链接，使用户轻松地在相关网页中查看信息的一种技术。通常超级链接的文本带有下划线或与其他文字的颜色不同，当用户将鼠标放到超文本上时，鼠标呈手形图案，文字的颜色也发生改变。当用户单击超文本后，文本的颜色会改变。

1.1.6 HTML与HTTP

在Web服务中，信息一般是使用HTML格式以超文本和超媒体方式传送的，所使用的Internet协议是HTTP协议。

HTML的全称是Hypertext Markup Language，即超文本标记语言，是用于WWW上文档的格式化语言。使用HTML语言可以创建超文本文档，该文档可以从一个平台移植到另一个平台。HTML文件是带有嵌入代码的ASCII文本文件，这种嵌入代码由标记表示，它用来表示格式化和超文本链接。HTML文件的内容通过一个页面展示出来，不同页面通过超链接关联起来。

HTTP的全称是Hypertext Transfer Protocol，即超文本传输协议。HTTP协议是用于访问WWW上信息的客户机/服务器协议。HTTP协议建立在TCP/IP协议的应用层之上，其实现过程一般包括：客户端与指定的服务器建立连接；由客户端提出请求并发送到服务器；服务器收到客户端的请求后，取得相关对象并发送到客户端；在客户端接受完对象后，关闭连接。

1.1.7 统一资源定位符

URL即统一资源定位符，是唯一一种能标识Internet上计算机、目录和文件位置的命名规则。URL通常也称为URL地址、网站地址或网址，其一般形式可以表示为：【方式】://【主机名】:【端口】/【目录】/.../【文件名】。

【方式】：指定访问该资源所使用的Internet协议，常用协议如下。

◎ http：超文本传输协议

◎ ftp：文件传输协议

◎ mailto：电子邮件地址

◎ news：网络新闻组

◎ telnet：远程登录服务

◎ file：本地文件

【主机名】：指定Web服务器的IP地址或域名地址。IP地址是唯一标识网络上某一主机的地址，它将计算机标识为一个32位地址，可以用带句点的十进制数来表示。域名地址也称为DNS地址，它由四个部分组成，常用形式为“机器名．单位名．单位类别．国别”。

【端口】：指定Web服务器在该主机上所使用的TCP端口，默认端口是80，通常不需要指定，只有当Web服务器不使用默认端口时才需要指定端口。

【目录】：可以是Web服务器上信息资源所在的目录。

【文件名】：由基本文件名和扩展名两部分组成，如index.htm等。

1.1.8 Web页与Web站点

Web页就是World Wide Web文档，通常称为网页。Web页一般由相关的文本、图像、声音、动画、视频以及脚本命令等组成，位于特定计算机的特定目录中，其位置可以根据URL确定。

一般的Web站点由一组相关的Web页和其他文件组成，这些文件存储在Web服务器上。当用户访问一个Web站点时，该站点中有一个页面总是被首先打开，该页面称为首页或主页。用户在浏览器中输入要浏览网页的URL地址，打开相应的Web页。

Web页的名称由用户任意命名，一般用表示网页功能的英文单词命名。每一个站点必须有一个主页，主页的名称规定为 index.htm、index.html、index.asp、default.asp、default.htm或default.html。用户在浏览器中浏览主页时，URL地址可以只写协议和Web服务器的名字，主页名可以忽略。比如，浏览新浪网的主页时，只要在浏览器的地址栏输入http://www.sina.com.cn，即可自动打开新浪网的首页。

1.1.9 静态网页与动态网页

静态网页是标准的HTML文件，其文件扩展名是．htm或．html。它可以包含HTML标记、文本、Java小程序、客户端脚本以及客户端ActiveX控件，但这种网页不包含任何服务器端脚本，该页中的每一行HTML代码都是在上传到Web服务器前由网页设计人员编写的，在上传到Web服务器后便不再发生任何更改，所以称之为静态网页。

静态网页可以包含翻转图像、GIF动画或FIash影片等，具有很强的动感效果。此处所说的静态网页是指在发送到浏览器时不再进行修改的Web页，其最终内容是由设计人员事先确定的。

静态网页的处理流程如图1-6所示。

（1）当用户单击Web页上的某个链接时，浏览器向Web服务器发送请求。

（2）Web服务器收到该请求后，通过文件扩展名．htm或．html判断出是HTML文件请求，并从磁盘或存储器中获取相关的HTML文件。

（3）Web服务器将HTML文件发送到浏览器，由浏览器对该HTML文件进行解读，并将结果显示在浏览器窗口中。

动态网页不是指网页上有动态的效果，而是指具有浏览者与后台服务器进行信息交互的能力以及自动更新网页中信息的能力。因此由网页设计人员编写，上传到Web服务器后可以被修改的网页，称为动态网页。动态网页的执行过程如图1-7所示。

（1） 浏览器向Web服务器发送一个请求，要求服务器上的某个动态网页对上传的数据进行处理。

（2） Web服务器收到该请求，运行动态网页中的应用程序。

（3） 若动态网页的命令需要对后台数据库进行操作，还要通过数据库驱动程序启动数据库。服务器通过数据库操作指令处理数据库。

（4） 服务器将处理结果以静态网页的方式下传到用户浏览器端。

（5） 用户端的浏览器对该静态网页进行解释，并将结果显示在浏览器窗口中。

动态网页与静态网页之间的区别在于：动态网页中的某些脚本只能在Web服务器上运行，而静态网页中的任何脚本都不能在Web服务器上运行；动态网页与静态网页文件扩展名不同，对于动态网页来说，其文件扩展名不再是．htm或．html，而是与所使用的Web应用开发技术有关，例如，使用ASP技术时文件扩展名是．asp等。

当Web服务器接收到对静态网页的请求时，服务器将该页发送到请求浏览器，而不进行进一步的处理；当Web服务器接收到对动态网页的请求时，它将做出不同的反应，首先将该页传递给一个称为应用程序服务器的特殊软件扩展，然后由这个特殊软件负责完成页。应用服务器软件与Web服务器软件通常在同一台计算机上安装、运行。使用不同的Web开发技术创建动态网页时，所用的应用程序服务器软件也是各不相同的。

1.2 网上安家

做网站的目的是希望其他用户能通过万维网查看自己发布的信息，因此，站点的所有网页制作完成后，就需要将其上传到Web服务器，即在万维网上安个“家”。这项工作可通过三种方式实现。

◎ 自行购买和建设服务器主机，然后向网络接入服务提供商申请连接Internet的专线和网址。但服务器主机和专线的租金很贵，一般的小公司和个人不使用此方法。

◎ 自行购买和建设服务器主机，但不租用专线，服务器放在网络接入服务提供商处托管，通过拨号、宽带等方式上网传送网站。目前大多数企业采用这种方式。

◎ 租用网络接入服务提供商提供的主机硬盘空间，由网络接入服务提供商负责硬件和技术人员的费用，以及连接Internet的专线月租。这是最简单的方式，一般小公司和个人用户多采用此方法。

1.3 Dreamweaver 8 的概述

Dreamweaver 8 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。无论用户喜欢手工编写 HTML 代码时的驾驭感，还是偏爱可视化的编辑环境， Dreamweaver 都会为用户提供众多功能强大的工具，使用户拥有更加完美的 Web 创作体验。特别是Dreamweaver 8无需用户掌握复杂的源代码语言，就可开发出专业的网络应用程序。

Dreamweaver 8具有如下特点：

◎ 简洁高效的设计和开发界面

◎ 增强的源代码编辑功能

◎ 动态数据库开发

1.3.1 简洁高效的设计和开发界面

Dreamweaver 8的操作环境简洁明快，可大大提高设计效率。

1．友善的开始页面

启动Dreamweaver 8后首先看到的画面是开始页面，如图1-8所示。供用户选择新建文件的类型，或打开已有的文档等。

对于老用户可能不需要开始页面，可执行菜单【编辑】→【首选参数】命令，弹出【首选参数】对话框，取消勾选【显示起始页】复选框，如图1-9所示。单击【确定】按钮完成设置。再次启动Dreamweaver 8，将不再显示开始页面。

2．不同风格的界面

Dreamweaver 8的操作界面新颖淡雅，布局紧凑，为用户提供了一个轻松、愉悦的开发环境。

第一次运行Dreamweaver 8，会弹出如图1-10所示的对话框，让用户选择操作界面的风格。用户可选择【设计器】单选项，选择设计风格。以后再运行Dreamweaver 8，将使用此风格的界面。

若用户想修改操作界面的风格，切换到自己熟悉的开发环境，可执行菜单【窗口】→【工作区布局】命令，弹出其子菜单，如图1-11所示。在子菜单中执行【编码器】或【设计器】命令，选择一种界面风格，页面会发生相应的改变。

3．伸缩自如的功能面板

在文档编辑窗口的右侧和下方与面板交界的框线中央各有一个箭头，单击箭头便可隐藏或展开面板，如图1-12所示。

如果用户觉得工作区不够大，可以将鼠标放在文档编辑窗口右侧与面板交界的框线处，当鼠标光标呈双向箭头时，拖动鼠标调整工作区的大小，如图1-13所示。若用户需要更大的工作区，可以将面板隐藏。

4．多文档的编辑界面

Dreamweaver 8提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换，如图1-14所示。用户可以单击文档编辑窗口上方的标签，切换到相应的文档中。通过多文档的编辑界面，用户可以同时编辑多个文档。

5．新颖的插入控制面板

Dreamweaver 8的【插入】面板在菜单栏的下方，如图1-15所示。

【插入】面板包括常用、布局、表单、文本、HTML、应用程序、FIash元素、收藏夹八个标签，不同功能的按钮分门别类地放在不同的标签中。在Dreamweaver 8中，【插入】面板可按菜单和标签两种方式显示。如果需要菜单样式，可用鼠标右键单击【插入】面板的标签，在弹出的菜单中执行【显示为菜单】命令，如图1-16所示，更改后效果如图1-17所示。如果需要标签样式，可单击【常用】按钮上的黑色三角形，在下拉菜单中执行【显示为制表符】命令，如图1-18所示，更改后效果如图1-19所示。

【插入】面板中将一些相关的按钮组合成菜单，当按钮右侧有黑色箭头时，表示其为展开式菜单，如图1-20所示。

用户可将自己常用的按钮定义在【插入】面板中的【收藏夹】分类中。定义【收藏夹】分类中按钮的操作步骤如下。

（1）选择【插入】面板中的【收藏夹】分类，用鼠标右键单击面板，在弹出的菜单中执行【自定义收藏夹】命令，如图1-21所示。

（2）弹出【自定义收藏夹对象】对话框。在【可用对象】栏中选择标签类别，然后单击【添加】按钮 ，将所选的对象添加到【收藏夹对象】栏中。按照相同的方法可以添加多个对象到【收藏夹对象】栏中，如图1-22所示。

（3）设置完成后单击【确定】按钮，返回【插入】面板。【收藏夹】分类的显示效果如图1-23所示。

6．更完整的CSS功能

传统的HTML所提供的样式及排版功能非常有限，因此，现在复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂，需要一种工具软件对复杂的CSS源代码进行整理，并适时地提供辅助说明。Dreamweaver 8提供了方便有效的CSS功能。

【属性】控制面板提供了CSS功能。通过【属性】控制面板中【样式】选项的下拉列表，对所选的对象应用样式或创建和编辑样式，如图1-24所示。若某些文字应用了自定义样式，当用户调整这些文字的属性时会自动生成新的CSS样式。

【页面属性】按钮也提供了CSS功能。单击【页面属性】按钮，弹出【页面属性】对话框，如图1-25所示。可以在【下划线样式】选项的下拉列表中设置超链接的样式，这个设置会自动转化成CSS样式，如图1-26所示。

Dreamweaver 8除了提供如图1-27所示的【CSS样式】控制面板外，还提供如图1-28所示的【CSS属性】控制面板。【CSS属性】控制面板可使用户轻松查看规则的属性设置，并可快速修改嵌入在当前文档或通过附加的样式表链接的CSS 样式。可编辑的网格使用户可以更改显示的属性值，对选择所作的更改都将立即应用，用户可以在操作的同时预览效果。

1.3.2 增强的源代码编辑功能

由于网络的广泛应用，Dreamweaver 8将数据库技术和网站技术有机地整合在一起。如果用户只是用于一般的网页美术设计，代码编辑功能不是很重要，但如果用户是程序设计师，需要开发动态网站，那么源代码和程序代码的编辑就显得非常重要。

1．源代码的显示与查找

在程序代码视图中，选择一段源代码后单击鼠标右键，在弹出的菜单中执行【所选区域】命令，在弹出的子菜单中可以看到新的菜单命令，包括代码的缩进显示、大小写的转换等，如图1-29所示。

为了方便程序员修改代码，Dreamweaver 8提供了查找与替换功能，让用户在代码中轻松查找和替换要修改的字符串。例如，将代码中所有名为“style”的CSS样式替换成名为“style2”的CSS样式，如图1-30所示。

2．学习使用代码

Dreamweaver 8的【参考】控制面板为用户提供了标记语言、编程语言和 CSS 样式的快速参考工具，如图1-31所示。

3．查看和编辑代码的工具

Dreamweaver 8提供【标签选择器】、【标签编辑器】、【标签检查器】和【代码片段】控制面板帮助用户查看和编辑代码。

在【代码】视图中单击鼠标右键，在弹出的菜单中执行【插入标签】命令，弹出【标签选择器】控制面板，如图1-32所示。

使用【标签编辑器】控制面板，可以直接对代码标签进行编辑。在【代码】视图中单击鼠标右键，在弹出的菜单中执行【编辑标签】命令，弹出【标签编辑器】对话框。例如在代码“meta”上单击鼠标右键，即弹出如图1-33所示的对话框。

利用【标签检查器】控制面板可以修改对象的属性。执行菜单【窗口】→【标签检查器】命令，启用【标签】控制面板，如图1-34所示。

Dreamweaver 8提供了丰富的系统自带代码片断，可直接应用于文档中，提高代码编辑的效率。执行菜单【窗口】→【代码片断】命令，弹出【代码片断】控制面板，如图1-35所示。

用户可以将自己编写的代码打包，以备今后使用。单击【文档】工具栏的【代码】按钮 ，切换到【代码】视图。单击【代码片断】控制面板下方的【新建代码片断文件夹】按钮 ，创建一个新的文件夹，用以保存新建的代码片断。然后选择要打包的备用代码，启用【代码片断】对话框，输入代码的名称和描述信息，选择代码片断类型和预览类型，单击【确定】按钮完成设置，效果如图1-36所示。

【代码片断】对话框如图1-37所示，启用【代码片断】对话框有以下几种方法。

◎ 用鼠标右键单击选定的代码，在弹出的菜单中执行【创建新代码片断】命令。

◎ 单击【代码片断】控制面板下方的【新建代码片断】按钮 创建新的代码片断。

【名称】选项：可以在文本框中输入代码片断的名称。代码片断名称不能包含斜线（/ 或 \）、特殊字符或双引号等无效的字符。

【描述】选项：为可选项，在文本框中输入代码片断的描述性文字。描述性文字可以使其他小组成员更易于使用代码片断。

【代码片断类型】选项组：包含【环绕选定内容】和【插入块】两个单选项。如果选择【环绕选定内容】单选项，则将代码添加到【前插入】或【后插入】文本框中。【前插入】文本框表示在当前选定内容之前输入或粘贴需要插入的代码，【后插入】文本框表示在当前选定内容之后输入或粘贴需要插入的代码；如果选择【插入块】单选项，则通过输入或粘贴用户的代码来插入。

【预览类型】选项组：包含【设计】和【代码】两个单选项。

1.3.3 动态数据库开发

Dreamweaver 8在开发动态数据库网站方面并没有太大的变化，它提供的服务器行为支持ColdFusion、ASP、ASP.NET、JSP 和 PHP 文档类型，在ASP.NET和ColdFusion方面做了改进，重要的服务器行为方面并没有变化。

1．在ASP.NET的支持方面加强的功能

◎ 支持最新的ASP.NET 1.1版本。

◎ 使用．NET的核心技术，加快了ASP.NET的DataSets、DataGrids、DataLists对象对复杂数据的显示和处理速度。

◎ 支持自定义标签。

2．在JSP的支持方面加强的功能

◎ 支持JSP标签库。

◎ 完整地整合JavaBean，在服务器行为控制面板可以显示JavaBean所有的方法和属性。

3．在ColdFusion的支持方面加强的功能

◎ 支持最新的ColdFusion 6.1版本。

◎ 支持实时服务器除错。

◎ 内建ColdFusion MX Developer，支援ColdFusion Component。

◎ 最佳的ColdFusion工作流程，包括程序代码片段的快捷键、无间断的文档编辑和自动检查。

1.3.4 新增功能

Dreamweaver 8的新增功能如下：

◎ 缩放工具和辅助线

◎ 可视化 XML 数据绑定

◎ 新的 CSS 样式面板

◎ CSS 布局的可视化

◎ 代码折叠

◎ “编码”工具栏

◎ 后台文件传输

◎ “插入 FIash 视频”命令

1.4 Dreamweaver 8的工作界面

Dreamweaver 8的工作区将多个文档集中到一个窗口中，不仅降低了系统资源的占用，还可以更加方便地操作文档。Dreamweaver 8的工作窗口由五部分组成，分别是【插入】控制面板、【文档】工具栏、【文档】窗口、控制面板组和【属性】控制面板，如图1-38所示。

1.4.1 插入面板

【插入】面板包含用于将各种类型的网页元素插入到文档中的按钮，如图像按钮、表格按钮和层按钮等。每个按钮都是一段 HTML 代码，允许用户在插入时设置不同的属性。【插入】面板如图1-39所示。

1.4.2 文档工具栏

【文档】工具栏包含提供各种文档窗口视图的按钮，如【代码】视图按钮 、【拆分】视图按钮 和【设计】视图按钮 。还包含各种查看按钮和一些常用操作按钮，如【在浏览器中预览/调试】按钮 等，如图1-40所示。

1.4.3 文档窗口

【文档】窗口显示用户当前创建和编辑的文档内容，如图1-41所示。

1.4.4 控制面板组

控制面板组是分组在某个标题下面的相关控制面板的集合。若要展开一个控制面板组，可以单击组名称左侧的展开箭头 ，还可以从【窗口】菜单中选择要展开的面板组或面板。若要取消停靠一个控制面板组，可以拖动该组标题条左侧的手柄，如图1-42所示。

1.4.5 属性控制面板

【属性】控制面板又称为属性检查器，用于查看和更改所选网页元素或文本的各种属性，如图1-43所示。每种网页元素具有不同的属性，因此【属性】控制面板中显示的内容会因所选对象的不同而变化。

1.5 创建网站框架

所谓站点，可以看作是一系列文档的组合，这些文档通过各种链接建立逻辑关联。用户在建立网站前必须要建立站点，修改某网页内容时，也必须打开站点，然后修改站点内的网页。在Dreamweaver 中，站点一词是下列任意一项的简称。

◎ Web 站点：从访问者的角度来看，Web 站点是一组位于服务器上的网页，使用 Web 浏览器访问该站点的访问者可以对其进行浏览。

◎ 远程站点：从创作者的角度来看，远程站点服务器上组成 Web 站点的文件。

◎ 本地站点：与远程站点上的文件对应的本地磁盘上的文件。通常，先在本地磁盘上编辑文件，然后将它们上传到远程站点服务器上。

◎ Dreamweaver 站点定义：本地站点的一组定义特性，以及有关本地站点和远程站点对应方式的信息。

在做任何工作之前应该制定工作计划并画出工作流程，建立网站也是如此。在动手建立站点之前，需要先调查研究，记录客户所需的服务，然后以此规划出网站的功能结构图（即设计草图）及其设计风格以体现站点的主题。另外，还要规划站点导航系统，避免浏览者在网页上迷失方向，找不到要浏览的内容。

1.5.1 站点管理器

站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点以及导入或导出站点。若要管理站点，必须打开【管理站点】对话框。

启用【管理站点】对话框有以下几种方法。

◎ 执行菜单【站点】→【管理站点】命令。

◎ 执行菜单【窗口】→【文件】命令，启用【文件】控制面板，选中【文件】选项卡，如图1-44所示。单击控制面板左侧的下拉列表，执行【管理站点】命令，如图1-45所示。

在【管理站点】对话框中，通过【新建】、【编辑】、【复制】和【删除】按钮，可以新建一个站点、修改选择的站点、复制选择的站点、删除选择的站点。通过对话框的【导出】、【导入】按钮，可以将站点导出为 XML 文件，然后再将其导入到 Dreamweaver。这样，用户就可以在不同的计算机和产品版本之间移动站点，或者与其他用户共享，如图1-46所示。

在【管理站点】对话框中，选择一个具体的站点，然后单击【完成】按钮，就会在【文件】控制面板的【文件】选项卡中出现站点管理器的缩略图。单击面板右侧的【展开以显示本地和远端站点】按钮 ，展开站点管理器，如图1-47所示。再单击按钮 ，又回到站点管理器的缩略图。

站点管理器由四部分组成，每部分的主要功能如下。

下拉菜单：包括对站点进行管理的所有命令。

工具栏：包括查看远程站点、测试服务器站点、站点地图，刷新站点，在本地机和远程服务器间上传或下载站点，在本地机和远程服务器间存回或取出文件，连接到远端的Web服务器主机，选择和修改所有站点等功能。

左侧窗口：显示站点地图或远程站点与测试服务器站点的文件。

右侧窗口：显示本地机所定义的站点文件和文件夹。

1.5.2 创建文件夹

建立站点前，要先在站点管理器中规划站点文件夹。

新建文件夹的具体操作步骤如下。

（1）在站点管理器的右侧窗口中单击选择站点。

（2）通过以下几种方法新建文件夹。

◎ 执行菜单【文件】→【新建文件夹】命令。

◎ 用鼠标右键单击站点，在弹出的菜单中执行【新建文件夹】命令。

（3）输入新文件夹的名称。

一般情况下，若站点不复杂，可直接将网页存放在站点的根目录下，并在站点根目录中，按照资源的种类建立不同的文件夹存放不同的资源。例如，image文件夹存放站点中的图像文件，media文件夹存放站点的多媒体文件等。若站点复杂，需要根据实现不同功能的板块，在站点根目录中，按板块创建子文件夹存放不同的网页，这样可以方便网站设计者修改网站。

1.5.3 定义新站点

建立好站点文件夹后就可定义新站点了。在Dreamweaver 8中，站点通常包含两部分，本地站点和远程站点。本地站点是本地计算机上的一组文件，远程站点是远程 Web 服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点，使公众可以访问它们。在Dreamweaver中创建 Web站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再将这些网页的副本上传到一个远程Web 服务器，使公众可以访问它们。本节只介绍如何创建本地站点。

1．创建本地站点的步骤

（1）执行菜单【站点】→【管理站点】命令，启用【管理站点】对话框，如图1-48所示。

（2）在对话框中单击【新建】按钮，在弹出的菜单中执行菜单【站点】命令，弹出【未命名站1的站点定义为】对话框。在对话框中，通过【基本】选项卡建立不同的站点。对于熟练的设计者而言，通常在对话框【高级】选项卡的【本地信息】分类中，根据需要设置站点。如图1-49所示。

2．本地站点主要选项的作用

【本地信息】选项：表示定义或修改本地站点。

【站点名称】选项：在文本框中输入用户自定的站点名称。

【本地根文件夹】选项：在文本框中输入本地磁盘中存储站点文件、模板和库项目的文件夹的名称，或者单击文件夹图标 查找到该文件夹。

【自动刷新本地文件列表】选项：指定每次将文件复制到本地站点时，Dreamweaver 是否自动刷新本地文件列表。若没有勾选此复选框，则将文件复制到本地站点时不会自动刷新本地文件列表，但可通过单击【文档】工具栏中的【刷新设计视图】按钮手动刷新面板。

【默认图像文件夹】选项：在文本框中输入此站点的默认图像文件夹的路径，或者单击文件夹图标 查找到该文件夹。例如，将非站点图像添加到网页中时，图像会自动添加到当前站点的默认图像文件夹中。

【区分大小写的链接】选项：勾选此复选框，则使用区分大小写的链接进行检查。

【启用缓存】选项：指定是否创建本地缓存以提高链接和站点管理任务的速度。若勾选此复选框，则创建本地缓存。

1.5.4 创建和保存网页

创建站点后，需要创建网页来组织要展示的内容。合理的网页名称非常重要，一般网页文件名称应容易理解，能反映网页的内容。

在网站中有一个特殊的网页是首页，每个网站必须有一个首页。每当在IE浏览器的地址栏中输入网站地址，如在IE浏览器的地址栏中输入www.sina.com.cn时会自动打开新浪网的首页。一般情况下，首页的文件名为index.htm、index.html、index.asp、default.asp、default.htm或default.html。

在标准的Dreamweaver环境下，建立和保存网页的操作步骤如下。

（1）执行菜单【文件】→【新建】命令，启用【新建文档】对话框。此时，【常规】选项卡已被选定，在【类别】选项框中选择【基本页】选项，在【基本页】选项框中选择【HTML】选项，创建空白网页，设置如图1-50所示。

（2）设置完成后，单击【创建】按钮，弹出【文档】窗口，新文档在该窗口中打开。根据需要在【文档】窗口中选择不同的视图设计网页，如图1-51所示。

【文档】窗口中有三种视图方式，三种视图方式的作用如下。

【代码】视图：对于有编程经验的网页设计用户，可在【代码】视图中查看、修改和编写网页代码，以实现特殊的网页效果，【代码】视图的效果如图1-52所示。

【设计】视图：以所见即所得的方式显示所有网页元素，【设计】视图的效果如图1-53所示。

【拆分】视图：将文档窗口分为上下两部分，上部分是代码部分，显示代码；下部分是设计部分，显示网页元素及其在页面中的布局。在此视图中，网页设计用户通过在设计部分单击网页元素的方式，快速地定位到要修改的网页元素代码的位置，进行代码的修改，或在【属性】面板中修改网页元素的属性。【拆分】视图的效果如图1-54所示。

（3）设计完成后，执行菜单【文件】→【保存】命令，弹出【另存为】对话框。在【文件名】选项的文本框中输入网页的名称，如图1-55所示，单击【保存】按钮，将该文档保存在站点文件夹中。

1.5.5 在站点地图中创建网页

在站点地图中，各网页文件间的链接关系以树状的形式显示出来。站点地图是理想的站点结构布局工具，利用它用户可以快速地设置整个站点结构，然后创建站点地图的图形图像。但是，站点地图仅适用于本地站点。对于远程站点，必须将其站点内容复制到本地磁盘上的一个文件夹中，并设置为本地站点后才能查看和使用站点地图。站点地图的界面如图1-56所示。

在站点地图中，可以选择网页、打开网页进行编辑、向站点添加新页、创建文件之间的链接以及更改网页标题等操作。

在站点地图中新建网页的具体操作步骤如下。

（1）在站点地图中用鼠标右键单击主页或主页下的某个网页文件，在弹出的菜单中执行【链接到新文件】命令，如图1-57所示。

（2）在打开的【链接到新文件】对话框中填写新文件的名称、新文件的标题以及原文件的链接文字信息，如图1-58所示。

（3）单击【确定】按钮，关闭【链接到新文件】对话框。【站点管理器】文件列表窗口会自动添加一个链接到jieshao.html的空白网页Iianxi.html，如图1-59所示。

（4）打开网页jieshao.html，会看到文件中有一个链接到Iianxi.html网页的链接文字“联系我们”，如图1-60所示。

（5）如果想改变新文件Iianxi.html在站点中的位置，还可以在【站点管理器】文件列表窗口中，按住鼠标左键将Iianxi.html拖动到其他的文件夹中。如图1-61所示，将Iianxi.html拖动到“tupian”文件夹中。

这时，系统会弹出【更新文件】对话框，询问是否更新文件中的链接，如图1-62所示。单击【更新】按钮，完成链接更新。

1.5.6 在文件列表中创建网页

除了可以在站点地图中新建网页外，还可以在文件列表窗口中新建网页，具体操作步骤如下。

（1）在文件列表窗口的“tupian”文件夹上单击鼠标右键，在弹出的快捷菜单中执行【新建文件】命令，在“tupian”文件夹内添加一个新网页，将其命名为“fengjing.html”，如图1-63所示。

（2）在站点地图中，用鼠标右键单击jieshao.html文件，在弹出的菜单中执行【链接到已有文件】命令，如图1-64所示。

（3）弹出【选定HTML文件】对话框，在对话框中选择刚建立的fengjing.html文件，如图1-65所示，单击【确定】按钮，将其与jieshao.html文件链接，效果如图1-66所示。

完成操作后， jieshao.html文件中出现一个与fengjing.html文件链接的链接文本，如图1-67所示。

步骤（2）中建立的链接还可以在站点地图中实现。在站点地图中，将鼠标放在jieshao.html文件的【链接】图标 上，按住鼠标左键拖曳图标到右侧文件列表的fengjing.html文件中，如图1-68所示。

完成操作后，将jieshao.html文件与fengjing.html文件建立链接。在jieshao.html文件中，同样会出现如图1-67所示的链接文本。

1.6 管理站点文件和文件夹

前面介绍了在站点文件夹列表中创建文件和文件夹的方法。当站点结构发生变化时，还需要对站点文件和文件夹进行移动和重命名等操作。下面介绍如何在【文件】控制面板中的站点文件夹列表中对站点文件和文件夹进行管理。

1.6.1 重命名文件和文件夹

修改文件或文件夹名称的具体操作步骤如下。

（1）执行菜单【窗口】→【文件】命令，启用【文件】控制面板，在其中选择要重命名的文件或文件夹。

（2）通过以下几种方法激活文件或文件夹的名称。

◎ 单击文件名，稍停片刻，再次单击文件名。

◎ 用鼠标右键单击文件或文件夹图标，在弹出的菜单中执行【编辑】→【重命名】命令。

（3）输入新名称，按【Enter】键。

1.6.2 移动文件和文件夹

移动文件或文件夹的具体操作步骤如下。

（1）执行菜单【窗口】→【文件】命令，启用【文件】控制面板，在其中选择要移动的文件或文件夹。

（2）通过以下几种方法移动文件或文件夹。

◎ 复制该文件或文件夹，然后粘贴在新位置。

◎ 将该文件或文件夹直接拖曳到新位置。

（3）【文件】控制面板会自动刷新，可以看到该文件或文件夹在新位置上。

1.6.3 删除文件和文件夹

删除文件或文件夹有以下几种方法。

◎ 执行菜单【窗口】→【文件】命令，启用【文件】控制面板，在其中选择要删除的文件或文件夹，按【Delete】键进行删除。

◎ 用鼠标右键单击要删除的文件或文件夹，从弹出的菜单中执行【编辑】→【删除】命令。

1.7 管理站点

在建立站点后，可以对站点进行打开、修改、复制、删除、导入、导出等操作。

1.7.1 打开站点

当要修改某个网站的内容时，首先要打开站点。打开站点就是在各站点间进行切换，打开站点的具体操作步骤如下。

（1）启动Dreamweaver 8。

（2）执行菜单【窗口】→【文件】命令，启用【文件】控制面板。在其中选择要打开的站点名，如图1-69所示。打开后的站点，如图1-70所示。

1.7.2 编辑站点

有时用户需要修改站点的某些设置，就需要编辑站点。例如，修改站点默认的图像文件夹路径，其具体的操作步骤如下。

（1）执行菜单【站点】→【管理站点】命令，启用【管理站点】对话框。

（2）在对话框中，选择要编辑的站点名，单击【编辑】按钮，弹出【站点定义为】对话框。根据需要进行修改，如图1-71所示，设置完成，单击【确定】按钮回到【管理站点】对话框。

（3）如果不需要修改其他站点，可单击【完成】按钮关闭【管理站点】对话框。

1.7.3 复制站点

复制站点可省去重复建立多个结构相同站点的操作，从而提高工作效率。在【管理站点】对话框中可以复制站点，其具体操作步骤如下。

（1）在【管理站点】对话框左侧的站点列表中选择要复制的站点，单击【复制】按钮进行复制。

（2）用鼠标双击新复制的站点，弹出的【站点定义为】对话框中更改新站点的名称。

1.7.4 删除站点

删除站点只是删除Dreamweaver同本地站点间的关系，而本地站点包含的文件和文件夹仍然保存在磁盘原来的位置上。换句话说，删除站点后，虽然站点文件夹保存在计算机中，但在Dreamweaver中已经不存在此站点。例如，按下列步骤删除站点后，该站点的名称在【管理站点】对话框中就不存在了。

在【管理站点】对话框中删除站点的具体操作步骤如下。

（1）在【管理站点】对话框左侧的站点列表中选择要删除的站点。

（2）单击【删除】按钮即可删除选择的站点。

1.7.5 导入和导出站点

如果在计算机之间移动站点，或者与其他用户共同设计站点，可通过 Dreamweaver的导入和导出站点功能实现。导出站点功能是将站点导出为．ste文件，然后在其他计算机上将其导入到Dreamweaver中。

1．导出站点

（1）执行菜单【站点】→【管理站点】命令，启用【管理站点】对话框。在对话框中，选择要导出的站点，单击【导出】按钮，弹出【导出站点】对话框。

（2）在该对话框中浏览并选择保存该站点的路径，如图1-72所示。单击【保存】按钮，保存扩展名为．ste的文件。

（3）单击【完成】按钮，关闭【管理站点】对话框，完成导出站点的设置。

2．导入站点

（1）执行菜单【站点】→【管理站点】命令，启用【管理站点】对话框。

（2）在对话框中，单击【导入】按钮，弹出【导入站点】对话框，浏览并选定要导入的站点，如图1-73所示。单击【打开】按钮，站点被导入，如图1-74所示。

（3）单击【完成】按钮，关闭【管理站点】对话框，完成导入站点的设置。

1.8 设置页面属性

1.8.1设置网页的标题

HTML 页面的标题可以帮助站点浏览者理解所查看网页的内容，并在浏览者的历史记录和书签列表中标识页面。文档的文件名是通过保存文件命令保存的网页文件，而页面标题是浏览者浏览网页时浏览器标题栏中显示的信息。

更改页面标题的具体操作步骤如下。

（1）执行菜单【修改】→【页面属性】命令，启用【页面属性】对话框。

（2）在对话框的【分类】选项框中，选中【标题/编码】选项。在对话框右侧【标题】选项的文本框中，输入页面标题，如图1-75所示，单击【确定】按钮，完成设置。

1.8.2 设置网页的默认格式

当制作新网页时，页面都有一些默认的属性，比如网页的标题、网页边界、文字编码、文字颜色、超链接的颜色等。若修改网页的页面属性，可执行菜单【修改】→【页面属性】命令，启用【页面属性】对话框，如图1-76所示。对话框中各选项的作用如下。

【外观】选项组：设置网页背景色、背景图像、网页文字的字体、字号、颜色和网页边界。

【链接】选项组：设置链接文字的格式。

【标题】选项组：为标题1至标题6指定标题标签的字号和颜色。

【标题/编码】选项组：设置网页的标题和网页的文字编码。一般情况下，将网页的文字编码设定为简体中文（GB2312）编码。

【跟踪图像】选项组：一般在复制网页时，若想使原网页的图像作为复制网页的参考图像，可使用跟踪图像的方式实现。跟踪图像仅作为复制网页的设计参考图像，在浏览器中并不显示出来。

1.9 网页文件头设置

网页的所有元素都由HTML代码标记表示，一个完整的HTML网页文件包含head和body两个部分，如图1-77所示。其中head部分包含许多在网页中不可见的头信息，例如语言编码、搜索关键字、版权声明、作者信息、网页描述等，均在meta标签内。body部分包含的则是网页中可见的内容。

在Dreamweaver 8中，网页文件头信息大部分都可在meta标签中设置。执行菜单【插入】→【HTML】→【文件头标签】→【Meta】命令，启用【META】对话框，如图1-78所示。

对话框中各选项的作用如下。

【属性】选项：包括“名称”和“HTTP-equivalent”两个选项。设定关键字、描述信息时可选择“名称”选项；设定定时刷新网页时，选择“HTTP-equivalent”选项。

【值】选项：表示meta标签的信息类型。有些值是已经定义好的，如关键字的值为keywords，刷新的值为refresh等。

【内容】选项：表示meta标签的实际信息。如设置关键字时输入具体的关键字信息，设置网页的刷新间隔时输入具体的时间。

下面介绍如何设置网页的文件头信息，以及它们所起的作用。

1.9.1 插入搜索关键字

在WWW上通过搜索引擎查找资料时，搜索引擎自动读取网页中meta标签的内容。所以网页中的搜索关键字非常重要，它可以间接地宣传网站，提高访问量。但搜索关键字并不是字数越多越好，因为有些搜索引擎限制索引的关键字或字符的数目，当超过了限制的数目时，它将忽略所有的关键字，所以最好只使用几个精选的关键字。一般情况下，关键字是对网页的主题、内容、风格或作者等内容的概括。

设置网页搜索关键字的具体操作步骤如下。

（1）选中文档窗口中的【代码】视图，将鼠标光标放在<head>标签中，执行菜单【插入】→【HTML】→【文件头标签】→【关键字】命令，启用【关键字】对话框，如图1-79所示。

（2）在【关键字】对话框中输入相应的中文或英文关键字，但注意关键字间要用半角的逗号分隔。例如，设定关键字为“浏览”时，【关键字】对话框的设置如图1-80所示，单击【确定】按钮，完成设置。

（3）此时，观察【代码】视图，发现<head>标签内多了下述代码。

<meta name="keywords" content="浏览" />

同样，还可以通过meta标签实现设置搜索关键字，具体操作步骤如下。

执行菜单【插入】→【HTML】→【文件头标签】→【Meta】命令，启用【META】对话框。在【属性】选项的下拉列表中选择“名称”，在【值】选项的文本框中输入“keywords”，在【内容】选项的文本框中输入关键字信息，如图1-81所示。设置完成后，单击【确定】按钮，在【代码】视图中可查看相应的html标记。

1.9.2 插入作者和版权信息

要设置网页的作者和版权信息，可执行菜单【插入】→【HTML】→【文件头标签】→【Meta】命令，启用【META】对话框。在【值】选项的文本框中输入“/x.Copyright”，在【内容】选项的文本框中输入作者名称和版权信息，如图1-82所示，设置完成后单击【确定】按钮。

此时，在【代码】视图中的<head>标签内可以查看相应的html标记。

<meta name="/x.Copyright" content="作者：汪庆洋 版权归 齐市一中所有" />

1.9.3 设置刷新时间

要指定载入页面刷新或者转到其他页面的时间，可设置文件头部的刷新时间项，具体操作步骤如下。

（1）选中文档窗口中的【代码】视图，将鼠标光标放在<head>标签中，执行菜单【插入】→【HTML】→【文件头标签】→【刷新】命令，启用【刷新】对话框，如图1-83所示。

【刷新】对话框中各选项的作用如下。

【延迟】选项：设置浏览器刷新页面之前需要等待的时间，以秒为单位。若要浏览器在完成载入后立即刷新页面，则在文本框中输入“ 0”。

【操作】选项组：指定在规定的延迟时间后，浏览器是转到另一个 URL 还是刷新当前页面。若要打开另一个 URL 而不刷新当前页面，应单击【浏览】按钮，选择要载入的页面。

如果想显示在线人员列表或浮动框架中的动态文档，那么可以指定浏览器定时刷新当前打开网页。因为它可以实时地反映在线或离线用户，以及动态文档实时改变的信息。

（2）在【刷新】对话框中设置刷新时间。

例如，要将网页设定为每隔1分钟自动刷新，则【刷新】对话框的设置如图1-84所示。

此时，在【代码】视图中的<head>标签内可以查看相应的html标记。

<meta http-equiv="refresh" content="60" />

同样，还可以通过meta标签实现对刷新时间的设置，具体设置如图1-85所示。

如果想设置浏览引导主页10秒后，自动打开主页，可在引导主页的【刷新】对话框中进行如图1-86所示的设置。

1.9.4 设置说明信息

搜索引擎也可通过读取meta 标签的说明内容来查找信息，说明信息主要是设计者对网页内容的详细说明，而关键字可以让搜索引擎尽快搜索到网页。设置网页说明信息的具体操作步骤如下。

（1）选中文档窗口中的【代码】视图，将鼠标光标放在<head>标签中，执行菜单【插入】→【HTML】→【文件头标签】→【说明】命令，启用【说明】对话框。

（2）在【说明】对话框中设置说明信息。

例如，在网页中设置为设计者提供“利用ASP脚本，按用户需求进行查询”的说明信息，对话框中的设置如图1-87所示。

此时，在【代码】视图中的<head>标签内可以查看相应的html标记。

<meta name="description" content="利用ASP脚本，按用户需求进行查询" />

同样，还可以通过meta标签实现，具体设置如图1-88所示。

1.9.5 设置某页面中所有链接的基准链接

基准链接类似于相对路径，若要设置网页文档中所有链接都以某个链接为基准，可添加一个基本链接，但其他网页的链接与此页的基准链接无关。设置基准链接的具体操作如下。

（1）选中文档窗口中的【代码】视图，将鼠标光标放在<head>标签中，执行菜单【插入】→【HTML】→【文件头标签】→【基础】命令，弹出【基础】对话框。

（2）在【基础】对话框中设置【Href】和【目标】两个选项。这两个选项的作用如下。

【Href】选项：设置页面中所有链接的基准链接。

【目标】选项：指定所有链接的文档应在哪个框架或窗口中打开。

例如，当前页面中的所有链接都是以“http://www.sina.com”为基准链接，而不是本服务器的URL地址，则【基础】对话框中的设置如图1-89所示。

此时，在【代码】视图中的<head>标签内可以查看相应的html标记。

<base href="http://www.sina.com" target="空白(_B)" />

一般情况下，在网页的头部插入基准链接不带有普遍性，只是针对个别网页而言。当个别网页需要临时改变服务器域名和IP地址时，才在其文件头部插入基准链接。当需要大量、长久地改变链接时，最好在站点管理器中完成。

1.9.6 设置当前文件与其他文件的关联性

<head> 部分的<Iink >标签可以定义当前文档与其他文件之间的关系，它与 <body> 部分中文档之间的 HTML 链接是不一样的，其具体操作步骤如下。

（1）选中文档窗口中的【代码】视图，将鼠标光标放在<head>标签中，执行菜单【插入】→【HTML】→【文件头标签】→【链接】命令，弹出【链接】对话框，如图1-90所示。

（2）在【链接】对话框中设置相应的选项。对话框中各选项的作用如下。

【Href】选项：用于定义与当前文件相关联文件的 URL。它并不表示通常HTML 意义上的链接文件，链接元素中指定的关系更复杂。

【ID】选项：为链接指定一个唯一的标识符。

【标题】选项：用于描述关系。该属性与链接的样式表有特别的关系。

【Rel】选项：指定当前文档与【Href】选项中文档之间的关系。其值包括替代、样式表、开始、下一步、上一步、内容、索引、术语、版权、章、节、小节、附录、帮助和书签。若要指定多个关系，则用空格将各个值隔开。

【Rev】选项：指定当前文档与 【Href】选项中文档之间的相反关系，与【Rel】选项相对。其值与【Rel】选项的相同。

1.10 设置链接文字的颜色

案例效果：Ch01\效果\链接文字的颜色\ index.htm。

制作要点：使用CSS样式为文字添加链接颜色。

01 按快捷键【Ctrl+O】，打开光盘中的“Ch01\素材\链接文字的颜色\ index.htm”文件，如图1-91所示。

02 执行菜单【窗口】→【CSS样式】命令，弹出【CSS样式】面板，如图1-92所示。

03单击【CSS样式】面板下方的【新建CSS规则】按钮 ，弹出【新建CSS规则】对话框，如图1-93所示。在【选择器类型】选项组中选择【高级】单选项，在【选择器】选项的下拉列表中选择【a:Iink】，在【定义在】选项组中选择【仅对该文档】单选项，单击【确定】按扭，弹出【a:Iink的CSS规则定义】对话框。

04在对话框中选择【分类】选项框中的【类型】选项，如图1-94所示。在【大小】选项的数值框中输入“25”，将【颜色】选项设为“白色（#FFFFFF）”，在【修饰】选项组中勾选【无】复选框，单击【确定】按钮，完成CSS样式的设置。

05单击【CSS样式】面板下方的【新建CSS规则】按钮 ，弹出【新建CSS规则】对话框，如图1-95所示。在【选择器类型】选项组中选择【高级】单选项，在【选择器】选项的下拉列表中选择【a:visited】，在【定义在】选项组中选择【仅对该文档】单选项，单击【确定】按扭，弹出【a:visited 的CSS规则定义】对话框。参照步骤（4）的方法在对话框中进行设置，如图1-96所示，单击【确定】按钮，完成CSS样式的设置。

06 单击【CSS样式】面板下方的【新建CSS规则】按钮 ，弹出【新建CSS规则】对话框，如图1-97所示。在【选择器类型】选项组中选择【高级】单选项，在【选择器】选项的下拉列表中选择【a:hover】，在【定义在】选项组中选择【仅对该文档】单选项，单击【确定】按扭，弹出【a:hover 的CSS规则定义】对话框。

07 在对话框中选择【分类】选项框中的【类型】选项，如图1-98所示。在【大小】选项的下拉列表中选择“24”，在【样式】选项的下拉列表中选择【斜体】，将【颜色】选项设为“绿色（#CCFF00）”，在【修饰】选项组中勾选【下划线】复选框，单击【确定】按钮，完成CSS样式的设置。

08 单击【CSS样式】面板下方的【新建CSS规则】按钮 ，弹出【新建CSS规则】对话框，如图1-99所示。在【选择器类型】选项组中选择【高级】单选项，在【选择器】选项的下拉列表中选择【a:active】，在【定义在】选项中选择【仅对该文档】单选项，单击【确定】按扭，弹出【a:active 的CSS规则定义】对话框。

09在对话框中将【颜色】选项设为“绿色（#BED5A9）”，在【修饰】选项组中勾选【下划线】复选框，如图1-100所示，单击【确定】按钮，完成CSS样式的设置。

10 选中文字“藻类植物”，如图1-101所示。执行菜单【窗口】→【属性】命令，弹出【属性】面板，在【链接】选项的文本框中输入“#”，如图1-102所示，按【Enter】键，完成文字的链接。用相同的方式，为其他文字制作链接。

11 按快捷键【F12】预览，效果如图1-103所示。

1.11 改变页面的标题

案例效果：Ch01\效果\改变页面标题\index.htm。

制作要点：通过页面属性对话框改变页面标题。

01 按快捷键【Ctrl+O】，打开光盘中的“Ch01\素材\改变页面标题\index.htm”文件，如图1-104所示。

02 执行菜单【修改】→【页面属性】命令，弹出【页面属性】对话框，如图1-105所示。

03 选择【分类】选项框中的【标题/编码】选项，在【标题】选项的文本框中输入“=礼品专卖=”，其他选项为默认值，如图1-106所示。单击【确定】按钮，效果如图1-107所示。

04 按快捷键【F12】预览，效果如图1-108所示。

1.12 改变页面的背景颜色

案例效果：Ch01\效果\改变页面颜色\ index.htm。

制作要点：通过页面属性对话框改变页面颜色。

01 按快捷键【Ctrl+O】，打开光盘中的“Ch01\素材\改变页面颜色\ index.htm”文件，如图1-109所示。

02 执行菜单【修改】→【页面属性】命令，弹出【页面属性】对话框，如图1-110所示。

03 将【背景颜色】选项设为“米色（#F4E5BC）”，如图1-111所示。单击【确定】按钮，完成背景颜色的设置。

04 按快捷键【F12】保存并预览网页，效果如图1-112所示。