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

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

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

[b]了解X-Space的模板机制
^0n y'y!};`8z Tn0h [/b]开通了自己的个人空间之后,就可以先到后台去熟悉一下X-Space的操作,针对本文来说,重点是了解X-Space的模板机制。
P(s}%V;r C
e O0Gy/F&F Fc X-Space内置了众多模板可供选择,我们可以仔细研究一下这些内置模板,从而了解到X-Space的模板机制。-j%WS6X?

!PaC? ]y{#O X-Space紧跟互联网发展趋势,页面采取XHTML+CSS的方式,实现表现与结构相分离。可能有些朋友一听到XHTML+CSS就感到有些无从下手,其实这大可不必。相反,一旦您充分了解到XHTML+CSS的奥妙,理清X-Space的模板结构之后,就会感到修改模板是如此得心应手,体会到Web Standard的强大魅力。
M h0g@S(B1sHa/j'q 6b;?(y+q1N1Y4q
X-Space的每个页面由[b]它自身的结构[/b]和[b]控制它外观表现的样式表[/b]组成。这句话听上去不太好理解,打个比喻来说,它自身的结构就好比是它的身体,包括头、尾、导航、正文区等等。控制它外观表现的样式表就好比是它的衣服,用来美化它的头、尾、导航、正文区……。结构与表现结合起来,就呈现出现在网页的样子。.Bp$F;B5\:V)E

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

8]XNh]7hIv [[ 举个例子来说,在默认模板(蓝色经典)中,我们看到空间名称是16px大小,白色的加粗字体,但是我们查看一下页面的源代码,却找不到控制字体颜色和大小的<font>标签。这是因为字体的颜色和大小等样式都属于它的表现,页面中只有一个<h1>和</h1>标签把空间名称括了起来,因为h1代表了空间名称的结构——标题。而这个标题的外观,再通过样式表来加以控制,打开页面中链接的默认样式表space.css,从第101行开始,就能看到所定义的页面标题的样式:{~ y&LWz:v(M6]1o d)q
d&c!B`+}1| @
n~ cp&r!\ cB
mt5Cn)pU7D
[CODE] l,vE4b[,e
#spacename * { /*这表示id为spacename的div中所有元素颜色为白色*/k$bKo1DEwA
        color: #FFF;U'ME.CO N?B6K
}
*~5a#I&VQ-f9\ h1 {6N F{#LgA!GR*gW
        font-size: 16px;
v%L2~^{-O,X5D         margin: 0;
C} n#Pyw*WY K }DQs r!m.~
[/CODE]$I/py8n-\(}Q
&b#c$a7O3a(B
只要弄明白了这一点,其他的所有问题都会触类旁通。几乎页面中所有的颜色、背景图片、文字大小等样式都是通过样式表来控制的。我们要自己修改模板,只需在自己的样式表中重新定义样式,以覆盖默认模板中的样式即可。例如我们希望页面的大标题再大一些,变成18px,只需在我们自己的模板中加一条:z%|9cW}${M2NY

%S!Xn fc?:ix z 'D#IH a%qO l"H
[CODE]l1]f4K^0R'Q_;e
h1 {
a!\*k7@pd         font-size: 18px;
p-F6fDG6JY0j4S.x_,` }
"q2HOh$O-Omh2R [/CODE]6`x${)L f5Wb Y5U|

2]"wOgh;y [b]三、设计模板[/b]
Gg}/Aa^0ar 了解了X-Space的模板机制之后,就可以开展实质性的工作了。首先需要把自己心目中的模板样式设计出来,这一步需借助Photoshop或者Fireworks之类的图像处理软件。如果您对于图像处理不太在行,可以借用一下网上的优秀Blog模板。现在网上各类的Blog模板何止万计,不过一旦启用了他人设计的模板,别忘记在您的网站上加一条版权署名。 F.M(E~3G&T

/D%cM6\pf6}$^ 本文在系统自带的“黄色成熟”模板的基础上,重新设计了页面头部的样式,使之变成一套简单的汽车风格的模板,旨在讲解X-Space的模板修改技巧,更复杂的模板制作还需大家深入学习。在前期的设计中不必将所有细节都通过Photoshop实现,只做出框架即可:
J)jvS-IC8o(T l2h eEja
Wk*X L5b*U@
[img]http://www.discuz.net/attachments/month_0605/003_bnlRv5cG9YcJ.jpg[/img] {_)l,igx$f$@ G
o7z-n1x7rYDX*J

f ly)H-]~1T&R 图4 前期的模板框架
@ VEJ TIn8h$F
'e!FB$w'vFS 对自己的设计框架感到满意之后,就可以进行切图。针对这个模板,需要两张图片:
%\2w_XyJT'i 1、页面底纹:整个页面的灰色斜线底纹,按照重复的规律,截取面积尽可能小的一块放到页面中平铺即可。
b/VF1A$iw&` 2、头部图片:完整截取顶部的汽车图片。P2V)_9eK z)p r
其他图片由于与系统自带的“黄色成熟”模板相同,可以直接使用。
Qi%e]+|pn%bO3O H#j4i.y[4OmTO6E ItU
切割完的图片总不能只是存放在自己的电脑中,需要找一个空间传输上去,这对于X-Space来说不成问题,因为它内置了相册功能,把切割完的图片直接上传到自己的相册中即可,记住上传后的URL地址,以便在接下来的步骤中使用。2v-\6dz ^2zaJ

5Tl%N3Y,a [b]四、套用模板[/b],W7] s'TkJj8l
图片切割完以后,开始通过CSS文件将图片应用到页面的外观中。由于我们这个模板的大部分样式跟“黄色成熟”模板类似,可以在“黄色成熟”模板的CSS基础上进行修改。b xaa%~s]
+j6c$BnYutz
1、页面背景的修改,igU6@ffXyt
默认的页面背景是带有渐变的浅蓝色,这是由于space.css中规定了:
Xn1o@pn'^7Pr
B|7C*Fm4M*fR5cjZ 3K5i6n}2|
[CODE]7m i2K QU%Is:o
body {
Uw z!]^z         background: #F5F9FC url(../images/default/background_top.gif) repeat-x top;
g6k9^MR.Z|j8o         ……
c }c8X iEk r }
/Rb|@9Gh)U [/CODE]9?4o7T{#x._*Vv
我们把body重新定义为:
!y ]Y#w?Td [CODE]
5l7^nX$EF body {
8} Kc2_c         background: #717171 url(background_url);
P,z;liK1`\.?G }I*`SqH*Y AC
[/CODE]
C)^#L.I/Dy&`:kM[ 'uLK a.]H
注意:请把background_url替换为您上传之后的页面背景图的URL地址。
pS |q x$h)[#Z
7d`,]G8Iej)a8L [b]2、页面头部样式的修改[/b]
q7uA,]Gc-g 页面的头部区域是放置在一个id为header的div中,修改头部样式,需要修改css中对#header的定义。就header这个层,包括这个层以内的结构,我们需要搞清除以下两点:a|6S;I$v'z*d7K,|"r
1.我们看到的空间名称、空间url以及设为首页与复制url的链接,统统都是放在一个id为spacename的div中的
7]-a O'[r`e\N3I 2.页面导航条是一个无序列表,同时又放置在一个id为menu的div中
+L!TS.\l+v!f}
1k,h.vq3omA K]P^*D O1}sN
下面我对照修改好的样式表逐条讲解一下:(S,h4qji8cg+y

4wNp,l%kb\
a,Jw2M2}2x!M4L [CODE]
Ya%Bc0r ? ? #header {C1d ?zRi%Q(r8`
        background: url(headerimage_url) no-repeat left top;
