“博客”一词的来源

“博客”一词，最早起源于中国。有人这样认为，在中国古代秦始皇暴政时期，张良为

刺杀秦始皇，请了一位侠客，并选定“博浪沙”作为刺杀地点，结果刺杀失败。这一突发

事件，引起全国上下的极大关注，争相进行报道。在报道的竹简上只写了一行“博浪沙之

侠客”，博客由此而得名。由此可见，“博客”最初的含义是指某一项重大的突发事件。后

来逐渐引申为“新闻”或其他值得一看的东西。事实上，在敦煌及甘肃出土的竹简中也曾

多次提到“博客”一词，基本上都用于重大新闻之前。现如今的网络上很多人都有自己的

博客，访问彼此的博客已经成为继 QQ、E-mail、MSN、ICQ 之后的又一热门网络交流方

式。因此，众多的“大型博客网站”应运而生，作为网页设计师，必须对博客网站的设计

有一定的了解。

博客网站的界面通常注重清晰明了，以方便内容查找。因此，对于布局的要求就是，既有足

够的容量可以容纳其网站内容，又不能让界面过于复杂。本章就来介绍一下博客网站的布局设

计，先来看两种常用的博客网站布局，如图 11-1 和图 11-2 所示。

图 11-1 和图 11-2 分别是最常用的两种博客网站布局方式，即常说的三行三列布局和三行两

列布局。当然还有其他的布局方式，如两行两列布局等。下面来看一下本节要讲的博客网站的布

局效果，如图 11-3 所示。

Chapter 11

个人博客网站布局

Blog 一词是英文 Weblog 的简写，其中文名称为网络日志，又称为网络记事本。Weblog 是在网络上发布和阅读的流水记录，这是一项非常热门的网络交流方式。撰写博客的人，称之为 Blogger，也可以翻译为博客，而撰写博客的行为有时也称为博客。因此，在中文里博客一词既是动词，又是名词。

11.1

492

CS

S+X

HT

ML+JavaS

cript

网页设计与布局从入门到精通

图 11-1 三行三列布局 图 11-2 三行两列布局

图 11-3 博客网站布局效果图

图 11-3 是本章要设计的博客网站效果图。其实，如果单纯从布局上来看，以上网站主页很简

单，即顶部、主体和底部三部分，而内容主体又分为左中右三部分，下面来看一下布局图，如

图 11-4 所示。

图 11-4 博客网站布局图

左侧栏

顶部图片

右侧栏

中心部分 底部栏

493

Chapter 11 个

人博客网站布局

以上是该博客网站的布局图，可以看到，此布局图和常规的博客网站有些不一样，它采取的

是左右对称的方式进行设计的。在后面的设计过程中，读者将会进一步体会前面所讲的内容。

案例分析

首先要说明一点，博客网站不同于其他类型的网站。其特点是内容较少，简单易用，而且网

站配色要依据个人的喜好来选择。本案例的实现可以从结构和样式两部分来实现。

案例实现——结构定义

首先要进行的是网页的结构设计，经过前面章节的学习，读者朋友应该了解到在进行一个网

站设计之前，先要考虑的不是表现，而是结构，等结构设计完成之后，再将表现的设计放到 CSS

中进行。

11.3.1 网页主体结构

网页主体结构，即 main 部分。这里用一个 div 元素来构成，如：

<div id="main"> <!--网页主体--> </div>

以上是网页主体部分的结构设计，非常简单，它的作用是包含所有的网页内容，并放在 body

元素之内。

11.3.2 网页内容结构

在主体部分完成以后，接下来是内容部分的结构设计，即 content 部分。这里用了一个 div 元

素来完成。

<div id="main"> <!--网站主体内容--> <div id="top"><!--网站顶部内容--></div> <div id="middle"><!--网站中间内容--></div> <div id="bottom"><!--网站底部内容--></div> </div>

注意以上代码中，由 middle 这个 id 所定义样式的 div 元素，就是本网页主体内容部分的结

构，它的作用是包含左中右三栏。

11.3.3 创建网页左中右三栏的结构设计

在网页主体内容部分，由内部的三个 div 元素构成。如：

<div id="main"> <!--网站主体内容--> <div id="top"><!--网站顶部内容--></div>

11.2

11.3

494

CS

S+X

HT

ML+JavaS

cript

网页设计与布局从入门到精通

<div id="middle"><!--网站中间内容--></div> <div id="bottom"><!--网站底部内容--></div> </div>

以上代码，分别由 top、middle 和 bottom 三

个 id 来定义样式的 div 元素，就是网页顶部、中间

和底部三部分内容，下面来看一下这几部分的结构

