3.4　实例精讲——制作简单的文本页面

在实际中，不少类型的栏目网页都会拥有较多的文本，如新闻栏目、专题栏目、故事栏目等。下面通过一个读书栏目实例讲解文本页面的制作方法。

设计思路

本实例是制作一个读书栏目的页面。先使用表格布局制作出页面的整体框架，然后在相应的单元格中输入相应的图片和文字内容。选中文字，在“属性”面板上设置文字的相关属性，并对文字进行简单的排版，最终效果如图3-36所示。

制作重点

（1）选中页面上输入的文字，在“属性”面板上可设置相关的文字属性，例如字体大小、颜色等。

（2）在Dreamweaver CC 2018中有两种文字换行的方式：一种是通过按键盘上的Enter键，插入一个段落换行；另一种是通过按键盘上的Shift+Enter键，插入一个换行符，换到下一行继续输出。

操作步骤

1. 设置页面属性

启动Dreamweaver CC 2018，执行“文件”|“新建”命令，新建一个空白的HTML页面，然后执行“文件”|“保存”命令，保存文件。执行“文件”|“页面属性”命令，弹出“页面属性”对话框，设置页面字体为“新宋体”，大小为14px；单击“浏览”按钮，选择需要的背景图像，如图3-37所示。

在这里没有设置背景图像的重复方式，保留默认设置，即自动铺满整个页面。

2. 插入表格

执行“插入”|“表格”命令，在弹出的“表格”对话框中设置表格行数为3，列为2，表格宽度为800像素，边框粗细、单元格边距和单元格间距均为0，如图3-38所示。选中刚刚插入的表格，在“属性”面板上设置“对齐”属性为“居中对齐”。

3. 设计表格布局

将鼠标指针移至第1行单元格中，在“属性”面板上设置“高”为60，然后选中第1行单元格，单击“属性”面板上的“合并单元格”按钮，如图3-39所示。

同样的方法，合并第3行单元格。按住Ctrl键单击第1行和第3行选中这两行单元格，在“属性”面板上设置水平“居中对齐”，垂直“居中”，如图3-40所示。

4. 插入图像

将鼠标指针放在第2行第2列单元格中，在“属性”面板上设置水平“右对齐”，垂直“底部”，如图3-41所示。然后执行“插入”|“图像”命令，在弹出的“选择图像源文件”对话框中，选择需要的图像文件，如图3-42所示。

5. 插入Div

将鼠标指针放在第2行第1列单元格中，执行“插入”|“Div”命令，弹出“插入Div”对话框，设置ID为text，如图3-43所示。单击“新建CSS规则”按钮，在弹出的对话框中单击“确定”按钮，打开“#text的CSS规则定义”对话框。

（1）在“类型”分类中，设置行高（Line-height）为180%，如图3-44所示。

（2）在“区块”分类中，设置文本对齐方式（Text-align）为“左对齐”，如图3-45所示。

（3）在“方框”分类中，设置高度（Height）为600px（与右侧图片高度相同），左（Left）、右（Right）填充为10px，左、右边距为auto，如图3-46所示。

设置完毕，单击“确定”按钮关闭对话框。此时在页面中将显示插入的Div布局块，删除布局块中的占位文本，效果如图3-47所示。

6. 输入标题文本

将鼠标指针放在第一行单元格中，输入文本，然后执行“插入”|“HTML”|“水平线”命令，插入一条水平线，如图3-48所示。

7. 设置文本属性

选中输入的文本，在“属性”面板上的“格式”下拉列表中选择“标题1”，如图3-49所示；切换到CSS属性，设置字体为“华文行楷”，大小为30px，颜色为#FF6600，如图3-50所示，此时的文本效果如图3-51所示。

8. 输入正文文本

将鼠标指针放在第2行第1列的Div布局块中，打开“HTML”插入面板，单击“不换行空格”按钮两次，如图3-52所示。插入两个不换行空格，然后输入其他文本。一段文本输入完成后，按Enter键插入一个换行符，使用同样的方法，插入其他文本，如图3-53所示。

9. 制作页脚

将鼠标指针放在第3行单元格中，执行“插入”|“HTML”|“水平线”命令，插入一条水平线；按Enter键换行，输入第1行文本，然后按Shift+Enter组合键，插入一个软回车，输入第2行文本。将鼠标指针放在要插入特殊符号的位置，在“HTML”插入面板上单击字符按钮，在弹出的下拉列表中选择注册商标，如图3-54所示；同样的方法，插入版权符号，效果如图3-55所示。

10. 保存文件并预览

执行“文件”|“保存”命令，保存页面，然后在浏览器中预览整个页面，效果如图3-37所示。