为自己的个人空间设计个性模板

作者:  日期:2006-6-23 15:31:45  来源:中国教程网  点击:次  评论

伴随着越来越多的Blog出现,新的问题随之而来:我的Blog经常与别人的“撞衫”——使用了相同的模板。对此您一定很苦恼,希望通过更具有个性的网上空间来展示自我。这就遇到了如何修改模板这个问题,又感到有些无从下手。下面以X-Space的官方网站(x-space.discuz.net/space)为例,教您如何利用X-Space强大的模板定制功能来打造自己的个性空间。


一、申请空间
这一步无需赘述,如同大多数的网站注册一样,进入http://x-space.discuz.net/space,点击右上角登录区的“注册”链接,按照步骤注册即可。注册成功后,回到首页登录,然后点击登录区的[开通我的个人空间],在接下来的页面中填入自己的空间名称、选择自己的城市,然后选择一个初始的模板,即可开通自己的个人空间。以模板“蓝色经典”为例,新开通的个人空间应该是如下样式:


▲新开通的个人空间

二、了解X-Space的模板机制
开通了自己的个人空间之后,就可以先到后台去熟悉一下X-Space的操作,针对本文来说,重点是了解X-Space的模板机制。 

 
▲X-Space的管理后台


▲X-Space内置了众多模板可供选择


X-Space内置了众多模板可供选择,我们可以仔细研究一下这些内置模板,从而了解到X-Space的模板机制。

X-Space紧跟互联网发展趋势,页面采取Xhtml+CSS的方式,实现表现与结构相分离。可能有些朋友一听到Xhtml+CSS就感到有些无从下手,其实这大可不必。相反,一旦您充分了解到Xhtml+CSS的奥妙,理清X-Space的模板结构之后,就会感到修改模板是如此得心应手,体会到Web Standard的强大魅力。

X-Space的每个页面由它自身的结构和控制它外观表现的样式表组成。这句话听上去不太好理解,打个比喻来说,它自身的结构就好比是它的身体,包括头、尾、导航、正文区等等。控制它外观表现的样式表就好比是它的衣服,用来美化它的头、尾、导航、正文区……。结构与表现结合起来,就呈现出现在网页的样子。

现在回到X-Space的页面,每个页面有其自身的Xhtml源代码,这就是它的结构,同时每个页面通过链接的外部样式表(space.css)和本身内嵌的样式表来共同控制外观。外部样式表Space.css是系统内置的,它控制着X-Space的基本显示模式,不能更改。每个模板之所以显示不同,正是由于内嵌了另外一个不同的样式表。我们修改模板的重点也就在于修改这个内嵌的样式表。

举例来讲,在默认模板(蓝色经典)中,我们看到空间名称是14px大小,白色的加粗字体,但是我们查看一下页面的源代码,却找不到控制字体颜色和大小的<font>标签。这是因为字体的颜色和大小等样式都属于它的表现,页面中只有一个<h1>和</h1>标签把空间名称括了起来,因为h1代表了空间名称的结构——标题。而这个标题的外观,再通过样式表来加以控制,打开页面中链接的默认样式表space.css,从第101行开始,就能看到所定义的页面标题的样式:
#spacename * { /*这表示id为spacename的div中所有元素颜色为白色*/
    color: #FFF;
}
h1 {
    font-size: 16px;
    margin: 0;
}

只要弄明白了这一点,其他的所有问题都会触类旁通。几乎页面中所有的颜色、背景图片、文字大小等样式都是通过样式表来控制的。我们要自己修改模板,只需在自己的样式表中重新定义样式,以覆盖默认模板中的样式即可。例如我们希望页面的大标题再大一些,变成18px,只需在自己的模板中加一条:
h1 {
    font-size: 18px;
}



三、设计模板
了解了X-Space的模板机制之后,就可以开展实质性的工作了。首先需要把自己心目中的模板样式设计出来,这一步需借助Photoshop或者Fireworks之类的图像处理软件。如果您对于图像处理不太在行,可以借用一下网上的优秀Blog模板。现在网上各类的Blog模板种类繁多,不过一旦启用了他人设计的模板,别忘记在您的网站上加一条版权署名。

本新闻共3页,当前在第1页  1  2  3  

〖责任编辑:寅生〗 发送给好友 打印 顶部
会员名称:
密码:匿名 ·注册·忘记密码?
评论内容:
(最多300个字符)
  查看评论

推荐教程

热点教程

请尊重别人的劳动,原创教程转载必须注明作者及出处
中国教程网简介 | 业务合作 | 广告服务 | 联系我们 | 招聘信息 | English | 网站地图 | 客服中心

中国教程网
©2005-2007