[人力快车白领博客]数据正在载入中...
隐藏-/- 显示右部导航

做一个属于自己的漂亮模版 
sean 发表于 2006-5-11 15:34:00

一、基本必要条件

1.1 做模版需要什么能力吗?

  做OBLog的模版你需要了解HTML和CSS还有美工基础,当然这不是很难,甚至可以说很简单,不会的朋友马上学,买书一个星期就可以学会。另外就是细心、耐心,毕竟我们也是在做设计,严格要求是当然的。

1.2 准备工具

  一台电脑,制作网页的工具Macromedia Dreamweaver MX 2004和做图工具Macromedia Fireworks MX 2004(PS也可以)。测试浏览器Mozilla irefox,IE6.0在XP下自带。截图工具HprSnap5,论坛里有使用方法(滚屏截图)。这几个工具可以在天空下载站下载到。

Macromedia Dreamweaver MX 2004:
http://www2.skycn.com/soft/860.html
Macromedia Fireworks MX 2004:
http://www2.skycn.com/soft/1824.html
Mozilla Firefox V1.0.6 中文增强版
http://www2.skycn.com/soft/20595.html
SN:
Macromedia Dreamweaver MX 2004:
WPD700-52206-61494-40475
Macromedia Fireworks MX 2004:
WPD700-52206-61494-40475
Macromedia Studio 8正式版序列号
flash:WPD800-53933-19632-12307
dreamweaver:WPD800-52430-29332-35254
fireworks:WPD800-59537-39432-12200
  这里还要推荐一款很好用的CSS编写软件:TopStyle3。你可能用不到。下载地址:http://skin.midicn.cn/soft/TopStyle3.rar
  以及《样式表中文手册css2》是CHM格式的,可直接打开。你一定要用到。下载地址:http://skin.midicn.cn/soft/css2.rar
  屏幕滚动截图工具HprSnap5。做好模版后截图工具,可能用到。下载地址:http://skin.midicn.cn/soft/HyperSnap-DX.rar

二、构思

2.1 色调

  首先要考虑BLOG的基本色系是什么颜色,然后是基本布局,这里我们不做太复杂的,只做最简单的考虑。这里我考虑绿色,而且只考虑绿色和灰色搭配。(传说中灰色是万能色,就好象O型血一样。)

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}">

2.2 布局

  BLOG的布局很简单,不用考虑太多因素。最常见的无非是左右两列布局(我们不讲太个性的)。

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

三、制图

  在FW下面新建一个890*1344的图。优化设置里面选择PNG32格式(推荐使用PNG格式的图片,导出后画质最好,体积小。个人经验。)

3.1 背景

  我们先考虑整个页面的背景色,使用#CCFF66颜色。

  然后是中间部分的背景图片,我们设计一个圆角矩形,效果如下图。

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

3.2 HEAD的设计

  再把刚才的大圆角矩形复制粘贴一遍,并且把修改高度到150,注意使用鼠标拖放修改,直接修改数字会变形。(汽车人)

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

  从网上随便找个风景图,然后使用魔术棒随便扣,再填充成灰色,再“平面化所选”,再把尺寸对齐,多余的削掉,位图属性设置成“屏幕”。
  在合适的地方画个矩形,特效是阴影。这样看起来会和背景和谐。

500){this.resized=true;this.style.width=500;}" border=0>

3.3 FOOTER的设计

  再复制圆角矩形,和刚才的HEAD修改一样,颜色改成黑色。注意细节。

500){this.resized=true;this.style.width=500;}" border=0>

  现在整个背景就OK了,新建一个图层,并且把这个图层锁定。

3.4 公告烂的设计

  公告栏简单,看图。

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

3.5 内容页的设计

  我是这么设计的。

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

3.6 RIGHT的的设计

  做一个标题文字的背景。

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

3.7 BLOG分类背景图的设计

  两个矩形,一个色浅,用做连接色,一个色深,用做鼠标拖过。左边加个小箭头点缀。矩形的宽尽量宽,因为没准哪个BLOGGER的分类名字很长。(切图的时候把这两个图切成一个。)

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

四、切图

  终于,我们把BLOG的基本外观设计完成,这个过程不像本教程似的一气呵成,而是经过了几天的时间才设计出来的,而且,这还不是我们BLOG的最终形态,这只是一张只能看的图,接下来的步骤就是把这个基本结构设计图切成一小块一小块的,以便于我们做成模版。
  按照下面的图切就没有问题了。背景图一定要居中。一共是8个图片。每个切片的名字就是图片上红色的字。

500){this.resized=true;this.style.width=500;}" border=0>

  不会的请下载源文件参考。http://skin.midicn.cn/jc/mbjc/htm/youth.rar

五、制作模版

  这里主要是HTML和CSS的代码编写。

5.1 布局(我不直接全部写进去,循序渐进的慢慢来。)

  终于,可以开始进入正题了,所谓“难者不会,会者不难”,我们使用的是CSS+DIV来制作,优点是显示速度很快,设计灵活,而且W3C重点推荐,希望大家也能这样制作模版,代码简单容易看懂。
  打开Dreamweaver MX 2004,文件--新建--HTML页面,把兼容XHTML勾上,进入代码界面,把里面的代码全部删除掉。然后我们可以快乐健康的做网页了~
  首先先建五个层,并且分别给他们一个ID。代码如下:

500){this.resized=true;this.style.width=500;}" border=0>

