Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[教程] 用X-Space打造自己的个性空间

[复制链接]
lushnis 发表于 2006-5-30 10:21:45 | 显示全部楼层 |阅读模式
前言及废话略去……
一、申请空间
略去……

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


图2 X-Space的管理后台 (略去)


图3 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的基本显示模式,不能更改。每个模板之所以显示不同,正是由于内嵌了另外一个不同的样式表。我们修改模板的重点也就在于修改这个内嵌的样式表。

举个例子来说,在默认模板(蓝色经典)中,我们看到空间名称是16px大小,白色的加粗字体,但是我们查看一下页面的源代码,却找不到控制字体颜色和大小的<font>标签。这是因为字体的颜色和大小等样式都属于它的表现,页面中只有一个<h1>和</h1>标签把空间名称括了起来,因为h1代表了空间名称的结构——标题。而这个标题的外观,再通过样式表来加以控制,打开页面中链接的默认样式表space.css,从第101行开始,就能看到所定义的页面标题的样式:

  1. #spacename * { /*这表示id为spacename的div中所有元素颜色为白色*/
  2.         color: #FFF;
  3. }
  4. h1 {
  5.         font-size: 16px;
  6.         margin: 0;
  7. }
复制代码

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

  1. h1 {
  2.         font-size: 18px;
  3. }
复制代码



三、设计模板
了解了X-Space的模板机制之后,就可以开展实质性的工作了。首先需要把自己心目中的模板样式设计出来,这一步需借助Photoshop或者Fireworks之类的图像处理软件。如果您对于图像处理不太在行,可以借用一下网上的优秀Blog模板。现在网上各类的Blog模板何止万计,不过一旦启用了他人设计的模板,别忘记在您的网站上加一条版权署名。

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


003.jpg
图4 前期的模板框架

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

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


图5 X-Space的图片上传界面 (略去)


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

1、页面背景的修改
默认的页面背景是带有渐变的浅蓝色,这是由于space.css中规定了:

  1. body {
  2.         background: #F5F9FC url(../images/default/background_top.gif) repeat-x top;
  3.         ……
  4. }

  5. 我们把body重新定义为:

  6. body {
  7.         background: #717171 url(background_url);
  8. }
复制代码

注意:请把background_url替换为您上传之后的页面背景图的URL地址。

2、页面头部样式的修改
页面的头部区域是放置在一个id为header的div中,修改头部样式,需要修改css中对#header的定义。就header这个层,包括这个层以内的结构,我们需要搞清除以下两点:
1.我们看到的空间名称、空间url以及设为首页与复制url的链接,统统都是放在一个id为spacename的div中的
2.页面导航条是一个无序列表,同时又放置在一个id为menu的div中


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

  1. #header {
  2.         background: url(headerimage_url) no-repeat left top;
  3.         /*重新定义header的背景图片,换为我们上一步得到的汽车图片*/
  4.         height: 310px;
  5.         /*重新定义header的高度,我们这个模板的头部比默认的要高一些*/
  6.         position: relative;
  7.         /*这句是为了使header内部的某些元素需要相对于header层绝对定位*/
  8. }

  9. /*标题*/
  10. #spacename {
  11.         position: absolute;
  12.         left: 150px;
  13.         top: 80px;
  14.         /*将spacename层相对于header绝对定位,使之显示在汽车左侧的空旷的天空中*/
  15. }
  16. #spacename * {
  17.         color: #000;
  18.         /*spacename中所有文字显示为黑色,这样看起来醒目一些*/
  19. }

  20. /*导航*/
  21. #menu {
  22.         background: #000;
  23.         /*导航条的颜色为黑色*/
  24.         height: 35px;
  25.         width: 750px;
  26.         /*重新定义导航条的宽度与高度*/
  27.         position: absolute;
  28.         left: 0;
  29.         top: 275px;
  30.         /*将导航条相对于header绝对定位,使之显示在header的底部*/
  31. }
  32. #menu ul {
  33.         margin: 0;
  34.         /*去除导航ul的边距,因为在默认模板中是有边距的*/
  35. }
  36. #menu li a {
  37.         padding: 0;
  38.         height: 35px;
  39.         line-height: 35px;
  40.         background-image: none !important;
  41.         /*以上这几句是对导航链接的重新定义,去处了原有的背景图片,重新定义的宽度和高度*/
  42. }

  43. #menu a:hover {
  44.         background: #EDF1D7;
  45.         color: #D0824C;
  46.         /*当鼠标滑过导航链接时的样式*/
  47. }
复制代码

现在,页面的头部样式已经完全改好了,与“黄色成熟”模板的CSS相结合,在细节上再修饰一下,一套新的汽车风格的模板便可以付诸使用了。当然,本文给出的只是一次简单的小修改,要充分体会到X-Space强大的模板定制功能,制作出更复杂精致的模板,还需要我们继续学习,不断探索。

修改完成的模板

修改完成的模板

评分

1

查看全部评分

002300 发表于 2006-5-30 10:48:43 | 显示全部楼层
沙发
回复

使用道具 举报

hrsalon 发表于 2006-5-30 13:01:53 | 显示全部楼层
用老罗的话:太TMD牛了!

茄子,加精
回复

使用道具 举报

hrsalon 发表于 2006-5-30 13:02:16 | 显示全部楼层
晕,原来是官家的人~~
回复

使用道具 举报

fentin 发表于 2006-5-30 13:20:29 | 显示全部楼层

呵呵,不错

呵呵,强啊
支持




-------------------------------------------------------------------------
云南黄页网
http://www.7yn.net
回复

使用道具 举报

silentceo 发表于 2006-5-30 22:19:19 | 显示全部楼层
这帖那叫出的及时,希望楼主能再多写些出来,帮帮你我一样期待的人。
谢谢楼主
回复

使用道具 举报

DiscuzPkDV 发表于 2006-5-30 23:58:07 | 显示全部楼层
强贴留名!
回复

使用道具 举报

tane 发表于 2006-5-31 09:03:22 | 显示全部楼层
支持一下
回复

使用道具 举报

fengxue 发表于 2006-5-31 10:44:40 | 显示全部楼层
要求发布这款风格
回复

使用道具 举报

wotlitn 发表于 2006-5-31 13:25:44 | 显示全部楼层
冒死顶贴
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-12-24 10:57 , Processed in 0.032989 second(s), 5 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表