2.8 综合案例
本节将通过几个案例演示如何借助Dreamweaver设计网页正文版式和榜单栏效果。
2.8.1 设计榜单栏
视频讲解
在榜单栏中的每个列表项包含歌曲标题和歌曲演唱者信息，为了更好地组织榜单栏信息，这里使用项目列表嵌套定义列表的方式进行设计。
【操作步骤】
第1步，打开本小节模板文档index2.html，另存为index3.html。
第2步，打开文档，在【设计】视图下将光标置于歌曲名与演唱者名称之间，然后按Enter键，把它们分开为两个项目，如图2.47所示。
图2.47 切分项目文本
第3步，选择所有编号列表项，选择【格式】|【列表】|【定义列表】命令，把当前编号列表文本转换为定义列表，如图2.48所示。
图2.48 定义【定义列表】
第4步，切换到【代码】视图下，可以看到定义列表结构代码如下所示。
提示：其中<dl>标记定义新歌top100榜外框，<dt>标记定义歌曲标题名称，<dd>标记定义歌曲演唱者姓名，<dt>标记中可以嵌套多个<dd>标记。
第5步，在浏览器中预览，显示效果如图2.49所示。
图2.49 定义榜单显示效果
2.8.2 美化正文版式
视频讲解
正文在页面版式设置中占有重要的地位。网页正文所包含的设计元素比较多，例如，强制换行、文本对齐、文本缩进、背景图像等。本小节通过一个案例演示网页正文的常用设计方法。
【操作步骤】
第1步，打开本小节模板文档index.html，另存为index1.html。
第2步，在【设计】视图下，为每段文本进行强制换行显示。将光标置于第一段的前半句后面，选择【插入】|【字符】|【换行符】命令，或者按Shift+Enter快捷键快速强制换行文本。
提示：在HTML代码中一般使用<br>标记强制换行。不过在使用强制换行时，上下行之间依然是一个段落，同受一个段落格式的影响。
第3步，以同样的方式为所有段落文本进行强制换行，如图2.50所示。
图2.50 设计强制换行文本
第4步，分别选中标题1和标题2文本，在属性面板中单击【左对齐】按钮
，让标题左对齐。此时，在【代码】视图下，可以看到标题1和标题2样式代码的变化。
提示：文本对齐方式是指文本行相对文档窗口或者浏览器窗口在水平位置上的对齐方式，共包括4种方式：左对齐、居中对齐、右对齐和两端对齐。在属性面板的【HTML】选项卡中分别对应【左对齐】按钮
、【居中对齐】按钮
、【右对齐】按钮
和【两端对齐】按钮
。
第5步，设置段落文本缩进版式显示。
（1）把光标置于第1段文本中，在属性面板中单击【缩进】按钮
1次。
（2）把光标置于第2段文本中，在属性面板中单击【缩进】按钮
2次。
（3）把光标置于第3段文本中，在属性面板中单击【缩进】按钮
3次。
（4）把光标置于第4段文本中，在属性面板中单击【缩进】按钮
4次。
（5）把光标置于第5段文本中，在属性面板中单击【缩进】按钮
5次。
（6）把光标置于第6段文本中，在属性面板中单击【缩进】按钮
6次。
（7）把光标置于第7段文本中，在属性面板中单击【缩进】按钮
7次。
第6步，完成上面递增缩进操作之后，选择【修改】|【页面属性】命令，为网页背景添加一幅图像，定位到右下角，在浏览器中的预览效果如图2.51所示。其中代码如下：
图2.51 正文文本递增缩进效果