<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css"><!-- CSS连接代码 -->
<div id="head"></div>
<!-- HEAD是最上面的层 -->

<div id="content"><!-- CENTENT包括LEFT和RIGHT两个层 -->
<div id="left"></div><!-- LEFT是BLOG内容的层 -->
<div id="right"></div><!-- RIGHT是“登陆信息,最新BLOG”等的层 -->
</div>

<div id="footer"></div><!-- FOOTER是最下面版权的层 -->

  这样,基本的布局层就出来了,我们开始着手制作CSS文件,新建一个CSS文件,开始定义样式。
  先是BODY的定义:(注意书写格式,下面的是国际标准格式......汗)

body {
color: #333;  /* 本模版所有文字的颜色,我们使用略深的灰色 */
background: #CF6;  /* 本模版的背景色,就是做图时的背景色,浅绿色 */
text-align: center;  /* 本模版内所有属性居中 */
margin: 0;  /* 外边距,默认好象是10,我们设置成0,因为是0所以可以不要单位。 */
font-family: 'Century Gothic', Arial, Helvetica, sans-serif;  /* 本模版所有使用的字体,我觉得Century Gothic英文字体很好看,所以一直在用这个字体。 */
font-size: 12px;  /* 本模版所有字体的大小,12px是FIREFOX下最小的显示字体,IE是11px,为了兼容性,我们选择12px。 */
line-height: 150%;  /* 所有字的行高,这里设置的是150%,习惯。 */
}

a {
color: #749A23;  /* 所有连接文字的颜色,我们使用深一些的绿色。 */
text-decoration: none;  /* 所有连接文字的去掉下划线,默认是有的。 */
}
a:hover {
color:#CF6;  /* 所有鼠标拖过连接文字的颜色,我们使用浅一些的绿色。 */
}

  接下来就是HEAD的样式了~

#head {
height: 135px;  /* HEAD的高。 */
width: 780px;  /* HEAD的宽,780是在800*600下的推荐宽度。 */
text-align: left;  /* HEAD层内所有所有属性居左。 */
background: url("header.png") no-repeat top center;  /* HEAD的背景属性,分别是:背景图URL,背景图不重复,在层的位置:上 中。 */
}

  我们这回用IE打开刚才的页面看看,怎么样???是不是最上面的层出来了?是不是很兴奋?(好兴奋,好兴奋哦~~)

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index1.htm

500){this.resized=true;this.style.width=500;}" border=0>

  我们继续CONTENT层的制作~

#content {
padding:10px;  /* CONTENT层内边距10px。 */
width:780px;  /* CONTENT的宽,780px,和上面的HEAD层对齐。 */
text-align:left;  /* CONTENT层内容居左。 */
background: url("bg.png") repeat-y center;  /* CONTENT的背景属性,分别是:背景图URL,背景图重复在Y轴上(纵向重复显示),在层的位置:中。 */
}

  然后是FOOTER层。

#footer {
width:780px;  /* FOTTER层宽780px。 */
height: 43px;  /* FOTTER层高43px,根据切出来的图的大小定义。 */
color: #fff;  /* FOTTER层内字体颜色,因为背景是黑色,我们选择白色,而且这个地方只准备放版权。 */
text-align: left;  /*  FOTTER层内容居左。 */
padding:13px 0px 0px 30px;  /* FOTTER层的内边距定义,分别是 上 右 下 左。 */
background: url("footer.png") no-repeat;  /* FOTTER的背景属性(我们省略掉一部分属性,因为是浏览器默认的),分别是:背景图URL,背景图不重复。 */
}

  OK!!我们在HEAD,CONTENT,FOOTER每个层分别随便打几个字上去测试!效果如下:

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index2.htm

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

   如果你明白我们为什么这么定义层属性的话,那么恭喜你,你已经基本学会XHTML+CSS制作网页了(理论)。怎么样?是不是Too Easy?

5.2 我的分类

  我们开始制作“我的分类”的属性。
  因为OBLog3.0的分类是标签是用li属性的,所以我们要复制“我的分类”HTML源代码到模版页面测试,只是测试,测试完了要删除的。
  加入“我的分类”代码的模版HTML如下:(这是SNAKE的,每个人的都不一样。)
  我们使用红色的粗体表示。

<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">

<div id="head">

<ul>
<li><a href="/blog/user1/1243/index.shtml">首页</a></li>
<li><a href="/blog/user1/1243/archives/photo/index.shtml">相册</a></li><li><a href="/blog/user1/1243/subject/2337.shtml">记日(44)</a></li>
<li><a href="/blog/user1/1243/subject/2413.shtml">乐音(2)</a></li>
<li><a href="/blog/user1/1243/subject/2338.shtml">作工(10)</a></li>
<li><a href="/blog/user1/1243/subject/2345.shtml">戏游(2)</a></li>
<li><a href="/blog/user1/1243/subject/2454.shtml">计设(9)</a></li>
<li><a href="/blog/user1/1243/subject/671.shtml">静和(13)</a></li>
</ul>

</div>

<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>

<div id="footer"></div>

  然后是“我的分类”CSS样式的制作。
  我说明一下,写CSS的习惯每个人都不一样,有的人喜欢先写大布局代码,然后是其他的代码,SNAKE喜欢按照顺序写,也就是从上到下的方式,下面就按照SNAKE喜欢的方式写。
  在#head的类下面插入下面的代码:

#head ul, #head li {   /* HEAD层内UL标签和LI标签的样式属性。 */
float:left;  /* 内容居左,就是横向显示,LI标签默认是竖向显示。 */
margin:0;  /* 外边距,默认的不是0,所以我们要给它个值。 */
display:block;  /* 块级元素,必须有。这个比较难解释,书上是这么写的:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。汗~~ */
}
#head li a{   /* HEAD LI标签内连接样式。 */
height: 26px;   /* 高度26。 */
padding:3px 5px 0px 20px;   /* 内边距,定义连接文字在LI标签的位置。 */
color: #666;   /* 连接色。 */
background:url("mainli.png") no-repeat left top;   /* 连接的背景,连接到我们设计的背景图片上去,从左上开始显示,并且不重复。 */
border: 1px solid #999;   /* 连接的边框,使用灰色。 */
}
#head li a:hover{   /* HEAD LI标签内连接之鼠标拖过样式。 */
color:#333;   /* 拖过之颜色。 */
background:url("mainli.png") no-repeat 0px -26px;   /* 拖过后的背景,我们使用的图片和连接的背景图片是同一张,这样做的好处是节省带宽。要搞清楚位置,-26是从高位-26的地方开始显示图片,设计的时候要明白为什么这么做。 */
}

  刷新页面,看看我们网页。效果如下图:

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index3.htm

500){this.resized=true;this.style.width=500;}" border=0>

  每个分类挨的比较近,我们不需要改,因为根据SNAKE的经验:OBLog3.0的分类,系统默认会分开一些。所以最终效果不是这样的。

5.3 LEFT的制作

  左边是显示文章标题、内容等的位置,我们要根据图片的设计来完成它。
  先是定位。因为LEFT在CONTENT层内,所以代码写在#CONTENT样式下面。因为内容比较重要,所以要做的细一些,我们连接字的色,拖过,访问后都要定义,区别文章内颜色。

#left {
float: left;  /* LEFT层在CONTENT中的位置,要居左。 */
width: 520px;  /* LEFT层宽度。 */
padding: 0px 20px 0px 20px;  /* 内边距,左右要留下间隙。 */
color: #333;  /* LEFT层内所有字体的颜色,SNAKE使用深灰色,比纯黑色要舒服。 */
text-align: justify;  /* LEFT层内容的文字两端对齐,这在OFFICE里面经常用到,是细节,不要也可以。 */
border-right: 1px dotted #999;  /* LEFT层右侧加一条灰色的虚线,LEFT和RIGHT的分界线。 */
}

#left a{
color:#749A23;  /* LEFT层内连接字体色。 */
text-decoration: none;  /* LEFT层内连接字体去掉下划线。 */
}
#left a:hover {
color:#C1E27D;  /* LEFT层内鼠标拖过连接字体色。 */
text-decoration:underline;  /* LEFT层内鼠标拖过连接字带有下划线。 */
}
#left a:visited {
color:#666;  /* LEFT层访问后的连接字体色。 */
}

  在LEFT内随便打几个字,测试,效果如下:

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index4.htm

500){this.resized=true;this.style.width=500;}" border=0>

   打几个带有连接的字,并且分别测试:连接字体字体色,鼠标拖过连接字体色,访问后的连接字体色。

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index5.htm

500){this.resized=true;this.style.width=500;}" border=0>

 5.4 公告栏

  进展好快!已经到公告栏了!这个比较简单~先在模版页面LEFT层内新建一个公告栏的层,和LEFT一样,也要测试连接字体色等等。

  现在的HTML如下:
<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">

<div id="head"></div>

<div id="content">
<div id="left">
<!-- 下面的就是公告栏的层 -->
<div id="placard">涡虫我草<a href="3">敌素活圣诞节</a>巴斯德看<a href="4">见发表苦不管</a>客观内<a href="7">可是地方</a>病感反对看见</div>

</div>
<div id="right"></div>
</div>

<div id="footer"></div>

  我们开始定义公告栏的CSS:

#placard {
margin: 10px 10px 10px 10px;  /* 公告层外边距。 */
padding: 10px 5px;  /* 公告层内边距。 */
color: #3A5014;  /* 公告层内字体色。 */
background: #C1E27D url("placard.png") no-repeat top right;  /* 公告层内背景色,背景图,背景图从右上开始显示,不重复。就是哪个双引号。 */
border-top: 1px solid #666;  /* 公告层上面的灰黑色实线。 */
border-bottom: 1px solid #666;  /* 公告层下面的灰黑色实线。个人觉得上下各一条线比较有个性,当然也可以是灰黑色边框。 */
}
#placard:first-letter {  /* 公告层内第一个字样式定义。 */
margin: 0pt 5pt 0pt 0pt;  /* 公告层内第一个字的外边距。 */
padding: 3px;  /* 公告层内第一个字的内边距。 */
font: 20px bold;  /* 公告层内第一个字的字体大小,粗体。 */
float: left;  /* 公告层内第一个字居左对齐,排版的人知道,至于为什么加你可以把这个样式属性去掉试试。 */
border : 1px dotted #fff;  /* 公告层内第一个字的边框,1象素,虚线(好象是虚点),线颜色。 */
}
#placard p:first-letter {  /* 和上面的定义是一样的,但是这个段落的定义(注意多了个P),因为有的人在加公告的时候弄成段落格式的了,所以也需要定义一下。 */
margin: 0pt 5pt 0pt 0pt;  /* 公告层内第一个字的外边距。 */
padding: 3px;  /* 公告层内第一个字的内边距。 */
font: 20px bold;  /* 公告层内第一个字的字体大小,粗体。 */
float: left;  /* 公告层内第一个字居左对齐,排版的人知道,至于为什么加你可以把这个样式属性去掉试试。 */
border : 1px dotted #fff;  /* 公告层内第一个字的边框,1象素,虚线(好象是虚点),线颜色。 */
}
#placard a{
color: #666;  /* 公告层内连接字体颜色。 */
}
#placard a:hover {
color: #698B23;  /* 公告层内连接字体鼠标拖过的颜色。 */
}

  因为背景是浅绿色,所以我们不能使用LEFT的CSS定义了,需要另外定义。需要说明的是#placard:first-letter(#placard p:first-letter)属性要不要都行,只要您觉得漂亮。
  完成效果图如下:

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index6.htm

