- Dreamweaver CC中文版网页设计与制作从新手到高手
- 吴东伟
- 948字
- 2021-03-19 19:00:26
3.4 练习：制作小说阅读页面
在Dreamweaver软件中，不仅可以通过视图界面操作，还可以通过编写代码制作出精美的网页。编写代码使用XHTML标记语言，该标记语言具有严格的语法规则。在本练习中，将通过编写代码来制作一个小说阅读页面。
练习要点
□使用<table>、<tr>和<td>标签布局
□添加<table>和<td>标签的属性并赋值
□段落标签<p>的应用
□标题标签<h3>和<h4>的应用
操作步骤
STEP｜01 启动Dreamweaver，在欢迎界面中选择HTML选项，创建一个空白页面。
STEP｜02 在页面下方的【属性】面板中，单击【页面属性】按钮。
STEP｜03 在弹出的【页面属性】对话框中的【外观（CSS）】选项卡中，设置页面文本大小、文本颜色和背景颜色。
STEP｜04 激活左侧的【链接（CSS）】选项卡，设置链接字体的大小和各种链接颜色。
STEP｜05 激活左侧【标题/编码】选项卡，在【标题】文本框中输入页面标题，并单击【确定】按钮。
STEP｜06 切换到【代码】视图，将光标放置在<body></body>之间，插入<table>等标签，创建一个7行×1列的表格。
STEP｜07 在<table>标签中添加width、align、cellpadding和cellspacing等属性。
STEP｜08 将光标放置在第1行单元格<tb></td>之间，输入“小说在线阅读网”文字，并使用<h3></h3>标题标签。
STEP｜09 将光标放置在第2行单元格<td>标签中，添加height和bgcolor属性并设置相应的值，设置该单元格的高度和背景颜色。
STEP｜10 将光标放置在第2行的单元格<td></td>标签之间，输入导航栏目文本，为每个文本的前后插入超链接代码<a href="#"></a>。
STEP｜11 在每个文本前插入6个空格符号“ ”，使各个栏目之间存在相同的空格。
STEP｜12 使用同样的方法，在第3行单元格中输入文本，并为每个文本的前后插入超链接代码。
STEP｜13 将光标放置在第4行单元格<td></td>之间，输入标题“第11回 有腾那背地求人”并使用<h4></h4>标题标签。
STEP｜14 在该单元格<td>标签中添加align="center"，以设置该单元格【水平】为居中对齐。
STEP｜15 将光标放置在第5行单元格<td></td>之间，切换至【设计】视图，粘贴文本。
STEP｜16 切换至【代码】视图，将光标放置在第6行单元格<td></td>标签之间，输入文本“（快捷键←）上一页回目录（快捷键Enter）下一页（快捷键→）”，并分别为每个文本插入超链接代码。
STEP｜17 将光标放置在该单元格<td>标签中，添加align属性并设置值为center。
STEP｜18 将光标放置在第7行单元格<td></td>标签之间，插入标签</hr>，在该单元格插入了一条分割线。同时，在<td>标签中添加align属性并设置值为center。
STEP｜19 输入版权信息，在段落开头插入标签<p>和结尾插入段落结束标签</p>。
STEP｜20 执行【文件】|【保存】命令，保存网页文档。同时，按下F12键，查看最终效果。
