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