500){this.resized=true;this.style.width=500;}" border=0>

 5.5 BLOG内容

  这部分也不简单,根据需要我们要考虑四点因素,文章标题,发表日期(发表人),文章内容,阅读全文(次数)这四点。
  文章标题我们使用.contenttitle,发表日期使用.contenttime,文章内容不使用CSS定义,因为LEFT已经定义过了,阅读全文(次数)使用类.contentcomments。(我以前是使用H3,H4直接定义的,好处是省几个字节。坏处是当用户在后台表表文章设定字体时很有可能定义成H3或H4,造成布局混乱,很显然这是不可取的。)

  HTML代码如下:

<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">

<div id="head"></div>

<div id="content">
<div id="left">

<div class="contenttitle"><a href="1">怒吗</a></div>
<div class="contenttime">SNAKE - by - 2005-9-6 17:06:00</div>
话说Numa Numa Dance:<br>
   紐澤西的十九歲小胖子,有一天突發奇想,把羅馬尼亞的一首流行歌曲 Dragostea Din Tei(他自己也不懂羅馬尼亞文)拿來對嘴唱,自己再加上舞蹈動作,他自己發明的Numa Numa Dance,製作了上面的MV,從頭到尾他都沒離開書桌前的椅子喲,真的笑到肚子痛,他的表演精辟令人叫绝,此FLASH始发于newgrounds网站,浏览量竟然超过8百万。
<div class="contentcomments"><a href="/blog/514651654645">阅读全文(106) | 回复(7)</a> | 引用通告(0)</div>

</div>
<div id="right"></div>
</div>

<div id="footer"></div>

  CSS代码加到刚才公告的后面吧,代码如下:

.contenttitle {  /* 博客文章的标题定义。 */
height: 40px;  /* 博客文章标题的高度。 */
padding:3px 0px 0px 25px;  /* 标题的内边距,同样是上右下左的顺序,左边25象素是为了和左边拉开距离,谁说的了?距离产生美么~ */
background:url("content.png") no-repeat left;  /* 标题的背景,就是哪个像盾牌似的小图标了,为了好看,没别的。图片不重复,左对齐。 */
font-size: 15px;  /* 标题的字体大小,15象素看着还凑合。 */
color: #060;  /* 标题的字体颜色,这个一般用不到,因为文章标题都是连接文字,不过我发现“置顶”这两个字是没有连接的~所以加上吧,为了和标题字色配套。 */
}
.contenttime {  /* 博客文章的作者,发表时间定义。 */
width:450px;  /* 时间的宽度,因为我们要文字上面有“上划线”,而且要右对齐所以定义这个。 */
margin:-18px 0px 0px 20px;  /* 时间的外边距,也就是定位,上-18px是为了挨着标题显示,不信你去掉试试,20px是左边距,要不然“上划线”就盖住那标题图片了。 */
font: 9px 'Tahoma', sans-serif;  /* 时间文字的大小,字体。我发现英文Tahoma字体最小的能显示的字就是9px了。 */
color: #666;  /* 时间文字的颜色。 */
border-top: 1px dotted #999;  /* 传说中的上划线,1象素,虚线(应该是虚点),浅灰色。 */
text-align:right;  /* 时间文字右对齐,同样为了好看。 */
}
.contentcomments {  /* 阅读全文数,回复数等信息的CSS定义。 */
text-align: center;  /* 文字居中显示。 */
border-top: 1px solid #C2C2C2;  /* 一个上划线。 */
border-bottom: 2px solid #C2C2C2;  /* 一个2px的下划线,注意这两定义个不能缩写的。 */
margin:15px 0px 35px 0px;  /* 外边距。 */
font: bold 12px;  /* 字体粗细,大小。 */
}

  完成效果如下:

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index7.htm

500){this.resized=true;this.style.width=500;}" border=0>

500){this.resized=true;this.style.width=500;}" border=0>

5.6 RIGHT的定义(最后一块的定义,布局终于快要完成了,哭~~~)

  先是RIGHT的位置。CSS如下:

#right {  /* RIGHT的CSS定义。 */
float: right;  /* 位置,居右,相对LEFT层而言。 */
width:230px;  /* 宽度,一点一点测试得出来的数字。 */
padding: 0px 20px 0px 5px;  /* 内边距,右边距和LEFT的左边距一样,是20px,对称。 */
}

  在RIGHT里面打几个字测试效果。

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index8.htm

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

  然后是大标题字的美化。我们使用.bigtitle标签。CSS代码如下:

