4.2 设置网页文档

用户创建空白文档之后，为了呈现整个页面的结构和美观性，还需要设置文档的页面属性和文件头标签。

4.2.1 设置页面属性

页面属性关乎整个网页页面的美观性，是网页设计的基础。而页面属性可以对网页文档中的内容进行简单的定义。

执行【修改】|【页面属性】命令，弹出【页面属性】对话框。在【页面属性】对话框中的【分类】栏中，为用户提供了【外观（CSS）】、【外观（HTML）】、【链接（CSS）】、【标题（CSS）】、【标题/编码】和【跟踪图像】六个选项卡。

1. 外观（CSS）

在【页面属性】对话框中的【分类】栏中，激活【外观（CSS）】选项卡，指定网页页面包括字体、背景颜色、背景图像等若干基本页面的布局选项。

在【外观（CSS）】选项卡中，主要包括下列几种选项：

□页面字体　用于指定在网页页面中使用的默认字体系列。

□大小　用于指定在网页页面中使用的默认字体的大小。

□文本颜色　用于指定显示字体时所使用的默认字体颜色，可通过单击【文本颜色】框来选取颜色。

□背景颜色　用于设置页面的背景颜色，可通过单击【背景颜色】框来选取颜色。

□背景图像　用于设置背景图像，可通过单击【浏览】按钮来选取背景图像文件。

□重复　用于指定背景图像在页面上的显示方式，其中no-repeat选项表示仅显示背景图像一次，repeat选项表示横向和纵向重复或平铺图像，repeat-x选项表示可横向平铺图像，repeat-y选项表示可纵向平铺图像。

□左/右/上/下边距　用于指定网页文档中内容到浏览器左侧、右侧、上侧和下侧的距离。

2. 外观（HTML）

在【页面属性】对话框中的【分类】栏中，激活【外观（HTML）】选项卡，以HTML或XHTML标签的属性方式定义网页文档中一些基本对象的样式。

在【外观（HTML）】选项卡中，主要包括下列几种选项：

□背景图像　用于设置网页的背景图像，可通过单击【浏览】按钮选取背景图像文件。

□背景　用于设置页面的背景颜色，单击【文本颜色】框可选取背景颜色。

□文本　用于指定文本的默认颜色。

□已访问链接　用于指定已访问链接的颜色。

□链接　用于指定链接文本的颜色。

□活动链接　用于指定当鼠标（或指针）在链接上单击时所应用的颜色。

□左/上边距　用于指定页面到浏览器左侧和上侧的距离。

□边距宽度/高度　用于指定页面到浏览器右侧和下侧的距离。

3. 链接（CSS）

在【页面属性】对话框中的【分类】栏中，激活【链接（CSS）】选项卡，指定链接字体样式、字体大小、颜色等选项。

在【链接（CSS）】选项卡中，主要包括下列几种选项：

□链接字体　用于指定链接文本使用的默认字体系列。

□大小　用于指定链接文本的字体大小，其字体单位可以为px（像素）、pt（点）、in（英寸）、cm（厘米）等。

□链接颜色　用于指定应用于链接文本的颜色。

□已访问链接　用于指定应用于已访问链接的颜色。

□变换图像链接　用于指定当鼠标（或指针）位于链接上时所出现的颜色。

□活动链接　用于指定当鼠标（或指针）在链接上单击时所出现的颜色。

□下划线样式　用于指定应用于链接的下划线样式，包括【始终有下划线】、【始终无下划线】、【仅在变换图像时显示下划线】和【变换图像时隐藏下划线】四种样式。

4. 标题（CSS）

在【页面属性】对话框中的【分类】栏中，激活【标题（CSS）】选项卡，指定页面标题的字体、字体大小和颜色等。

在【标题（CSS）】选项卡中，主要包括下列两种选项：

□标题字体　用于指定标题文本使用的默认字体系列。

□标题1~6　用于指定最多6个级别的标题文本使用的字体大小和颜色。

5. 标题/编码

在【页面属性】对话框中的【分类】栏中，激活【标题/编码】选项卡，指定用于创作网页的语言专用文档编码类型，以及与该编码类型配合使用的Unicode类型。

在【标题/编码】选项卡中，主要包括下列几种选项：

□标题　用于指定在“文档”窗口和大多数浏览器窗口标题栏中所出现的页面标题。

