个人博客首页制作技巧分享

以5.1节对个人博客网站首页的分析为依据，本节将对网站首页的8个组成模块进行实验操作，首页效果如图5-2-1所示。

图5-2-1　个人博客的效果图

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

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

个人博客网站首页的背景色为“紫红色”（颜色值：#663366），网页使用表格元素来布局，表格的背景色为“白色”，宽度为“800px”，正文字体大小为“16px”，字体颜色为“灰色”（颜色值：#666666），字体为“微软雅黑”，网页的8个内容模块制作的说明如下：

1.博客名和副标题

博客名以主副标题的方式呈现，位于网页的顶部区域，分别存放在布局表格（table）的第一、第二行中，主标题文本格式为 h1，副标题文本格式为 h5，并重新定义 h5 标签，在CSS中设置对应的样式。

2.导航菜单

导航菜单模块包括的菜单项有：首页、日志、相册、音乐、收藏、博友、邮箱和关于我，所以栏目设置超链接，其中“首页”链接到index.html，“关于我”链接到aboutme.html。

3.内容简介

内容简介模块主要是最近发布的文章的简介，有文章标题、发布时间、发布地点、内容简介、阅读量、评论数等。

4.关于我

关于我模块由栏目标题、用户头像、博客等级、今日访问、访问量、最后登录组成。

5.用户登录(www.xing528.com)

用户登录模块由栏目标题、文本域（input）、密码域（input）、按钮（input）和超链接（a）组成。

6.推荐文章

推荐文章模块由栏目标题和推荐文章组成，其中，推荐文章使用无序列表（ul）实现。

7.最近访客

最近访客模块由栏目标题、访客、最后访问时间组成，同样使用无序列表（ul）实现访客排列。

8.版权声明

版权声明模块位于布局表格的最底部，主要存放网站的版权说明和联系信息等。

其中，“个人博客”网站首页所有的图片素材存放在与首页文件同目录下的“images”文件夹中。

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