第33章博客主要页面布局.ppt

《第33章博客主要页面布局.ppt》由会员分享，可在线阅读，更多相关《第33章博客主要页面布局.ppt（17页珍藏版）》请在三一文库上搜索。

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

2、HTML和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代码来实现，本章实例中以DIV+CSS方式布局博客主页，因本书不是讲解动态网页内容，所以不会涉及到动态页面的内容（动态页面由HTML组成，网页源代码显

8、示出来的全是HTML标记）。 实例中，最终效果如图33.1所示，从博客主页效果图中切出来的图片放在专门放置图片的文件夹中，命名为images。,33.2 用div布局框图,本小节通过一张空网页的编写，慢慢实现博客主面的布局内容，博客主面分成页眉和内容模块和页脚，在博客中，页眉用来标明博客的名称和对博客的描述，往往用背景图作为名称的背景，该图可以体现博客的风格。在页眉下面有导航栏，用来链接主要模块的地址，如相册、日志等。具体的内容因不同模块放置在主页面的中间不同位置，如个人信息放在中部左上角，相片封面在中间显示，留言在中部的下面显示。最后在页脚声明博客版权，ICP备案号等信息。,33.2.1 页

9、眉,页眉是博客主页的头部，也是显示博客主题的位置，绝大部分博客都在这个位置用背景和几行简要文字叙述博客属性，如张三的博客为第一行，主要是博客名称，第二行为对博客的一种描述，如张三这样写学习HTML+CSS的技术博客。这样从页眉就可以看出，这博客是张三的，而且他喜欢写HTML，通常用CSS来布局等信息。 现在从HTML代码中，用DIV来描述出头部的层。分析一下，头部由两块组成，首先，在头部上面用一条黑色的框显示，然后下面用一张图片做DIV层的背景，然后放置两行文本，即博客名和对博客的描述。下面还有一层设置主要模块的链接，如首页，相册等，对页眉的层比较少，代码如下： 张三的博客 首个人档,33.2

10、.2 实现内容模块,内容模块的实现，在中间部分，共分三部分来布局，左中右的布局形式，即左面设置一个层，中间又设置一个层，在右边也设置一层，其中，中间部分的层最大，在这部分主要有相片和日志模块。,33.2.3 页脚,页脚的部分是整个网页的结束符，一般都放一些公司相关信息的链接，还有版权，备案ICP证号等。 在本项目中的页脚，用无序列表表示各个链接的文字，然后再做上链接，每个标记对都有文本和链接。通过两个层的表示，footer表示页脚的容器层，aboutus里面包含着无序列表，代码如下：,33.3 CSS实现框图,在33.2节中，设置好了DIV，并命名好CLASS和ID的选择符，接下来设置CSS的

