X-SPACE 个人空间模板制作

2009-06-08 18:39  Read:

最近写了一篇关于X-SPACE 个人空间模板制作的教程,有些繁琐,估计写完后也没多少网友能真正学会并灵活实用,标准页面的制作对于业内人士来说也要有一段适应时间,更不用说普通用户了,真希望程序开发商们在以后的完善过程中能更多地为大众考虑,毕竟大众是主体。

试探地做了个简单方案,看似简单,里面要考虑的使用中的变化还是很多的,幸好X-SPACE 的CSS可以相互补充使用,要修改的部分可以单独分离出来调整,不用把全部的样式读懂,每个人习惯不同,全部读完将会很累人。这里有两个基本型的演示↓↓
http://world.d-show.cn
http://artery.d-show.cn
 

 

 

第一章:用CSS打造个性博客空间
----------------------------------------------------------------------------------------------------------------------------

这里所说的博客空间指的是目前您正在使用中的 X-Space 个人空间(不适合其它网站的博客程序)。
首先要先说一下个人空间的基本结构,我们可以这样理解:
整体的页面结构是一个大的容器(DIV),在这个容器内我们可以放置程序所提供的一系列功能模块,比如日历、个人头像、音乐盒、文章内容、列表等等,也就是说我们开始要把这个大的容器以自己喜欢的样式表现出来,后面的工作就是放置这些固有的功能模块了,这个大的容器可以设定它的左右宽度,底色或是背景图片,这已经足够把原本朴素的空间模板变得比较个性化了。在以往的使用中您会发现,在个人空间管理中是不能改写页面代码的,只能简单地去改换一些个图片、色彩或是页面分列(左右、左中右),换言之,这些个操作只是简单地改变了页面的部分样式,我们把这些叫做“style”,而所有的style都记录在一个CSS文件里供调用及调整,了解了这些我们就会知道对于个人空间模板可以操作的地方就只在相应的“CSS”文件里,对普通用户来讲可能是免为其难了,没办法,要想做出个性的页面对这些操作还是要花费一定的时间去了解的(在第二章节里我会讲解一个更简单、直观的页面修改办法)。

我们将会从基本的CSS样式表设定来说明一下如何去修改我们自己的空间样式。进入个人空间管理--点击上面的“模板”--点击左上侧的“打开侧边栏”--再点击左侧的“我的CSS风格编辑”,OK,看到什么,一个有很多CSS代码的输入窗口,您现用的空间模板样式表就是这个,我们可以按自的需要去一点一点的修改它,直到满意为止。

下面这个是我修改过的CSS样式表,这里和大家说说每一段的作用是什么:

/*
X-Space Template
Template Name: Classic Blue
Author: X-Space Team
Url: http://www.supesite.com
(C) 2001-2006 Comsenz Inc.
这里是一些相关版权说明,不用去理会,放这里不用动*/
/*布局,下面这一部分是对页面中主体内容部分一些操控,共有三部分,这是最重要的一段,它将直接影响到您的页面总体布局*/
 
/*这一段是个人空间主体部分的页宽及左右边距,!important 是用来指定给Mozilla Firefox浏览器使用的,最下面的一行针对我们常用的IE*/
#content {
text-align: left;
width: 960px;
margin: -17px 0px 0px 0px !important;
margin: -17px 0px 0px 0px;
}

/*Layout_1 左侧有导航模块时,为什么要写成这样呢,是因为在个人空间设置里您可以把页面设成左右、右左或是左中右的样式,所以这里分成了三部分为了有针对性的去调用,可以看一下 world.d-show.cn 的效果*/
.xspace-layout1 #sideleft {
float:left;
width: 190px;
padding-top:12px;
}
.xspace-layout1 .mainarea-side {
width: 750px;
margin-left: 190px !important;
margin-left: 182px;
padding-left: 15px;
padding-top:12px;
background:#e6e6e6 url(http://www.d-show.cn/attachments/2007/01/2_200701140254215.gif) repeat-y left top;
}

/*Layout_2 右侧有导航模块时*/
.xspace-layout2 #sideright {
float: right;
width: 200px;
padding-top:12px;
padding-left:10px;
background:#e6e6e6 url(http://www.d-show.cn/attachments/2007/01/2_200701140254215.gif) repeat-y left top;
}
.xspace-layout2 .mainarea-side {
float: left;
padding-top:12px;
width: 740px;
}

