41 1234
发新话题
打印

Z-Blog页面结构及CSS教程(页面模型分析)

本主题由 washun 于 2008-1-4 10:37 加入精华

Z-Blog页面结构及CSS教程(页面模型分析)

Z-Wiki链接:http://wiki.rainbowsoft.org/doku.php?id=themes:model

写教程真是让我头痛,绘制配图更是难上加难,远没有敲两下键盘来的轻松,没办法,只有赶鸭子上架。
  制作Z-Blog的样式,首先要对Z-Blog的页面元素、布局要有了解,再配合CSS、图像处理等技术,就可以制作了。
  Z-Blog采用了页面表现、样式与内容分离的技术,也算是Web Standards其中的一环了,好处就是可以通过更换CSS样式表,表现出不同的外观,让你的网站显得更活泼、有趣。

  我们还是先来看一看页面全局的元素布局:




  为什么全局DIV块嵌套了3回,这是为了应付一些特殊的样式需求。
  *:1.2 sp1版目前未实现body的class设实,但在实际应用中的确有这个需要,如果要列表页和单日志页产生不同的效果,就要设置了。





  每一个divPage块中的元素都是一样的,总共有5大块:divTop,divNavBar,divMain,divSidebar,divSidebar,divBottom,你可以在CSS中控制导航条或是工具栏等的显示与否。
  *:翻页条放在了class="post"的div块里,将会设置了两个class,既class="post pagebar"
  **:每页的发表评论框只会有一个,所以也设置了id="divCommentPost"





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




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

IE 6.0
  IE是龙头老大,所以样式在IE下显示一定要正常,IE6的性能是很不错的呢,唯一感觉就是跟不上标准,对CSS支持也不够好,比如first-child等。我主要是针对IE6,对于IE5基本上没什么关注。

FireFox 1.0
  Mozilla FireFox是近两年最火的浏览器,想不看到它都难,更新快,支持DOM标准(IE对DOM的实现有时真让人恶心),支持CSS也很好,附带的DOM Inspector查看器是调试网页的利器,无论是JS脚本还是CSS,一定能用的上的。
  下载:http://www.mozilla.org/

Opera 8.0
  Opera 8在4月28日才发布,相比7而言的确有了长足的发展,解决了显示中文的BUG,改进了JS及CSS支持,有和FireFox一拼的实力了。
  下载:http://www.opera.com/




相关资源
  1.网页设计师:上面有很多CSS与网页设计标准的资料及教程,初学者必去。
  2.苏沈小雨的CSS样式表中文手册:这可是中文语言中最好的CSS手册了,推荐人手一册,我从第一版就经常在查看,作者苏昱无异是个天才,不但精通电脑,且文字也很有功力。
  3.至于CSS编辑软件就是见人见智了,TopStyle、DW都可以,我还是喜欢用EditPlus。




标准CSS文件下载
  每一块都有汉字注释,方便大家制作Z-Blog的样式,希望大家都能做出漂亮的样式来。

  下载: http://bbs.rainbowsoft.org/attachment.php?aid=1606(2007年8月6日Washun 修正)
      大家也可以看看这个帖子http://bbs.rainbowsoft.org/viewthread.php?tid=15844&extra=page%3D1
附件: 您所在的用户组无法下载或查看附件

TOP

z
能把标准CSS文件下载修正一下吗?这个下载不了,谢谢了!

TOP

好贴收藏了,站长辛苦了啊

TOP

关于换自定义模板

请问如果要自定义一个模板,也就是说页面架构与Z-blog的完全不一样,html代码全部由自己编排,要怎样做才能取得日志数据呢?
我写了个模板,可是却取不出数据,不明白是为什么,站长能否指点一二?
下面是我的xhtml代码,这个文件被我放在了根目录下的TEMPLATE里:
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<#ZC_BLOG_LANGUAGE#>" lang="<#ZC_BLOG_LANGUAGE#>">
<head>
<meta http-equiv="Content-Language" content="<#ZC_BLOG_LANGUAGE#>" />
<link rel="alternate" type="application/rss+xml" href="<#ZC_BLOG_HOST#>rss.xml" title="<#ZC_BLOG_TITLE#>" />
<link rel="alternate" type="application/atom+xml" href="<#ZC_BLOG_HOST#>atom.xml" title="<#ZC_BLOG_TITLE#>" />
<script language="JavaScript" src="<#ZC_BLOG_HOST#>script/common.js" type="text/javascript"></script>
<script language="JavaScript" src="<#ZC_BLOG_HOST#>script/LoadInfo.asp?act=List&id=<#article/id#>&file=<#file/id#>" type="text/javascript"></script>
<title><#ZC_BLOG_TITLE#><#ZC_MSG044#><#ZC_BLOG_SUBTITLE#></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="../css/main.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<script language="JavaScript" type="text/javascript">
        var str00="<#ZC_BLOG_HOST#>";
</script>
<div id="divall">
<div class="top">
<div class="head">
<img src="/img/LOGO.gif" alt="UI之旅" /><h1>UI之旅</h1>
<p>Today is the day in which to express your noblest qualities of mind and heart,
to do at least one worthy thing which you have long postponed.
--Grenville Kleiser</p>
</div>
<div class="topjiao">
<div class="left"></div>
<div class="right"><img src="/img/top_right.gif" alt="" /></div>
</div>
</div>
<div class="main">
<div class="left"><div id="divMain"><#template:article-multi#></div></div>
<div class="right">右侧内容</div>
<div class="clear"></div>
</div>
<div class="footer">Uiway.com was founded in 2004. China,Beijing-Shanghai</div>
</div>
</body>
</html>

TOP

你的xhtml是gb2312的,但是z-blog是utf-8的……不知道是不是原因……

TOP

TOP

我在修改default.css的时候,怎么觉得divpage在divmiddle之下呢?也就是说divpage在中间,divmiddle在上面?
和搂住所说的不一样呢?

TOP

回复 #7 magang 的帖子

我觉得<div id="divPage">
        <div id="divMiddle">两个说反了

TOP

thank you very much  share funs !

TOP

i think this is a great reference document. 非常好,辛苦了。教程很是专业。

TOP

标准CSS文件下载 下载不了
请管理员重新上传一个
谢谢

TOP

lingelle

Z-blog可否提供注册,登录会员的功能!

TOP

 41 1234
发新话题