.bigtitle {  /* 大标题字层的CSS定义。 */
text-align: center;  /* 字体居中。 */
width:200px;  /* 层宽。 */
height: 24px;  /* 层高。 */
font: 14px;  /* 字体定义,14象素。 */
color: #333;  /* 字体颜色。 */
padding: 2px 0px 0px 0px;  /* 层内边距,距离上面是2px。 */
background: url("sidebartitle.png") no-repeat top center;  /* 本层的背景定义,不重复,位置:上 中。 */
}

  写几个字(Calendar | 日 历),看效果:

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index9.htm

500){this.resized=true;this.style.width=500;}" border=0>


  然后就是这些栏目的内容定义了。(下面的标签我都在$前面加了个"_",要不和本BLog标记起冲突了.)

日历($show_calendar_$)
最新日志($show_newblog_$)
最新回复($show_comment_$)
最新留言($show_newmessage_$)
登陆口($show_login_$)
搜索($show_search_$)
BLOG信息($show_info_$)
友情连接($show_links_$)

  能用的几乎都在上面了。顺序就这么排吧,无所谓的。

  接下来的事情就是定义这些小模块了~~~

1.日历的定义:

  先随便找个BLOG查看其源文件得知日历的代码如下:

<div id="calendar"><table width='100%'>
<caption>August 2005</caption><tr>
<th abbr=Sunday>日</th>
<th abbr=Monday>一</th>
<th abbr=Tuesday>二</th>
<th abbr=Wednesday>三</th>
<th abbr=Thursday>四</th>
<th abbr=Friday>五</th>
<th abbr=Saturday>六</th></tr><tr>
<td align=center>&nbsp;</td>
<td align=center>1</td>
<td align=center><a href='/blog/user1/1243/archives/2005/118466.shtml'>2</a></td>
<td align=center>3</td>
<td align=center>4</td>
<td align=center>5</td>
<td align=center>6</td>
</tr><tr>
<td align=center><a href='/blog/user1/1243/archives/2005/120832.shtml'>7</a></td>
<td align=center>8</td>
<td align=center>9</td>
<td align=center><a href='/blog/user1/1243/archives/2005/122376.shtml'>10</a></td>
<td align=center>11</td>
<td align=center>12</td>
<td align=center>13</td>
</tr><tr>
<td align=center>14</td>
<td align=center>15</td>
<td align=center>16</td>
<td align=center><a href='/blog/user1/1243/archives/2005/126279.shtml'>17</a></td>
<td align=center><a href='/blog/user1/1243/archives/2005/126831.shtml'>18</a></td>
<td align=center>19</td>
<td align=center>20</td>
</tr><tr>
<td align=center>21</td>
<td align=center><a href='/blog/user1/1243/archives/2005/128795.shtml'>22</a></td>
<td align=center>23</td>
<td align=center>24</td>
<td align=center>25</td>
<td align=center><a href='/blog/user1/1243/archives/2005/131991.shtml'>26</a></td>
<td align=center>27</td>
</tr><tr>
<td align=center>28</td>
<td align=center>29</td>
<td align=center><a href='/blog/user1/1243/archives/2005/135178.shtml'>30</a></td>
<td align=center>31</td>
<td align=center></td>
<td align=center></td>
<td align=center></td>
</tr>
</table>
</div>

  分析出日历是一个大表格,放在#calendar层里面,月份使用caption定义,星期几使用#calendar th定义,而日期使用#calendar td定义,写过日记的日期是连接。遗憾的是没有当前日期的定义。
  这样,我们就可以设计出各种的样式类美化这个日历表格了~把上面的代码考到网页里bigtitle层的下面,现在的模版代码是:

<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">

<div id="head"></div>

<div id="content">

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

<div class="bigtitle">Calendar | 日 历</div>

<div id="calendar"><table width='100%'>
<caption>August 2005</caption><tr>
<th abbr=Sunday>日</th>
<th abbr=Monday>一</th>
<th abbr=Tuesday>二</th>
<th abbr=Wednesday>三</th>
<th abbr=Thursday>四</th>
<th abbr=Friday>五</th>
<th abbr=Saturday>六</th></tr><tr>
<td align=center>&nbsp;</td>
<td align=center>1</td>
<td align=center><a href='/blog/user1/1243/archives/2005/118466.shtml'>2</a></td>
<td align=center>3</td>
<td align=center>4</td>
<td align=center>5</td>
<td align=center>6</td>
</tr><tr>
<td align=center><a href='/blog/user1/1243/archives/2005/120832.shtml'>7</a></td>
<td align=center>8</td>
<td align=center>9</td>
<td align=center><a href='/blog/user1/1243/archives/2005/122376.shtml'>10</a></td>
<td align=center>11</td>
<td align=center>12</td>
<td align=center>13</td>
</tr><tr>
<td align=center>14</td>
<td align=center>15</td>
<td align=center>16</td>
<td align=center><a href='/blog/user1/1243/archives/2005/126279.shtml'>17</a></td>
<td align=center><a href='/blog/user1/1243/archives/2005/126831.shtml'>18</a></td>
<td align=center>19</td>
<td align=center>20</td>
</tr><tr>
<td align=center>21</td>
<td align=center><a href='/blog/user1/1243/archives/2005/128795.shtml'>22</a></td>
<td align=center>23</td>
<td align=center>24</td>
<td align=center>25</td>
<td align=center><a href='/blog/user1/1243/archives/2005/131991.shtml'>26</a></td>
<td align=center>27</td>
</tr><tr>
<td align=center>28</td>
<td align=center>29</td>
<td align=center><a href='/blog/user1/1243/archives/2005/135178.shtml'>30</a></td>
<td align=center>31</td>
<td align=center></td>
<td align=center></td>
<td align=center></td>
</tr>
</table>
</div>