/*Layout_3 三列时,也就是左中右结构,可以看一下 artery.d-show.cn 的效果*/
.xspace-layout3 #sideleft {
float:left;
padding-top:12px;
width: 190px;
}
.xspace-layout3 #sideright {
float:right;
padding-top:12px;
width: 185px;
padding-left:0px;

}
.xspace-layout3 .mainarea-side {
float: left;
width: 561px;
padding-left:10px;
padding-top:12px;
padding-right: 10px;
background:#e6e6e6 url(http://www.d-show.cn/attachments/2007/01/2_200701140353281.gif) repeat-y left top;
}

/*用户头像样式,为了不让个性头像有背景或是边框,我特意用继承的办法给了头像一个单独的定义*/
#xspace-avatar { text-align: center; padding-top: 5px; }
#xspace-avatar img { max-width: 150px; max-height: 200px; width: expression(this.width > 150 && this.height < this.width ? 150: true);
height: expression(this.height > 150 ? 150: true); margin: 0 auto; background: none; border: 0; }
#xspace-avatar p { margin: 0; font-weight: bold; line-height: 2.5em; }
#xspace-avatar img .xspace-imgstyle { background: none; border: 0;}

/*图片样式,也就是 最新来客、我的好友、我的最新图片这几个模块中图片的表现形式,可以看到这里加入了背景色及外边框*/
.xspace-imgstyle {
background: #F5F5F5; border-color: #E2E2E2;
}

/*这里规定了标题的样式,我加入了标题背景图片,看上去效果能有些变化*/
h1.xspace-title {
background: transparent;
border-bottom: 1px solid #DEDEDE;
}
.xspace-blocktitle {
overflow: hidden;
font-size: 1em;
color: #333;
height: 22px;
line-height: 22px;
background: url(http://www.d-show.cn/attachments/2007/01/2_200701140253091.gif) repeat-x bottom;
}
#mainarea .xspace-blocktitle {
padding-top:12px;
font-size: 1.2em;
}
li.xspace-loglist h4.xspace-entrytitle {
background: url(http://www.d-show.cn/attachments/2007/01/2_200701140253092.gif) no-repeat bottom left;
padding-left:24px;
}

/*页面样式,我给页面总体加了一个齐上方而且只有左右循环的背景图片,也就是头部的深色长条图片*/
body {
margin: 0;
padding: 0;
background: #e6e6e6 url(http://www.d-show.cn/attachments/2007/01/2_200701140254214.png) repeat-x top;
font: 12px Arial, Helvetica, sans-serif;
color: #333;
}

/*这是一些输入窗口的字体样式*/
input, textarea, select, button {
font: 1em Arial, Helvetica, sans-serif;
}

/*这就是最大的那个容器,下面的所有内容都将放置在它的内部,总体控制了页面的宽度及左右边距--AUTO*/
#wrap {
margin-right: auto;
margin-left: auto;
width: 960px;
padding: 0; }

/*放置头部内容的一个顶部容器*/
#header {
padding: 0;
width: 960px;
height: 151px;
position: relative;
}

/*这一句说明只要是在头部容器内的字体都将是白色的*/
#header *{
color: #FFF;
}

/*将要放置空间名称的一个容器,这里要指出的是我们为了让那个棒球帽的PNG图片在IE中可以透明底色调用了IE滤镜(不支持IE5)*/
#spacename {
margin: 0px 0px 0px 0px;
height: 151px;
background:url(http://www.d-show.cn/attachments/2007/01/2_200701140253094.png) no-repeat left !important;
background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.d-
show.cn/attachments/2007/01/2_200701140253094.png',sizingMethod='image');
}

/*右上角个人空间名称及URL*/
#xspace-spacename {
padding: 12px 20px 0 0;
height: 86px;
overflow: hidden;
text-align: right;
position: absolute;
width: 940px;
}

/*右上角个人空间名称及URL(在Mozilla Firefox中调用的样式)*/
#xspace-spacename .xspace-manage { float: right !important; margin: 0 3px 0 0; }

