====== 默认模板的页面模型分析 ======
制作Z-Blog的样式，首先要对Z-Blog的页面元素、布局要有了解，再配合CSS、图像处理等技术，就可以制作了。

Z-Blog采用了页面表现、样式与内容分离的技术，也算是Web Standards其中的一环了，好处就是可以通过更换CSS样式表，表现出不同的外观，让你的网站显得更活泼、有趣。


===== 页面全局的元素布局 =====


==== 全局 ====

{{themes:model1.png|}}

为什么全局DIV块嵌套了3回，这是为了应付一些特殊的样式需求。另外，如果要列表页和单日志页产生不同的效果，就要设置body的class了。

==== DivPage块 ====

{{themes:model2.png|}}

每一个divPage块中的元素都是一样的，总共有5大块：divTop,divNavBar,divMain,divSidebar,divSidebar,divBottom，你可以在CSS中控制导航条或是工具栏等的显示与否。

  - 翻页条放在了class="post"的div块里，将会设置了两个class，既class="post pagebar"
  - 每页的发表评论框只会有一个，所以也设置了id="divCommentPost"


==== 日志与分栏 ====

{{themes:model3.png|}}

Z-Blog中的分块要属div class="post",ul class="msg",div class="function"，将整体的页面CSS设置完，就要细化设置分块的CSS属性。
  - div class="post"是日志显示部分的元素，它拥有多重class，这样可以方便的定制不同分类或是不同作者的日志显示效果。
  - ul class="msg"控制显示留言和评论。
  - div class="function"是工具栏上的分块，部分分块设置了id，这使得改变不同分块的显示效果变的很容易。

相关参考：[[..:zblog:zblog20:theme:sidebarhtml|默认模板右侧栏目代码整理和注释]]

===== 软件与测试 =====

样式做的好不好，是不是在通用的浏览器中显示都正常，这就需要不断的测试了，下面就推荐几个流行的浏览器:


==== IE  ====

IE是龙头老大，所以样式在IE下显示一定要正常，IE6的性能是很不错的呢，唯一感觉就是跟不上标准，对CSS支持也不够好，比如first-child等。

==== Chrome  ====

谷歌浏览器（Chrome）。

==== FireFox ====
 
Mozilla FireFox是近两年最火的浏览器，想不看到它都难，更新快，支持DOM标准（IE对DOM的实现有时真让人恶心），支持CSS也很好，附带的DOM Inspector查看器是调试网页的利器，无论是JS脚本还是CSS，一定能用的上的。

下载：http://www.mozilla.org/


==== Opera ====
 
目前Opera 已有了长足的发展，解决了显示中文的BUG，改进了JS及CSS支持，有和FireFox一拼的实力了。

下载：http://www.opera.com/




===== 相关资源介绍 =====

  - 网页设计师：上面有很多CSS与网页设计标准的资料及教程，初学者必去。
  - 苏沈小雨的CSS样式表中文手册（{{themes:css_2.0.zip|下载}}）：这可是中文语言中最好的CSS手册了，推荐人手一册，我从第一版就经常在查看，作者苏昱无异是个天才，不但精通电脑，且文字也很有功力。
  - 至于CSS编辑软件就是见人见智了，TopStyle、DW都可以，我还是喜欢用EditPlus。
  - 标准CSS文件（[[http://bbs.rainbowsoft.org/attachment.php?aid=1606|下载]]），每一块都有汉字注释，方便大家制作Z-Blog的样式，希望大家都能做出漂亮的样式来。


你还可以参考：[[style|默认样式的注释]]