<div class="bigtitle">New BLog | 日 志</div>
<div class="bigtitle">New Reply | 回 复</div>
<div class="bigtitle">New message | 留 言</div>
<div class="bigtitle">User Login | 登 陆</div>
<div class="bigtitle">Search | 搜 索</div>
<div class="bigtitle">BLog Info | 信 息</div>
<div class="bigtitle">My Links | 收 藏</div>
</div>

</div>

<div id="footer"></div>

  我们开始设计CSS代码:

#calendar{  /* 日历层定义。 */
width:195px;  /* 日历层宽。 */
}
#calendar caption {   /* 定义日历顶部月份。 */
font:11px 'Century Gothic', Arial, Helvetica, sans-serif;  /* 日历顶部月份的字体大小,字体。 */
}
#calendar table {
border-collapse: collapse; /*合并表格相临边框*/
}
#calendar th{   /* 定义星期 */
font: normal 12px;   /* 字体正常显示,OBLog系统默认显示粗体,大小12象素,中文字最小12象素。 */
}
#calendar td {  /* 定义日期 */
font-size: 10px;   /* 字体10px。 */
}
#calendar td a {   /* 日历内日期链接样式 */
display:block;  /* 日历内日期呈块级元素 */
background-color: #C1E27D;  /* 日历内日期背景色 */
width:16px;  /* 日历内日期宽 */
height:10px;  /* 日历内日期高 */
}
#calendar td a:hover{   /* 鼠标拖过日期的链接样式 */
background-color: #CF6;  /* 背景色 */
color: #333;  /* 字体色 */
}

  完成,看看效果:

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index10.htm

500){this.resized=true;this.style.width=500;}" border=0>

 2.最新日志

  接下来是最新日志的样式定义,查看代码知道最新日志是使用UL标签的,而且和最新留言,最新回复一样使用UL标签。(其实他们每个都有单独的标签,可以进一步个性化~我们做简单的~~)这样的话我们就设计一个UL定义的层类就可以了。我们使用.sidebar标签类。

  CSS代码如下:

.sidebar ul{  /* 字体色 */
margin: 0 0 0 -5px;  /* 外边距 */
}
.sidebar li a{  /* LI连接样式 */
padding: 0 0 0 20px;  /* 内边距,左20px的距离。 */
color:#749A23;  /* 连接字体色,使用稍微有些深的绿颜色 */
background: url("liimage.png") no-repeat left top;  /* 左边的小圆圈,是图片。本来LI属性自带圆圈这个设置,但是本地测试OK用做模版就不可以了。使用图片的话还可以改成别的小图标,设计灵活。 */
}
.sidebar li a:hover{  /* 连接字鼠标拖过 */
padding: 0 0 0 20px;  /* 和上面的一样,也是左边内边距20px,这个不能省略。 */
color:#C1E27D;  /* 鼠标拖过时字体颜色,使用较浅的绿色,相对于上面的连接色,这样的话色彩变换比较柔和。 */
text-decoration:underline;  /* 鼠标拖过时有下划线,在英文网页里面连接一般都有下划线,但是汉字这样做就不好看了,要改。 */
}
.sidebar li a:visited {  /* 连接访问后样式 */
text-decoration:underline;  /* 有下划线 */
color:#060;  /* 更深的绿色,本来是要用更浅的色凋的,但是发现那样的话字就看不清了,使用灰色就不好看了~所以使用深色绿色。 */
}

  由于“日志”,“回复”,“留言”是一样的,所以一个栏目测试OK,其他的就都解决了.
  哈哈!又完成了!看效果!!!

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index11.htm

500){this.resized=true;this.style.width=500;}" border=0>

3.登陆口

  接下来是登陆窗口的定义,这个比较简单,开始的登陆表单是用表格做的所以定义表格,登陆后有个小菜单,查看代码得知这是个层,让它居中就可以了,思路是,表单和表格的样式设计。我们设计开始。

  HTML代码是这样的:(就是居中)
<div align="center">$show_login_$</div>


  CSS代码:

table {  /* 所有表格定义 */
font-size: 12px;  /* 字体12px */
}
input {  /* 输入框文本字段的定义 */
background-color: #C1E27D;  /* 背景色 */
border: 1px #333 solid;  /* 边框,1象素,灰黑色,实线。 */
font-size: 12px;  /* 字体12px */
color: #666;  /* 字体色 */
}
select {  /* 列表框文本字段的定义 */
background-color: #C1E27D;  /* 背景色 */
border: 1px solid #333;  /* 边框,1象素,灰黑色,实线。 */
font-size: 12px;  /* 字体12px */
color: #666;  /* 字体色 */
}

  登陆窗口测试不了,就不测试了。登陆口和“BLOG搜索”是一样的,都是表单。下面给个设计好的截图:

500){this.resized=true;this.style.width=500;}" border=0>

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

  后面的BLOG信息,以及我的连接样式就不用设计了。前面已经打好基础了。

