网站设计元素布局分析
网页设计

网站设计元素布局分析

        Z-Blog是一个开源项目,大家可以使用这个博客系统来免费建网站,在使用Z-Blog博客系统中,都会在程序修改过程中遇到各种不同的问题,最多的的问题就表现Z-Blog的主题修改上面,要顺利的修改好自己喜欢的,显示自己个性的主题,对于不懂程序和CSS样式的朋友来说,真是有点费神。今天我就Z-Blog页面全局的元素布局作一个简要的分析。

        先来看看默认模板的页面模型分析,制作Z-Blog的样式,首先要对Z-Blog的页面元素、布局要有了解,再配合CSS、图像处理等技术,就可以进行网站设计了。Z-Blog采用了页面表现、样式与内容分离的技术,也算是Web Standards其中的一环了,好处就是可以通过更换CSS样式表,表现出不同的外观,让你的网站显得更活泼、有趣。

       页面全局的元素布局

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

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

  1. 翻页条放在了class=“post”的div块里,将会设置了两个class,既class=“post pagebar”
  2. 每页的发表评论框只会有一个,所以也设置了id=“divCommentPost”

      日志与分栏

      Z-Blog中的分块要属div class=“post”,ul class=“msg”,div class=“function”,将整体的页面CSS设置完,就要细化设置分块的CSS属性。

  1. div class=“post”是日志显示部分的元素,它拥有多重class,这样可以方便的定制不同分类或是不同作者的日志显示效果。
  2. ul class=“msg”控制显示留言和评论。
  3. div class=“function”是工具栏上的分块,部分分块设置了id,这使得改变不同分块的显示效果变的很容易。

       通过对以上页面盒模型的分析,我想你对Z-Blog的页面全局的元素布局不说是全部吃透,至少能让你清楚的知道Z-Blog页面布局和系统架构元素的构成模块。如果在进行企业网站设计,不妨考虑下这个系统,二次开发比较省时省力。