Microsoft Word - 11.doc

Chapter 11 Blog 一词是英文 Weblog 的简写, 其中文名称为网络日志, 又称为网络记事本 Weblog 是在网络上发布和阅读的流水记录, 这是一项非常热门的网络交流方式 撰写博客的人, 称之为 Blogger, 也可以翻译为博客, 而撰写博客的行为有时也称为博客 因此, 在中文里博客一词既是动词, 又是名词 11.1 博客 一词的来源 博客 一词, 最早起源于中国 有人这样认为, 在中国古代秦始皇暴政时期, 张良为刺杀秦始皇, 请了一位侠客, 并选定 博浪沙 作为刺杀地点, 结果刺杀失败 这一突发事件, 引起全国上下的极大关注, 争相进行报道 在报道的竹简上只写了一行 博浪沙之侠客, 博客由此而得名 由此可见, 博客 最初的含义是指某一项重大的突发事件 后来逐渐引申为 新闻 或其他值得一看的东西 事实上, 在敦煌及甘肃出土的竹简中也曾多次提到 博客 一词, 基本上都用于重大新闻之前 现如今的网络上很多人都有自己的博客, 访问彼此的博客已经成为继 QQ E-mail MSN ICQ 之后的又一热门网络交流方式 因此, 众多的 大型博客网站 应运而生, 作为网页设计师, 必须对博客网站的设计有一定的了解 博客网站的界面通常注重清晰明了, 以方便内容查找 因此, 对于布局的要求就是, 既有足够的容量可以容纳其网站内容, 又不能让界面过于复杂 本章就来介绍一下博客网站的布局设计, 先来看两种常用的博客网站布局, 如图 11-1 和图 11-2 所示 图 11-1 和图 11-2 分别是最常用的两种博客网站布局方式, 即常说的三行三列布局和三行两列布局 当然还有其他的布局方式, 如两行两列布局等 下面来看一下本节要讲的博客网站的布局效果, 如图 11-3 所示

图 11-1 三行三列布局图 11-2 三行两列布局 CSS+XHTML+JavaScript 网 页设计与布局从入门到精通 图 11-3 博客网站布局效果图 图 11-3 是本章要设计的博客网站效果图 其实, 如果单纯从布局上来看, 以上网站主页很简 单, 即顶部 主体和底部三部分, 而内容主体又分为左中右三部分, 下面来看一下布局图, 如 图 11-4 所示 顶部图片 左侧栏 右侧栏 492 底部栏 图 11-4 博客网站布局图 中心部分

以上是该博客网站的布局图, 可以看到, 此布局图和常规的博客网站有些不一样, 它采取的 是左右对称的方式进行设计的 在后面的设计过程中, 读者将会进一步体会前面所讲的内容 11.2 案例分析 首先要说明一点, 博客网站不同于其他类型的网站 其特点是内容较少, 简单易用, 而且网 站配色要依据个人的喜好来选择 本案例的实现可以从结构和样式两部分来实现 11.3 案例实现 结构定义 首先要进行的是网页的结构设计, 经过前面章节的学习, 读者朋友应该了解到在进行一个网站设计之前, 先要考虑的不是表现, 而是结构, 等结构设计完成之后, 再将表现的设计放到 CSS 中进行 11.3.1 网页主体结构 网页主体结构, 即 main 部分 这里用一个 div 元素来构成, 如 : <div id="main"> <!-- 网页主体 --> 以上是网页主体部分的结构设计, 非常简单, 它的作用是包含所有的网页内容, 并放在 body 元素之内 11.3.2 网页内容结构 在主体部分完成以后, 接下来是内容部分的结构设计, 即 content 部分 这里用了一个 div 元素来完成 <div id="main"> <!-- 网站主体内容 --> <div id="top"><!-- 网站顶部内容 --> <div id="middle"><!-- 网站中间内容 --> <div id="bottom"><!-- 网站底部内容 --> Chapter 11 注意以上代码中, 由 middle 这个 id 所定义样式的 div 元素, 就是本网页主体内容部分的结 构, 它的作用是包含左中右三栏 11.3.3 创建网页左中右三栏的结构设计 在网页主体内容部分, 由内部的三个 div 元素构成 如 : <div id="main"> <!-- 网站主体内容 --> <div id="top"><!-- 网站顶部内容 --> 493

