1.4 设置页面属性
视频讲解
新建网页之后，应设置页面的基本显示属性，如页面背景、页面字体大小、颜色和页面超链接属性等。在Dreamweaver CC中设置页面显示属性可以通过【页面属性】对话框来实现。
【操作步骤】
第1步，启动Dreamweaver CC，新建一个空白页文档，保存为test.html。
第2步，选择【修改】|【页面属性】命令，打开【页面属性】对话框，如图1.18所示。
图1.18 【页面属性】对话框
第3步，在【页面属性】对话框左侧的【分类】列表框中选择分类，然后在右侧设置具体属性。页面基本属性共有6类，分别是外观（CSS）、外观（HTML）、链接（CSS）、标题（CSS）、标题／编码和跟踪图像。
提示：分类名称后面小括号中的CSS表示该类选项中所有设置由CSS样式定义，相反，小括号中的HTML表示使用HTML标记属性进行定义。
1.4.1 设置外观
外观主要包括页面的基本显示样式，如页面字体类型、字体大小、文本颜色、网页背景样式、页边距等。【页面属性】对话框提供了以下两种设置方式：
☑ 如果在【页面属性】对话框左侧【分类】列表框中选择【外观（CSS）】选项，则可以使用标准的CSS样式来进行设置。
☑ 如果在【页面属性】对话框左侧【分类】列表框中选择【外观（HTML）】选项，则可以使用传统方式（非标准）的HTML标记属性来进行设置。
【示例】如果使用标准方式设置页面背景色为白色，则Dreamweaver CC会生成如下样式来控制页面背景色：
<style type="text/css">
body { background-color: rgba (255, 255, 255, 1); }
</style>
反之，如果使用非标准方式设置页面背景色为白色，则Dreamweaver CC会在<body>标记中插入如下属性：
<body bgcolor="#FFFFFF">
下面详细讲解页面外观属性设置。
1. 页面字体
在【页面字体】下拉列表中选择一种字体。如果字体列表中没有显示用户要使用的字体，可以选择列表最下面的【管理字体】选项，如图1.19所示。
图1.19 【页面属性】对话框中的【外观】选项
在打开的【管理字体】对话框中，切换到【自定义字体堆栈】选项卡，在【可用字体】列表框中选择一种字体，并单击
按钮将该字体加入到左侧的【选择的字体】列表框中，如图1.20所示，这样就可以在Dreamweaver中使用了。
图1.20 【管理字体】对话框
在【页面属性】对话框的【页面字体】右侧的下拉列表中，分别可以设置斜体（italic）和粗体（bold）样式。
提示：建议使用系统默认字体（如宋体、雅黑等），不要使用非常用的艺术字体。如果要使用某些艺术字体，可以先在Photoshop中把艺术字体生成图片，然后以背景样式的形式显示，或者插入到网页中。
2. 大小
在【大小】下拉列表中可以设置页面字体大小，也可以输入数字定义字体大小。输入数字后，右侧下拉列表变为可编辑状态，在这里可以选择数字单位，如px（像素）、pt（点数）、in（英寸）、cm（厘米）和mm（毫米）等。在【大小】下拉列表中还有一些特殊的字号，如图1.21所示。
图1.21 在【页面属性】对话框中选择特殊字号
下面列出这些特定字号所设置的字体大小，如图1.22所示，可直观进行比较。
图1.22 特殊字号效果比较
3. 文本颜色
单击【文本颜色】旁边的矩形框
，打开颜色面板，其中每一个小色块代表一种颜色，鼠标指针经过任何颜色，色板的上面区域都会显示出该颜色相应的十六进制代码（#号加上6个十六进制的数），选择一个色块单击即可完成颜色的选取，如图1.23所示。
图1.23 颜色面板
提示：在颜色面板底部单击吸管按钮
，鼠标指针会变成吸管形状，此时可以在编辑窗口快速选择一种颜色，如图1.24所示。此外，单击颜色面板底部的RGBa、Hex、HSLa按钮，可以切换选择颜色的表示方式，如rgba（229，222，168，2.00）、#E5DEA8、hsla（53，54%，78%，2.00）。
图1.24 快速取色
返回【页面属性】对话框，在【文本颜色】右侧的文本框中也可以直接输入颜色值。HTML预设了一些颜色名称，也可以在【文本颜色】右侧的文本框中直接输入这个颜色名称。例如，在文本框中输入红色的名称red，可设置红颜色，输入蓝色的名称blue，可设置蓝颜色，如图1.25所示。
图1.25 输入HTML预设颜色名称
提示：常用的预设颜色名称有black（黑色）、olive（橄榄色）、teal（凫蓝色）、red（红色）、blue（蓝色）、maroon（栗色）、navy（藏青色）、gray（灰色）、lime（柠檬色）、fuchsia（紫红色）、white（白色）、green（绿色）、purple（紫色）、yellow（黄色）和aqua（浅绿色）。
4. 背景颜色
背景颜色的设置方法与设置文本颜色的方法基本相同。背景色默认为白色，也可以在【背景颜色】右侧的文本框中输入#FFFFFF显式定义网页背景颜色为白色，如果在这里不设置颜色，浏览器会把白色默认为网页背景颜色。
5. 背景图像
在【背景图像】文本框中可以直接输入图像的路径，或者直接单击后面的【浏览】按钮，在打开的对话框中选择想用作背景的图像文件，如果图像文件不在网站本地目录下，会弹出如图1.26所示的提示对话框，单击【是】按钮，把图像文件复制到网站根目录中。
图1.26 提示对话框
在【背景图像】选项下面有一个【重复】下拉列表，如图1.27所示，该选项主要用来设置背景图像在页面上的显示方式，主要包括no-repeat（不重复）、repeat（重复）、repeat-x（横向重复）和repeat-y（纵向重复），效果如图1.28所示。选择的背景图像，要避免用中文命名，否则会无法显示。
图1.27 【重复】下拉列表
图1.28 不同背景图像显示方式
6. 设置页边距
在【左边距】、【右边距】、【上边距】和【下边距】文本框中输入数字，分别用来设置网页四周空白区域的宽度或高度，即网页距离浏览器的边框距离。在文本框中输入数字，这时右侧的下拉列表为可选状态，然后在其中选择输入数字的单位，包括px（像素）、pt（点数）、in（英寸）、cm（厘米）、mm（毫米）、pc（12pt字）、em（字体高）、ex（字母x的高）和%（百分比），如图1.29所示。如果不输入单位，系统默认单位为px（像素）。
图1.29 设置页边距
1.4.2 设置链接
在【页面属性】对话框左侧的【分类】列表框中选择【链接】选项，在右侧显示相关链接设置属性，如图1.30所示。这些内容主要是针对链接文字字体、大小、颜色和样式属性进行设置，而且只能对链接文字产生作用。
图1.30 【页面属性】对话框中的【链接】选项
【链接字体】用来设置页面中超链接字体类型。
【大小】设置链接字体的大小。
【链接颜色】、【变换图像链接】、【已访问链接】和【活动链接】这4个颜色选项可以为文字设置4种不同链接状态时的颜色，它们分别对应链接字体在正常时的颜色、鼠标指针经过时的颜色、鼠标单击过的颜色和鼠标单击时的颜色。Dreamweaver CC默认链接文字颜色为蓝色，已访问过的链接文字颜色为紫色。
【下划线样式】下拉列表主要设置链接字体的显示样式，共有4种样式，分别为始终有下画线、始终无下画线、仅在变换图像时显示下画线和变换图像时隐藏下画线。根据字面意思就可以知道每个选项的样式效果。
1.4.3 设置标题
在【页面属性】对话框左侧的【分类】列表框中选择【标题】选项，在右侧则显示相关标题设置属性，如图1.31所示。
图1.31 【页面属性】对话框中的【标题】选项
这里的标题主要针对页面内各级不同标题样式，包括字体、粗体、斜体和大小。可以定义标题字体及6种预定义的标题字体样式。
1.4.4 设置标题／编码
在【页面属性】对话框左侧的【分类】列表框中选择【标题／编码】选项，在右侧则显示相关标题／编码设置属性，如图1.32所示。
图1.32 【页面属性】对话框中的【标题／编码】选项
这里主要设置网页标题，该标题将显示在浏览器的标题栏中。同时还可以设置HTML源代码中字符编码，网页默认设置Unicode（UTF-8）即可。
1.4.5 设置跟踪图像
在制作网页时，很多设计师习惯于先用绘图工具绘制网页草图（即设计网页草稿），为方便设计师快速参考设计草图，Dreamweaver CC可以将设计草图设置成跟踪图像，铺在编辑的网页下面作为背景，用于引导网页的设计。不过跟踪图像只是起辅助编辑的作用，最终并不会在浏览器中显示，所以它与页面背景图像存在本质区别。
【操作步骤】
操作之前，用户应准备好设计草图或者参考效果图，也可打开本案例素材设计图bg2-2.jpg，然后执行下面的操作步骤。
第1步，启动Dreamweaver，新建网页并保存为test.html。在【页面属性】对话框左侧的【分类】列表框中选择【跟踪图像】选项，在右侧则显示相关跟踪图像设置的属性，如图1.33所示。
图1.33 【页面属性】对话框中的【跟踪图像】选项
第2步，在【跟踪图像】文本框中可以为当前制作的网页添加跟踪图像。单击文本框后面的【浏览】按钮，打开【选择图像源文件】对话框，选择参考图像。如果图像文件不在网站本地目录下，会弹出提示对话框，单击【是】按钮，把图像文件复制到网站根目录中。
第3步，拖动【透明度】滑块可以设置跟踪图像的透明度，以确保它不影响正常的网页设计操作。透明度越高，跟踪图像显示得越明显，透明度越低，跟踪图像显示得越不明显。最后，单击【应用】按钮，即可在编辑窗口中看到跟踪图像效果，如图1.34所示。
图1.34 设置跟踪图像效果
第4步，若要显示或隐藏跟踪图像，可以选择【查看】|【跟踪图像】|【显示】命令，如图1.35所示。
图1.35 【跟踪图像】子菜单
（1）在网页中选定一个页面元素，然后选择【查看】|【跟踪图像】|【对齐所选范围】命令，可以使跟踪图像的左上角与所选页面元素的左上角对齐。
（2）若要更改跟踪图像的位置，则选择【查看】|【跟踪图像】|【调整位置】命令，打开【调整跟踪图像位置】对话框，如图1.36所示。在【调整跟踪图像位置】对话框的X和Y文本框中输入坐标值，单击【确定】按钮就可以调整跟踪图像的位置。例如，在X文本框中输入“50”，在Y文本框中输入“50”，则跟踪图像的位置被调整到距浏览器左边框50像素，距浏览器上边框50像素。
图1.36 【调整跟踪图像位置】对话框
（3）若要重新指定跟踪图像的位置，选择【查看】|【跟踪图像】|【重设位置】命令，跟踪图像会自动对齐Dreamweaver CC编辑窗口的左上角。