MSN Space 简易教程（四十四）—— 改变共享空间的背景
MSN Space Easy Tutorial (44) —— Changing the Background in Your Space
|
中文版
自从开始写 MSN Space 教程以来，就不断有朋友询问如何更换空间的背景，而且越来越多的朋友希望能用自己的图片来做空间的背景图案。这篇教程我就来介绍一下怎样更换 MSN Space 的背景。 
（一）主题法
今年一月 MSN Space 改版后，已经能提供 129 种不同的主题，也就相当于提供了100 多种背景图案。通过在 MSN Space 的“自定义”中更换一个主题，就能改变空间的背景。这个方法非常简单，相信大家也都很熟悉，我就不多说了。
（二）Tweak UI 模块法
去年 MSN Space 推出了 PowerToy 工具，其中的 Tweak UI 模块就可以用来调整空间的背景。通过设置该模块中的“背景颜色”（ Background Colors），可以调节整个空间的背景颜色；而“背景图片”（ Background Image）则通过选项来设定 MSN Space 主题所提供的背景图片的位置、是否重复、以及是否隐藏。这样也能起到改变 MSN 共享空间背景的效果，具体内容请参考《 MSN Space 简易教程（二十六）—— PowerToy 模块》的内容。
（三）Custom HTML法
上述两种方法只是利用 MSN Space 所提供的主题和工具来更换背景图片、修改背景颜色。如果想用自己的图片来做 MSN Space 的背景图案，那么就要用到另一个 PowerToy —— Custom HTML 模块。Custom HTML 模块不仅能实现宽屏显示，还可以做出置顶效果（比如： 我的空间首页上的“ 卧虎藏龙”文字及图片），以及显示自己选择的空间背景图片，用途多多，绝对不可错过。关于 Custom HTML 模块的添加，请看 教程（二十六）。
下面我就以左右两列的模式为例，讲解一下怎样实现宽屏显示和自定义背景图片。
1、登录进入你的 MSN 共享空间。
2、在“自定义”中选择左宽右窄两列版式： 
3、按照 教程（二十六）中的方法，添加一个 Custom HTML 模块，并将此模块放于左列顶部。建议日志模块放在 Custom HTML 模块下方，其他模块放在右列内。
4、在 Custom HTML 模块内填入如下代码： |
|
English Version
Since my MSN Space Easy Tutorials were published in my space, more and more friends have asked me whether the background image can be changed to their pictures or photos. In fact, there are some methods to alter the background of MSN Spaces. Let me tell you several easy ways to do it in this tutorial.
(A) by Theme
Now MSN Spaces are providing 129 various themes, that means more than 100 backgrounds are available to choose. So the easiest way to change the MSN Space background is to select a theme in "Customize".
(B) by Tweak UI Module
Last August, three PowerToy modules appeared in MSN Spaces. One of them is called Tweak UI module, which can be used to adjust the background of your space. Through Tweak UI module, you can set the " Backgound Colors" and/or change the positioning, repeating, and displaying of " Background Image". If you want to know more about this Tweak UI module, please read my MSN Space Easy Tutorial (26).
(C) by Custom HTML Module
The above two methods to change the background are based on the tools that MSN Spaces provide. If you want to use any picture as the background image in your space, another PowerToy module, Custom HTML, is a good choice. Custom HTML module is a very powerful tool, which can be used to widen your space and display pictures or words at the topmost position in space. (For example, the Tiger picture in the homepage of my space.) Please read my MSN Space Easy Tutorial (26) to learn more about the Custom HTML module.
Now let me show you how to change the background image and widen your space.
1. Log in your MSN Space.
2. Select the two column layout in "Customize":
3. Follow the instruction in my Easy Tutorial (26) to add one Custom HTML module in your space. Place the Custom HTML module on the top of the left column, and put the blog module below it. Other modules or lists can be placed into the right column.
4. Type in the following codes into the Custom HTML module: |
</Table></Table></td></tr><tr><td><Table width=1000 background="URL of Background Image"><tr><td><Table>
|
其中，"width=1000" 是用于定义背景图片在首页上的显示宽度。对于宽屏显示来说，此数值大约在 1000 左右，大家可以自行调整。"background=URL of Background Image"中换上你的背景图片网址即可。
5、有很多朋友希望日志和其他模块也能透过背景图片，那么就在上述代码中添上一个颜色滤镜即可。下面这个代码是使得左列中的模块能透过背景： |
|
where "width=1000" is to determine the width of the area with your backgroud picture. In general, the number should be around 1000 for a widened MSN Space. Write the URL of your background image into "background=URL of Background Image", then you will see what you want is displaying on your space.
5. When applying a CSS filter in the above codes, it becomes possible to make your blog and other modules transparent except "Photo Album": |
</Table></Table></td></tr><tr><td><Table width=1000 background="URL of Background Image"><tr><td><Table>
<Table><tr><td style="Filter:Chroma(color=#FFFFFF)" valign=top><Table><tr><td valign=top>
或者使用 hr 改进的代码，使得左、右两列中的模块都变得透明（相册除外）： |
|
Thank hr to provide modified codes to make all modules in the space transparent except "Photo Album": |
</Table></Table></td></tr><tr><td><Table width=1000 background="URL of Background Image">
<tr><td style="Filter:Chroma(color=#FFFFFF)"><Table><Table><tr><td valign=top><Table><tr><td valign=top>
其中，" color=#FFFFFF" 中颜色代码是指你的日志模块中的背景颜色（ 注意：不是空间背景颜色）。比如：我的日志背景颜色是白色，代码就是" color=#FFFFFF" 或者 " color=white"；如果日志背景颜色是黑色，那么代码就是" color=#000000" 或者 " color=black"。请看 教程（三）中的颜色列表来确定颜色代码。以上代码在 IE 6.0 中测试通过，对于使用其他浏览器的朋友，可能需要做一定的修改。
6、如果你还想在 Custom HTML 模块中存放其他置顶图片或者计数器等工具，既可以把相应 HTML 代码添加在上述语句之后，也可以按照 教程（三十一）的方法添加另一个 Custom HTML 模块。具体范例请看 我的第二测试空间。
后记：这学期实在是太忙，所以一直没能抽出很多时间研究代码，而平时即使有些时间上 MSN Space 看看，也大都忙于回答朋友们提出的问题了。所以对于使用三列日志的朋友，可能需要自己参照上述的方法来实践了。这篇教程从开始筹划到最后定稿用了大约两个月的时间，而且是我的空间访问量在3月19日超过 1000000 人次后的第一篇日志，也算是很有纪念意义的了。 |
|
where " color=#FFFFFF" is the background color code of your blog module, not the background color of your space. For example, the background color of my blog module is white, then the code is " color=#FFFFFF" or " color=white". Please refer to my MSN Space Easy Tutorial (3) to determine the color code. All above codes are tested in IE 6.0.
6. If you want to keep other stuff in Custom HTML module, either add more codes after the above HTML tags, or follow the instruction in my Easy Tutorial (31) to obtain another Custom HTML module in your space. Here is an example.
P.S. I am too busy in writting my dissertation and doing job searching now, so I do not have time to try this codes in a three-column space. But I believe this code may be also work for such spaces with/without minor changes. You are always welcome to leave comments or notes here if you have any idea about the background of MSN Spaces. By the way, this tutorial is also to commemorate the 1,000,000 visits to my spaces on March 19, 2006. |
（此篇教程修改于2006年6月6日）
Tools 
