3.6 设置跟踪图像属性

跟踪图像主要用来辅助页面设计，即页面设计的参考图，用户可以根据这个参考图，完成预期设计的网页，本小节将详细讲解设置“跟踪图像”属性的相关知识。

3.6.1 什么是跟踪图像

跟踪图像是Dreamweaver CS3中一个非常有用的功能，它允许用户在网页中将原来的平面设计初稿作为辅助背景，对照着设计初稿进行页面布局和设计，以便使实际结果与设计意图相符。

在打开跟踪图像功能的情况下设计网页的效果如图3-31所示。有了“跟踪图像”功能，用户就可以非常方便地定位文字、图像、表格以及层等网页元素在页面中的位置，极大地提高了工作效率。

3.6.2 设置跟踪图像

一般情况下，“跟踪图像”的属性设置都要设置两项，分别是“跟踪图像”和“透明度”，如图3-32所示。

① “跟踪图像”文本框：跟踪图像只在Dream-weaver CS3的“设计”视图中起作用，当在Web浏览器中打开文档时，跟踪图像将不会被下载，更不会被显示，因此它不会影响到网页文档的下载速度和实际显示效果。

② 按钮：单击按钮，在打开的“选择图像源文件”对话框中可以设置“跟踪图像”的路径和文件名。

③ “透明度”滑块：“透明度”的选择范围为0～100%，可根据实际情况进行调整，以不影响设计操作和页面整体显示效果为原则。

3.6.3 应用案例——利用页面属性设置使网页更完善

本章的前面部分主要讲解了“页面属性”的设置，下面将综合应用这些知识设置“PageSetMore.htm”网页，以复习和巩固“页面属性”设置的相关知识，页面设置的前后对比效果如图3-33和3-34所示（CD:\效果\第3章\PageSetMore.htm）。

其具体操作步骤如下。

STEP 01. 设置页面字体和大小。启动Dreamweaver CS3，打开“pageSetMore.htm”网页（CD:\素材\第3章\pageSetMore.htm），选择“修改/页面属性”命令，在打开的“页面属性”对话框中选择“外观”分类，在“页面字体”下拉列表框中选择“宋体”选项，并设置“大小”为“12像素（px）”，如图3-35所示。

STEP 02. 设置文本颜色和背景颜色。在“文本颜色”文本框中输入“#000099”，在“背景颜色”文本框中输入“#EFEFEF”，如图3-36所示。

STEP 03. 设置页面边距。分别在所有的边距文本框中输入“0”，单击按钮，如图3-37所示。

STEP 04. 设置链接字体和大小。在左侧的“分类”列表框中选择“链接”选项，单击“粗体”按钮设链接文本为粗体显示，在“大小”下拉列表框中输入“14”，如图3-38所示。

STEP 05. 设置链接文本颜色及下画线样式。分别在“链接颜色”、“变换图像链接”、“已访问链接”和“活动链接”文本框中输入“#0000FF”、“#FF9900”、“#000099”和“#FF9900”，在“下画线样式”下拉列表框中选择“仅在变换图像时显示下画线”选项，单击按钮，如图3-39所示。

STEP 06. 设置标题样式。在左侧的“分类”列表框中选择“标题”选项，单击“粗体”按钮设置标题文本为粗体显示，在“标题1”下拉列表框中输入“24”，在“标题颜色”文本框中输入“#003399”，单击按钮，如图3-40所示。

STEP 07. 设置标题和编码。在左侧的“分类”列表框中选择“标题/编码”选项，在“标题”文本框中输入“‘页面属性’设置应用案例”，在“编码”下拉列表框中选择“简体中文（GB2312）”选项，单击按钮，如图3-41所示。

STEP 08. 完成设置。在打开的提示对话框中直接单击按钮，如图3-42所示，返回操作界面，按【Ctrl+S】组合键保存文档，按【F12】键预览网页，最终效果如图3-34所示。