个人博客网站内容页制作-网站制作基础

本节将实现个人博客网站的内容页制作，内容页包括 2 个子页面，分别是 aboutus.html和detail.html。

aboutus.html是“关于我们”的内容介绍页，主要展示关于博主的内容信息页面，该页面通常与网站首页风格保持一致，效果图如图5-3-1所示。

detail.html主要是展示个人博客网站的文章详情的内容页面，具有通用性，可以作为模板用于其他详情文章页面的结构复用，制作好一个详情页面后，只需更换文章内容就可以完成另外一个文章详情页面的制作，效果图如图5-3-2所示。

图5-3-1 “aboutus.html”效果图　

图5-3-2 “detail.html”效果图

（1）熟练掌握Dreamweaver CS6的操作技巧；

（2）合理运用HTML标记、CSS和脚本等知识来制作网页。

“aboutus.html”页面的基本风格与首页保持一致，该页面包含有“建博缘由”“关于作者”和“联系方式”3项内容模块，另外，“博客名”“副标题”“导航菜单”和“版权声明”模块与首页相同。

“detail.html”页面的背景色为“紫红色”（颜色值：#663366），与首页风格保持一致，网页使用表格元素来布局，表格的背景色为“白色”，宽度为“800px”，正文字体大小为“16px”，字体颜色为“灰色”（颜色值：#666666），字体为“微软雅黑”。网页的内容模块制作说明如下：

1.博客名、副标题、导航菜单、版权声明

这4个模块与5.2节中的首页对应模块介绍内容相同。

2.文章标题和副标题

文章标题和副标题模块主要展示该文章的标题和发表日期信息。

3.文章内容(www.xing528.com)

文章内容模块展示该篇文章的详细内容，通常包含文字、图片、视频等元素。

4.文章上下页链接

文章上下页链接模块是提供给浏览者可以查看该文章的上一篇和下一篇文章标题的超链接，目的在于引导浏览者继续访问网站其他内容设计的功能。

5.文章评论区

文章评论区模块主要展示所有评论者的评论信息，访问者可以查看网友的评论，了解其他评论者的观点。

6.文章回复区

文章回复区模块给访问者提供发表自己观点的功能，以便与其他网友交流对该文章的看法和观点。

计算机操作系统Windows 7/8/10、Dreamweaver CS6软件，Chrome/360/IE浏览器。