[借放]X-SPCE個人空間更改方法

valui · 发表于 2006-9-16 07:10:54

X-Space个人空间模板修改
<

>青岛浪子
<

>X-Spaces个人空间的模板是基于Div+CSS技术的构建的，修改模板其实就是修改CSS的属性值。在修改模板中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等，在你学习这篇入门教程之前，我们就来对CSS进行一个简单的了解。
<

> 一、CSS应用的基本知识 CSS是Cascading Style Sheets的简称，中文翻为“串接样式表”，也有人只翻译为“样式表”。CSS用以作为网页的排版与风格设计，在所谓的“新式网页”里，CSS不容置疑是相当重要的一环。CSS是以既有的基础，用以弥补既存HTML规格里的不足，也让网页的设计更为灵活。
<

>在这里限于篇幅并不介绍CSS的所有规则，仅就您在网页写作上较常用到，较可能用到的语法部份及应用的方法来为您作介绍。
<

>1.基本用语 元件(element)：亦即HTML基本语法中的标签(tag)。 属性(attribute)：用以描述标签特性的属性。 例如： <HR WIDTH=\"90%\">中，HR为标签，WIDTH为属性，而80%即为WIDTH属性的值。 性质(property)：用以描述元件的特性。相当於HTML基本语法中的属性。 样式(style)：拥有一组或数组的性质，用以描述元件特性。 挑选者(selector)：套用样式的元件。
<

>例如：H3{COLOR : BLUE}中，H3为挑选者，COLOR为性质，BLUE为COLOR性质的值。
<

>2.基本单位 有相对单位与绝对单位两种单位表达方式。
<

>相对单位： 『em』：相对于字母高度的比例因子。 『en』：相对于字型大小的比例因子。 『%』：相对于长度单位（通常是目前字型的大小）的百分比例。
<

>绝对单位： 『in』：英寸。 『cm』：公分。 『mm』：公厘。 『px』：像素（系统预设单位）。 『pc』：pica，印刷活字单位。 『pt』：像点。 相对关系：1in=6pc=72pt=2.54cm=25.4mm
<

