万维网页春意闹
#1 古色古香的垂直布局
?牐牎扒?门万户瞳瞳日，总把新桃换旧符”，过年贴春联是国人的传统习俗。网页上能不能也“贴”一些春联呢？我们知道春联除了“横批”之外都是垂直走向的，所以在以前如果想要在网页中“贴”春联就必须使用图像或者窄到只能容纳一个文字的表单元格。因为春联一般字数不多，采用这两种办法模拟垂直布局实现起来都不是太困难。但是如果需要采用这种布局的字很多，比如是一首贺年的唐诗，如果还采用那些方法不仅编排困难，而且会造成代码冗长，不利于整个网页的快速显示。W3C正在制订的CSS3标准中有一个已经得到浏览器支持的“writing-mode”的属性可以实现文字的垂直布局，采用这种布局的文字起始于每页的右上角，其走向是向下的，换行时，下一行回到页面顶部并位于前一行的左侧。
?牐爓riting-mode属性有两个要探讨的值：tb-rl和lr-tb。其中tb-rl表示自上而下、从右向左，说明了应用这种样式的元素的内容走向；lr-tb表示从左向右、自上而下，它是所有文字的默认走向，也是我们平常最熟悉的典型的水平走向。与其它任何CSS属性一样，可通过外部CSS文件，或通过对象模型（style.writingMode，用法：object.style.writingMode=sFlow，sFlow的默认值为“lr-tb”）在一列上指定这些值。值得一提的是，虽然是东亚语言引发了对垂直布局的支持这一思路，但是任何语言文字都可以采用垂直文字走向。在这种走向中，单独字符的方向取决于它们所属的语言或文稿。为了保持垂直排版的传统，东亚文字的字符均采取竖直方向显示，而其它所有字符，包括拉丁文字符，在采用垂直布局时则顺时针旋转90°显示。
?牐牬蟛糠挚墒拥腍TML元素都支持writing-mode属性，但是body元素例外，它总是采取水平布局，但它所包含的元素却可以采用垂直布局。因为浏览器总是将可视区定位于起始标记中最顶端元素的原点，所以如果要把原点放置在屏幕右上角的话，还需在一个支持writing-mode的全局元素中，将主体上的方向属性设置为RTL（从右向左），然后再将方向属性设置回LTR（从左向右）才行。请看以下例子：
?牐?<html>
?牐?<body style=“direction:rtl”>
?牐?<div style=“direction:ltr; writing-mode:tb-rl; width:768px”>
?牐?<p><u>爆竹声中一岁除</u><br>
?牐?<u>春风送暖入屠苏</u><br></p>
?牐?</div>
?牐?</body>
?牐?</html>
?牐犝舛未朐贗E5.5中的显示效果如^04049103a^1。我们可以看到，使用 writing-mode来实现垂直布局文字的下划线与传统方式一致，效果很好。如果再结合其它CSS属性来修饰这些文字，那么绝对可以在节省大量页面体积的前提下做出与使用图像相媲美的效果来，连整个网页都可以古色古香一回了。
#1 新年钟声倒计时
?牐犗嘈糯蠹叶悦磕甏航诹锻淼男履曛由辜剖倍加泻苌畹挠∠蟀桑康缡踊暗拿扛鲋谢加胫鞒秩撕拖殖」壑谝黄鸸刈⑿戮山惶娴氖笨蹋帐嵌嗝吹娜攘遥∫悄愕耐持幸灿姓庋牡辜剖保切履曛由孟斓哪且豢陶糜腥嗽谀愕恼镜闵贤Ａ簟?
?牐?<script language=“JavaScript”><!--
?牐爒ar springDay=new Date（“1/24/2001”）; //新年
?牐爁unction cutdown（）{ //倒计时函数
?牐爒ar today，days，hours，minutes，seconds，intHours，intMinutes，intSeconds;??
?牐爐oday=new Date（）; //当前时间
?牐燿ays=Math.floor（（springDay.getTime（）-today.getTime（））/（1000*60*60*24））; //计算剩余天数
?牐爄ntHours=today.getHours（）;hours=（12>intHours）?（23-intHours）:（＇0＇+eval（23-intHours））; intMinutes=today.getMinutes（）;?爉inutes=（50>intMinutes）?（59-intMinutes）:（＇0＇+（59-intMinutes））;?牐牔?
?牐爄ntSeconds=today.getSeconds（）;?爏econds=（50>intSeconds）?（59-intSeconds）:（＇0＇+（59-intSeconds））;?? /*以上三行分别计算剩余时间的小时、分钟、秒钟的数目*/
?牐爄f（days）>0 timeString=＇离春节还有＇+eval（days+1）+＇天＇;??
?牐爀lse if（days==0）{?牓?
?牐爄f（hours==＇00＇ && minutes==＇00＇ && seconds==＇00＇） timeString=false;??
?牐爀lse timeString=＇新年钟声将在＇+hours+＇个小时＇+minutes+＇分钟＇+seconds+＇秒之后敲响＇;??
?牐爙??
?牐爀lse timeString=＇已经是蛇年了＇;??
?牐爄f（!timeString） window.alert（＇蛇年到了，《电脑报》恭祝各位读者新年快乐！＇）;?? }??
?牐燾utdownDiv.innerHTML=timeString; //输出
?牐燿owning=window.setTimeout（＇cutdown（）＇，100）;?牔?
?牐爙??
?牐爓indow.onload=cutdown; //网页载入完成开始倒计时
?牐?//--></script>
?牐?<!-- 请在页面的<body>...</body>之间插入以下代码，用于现实倒计时 -->
?牐?<div id=“cutdownDiv”></div>
#1 闹腾腾的网页
?牐犎饶质切麓旱闹魈馇哉馐焙虻耐晨梢砸桓钠饺盏摹拔木病泵婵琢耍酉财笱蟮谋尘耙衾值奖浠谋晏饫浮⒆刺傅绕饺绽锞醯霉卩性拥亩髡馐焙蚩梢哉遄米攀褂谩?
#1 背景音乐
?牐犘麓旱耐骋逑治萝啊⑾楹汀⑵杖攘遥尘耙衾值比皇潜夭豢缮俚模皇谆犊斓拿褡謇智断惭笱蟆坊峤庖磺刑逑值昧芾炀≈隆?
?牐營E：<bgsound src=“bgsound/喜洋洋.mid” loop=“1”>（“bgsound/喜洋洋.mid”是背景音乐的路径与文件名，“loop”是循环次数，缺省值为无限循环）??
?牐燦etscape：<embed src=“bgsound/喜洋洋.mid” autostart=“True” hidden=“True” loop=“False”>（autostart=“True”允许自动播放，hidden=“True”不显示播放控件，loop=“False”不循环播放）
#1 变化的标题栏
?牐犕车谋晏馐怯伞?<title>……</title>”标签设定的，使用文档的title方法（document.title）可以动态更改这个值。使用了下面代码的网页的标题栏会不停地滚动，显得生气勃勃。
?牐?<script language=“JavaScript”><!--
?牐爒ar m1=＇:春节快乐:＇;??
?牐爒ar m2=＇:Happy spring festival:＇;??
?牐爒ar msg=m1+m2;var msg=msg+msg;??
?牐爁unction titnimation（）{?煟牓?
?牐爉sg=msg.substring（2，msg.length）+msg.substring（0，2）;?牔?
?牐燿ocument.title=msg;??
?牐爙??
?牐爄f（document.all） setInterval（＇titnimation（）＇，300）;?牔?
?牐?//--></script>
#1 状态栏跑马灯
?牐犝庵址椒ǚ浅＜虻ィτ靡脖冉瞎惴海绻陨稀氨浠谋晏饫浮钡拇氲牡故谒男懈淖鳌皐indow.status=msg”就成了一种简单的跑马灯，看起来也很热闹。
?牐犠苤彩欠辖谌沾笃找蟮亩鞫伎梢苑判氖褂迷谕持校且实保颐乔康鞯氖恰澳帧保皇恰奥摇薄?
#1 让网页绽放礼花
?牐犜谙质瞪钪校糠昙呀冢颐嵌家叛袒ㄒ允厩旌兀宀淑头椎难袒ǜ谌沾戳嘶独帧⑾楹汀⑾睬斓钠铡Ｈ缃翊航诮粒氩幌肴媚愕耐骋泊系憬谌盏南睬炱漳兀肯旅嫖颐蔷陀肑ava Applet制作一个背景是礼花绽放效果的网页，朵朵礼花盛开，给你的网页增添不少动人魅力。前景是色彩不断变换的文字，而且可以做成超链接，效果非常奇特。
?牐牼咛逯谱鞣椒ㄈ缦拢?
?牐?1.新建一个网页，查看它的源代码。
?牐?2.把下面的一段代码复制到<body></body>之间，然后保存文件。
?牐?<APPLET CODE=“fireworkTitle.class” WIDTH=“300” HEIGHT=“100”>
?牐?<PARAM name=“text1” value=“阖家欢乐！”>
?牐?<PARAM name=“font1” value=“TimesRoman”>
?牐?<PARAM name=“style1” value=“bold”>
?牐?<PARAM name=“size1” value=“48”>
?牐?<PARAM name=“text2” value=“万事如意！”>
?牐?<PARAM name=“font2” value=“Helvetica”>
?牐?<PARAM name=“style2” value=“bold italic”>
?牐?<PARAM name=“size2” value=“48”>
?牐?<PARAM name=“text3” value=“电脑报”>
?牐?<PARAM name=“font3” value=“TimesRoman”>
?牐?<PARAM name=“style3” value=“bold italic”>
?牐?<PARAM name=“size3” value=“48”>
?牐?<PARAM name=“URL1” value=“http://202.102.233.131”>
?牐?<PARAM name=“URL2” value=“http://www.cpcw.com”>
?牐?<PARAM name=“URL3” value=“http://www.yesky.com”>
?牐?<PARAM name=“bgcolor” value=“000000”>
?牐?<PARAM name=“textcolor1” value=“multi”>
?牐?<PARAM name=“textcolor2” value=“multi”>
?牐?<PARAM name=“textcolor3” value=“multi”>
?牐?<PARAM name=“max” value=“32”>
?牐?<PARAM name=“rad1” value=“20”>
?牐?<PARAM name=“rad2” value=“40”>
?牐?<PARAM name=“timer1” value=“26”>
?牐?<PARAM name=“timer2” value=“52”>
?牐?<PARAM name=“h1” value=“0”>
?牐?<PARAM name=“h2” value=“64”>
?牐?<PARAM name=“delay” value=“60”>
?牐?</APPLET>
?牐?3.去网络上下载一个ZIP文件，里面包含有两个class文件，这是Java Applet程序运行所必需的文件，网址是：http://202.102.233.134/wsxy/java/fireworktitle.zip，下载后解压到与保存网页相同的目录下。
?牐?4.在浏览器中打开保存的网页，预览网页效果如^04049103b^2！赶快把它上传到你的网站上去吧，让大家与你一块分享节日的快乐。不过要注意，在上传时，必须同时上传解压缩后的两个class文件，而且要与网页文件保存在同一个目录下。
?牐犑率瞪衔颐腔箍梢愿葑约旱陌酶谋淅窕ㄕ婪诺男Ч顾肽愕耐掣有鳎刑厣庑枰薷拇胫械南嘤Σ问?
?牐牨纠杏腥鲅繁渖允镜奈淖殖唇樱骸般丶一独帧薄ⅰ巴蚴氯缫狻薄ⅰ暗缒员ā保直鸲杂υ胫械膖ext1、text2、text3，你可以根据需要在参数中输入自己想要显示的文字内容。
?牐爁ont1、font2、font3定义字体的类型。
?牐爏ize1、size2、size定义字体的大小。
?牐爏tyle1、style2、style3定义字体的样式，有粗体bold、斜体italic等。
?牐爑rl1url2url3是三个文字的超链接所分别指向的网址。
?牐燽gcolor背景色，用十六进制表示。
?牐爐extcolor文字颜色，是允许变换颜色。
?牐爉ax礼花的数量。
?牐爎ad1、rad2开始、结束时礼花园环的半径。
?牐爐imer1、timer2礼花出现、消失的时间。
?牐爃1、h2变换显示的颜色数。
?牐燿elay文字显示延迟时间。
?牐犠远鲎：卮翱?
?牐犎绻阆朐诒鹑朔梦誓愕耐臼弊远鲆桓龉ёＰ履昕炖值男〈翱冢梢越铝写爰尤胪车腍TML中的<HEAD>---<HEAD>之间：
?牐?<script language=“JavaScript”>
?牐?<!--
?牐爒ar gt = unescape（＇%3e＇）;?牔?
?牐爒ar popup = null;??
?牐爒ar over = “Launch Pop-up Navigator”;??
?牐爌opup = window.open（＇＇， ＇popupnav＇， ＇width=200，height=170，resizable=1，scrollbars=auto＇）;?牔?
?牐爄f （popup!= null）{?? ??
?牐爄f （popup.opener == null）{?? ??
?牐爌opup.opener = self;??
?牐爙??
?牐爌opup.location.href = ＇在这里写文件的名字.htm＇;??
?牐爙??
?牐?//-->
?牐?</script>
?牐犠ⅲ篧idth=200是调整窗口的宽度，height=170调整窗口的高度，对于scrollbars=auto语句，你可以去掉auto加上相应的数字（如scrollbars=23）来调整窗口是否有滚动条。在popup.location.href里加入窗口中所需要的文件名。