5.7 完成后的代码

  OK!,现在,我们的模版已经设计完成了!现在把OBLOG提供的相应的代码复制到模版里面。需要做的就是把主模版和副模版分开。

  主模版HTML代码:(注意,所有模版代码都在$的前面加了个"_",为的是不和我的BLog冲突.)

<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">
<div id="head">$show_subject_l_$</div>
<div id="content">
<div id="left">
$show_placard_$
$show_log_$
</div>
<div id="right">
<div class="bigtitle">Calendar | 日 历</div>
$show_calendar_$
<div class="bigtitle">New BLog | 日 志</div>
<div class="sidebar">$show_newblog_$</div>
<div class="bigtitle">New Reply | 回 复</div>
<div class="sidebar">$show_comment_$</div>
<div class="bigtitle">New message | 留 言</div>
<div class="sidebar">$show_newmessage_$</div>
<div class="bigtitle">User Login | 登 陆</div>
<div align="center">$show_login_$</div>
<div class="bigtitle">Search | 搜 索</div>
$show_search_$
<div class="bigtitle">BLog Info | 信 息</div>
$show_info_$
<div class="bigtitle">My Links | 收 藏</div>
$show_links_$
</div>
<br style="clear: both;">
</div>
<div id="footer">$show_xml_$ &copy; $show_blogname_$  All rights reserved.</div>

  副模版HTML代码:(注意,所有模版代码都在$的前面加了个"_",为的是不和我的BLog冲突.)

<div class="contenttitle">$show_topictxt_$</div>
<div class="contenttime">$show_author_$ - BY - $show_addtime_$</div>
$show_logtext_$
<div class="contentcomments">$show_more_$</div>

  管理员进入OBLog3.0的后台把相应的代码复制进去就可以了。(可能你注意到主模版里面多了<br style="clear: both;">代码,是为了在FIREXFOX下显示的。现在先不管,反正模版代码就是这么多了,再改就是CSS的事情了。)

5.8  完成后的问题

  以后,然后就是实际的测试了。问题当然发现不少,首先是BLOG主人回复那,问题如下图所示:

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

  看代码知道这同样是表格,修改CSS填加如下代码:

table p{  /* 表格内段落的定义,这里一般针对单个文章的“BLOG主人回复”设置 */
padding: 10px 10px 10px 10px;  /* 内边距 */
font-size: 12px;  /* 字体大小 */
color: #749A23;  /* 字体色,为了配合模版,使用绿色 */
border: 1px solid #C2C2C2;  /* 1px的边框。 */
}

看完成效果:

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

  接下来的问题是这里:(其实这里并不重要,关键是一种改页面思路,要是明白了这点,这个模版的几乎任何地方都可以改。)

500){this.resized=true;this.style.width=500;}" border=0>

  找到定义它的CSS属性,#oblog_edit层,还有它里面的这个类.oblog_Btn
在CSS里面填加代码:

#oblog_edit {  /* 编辑窗口的定义。 */
background-color: #fff;  /* 背景色为白色,以前是灰色。 */
border: 0px  /* 边框为0,以前是1px,灰色。 */
}
#oblog_edit .oblog_Btn {  /* 加粗,斜体等小图的设置。 */
background-color: #fff;  /* 背景为白色,原来是灰色。 */
}

  完成效果如图:

500){this.resized=true;this.style.width=500;}">500){this.resized=true;this.style.width=500;}" border=0>

  看到了吧?其实有好多东西都可以自定义设置的。关键是我们得找到它的CSS定义名。至此,我们的模版已经设计完成了。多注意一些小的细节是很重要的,精致的东西才有人喜欢么~~~

  如果你只用IE浏览器,并且不在乎使用Mozilla Firefox 浏览器的观众的话,你的模版做到这里也就结束了,如果你在乎那5%的话就继续往下看。


六、在Mozilla Firefox下测试

  好了,打开Mozilla Firefox,浏览我们已经设置好模版的BLOG。
  ……
  ……
  ……
  你是不是要问,这TM是我费尽辛苦做出来的模版吗?怎么变成这么个甩样了?这也是我为什么想抛弃那5%的原因了。为什么IE和FF就不能把CSS标准统一一下呢?害我折寿。我告诉你们,改成适合Mozilla Firefox的模版不亚于重新写一遍CSS……有心理准备了么? 来吧.

6.1 如何兼容

  首先明确我们的目的,目的很简单,就是如何在适合IE的情况下同样适合Mozilla Firefox?经过无数次的实验发现一种方法,那就是在CSS里面给不适合Mozilla Firefox的CSS标签再加一个标签,一个对应IE,而另外一个对应Mozilla Firefox。(这只是SNAKE发现的方法,如果谁要是还有更好的方法请告诉我,并且我提示你,这肯定不是最好的方法。)

  我们看一个例子:

* html #head {  /* 对应IE浏览器。 */
height: 200px;
}
#head {  /* 对应Mozilla Firefox浏览器。 */
height: 100px;
}

  上面的代码中,* html #head是对应IE浏览器的,而#head是对应Mozilla Firefox浏览器的,这样我们就知道如何对应每个浏览器写CSS的方法了。

6.2 HEAD层的问题

  然后看Mozilla Firefox中我们的BLOG,从上到下,把发现的问题一个一个的修改。

  先是HEAD层。找到4个问题。

