Profil de Andy瞬间转移PhotosBlogListes Outils Aide

Blog


30/03/2006

宽屏显示的实现

 
 

(二)宽屏显示的实现

可能 MSN Space 为了照顾那些依然使用 800×600 显示模式的用户,将日志和列表的屏幕显示宽度范围限制在 800px 之内。但是这样对于使用 1024×768 及以上显示模式的用户来说,就会在屏幕的右边留下空白区域,很不美观。以前在自由定位语句还能使用的阶段,不少朋友和我都在空白之处放上一些图片来弥补。可是自由定位语句在6月底就被 MSN 封杀了,从那时起我就开始探索是否有其他可行的办法来弥补这一空白。“工夫不负有心人”,通过 PowerToy 中的 Custom HTML 模块,只要写上短短几个代码,就能突破宽度 800px 的限制。下面我就来具体介绍一下:

1、宽屏显示的原理
因为 MSN Space 整个页面是通过表格<Table>语句来定位,所以这个宽屏显示也是通过<Table>语句来实现的。主要是将左列或者中列的模块变宽,将右列的模块挤到原来显示范围之外。由于采用了不对称的<Table>语句,所以使用要格外谨慎,请按照以下步骤去做,以免出现日志混乱、甚至空间首页无法登录等问题。

2、宽屏显示的条件
如果想使用本办法请将你的 MSN Space 排布格式改成如图所示的四种版式之一。如选择“左右两列”,则左列上方放 Custom HTML 模块,下方放 Blog(网络日志)模块,并将其他模块都放到右列。

② Widen the Blog by the Custom HTML Module

 
Maybe MSN considers those people who is still using 800×600 display mode, so the width of MSN Spaces are limited to 800 pixels. However, for the user with 1024×768 display mode, it leaves a large blank area on the right. People, including myself, are continuing seeking a way to reclaim this virgin soil. After spending a whole weekend in it, I found it could be possible to exceed the 800px limit by using Custom HTML module with some specific codes. Now I begin to share my finding with you.
 
1. The principle
As we know, the webpage of MSN Space is using a large table to locate and display contents, such as Blog and Custom List. The limit of the width of Blog module is defined within this table. So I am apply some <TABLE> tags to change it. Because wrong codes may cause some problems to your space, please make sure that you follow my tutorial step by step, and check the codes carefully before previewing your space. 
 
2. The applicable layouts
Please select one of the four layouts as shown below. For two-column layout, put the Custom HTML module on the top of the left column, the Blog module under it, and all the rest modules and lists into the right column. 

    or    

如选择“左中右三列”,则左列最好不放置模块,或者只放一两个模块(比如我首页上的 Welcome List),中列上方放 Custom HTML 模块,下方放 Blog(网络日志)模块,将其他模块都放到右列。

For three-column layout, put the Custom HTML module on the top of the middle column and the Blog module under it. Do not leave too many modules or lists in the left column, but the right column.

    or   

这四种方式的右列被挤出原显示范围后,页面效果无明显差异。

3、实现宽屏的语句
在 Custom HTML 模块中写了如下语句:

There is no big difference between the final results of these four layouts.

 
3. The HTML codes
Write the following code in the Custom HTML module: 

</TABLE>

点击“Save”按钮后,就可以新开一个 IE 窗口去预览效果了。这样做的目的是,万一出现问题,还可以回到原编辑窗口内修改代码。如果没有问题,就应该看到左侧的日志栏已经变宽,并将右侧的列表挤至 800px 限制的范围之外了。

4、添加图片或者文字
如果需要在 Custom HTML 模块中放置图片或者文字,则可把相应代码放到</Table>之后,大家可以试试看。需要图片居中的朋友,根据图片大小有两个办法:如果图片较小(比如:我置顶的“卧虎”图片),请选用上述“左中右三列”模式;如果图片比较大(比如:小乖的置顶图片),采用“左宽右窄两列”版式,将图片宽度设置为 width=760 即可。 

备注:如果将 Windows Media Player 模块放到右边列表栏中,并设定 Display Mode 为 Invisible 模式,那么右边的列表栏会稍微增加些宽度,每一行能多写两个字。另外,使用宽屏显示方法后,背景可能会变得不透明了。我不知道“熊掌”和“鱼肉”是否可以兼得,因为我不用透明的背景。

这种宽屏显示的效果不知道大家觉得怎么样,喜欢么?

Click "Save" button, and then preview your space in another IE windows. If something wrong, you can go back to the original window to change the codes. Now you may find that the Blog module becomes wider, and the right column is pushed to exceed the 800px limit.

 
4. Other codes in the Custom HTML module
If you need to put other codes in the Custom HTML module, put them after the above code. If you have a large picture in it, you may use the two column layout and set the width of the picture is 760 pixels to make it look like in the center above the Blog, such as Annie's Blog. If your picture is small, you may select three column layout, like the tiger picture in my space.
 
Remark: If you put Windows Media Player module in the right column, and set it to “Invisible” mode, the right column will appear a little wider. By the way, if you apply this method to your blog, you may lose the feature of transparent background.
 
Wish you like this wider effect of your space!

Commentaires (2)

Veuillez patienter...
Le commentaire entré est trop long. Raccourcissez-le.
Vous n'avez rien entré. Réessayez.
Il est actuellement impossible d'ajouter votre commentaire. Réessayez plus tard.
Pour ajouter un commentaire, tu dois avoir l'autorisation de tes parents. Demander l'autorisation
Tes parents ont désactivé les commentaires.
Il est actuellement impossible de supprimer votre commentaire. Réessayez plus tard.
Vous avez dépassé le nombre maximal de commentaires qu'il est possible d'envoyer le même jour. Réessayez dans 24 heures.
Votre compte a pu laisser les commentaires désactivés parce que nos systèmes indiquent que vous risquez d'arroser d'autres utilisateurs de messages. Si vous pensez que votre compte a été désactivé par erreur, contactez l'assistance en ligne de Windows Live.
Effectuez la vérification de sécurité ci-dessous pour finaliser l'envoi de votre commentaire.
Les caractères entrés pour la vérification de sécurité doivent correspondre à ceux de l'image ou du fichier audio.

Pour ajouter un commentaire, connectez-vous avec votre identifiant Windows Live ID (si vous utilisez Messenger ou Xbox LIVE, vous avez un identifiant Windows Live ID). Connectez-vous


Vous n'avez pas d'identifiant Windows Live ID ? Inscrivez-vous

Andy 宋a écrit :
呵呵呵,原来显示访客IP还有这种好处的。
......那个电车男还是算了
2 Avr.
Image de Anonyme
Sea Elves a écrit :
本来只是想观摩,但是考虑到IP都被截了....算了~既然路过,还踩踩吧~~~
PS:你COS电车男真的很象啊~~
30 Mar.

Rétroliens

L'URL de rétrolien de ce billet est :
http://andysongcp.spaces.live.com/blog/cns!5C586F39AC601DDB!948.trak
Blogs Web qui font référence à ce billet
  • Aucune