博客主要页面布局

《博客主要页面布局》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第33章博客主要页面布局现在博客网站流行已超过以前的BBS，一个人拥有几个博客空间早已是正常的事情，如QQ空间、51空间等。特别是现在的学生，都喜欢个性化的界面，所以每个博客的定位人群都不一样，如QQ、163等博客年青人用的比较多，个性化界面的模板网上到处都有。现在的博客构架方面，代码与界面模板都是分离的，这样用户可以自由地更换自己喜欢的博客界面风格，而且操作简单。本章来介绍如何布局博客主要页面，如个人博客的主页，主页往往包含博客中所有模块的内容，也是博客总信息的汇总，本章是实践部分，所以从布局代码中体现出布局的要点。学完本章，会深深地体会到博客主页充分利用以前学习过的知识，除了学习过的HTM

2、L和CSS方面的知识外，还会涉及本书没有介绍过的知识，如JavaScript脚本（js文件）和一个优秀应用JS框架—jquery，本章的内容用jquery做出隐藏显示的动画效果，利用这个框架对网页前台设置师的帮助非常大。学完本章，将要理解的内容有：博客网站主页规划用DIV布局博客主页的层CSS实现博客各模块给主页添加图片给主页添加文本文字从全局角度调整整个页面其他页面布局33.1博客网站主页规划博客网站个人主页都会包含有首页、相册、个人信息、日志、好友、好友流言和评论等功能模块，即在主页中，要显示所有模块的部分最新内容。当然，显示的内容也是有规律的，如好友访问该博客后，是按最近访问的顺序显示，

3、同理，给博客主人（简称博主）留言的也是从时间上往后推的排列方式。除了各个模块中如何设置显示问题外，还得对模块位置进行设置，如相册放在博客首页的中间位置，个人信息放左上角，留言内容放置最下面等，这样的布局和用户习惯关系很大。在本实例中，来介绍如何布局博客主页，对主页的规划首先要分析好主页的需求，如本博客主要用户群是哪个年龄阶段的，还要确定内容的模块。所谓模块，是指个人信息和相册、日志等这些内容区域，最后依照这些需求设置网站的效果图。下面关于页面的规划，分别来介绍分析好主页需求、确定内容模块和画出效果图三步骤分析过程。33.1.1分析好主页需求主页的需求即该博客主页面主要对哪个领域或行业开放的，即

4、博客面向社会中的哪部分人。如技术性网站博客园，该博客网站中以文章、留言为主，因为博客园定位是技术性的，主要用户都是做技术需要，来博客中探讨问题，这时就不太需要相册和关于博主的星座等信息，往往技术人员在撰写技术文章时，从文章功能和留言功能差不多就可以了，文章主要用来写技术类文字（主要写技术性文字），留言的功能当网友访问该文章时可能会得到网友的留言来评论文章的好或部分错误等。同理，如果定位于学生、青少年这些年青的群体，对相册、留言互动、界面外面个性等方面的花样要求就高得多，网易的博客模板就有1000多个不同的版本，QQ空间的模板更多。当然也得到了喜欢“非主流”人们的喜爱，更是博客商的准确定位。当自

5、己来分析博客的主页需求时，也要分析该博客主要针对哪些人群，他们有什么样的爱好或习惯分析，对目标群做一个很好的分析，才能对博客网站更准定位，这样的博客才会有用户注册。本章实例需求以年青人主为的游戏类博客，对于这种人群的习惯的特征在博客上设置不同的模块。33.1.2确定内容模块当分析好博客主页需求时，了解了博客的需求，同时也明白了让用户注册博客的目的，必然对内容模块做出准确划分。本实例做一个游戏类博客，分析玩游戏的人群大部分是年青人，因这部分人的生活环境影响，他们喜欢潮流的，有个性的界面并带有些游戏元素等特征博客界面，同时对模块的设置可如下分析：个人信息可列出博客主人的网名、性别、年龄、所喜欢的游

6、戏（因为一起玩同一个游戏的人有共同点，他们之间也会交流），即个人信息用简单的文本描绘更多的信息；我的好友模块用来显示一起玩游戏或在网上认识的网友博客地址，加在好友列表中；最近访客的模块中，可以显示到目前为此的这段时间内，有哪些用户访问过这个博客，当博客主人看到他们的朋友访问的自己博客时，是很高兴的事情；当好友访问博客时，顺便还留言了，这样好友与博客主人之间互动起来，使他们沟通的距离又更近了一步，同时也体现出该功能的用途；好友过来，一定要有些吸引的东西给他们看，如日志上写了最近对某个游戏的玩法，当好友访问这篇文章时，感到收获不少，也吸引了他们在下次内容更新时回访；与日志模块一样，相片的吸引效果更

7、直接，当多年没见的同学在博客上看到时，心里说不出的激动。33.1.3画出效果图与做网站一样，博客也需要美术的支持，通过这些美术人员的设计，把博客需求和模块转化成效果图，通过网页效果图来看整体网页，如果效果图做得好，那么用代码（指HTML代码写出来的语言，先从动态网页离不开HTML）和通过美术人员切好的图来实现HTML标记，最终效果在网页中显示出来。有了效果图，就有了博客的最终目标，用HTML代码来