>3.颜色使用
颜色的表示共有五种方式。 『#RRGGBB』： 以三个00到FF的十六进位值分别表示0到255十进位值的红、绿、蓝三原色数值。 『#RGB』： 简略表示法，只用三个0到F的十六进制值分别表示红、绿、蓝三原色数值。而事实上，浏览器会自动扩展为六个十六进位的值，如『#ABC』将变为『#AABBCC』。但是，显见这样的表示法并不精确。 『rgb(R,G,B)』： 以0到255十进位值的红、绿、蓝三原色数值来表示颜色。 『rgb(R%,G%,B%)』： 以红、绿、蓝彼此相对的数值比例来表示颜色，如『rgb(60%,100%,75%)』。 『Color_Name』： 直接以颜色名称来表示颜色，共有141种标准的颜色名称。
 4.URL表示法 CSS的URL表示共有五种方式，且都为合法宣告，您可以自行选用。 URL(http://yourweb/path/file_name) URL(\'http://yourweb/path/file_name\') URL(\"http://yourweb/path/file_name\") URL( \'http://yourweb/path/file_name\' ) URL( \"http://yourweb/path/file_name\" ) 　　 有了这些基本认识与概念后，接下来就要来为您介绍CSS和Div到底是什么关系。
二、CSS和Div的关系
所谓Div即层，CSS就是样式表的简称，DIV就如同一个房间的构架，它是用来定义我们这个空间有多少个房间，每个房间的大致用途的，而CSS，它就如同具体的装修方案。也就是说，我们的空间如同一个大楼，即使提供的房间都是同一样式，即DIV都一样的，只要我们能制定出不同的装修方案，那么我们每个人的空间都能保持自己的个性。之所以采用这种方式，是因为这样能够实现简单的样式定义，从而简化源代码，方便的实现样式的引用！CSS用来控制DIV的显示形式、位置等，这样做的好处是灵活、简便、方便维护。 有了以上的了解，你对于CSS应该有了一个基本的认识，那么接下来，我们就要进开始修改模板了！
 三、模板CSS修改
我们以X-Space自带的“黄色金秋”作为模版范例进行修改。
第一步:前期准备
1.打开两个浏览器窗口，第一个窗口打开博客首页页面，第二个窗口打开个人空间后台管理平台，然后选择[模版]－>[选择新模版]（如图1），然后选中“黄色金秋”点击[提交]按钮（如图2）。
<IMG alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/1.gif\">
<IMG alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/2.gif\">
提交之后，点击[浏览模板]—>[编辑]。（如图3）
<IMG alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/3.gif\">
在打开[我的模板]页面中可以看到[主页面][索引页面][内容页面][样式表]等四项选择，点[样式表]就能看到该模板的CSS的内容，这就是我们要修改的部分。（如图4）
<IMG alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/4.gif\">
 2.打开记事本，将CSS中的内容复制进去。目的很简单，给CSS做个备份，如果修改中出现问题就用记事本中的内容去恢复。
3.准备一张色系表以便配色。（如图5）。
<IMG alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/5.gif\">
4.收集你想用来作为背景或者其它图标的图片文件。（如图6）
<A href=\"http://www.bitscn.com/upimg/Image/discuz/21/6.jpg\" target=_blank><IMG height=360 alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/6.jpg\" width=480></A>
 第二步:正式修改
1.修改DIV标签
（1）.因为这个官方模板的DIV设置是不带背景，因此需要对DIV部分进行修改。在[我的模版]编辑中，选择[主页面]（如图7）。
<IMG alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/7.gif\">
（2）.然后找到左下角的[显示源代码]，选中前面的复选框，这时候我们就能看到一长串的DIV代码了（如图8）。
<IMG alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/8.gif\">
（3）.找到“<DIV id=mainarea>”这行代码，在这行代码前面加入下面两行代码（如图9）：
<IMG alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/9.gif\"> <DIV class=oncebg> <DIV id=main>
（4）.然后在所有代码的最后加入“</DIV></DIV>”，最后点击[提交]按钮（如图9）。
 2.重复上面步骤，修改“索引页面”和“内容页面”的DIV标签。
3.图10---图16是根据CSS代码逐段说明（其中颜色凡是为绿色的都是注释）。
<A href=\"http://www.bitscn.com/upimg/Image/discuz/21/10.gif\" target=_blank><IMG height=210 alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/10.gif\" width=480></A>
<A href=\"http://www.bitscn.com/upimg/Image/discuz/21/11.gif\" target=_blank><IMG height=287 alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/11.gif\" width=480></A>
<A href=\"http://www.bitscn.com/upimg/Image/discuz/21/12.jpg\" target=_blank><IMG height=428 alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/12.jpg\" width=480></A>
<A href=\"http://www.bitscn.com/upimg/Image/discuz/21/13.jpg\" target=_blank><IMG height=411 alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/13.jpg\" width=480></A>


<SCRIPT src=\"http://pagead2.googlesyndication.com/pagead/show_ads.js\" type=text/javascript>
</SCRIPT>


<A href=\"http://www.bitscn.com/upimg/Image/discuz/21/14.jpg\" target=_blank><IMG height=445 alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/14.jpg\" width=480></A>
<A href=\"http://www.bitscn.com/upimg/Image/discuz/21/15.jpg\" target=_blank><IMG height=377 alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/15.jpg\" width=480></A>
<A href=\"http://www.bitscn.com/upimg/Image/discuz/21/16.jpg\" target=_blank><IMG height=314 alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/16.jpg\" width=480></A>
<A href=\"http://www.bitscn.com/upimg/Image/discuz/21/17.jpg\" target=_blank><IMG height=439 alt=\"\" src=\"http://www.bitscn.com/upimg/Image/discuz/21/17.jpg\" width=480></A>

valui · 发表于 2006-9-16 07:47:50

X-Space美化教程--修改顶部LOGO

一 GIF图片制作:我们创建BLOG后顶部的LOGO图片都是系统自带的,没有个性,要怎么样修改顶部的图片呢?下面我简单讲述一下怎样修改博客顶部的LOGO图片。

先进入控制面板--个人空间管理--模板--编辑（选择你要修改的模板）--显示源代码（前面打√）--去掉顶部五行代码--添加以下代码（代替刚才去掉的五行代码）：

<DIV class=wrap>
<DIV id=header style="WIDTH: 999px; HEIGHT: 0px">
<DIV align=center><EMBED style="TOP: 5px" align=center

src=http://bbs.cpcw.com/blog/batch.download.php?aid=33468 width=1000 height=210

type=application/x-shockwave-flash

;pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?

P1

_Prod_Version=ShockwaveFlash" bgcolor="#eaf5fb"

quality="high"></DIV>

在上面这段代码中http://bbs.cpcw.com/blog/batch.download.php?aid=33468是图片或者Flash动画存放的地址。（你可以上传到任何一个空间里边存放，我的LOGO就是上传到博客空间里的。）width=1000 height=210为你的宽度和高度，在此，我以我的模版宽度为列,（你可以在网上找一张宽度为1000左右的图片或者自己用图片软件剪辑一张宽度为1000左右的图片成为你的LOGO，要想让LOGO有特效，那你就得熟悉那些图片制作软件,这个不在本文讲述范围内。）高度可以不管是多少（你个人觉得合适就行），但是宽度一定要在1000左右，（1000是我用的这个[回]试页面模板，[旧]试页面模板大概是650-700），因为宽度过大或过小就会在首页显示失真。

推荐图片制作软件友立公司出版的Ulead GIF Animator
下载地址：http://www.skycn.com/soft/2441.html
汉化补丁：http://www.skycn.com/soft/2442.html

【UleadGIFAnimator教程】教您做閃字：http://bbs.cpcw.com/blog/?action/viewspace/itemid/57470

使用UleadGIFAnimator制做GIF动画：http://bbs.cpcw.com/blog/?action/viewspace/itemid/57473

二 Flash修改:Flash动画的制作简单几句是讲不完的了，在网上看到你喜欢的Flash,可以用拿来主义拿取别人的Flash简单修改一下就是自己的作品了。Flash动画的宽高度也参考同上。

推荐Flash制作软件Macromedia Flash MX 2004,硕思闪客精灵MX 2005

修改一部Flash把以SWF后缀名的动画改为FLA后缀名:安装后打开硕思闪客精灵--快速打开--浏览--找到你要转换的SWF文件--导出FLA--OK，现在你就可以随意的在Macromedia Flash MX 2004上修改Flash

点击你刚刚导出的FLA文件，用鼠标拖动那些字体，看，是不是可以随便拖动！点击左边工具栏的A符号你就可以随便改动字体了，字体编辑你可以在网上去找你喜欢的字体，字体的属性都可以在下方修改。添加字：点击左边工具栏的A符号就可以了。要删除某一个图或者字，就对着右键剪辑掉就是。添加图片：文件--导入--导入到舞台--选择要导入的文件，OK，现在你可以在上面随便拖动图片了。

制作好后点文件--发布预览--Flash，可以预览制作的Flash 。确定制作完成，点文件--导出--导出影片。怎么样？是不是感觉到自己也可以制作喜欢的Flash呢？

Macromedia Flash MX 2004下载地址：http://www.600it.com/soft/1679.htm
硕思闪客精灵MX 2005破解版下载地址：http://www.600it.com/soft/5740.htm

赶快去试试吧，把你的博客变得与众不同。

另外，高手可以帮忙指点更快更好的制作建议......

注：本文为本站原创作品，未经允许不得擅自转载，谢谢合作。