3.1 页面属性

网页页面属性主要包括网页标题、网页背景图像和颜色、网页边距、网页默认文字大小和颜色、超链接颜色等。

3.1.1 课堂案例——香格里湾峰会

3-1-1　香格里湾峰会

案例学习目标：学习网页页面属性的设置方法，以及文本的换行与分段、字体的选择与设置等方法。

案例知识要点：使用【文件】|【页面属性】菜单设置页面属性。

素材所在位置：案例素材/ch03/课堂案例——香格里湾峰会。

案例效果如图3-1所示。

图3-1

以素材“课堂案例——香格里湾峰会”为本地站点文件夹，创建名称为“香格里湾峰会”的站点。

1. 设置页面背景属性

① 在【文件】面板中，双击打开index.html文件，如图3-2所示，选择菜单【窗口】|【CSS设计器】，打开【CSS设计器】面板，选择【全部】，如图3-3所示。

图3-2

图3-3

② 选择菜单【文件】|【页面属性】，打开【页面属性】对话框，如图3-4所示，单击【背景图像】文本框后的【浏览】按钮，打开【选择图像源文件】对话框，如图3-5所示，选择“课堂案例——香格里湾峰会>images>bg.jpg”，单击【确定】按钮。

图3-4

图3-5

③ 返回【页面属性】对话框，如图3-6所示，在【重复】下拉框中选择no-repeat，在【左边距】【右边距】【上边距】【下边距】文本框中分别输入0、0、200、0，单击【确定】按钮，页面效果如图3-7所示。

图3-6

图3-7

④ 同时，在【CSS设计器】面板中出现了body样式，如图3-8所示。在body样式上单击鼠标右键，选择【转至代码】，如图3-9所示。在【代码】视图body样式最后添加代码：

background-position: center top; 

图3-8

图3-9

如图3-10所示，这行代码的含义是设置网页的背景图的位置在水平方向居中、垂直方向靠顶部。

图3-10

⑤ 单击【确定】按钮，完成页面背景属性的设置，效果如图3-11所示。

图3-11

2. 设置页面文本属性

① 将光标置于图3-12所示的位置，复制文本文件text.txt中相应文字到光标处。选择菜单【窗口】|【属性】，打开【属性】面板，选中文字“专题摘要：”，在【属性】面板中单击【HTML】按钮切换到HTML属性，再单击加粗按钮，将选中文字设为粗体，效果如图3-13所示。

图3-12

图3-13

② 将光标置于图3-14所示的位置，将文本文件text.txt中相应文字复制到光标处。将光标置于文字“未来，是机遇？是挑战？”后，按回车键实现分段，效果如图3-15所示。

图3-14

图3-15

③ 采用同样的方式，在“中国经济峰会 内容设置”栏目中，复制相应文字并换行分段，效果图3-16所示。

图3-16

④ 选择菜单【文件】|【页面属性】，打开【页面属性】对话框，如图3-17所示，选择【分类】栏中【标题/编码】，在【标题】文本框中输入“香格里湾峰会”。

图3-17

⑤ 在【分类】栏中选择【外观（CSS）】，在【大小】下拉文本框中输入14，在【文本颜色】文本框中输入#666，如图3-18所示。

图3-18

⑥ 在【页面字体】下拉框中选择“管理字体…”，如图3-19所示，打开【管理字体】对话框，选择【自定义字体堆栈】，如图3-20所示，在【可用字体】列表框中选择“微软雅黑”，单击按钮将所选的字体添加到【选择的字体】中，单击【完成】按钮。

图3-19

图3-20

⑦ 返回到【页面属性】对话框，在【页面字体】下拉框中选择“微软雅黑”，如图3-21所示，单击【确定】按钮完成了页面文本属性的设置。同时，在【CSS样式】面板的【CSS设计器】选项卡中又出现了body, td, th样式，如图3-22所示。

图3-21

图3-22

⑧ 保存网页文档，按<F12>键预览，观察网页效果。

3.1.2 网页的标题

网页标题是浏览者在访问网页时浏览器标题栏中显示的信息，可以帮助浏览者理解网页的内容。网页标题设置有两种方法。

（1）利用【页面属性】对话框。

① 选择菜单【文件】|【页面属性】或单击文本【属性】面板中的【页面属性】按钮。

② 单击【页面属性】对话框中【分类】栏中的【标题/编码】，在【标题】文本框中输入页面标题，单击【确定】完成设置。

（2）利用【新建文档】对话框。

① 选择菜单【文件】|【新建】，打开【新建文档】对话框，如图3-23所示。

图3-23

② 在【新建文档】的【文档类型】框中，选择【</>HTML】，在【框架】中选择【无】选项卡，在【标题】中输入页面标题文字，完成设置。

3.1.3 文本分段与换行

在网页中输入一些文本后，有时需要分段或换行。

（1）将光标置于需要分段处，按回车键形成一个新段落。在网页代码中，段落文字均包含在<p>和</p>标签中。