图，如图 11-5 所示。

可以看到，以上结构中包含了全部网页内容，

至于内部的结构将在下一节完成。

11.3.4 创建顶部结构

网站顶部包括一个 logo 图片和一个菜单，其

结构如下：

<div id="top"> <div id="logo"><img src="picture/background.gif" /></div> <div id="menu"> <ul> <li><a href="#">博客首页</a></li> <li><a href="#">精品博文</a></li> <li><a href="#">我的相册</a></li> <li><a href="#">我的资源</a></li> <li><a href="#">酷站收藏</a></li> <li><a href="#">请您留言</a></li> </ul> </div>

在以上代码中，由 logo 这个 id 进行样式规则的 div 元素，用于包含 logo 图片。由 menu 这

个 id 进行样式规则的 div 元素，用于包含网站的顶部菜单。其显示效果如图 11-6 所示。

图 11-6 网站顶部

当然，如果想达到这样的显示效果，还必须进行相应的 CSS 样式定义，这些将在 CSS 样式表

文件中通过相应的选择符进行。

11.3.5 创建左侧部分结构

网站的中间部分，包含了网站的大部分内容。该部分由左、中、右三栏构成，现在分别来看

一下这三部分的结构代码。

<div id="middle"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div>

图 11-5 网站布局结构图

顶部

中间部分

底部

495

Chapter 11 个

人博客网站布局

可以看到这三部分，分别由 left、center 和 right 三个 id 来规则样式。先来看一下左侧栏的内

部结构：

<div id="left"> <div id="left_item"> <div class="side_title"> </div> <div id="image"></div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="bottom"></li> </ul> </div> <div id="left_item2"> <div class="side_title"> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="bottom"></li> </ul> </div> </div>

左侧栏分为上下两部分，分别由 left_item 和 left_item2 两个 id 来定义样式。其内部又分别包

含了一个用于显示标题的，由 side_title 这个 id 来规则样式的 div 元素。同时每一部分中都有一个

ul 列表，用于显示内容。其显示效果如图 11-7 所示。

图 11-7 网站左侧栏

左侧栏

496

CS

S+X

HT

ML+JavaS

cript

网页设计与布局从入门到精通

11.3.6 创建中间部分结构

中间部分由三部分构成，这三部分又分别由 center_item、center_item2 和 center_item3 三个

id 进行样式规则。其代码如下：

<div id="center"> <div id="center_item"> <div class="center_title"> </div> <ul><li class="title"> </li><li class="answer"> </li><li class="time"> </li></ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul>

497

Chapter 11 个

人博客网站布局

<li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <li class="title_slave bottom"></li> <li class="answer_slave bottom"></li> <li class="time_slave bottom"></li> </ul> </div> <div id="center_item2"> <div class="center_title">相册更新</div> <ul> <li class="image"><img src="picture/one.jpg" /></li> <li class="image"><img src="picture/two.jpg" /></li> <li class="image"><img src="picture/three.jpg" /></li> <li class="image"><img src="picture/four.jpg" /></li> <li class="image"><img src="picture/five.jpg" /></li> </ul> </div> <div id="center_item3"> <div class="center_title"></div> <ul> <li></li> <li></li> <li></li> <li class="bottom"></li> </ul> </div> </div>

其中间部分的显示效果如图 11-8 所示。

图 11-8 网页中间部分

中间部分

498

CS

S+X

HT

ML+JavaS

cript

网页设计与布局从入门到精通

11.3.7 创建右侧部分结构

网站右侧部分仍由三部分构成，这三部分又分别由 right_item、center_item2 和 right_item3

三个 id 规则样式。其代码如下：

<div id="right"> <div id="right_item"> <div class="side_title">公 告</div> <p>本站公告</p> </div> <div id="right_item2"> <div class="side_title">我的日志</div> <ul> <li><a href="#">打工日记</a></li> <li><a href="#">微笑的记住</a></li> <li></li> <li></li> <li></li> <li></li> <li class="bottom"></li> </ul> </div> <div id="right_item3"> <div class="side_title">我的作品</div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="bottom"></li> </ul> </div> </div>

其显示效果如图 11-9 所示。

图 11-9 右侧栏

右侧栏

499

Chapter 11 个

人博客网站布局

11.3.8 创建底部结构

网站底部，由 bottom 这个 id 进行样式规则的 div 元素所构成。其内部还包含了一个用于定义

底部标题的 div 元素，该元素的样式由 bottom_title 这个 id 进行定义。代码如下：

<div id="bottom"> <div id="bottom_title"></div> </div>

网页的底部结构比较简单，其显示效果如图 11-10 所示。

图 11-10 网页底部