/*个人空间名称放置的容器,我把收藏、复制地址功能关掉了,因为跟本没什么用处*/
#xspace-spacename p { text-align: right; margin: 0; clear: both; width: 940px; }
#xspace-spacename p a { display: none; }
#xspace-spacename p a.xspace-add2fav { display: none; }

/*个人空间名称的粗体字体样式,如果去掉这个段,字体将会默认为14px*/
#xspace-spacename strong {
font-size: 12px;
}

/*用户菜单/Space快速导航,不细说了,照猫画虎就可以了*/
#guide {
text-align: right;
margin: 0 ;
}
#xspace-action, #xspace-guide {
list-style: none;
margin: 0; padding: 0;
}
/**/ * html #xspace-action, * html #xspace-guide { height: 1%; } /**/ *>#xspace-action, *>
#xspace-action, #xspace-guide { margin: 0.5em 0; }
  #xspace-guide li { float: left; }
#xspace-action a, #xspace-guide a { padding-left: 1.6em;  padding-top: 3px;background: url(http://www.d-
show.cn/attachments/2007/01/2_200701140254042.gif) no-repeat 0; }

/*这一段中修改了前面带有小图标的那些链接文字样式,个人空间中有不少带有小图标的功能链接,如果不想和别人一样,也可以自行指定图片地址*/
#xspace-action a.xspace-sendpm { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254046.gif) no-repeat 0; }
#xspace-action a.xspace-profile { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254045.gif) no-repeat 0; }
#xspace-action a.xspace-message { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254213.gif) no-repeat 0; }
#xspace-guide a.xspace-spacehome { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254211.gif) no-repeat 0; }
#xspace-guide a.xspace-ctrlpannel { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254041.gif) no-repeat 0; }
#xspace-guide a.xspace-sitehome { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254043.gif) no-repeat 0; }
#xspace-guide a.xspace-bbs { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140253096.gif) no-repeat 0; }
#xspace-guide a.xspace-post { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254042.gif) no-repeat 0; }
#xspace-guide a.xspace-addfriend { background: url(http://www.d-show.cn/attachments/2007/01/2_200701140253095.gif) no-repeat 0; }

/*这里是对上方主菜单滑动门效果的定位方法,我把它向上移动了39像素,向右移动了193像素,可以把棒球帽透出来*/
#menu {
float: left;
position: absolute;
height: 22px;
width: 765px;
margin: -39px auto 0px 193px;
float: right;
}

/*下面是对滑动门效果菜单的正式定义,我只是做了简单的尺寸修改,有心的朋友可以做出更加理想的效果*/
#xspace-menu li {
margin: 0px;
}
#menu li a {
float: left;
background: url(http://www.d-show.cn/attachments/2007/01/2_200701140254212.gif);
width: 74px;
height: 22px;
line-height: 22px;
text-align: center;
text-decoration: none;  
color: #575757;
}
#menu li a:hover, #menu li.xspace-active a {
background-position: 0 -22px;
color: #fff;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: none;
  }
a:visited {
color: #666;
  }

/*页面底部版权信息等的样式,这里我只加了一个小的底图齐上部并左右循环*/
#xspace-footer {
  margin: 0;
  border-top: 1px solid #FFF;
  background:#494949 url(http://www.d-show.cn/attachments/2007/01/2_200701140253093.gif) repeat-x top;
}
#xspace-footer * {
color: #FFF !important;
}

而后我把将要用到的一些图片传到了我的个人空间相册内,并把上面CSS里的图片地址改为我的图片所在相册里的地址,
通过以上的修改我们可以得到现在的样式: 效果可见→ http://artery.d-show.cn



上面这个样式表只是个人空间所用到的STYLE中的一小部分,如果按标准写法的话全部能用到的CSS定义共有一千七百多行,当然我们不用去写那么多,因为缺少的部分程序会自动到其它CSS文件内去调用。系统给大家提供的那些默认模板中也有不同的写法,有兴趣的朋友可以分解出来仔细去研究,那样做出的页面将会更加丰富多彩。

您可以下载下面我做好的CSS样式表,把里面的内容覆盖到自己的个人空间,操作办法:
进入个人空间管理--点击上面的“模板”--点击左上侧的“打开侧边栏”--再点击左侧的“我的CSS风格编辑”,把右侧输入窗内的内容全部删除,再把下载后的TXT文件内容粘贴进去,点击“保存修改”,就可以得到和我一样的个人空间模板了。

点击下载
http://www.d-show.cn/bbs/artery/2007-1-18/CSS.rar


第二章:通过程序自带可视化功能打造个性空间
----------------------------------------------------------------------------------------------------------------------------

通过以上的CSS文件定义我们可以看到这些设置上的修改基本上可以改变您个人空间面貌,个性的个人空间也会在这些修改后呈现出来。
对于不是十分了解样式操作的朋友我们也有一个更为简单的办法,可以通过程序自带的所见即所得的操作界面来修改页面效果,好,来看一下程序都给我们提供了哪些方便快捷的功能:

进入个人空间管理--点击上面的“模板”--点击左上侧的“打开侧边栏”--再点击左侧的“可视化模板DIY”--再点击左侧的“进入可视化模板DIY页面”在新开的窗口中我们首先看到的是一个可以通过鼠标拖动的操作面板,这个面板内的每一个小窗口各代表一个程序提供的功能模块,我们可以用拖放的方法把它们任意放置到喜欢的位置,并通过预览看到将要呈现的页面效果,满意后可点击保存。

在这个面板上方有五个绿色的功能按钮,前面四个按钮可以进行一些对页面基本布局设置:

1、编辑页面整体样式:打开这个窗口可以对您现用的模板的背景色及字体、鼠标样式等做一些设置,其中背景图片可以选择程序提供的几种或是直接在输入窗中输入背景图片所在的URL地址比如 http://www.d-show.cn/images/xxxx.jpg ,背景颜色不用说当然是改变页面的背景色彩用的,“图片重复”,这里可以设置选择的背景图片是以何种方式重复出现,是否跟随页面的滚动而滚动。“是否显示侧栏”说的是要不要显示有效页面之外的背景图等,因为往往我们的页面左右宽度会比电脑屏幕窄一些,如果选择“不显示”那页面两侧的背景图片将不会显示。

2、页面版式:这里可以设置您的页面是显示为哪种分列方式,左右、右左、左中右,在改变了分列方式后,您还要再一次把操作面板中的模块位置做一下拖动调整,以适合新的分列。

3、添加侧边栏内容:打开这个小窗口后你可以看到系统所能提供的所有的侧边功能块,每个功能块都可以选择打开或是关闭,这些模块将会显示在较窄的侧边分列里,是一些具有导航功能的侧边窗口。

4、主显示区模块:所谓的主显示区就是指个人空间主体分列(较宽的分列部分)里的一些内容模块,它包含了文章列表、文章内容等,和侧边栏一样,可以选择打开或关闭,再把这些模块通过鼠标拖放到喜欢的位置。

通过上面四个功能按钮的设置我们可以轻易地将页面布局设定为自己喜欢的排列样式。在可拖动操作面板的侧边功能模块上也有对应的“编辑”按钮,它的操作办法与刚刚说过的“页面版式”的设置方式大体相同,可以手工去改变侧面功能模块的背景或是文字等,其缺点在于不能为每个模块单独定义。同样的“编辑头部样式”及“编辑主显示区样式”都可以用同样的办法做一些相应的调整。
对以上设置不太熟悉的朋友不要担心把自己的页面搞乱,如果不满意自己设置的样式,可以在“个人空间管理”---“模板”---“系统空间风格主题”内再次选择一个合适的模板就可以恢复如初了。

----------------------------------------------------------------------------------------------------------------------------

现在可能有朋友会问,我喜欢的图片在自己电脑里怎么样才可以放置到页面中呢?很简单,可以先把您选好的图片上传到个人空间相册中,在浏览原大图片时在图片上点击右键看一下图片的属性,就知道图片的URL地址了,在设置图片的窗口中可以把这个URL地址COPY到图片地址栏内,就可以了。但这里要说的是当个人空间相册内上传的图片宽度大于320像素时就会被自动加上D-SHOW的水印,这怎么办?有办法,第一秀图库(http://www.d-show.cn/gallery)中也可以建立您的个人图库,这里发表的图片是不会被加上水印的,朋友们可以先建立自己的一个图库相册,而后把将要用到的图片全部传到图库相册内,方便以后调用。

用户名: 密码:
匿名发表
全部评论:0