终于学会怎样自定义个人空间模板了

色色

折腾了一下午， 又是学习CCS文件格式，又是PS图片，最后更改个人空间背景图，终于算是弄明白了。  要知道我可是对网页制作完全不懂的啊。
有兴趣学习的可以先流览一下我的空间主页。所谓自定义，肯定是不采用论坛设定的样版，DIY就是好， 喜好随您。
先卖个关子，吃完饭再回来介绍我的一点经验，让跟我一样的网页盲也可以拥有自己DIY的个人空间。不求完美，但求看个顺眼。

dawn0065

只好等着了。

greecanada

坐板登上等

一杯清茶

猪儿妈

等

老猫

等开饭

亦汐

CCS文件格式
急需学习

dawn0065

还不出来？！再不出来我讲课啦！

平儿

等着学习

天狼星

吕夏潮

天狼星

色色

我还以为这个贴沉下去了， 心想这样也好， 反正我自己也解释不清楚， 而且还被坛子里的网页制作高手笑话。
现在这贴被顶起来， 我的心慌了， 早知道我还不如直接删了。

亦汐

说说CCS文件格式吧
我要换个报头

亦汐

女郎，报头得图片尺寸是多少呢

色色

系统空间风格主题

一个博客或者个人空间漂不漂亮，它的内容虽然重要，但更直接的是它的主页是否吸引人。主页的风格在于它的顶部图片，和主题部分的规划设置。个人觉得顶部图片最重要，因为自己和每个来访者进入你的空间，第一眼看见的就是那张图片。主体部分的规划应该要简洁些，不要太花俏，颜色也不能太刺眼。

CCS文件

俺不是搞网页制作的，第一次知道还有什么CCS文件存在。CCS文件内容实际上是对空间风格主题的描述，也就是说所有关于顶部图片，主体部分规划，颜色等等信息全部在CCS文件里体现。对于编程高手来说，CCS文件很简单。但对于我们生手它就是文言文了，靠猜靠蒙。总之要先看自己现在的CCS文件，只求大概能看懂，然后修改里面关于图片，尺寸，颜色等内容。每改一次要预览一下改动后的效果，直到满意为止。

如何设置自己空间的风格主题：
1。选用系统内置的风格主题，见http://www.ourdream.ca/spacecp.php?action=usertemplates。其中任选一款都很漂亮。缺点是，如果大家都选同一款，那就造成一些空间看起来是一样的，撞衫了。
2。还是选择系统内置的风格主题，然后自己再对系统的CCS文件内容做些修改。建议初学者只对图片和尺寸等信息做修改，改了一点马上预览效果，要记住改动的地方自己要记住，否则整个系统可能全部乱了。如果真的全部乱了， 那还可以重新选择一个系统内置主题风格，然后一切恢复正常。
3。到网上搜索别人给的CCS文件样本。再对样本做些修改。

查找/编辑自己正使用的CCS文件内容可以到这里。 http://www.ourdream.ca/spacecp.php?action=usertemplates&op=pro

色色

我现在正使用的CCS文件如下：（我从网上偷的，并非系统内置的，自己再做了些修改）

/*
blogworld Template
Template Name:涩女郎
Author:blogworld Team
Url:[url]www.blogworld.com.cn[/url]
(C) 2001-2006 Comsenz Inc.
*/
body{background:url(http://template.blogworld.com.cn/class19/template44/images/bg.jpg) #AAAAAA repeat-y center top;color:#6C6C6C;font:75%/150% Arial,Helvetica,sans-serif,"宋体";margin:0;padding:0;text-align:center}
a{color:#000000;text-decoration:none}
a:hover{color:#FF6600;text-decoration:none}
#wrap{background:url(http://imgshr.jpg.name/wwrhtzhdzttwthhywwrwvhttzrwszzvzjrrwt.jpg) no-repeat center top;margin:0 auto;overflow:hidden;text-align:center;width:996px}
/********头部 *********/
#header{color:#000000;height:400px;margin:0px auto;text-align:left;width:740px}
#spacename{padding-top:25px}
#menu{margin-top:250px;margin-left: 30px;}
#menu a{color:#000000;font-size:13px;text-decoration:none}
/*默认布局*/
#content{margin:0px auto;text-align:left;width:820px}
/*Layout_1 左侧导航*/
.xspace-layout1 #sideleft { float:left; width: 188px; }
.xspace-layout1 .mainarea-side { margin-left: 27%; }
/*Layout_2 右侧导航*/
.xspace-layout2 #sideright { float: right; width: 188px; }
.xspace-layout2 .mainarea-side { float: left;}
/*Layout_3 三列*/
.xspace-layout3 #sideleft { float:left; width:188px; }
.xspace-layout3 #sideright { float:right; width: 188px; margin-top:56px;}
.xspace-layout3 .mainarea-side { float: left; width: 420px; }
.xspace-layout3 .mainarea-side-single { margin-left: 27%; }
.xspace-layout3 #xspace-guide {width: 580px;position: absolute;}
.xspace-layout3 #announcement {margin-top:38px!important;}
/********边栏定义*********/
#sideleft{background:url(http://template.blogworld.com.cn/class19/template44/images/leftbg.jpg) repeat-y right top;text-align:left;}
#sideright{
background:url(http://template.blogworld.com.cn/class19/template44/images/leftbg.jpg) repeat-y right top;
text-align:left;
padding-right:5px!important;
margin-top: 34px;
}
#sideleft .xspace-sideblock{padding-right:5px!important;}
#sideleft .xspace-list,#sideleft #xspace-calendar{width:160px!important;overflow:hidden}
.xspace-layout1 #avatar { padding-top:35px;}
.xspace-layout3 #avatar { padding-top:35px;}
.xspace-layout2 #avatar { background:none;padding-top:35px;}
.xspace-sideblock .xspace-blocktitle {background: url(http://template.blogworld.com.cn/class19/template44/images/title.jpg) no-repeat left top;padding-left:19px!important;padding-top:4px;color:#333;font-size:14px;height: 38px;}
/********主体内容定义*********/
#mainarea .xspace-blocktitle{background:url(http://template.blogworld.com.cn/class19/template44/images/title2.jpg) no-repeat left 7px;color:#000000;font-size:14px;padding-left:6px!important;padding-top:16px}
#mainarea .xspace-title{background:url(http://template.blogworld.com.cn/class19/template44/images/title2.jpg) no-repeat left 7px;color:#000000;font-size:14px;padding-left:6px!important;padding-top:16px}
#mainarea .xspace-entrytitle{color:#333333;font-size:13px}
#announcement,#show{margin-top:20px}
.xspace-smalltxt{color:#fff}
.xspace-list li,.xspace-list2col li{background:url(http://template.blogworld.com.cn/class19/template44/images/icon_list.gif) no-repeat 0.5em 0.6em}
.xspace-logo{background:none!important;}#xspace-goodsbaseinfo li { border-bottom: none!important;}
#xspace-ownerinfo{ border: none; }
#xspace-rates a { float: left; background: #EEE; color: #000; opacity: 0.6; filter: alpha(opacity=60); }
.xspace-logo{background:none!important;}
/*项目列表*/
.xspace-itemlist {margin:0;}
.xspace-itemlist li { border-bottom: 1px solid #999!important; }
/*信息正文中的模块*/
.xspace-msgmodule h5 {  border-bottom: 1px solid #999; }
/*自定义字段*/
.xspace-addoninfo { border: 1px solid #999}
/*出价记录*/
#xspace-aplist th, #xspace-aplist td { border-bottom: 1px solid #999 }
  #xspace-aplist .xspace-darkrow { background: #ccc; }
#xspace-aplist .xspace-ontop td { background: #ddd; }
  #xspace-ownerinfo { border: 1px solid #999;}
/*商品基本信息*/
#xspace-goodsbaseinfo li {  border-bottom: 1px solid #999  }
/*图片显示页面*/
.xspace-imagebox { border: 1px solid #999 }
.xspace-multipage {margin-top:6px; clear:both;}
#xspace-imgnavbar {  border-bottom: 1px solid #999  }
/*文件显示页面*/
#xspace-filebaseinfo li { border-bottom: 1px solid #999  }
/*信息正文中的模块*/
.xspace-msgmodule h5 { border-bottom: 1px solid #999  }
/*Tab选项卡*/
.xspace-listtab a { background: #EEE; color:#333}
.xspace-listtab li.xspace-active a { color:#333; font-size:12px}
/* 分页 */
table.xspace-page a { color: #000;}

/********页面底部定义*********/
#xspace-footer{background:url(http://template.blogworld.com.cn/class19/template44/images/foot.jpg) no-repeat left top;color:#333333;height:160px;margin:0px auto;padding-top:40px;text-align:center;width:996px}


红色部分是顶部图片，大家可以找一张自己喜欢的图片替代，记住该图片最好是长条形的。尺寸要做改动，边改边看效果是否满意， 直到高宽为一个合适的数值为止。
头部的一些数值我也改动了，见蓝色数字。
其它关于边框，还有底部我都没改。

色色

图片的尺寸没有严格要求，你将图片按原大小显示（1：1），自己再决定是否应该改变尺寸。我用的是800*355。

色色

对模板的编辑就比较简单，http://www.ourdream.ca/spacecp.p ... mplates&op=drag 自己一看就能懂。

dubble

原帖由 亦汐 于 2008-1-17 13:58 发表

                               
登录/注册后可看大图

CCS文件格式
急需学习

同感！