<div id="middle"><!-- 网站中间内容 --> <div id="bottom"><!-- 网站底部内容 --> CSS+XHTML+JavaScript 网 以上代码, 分别由 top middle 和 bottom 三个 id 来定义样式的 div 元素, 就是网页顶部 中间和底部三部分内容, 下面来看一下这几部分的结构图, 如图 11-5 所示 可以看到, 以上结构中包含了全部网页内容, 至于内部的结构将在下一节完成 11.3.4 创建顶部结构 顶部 中间部分 底部 网站顶部包括一个 logo 图片和一个菜单, 其 结构如下 : 图 11-5 网站布局结构图 页设计与布局从入门到精通 <div id="top"> <div id="logo"><img src="picture/background.gif" /> <div id="menu"> <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> 在以上代码中, 由 logo 这个 id 进行样式规则的 div 元素, 用于包含 logo 图片 由 menu 这个 id 进行样式规则的 div 元素, 用于包含网站的顶部菜单 其显示效果如图 11-6 所示 图 11-6 网站顶部 当然, 如果想达到这样的显示效果, 还必须进行相应的 CSS 样式定义, 这些将在 CSS 样式表文件中通过相应的选择符进行 11.3.5 创建左侧部分结构 网站的中间部分, 包含了网站的大部分内容 该部分由左 中 右三栏构成, 现在分别来看一下这三部分的结构代码 494 <div id="middle"> <div id="left"> <div id="center"> <div id="right">

可以看到这三部分, 分别由 left center 和 right 三个 id 来规则样式 先来看一下左侧栏的内 部结构 : <div id="left"> <div id="left_item"> <div class="side_title"> <div id="image"> <li class="bottom"></li> <div id="left_item2"> <div class="side_title"> <li class="bottom"></li> 左侧栏分为上下两部分, 分别由 left_item 和 left_item2 两个 id 来定义样式 其内部又分别包 含了一个用于显示标题的, 由 side_title 这个 id 来规则样式的 div 元素 同时每一部分中都有一个 ul 列表, 用于显示内容 其显示效果如图 11-7 所示 Chapter 11 左侧栏 图 11-7 网站左侧栏 495

11.3.6 创建中间部分结构 中间部分由三部分构成, 这三部分又分别由 center_item center_item2 和 center_item3 三个 id 进行样式规则 其代码如下 : CSS+XHTML+JavaScript 网 页设计与布局从入门到精通 496 <div id="center"> <div id="center_item"> <div class="center_title"> <li class="title"> </li><li class="answer"> </li><li class="time"> </li>

<li class="title_slave bottom"></li> <li class="answer_slave bottom"></li> <li class="time_slave bottom"></li> <div id="center_item2"> <div class="center_title"> 相册更新 <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> <div id="center_item3"> <div class="center_title"> <li class="bottom"></li> 其中间部分的显示效果如图 11-8 所示 Chapter 11 中间部分 图 11-8 网页中间部分 497

11.3.7 创建右侧部分结构 CSS+XHTML+JavaScript 网 页设计与布局从入门到精通 网站右侧部分仍由三部分构成, 这三部分又分别由 right_item center_item2 和 right_item3 三个 id 规则样式 其代码如下 : <div id="right"> <div id="right_item"> <div class="side_title"> 公告 <p> 本站公告 </p> <div id="right_item2"> <div class="side_title"> 我的日志 <li><a href="#"> 打工日记 </a></li> <li><a href="#"> 微笑的记住 </a></li> <li class="bottom"></li> <div id="right_item3"> <div class="side_title"> 我的作品 <li class="bottom"></li> 其显示效果如图 11-9 所示 右侧栏 498 图 11-9 右侧栏

11.3.8 创建底部结构 网站底部, 由 bottom 这个 id 进行样式规则的 div 元素所构成 其内部还包含了一个用于定义底部标题的 div 元素, 该元素的样式由 bottom_title 这个 id 进行定义 代码如下 : <div id="bottom"> <div id="bottom_title"> 网页的底部结构比较简单, 其显示效果如图 11-10 所示 图 11-10 网页底部 11.4 案例实现 样式定义 上一节中完成了结构代码的定义, 下面继续进行样式代码的定义 11.4.1 main 部分 首先创建一个 css.css 样式表文件, 然后用 Link 元素, 将其链入到当前网页文件中 如 : <link href="css/css.css" type="text/css" rel="stylesheet" rev="stylesheet" /> 这一行代码的作用, 就是将外部 CSS 样式表文件链入到当前文档中, 以使当前文档可以直接使用在外部样式表中定义的样式 接下来, 先从最外层的 main 开始进行介绍 <div id="main"> <!-- 网页主体 --> 以上是网页主体 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; Chapter 11 499

CSS+XHTML+JavaScript 网 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 id="menu"> <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> 其样式如下 : 500 #top{ width:960px; height:145px; #logo,#logo img{

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 所示 Chapter 11 图 11-11 网站顶部显示效果 11.4.3 网站中间部分样式定义 将网站顶部样式定义完成之后, 接下来需要定义网站中间部分的样式 本例是通过一个 middle 的 id 进行样式定义的, 先来看一下结构代码 : <div id="middle"> 501