（2）将光标置于需要换行处，按住<Shift>键的同时，按回车键换行，但没有形成新的空行。在网页代码中，段落文字依然包含在<p>和</p>标签中，并在换行处添加了一个<br>标签。

3.1.4 输入空格

在Dreamweaver的【首选项】对话框中，可以设置输入单空格和多空格的状态切换，具体操作如下。

选择菜单【编辑】|【首选项】，在【首选项】对话框的【分类】栏中，如图3-24所示，选择【常规】，在【编辑选项】中勾选或取消勾选【允许多个连续空格】完成设置。

图3-24

除此之外，还可以通过以下两种方法输入空格。

（1）选择【插入】面板【HTML】选项卡，单击【不换行空格】按钮。

（2）将输入法转换到中文全角状态下，按<Space>空格键输入连续空格。

3.1.5 页面文字属性

新建网页时，页面文字的字体、大小和颜色等均有默认设置，可根据需要进行修改，具体步骤如下。

① 选择菜单【文件】|【页面属性】。

② 单击【页面属性】对话框【分类】栏中的【外观（CSS）】，在右侧设置【页面字体】、【大小】、【文本颜色】，如图3-25所示。

图3-25

【页面字体】下拉列表中只列出了部分系统字体，若所需的字体不在列表中，可以单击【管理字体…】，如图3-26所示。在【管理字体】对话框中，选择【自定义字体堆栈】，在【可用字体】列表框中选择所需的字体，如图3-27所示，单击按钮将所选的字体添加到左侧【选择的字体】中，如图3-28所示，单击【完成】按钮完成设置。

图3-26

图3-27

图3-28

页面文字属性设置完后，在【CSS样式】面板中出现了body, td, th样式，【代码】窗口中新增一段CSS样式代码：

body,td,th { 
font-family: 微软雅黑; 
font-size: 14px; 
color: #666; 
}

这段代码表示设置body、td和th元素的文字样式均为微软雅黑、大小为14px、颜色为#666。

3.1.6 显示不可见元素

在Dreamweaver中有些元素仅用于提示相关操作，可以在设计视图中显示，但在浏览器中是不可见的，这就是不可见元素，如换行符、脚本、命名锚记等。在默认情况下，不可见元素在设计视图中也是不显示的，为了方便操作和快速定位，需要改变不可见元素在设计视图中的可见性。

显示或隐藏不可见元素的操作步骤如下。

① 选择菜单【编辑】|【首选项】，打开【首选项】对话框。

② 在【首选项】对话框【分类】栏中选择【不可见元素】，在右侧单击相应元素的复选框实现显示或隐藏不可见元素，如图3-29所示，单击【应用】按钮完成设置。

图3-29

3.1.7 设置页边距

页边距指整个页面到浏览器左、右边缘和顶部、底部边缘的距离，通常设置为0。设置步骤如下。

① 选择菜单【文件】|【页面属性】。

② 在【页面属性】对话框【分类】栏中选择【外观（CSS）】，在【左边距】、【右边距】、【上边距】、【下边距】选项分别输入相应数值，如图3-30所示，单击【确定】按钮完成设置。

图3-30

设置完后在【CSS样式】面板的【CSS设计器】选项卡中可以看到创建了一个body样式，如图3-31所示。

图3-31

在【代码】窗口中看到新增一段代码：

body { 
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
} 

这段代码表示设置body元素的上、下、左、右外边距都为0。margin属性包括margin-left、margin-top、margin-right和margin-bottom，可以用来设置网页元素的外边距。

3.1.8 背景属性

网页背景可以填充为颜色，也可以填充为图像。更改网页背景的操作步骤如下。

① 选择菜单【文件】|【页面属性】。

② 单击【页面属性】对话框【分类】栏中的【外观（CSS）】，在右侧设置【背景颜色】【背景图像】【重复】等选项，如图3-32所示。

图3-32

如果同时设置了【背景颜色】和【背景图像】，并且背景图像不透明，则背景颜色被覆盖。【重复】选项下拉列表中，各选项含义如下。

no-repeat（不重复）：背景图像不重复。

repeat（重复）：背景图像在页面中重复。

repeat-x（重复-x）：背景图像在页面中横向重复。

repeat-y（重复-y）：背景图像在页面中纵向重复。

如果【重复】空白，默认为repeat。

3.1.9 跟踪图像

跟踪图像功能是将图像处理软件制作好的网页效果图放在页面背景中，在设计时依照图像进行布置，确保设计出的网页和效果图一致，跟踪图像在浏览器预览时不会显示，设计完毕后可以删掉跟踪图像。设置跟踪图像的步骤如下。

① 选择菜单【文件】|【页面属性】。

② 单击【页面属性】对话框【分类】栏中的【跟踪图像】，在右侧【跟踪图像】文本框中输入跟踪图像的路径和文件名。或者单击【浏览…】按钮，在【选择图像源文件】对话框中找到并选择跟踪图像，单击【确定】按钮。

③ 在【透明度】选项中设置跟踪图像透明度，如图3-33所示。

图3-33