☆翼の夢★舞の城☆聯盟 Dream of Wings & 5C » 在水一方 » 博客圈子 » 用X-Space打造自己的个性空间－如何制作个人空间的CSS

查看完整版本: 用X-Space打造自己的个性空间－如何制作个人空间的CSS

扬帆之翼 2007-5-22 19:49

用X-Space打造自己的个性空间－如何制作个人空间的CSS

[b]了解X-Space的模板机制,Cv9X {e6h7C(?"^2a
[/b]开通了自己的个人空间之后，就可以先到后台去熟悉一下X-Space的操作，针对本文来说，重点是了解X-Space的模板机制。
b;w.w+s4a{R+Q
X-Space内置了众多模板可供选择，我们可以仔细研究一下这些内置模板，从而了解到X-Space的模板机制。
gBFG;l(s,yAF4I8yR
X-Space紧跟互联网发展趋势，页面采取XHTML+CSS的方式，实现表现与结构相分离。可能有些朋友一听到XHTML+CSS就感到有些无从下手，其实这大可不必。相反，一旦您充分了解到XHTML+CSS的奥妙，理清X-Space的模板结构之后，就会感到修改模板是如此得心应手，体会到Web Standard的强大魅力。;[T({&P`A2sFH ` `

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

现在回到X-Space的页面，每个页面有其自身的XHTML源代码，这就是它的结构，同时每个页面通过链接的外部样式表（space.css）和本身内嵌的样式表来共同控制外观。外部样式表Space.css是系统内置的，它控制着X-Space的基本显示模式，不能更改。每个模板之所以显示不同，正是由于内嵌了另外一个不同的样式表。我们修改模板的重点也就在于修改这个内嵌的样式表。s'qVU]
p W{&w6{&ey
举个例子来说，在默认模板（蓝色经典）中，我们看到空间名称是16px大小，白色的加粗字体，但是我们查看一下页面的源代码，却找不到控制字体颜色和大小的<font>标签。这是因为字体的颜色和大小等样式都属于它的表现，页面中只有一个<h1>和</h1>标签把空间名称括了起来，因为h1代表了空间名称的结构——标题。而这个标题的外观，再通过样式表来加以控制，打开页面中链接的默认样式表space.css，从第101行开始，就能看到所定义的页面标题的样式：
+O^^ZU'f3C
s0\2p0V.~8l'z$\

[CODE]ex_B'oD'Dz
#spacename * { /*这表示id为spacename的div中所有元素颜色为白色*/
      color: #FFF;+cC y9AyR
}o-N`bO
h1 {u(H6sV.g(@nW
      font-size: 16px;Sl:J6q:b[;l w[ Q[
      margin: 0;
}
[/CODE]

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

[CODE]
h1 {bd%s;w/l#k
      font-size: 18px;j {bXE|!b+SU
}l~p%^&Wz"LS
[/CODE]0}9o+@i6`)xg'P9q J
X%S&q0M$li6P5o6d,Wn9MS
[b]三、设计模板[/b]
了解了X-Space的模板机制之后，就可以开展实质性的工作了。首先需要把自己心目中的模板样式设计出来，这一步需借助Photoshop或者Fireworks之类的图像处理软件。如果您对于图像处理不太在行，可以借用一下网上的优秀Blog模板。现在网上各类的Blog模板何止万计，不过一旦启用了他人设计的模板，别忘记在您的网站上加一条版权署名。8vMTt*R
%LA;P!Gl^@'[
本文在系统自带的“黄色成熟”模板的基础上，重新设计了页面头部的样式，使之变成一套简单的汽车风格的模板，旨在讲解X-Space的模板修改技巧，更复杂的模板制作还需大家深入学习。在前期的设计中不必将所有细节都通过Photoshop实现，只做出框架即可：

,l~;T-O`e
[img]http://www.discuz.net/attachments/month_0605/003_bnlRv5cG9YcJ.jpg[/img] (`eI.U\I ~M@`
XH;|7INm ]SA$j

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

[b]四、套用模板[/b]
图片切割完以后，开始通过CSS文件将图片应用到页面的外观中。由于我们这个模板的大部分样式跟“黄色成熟”模板类似，可以在“黄色成熟”模板的CSS基础上进行修改。

1、页面背景的修改
默认的页面背景是带有渐变的浅蓝色，这是由于space.css中规定了： h#x1otMb
,?`o SF6drD
:QP7Tp V}5E
[CODE]6o S y;K^MvJ1Y
body {PC;ZgX1h
      background: #F5F9FC url(../images/default/background_top.gif) repeat-x top;
      ……
}
[/CODE]1y2x/?7iA
我们把body重新定义为： I R(~/M'l`R9?H&Y
[CODE]
body {3Q+a1~l&`qoH
      background: #717171 url(background_url);,SS7IJZExw-c6r|
}
[/CODE]

注意：请把background_url替换为您上传之后的页面背景图的URL地址。~G/G?9B:[L

[b]2、页面头部样式的修改[/b]P/m VBb!{9Sa]I
页面的头部区域是放置在一个id为header的div中，修改头部样式，需要修改css中对#header的定义。就header这个层，包括这个层以内的结构，我们需要搞清除以下两点：a-cOp[^5V1q!B
1.我们看到的空间名称、空间url以及设为首页与复制url的链接，统统都是放在一个id为spacename的div中的ML+Pf,r(Z
2.页面导航条是一个无序列表，同时又放置在一个id为menu的div中
Y?Z.DW9V7m'{)t D(t

下面我对照修改好的样式表逐条讲解一下：

Z1S5]O0f Wbv
[CODE]Zn6}@J K&Q
#header {
      background: url(headerimage_url) no-repeat left top;2C J3zBZ!p
      /*重新定义header的背景图片，换为我们上一步得到的汽车图片*/ueh!Q!i)J
      height: 310px;P$hG?]
      /*重新定义header的高度，我们这个模板的头部比默认的要高一些*/
      position: relative;%`e){)^5Q9d"x$I
      /*这句是为了使header内部的某些元素需要相对于header层绝对定位*/
}mp%Y%O4mE_4^
G.[f&uZ
/*标题*/E8d#Qk\ DC4[
#spacename {
      position: absolute;9V|T A5fT*WV
      left: 150px;
      top: 80px;q%^9E8^9|qH
      /*将spacename层相对于header绝对定位，使之显示在汽车左侧的空旷的天空中*/
}
#spacename * {
      color: #000;AuZ q6@r2v
      /*spacename中所有文字显示为黑色，这样看起来醒目一些*/,H,_QOm'G
}

/*导航*/ Z#UiE?H1tE
#menu { ap4P(q'F4S(v;k
      background: #000;
      /*导航条的颜色为黑色*/
      height: 35px;
      width: 750px;
      /*重新定义导航条的宽度与高度*/
      position: absolute;
      left: 0;/OOv7`xu1e$O,`
      top: 275px; J/GY.HMm&n0dY
      /*将导航条相对于header绝对定位，使之显示在header的底部*/
}
#menu ul {
      margin: 0;
      /*去除导航ul的边距，因为在默认模板中是有边距的*/@p1^zzV-T1S
}
#menu li a {
      padding: 0;
      height: 35px;
      line-height: 35px;
      background-image: none !important;
      /*以上这几句是对导航链接的重新定义，去处了原有的背景图片，重新定义的宽度和高度*/
}

#menu a:hover {
      background: #EDF1D7;O0F-YsK"c$R1y
      color: #D0824C;
      /*当鼠标滑过导航链接时的样式*/.SC)zJdQ~uU
}WL#N!oi s un
[/CODE]-Q7O%`~Yw\Us
CdIAY1Az
现在，页面的头部样式已经完全改好了，与“黄色成熟”模板的CSS相结合，在细节上再修饰一下，一套新的汽车风格的模板便可以付诸使用了。当然，本文给出的只是一次简单的小修改，要充分体会到X-Space强大的模板定制功能，制作出更复杂精致的模板，还需要我们继续学习，不断探索。
[img]http://www.discuz.net/attachments/month_0605/006_Le96ssp9Xaig.jpg[/img]
j oU7im[#Y

通过以上的方法，大家可以得到一个新模板的CSS文件。然后登录个人空间后台-->模板-->编辑我的风格主题 2}S,qP\Q_[
把新的CSS文件黏贴进去覆盖以前的就可以了。。。]3z&TB$A?];{
最后要说的是，修改完后，有两个选项，一个是保存修改，一个是另存为。
保存修改，仅仅针对自己当前的模板生效。
我们一般建议大家选择后者，因为还可以选择把自己的新模板共享，方便其他人使用！

页: [1]

查看完整版本: 用X-Space打造自己的个性空间－如何制作个人空间的CSS