案例实现——样式定义

上一节中完成了结构代码的定义，下面继续进行样式代码的定义。

11.4.1 main 部分

首先创建一个 css.css 样式表文件，然后用 Link 元素，将其链入到当前网页文件中。如：

<link href="css/css.css" type="text/css" rel="stylesheet" rev="stylesheet" />

这一行代码的作用，就是将外部 CSS 样式表文件链入到当前文档中，以使当前文档可以直接

使用在外部样式表中定义的样式。接下来，先从最外层的 main 开始进行介绍。

<div id="main"> <!--网页主体--> </div>

以上是网页主体 main 部分的结构，现在要做的第一步就是对该部分的样式进行定义，即在样

式表文件 css.css 中定义一个名为 main 的 id，如：

*{ margin:0; padding:0; border:0; font-family:"宋体", "新宋体", "仿宋_GB2312", "Arial Unicode MS", Arial; font-size:12px; } body{ text-align:center; } ul{ list-style-type:none;

11.4

500

CS

S+X

HT

ML+JavaS

cript

网页设计与布局从入门到精通

clear:left; margin:0 -1px; voice-family:"\"}\""; voice-family:inherit; margin:0; } li{ text-align:left; } #main{ width:960px; margin:10px auto; font-family:"宋体","黑体" }

这里定义最外层的 div 元素的宽度为 960 像素，上下外边距为 10 像素，左右外边距定义为

auto（定义此外边距的目的，是为了让所包含元素与浏览器边框有一定距离，并且水平居中显

示），注意这里定义了 body 元素的 text-align 属性，这一部分的作用比较特殊，主要是为了能够

在 IE 5.X 及以下版本的浏览器中，让网页内的元素居中显示。除此之外，以上样式定义中还包括

“*”通用选择符和 ul、li 等几个类型选择符。其中，“*”通用选择符用于定义所有元素的共同样

式，而 ul、li 等类型选择符，主要是用于定义某一类元素的共同样式。最后，main 这个 id 用于定

义外层 div 元素的样式。

11.4.2 top 部分样式代码的定义

由 main 这个 id 所规则样式的 div 元素，其内部包含的元素又分为 top、middle 和 bottom 三

部分。先来看一下第一个 div 元素，即由 top 这个 id 所规则样式的 div 元素，其结构代码如下：

<div id="top"> <div id="logo"><img src="picture/background.gif" /></div> <div id="menu"> <ul> <li><a href="#">博客首页</a></li> <li><a href="#">精品博文</a></li> <li><a href="#">我的相册</a></li> <li><a href="#">我的资源</a></li> <li><a href="#">酷站收藏</a></li> <li><a href="#">请您留言</a></li> </ul> </div> </div>

其样式如下：

#top{ width:960px; height:145px; } #logo,#logo img{

501

Chapter 11 个

人博客网站布局

width:960px; height:110px; } #menu{ width:960px; height:35px; border-top:#43B9F8 1px solid; background:url(../picture/menu.gif); } #menu li{ float:left; width:160px; height:35px; line-height:35px; color:#FFFFFF; font-size:16px; font-weight:600; text-align:center; } #menu a{ display:block; width:160px; height:35px; color:#0F6A8C; text-decoration:none; } #menu a:hover{ color:#FF0000; text-decoration:underline; background:url(../picture/menu2.gif); }

以上样式代码中定义了 top 这个 id，用于规则顶部元素的样式。该 div 元素内部又包含了由

logo 和 menu 两 id 进行样式规则的 div 元素。并且在 menu 内部由一个 ul 无序列表构成了网页顶

部菜单，这些元素都由以上代码进行样式规则。其显示效果如图 11-11 所示。

图 11-11 网站顶部显示效果

11.4.3 网站中间部分样式定义

将网站顶部样式定义完成之后，接下来需要定义网站中间部分的样式。本例是通过一个

middle 的 id 进行样式定义的，先来看一下结构代码：

<div id="middle">

502

CS

S+X

HT

ML+JavaS

cript

网页设计与布局从入门到精通

<!--中间部分的内容--> </div>

以上是结构代码，样式代码如下：

#middle{ position:relative; width:960px; height:560px; margin:10px 0; } #middle p{ text-indent:2em; font-size:12px; line-height:25px; vertical-align:middle; } #middle a{ color:#000000; text-decoration:none; } #middle a:hover{ color:#FF0000; text-decoration:underline; }

以上样式代码，利用 middle 这个 id 规则了中间 div 元素的样式，以及通过“#middle p”、

“#middle a”和“#middle a:hover”等选择符，定义了其内部所包含的 p 元素、a 元素的样式。

