3.2 设置“外观”属性

外观属性设置主要是针对与整体显示效果有关的项目的设置，设置项目主要包括页面字体、大小、文本颜色、背景颜色、背景图像以及页面边距等。

3.2.1 设置页面字体格式和背景颜色

设置页面字体格式主要包括页面字体、字形和字号等几部分内容，此处的设置对整个网页都有效，在默认情况下，“页面字体”为“宋体”，各设置项如图3-3所示。

① “页面字体”下拉列表框：设置页面的字体。

② “粗体”按钮：将文本设为粗体。

③ “斜体”按钮：将文本设为斜体。

④ “大小”下拉列表框：设置字体大小。

⑤ “大小单位”下拉列表框：选择字体大小单位，常用单位有像素、点数、字体高等。

文本颜色和背景颜色的设置同样是对整个网页都有效，这里的文本颜色设置对超链接文本和单独设置了颜色样式的文本不产生效果，各设置项如图3-4所示。

① “文本颜色”按钮：单击该按钮，在打开的颜色选择器中选择一种颜色来设置相应的文本颜色。

② “背景颜色”按钮：单击该按钮，在打开的颜色选择器中选择一种颜色来设置相应的背景颜色。

③ “文本颜色”文本框：在该文本框中直接输入颜色的十六进制编码（颜色的十六进制编码必须以“#”开头）也可以设置文本颜色，它与单击“文本颜色”按钮设置的文本颜色效果一致。

④ “背景颜色”文本框：在该文本框中直接输入颜色的十六进制编码也可以设置背景颜色，它与单击“背景颜色”按钮设置的背景颜色效果一致。

颜色选择器是常用的一种颜色选择工具，如图3-5所示。它由功能控制区和色盘两部分构成。

① “拾取颜色”预览区：显示拾色器滴管当前拾取的颜色。

② “颜色编码”预览区：当拾色器滴管拾取到当前位置上的颜色时，该颜色将在“拾取颜色”预览区显示，对应的十六进制颜色编码则显示在其后的“颜色编码”预览区。

③ “拾色器滴管”工具：单击该工具可以拾取一种颜色。

④ “清除颜色”按钮：如果需要清除对应目标上的颜色属性，可单击按钮清除颜色属性设置代码。

⑤ “系统颜色拾取器”按钮：如果色盘中的颜色仍不能满足需要，单击该按钮可打开Windows调色盘进行选择，这时所选颜色将不再局限于216种网页安全色。

⑥ “颜色类型”按钮：用于切换色盘颜色系统类型。

⑦ “色盘”区域：用于选择颜色，默认情况下显示216种网页安全色，通过选择不同的颜色类型可使色盘呈现出不同的颜色样本组合，这其中也包括“灰度”。

3.2.2 设置背景图像

背景图像主要起填充页面背景和修饰页面的作用，背景图像常常是一个尺寸较小的图像，需要多幅才能填满整个页面。对背景图像的放置方式可灵活控制，可以只在页面左上角出现一次，也可以重复出现以填满整个页面，还可以只在横向或纵向设置重复。通过重复方式的合理选择，可以制作出各种形式的背景图像，部分设置项如图3-6所示。

① “背景图像”文本框：用于设置背景图像文件路径及文件名，背景图像可以直接使用本地图像文件，也可以引用网络图像文件，网络图像要用绝对路径（带“http://”的URL地址）。

② 按钮：单击该按钮可通过“选择图像源文件”对话框选择背景图像文件。

③ “重复”下拉列表框：用于设置背景图像的重复方式。重复方式包括不重复、重复、横向重复和纵向重复4种。

3.2.3 设置页边距

页边距是指网页正文与浏览器边框的间距，如果需要在某个方向实现无边距显示，则将该方向上对应的页边距设为0像素（px），页边距设置项如图3-7所示。

① “左边距”文本框：用于设置页面左边距。

② “右边距”文本框：用于设置页面右边距。

③ “上边距”文本框：用于设置页面上边距。

④ “下边距”文本框：用于设置页面下边距。

⑤ “边距单位”下拉列表框：设置边距的单位。

3.2.4 应用案例——为网页设置字体样式和背景图片

本小节主要讲解了设置网页的“外观”属性的相关知识，下面综合应用这些知识设置“pageSet.htm”网页，其最终效果如图3-8所示（CD:\效果\第3章\pageSet.htm）。

其具体操作步骤如下。

STEP 01. 选择命令。选择“文件/打开”命令打开“pageSet.htm”网页（CD:\素材\第3章\pageSet\pageSet.htm），选择“修改/页面属性”命令，如图3-9所示。

STEP 02. 设置页面字体。在打开的“页面属性”对话框的“分类”列表框中默认选择“外观”选项，在“页面字体”下拉列表框中选择“Arial, Helvetica, sans-serif”选项，单击“粗体”按钮将页面字体设置为粗体，如图3-10所示。

STEP 03. 设置文本颜色。单击“文本颜色”按钮，在打开的颜色选择器中选择“#000066”颜色，如图3-11所示。

STEP 04. 设置背景颜色。在“背景颜色”文本框中输入“#D2D2D2”，如图3-12所示。

STEP 05. 设置背景图像。单击“背景图像”文本框右侧的按钮，在打开的“选择图像源文件”对话框中选择“back.gif”图像（CD:\素材\第3章\pageSet\back.gif），单击按钮，返回“页面属性”对话框，在“重复”下拉列表框中选择“横向重复”选项，如图3-13所示，单击按钮。

STEP 06. 保存文档。返回文档窗口，选择“文件/保存”命令保存对当前文档所进行的修改，如图3-14所示，按【F12】键预览网页，其最终效果如图3-8所示。