2009年4月28日星期二

BLOGGER模板分析


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
//标准的XML头和文档类型声明

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
//命名空间声明
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Thisaway (Green)
Designer: Dan Rubin
URL: www.superfluousbanter.org
Date: 29 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="textColor" description="Text Color"
type="color" default="#4b6320" value="#4b6320">
<Variable name="blogTitleColor" description="Blog Title Color"
type="color" default="#f9feee" value="#f9feee">
//省略N行
*/

/* global
----------------------------------------------- */
//省略N行

/* layout
----------------------------------------------- */
//省略N行

/* headings
----------------------------------------------- */
//省略N行

/* text
----------------------------------------------- */
//省略N行

/* lists
----------------------------------------------- */
//省略N行

/* links
----------------------------------------------- */
//省略N行

/** Page structure tweaks for layout editor wireframe */

body#layout #main,
body#layout #sidebar {
padding: 0;
}
]]></b:skin>

//CSS代码


</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a>
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='只为测试模板 (标题)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='博客帖子' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='跟踪者' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='博客归档' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='我的简介' type='Profile'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> <!-- end outer-wrapper -->

//网页的框架


</body>
</html>



看到这里你会感到,这个BLOGGER非常的简单,其实它确实很简单..
一个好模板主要是有个好的布局,和好的样式

布局这里只有参看GOOGLE的BLOGGER帮助了,里面定义了所使用的名称等等,只要把那些名称按自己的需要重新编排下,就可得到自己的个性设置.

这个帮助在http://help.blogger.com/bin/topic.py?topic=12439

尽量看英文版,但也可以在最右下角的语言选择里选中文或其它语言.

样式就是用CSS把你个性的布局表现出来而已,这个可是技术活.嘿嘿......


0 评论: