万维网页春意闹
周辉腾 张金贵
2001年 4期
新年临近，一切都洋溢着节日的喜庆气氛，“老去又逢新岁月，春来更有好花枝”，我们精心雕琢的网页在节日里应该要有不同于平日的精彩呈献给读者。从暖色调的喜庆颜色搭配方案到一系列恭贺新禧的内容，迎春的网页字里行间渗透的应该是节日的祥和、喜庆。
#1 古色古香的垂直布局
“千门万户瞳瞳日，总把新桃换旧符”，过年贴春联是国人的传统习俗。网页上能不能也“贴”一些春联呢？我们知道春联除了“横批”之外都是垂直走向的，所以在以前如果想要在网页中“贴”春联就必须使用图像或者窄到只能容纳一个文字的表单元格。因为春联一般字数不多，采用这两种办法模拟垂直布局实现起来都不是太困难。但是如果需要采用这种布局的字很多，比如是一首贺年的唐诗，如果还采用那些方法不仅编排困难，而且会造成代码冗长，不利于整个网页的快速显示。W3C正在制订的CSS3标准中有一个已经得到浏览器支持的“writing-mode”的属性可以实现文字的垂直布局，采用这种布局的文字起始于每页的右上角，其走向是向下的，换行时，下一行回到页面顶部并位于前一行的左侧。
writing-mode属性有两个要探讨的值：tb-rl和lr-tb。其中tb-rl表示自上而下、从右向左，说明了应用这种样式的元素的内容走向；lr-tb表示从左向右、自上而下，它是所有文字的默认走向，也是我们平常最熟悉的典型的水平走向。与其它任何CSS属性一样，可通过外部CSS文件，或通过对象模型（style.writingMode，用法：object.style.writingMode=sFlow，sFlow的默认值为“lr-tb”）在一列上指定这些值。值得一提的是，虽然是东亚语言引发了对垂直布局的支持这一思路，但是任何语言文字都可以采用垂直文字走向。在这种走向中，单独字符的方向取决于它们所属的语言或文稿。为了保持垂直排版的传统，东亚文字的字符均采取竖直方向显示，而其它所有字符，包括拉丁文字符，在采用垂直布局时则顺时针旋转90°显示。
大部分可视的HTML元素都支持writing-mode属性，但是body元素例外，它总是采取水平布局，但它所包含的元素却可以采用垂直布局。因为浏览器总是将可视区定位于起始标记中最顶端元素的原点，所以如果要把原点放置在屏幕右上角的话，还需在一个支持writing-mode的全局元素中，将主体上的方向属性设置为RTL（从右向左），然后再将方向属性设置回LTR（从左向右）才行。请看以下例子：
这段代码在IE5.5中的显示效果如^04049103a^1。我们可以看到，使用 writing-mode来实现垂直布局文字的下划线与传统方式一致，效果很好。如果再结合其它CSS属性来修饰这些文字，那么绝对可以在节省大量页面体积的前提下做出与使用图像相媲美的效果来，连整个网页都可以古色古香一回了。
#1 新年钟声倒计时
相信大家对每年春节联欢晚的新年钟声倒计时都有很深的印象吧？电视机前的每个中华儿女都与主持人和现场观众一起关注新旧交替的时刻，气氛是多么的热烈！要是你的网页中也有这样的倒计时，要是新年钟声敲响的那一刻正好有人在你的站点上停留……
#1 闹腾腾的网页
热闹是新春的主题曲，所以这时候的网页可以一改平日的“文静”面孔了，从喜气洋洋的背景音乐到变化的标题栏、状态栏等平日里觉得过于嘈杂的东西这时候可以斟酌着使用。
#1 背景音乐
新春的网页要体现温馨、祥和、气氛热烈，背景音乐当然是必不可少的，一首欢快的民族乐曲《喜洋洋》会将这一切体现得淋漓尽致。
IE：（“bgsound/喜洋洋.mid”是背景音乐的路径与文件名，“loop”是循环次数，缺省值为无限循环）
Netscape：