11.4.4 左侧栏样式定义

对左侧栏的样式定义，包括“#left,#right”、“#left”、“#right”等多个选择符，其中包括用于

定义外层左侧栏的 div 元素，以及对其内部所包含元素的样式定义。先来看一下结构代码：

<div id="left"> <div id="left_item"> <div class="side_title">个人资料</div> <div id="image"><img src="picture/photo.gif" /></div> <ul> <li>姓名：王馨瑶</li> <li>年龄：30 岁</li> <li>籍贯：黑龙江省佳木斯市</li> <li>毕业院校：</li> <li>擅长：</li> <li>爱好：</li> <li class="bottom"></li> </ul> </div> <div id="left_item2">

503

Chapter 11 个

人博客网站布局

<div class="side_title">最新回复</div> <ul> <li>感情太丰富了 望尘莫及啊... </li> <li>写的是你家宝贝吗... </li> <li>姐姐来看看你... </li> <li>很好啊一定常来...</li> <li>走过、路过、踩过... </li> <li class="bottom"></li> </ul> </div> </div>

以上是结构代码，其样式代码如下：

#left,#right{ width:220px; height:480px; position:absolute; top:0; } #left{ left:2px; } #left_item{ width:220px; height:350px; border:#3399CC 1px solid; } #left_item #image{ width:180px; height:120px; margin:10px; border:#3399CC 1px solid; } #image img{ width:170px; height:110px; margin:5px; } #left li,#right li{ width:210px; height:25px; line-height:25px; vertical-align:middle; margin:0 5px; border-bottom:#CCCCCC 1px dashed; } #left_item2{ width:220px;

504

CS

S+X

HT

ML+JavaS

cript

网页设计与布局从入门到精通

height:185px; margin-top:10px; border:#3399CC 1px solid; } .side_title,.center_title{ height:25px; line-height:25px; vertical-align:middle; border-bottom:#3399CC 1px solid; margin-top:1px; font-size:14px; color:#0F6A8C; font-weight:600; font-family:"宋体"; background:url(../picture/menu_slave.gif); voice-family:"\"}\""; voice-family:inherit; text-indent:1em; } .side_title{ width:220px; }

在以上样式代码中，“#left,#right”组合选择符用于规则左右两栏的相同样式。“.side_title”、

“.side_title,.center_title”等选择符用于规则各标题的样式。left_item 和 left_item2 等选择符用于规

则左侧栏内部的第一部分和第二部分，即“个人资料”和“最新回复”两部分的样式。其显示效

果如图 11-12 所示。

图 11-12 左右两栏的布局效果

图 11-12 是本例中左侧栏的布局效果，在以上样式代码中还定义了“#image”、“#image

img”等选择符，用于定义左侧栏中包含图片的元素，以及其内部所包含图片的样式。

左侧栏

显示效果

505

Chapter 11 个

人博客网站布局

11.4.5 中间栏样式定义

中间部分主要由“最新博文”、“相册更新”和“精品博文”三部分组成。而这三个部分的框

架又分别由 center_item、center_item2 和 center_item3 三部分组成。先来回顾一下前面对“中间

栏”的结构定义：

<div id="center"> <div id="center_item"> <div class="center_title"> </div> <ul><li class="title"> </li><li class="answer"> </li><li class="time"> </li></ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li>

506

CS

S+X

HT

ML+JavaS

cript

网页设计与布局从入门到精通

<li class="time_slave"></li> </ul> <ul> <li class="title_slave"></li> <li class="answer_slave"></li> <li class="time_slave"></li> </ul> <li class="title_slave bottom"></li> <li class="answer_slave bottom"></li> <li class="time_slave bottom"></li> </ul> </div> <div id="center_item2"> <div class="center_title">相册更新</div> <ul> <li class="image"><img src="picture/one.jpg" /></li> <li class="image"><img src="picture/two.jpg" /></li> <li class="image"><img src="picture/three.jpg" /></li> <li class="image"><img src="picture/four.jpg" /></li> <li class="image"><img src="picture/five.jpg" /></li> </ul> </div> <div id="center_item3"> <div class="center_title"></div> <ul> <li></li> <li></li> <li></li> <li class="bottom"></li> </ul> </div> </div>

注意以上结构代码中，将“中间栏”利用以 center 这个 id 来规则样式的 div 元素划分成三部

分，接下来分别看一下这三部分的样式定义。

先来看一下第一部分的样式定义：

#center_item{ width:496px; height:256px; margin:0 10px; border:#3399CC 1px solid; }

以上 center_item 这个 id，用于定义左侧栏的第一部分，其内部各元素的样式定义如下：