11、样式，一个网页CSS对网页非常重要的，所以如何用CSS实现效果也是需要技巧的，同时，写好CSS后也要对CSS代码进行优化，这样对网页有更好的效果。,33.3.1 实现内容模块,从上面的层中设置了ID和CLASS选择符，下面是全部的样式表，对于比较难理解的样式做了注解（CSS代码用/*/注解，而HTML标记用注解），在存在很多CSS代码的情况下，需要单独新建一张样式表，然后保存时以“.css”为后缀的文件，要使用时链接到网页中即可，博客主页的样式内容如下。,33.3.2 实现整页效果,上面表示的是博客系统通过HTML标记和CSS代码的结合，使HTML代码与CSS样式关联起来，用网页表现博客的效果

12、。 因CSS代码保存为“boss.css”，为单独的样式文件，但需要链接到网页中才可以显示出效果，HTML设置的层标记也在上面的代码中，且CSS也保存了文件，那么需要在前面学习的标记把样式表引入进来，设置如下： 这条语句指导HTML标记与CSS文件联系了起来，其中表示链接的意思，而type表示类型，该类型指的是样式文本，即“text/css”，“rel”是Relations的所写，指关联到一个stylesheet（样式表单），然后“href”表示样式的链接地址，这样就把一个样式文件链接进来了，当然，要保证样式文件的正确性，而且在HTML对象标记中，用ID或类设置了对的选择符，这样才可以正常控制

13、标记并显示出来。,33.4 添加图片,博客的首页框图好了，下面来设置博客的图片，其中图片都是放在images文件夹下，本实例需要图片的有，logo图和每个功能模块的小图标等等。 对图片的添加，可以直接从IMG标记中引入，同时更多的小图片用CSS设置背景图像，如各功能模块中的图标等，为了使这些图标加入到功能模块的主题条上，而需要对原来的CSS文件进行设置。 因这些标记只在主页中使用，故可以用内联的方式设置样式，如左边的第一个区域是个人信息，而可以设置其他背景样式为： 个人信息 ,33.5 加入文字,文本文字在网页中是很关键的，也是博客中所表现出来的内容，在博客系统中，文本都是从数据库中取出，然后

14、在布局好的页面显示，本书只介绍布局方面的知识，对文本这块，只有手动的模拟些文本让网页显示出来，也方便初学者从此基础上再做更多的布局，内容更丰富。 本实例中的文本主要简单的添加，其中功能模块上显示的信息正表示其下所要显示的内容，如在左边顶部的个人信息模块，先信息博客主人的个性头像，接着显示性别，重要的信息等，左边中间的模块是我的好友，好友的名字和链接在其下，要注意的是，在博客显示的只是一部分，如全部显示需要再建页面用来显示链接，而且还要分页。 主页的中间部分，有我的日志，我的相册和最近评论，其中日志显示博客主人最近发表的10篇文章，相册中，每次显示一张，而且会自动切换，要实现这种功能需要用到fl

15、ash和js（JavaScript）知识，而最近评论显示以时间排序的评论。在右边显示的是心情和音乐方面的信息，这些信息都需要从数据库中取出，更新更快，但布局是实现这从数据库中取出内容的基础，效果如图33.4所示。,33.6 调整全页面,页面布局类似于盖高楼，先盖的时候，要规范好楼房的各个细节，而网页布局的每个细节也是需要注意的，同时要对不同的环境有所适应，如在IE中运行很好的网页不一定会在FF中显示正常，那么需要在代码中调整能在FF中正常显示。 调整大字标题的第一个词组。在每个加粗或大字标题的第一个词组比其他位置的词组对用户的刺激和影响会大很多，看看网页每个标题的第一个词组，还有没有比它更有影

16、响力的词组可以打动用户呢？有些标题的重点关键字在短句的较后位置，可以通过调整句子的表达方法把有影响力的关键字提前，这有利于“震撼”用户从而提高网站转化率。 最后网页能正常运行了，再接着做下一张页面。,33.7 其他页面布局,其他页面的布局与本实例风格一样，但实现的布局根据需要设置，如相册的布局与日志的布局页面不一样，而评论的页面又是其他的，只是实现各个功能，但博客风格还是统一的。 不管博客中的各模块功能如何实现，布局的差别也不会太大，如博客各页面的页头和页脚显示的内容总不会变。所以布局的样式一样，通过引入同一个CSS文件，来实现不同页面的同一个页头和页脚。 在页体中对不同的功能实现就要注意一下

17、，往往这些页面的布局要单独设置，在CSS编写中，可以单独出来，同时也可以在原有的CSS文件中，只不过每个CSS代码不要放置太多代码，即每张网页可以链入多个样式文件。 在布局中，除了可以链入多个样式文件外，还可以对一个选择符出现多次，如ID为mybox的ID选择符可以在一个CSS文件出现多次，也可以出现在不同的CSS样式，但对重复设置的属性，只对最后一次有效，但有好处就是在不同地方设置不同的属性内容，效果与放在一个mybox的样式中一样的。,33.8 小结,本章主要讲解博客系统的主页布局，从HTML与CSS代码的分离表示，并且用外部链接的方式把CSS文件链接进来。先从HTML中的层标记出发，然后分步骤对CSS代码列出，且进行说明其表示的功能。本博客的主页从布局到实现其他模块的功能，CSS代码比较多（实际项目的代码更多），这时需要对代码进行优化。 做好一个博客的主页面后，还需要其他各功能模块布局，其他页面用到的页头和页脚与主页一样的，同时部分页面的按钮或显示区域也是相同的，所以一个博客的风格就会统一起来，本实例只演示了博客布局的框架。,