500){this.resized=true;this.style.width=500;}" border=0>

  我们对原CSS做出修改,修改后代码如下:

* html #head {  /* 对应IE的HEAD层。 */
height: 135px;  /* HEAD的高。 */
width: 780px;  /* HEAD的宽,780是在800*600下的推荐宽度。 */
padding:99px 0px 0px 18px;  /* HEAD的内边距,“我的分类”位置取决于此。 */
text-align: left;  /* HEAD层内所有所有属性居左。 */
background: url("header.png") no-repeat top center;  /* HEAD的背景属性,分别是:背景图URL,背景图不重复,在层的位置:上 中。 */
}
#head {  /* 对应Mozilla Firefox浏览器的HEAD层。 */
width: 780px;  /* HEAD的宽,780是在800*600下的推荐宽度。 */
margin: 0 auto;  /* HEAD层居中。 */
padding:105px 0px 30px 40px;  /* HEAD的内边距,“我的分类”位置取决于此。 */
text-align: left;  /* HEAD层内所有所有属性居左。 */
background: url("header.png") no-repeat top center;  /* HEAD的背景属性,分别是:背景图URL,背景图不重复,在层的位置:上 中。 */
}

#head ul, #head li {   /* HEAD层内UL标签和LI标签的样式属性。 */
float:left;  /* 内容居左,就是横向显示,LI标签默认是竖向显示。 */
margin:0;  /* 外边距,默认的不是0,所以我们要给它个值。 */
display:block;  /* 块级元素,必须有。这个比较难解释,书上是这么写的:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。汗~~ */
}
* html #head li a{   /* HEAD LI标签内连接样式。(对应IE浏览器) */
height: 26px;   /* 高度26。 */
padding:3px 5px 0px 20px;   /* 内边距,定义连接文字在LI标签的位置。 */
color: #666;   /* 连接色。 */
background:url("mainli.png") no-repeat left top;   /* 连接的背景,连接到我们设计的背景图片上去,从左上开始显示,并且不重复。 */
border: 1px solid #999;   /* 连接的边框,使用灰色。 */
}
#head li a{   /* HEAD LI标签内连接样式。(对应Mozilla Firefox浏览器) */
padding:5px 5px 2px 20px;   /* 内边距,定义连接文字在LI标签的位置。 */
color: #666;   /* 连接色。 */
background:url("mainli.png") no-repeat left top;   /* 连接的背景,连接到我们设计的背景图片上去,从左上开始显示,并且不重复。 */
border: 1px solid #999;   /* 连接的边框,使用灰色。 */
}
#head li a:hover{   /* HEAD LI标签内连接之鼠标拖过样式。 */
color:#333;   /* 拖过之颜色。 */
background:url("mainli.png") no-repeat 0px -26px;   /* 拖过后的背景,我们使用的图片和连接的背景图片是同一张,这样做的好处是节省带宽。要搞清楚位置,-26是从高位-26的地方开始显示图片,设计的时候要明白为什么这么做。 */
}

  修改后的效果图:

500){this.resized=true;this.style.width=500;}" border=0>

  仔细看上面的CSS代码,我们根据BLog在Mozilla Firefox浏览器中显示的结果判断出需要修改#head#head li a这两个属性(你问我怎么判断出来的?根据原来的CSS代码,哪段代码定义什么,都写的很清楚了,仔细找的话不难,实在不行一个一个测试。),那么在原来的#head#head li a前面都加上* html(前面提到过,加上* html就对应IE了),在他们的后面分别复制粘贴这两段代码,并且做出修改(只修改#head#head li a)。

  在Mozilla Firefox浏览器中,不推荐使用内边距(padding)的同时使用高(height)的定义,因为这样的话Mozilla Firefox会同时把内边距(padding)和高(height)算进去,这样表现出来的结果就比原来高上很多。所以我们去掉它的高(height),去掉高(height)的同时我们要对内边距(padding)进行修改,改成合适的象素为止,这就需要你如炬的眼睛了。

  另外在IE中它本身是居中对齐的,但是在Mozilla Firefox中却居左显示(在800*600也许看不出什么区别,但是在1024*768 or 1204*1024的分辨率下却很让人不爽,现在液晶普及这么快,大分辨率是趋势 ),我们在#head层中新加入了margin: 0 auto;标签(0代表上下外边距,auto是自动,CSS布局居中都是这么做的),为的是使#head层在屏幕中居中显示。

  这里出现的问题主要是布局上的,所以其他的标签我们并未做出修改。

6.3 #content的问题 

  两个问题,一是居中问题,二是背景重复显示。

500){this.resized=true;this.style.width=500;}" border=0>

  问题需要一点一点的解决。我们来修改CSS代码。先修改#content部分。
  代码如下:

#content {
padding:10px;  /* CONTENT层内边距10px。 */
margin: 0px auto;   /* CONTENT层居中显示。 */
width:780px;  /* CONTENT的宽,780px,和上面的HEAD层对齐。 */
text-align:left;  /* CONTENT层内容居左。 */
background: url("bg.png") repeat-y center;  /* CONTENT的背景属性,分别是:背景图URL,背景图重复在Y轴上(纵向重复显示),在层的位置:中。 */
}

  • 上一篇:什么是博客blog?
  • 下一篇:下载站如何能够与迅雷共舞?

发表评论:

    昵称:
    密码:
    主页:
    标题:
    [人力快车白领博客]数据正在载入中...