![Dreamweaver CC中文版网页设计与制作从新手到高手](https://wfqqreader-1252317822.image.myqcloud.com/cover/545/27110545/b_27110545.jpg)
3.4 练习:制作小说阅读页面
在Dreamweaver软件中,不仅可以通过视图界面操作,还可以通过编写代码制作出精美的网页。编写代码使用XHTML标记语言,该标记语言具有严格的语法规则。在本练习中,将通过编写代码来制作一个小说阅读页面。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00186.jpg?sign=1738891244-EpXmR8SHPIXCJUfIjkvAghCzQ6zGE9hi-0-5b362187f2ab56efbaa6c2f2dc1bdcda)
练习要点
□使用<table>、<tr>和<td>标签布局
□添加<table>和<td>标签的属性并赋值
□段落标签<p>的应用
□标题标签<h3>和<h4>的应用
操作步骤
STEP|01 启动Dreamweaver,在欢迎界面中选择HTML选项,创建一个空白页面。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00187.jpg?sign=1738891244-NFKRa4Yz62DP5vgQfRJwwQCbtRfGrBjV-0-3a352b430ecd60e277e54f662cd48d6e)
STEP|02 在页面下方的【属性】面板中,单击【页面属性】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00188.jpg?sign=1738891244-1UF3MQcXRSdIRMgt54ZI2O0joU9FiUqi-0-271f81e6539901cde34c9efae13cd1c4)
STEP|03 在弹出的【页面属性】对话框中的【外观(CSS)】选项卡中,设置页面文本大小、文本颜色和背景颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00189.jpg?sign=1738891244-4UB36IH3Ohk6oHI2fySjSwyjcrIBN0wa-0-dda7eb7e3fdf2fc277468df4f12692bc)
STEP|04 激活左侧的【链接(CSS)】选项卡,设置链接字体的大小和各种链接颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00190.jpg?sign=1738891244-fNyaYIScdYDwHRFDJNXbrmV7939ll3Yr-0-a1244bb117263599a1b686474a095c56)
STEP|05 激活左侧【标题/编码】选项卡,在【标题】文本框中输入页面标题,并单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00191.jpg?sign=1738891244-mw1fMjEn3ZoCWMWfhYfAKOchFzYyPujj-0-5e5e36d1d41c8ae50fa8e2fd5e48b2a5)
STEP|06 切换到【代码】视图,将光标放置在<body></body>之间,插入<table>等标签,创建一个7行×1列的表格。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00192.jpg?sign=1738891244-uTRoKfrIPCSZVHqFpQMdGTwurY5jkT9Z-0-79124155788e3790ddfc8f50fec15d67)
STEP|07 在<table>标签中添加width、align、cellpadding和cellspacing等属性。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00193.jpg?sign=1738891244-HsxInjdMJeFz80WaGRnXvNBELsA7LDrd-0-ee8c9795685227c4d4c83c5edec8586e)
STEP|08 将光标放置在第1行单元格<tb></td>之间,输入“小说在线阅读网”文字,并使用<h3></h3>标题标签。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00194.jpg?sign=1738891244-fsfEWf9DNA0T2kqJXDS9nKkWcW6WSJVU-0-d03aefa8ebad099c62337a9d8c930194)
STEP|09 将光标放置在第2行单元格<td>标签中,添加height和bgcolor属性并设置相应的值,设置该单元格的高度和背景颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00195.jpg?sign=1738891244-2pRoMUulBQXXPYGxIGRprGpCHisRxb0A-0-265257127c0c1ce2084ca0ebe9a31b56)
STEP|10 将光标放置在第2行的单元格<td></td>标签之间,输入导航栏目文本,为每个文本的前后插入超链接代码<a href="#"></a>。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00196.jpg?sign=1738891244-trzFb9uUlo68bpgO9dfn5MjFoYPDkLvE-0-9edb0220249061c0df9752a41e7ca95c)
STEP|11 在每个文本前插入6个空格符号“ ”,使各个栏目之间存在相同的空格。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00197.jpg?sign=1738891244-15C1sRlMT3xJEy2HVgBb24gRfqGwInwW-0-7944a6839806d1d120cdf502e961011b)
STEP|12 使用同样的方法,在第3行单元格中输入文本,并为每个文本的前后插入超链接代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00198.jpg?sign=1738891244-ia7WTDACDjdRFEqEVtXlXhzi1L8TxvNi-0-2246ef2fe47f1e434e77976e4c63f4ef)
STEP|13 将光标放置在第4行单元格<td></td>之间,输入标题“第11回 有腾那背地求人”并使用<h4></h4>标题标签。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00199.jpg?sign=1738891244-TINtOKt3Uytfa1osFgZRVwsQu1VbsFM0-0-63ce5d5b583bae658e4eb5f905c91ab4)
STEP|14 在该单元格<td>标签中添加align="center",以设置该单元格【水平】为居中对齐。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00200.jpg?sign=1738891244-Owx1IAIbBlrMU0iVOLkRhYLkWNbdnG0u-0-1559804c7ae68d49041c7eabdab1f00d)
STEP|15 将光标放置在第5行单元格<td></td>之间,切换至【设计】视图,粘贴文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00201.jpg?sign=1738891244-oKLVDH4cjTf2Ar5SPkW9hITRhPGYM8ki-0-87eabb53c375d2cdd8fb1c29c73fa097)
STEP|16 切换至【代码】视图,将光标放置在第6行单元格<td></td>标签之间,输入文本“(快捷键←)上一页回目录(快捷键Enter)下一页(快捷键→)”,并分别为每个文本插入超链接代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00202.jpg?sign=1738891244-z6h7s7MJX21qwwhksP2KZPJXtOXO3pmT-0-eaaede4926066b0a2f84631add0d45a1)
STEP|17 将光标放置在该单元格<td>标签中,添加align属性并设置值为center。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00203.jpg?sign=1738891244-Ume5G0b3ZPkRYak3qOYA49XiMc9V5EDB-0-73bdb6628c8994785e6e42c57ec554d5)
STEP|18 将光标放置在第7行单元格<td></td>标签之间,插入标签</hr>,在该单元格插入了一条分割线。同时,在<td>标签中添加align属性并设置值为center。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00204.jpg?sign=1738891244-PD5bZuE0JpaNAOFUXEX65JTCC3Zdi0Gu-0-e74fcb10986550e4f159361154d1dec2)
STEP|19 输入版权信息,在段落开头插入标签<p>和结尾插入段落结束标签</p>。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00205.jpg?sign=1738891244-ieJzkvUq9O9SeuEBTjuw4e77KOgSNXLU-0-2f2c2cb4f26111a44d48a3ea597a0cd4)
STEP|20 执行【文件】|【保存】命令,保存网页文档。同时,按下F12键,查看最终效果。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00206.jpg?sign=1738891244-3FYzqiCYHD4pW9k6wf4anVQFBuIwKq3H-0-68f5cc75e8cadee4831e0bf58df8748c)