|
二、了解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大小，白色的加粗字体，但是我们查看一下页面的源代码，却找不到控制字体颜色和大小的<font>标签。这是因为字体的颜色和大小等样式都属于它的表现，页面中只有一个<h1>和</h1>标签把空间名称括了起来，因为h1代表了空间名称的结构——标题。而这个标题的外观，再通过样式表来加以控制，打开页面中链接的默认样式表space.css，从第101行开始，就能看到所定义的页面标题的样式：
#spacename * { /*这表示id为spacename的div中所有元素颜色为白色*/
color: #FFF;
}
h1 {
font-size: 16px;
margin: 0;
}
只要弄明白了这一点，其他的所有问题都会触类旁通。几乎页面中所有的颜色、背景图片、文字大小等样式都是通过样式表来控制的。我们要自己修改模板，只需在自己的样式表中重新定义样式，以覆盖默认模板中的样式即可。例如我们希望页面的大标题再大一些，变成18px，只需在自己的模板中加一条：
h1 {
font-size: 18px;
}
| 
评论加载中…
