Microsoft Word - 11.doc

Size: px

Start display at page:

Download "Microsoft Word - 11.doc"

寿杭
5 years ago
Views:

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

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

如果单纯从布局上来看, 以上网站主页很简单, 即顶部主体和底部三部分, 而内容主体又分为左中右三部分,

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

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

4 <div id="middle"> <div id="bottom"> CSS+XHTML+JavaScript 网以上代码, 分别由 top middle 和 bottom 三个 id 来定义样式的 div 元素, 就是网页顶部中间和底部三部分内容, 下面来看一下这几部分的结构图, 如图 11-5 所示可以看到, 以上结构中包含了全部网页内容, 至于内部的结构将在下一节完成创建顶部结构顶部中间部分底部网站顶部包括一个 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 样式表文件中通过相应的选择符进行创建左侧部分结构网站的中间部分, 包含了网站的大部分内容该部分由左中右三栏构成, 现在分别来看一下这三部分的结构代码 494 <div id="middle"> <div id="left"> <div id="center"> <div id="right">

5 可以看到这三部分, 分别由 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

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>

7 <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

8 创建右侧部分结构 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 右侧栏

9 创建底部结构网站底部, 由 bottom 这个 id 进行样式规则的 div 元素所构成其内部还包含了一个用于定义底部标题的 div 元素, 该元素的样式由 bottom_title 这个 id 进行定义代码如下 : <div id="bottom"> <div id="bottom_title"> 网页的底部结构比较简单, 其显示效果如图所示图网页底部 11.4 案例实现样式定义上一节中完成了结构代码的定义, 下面继续进行样式代码的定义 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

10 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 元素的样式 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{

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 无序列表构成了网页顶部菜单, 这些元素都由以上代码进行样式规则其显示效果如图所示 Chapter 11 图网站顶部显示效果网站中间部分样式定义将网站顶部样式定义完成之后, 接下来需要定义网站中间部分的样式本例是通过一个 middle 的 id 进行样式定义的, 先来看一下结构代码 : <div id="middle"> 501

12  以上是结构代码, 样式代码如下 : 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 元素的样式左侧栏样式定义对左侧栏的样式定义, 包括 #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">

13 <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

14 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 等选择符用于规则左侧栏内部的第一部分和第二部分, 即个人资料和最新回复两部分的样式其显示效果如图所示左侧栏显示效果图左右两栏的布局效果 504 图是本例中左侧栏的布局效果, 在以上样式代码中还定义了 #image #image img 等选择符, 用于定义左侧栏中包含图片的元素, 以及其内部所包含图片的样式

15 中间栏样式定义中间部分主要由最新博文相册更新和精品博文三部分组成而这三个部分的框架又分别由 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

16 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;

17 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

$CSS+XHTML+JavaScript 网页设计与布局从入门到精通 #center_item2{ width:496px; height:126px; margin:10px 10px 0 10px; border:#3399cc 1px solid; 以上样式, 由$ #center_item2 这个 id 来定义中间栏第二部分的样式代码, 其内部样式代码如下 : #center.

#center_item2 这个 id 来定义中间栏第二部分的样式代码, 其内部样式代码如下 : #center.

18 其显示效果如图所示图中间栏第一部分的显示效果图是 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 元素, 以及所包含图片的样式其显示效果如图所示 508 图相册更新部分的显示效果

19 网页右侧栏部分样式定义网页右侧栏部分, 包括公告我的日志和我的作品三部分, 按习惯先来看一下其右侧栏的结构代码 : <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; 以上样式中定义了网页右侧栏中公告部分的样式, 其显示效果如图所示 509

$图 11-15 网页右侧栏公告部分的显示效果接下来看一下右侧栏中其他两部分的样式代码 : CSS+XHTML+JavaScript 网页设计与布局从入门到精通 #right_item2{ width:220px; height:215px; margin-top:10px; border:#0099cc 1px solid; #right_item3{ width:220px;$

20 图网页右侧栏公告部分的显示效果接下来看一下右侧栏中其他两部分的样式代码 : 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 列表项的样式, 已经在前面样式中定义过了下面来看一下网页右侧栏的显示效果, 如图所示右侧栏图网页右侧栏显示效果网页底部栏样式定义 510 接下来看一下底部栏样式的定义, 底部栏相对简单, 由 bottom 和 bottom_title 两个 id 进行样式规则其结构如下 :

21 <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.5 案例总结本章案例结构相对简单, 由于博客网站通常内容不是很多, 所以对布局及美工的要求反而更高这一点需读者朋友注意, 不是结构越简单的网站, 其开发难度越小而且, 在开发网站时一定要将网站内容有机地整合由于访问博客的人群很广, 要根据博客主人的交往范围确定网站内容, 所以一定要针对各人群的使用习惯而定, 尽量做到简单易用 Chapter

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05