3.4 实例精讲——制作简单的文本页面
在实际中，不少类型的栏目网页都会拥有较多的文本，如新闻栏目、专题栏目、故事栏目等。下面通过一个读书栏目实例讲解文本页面的制作方法。
3-4 实例精讲——制作简单的文本页面
设计思路
本实例是制作一个读书栏目的页面。先使用表格布局制作出页面的整体框架，然后在相应的单元格中输入相应的图片和文字内容。选中文字，在“属性”面板上设置文字的相关属性，并对文字进行简单的排版，最终效果如图3-36所示。
图3-36 页面效果
制作重点
（1）选中页面上输入的文字，在“属性”面板上可设置相关的文字属性，例如字体大小、颜色等。
（2）在Dreamweaver CC 2018中有两种文字换行的方式：一种是通过按键盘上的Enter键，插入一个段落换行；另一种是通过按键盘上的Shift+Enter键，插入一个换行符，换到下一行继续输出。
操作步骤
1. 设置页面属性
启动Dreamweaver CC 2018，执行“文件”|“新建”命令，新建一个空白的HTML页面，然后执行“文件”|“保存”命令，保存文件。执行“文件”|“页面属性”命令，弹出“页面属性”对话框，设置页面字体为“新宋体”，大小为14px；单击“浏览”按钮，选择需要的背景图像，如图3-37所示。
图3-37 设置“页面属性”面板
在这里没有设置背景图像的重复方式，保留默认设置，即自动铺满整个页面。
2. 插入表格
执行“插入”|“表格”命令，在弹出的“表格”对话框中设置表格行数为3，列为2，表格宽度为800像素，边框粗细、单元格边距和单元格间距均为0，如图3-38所示。选中刚刚插入的表格，在“属性”面板上设置“对齐”属性为“居中对齐”。
3. 设计表格布局
将鼠标指针移至第1行单元格中，在“属性”面板上设置“高”为60，然后选中第1行单元格，单击“属性”面板上的“合并单元格”按钮，如图3-39所示。
同样的方法，合并第3行单元格。按住Ctrl键单击第1行和第3行选中这两行单元格，在“属性”面板上设置水平“居中对齐”，垂直“居中”，如图3-40所示。
图3-38 “表格”对话框
图3-39 合并单元格
图3-40 设置单元格内容对齐方式1
4. 插入图像
将鼠标指针放在第2行第2列单元格中，在“属性”面板上设置水平“右对齐”，垂直“底部”，如图3-41所示。然后执行“插入”|“图像”命令，在弹出的“选择图像源文件”对话框中，选择需要的图像文件，如图3-42所示。
图3-41 设置单元格内容对齐方式2
图3-42 插入图像的效果
5. 插入Div
将鼠标指针放在第2行第1列单元格中，执行“插入”|“Div”命令，弹出“插入Div”对话框，设置ID为text，如图3-43所示。单击“新建CSS规则”按钮，在弹出的对话框中单击“确定”按钮，打开“#text的CSS规则定义”对话框。
图3-43 “插入Div”对话框
（1）在“类型”分类中，设置行高（Line-height）为180%，如图3-44所示。
图3-44 设置行高
（2）在“区块”分类中，设置文本对齐方式（Text-align）为“左对齐”，如图3-45所示。
图3-45 设置文本对齐方式
（3）在“方框”分类中，设置高度（Height）为600px（与右侧图片高度相同），左（Left）、右（Right）填充为10px，左、右边距为auto，如图3-46所示。
图3-46 设置方框的高、填充和边距
设置完毕，单击“确定”按钮关闭对话框。此时在页面中将显示插入的Div布局块，删除布局块中的占位文本，效果如图3-47所示。
6. 输入标题文本
将鼠标指针放在第一行单元格中，输入文本，然后执行“插入”|“HTML”|“水平线”命令，插入一条水平线，如图3-48所示。
图3-47 插入Div布局块
图3-48 插入文本和水平线
7. 设置文本属性
选中输入的文本，在“属性”面板上的“格式”下拉列表中选择“标题1”，如图3-49所示；切换到CSS属性，设置字体为“华文行楷”，大小为30px，颜色为#FF6600，如图3-50所示，此时的文本效果如图3-51所示。
图3-49 设置格式为“标题1”
图3-50 设置CSS属性
图3-51 设置属性后的文本效果
8. 输入正文文本
将鼠标指针放在第2行第1列的Div布局块中，打开“HTML”插入面板，单击“不换行空格”按钮两次，如图3-52所示。插入两个不换行空格，然后输入其他文本。一段文本输入完成后，按Enter键插入一个换行符，使用同样的方法，插入其他文本，如图3-53所示。
图3-52 插入“不换行空格”
图3-53 插入文本的效果
9. 制作页脚
将鼠标指针放在第3行单元格中，执行“插入”|“HTML”|“水平线”命令，插入一条水平线；按Enter键换行，输入第1行文本，然后按Shift+Enter组合键，插入一个软回车，输入第2行文本。将鼠标指针放在要插入特殊符号的位置，在“HTML”插入面板上单击字符按钮，在弹出的下拉列表中选择注册商标，如图3-54所示；同样的方法，插入版权符号，效果如图3-55所示。
图3-54 插入特殊字符
图3-55 页脚效果
10. 保存文件并预览
执行“文件”|“保存”命令，保存页面，然后在浏览器中预览整个页面，效果如图3-37所示。