<!-- 中间部分的内容 --> 以上是结构代码, 样式代码如下 : CSS+XHTML+JavaScript 网 页设计与布局从入门到精通 #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 元素, 以及对其内部所包含元素的样式定义 先来看一下结构代码 : 502 <div id="left"> <div id="left_item"> <div class="side_title"> 个人资料 <div id="image"><img src="picture/photo.gif" /> <li> 姓名 : 王馨瑶 </li> <li> 年龄 :30 岁 </li> <li> 籍贯 : 黑龙江省佳木斯市 </li> <li> 毕业院校 :</li> <li> 擅长 :</li> <li> 爱好 :</li> <li class="bottom"></li> <div id="left_item2">

<div class="side_title"> 最新回复 <li> 感情太丰富了望尘莫及啊... </li> <li> 写的是你家宝贝吗... </li> <li> 姐姐来看看你... </li> <li> 很好啊一定常来...</li> <li> 走过 路过 踩过... </li> <li class="bottom"></li> 以上是结构代码, 其样式代码如下 : #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; Chapter 11 503

CSS+XHTML+JavaScript 网 页设计与布局从入门到精通 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 左右两栏的布局效果 504 图 11-12 是本例中左侧栏的布局效果, 在以上样式代码中还定义了 #image #image img 等选择符, 用于定义左侧栏中包含图片的元素, 以及其内部所包含图片的样式

11.4.5 中间栏样式定义 中间部分主要由 最新博文 相册更新 和 精品博文 三部分组成 而这三个部分的框 架又分别由 center_item center_item2 和 center_item3 三部分组成 先来回顾一下前面对 中间 栏 的结构定义 : <div id="center"> <div id="center_item"> <div class="center_title"> <li class="title"> </li><li class="answer"> </li><li class="time"> </li> Chapter 11 505

CSS+XHTML+JavaScript 网 页设计与布局从入门到精通 <li class="title_slave bottom"></li> <li class="answer_slave bottom"></li> <li class="time_slave bottom"></li> <div id="center_item2"> <div class="center_title"> 相册更新 <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> <div id="center_item3"> <div class="center_title"> <li class="bottom"></li> 注意以上结构代码中, 将 中间栏 利用以 center 这个 id 来规则样式的 div 元素划分成三部分, 接下来分别看一下这三部分的样式定义 先来看一下第一部分的样式定义 : #center_item{ width:496px; height:256px; margin:0 10px; border:#3399cc 1px solid; 以上 center_item 这个 id, 用于定义左侧栏的第一部分, 其内部各元素的样式定义如下 : 506 #center_item li{ text-align:left;

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; Chapter 11 507

其显示效果如图 11-13 所示 图 11-13 中间栏第一部分的显示效果 图 11-13 是 center_item 这个 id 所定义的样式效果 接下来再看一下第二部分 相册更新, 也就是由 center_item2 这个 id 进行样式规则的 div 元素, 其样式定义如下 : CSS+XHTML+JavaScript 网 页设计与布局从入门到精通 #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 所示 508 图 11-14 相册更新部分的显示效果

11.4.6 网页右侧栏部分样式定义 网页右侧栏部分, 包括 公告 我的日志 和 我的作品 三部分, 按习惯先来看一下其 右侧栏的结构代码 : <div id="right"> <div id="right_item"> <div class="side_title"> 公告 <p></p> <div id="right_item2"> <div class="side_title"> 我的日志 <li> </li> <li class="bottom"></li> <div id="right_item3"> <div class="side_title"> 我的作品 <li class="bottom"></li> Chapter 11 在以上结构代码中, 由 right 这个 id 所规则样式的 div 元素, 用于包含右侧栏的全部内容信息 在其内部元素中包含了 公告 我的日志 和 我的作品 等网站信息 下面来看一下右侧栏第一部分的样式代码 : #right_item{ width:220px; height:125px; border:#0099cc 1px solid; 以上样式中定义了网页右侧栏中 公告 部分的样式, 其显示效果如图 11-15 所示 509

图 11-15 网页右侧栏公告部分的显示效果 接下来看一下右侧栏中其他两部分的样式代码 : CSS+XHTML+JavaScript 网 页设计与布局从入门到精通 #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 网页底部栏样式定义 510 接下来看一下底部栏样式的定义, 底部栏相对简单, 由 bottom 和 bottom_title 两个 id 进行样 式规则 其结构如下 :

<div id="bottom"> <div id="bottom_title"> 以上是结构代码, 其样式代码如下 : #bottom{ width:960px; height:180px; #bottom_title{ width:960px; height:25px; background:url(../picture/menu_slave.gif); 其显示效果如图 11-17 所示 图 11-17 网站底部的显示效果 11.5 案例总结 本章案例结构相对简单, 由于博客网站通常内容不是很多, 所以对布局及美工的要求反而更高 这一点需读者朋友注意, 不是结构越简单的网站, 其开发难度越小 而且, 在开发网站时一定要将网站内容有机地整合 由于访问博客的人群很广, 要根据博客主人的交往范围确定网站内容, 所以一定要针对各人群的使用习惯而定, 尽量做到简单易用 Chapter 11 511