&a`(KoP{         /*重新定义header的背景图片,换为我们上一步得到的汽车图片*/] S/m!Q \Y0i
        height: 310px;e2kgok;@0Q5F9s?r
        /*重新定义header的高度,我们这个模板的头部比默认的要高一些*/!g8l7y4y aD`
        position: relative;
{,`9WoyLI         /*这句是为了使header内部的某些元素需要相对于header层绝对定位*/
3NOA&{:j:B qk }_:?'|'PIk
ia9P\x3?$V8i
/*标题*/
,o.L![uI5@@Da+E #spacename {
Rb)r'gp|FF         position: absolute;
|`/}JbP2t4K(\!O-]         left: 150px;~"DI ?~8?0cP
        top: 80px;9]*|AFZ:|`_
        /*将spacename层相对于header绝对定位,使之显示在汽车左侧的空旷的天空中*/ {0MN6}:E6c$Q5[7[a
}
Q&Q8ha.ZU #spacename * {
(zGg Z+c$i         color: #000;eP"p_jt0X
        /*spacename中所有文字显示为黑色,这样看起来醒目一些*/
l{,X3t&eB8~ }
en?a)z+Lz
8pn m7F7w1z@;zB] /*导航*/
/Oy,Ij*xpj/K #menu {#E{5A,m"U4jX {
        background: #000;"X&m;W-t*HN#Y
        /*导航条的颜色为黑色*/ qg ?#t-w b*hBZ
        height: 35px;
m3z^F$l*My?|Z         width: 750px;P(^F)d-F'Y_L|{H
        /*重新定义导航条的宽度与高度*/)o p?f Q FoD/I
        position: absolute;6Zz4H:Al7srR:w9iQ0E
        left: 0;&Z~"OL|!L/w:J@6`
        top: 275px; na9]!L&\5\g j}
        /*将导航条相对于header绝对定位,使之显示在header的底部*/
