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

色色

为自己的个人空间设计个性模板　　伴随着越来越多的Blog出现，新的问题随之而来:我的Blog经常与别人的“撞衫”——使用了相同的模板。对此您一定很苦恼，希望通过更具有个性的网上空间来展示自我。这就遇到了如何修改模板这个问题，又感到有些无从下手。下面以X-Space的官方网站(x-space.discuz.net/space)为例，教您如何利用X-Space强大的模板定制功能来打造自己的个性空间。
　　一、申请空间
　　这一步无需赘述，如同大多数的网站注册一样，进入http://x-space.discuz.net/space，点击右上角登录区的“注册”链接，按照步骤注册即可。注册成功后，回到首页登录，然后点击登录区的[开通我的个人空间]，在接下来的页面中填入自己的空间名称、选择自己的城市，然后选择一个初始的模板，即可开通自己的个人空间。以模板“蓝色经典”为例，新开通的个人空间应该是如下样式:

                               
登录/注册后可看大图

图2-90 :新开通的个人空间

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

                               
登录/注册后可看大图

图2-91: X-Space的管理后台

                               
登录/注册后可看大图

图2-92 :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大小，白色的加粗字体，但是我们查看一下页面的源代码，却找不到控制字体颜色和大小的标签。这是因为字体的颜色和大小等样式都属于它的表现，页面中只有一个
　　和
　　标签把空间名称括了起来，因为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模板种类繁多，不过一旦启用了他人设计的模板，别忘记在您的网站上加一条版权署名。
　　本文在系统自带的“黄色成熟”模板的基础上，重新设计了页面头部的样式，使之变成一套简单的汽车风格的模板，旨在讲解X-Space的模板修改技巧，更复杂的模板制作还需大家深入学习。在前期的设计中不必将所有细节都通过Photoshop实现，只做出框架即可:

                               
登录/注册后可看大图

图2-93: 前期的模板框架

对自己的设计框架感到满意之后，就可以进行切图。针对这个模板，需要两张图片:
　　1、页面底纹:整个页面的灰色斜线底纹，按照重复的规律，截取面积尽可能小的一块放到页面中平铺即可。
　　2、头部图片:完整截取顶部的汽车图片。
　　其他图片由于与系统自带的“黄色成熟”模板相同，可以直接使用。
　　切割完的图片总不能只是存放在自己的电脑中，需要找一个空间传输上去，这对于X-Space来说不成问题，因为它内置了相册功能，把切割完的图片直接上传到自己的相册中即可，记住上传后的URL地址，以便在接下来的步骤中使用。

                               
登录/注册后可看大图

图2-94:图片上传界面

　四、套用模板
　　图片切割完以后，开始通过CSS文件将图片应用到页面的外观中。由于我们这个模板的大部分样式跟“黄色成熟”模板类似，可以在“黄色成熟”模板的CSS基础上进行修改。
　　1、页面背景的修改
　　默认的页面背景是带有渐变的浅蓝色，这是由于space.css中规定了:
　　body {
　　background: #F5F9FC url(../images/default/background_top.gif) repeat-x top;
　　……
　　}
　　把body重新定义为:
　　body {
　　background: #717171 url(background_url);
　　}
　　(注意:请把background_url替换为您上传之后的页面背景图的URL地址。)
　　2、页面头部样式的修改
　　页面的头部区域是放置在一个id为header的div中，修改头部样式，需要修改CSS中对#header的定义。就header这个层，包括这个层以内的结构，我们需要清楚以下两点:
　　l 我们看到的空间名称、空间URL以及设为首页与复制URL的链接，统统都是放在一个id为spacename的div中的
　　l 页面导航条是一个无序列表，同时又放置在一个id为menu的div中
　　下面对照修改好的样式表逐条讲解一下:
　　#header {
　　background: url(headerimage_url) no-repeat left top;
　　/*重新定义header的背景图片，换为我们上一步得到的汽车图片*/
　　height: 310px;
　　/*重新定义header的高度，我们这个模板的头部比默认的要高一些*/
　　position: relative;
　　/*这句是为了使header内部的某些元素需要相对于header层绝对定位*/
　　}
　　/*标题*/
　　#spacename {
　　position: absolute;
　　left: 150px;
　　top: 80px;
　　/*将spacename层相对于header绝对定位，使之显示在汽车左侧的空旷的天空中*/
　　}
　　#spacename * {
　　color: #000;
　　/*spacename中所有文字显示为黑色，这样看起来醒目一些*/
　　}
　　/*导航*/
　　#menu {
　　background: #000;
　　/*导航条的颜色为黑色*/
　　height: 35px;
　　width: 750px;
　　/*重新定义导航条的宽度与高度*/
　　position: absolute;
　　left: 0;
　　top: 275px;
　　/*将导航条相对于header绝对定位，使之显示在header的底部*/
　　}
　　#menu ul {
　　margin: 0;
　　/*去除导航ul的边距，因为在默认模板中是有边距的*/
　　}
　　#menu li a {
　　padding: 0;
　　height: 35px;
　　line-height: 35px;
　　background-image: none !important;
　　/*以上这几句是对导航链接的重新定义，去处了原有的背景图片，重新定义了宽度和高度*/
　　}
　　#menu a:hover {
　　background: #EDF1D7;
　　color: #D0824C;
　　/*当鼠标滑过导航链接时的样式*/
　　}
　　现在，页面的头部样式已经完全改好了，与“黄色成熟”模板的CSS相结合，在细节上再修饰一下，一套新的汽车风格的模板便可以付诸使用了。当然，本文给出的只是一次简单的小修改，要充分体会到X-Space强大的模板定制功能，制作出更复杂精致的模板，还需要我们继续学习，不断探索。

色色

看到别人 空间很漂亮，想知道别人的代码。很简单。看到别人的空间时，点击“查看”——“源文件”，就会出现一个记事本。按CTRL+F，也就是查找，输入“href”,找的是第二个。然后在那个空间的完整域名后面加上刚才查到的代码。


比如你要看我的代码，就是按上面的步骤找到这行：
href="/user/89/css_7589.cache.css"
然后在我的域名，也就是http://www.ourdream.ca后面加上/user/89/css_7589.cache.css
变成http://www.ourdream.ca/user/89/css_7589.cache.css
这样我的CSS代码就出来了。


当然，这方法仅供学习研究，请勿用于偷盗别人的劳动成果！

色色

查看CSS代码用记事本好过与WORD.

黑小子

有点晕，得好好研究一下！

色色

你会晕. 你那么漂亮的空间难道不是你亲自做的?

dubble

先收藏再慢慢研究

FCH

谢谢女郎！学会这个之后，就可以挣大把的银子呀：http://www.ourdream.ca/forums/forum.php?mod=viewthread&tid=59378&extra=page%3D1

亦汐

还是不能弄明白，太复杂了。
干脆就套个现成的模板了事了

黑小子

原帖由 涩女郎 于 2008-1-19 11:53 发表

                               
登录/注册后可看大图

你会晕. 你那么漂亮的空间难道不是你亲自做的?

呵呵，俄那也是在别处弄博克时学来的，所以咱们这一开，俄就很快上手了，也是早就熟悉了的缘故，其实都是根据模板摆活出来的，死的很，受限制。你这文好，能自己创意呢，就是那些符号的费点琢磨！

亦汐

短短几天功夫，我已经玩的有些得心应手了


其实，很简单。只是弄报头麻烦些

大家加油