精雕细琢你的主页

---摘自《中国计算机报》
一、细线的表格
表格也可以算是网页所必定有的元素,但表格的边框线却令人很沮丧:如果你设border=0的话,表格的边框线就全部看不到;如果你设border=1或更大的话,边框线会呈无谓的凸起或者间隔很大的双线。能不能制作边框线只有一像素那么细的表格呢?答案是肯定的。

以下的例子可以制作出细线的表格。横边框线是利用改变一行只有一个像素的透明GIF图像的表格的背景颜色显示出来的,竖边框线就只要一个〈br〉就可以了。为了使横边框线与正文有一定间隔,只要在相应的制作竖边框线效果的列中加适量的〈br〉拉大高度,而为了使竖边框线与正文有一定间距,就要利用空的列来做为间隔。需要注意的是为了使这些“边框线”与表格更加融合,必须确保单元格间距、单元格边距和边框线宽度均为0。至于透明的GIF图像,只有85字节,可以自己制作,也可以到我的网页拿,即使没有也不过是在屏幕上多了一个黑点,无伤大雅。

〈div align=″center″〉〈center〉
〈table border=″0″ width=″600″ cellspacing=″0″ cellpadding=″0″ bgcolor=″#EEEECC″〉
〈tr〉
〈td bgcolor=″#000080″ colspan=″9″〉
〈p align=″center″ style=″font:30px 微软简粗宋,黑体,宋体;color:#ff0″〉细线表格例子〈/td〉
〈/tr〉
〈tr〉
〈td bgcolor=″#000080″ width=″1″〉〈br〉
〈br〉
〈br〉
〈br〉
〈br〉
〈br〉
〈/td〉
〈td width=″3″〉〈br〉
〈/td〉
〈td colspan=″5″〉 
利用表格的某些被IE和NN都接受的特性,可以制作出一些效果不错的表格,例如这个细线表格。
〈p〉令每个网页都保证能用IE和NN、以及被国内和海外的人所能正常浏览,是一个网页设计者的职责!
〈/td〉
〈td width=″3″〉〈br〉
〈/td〉
〈td bgcolor=″#000080″ width=″1″〉〈br〉
〈/td〉
〈/tr〉
〈tr〉
〈td bgcolor=″#000080″ colspan=″9″〉〈img src=″blank.gif″ width=″1″ height=″1″〉〈/td〉
〈/tr〉
〈tr〉
〈td bgcolor=″#000080″ width=″1″〉〈br〉
〈br〉
〈br〉
〈br〉
〈br〉
〈br〉
〈/td〉
〈td width=″3″〉〈br〉
〈/td〉
〈td width=″365″〉(细线表格的左边)〈p〉
网页设计是一项艺术,需要网页设计者尽自己的努力去做,才会让网页有更好的表现。
〈/td〉
〈td width=″3″〉〈br〉
〈/td〉
〈td bgcolor=″#000080″ width=″1″〉〈img src=″blank.gif″ width=″1″ height=″1″〉〈/td〉
〈td width=″3″〉〈br〉
〈/td〉
〈td width=″220″〉(细线表格的右边)〈p〉欢迎大家光临大唐天地:〈br〉
http://TV168.yeah.net〈/td〉
〈td width=″3″〉〈br〉
〈/td〉
〈td bgcolor=″#000080″ width=″1″〉〈br〉
〈/td〉
〈/tr〉
〈tr〉
〈td bgcolor=″#000080″ colspan=″9″〉〈img src=″blank.gif″ width=″1″ height=″1″〉〈/td〉
〈/tr〉
〈/table〉
〈/center〉〈/div〉

这个例子在IE和NN上都有比较满意的效果,但有一定局限,就是你不能将表格的宽度设定为百分比数值,否则在NN浏览时,边框线会变得很粗。
读者改良一下这个表格,例如将竖边框线增加为两条,就可以制作出更容易定制的文本框。

二、水平线
讨厌HTML的水平线〈hr〉了吗?改变一下上面的例子:

〈table width=″100%″ border=″0″ cellspacing=″0″ cellpadding=″0″〉
〈tr〉
〈td bgcolor=″#c0c0c0″〉〈img src=″blank.gif″ width=″1″ height=″1″〉〈/td〉
〈/tr〉
〈tr〉
〈td bgcolor=″#808080″〉〈img src=″blank.gif″ width=″1″ height=″1″〉〈/td〉
〈/tr〉
〈/table〉

一条浮雕效果的水平线就出来了。

三、突出的文字
刚刚学习编写网页而又使用Frontpage 98的朋友很喜欢使用FP98的字幕功能,但这个功能其实是一个ActiveX效果,所以NN并不能识别。
不过使用了字幕的网友不用灰心,尽管放心地使用,因为恰恰NN有一个效果是IE所不支持的,就是闪烁(Blink)。所以对于需要突出的文字可以使用以下的代码:〈p〉〈span style=″font:11pt Tahoma,Arial″〉〈blink〉〈marquee border=″0″〉欢迎光临大唐天地〈/marquee〉〈/blink〉〈/span〉〈/p〉
对于IE,它是滚动的字幕(长度可以使用width=″″来定义);而对于NN,它是闪烁的文字,不会有任何错误发生。需要注意:NN不会解释〈font style=″″〉这样的样式表,一定要使用〈span〉。

四、中文字符集
以往有不少人(包括本人)都强调要在〈head〉中加入字符集的定义,但自从有海外的网友投诉不能浏览文字后,我就开始检讨这个策略。
的确,加入了″charset=″对于具有该字符集的访问者来说,是很方便的;但如果访问者只是利用外挂的中文平台来浏览的话,那么他所看到的文字都是一个一个的方框。
那么,如何才可以使自己的网页能让所有的人所正确浏览呢?我的意见是不定义字符集,由用户自己取舍。

五、美观的按钮
一般的留言簿都需要按钮提交,为了使按钮文字美观些,可以使用以下CSS语句:
input,textarea {font:9pt Tahoma,宋体}
这些CSS还可以应用到select等表单元素上。