#center_item li{ text-align:left;

507

Chapter 11 个

人博客网站布局

background:url(../picture/menu_slave2.gif); text-indent:5px; } #center .title,#center .answer,#center .time{ float:left; height:20px; line-height:20px; vertical-align:middle; text-align:center; font-size:12px; color:#0F6A8C; margin:0; border:0; } #center .title{ width:296px; } #center .answer,#center .time{ width:99px; voice-family:"\"}\""; voice-family:inherit; width:100px; } #center .center_title{ width:496px; } #center .title_slave,#center .answer_slave,#center .time_slave{ float:left; height:20px; line-height:20px; vertical-align:middle; font-size:12px; background:#FFFFFF; color:#0F6A8C; margin:0; } #center .title_slave{ width:296px; } #center .answer_slave,#center .time_slave{ width:99px; voice-family:"\"}\""; voice-family:inherit; width:100px; }

508

CS

S+X

HT

ML+JavaS

cript

网页设计与布局从入门到精通

其显示效果如图 11-13 所示。

图 11-13 中间栏第一部分的显示效果

图 11-13 是 center_item 这个 id 所定义的样式效果。接下来再看一下第二部分“相册更新”，

也就是由 center_item2 这个 id 进行样式规则的 div 元素，其样式定义如下：

#center_item2{ width:496px; height:126px; margin:10px 10px 0 10px; border:#3399CC 1px solid; }

以上样式，由#center_item2 这个 id 来定义中间栏第二部分的样式代码，其内部样式代码

如下：

#center .image{ float:left; display:inline; width:88px; height:80px; border:#0099CC 1px solid; margin:3px 3px 3px 5px; } #center img{ width:88px; height:80px; }

其中，“#center .image”和“#center .image”两个选择符，用于定义其内部包含相册图片的

div 元素，以及所包含图片的样式。其显示效果如图 11-14 所示。

图 11-14 相册更新部分的显示效果

509

Chapter 11 个

人博客网站布局

11.4.6 网页右侧栏部分样式定义

网页右侧栏部分，包括“公告”、“我的日志”和“我的作品”三部分，按习惯先来看一下其

右侧栏的结构代码：

<div id="right"> <div id="right_item"> <div class="side_title">公 告</div> <p></p> </div> <div id="right_item2"> <div class="side_title">我的日志</div> <ul> <li></li> <li> </li> <li></li> <li></li> <li></li> <li></li> <li class="bottom"></li> </ul> </div> <div id="right_item3"> <div class="side_title">我的作品</div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="bottom"></li> </ul> </div> </div>

在以上结构代码中，由 right 这个 id 所规则样式的 div 元素，用于包含右侧栏的全部内容信

息。在其内部元素中包含了“公告”、“我的日志”和“我的作品”等网站信息。下面来看一下右

侧栏第一部分的样式代码：

#right_item{ width:220px; height:125px; border:#0099CC 1px solid; }

以上样式中定义了网页右侧栏中“公告”部分的样式，其显示效果如图 11-15 所示。

510

CS

S+X

HT

ML+JavaS

cript

网页设计与布局从入门到精通

图 11-15 网页右侧栏公告部分的显示效果

接下来看一下右侧栏中其他两部分的样式代码：

#right_item2{ width:220px; height:215px; margin-top:10px; border:#0099CC 1px solid; } #right_item3{ width:220px; height:185px; margin-top:10px; border:#0099CC 1px solid; }

至于，右侧栏内部 ul 无序列表及 li 列表项的样式，已经在前面样式中定义过了。下面来看一

下网页右侧栏的显示效果，如图 11-16 所示。

图 11-16 网页右侧栏显示效果

11.4.7 网页底部栏样式定义

接下来看一下底部栏样式的定义，底部栏相对简单，由 bottom 和 bottom_title 两个 id 进行样

式规则。其结构如下：

右侧栏

511

Chapter 11 个

人博客网站布局

<div id="bottom"> <div id="bottom_title"></div> </div>

以上是结构代码，其样式代码如下：

#bottom{ width:960px; height:180px; } #bottom_title{ width:960px; height:25px; background:url(../picture/menu_slave.gif); }

其显示效果如图 11-17 所示。

图 11-17 网站底部的显示效果

案例总结

本章案例结构相对简单，由于博客网站通常内容不是很多，所以对布局及美工的要求反而更

高。这一点需读者朋友注意，不是结构越简单的网站，其开发难度越小。而且，在开发网站时一

定要将网站内容有机地整合。由于访问博客的人群很广，要根据博客主人的交往范围确定网站内

容，所以一定要针对各人群的使用习惯而定，尽量做到简单易用。

11.5