第33章　博客主要页面布局

现在的博客网站流行已超过以前的BBS，一个人拥有几个博客空间早已是正常的事情，如QQ空间、51空间等。特别是学生，都喜欢个性化的界面，所以每个博客的定位人群都不一样，如QQ、163等博客，年轻人用得比较多，个性化界面的模板，网上到处都有。在博客构架方面，代码与界面模板是分离的，这样用户可以自由地更换自己喜欢的博客界面风格，而且操作简单。

本章介绍如何布局博客主要页面，如个人博客的主页，主页往往包含博客中所有模块的内容，也是博客总信息的汇总，本章是实践部分，从布局代码中体现出布局的要点。学完本章，会深深地体会到博客主页充分利用了以前学习过的知识，除了学习过的HTML和CSS方面的知识外，还会涉及本书没有介绍过的知识，如JavaScript脚本（js文件）和一个优秀的应用JS框架—jQuery，本章的内容用jQuery做出隐藏显示的动画效果，利用这个框架对网页前台设置师的帮助非常大。

学完本章，将要理解的内容如下：

❑博客网站主页规划；

❑用DIV布局博客主页的层；

❑CSS实现博客各模块；

❑给主页添加图片；

❑给主页添加文本文字；

❑从全局角度调整整个页面；

❑其他页面布局。

33.1　博客网站主页规划

博客网站个人主页都包含首页、相册、个人信息、日志、好友、好友流言和评论等功能模块，即在主页中显示所有模块最新内容。当然，显示的内容也是有规律的，如好友访问该博客后，是按最近访问的顺序显示，同理，给博客主人（简称博主）留言的也是从时间上往后推的排列方式。

除了如何设置各个模块的显示问题外，还得对模块位置进行设置，如相册放在博客首页的中间位置，个人信息放左上角，留言内容放置底部等，这样的布局和用户的习惯相关。本实例介绍如何布局博客主页，对主页的规划首先要分析好主页的需求，如本博客主要用户群是哪个年龄阶段的，还要确定内容的模块。所谓模块，是指个人信息和相册、日志等这些内容区域，最后依照这些需求设置网站的效果图。

下面关于页面的规划，分别来介绍分析主页需求、确定内容模块和画出效果图三步骤。

33.1.1　分析主页需求

主页的需求即该博客主页面主要对哪个领域或行业开放，即博客面向社会中的哪部分人。如技术性网站博客园以文章、留言为主，因为博客园定位的是技术性，主要用户都是由于技术需要来博客中探讨问题，这时就不需要相册和关于博主的星座等信息，往往技术人员在撰写技术文章时，文章功能和留言功能就够用了，文章功能主要用来写技术类文字（主要写技术性文字），当网友访问该文章时可能会通过留言的功能来评论文章的好或错误部分等。

同理，如果定位于学生、青少年这些年轻的群体，对相册、留言互动、界面外部个性等方面的花样要求就高得多，网易的博客模板就有1000多个不同的版本，QQ空间的模板更多。当然也得到了喜欢“非主流”人们的喜爱，更是博客商的准确定位。

当分析博客的主页需求时，也要分析该博客主要针对哪些人群，他们有什么样的爱好或习惯，对目标群准确地分析，才能对博客网站更准定位，这样的博客才会有用户注册。本章实例需求是以年轻人为主的游戏类博客，根据这种人群的习惯特征在博客上设置不同的模块。