
2.4 文档的基本操作
本节教学录像时间:14分钟
Dreamweaver CC为创建Web文档提供了灵活的环境。本节介绍创建文档的基本操作及文档属性的设置。
2.4.1 创建空白文档
制作网页应该从创建空白文档开始。具体操作步骤如下。
步骤01 选择【文件】【新建】菜单命令,打开【新建文档】对话框。

步骤02 选择【空白页】选项,在【页面类型】列表框中选择【HTML】选项,在右侧的列表框中选择【<无>】选项,然后单击【创建】按钮,即可创建一个空白文档。

2.4.2 设置页面属性
设置页面属性,即设置页面的外观效果。选择【修改】【页面属性】菜单命令,或按【Ctrl+J】组合键,打开【页面属性】对话框,从中可以设置外观、链接、标题、标题/编码和跟踪图像等属性。

1.设置外观
在【页面属性】对话框的【分类】列表框中选择【外观】选项,可以设置CSS外观和HTML外观的属性。
(1)【页面字体】
在【页面字体】下拉列表中可以设置文本的字体样式,如选择【黑体】样式,然后单击【应用】按钮,页面中的字体即可显示为黑体。

(2)【大小】
在【大小】下拉列表中可以设置文本的大小,这里选择“36”,在右侧的单位下拉列表中选择【px】单位,单击【应用】按钮,页面中的文本即可显示为36px大小。

(3)【文本颜色】
在【文本颜色】文本框中输入文本显示颜色的十六进制值,或者单击文本框左侧的【选择颜色】按钮,即可在弹出的颜色选择器中选择文本的颜色。

单击【应用】按钮,即可看到页面字体呈现为选中的颜色。

(4)【背景颜色】
在【背景颜色】文本框中设置背景颜色,这里输入蓝色的十六进制值“#06F”,完成后单击【应用】按钮,即可看到页面背景呈现出所输入的颜色。

(5)【背景图像】
在该文本框中,可直接输入网页背景图像的路径,或者单击文本框右侧的【浏览】按钮,在弹出的对话框中选择图像作为网页背景图像。

完成后单击【确定】按钮返回【页面属性】对话框,然后单击【应用】按钮,即可看到页面显示的背景图像。

小提示
【背景图像】和【背景颜色】不能同时显示。如果在网页中同时设置这两个选项,在浏览网页时则只显示网页的【背景图像】。
(6)【重复】
可选择背景图像在网页中的排列方式,有不重复、重复、横向重复和纵向重复4个选项。如选择【repeat-x】(横向重复)选项,背景图像就会以横向重复的排列方式显示。

(7)【左边距】、【上边距】、【右边距】和【下边距】用于设置页面四周边距的大小。
2.设置链接
在【页面属性】对话框的【分类】列表框中选择【链接】选项,则可设置链接的属性。

3.设置标题
在【页面属性】对话框的【分类】列表框中选择【标题】选项,则可设置标题的属性。

4.设置标题/编码
在【页面属性】对话框的【分类】列表框中选择【标题/编码】选项,可以设置标题/编码的属性,如网页的标题、文档类型和网页中文本的编码。

在【标题】文本框中输入标题文字“重新设置页面属性”字样,单击【应用】按钮,此时在文档窗口上方的【标题】文本框中即可显示重新输入的标题文字。

5.设置跟踪图像
在【页面属性】对话框的【分类】列表框中选择【跟踪图像】选项,则可设置跟踪图像的属性。

(1)【跟踪图像】
设置作为网页跟踪图像的文件路径,也可以单击文本框右侧的按钮,在弹出的对话框中选择图像作为跟踪图像。

小提示
跟踪图像是Dreamweaver中非常有用的功能。使用这个功能,可以先用平面设计工具设计出页面的平面版式,再以跟踪图像的方式导入到页面中,这样用户在编辑网页时即可精确地定位页面元素。

(2)【透明度】
拖动滑块,可以调整图像的透明度,透明度越高,图像越明显。

2.4.3 插入文本
文本是基本的信息载体,是网页中最基本的元素之一。在文件中运用丰富的字体、多样的格式以及赏心悦目的文本效果,对于网站设计师来说是必不可少的技能。
在网页中插入文本的具体步骤如下。
步骤01选择【文件】【打开】菜单命令。

步骤02 弹出【打开】对话框,在【查找范围】下拉列表中定义打开文件的位置为“素材\ch02\2.4\2.4.3\”,在下方的文件列表框中选择打开的对象“index.html”,完成后单击【打开】按钮。

步骤03 打开随书光盘中的“素材\ch02\2.4\2.4.3\index.html”文件,然后将光标放置在文档的编辑区。

步骤04 输入文字,如下图所示。

步骤05 选择【文件】【另存为】菜单命令,将文件保存为“结果\ch02\2.4\2.4.3\index.html”,按【F12】键在浏览器中预览效果。

小提示
在输入文本的过程中,换行时如果直接按【Enter】键,行距会比较大。一般情况下,在网页中换行时按【Shift + Enter】组合键,这样才是正常的行距。

也可以在文档中添加换行符来实现文本换行,有如下两种操作方法。
(1)选择【窗口】【插入】菜单命令,打开【插入】面板,然后单击【文本】选项卡中的【字符】按钮
,在弹出的列表中选择【换行符】选项。

(2)选择【插入】【HTML】
【特殊字符】
【换行符】菜单命令。
