1.4 设置页面属性
通常情况下，新建一个网页文件后，其默认的页面属性都不符合设计需要。用户通过设置文档的页面属性来自定义页面外观。在Dreamweaver CC 2018中，网页的属性通过“页面属性”对话框进行设置。
新建或打开一个网页文件之后，执行“文件”|“页面属性”命令，弹出“页面属性”对话框，如图1-42所示。在这里可以设置页面的字体、边距、背景、链接、标题／编码、跟踪图像等属性。
图1-42 “页面属性”对话框
1.4.1 设置页面外观
在“页面属性”对话框的分类列表中选择“外观”（CSS），如图1-43所示。
图1-43 设置页面外观
1. 设置文本样式
（1）字体和样式：在“页面字体”右侧的第一个下拉列表框中，可以设置页面使用的字体组合；在第二个下拉列表框中设置字体样式，如斜体、加粗；在第三个下拉列表框中设置字体粗细。
（2）字号：在“大小”下拉列表框中设置字体大小和单位。
（3）文本颜色：单击“文本颜色”右侧的拾色器按钮
弹出调色板，如图1-44所示。单击选取饱和度和亮度，然后拖动色相滑块调整色调，拖动光亮度滑块调整亮度，拖动Alpha滑块调整颜色的不透明度。在调色板之外单击，即可设置文本颜色。也可直接在文本框中输入颜色的RGB值。
教你一招：如果要拾取Dreamweaver CC 2018界面上任何位置的颜色，可以选中调色板上的滴管按钮
，然后在需要取样的位置单击。如果要拾取Dreamweaver CC 2018之外的颜色，则选中滴管工具后，按下鼠标左键拖动到需要取样的位置，然后释放鼠标。
图1-44 设置文本颜色
2. 设置背景
（1）背景颜色：单击“背景颜色”右侧的拾色器按钮
，在弹出的调色板中选择需要的颜色。
（2）背景图像：单击“背景图像”右侧的“浏览”按钮，在弹出的对话框中选择需要的图像文件。
默认情况下，如果选择的图像尺寸比页面的尺寸小，则自动平铺图像以填满整个页面区域。如果不希望背景图像自动平铺，可以使用“重复”选项。
重复：该选项为默认设置，即自动平铺，如图1-45（a）所示。
水平重复：仅在水平方向上平铺，如图1-45（b）所示。
垂直重复：仅在垂直方向上平铺，如图1-45（c）所示。
不重复：不平铺，默认显示在页面左上角，如图1-45（d)所示。
图1-45 背景平铺效果
提示：如果同时使用背景图像和背景颜色，下载图像时会先显示颜色，然后图像覆盖颜色。如果背景图像包含任何透明像素，则背景颜色会透过背景图像显示出来。
3. 设置页边距
页边距是指页面文档主体部分与浏览器上、下、左、右边框的距离。直接在边距文本框中输入需要的边距值和单位即可。
注意：默认情况下，页面有边距，尽管在“页面属性”对话框中不显示，但在浏览器中可以看到页面与浏览器边框有空白。如果要将边距设置为0，必须在文本框中输入0。
此外，在“外观”（HTML）分类中可以使用HTML指定页面属性。如果在该分类中指定页面属性，属性面板上的字体、大小、颜色和对齐方式控件将只显示使用HTML标签的属性设置，应用于当前选择的CSS属性值将不可见，且“大小”弹出菜单也将被禁用。因此不建议使用该分类设置页面属性。
1.4.2 设置页面链接样式
在“页面属性”对话框的分类列表中选择“链接”（CSS），如图1-46所示。
图1-46 设置链接样式
在“链接”（CSS）分类中，可以定义链接的默认字体样式、大小，以及链接文本不同状态下的颜色、下画线样式。设置方法与设置页面外观的方法相同，不再赘述。
链接字体：设置页面超链接文本在默认状态下的字体。
大小：设置超链接文本的字体大小。
链接颜色：设置网页中的文本超链接在默认状态下的颜色。
变换图像链接：设置在网页中当鼠标移动到超链接文字上方时超链接的颜色。
已访问链接：设置网页访问过的文本超链接的颜色。
活动链接：设置网页中的运行的文本超链接的颜色。
下画线样式：设置在网页中当鼠标移动到超链接文字上方时采用怎样的下画线。
1.4.3 设置标题属性
在“页面属性”对话框的分类列表中选择“标题”（CSS），如图1-47所示。
图1-47 设置标题样式
在“标题”（CSS）分类中，用户可以定义标题文字的字体、样式、颜色，并可分别定义一级标题至六级标题使用的字体大小和颜色。
1.4.4 设置页面标题和编码
在“页面属性”对话框的分类列表中选择“标题”|“编码”，如图1-48所示。
图1-48 设置“标题／编码”
标题：在文本框中输入的页面标题将显示在浏览器标题栏上。如果不设置，将显示默认的“无标题文档”。
文档类型：设置页面代码使用的HTML版本，默认为HTML5。
编码：设置网页代码所用语言的文档编码类型，建议初学者使用默认设置。
Unicode标准化表单：指定用于网页编码类型的Unicode范式。通常保留默认设置。
1.4.5 上机练习——设置网页外观
1-5 上机练习——设置网页外观
练习目标
通过前面对页面属性设置方法的讲解，结合本节的练习实例，使读者更直观地掌握设置网页外观的具体操作步骤。
设计思路
首先新建一个空白的网页文件，然后打开“页面属性”对话框，依次设置页面字体、颜色、背景颜色和背景图像，最后设置链接文本的样式和标题／编码。
操作步骤
（1）启动Dreamweaver CC 2018，执行“文件”|“新建”命令，在弹出的“新建文档”对话框中选择“新建文档”分类，文档类型为“HTML”，无框架，然后单击“创建”按钮，新建一个空白的网页文件。
（2）执行“文件”|“页面属性”命令，打开“页面属性”对话框。
（3）在“外观”（CSS）分类中，设置页面字体为默认字体，且字体加粗，大小为14；文本颜色为深蓝色（#0B1A4D）；背景颜色为浅绿色（#94CDC7），背景图像为包含透明背景的GIF图像，且背景图像“垂直平铺”；在“左边距”和“上边距”文本框中输入0，其他保留默认设置。
（4）切换到“链接”（CSS）分类，设置链接文本的大小为16，链接颜色为蓝色（#0B10EF），已访问链接颜色为深红色。
（5）切换到“标题／编码”分类，输入页面的标题为“鱼戏莲叶间”，其他选项保留默认设置。
（6）为观察页面字体效果，在页面中输入文本。选中“鱼戏莲叶间”，执行“窗口”|“属性”命令，打开属性面板，在“链接”文本框中输入“#”。有关链接的设置将在本书后续章节中进行讲解。
（7）执行“文件”|“保存”命令，在弹出的“另存为”对话框中指定文件保存的位置，并输入文件名称（例如lianye.html），单击“保存”按钮保存文件。
（8）双击保存的网页文件，在浏览器中预览页面效果，如图1-49所示。
图1-49 页面效果