□文档类型　用于指定一种文档类型定义。

□编码　用于指定文档字符所使用的编码，当用户选择Unicode(UTF-8)选项时则不需要实体编码。

□重新载入　单击该按钮可以转换现有文档或者使用新编码重新打开它。

□Unicode标准化表单　只要将【编码】选项设置为Unicode（UTF-8）时该选项才被激活，它包括四种Unicode方式。

□包括Unicode签名（BOM）　启用该复选框，可以在文档中包括一个字节顺序标记（BOM）。而BOM是位于文本文件开头的2到4个字节，可将文件标识为Unicode。

6. 跟踪图像

在【页面属性】对话框中的【分类】栏中，激活【跟踪图像】选项卡，用于设置在设计页面时用作向导参考的图像文件。

在【跟踪图像】选项卡中，主要包括下列两种选项：

□跟踪图像　用于指定在复制设计时作为参考的图像，可通过单击【浏览】按钮来选取图像文件。该图像只供参考，并不会出现在浏览器中。

□透明度　用于设置跟踪图像的透明度，从完全透明到完全不透明。

4.2.2 设置文件头标签

HTML是制作网页的一种规范，包括文件头（head）和文件体（body）两部分内容。其中，文件体（body）是在浏览器中看到的网页正文部分，而文件头（head）则是对网页的一些基本属性及页面控制功能进行定义的标签，其内容不会在浏览器正文窗格中显示。

在Dreamweaver中，用户可通过head中各种文件头标签来定义网页的标题，为网页添加搜索关键字和描述信息等，以方便用户搜索和收录网页。

1. Meta

Meta标签是记录当前页面中的作者、字符编码、版权信息等一些相关信息的head元素。

在Dreamweaver中，执行【插入】|Head|Meta命令，在弹出的【META】对话框中，设置相应选项。

在【META】对话框中，主要包括下列3种选项：

□属性　用于指定Meta标签是否包含有关页面的描述信息或HTTP信息。

□值　用于指定要在此标签中提供的信息类型。Dreamweaver中的值有各自的属性检查器，用户可根据实际情况指定任何值，例如creationdate、documentID或level等。

□内容　用于描述实际的信息说明，例如为“值”指定等级等。

在【META】对话框中，单击【确定】按钮后，系统将自动在【代码】视图中插入一行有关META的代码。将光标放置在该代码中，系统会在其下方的【属性】面板中显示该代码信息，便于用户对其进行修改。

2. 关键字

设置关键字是方便搜索引擎对其进行读取，并使用该关键字信息在它们的数据库中将用户的页面编入索引。由于部分搜索引擎对索引的关键字或字符的数目进行了限制，或者在超过限制的数目时将忽略所有的关键字，因此用户最好只设置几个精心选择的关键字。

在Dreamweaver中，执行【插入】| Head |【关键字】命令，在弹出的【关键字】对话框中的【关键字】文本框中，输入多个关键字，并以逗号分隔每个关键字。

在【关键字】对话框中，单击【确定】按钮后，系统将在【代码】视图中插入一行有关关键字的代码。将光标放置在该代码中，系统会在其下方的【属性】面板中显示该代码信息，便于用户对其进行修改。

3. 说明

说明用于描述有关网页的说明性信息，它与关键字一样，会受到搜索引擎限制字符数这一条件的限制，因此在设置说明文本时用户应尽量将说明限制为几个字。

在Dreamweaver中，执行【插入】| Head |【说明】命令，在弹出的【说明】对话框中的【说明】文本框中，输入说明文本。

在【说明】对话框中，单击【确定】按钮后，系统将自动在【代码】窗口中显示一行有关说明的代码。将光标放置在该代码中，系统会在其下方的【属性】面板中显示该代码信息，便于用户对其进行修改。

4. 视口

在Dreamweaver中，新增了视口信息设置功能，主要用于控制网页布局的大小。

执行【插入】| Head |【视口】命令，系统会直接在【代码】窗口中显示一行有关视口信息的代码。将光标放置在该代码中，系统会在其下方的【属性】面板中显示该代码信息，便于用户对其进行修改。

该代码中的width=device-width表示视口默认宽度为屏幕宽度，而initial-scale用于设置网页的初始缩放比例，当该属性为1时则表示网页的初始大小为屏幕面积的100%。