本文在系统自带的“黄色成熟”模板的基础上，重新设计了页面头部的样式，使之变成一套简单的汽车风格的模板，旨在讲解X-Space的模板修改技巧，更复杂的模板制作还需大家深入学习。在前期的设计中不必将所有细节都通过Photoshop实现，只做出框架即可： 


 ▲前期的模板框架；

对自己的设计框架感到满意之后，就可以进行切图。针对这个模板，需要两张图片：
1、页面底纹：整个页面的灰色斜线底纹，按照重复的规律，截取面积尽可能小的一块放到页面中平铺即可。
2、头部图片：完整截取顶部的汽车图片。
其他图片由于与系统自带的“黄色成熟”模板相同，可以直接使用。

切割完的图片总不能只是存放在自己的电脑中，需要找一个空间传输上去，这对于X-Space来说不成问题，因为它内置了相册功能，把切割完的图片直接上传到自己的相册中即可，记住上传后的URL地址，以便在接下来的步骤中使用。


▲图片上传界面；


四、套用模板
图片切割完以后，开始通过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这个层，包括这个层以内的结构，我们需要清楚以下两点：
    我们看到的空间名称、空间URL以及设为首页与复制URL的链接，统统都是放在一个id为spacename的div中的
    页面导航条是一个无序列表，同时又放置在一个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;