qw+Y1d E ]i9E }
CMb P\ wrV2Q #menu ul {
6H(j~!V jiI+J         margin: 0;Z0n,n Ow`:f
        /*去除导航ul的边距,因为在默认模板中是有边距的*/'\.J(Y l[0}
},o Hb_)o
#menu li a {*OdS9}F
        padding: 0; x/Y(H Q[3I)lP
        height: 35px;
2YV JGYh iX         line-height: 35px;,MvLmIXMC"MH
        background-image: none !important;
e[;wl(Y/j         /*以上这几句是对导航链接的重新定义,去处了原有的背景图片,重新定义的宽度和高度*/
7U4Y ~PR(_ }
x^+p(y(Y&g
@+f)~g fW+V #menu a:hover {g i;Se7oi&T$j
        background: #EDF1D7;
&NB3W.C'z#F t$FqFq         color: #D0824C;
.^ f$bm!wk#}*e @4C         /*当鼠标滑过导航链接时的样式*/pg6n![)G f
}
OW3\O9B(r)q'M^ q [/CODE]b$MUr|
G$W-WiL3~8\u-rv
现在,页面的头部样式已经完全改好了,与“黄色成熟”模板的CSS相结合,在细节上再修饰一下,一套新的汽车风格的模板便可以付诸使用了。当然,本文给出的只是一次简单的小修改,要充分体会到X-Space强大的模板定制功能,制作出更复杂精致的模板,还需要我们继续学习,不断探索。
0eix+oms e [img]http://www.discuz.net/attachments/month_0605/006_Le96ssp9Xaig.jpg[/img]
'PS)_&Q#K+?.d.O
&?p!}0cIO
wQH^\bc NAJ Giz'i7n
通过以上的方法,大家可以得到一个新模板的CSS文件。然后登录个人空间后台-->模板-->编辑我的风格主题
8K&pA XDrN GgZ 把新的CSS文件黏贴进去覆盖以前的就可以了 。。。
IoM$k.Za)RW/_Ib 最后要说的是,修改完后,有两个选项,一个是保存修改,一个是另存为。S${4m.pO;iB&`'{
保存修改,仅仅针对自己当前的模板生效。
?$?w$Q L"NJF/f4[n 我们一般建议大家选择后者,因为还可以选择把自己的新模板共享,方便其他人使用!
页: [1]
查看完整版本: 用X-Space打造自己的个性空间-如何制作个人空间的CSS

马上下载 Firefox 您就可以享用:
标签式的浏览:在一个窗口同时浏览多个页面﹐让您节省时间
弹出式窗口拦截器:拦截恼人的弹出式窗口广告
更好的安全保障:预防恶意的黑客软件 - 保全您的计算机
Google 工具列:立即将英文字词翻译成简体中文


本论坛由:南京酷博科技有限公司提供带宽支持
虚拟主机 主机托管 服务器租用 联系QQ:70851