网页常用特效整理

　中级篇

　　1．节日倒计时

　　＜Script Language=”JavaScript”＞

　　var timedate= new Date(”October 1,2002″);

　　var times=”国庆节”;

　　var now = new Date();

　　var date = timedate.getTime() - now.getTime();

　　var time = Math.floor(date / (1000 * 60 * 60 * 24));

　　if (time ＞= 0)

　　document.write(”现在离”+times+”还有: “+time +”天”)＜/Script＞

　　2．单击按钮打印出当前页

　　＜Script Language=”JavaScript”＞

　　＜!– Begin

　　if (window.print) {

　　document.write(’＜form＞’

　　+ ‘＜input type=button name=print value=”打印本页” ‘

　　+ ‘onClick=”javascript:window.print()”＞＜/form＞’);

　　}

　　// End –＞

　　＜/Script＞

　　3．单击按钮‘另存为’当前页

　　＜input type=”button” name=”Button” value=”保存本页”

　　onClick=”document.all.button.ExecWB(4,1)”＞

　　＜object id=”button”

　　width=0

　　height=0

　　classid=”CLSID:8856F961-340A-11D0-A96B-00C04FD705A2″＞

　　＜embed width=”0″ height=”0″＞＜/embed＞

　　＜/object＞

　　4．显示系统当前日期

　　＜script language=JavaScript＞

　　today=new Date();

　　function date(){

　　this.length=date.arguments.length

　　for(var i=0;i＜this.length;i++)

　　this[i+1]=date.arguments[i] }

　　var d=new date(”星期日”,”星期一”,”星期二”,”星期三”,”星期四”,”星期五”,”星期六”);

　　document.write(

　　”＜font color=##000000 style=’font-size:9pt;font-family: 宋体’＞ “,

　　today.getYear(),”年”,today.getMonth()+1,”月”,today.getDate(),”日”,

　　d[today.getDay()+1],”＜/font＞” );

　　＜/script＞

No Comments »

HTML/CSS30 Nov 2004 12:00 am
网页常用特效整理：初级篇

笔者日积月累了许多精彩、实用的Web特效的制作，这些特效几乎都是比较常用的网页特效。现在我就把这些经过整理和修改过的特效分三个级别分别介绍给大家。

　　初级篇

　　1．让文字不停地滚动

　　＜MARQUEE＞滚动文字＜/MARQUEE＞

　　2．记录并显示网页的最后修改时间

　　＜script language=JavaScript＞

　　document.write(”最后更新时间: ” + document.lastModified + “”)

　　＜/script＞

　　3．关闭当前窗口

　　＜a href=”/”onClick=”javascript:window.close();return false;”＞关闭窗口＜/a＞

　　4．2秒后关闭当前页

　　＜script language=”JavaScript”＞

　　＜!–

　　setTimeout(’window.close();’,2000);

　　–＞

　　＜/script＞

　　5．2秒后载入指定网页

　　＜head＞

　　＜meta http-equiv=”refresh” content=”2;URL=http://你的网址”＞

　　＜/head＞

　　6．添加到收藏夹

　　＜Script Language=”JavaScript”＞

　　function bookmarkit()

　　{

　　window.external.addFavorite(’http://你的网址’,'你的网站名称’)

　　}

　　if (document.all)document.write(’＜a href=”#” onClick=”bookmarkit()”＞加入收藏夹＜/a＞’)

　　＜/Script＞

　　7．让超链接不显示下划线

　　＜style type=”text/css”＞

　　＜!-

　　a:link{text-decoration:none}

　　a:hover{text-decoration:none}

　　a:visited{text-decoration:none}

　　-＞

　　＜/style＞

　　8．禁止鼠标右键的动作

　　＜Script Language = “JavaScript”＞

　　function click() { if (event.button==2||event.button==3)

　　{

　　alert(’禁止鼠标右键’);

　　}

　　document.onmousedown=click // –＞

　　＜/Script＞

　　9．设置该页为首页

　　＜body bgcolor=”#FFFFFF” text=”#000000″＞

　　＜!– 网址：http://你的网址–＞

　　＜a class=”chlnk” style=”cursor:hand” HREF

　　onClick=”this.style.behavior=’url(#default#homepage)’;

　　this.setHomePage(’你的网站名称);”＞＜font color=”000000″ size=”2″ face=”宋体”＞设为首页＜/font＞＜/a＞

　　＜/body＞

No Comments »

HTML/CSS30 Nov 2004 12:00 am
让字体美起来

你可能正建立自己在网上的家-WEB页，又或者它已经被你安置在网络某一角里。无论出于什么目的,你都希望有更多的指导,告诉你该如何更好的布置家。

　　在目前许多的指导中，他们都在诉说，应该加一点声音或者一个说话的场地。的确我们都需要它，但我希望关心更多WEB家里底层的东西，比如如何把字体弄的漂亮些，或者让页面颜色变的活泼些，让访问者增加“看欲”，还有更多你曾经都没有关注的细微之处。今天，我们首先来探讨页面的字体。

　　一、html中定义字体



　　字体的确是很好打交道的，一开始制作页面，它就以默认的样式显示。随着逐步的深入，你会改变一下默认的设置，增大或者减小字体。

　　一般字体默认的标签格式：＜p＞田涛＜/p＞

　　接下来，我们把字体设置为黑体或者宋体字样式，它的标签如下：

　　＜p＞＜font face=”黑体”＞田涛＜/font＞＜/p＞

　　在以上格式里，我们引出了字体的标签元素＜font＞＜/font＞.该标签具有下面三个属性值：

　　size=”…” 设置字体的大小，一般从1到7，它的默认值是+3，每次改变字体都是+3或者-3。

　　color=”…” 字体颜色的设置。定义颜色可以利用RGB的16进制值，比如： color=“#ffffff” 。也可以直接利用颜色英文来定义，比如： color=“white”

　　face=”…” 字体样式的设置，比如：face=“黑体”。或者 face=“黑体，宋体”。后者的格式，每当浏览器访问第一种字体失败后，浏览器就会访问第二种字体，依此类推。

　　下面是一个完整的字体格式：

　　＜font face=”黑体” size=”2″ color=”#FFFFFF”＞田涛＜/font＞

　　HTML还提供了以下字体样式标签：

　　1.六个标题样式

　　从h1到h6，如：＜h1＞＜font face=”黑体” size=”2″＞田涛＜/font＞＜/h1＞

　　2.字体风格

　　斜体字：＜em＞田涛＜/em＞

　　粗体字：＜strong＞田涛＜/strong＞

　　斜体+粗体字：＜strong＞＜em＞田涛＜/em＞＜/strong＞

　　3.定义文本

　　定义大字体

　　＜big＞田涛＜/big＞

　　定义小字体

　　＜small＞田涛＜/small＞或者＜small＞＜small＞＜small＞田涛＜/small＞＜/small＞＜/small＞

　　如果你在字体标签中设置了size=”…”,那么＜big＞标签将不起作用。

　　除了以上常用字体标签元素外，HTML还包含很多其它标签，但不我们不多用。

No Comments »

HTML/CSS30 Nov 2004 12:00 am
CSS快速入门

在当今的网页制作中，几乎所有漂亮的网页都用了CSS。 CSS是 Cascading Style Sheet的缩写，有些书上把它译为 “层叠样式表”。有了CSS的控制，我们的网页便会给人一种赏心悦目、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。虽然只短短的十几行代码，得到的效果却不同凡响。其基本用法是在网页中插入如下格式的一段代码：

　　下面以一段比较典型的CSS代码为例介绍其具体用法。

　　例：这段代码 中间的部分共七行，可看出有这样的特点：前两行的格式分别为P {……} 和 TD {……} 。后五行均是 A:命令词 {……} 的格式。其中前两行的作用是对网页文字的字体、大小、颜色等的控制，而后五行则是对链接的色彩及下划线的控制。

　　1.文字控制

　　例中的前两行:

　　P {FONT－FAMILY: 宋体; FONT－SIZE: 9pt; LINE－HEIGHT: 12pt; color:＃000000} TD {FONT－FAMILY: 宋体; FONT－SIZE: 9pt} 说明：FONT－FAMILY:宋体;(指定网页文字的字体) FONT－SIZE:9pt;（指定网页文字的字号大小，pt是表示大小的单位）LINE－HEIGHT:12pt;（指定行与行的垂直距离，即行高）color:＃000000（指定网页文字的颜色，＃000000 代表黑色，为十六进制数）TD
{FONT－FAMILY:宋体;FONT－SIZE:9pt}（对网页表格里的文字进行控制）

　　2.链接色彩变化及下划线的控制

　　例中的后5行说明：

　　A:hover {BACKGROUND－COLOR: ＃ffccff; COLOR: ＃0080ff}

　　(hover表示鼠标指示时,链接文字背景色为＃ffccff;前景色为＃0080ff)

　　A:link {color:＃000000;TEXT－DECORATION: none}

　　(link表示未被访问时,链接颜色为黑色,链接无下划线.)

　　A:visited {color:gray;TEXT－DECORATION: none}

　　(visited表示被访问后,链接颜色为灰色,链接无下划线.)

　　A:active {color:green;text－decoration: none}

　　(active表示鼠标点击时,链接颜色为绿色,链接无下划线.)

　　A:hover {TEXT－DECORATION: underline}

　　(hover表示鼠标指示时,链接显示下划线)

　　注释：

　　none——没有下划线

　　underline——下划线

　　overline——上划线

　　line－through——中划线

　　以上是比较典型的一段CSS代码，代码中的参数值可随意更换调试。有了CSS的预先设置，你会发现制作网页变得更轻松了。

No Comments »

HTML/CSS30 Nov 2004 12:00 am
声音层叠样式表单

随着网络技术的不断发展，声音也逐渐成为了网页制作过程中考虑的一个主要因素。

　　使用CSS样式表单的方法为网页中加入声音，将有很好的灵活性，提供文档的真正意义上的多重显示模式。

　　由于声音是在空间上进行传播的，又具有延续性，所以新单位中自然也就有deg角度、grad梯度、rad弧度、ms和s等，剩下的还有就是声音本身单位Hz和kHz。首先我们来谈谈声音的属性。

　　Volume属性，这是一个设定声音大小的属性，它可以选择的属性值有：silent/x-soft/soft/medium/loud/x-loud，或者直接使用百分比值来表示。这个属性没有限定，可以使用于所有的元素，初始时的默认值medium，这里百分比的范围是从0%到100%，但并不是说0% 就是没有声音，在这里只是表示一种相对的大小，说明是用户可以听到的最小音量对应于x-soft，如果要表示完全没有声音是silent。

　　pause-before属性值表示为：<时间值>/<百分比值>，这个属性是表示元素前的停顿。它可以适用于所有的元素，但它没有继承属性,它的停顿长短要参照“speech-rate”属性值。

　　pause-after属性值表示为<时间值>/<百分比值>，通过上一个属性很容易联想到它是定义元素后停顿的，这里我们就不重复讨论了。

　　pause属性值表示为：[<时间值>/<百分比值>]{1，2}，其实它就是pause-before和pause-after结合的一种简单形式,比如H1{pause:20ms},H2{pause:20ms40ms}就是表示第一句话前后都停顿30毫秒，第二句话前停顿20毫秒后停顿40毫秒。

　　cue、cue-before、cue-after属性值：/none，用于在元素的前后插入声音，将元素区分出来。使用cue则元素前后使用相同的声音，使用cue-before 、cue-after则可以在元素前后使用不同的声音。同时这个属性没有继承。

　　play-during属性值表示为：mix?repeat?/auto/none，这个属性是指定当元素正在播放时应该有什么背景声音。如果保留“mix”那么子元素的背景声音将同上级元素的背景声音混合播放，如果选择的是“repeat”那么将只播放当前的元素的背景声音，同时如果背景声音比元素长，那么一旦元素播放完毕，背景声音也立即停止。

　　下面我们接着介绍空间属性。

　　azimuth属性值：<角度值>/[[left-side/far-left/left/center-left/center/center/center-right/right/far-right/right-side]//behind]/leftwards/rightwards，从字面上来说“azimuth”是方位角的意思，它的值可以在-360度到+360度的范围之间取值。其中0度表示直接在音场的正中央，90度代表右，180度代表后，270度表示左，同时我们也可以使用相对的关键字，这个属性对于提供声音的空间三维效果非常有用。

　　elevation属性值:/below/level/above/highter/lower，属性用来设置音源的仰角位置的。取值范围从-90到+90度。默认定义0度为前方的水平方向，+90度为头顶垂直方向，-90度代表从下垂 直向上。

最后我们谈谈语音属性。

　　speech-rate属性值:/x-slow/slow/medium/fast/x-fast/faster/slower，其实这个属性我们在前面已经见过，它是一个指定阅读速度的属性值。我们可以使用相对的或者是绝对的关键字来指定属 性值，如果给出的是一个数字值，那么就是每一分钟阅读的字数。它是具有继承属性的。

　　voice-family属性值：[[/],]*[/]，与”font-family”属 性很相像，可以定义声音类型，同时可以运用于所有的元素，具有继承属性。例如：H1{voice-family:announcer,male}。

　　pitch属性值表示为:/x-low/low/medium/high/x-high，这个属性使用赫兹单位来指定阅读声音的平均音高标准。

　　pitch-range属性值：<百分比值>，这个属性是用百分比值来指定音高，0%的音量范围代表平缓、单调的声音，50%代表普通的声音，如果大于50%则表示高音了。

　　stress属性值：<百分比值>，这个属性代表语音强调的级别，这对于英语非常有用。

　　richness属性值：<百分比值>，这个属性决定了阅读声音的饱和程度，如果降低这个值就会使得声音 变得柔和。

　　speak-punctuation属性值:code/none，使用了这个属性在阅读时遇到括号或者破折号时有所停顿。

　　speak-date属性值:myd/dmy/ymd，在这个属性中指定阅读日期的方式，我们可以根据人们不同的习惯 使用不同的阅读方式。

　　speak-numeral属性值:digits/continous/none，这个属性是用来控制阅读数字的方法，其中“digits”代表按照位数一个一个阅读，“continous”代表连续地阅读。

　　speak-time属性值:24/12/none，这是属性控制时间的阅读方式。

　　到这里我们将所有的CSS控制声音的属性都介绍完了，希望对大家有所帮助。

No Comments »

HTML/CSS30 Nov 2004 12:00 am
有关表格边框的css语法整理

我们知道Dreamweaver在表格制作方面做得非常出色，但是在某些时候还是必须结合css才能达到一些特定效果，下面我们先把有关表格边框的css语法整理出来，然后另外介绍怎样用css美化表格的边框。

　　有关表格边框的css语法

　　具体内容包括：上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。

　　 1.上边框宽度

　　语法: border-top-width: <值>

　　允许值: thin | medium | thick | <长度>

　　初始值: medium

　　适用于: 所有对象

　　向下兼容: 否

　　上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在上边框、边框的宽度或边框的属性略写。

　　2.右边框宽度

　　语法: border-right-width: <值>

　　允许值: thin | medium | thick | <长度>

　　初始值: medium

　　适用于: 所有对象

　　向下兼容: 否

　　右边框宽度属性用于指定元素的右边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在右边框、边框的宽度或边框的属性略写。

　　 3.下边框宽度

　　语法: border-bottom-width: <值>

　　允许值: thin | medium | thick | <长度>

　　初始值: medium

　　适用于: 所有对象

　　向下兼容: 否

　　下边框宽度属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在下边框、边框的宽度或边框的属性略写。

　　 4.左边框宽度

　　语法: border-left-width: <值>

　　允许值: thin | medium | thick | <长度>

　　初始值: medium

　　适用于: 所有对象

　　向下兼容: 否

　　左边框宽度属性用于指定元素的左边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在左边框、边框的宽度或边框的属性略写。

　　5.边框宽度



　　语法: border-width: <值>

　　允许值: [ thin | medium | thick | <长度> ]{1,4}

　　初始值: 未定义

　　适用于: 所有对象

　　向下兼容: 否

　　边框宽度属性用一到四个值来设置元素的边界，值是一个关键字或长度。不允许使用负值长度。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。 这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。也可以使用略写的边框属性。

　　6.边框颜色



　　语法: border-color: <值>

　　允许值: <颜色>{1,4}

　　初始值: 颜色属性的值

　　适用于: 所有对象

　　向下兼容: 否

　　边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。也可以使用略写的边框属性。

　　7.边框样式



　　语法: border-style: <值>

　　允许值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}

　　初始值: none

　　适用于: 所有对象

　　向下兼容: 否

　　边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。也可以使用略写的边框属性。

　　none：无样式；

　　dotted：点线；

　　dashed：虚线；

　　solid：实线；

　　double：双线；

　　groove：槽线；

　　ridge：脊线；

　　inset：内凹；

　　outset：外凸。

No Comments »

HTML/CSS30 Nov 2004 12:00 am
巧用CSS控制鼠标样式变换

主页上的鼠标是不是就只有箭头和小手两种模样呢？如果鼠标移到“帮助”等字样上时，形状就变成求助的问号；鼠标移到可能需要较长时间等待的超链接时，鼠标形状就变成等待的样子……那该多好啊！

　　其实，借助我们的css，几句很简单的代码就可以实现这一切！

　　不信？把鼠标移到下面的演示文字上看看效果吧！

演示：手形

源代码：<P style="CURSOR: hand">演示：手形</P>

演示：移动

源代码：<br /><p style=cursor:move>演示：移动</p>

演示：等待

源代码：<P style="CURSOR: wait">等待状态</P>

演示：定位指示

源代码：<P style="CURSOR: crosshair">演示：定位指示</P>

演示：帮助

源代码：<P style="CURSOR: help">演示：帮助<P>

　　是不是简单又方便？这里我们只用到了CSS中的“cursor”属性，利用“style=cursor:值”这样的语句形式，分别设置具体的值就可以了。例如：值为“hand”时，当鼠标移到相应的文字或图片上时，就会变成超链接的小手形；值为“move”时，当鼠标移到相应的文字或图片上时，就会变成上下左右带方向箭头的形状，依此类推。这个小技巧也许可以在你制作主页时帮上一点忙呢！

No Comments »

HTML/CSS30 Nov 2004 12:00 am
CSS实例：横线样式的输入框

在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框，而是一条细线，很多朋友对此很感兴趣。其实要实现这样的效果并不困难，我们只要用一段简短的CSS代码控制好表单输入框的样式即可。

　　示例如下：

　　请输入您的用户名：

　　下面我们就来看看这段实现效果的css代码。它主要运用了表格边框的样式控制，将左、上、右边框设置为none，只剩下下边框即可。

　　<style type="text/css"><br />　　<!--<br />　　.line{<br />　　　　BORDER-LEFT-STYLE: none;<br />　　　　BORDER-RIGHT-STYLE: none;<br />　　　　BORDER-TOP-STYLE: none<br />　　}<br />　　--><br />　　</style><br />

　　样式表中代码解释如下：

　　“BORDER-LEFT-STYLE:none”： 隐藏左边框

　　“BORDER-RIGHT-STYLE: none”： 隐藏右边框

　　“BORDER-TOP-STYLE: none”： 隐藏上边框

　　“BORDER-bottom-STYLE: none”： 隐藏下边框。

　　下面让我们一起来看一个应用实例：

　　<html><br />　　<head><br />　　<br />　　<style type="text/css"><br />　　<!--<br />　　.line{<br />　　　　BORDER-LEFT-STYLE: none;<br />　　　　BORDER-RIGHT-STYLE: none;<br />　　　　BORDER-TOP-STYLE: none ;<br />　　}<br />　　--><br />　　</style><br />　　<!--注：此段为css代码，你还可以在这里设置出其他的样式效果--><br />　　</head><br />　　<body bgcolor="#FFFFFF" text="#000000"><br />　　隐藏的边框的输入框：<br />　　<p>用户名：<input type="text" name="name" class=line><br />　　 <!-- 注：class=line 这条语句将你预设的css应用在表单中 --><br />　　</p><p>　　</body><br />　　</html><br />

　　实现效果简洁清爽。

No Comments »

HTML/CSS30 Nov 2004 12:00 am
巧用CSS滤镜做图案文字

请先看看以下演示中的图案文字。这可不是图片效果，而是用CSS滤镜中的Chroma() 语句做成的文本文字，其中文本的内容和图案都可以自由设定。

　　先介绍一下这个神奇的滤镜：Chroma() 滤镜。

　　语法： FILTER:Chroma( Color=#CCCCCC) ，其中“#CCCCCC”是颜色值。

　　作用效果：如果滤镜中的像素有颜色与设定的颜色相同，则该像素变为透明（包括图片的像素）。例如使用的语句是 FILTER:Chroma( Color=#CCCCCC) ，则滤镜作用范围内所有颜色为“#CCCCCC”的像素都变为透明。

　　效果演示：

　　以下是拷屏图片，供用低版本浏览器的朋友参考：

<img <="" p="" style="border: 0px; ">
src="http://www.it.com.cn/f/edu/0411/30/32342432451.gif">

　　有了Chroma() 滤镜，图案文字的制作就简单了。它的实现代码只有几行：

<SPAN style="BACKGROUND-IMAGE: URL(across.gif); WIDTH: 300px"><br /><DIV style="FILTER: Chroma( Color=#CCCCCC);<br />COLOR: #CCCCCC; BACKGROUND-COLOR: #FFFFFF;<br />WIDTH: 300px; FONT: bold 55pt 宋体"><br />    设计在线<br />  </DIV><br /></SPAN>

　　代码解释：

　　一、先看＜SPAN＞标签，它实际上是作为一个父容器，作用在于设定一个背景图片作为文字的图案：

<img <="" p="" style="border: 0px; ">
src="http://www.it.com.cn/f/edu/0411/30/323424324512.gif">

　　BACKGROUND-IMAGE:URL(across.gif)：设定背景图片，这里是“across.gif”，如右图，原图为8×8像素，这里为便于大家观看，放大为64×64；

　　WIDTH:300px：容器的宽度，可以设小些，甚至是1px，保证背景不溢出。

　　二、下面看 ＜DIV＞标签，它用 Chroma() 滤镜把文字变成透明：

　　Chroma( Color=#CCCCCC) ：设定过滤色为“#CCCCCC”；

　　COLOR: #CCCCCC：文字的颜色也为“#CCCCCC”；

　　BACKGROUND-COLOR: #FFFFFF：字体背景色为“#FFFFFF”（白色）；

　　WIDTH:300px：滤镜作用的宽度，可以设成和父容器的一样或更宽（父容器可以被“撑大”）；

　　FONT: bold 55pt 宋体：设定字体为粗体字、大小为55pt、宋体。

　　因为上面把过滤色和字体颜色都设为了“#CCCCCC”，所以字体是透明的，透过它可以看到父容器的背景图片across.gif。当然你可以将它们改为其他相同的值而不影响效果，注意不要与字体背景色相同即可。

No Comments »

HTML/CSS30 Nov 2004 12:00 am
禁止背景图在网页中平铺

如果我们希望在网页的不同角落里放置不重复平铺的背景图，该怎么办呢？

　　比如网页的背景要如图所示，并要求在不同的分辩率下该背景图都显示在右下角，想想看，有办法吗？

<img <="" p="" style="border: 0px; ">
src="http://www.it.com.cn/f/edu/0411/30/434343351313012411.gif">

　　想将它做成一张大图？！不行，不同的分辩率，图的大小不同呀，你只能做一张背景。怎么办呢？？？

　　别担心，你只需要下面这个背景就好了：

<img <="" p="" style="border: 0px; ">
src="http://www.it.com.cn/f/edu/0411/30/4343433513130124112.gif">

　　也许你会说，看起来不可以呀，才这么一张小图，而且网页背景都是平铺的嘛！

　　别担心，你忘记CSS了？在Dreamweaver中做起来其实一点不困难。首先建立一个新样式，如图：

<img <="" p="" style="border: 0px; ">
src="http://www.it.com.cn/f/edu/0411/30/43434335131301241123.gif">

　　在样式中，选“Background”选项，再在右边进行设置，本例首先在“Background Image”选项中输入背景图像的路径，就是刚才所切的小图。

　　“Repeat”是问你是否重复的平铺背景图，这里是单张效果，当然不希望平铺，所示设置成“no-repeat”。

　　“Attachment”选项是问你图像位置是否固定，设置“Fixed”，表示固定。

　　“Horizontal”是水平位置，这里选“right”表示居右。

　　“Vertical”是垂直位置，这里选择“bottom”，表示靠底。

<img <="" p="" style="border: 0px; ">
src="http://www.it.com.cn/f/edu/0411/30/434343351313012411234.gif">

　　这样，定义好的这个样式，不仅可以应用到页面的背景，甚至可以用到表格、单行格中去。大家用Dreamweaver来编辑一下，研究一下。

No Comments »

HTML/CSS30 Nov 2004 12:00 am
CSS自定义属性Expression

CSS的出现使网页制作者在对网页元素的控制方便许多，当然，有利必有弊，CSS只能对颜色、大小、距离等静态样式有效，对于要实现某些html元素的动态样式就显得有些力不从心。

　　有了CSS的自定义属性Expression，可以自己定义属性，自己在属性里写需要的代码，这样就可以结合CSS的特性与JS特效，实现对整体页面上相同元素的控制。是不是觉得有点不可思议？我们先拿新手们经常问的怎么消除页面上的链接虚线框为例。

　　通常的做法是：

<a href="link1.htm" onfocus="this.blur()">link1</a><br /><a href="link2.htm" onfocus="this.blur()">link2</a><br /><a href="link3.htm" onfocus="this.blur()">link3</a><br />

　　粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？

采用expression的做法如下：

<style type="text/css"><br />a {star : expression(onfocus=this.blur)}<br /></style><br /><a href="link1.htm">link1</a><br /><a href="link2.htm">link2</a><br /><a href="link3.htm">link3</a><br />

　　说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本，在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为

<style type="text/css"><br />input {star : expression(onmouseover=this.style.backgroundColor=&#8221;#FF0000&#8243;;<br />onmouseout=this.style.backgroundColor=&#8221;#FFFFFF&#8221;)}<br /></style><br /><input type="text"><br /><input type="text"><br /><input type="text"><br />

　　可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：

<style type="text/css"><br />input {star : expression(onmouseover=function()<br /> {this.style.backgroundColor=&#8221;#FF0000&#8243;},<br />onmouseout=function(){this.style.backgroundColor=&#8221;#FFFFFF&#8221;}) }<br /></style><br /><input type="text"><br /><input type="text"><br /><input type="text"><br />

　　看了这么多，感觉怎么样，是不是有点概念了呢。使用CSS的自定义属性很简洁地用较少的代码实现了用JS产生的相同的效果，真正起到了事半功倍的作用，你还不赶快去试试？

No Comments »

HTML/CSS30 Nov 2004 12:00 am
CSS控制字体效果的思考

字体的处理在网页设计中无论怎么强调也不为过，毕竟网页使用来传递信息的，而最经典最直接的信息传递方式就是文字，所以，了解一点字体的基本知识对于设计来说还是非常重要的。

　　中文和英文的最大区别就是中文是方块字，英文是拼音文字，这对字体的处理的影响是巨大的。看看下面的图示就会发现，英文字体里的那些变化在中文字体里都弱化了。

<img <="" p="" style="border: 0px; ">
src="http://www.it.com.cn/f/edu/0411/30/7546464345351.gif">

　　作为中文的读者，习惯性的接受方块形状做为阅读的单元，其实对于眼睛来说，这是一种容易疲劳的方式，阅读的时候你的视线实际上是跟随整行文字的外形。看看这个例子。

　　NOW I’VE TRIED TO TALK TO YOU AND MAKE YOU UNDERSTAND

　　Now I’ve tried to talk to you and make you understand

　　哪一行更容易阅读呢？

　　第一行和中文的情形有些类似，不同的是，每个中文单字就好比一幅画，其变化要比26个英文字母丰富的多，对于我们来说，我们接受了这个特点，但是设计时还是有一些问题需要考虑，我不是设计师，如果说的不对，请在下面留言讨论。这些内容在我教授Typography的时候是作为一般原则来提出的。我也告诉学生一句话：“The purpose of rule is to break the rule.” 设计原则本身就是为了打破原则，这也是所谓的creativity的表现。问题是你需要先知道原则，并且顺从原则进行练习，只有在你熟悉原则之后才有可能打破原则显现你的创造性，打破原则不意味着原则的缺陷和错误，只是你对这些原则的别出心裁的使用，你打破了一些，同时也对你所破坏的部分做一定的补偿，似乎很有点哲学的味道。

　　我个人以为比较重要的适用于英文的几个原则如下。

　　一、字体的用途



　　字体的选用要考虑该文字的用途，是做标题呢，还是段落文字？

　　通常来说 san serif 字体适合作为标题使用，例如 Arial；serif 字体适合作为段落文字使用，例如Time New Roman。对于网页设计来说，有几个字体是我强烈推荐的，verdana, tahoma, georgia。事实上，像 Verdana 这个字体是由世界上顶级的字体设计师花了差不多两年时间设计出来的，Microsoft负责买单， 然后免费提供给用户，这个字体是IE安装的一部分，如果你安装了IE 4以上的版本，你的电脑里就一定有这个字体，所以你不必担心用户是否有这个字体。它的设计考虑了字体在屏幕上显示的可能面对的问题，而且提供了近乎完美的答案。唯一的麻烦是它的近乎完美造成了我们使用的时候没有了个性，因为每个人都使用它。

二、字号的大小

　　论坛里很多讨论，关于pixle 好还是point好？ 我就不重复了，在这里我想提出的是字号的大小在CSS里，有很多不同的单位，大致上有三类，

　　绝对大小：mm, cm, in, pt, pc

　　相对大小：em, ex

　　相对于设备：px

　　可能要多说几句的是 em 和 ex，em 在 css 里代表就是字体字号的大小，例如对于12 pt的字体来说, 1 em 就等于12 pt 范例：

　　p {

　　　　font-size: 10pt;

　　　　text-indent: 1em

　　}

　　也许你会说我可以用text-indent: 10pt来实现同样的效果啊，但那只是在理想的情形下，如果用户觉得他的浏览器设置字体大小为14pt更好的时候，你所设计的比例就失去了，所以相对尺寸对于网页的可伸缩性设计是非常有利的。

　　ex 和 em 类似，但不尽相同， 回到上面的图示，x-height 对于每一种字体来说是不同的，ex 是根据字体的 x-height 来定义字体的大小。

　　三、对齐方式

　　最好使用左对齐，尤其要避免使用左右对齐，除非你有一个特殊的设计目的，左对齐时右侧的不对齐正是为了阅读的方便，右侧的变化对你的视力是一个帮助，它借助变化告诉你的眼睛可以换行了。

　　四、行间距

　　行间距取决于字体的大小，一般来说，小的字号需要大一点的行间距来便于阅读，中文字体在网页上如果没有行间距的设定，对于阅读大段文字来说是读者的灾难，所以适当设定line-height是非常必要的。一般地， line-height 在网页设计中应该是字体大小的1.5倍到2倍。Word 和其它的文本编辑软件里， 一般设定字体的120%作为缺省的行间距。css里的 line- height 设定，是均分后加在每一行的上下，也就是说，如果 line-height
设定为 20px 的话，那么每一行文字的上下各有10px的间距。

　　五、字间距和字符间距

　　很特殊的用途，对中文来说这两者应该是相同的。这个设定的本身就是为了解决某些字体设计上缺陷，来增加文字的可读性。

No Comments »

HTML/CSS30 Nov 2004 12:00 am
显示你个性的鼠标指针

许多游戏玩家一定会对游戏中的动态鼠标指针有很深的印象，其实只要一句简单的CSS（层叠样式表），你也能在网页上实现这种效果。

　　首先，你需要一个鼠标指针文件，可以通过单击“开始”→点击“查找”→键入“.ani”或“.cur”(不含双引号)，也可以到网上下载你喜欢的指针。注：.ani是动态效果的指针文件；.cur?是静态效果的指针文件。

　　下面是两种实现个性鼠标的方法。

　　1.定义所有超链接的指针

　　把cursor:url(指针文件的路径)加入到超链接的CSS文件中。

　　如：a {color:#000000; cursor:url(指针文件的路径);}?

　　2.定义个别链接的指针



　　把style=”cursor:url(指针文件的路径)”放进<a>的容器中。

　　如：<a href=”指定链接地址” style=”cursor:url(指针文件的路径)”>链接文字</a>

　　现在保存文件，预览一下你网页的个性鼠标指针吧!

No Comments »

HTML/CSS30 Nov 2004 12:00 am
体验DW
MX 2004 CSS新功能

CSS是制作网页效果必不可少的东西，字体的颜色定义、表格的样式定义、图片的特效等等都少不了它。但在Dreamweaver的早期版本中CSS的编辑功能并不是很强大，有时候不得不借助一些类似于TopStyle的第三方工具来完成CSS的编写。

　　现在有了Dreamweaver MX 2004（简称DW MX 2004），情况就完全不同了!

　　首先我们给页面链接一个已经编写好的CSS文件，这里的操作与老版本Dreamweaver的方法是相同的（图1）。



　　链接好后，和老版本不同的地方就出来了：从页面属性对话框中的Style、Class里可以预览设置CSS风格的效果（图2）。原来DW MX 2004已经学习了TopStyle的特点：对于表格定义，CSS效果会在Class中预览，而对于行、列以及文字CSS特效则在Style中出现，这样大大提高了效率。

<img <="" p="" style="border: 0px; ">
src="http://www.it.com.cn/f/edu/0411/30/198999494846616655612.gif">

　　通过新的CSS功能，还可以很方便地控制页面所有色彩的调用以及效果的实施，整个页面的转换界面、风格也不会像以前那样复杂了。一个表格的三个不同的风格完全是通过DW MX 2004 的CSS编辑功能，在几分钟内完成的! （如图3）



　　

No Comments »

HTML/CSS30 Nov 2004 12:00 am
自定多姿多彩的网页链接下划线

CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。

　　一、基本原理

　　首先，自定义HTML链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。

　　其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。

　　第三，为显示出自定义的下划线，必须隐藏默认的下划线，即a { text-decoration: none; }。

　　第四，为链接元素设置下划线图形，构造出自定义的下划线。假设下划线图形是underline.gif，则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。

　　第五，我们要让下划线图形在水平方向反复出现，但不能在垂直方向重复出现，否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为：a { background-repeat: repeat-x; }。

　　第六，为保证图形出现在链接文字的下方（不管字体的大小），用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形，可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角，CSS代码为：a { background-position: 100% 100%; }。

　　第七，为了在链接文本的下方给自定义图形留出空间，必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关，但一般而言，可以先让底部空白等于下划线图形的高度，必要时再作调整。例如：a { padding-bottom: 4px; }。

　　第八，由于下划线图形放在链接元素的底部，必须保证链接不折行（如允许链接跨越多个行，则只有下面一行的链接文本下面会有自定义的下划线）。用CSS的white-space属性可以防止链接文字折行，即a { white-space: nowrap; }。

　　综上所述，为链接元素定义CSS样式属性的完整例子如：

　　a {

　　　text-decoration: none;

　　　background: url(underline.gif) repeat-x 100% 100%;

　　　padding-bottom: 4px;

　　　white-space: nowrap;

　　}

　　如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的CSS background属性改到:hover ，例如：

　　a {

　　　text-decoration: none;

　　　padding-bottom: 4px;

　　　white-space: nowrap;

　　}

　　a:hover {

　　　background: url(underline.gif) repeat-x 100% 100%;

　　}

No Comments »

HTML/CSS19 Nov 2004 12:00 am
MIME
Type 引出的两难困境

　　一切从一个糟糕的浏览器开始，它完全不支持 XHTML。

　　什么是 MIME Type？

　　为什么这么说呢？首先，我们要了解浏览器是如何处理内容的。在浏览器中显示的内容有 HTML、有 XML、有 GIF、还有 Flash……那么，浏览器是如何区分它们，绝对什么内容用什么形式来显示呢？答案是 MIME Type，也就是该资源的媒体类型。

　　媒体类型通常是通过 HTTP 协议，由 Web 服务器告知浏览器的，更准确地说，是通过

Content-Type

来表示的，例如:

Content-Type: text/html

　　表示内容是

text/html

类型，也就是超文本文件。为什么是“

text/html

”而不是“

html/text

”或者别的什么？MIME
Type 不是个人指定的，是经过 ietf 组织协商，以 RFC 的形式作为建议的标准发布在网上的，大多数的 Web 服务器和用户代理都会支持这个规范 (顺便说一句，Email 附件的类型也是通过 MIME Type 指定的)。

　　通常只有一些在互联网上获得广泛应用的格式才会获得一个 MIME Type，如果是某个客户端自己定义的格式，一般只能以

application/x-

开头。

　　XHTML 正是一个获得广泛应用的格式，因此，在 RFC 3236 中，说明了 XHTML 格式文件的 MIME Type 应该是

application/xhtml+xml

。

　　当然，处理本地的文件，在没有人告诉浏览器某个文件的 MIME Type 的情况下，浏览器也会做一些默认的处理，这可能和你在操作系统中给文件配置的 MIME Type 有关。比如在 Windows 下，打开注册表的“

HKEY_LOCAL_MACHINESOFTWAREClassesMIMEDatabaseContent Type

”主键，你可以看到所有
MIME Type 的配置信息。

　　浏览器处理 XHTML 和 HTML 有什么区别？

　　HTML 的语法过于随意了，有许多简写，标记不匹配的复杂情况，同时长期 Web 发展下来积累下来了许多错误的用法——比如一个文档里完全没有

标记——但浏览器还是得支持它，可想而知，为了支持这些“Tag Soup”——也就是我们所说的那些，乱成一锅粥的标签——浏览器要很费力地去猜测一段标记的意思，努力以用户期望的形式表达出来。一句话说，虽然 HTML 4.01
允许你用语义化、结构化的、内容与表现分离的方法来书写标记，但由于它沿袭了 HTML 这种格式，使得浏览器对于凡是 MIME Type 为“

text/html

”的文件，都得采用一种非常费劲的方法去处理，这对于 Web 的发展是很不利的。

　　再说除了浏览器，还有许多其他的用户代理要阅读 HTML：纯文本的浏览工具、读屏器等等。

　　创造 XHTML，很大一部分原因正是要通过 XML 重新严格地规范一遍标记，让这些用户代理可以以一种更简便的方式来解析这些标记。因此，XHTML 这种新的格式，天生就要求内容的发布者必须以严格的方式来标记自己的文档。

　　当然，XHTML 对于内容提供者也有好处，此处先不展开，详见下文。

　　MIME Type 与之又有什么关系？

　　把前两节的内容合起来，你显然可以发现：一个正常支持 XHTML 的浏览器会根据服务器提供的 MIME Type 是

text/html

还是

application/xhtml+xml

来区分获取到的内容是 HTML 还是
XHTML，对这两种格式，分别以两种不同的方式来解析文档，后者解析起来要严格得多，但对于用户代理开发者和内容提供者都有很大的好处。

　　那么，那些浏览器正常的支持了 XHTML 呢？答案是 Mozilla、基于 Mozilla 的浏览器如 Netscape 7 和 Firefox、较新版本的 Opera 和 Safari 等等。但不包括 Microsoft Internet Explorer。问题是，这一“不包括”，就除掉了大约 90% 的浏览器市场啊，在我们抓狂以前，先来看看 IE 是什么处理

application/xhtml+xml

的：IE
不认得这种 MIME Type，它要么提示你是否下载那个文件，要么就把文件内容当作纯文本显示出来，反正是不可能正常显示标记。

　　这正是造成我们不得不给 XHTML 文档标以

text/html

的原因 1，实际上，目前
Web 上 95% 的 XHTML，都是扮成 HTML 的 XHTML (包括 w3.org)，浏览器 (包括我们引以为傲的 Mozilla) 压根没有用 XML 解析器去解析那些 XHTML，而是沿用处理标签汤的老办法。

　　这个时候你会问了，在我看起来，老办法显示得很好啊，干吗为此感到头疼呢？问题正是出在“看起来”这个词上，实际上，一些细微但是不可忽略的差别仍然存在。

　　用

application/xhtml+xml

方式解析 XHTML 与用

text/html

方式解析的差别

　　下面所说的“HTML”，就是指

text/html

的解析方式；相应地“XHTML”就是指“

application/xhtml+xml

”的解析方式。

这是最重要的，严格的 XML 解析至少要求文档是 well-formed 的，也就是标签要正确开闭，

&

等 XML 实体要正确使用。

在 HTML 中

是用户所能看到的全部视域，给

body

设置背景色就是给整个文档设置了背景色，但在 XHTML 中并非如此，给

设定背景色的效果和给

设定的不同。

在 HTML 中 CSS 规则中对元素的匹配是大小写不敏感的，BODY 和 body 匹配的是同一个元素，但在 XHTML 中却是大小写敏感的。

在注释中隐藏的 JavaScript 脚本会被 XHTML 忽略。

document.write()

不能在 XHTML 中使用。

HTML DOM 和 XHTML DOM 的元素和属性返回值是不同的，HTML 中是大写，XHTML 中是小写。

还有不少其他的 DOM 问题。

　　总结起来就是，我们正在广泛使用的其实是一种看起来已经 XHTML 化的 HTML，想象一下吧，如果要求所有这些网站立即把 MIME Type 换成

application/xhtml+xml

，即便用可以正常解析 XHTML 的浏览器来浏览，它们多数会死在前面列举的某一条原因下，无法正常显示。然而这不好说是
XHTML 的错，正常的处理理应如此，只不过我们一直被纵容了。

　　可是 W3C 还是不断要求我们以正确的 MIME Type 来提供 XHTML，为什么呢？因为我们要用到 XHTML 提供的好处啊，只有被认为是 XHTML 或者 XML 文档的东西，浏览器才会启用这些“好处”，比如你可以试着在 IE 中打开 XHTML 中嵌入的 MathML 看看，没有效果，它被当作 HTML 一样显示。

　　现在的问题是，既然把文档设定为真正的 XHTML 是如此的麻烦，会带来如此多的问题，干吗不舒舒服服地呆在 HTML 上呢？为什么要往 XHTML 过渡？XHTML 提供的“好处”值得我们为此付出如此多的代价吗？

　　XHTML 的优势

　　最重要的两点是：

除了前面讨论的用户代理易于处理以外，实际上，大量的基于 XML 的工具，许多对 XML 有很好支持的编程语言，都能够方便地解析你的文档，从中提取出需要的信息。当然，也包括搜索引擎。

你可以利用 XHTML 继承自 XML 的良好的扩展性，比如在 XHTML 中嵌入 RDF 数据，描述文档的语义信息；加入 MathML 标记，描述数学公式；加入 SVG 标记，使用可伸缩矢量图型。

　　显然，如果文档连 well-formed 都做不到，优点 1 对你是无效的，就算有效吧，就个人来说，其实也没有多少人对 XHTML 进行 XML 解析，因为能做到的，大概也就是从

h1

、

h2

这些标记中读出文档结构一类的功能，实在没什么大用处。

　　而第二点对大多数内容提供者来说，太远了，RDF 是什么东东？加入 RDF 信息有什么好处？没多少人知道或者有兴趣知道；MathML？这是可扩展性目前用得最多的地方，因为很多 MathML 阅读和编辑工具已经普及了，但如果你不是个成天在公式中打转的科学工作者，多半对此也没有兴趣；SVG 呢？倒是挺有意思，但目前显然没有获得广泛的应用，事实上，日后能否获得广泛的应用，还要看它能不能在与 Flash 的竞争中活下来：成为标准的东西被人抛弃也是常有的事。

　　总结起来，所有这些优点几乎都是一些空头支票，一些未来才能实现甚至未来都不知道能不能实现的东西，比如说你现在在开发一个 CMS 系统，如果现在都已经不能保证里面的内容 well-formed，有什么理由说以后，数据越来越多以后，反而会回头去把错误的标记一一改正？

　　事实上，用不到这些空头支票，我们的生活几乎没有受到任何影响。

　　那么，是否这就是说，XHTML 几乎就是一个鸡肋了 ？

　　XHTML 啊 XHTML

　　行文至此，已经陷入了僵局，其实我本无意把 XHTML 说得那么差的，但问题是我每句说的都是实话呀，也没有忽略什么有必要提到的因素，但反复查考，总结起来还是那一句话：XHTML 其实是一个带一点理想主义的，对普通用户来说，相比 HTML 4.01 并没有显见优势的格式。

　　于是我们就陷入了两难困境：刨掉那些花言巧语，没有任何显见的优点吸引我们我们转向 XHTML，但如果我们永远躺在 HTML 4.01 舒服的被窝里，Web 岂不是永不前进了？

　　答案还是个问号。

　　小结

　　本来，仅仅为了未来的锦绣图景，大家多数还是愿意转向 XHTML 的，这大概是个博弈论中微妙的平衡，用户、浏览器厂家、标准制定者三家玩的一个游戏，但 IE 打破了这个平衡：它不支持

application/xhtml+xml

，于是用户只好都以

text/html

来发布
XHTML 页面。

　　如果把他们人格化：我觉得“用户”大概是个剃头挑子一头热的家伙，他们为自己的 XHTML 页面在一切浏览器上都如此美好而感到满意，却浑不知道背后其实还是 HTML，自己没沾着一点“X”的好处。

　　这时标准制定者——他一定是个理想主义者——也不满意，因为用户其实还是在以 HTML 的方式来写 XHTML 的，根本没准备好向 XHTML 进行转变的决心，标准制定者一心领着大家往 Web 美好的未来远航，却发现无论是用户还是浏览器厂商都在尽给他添乱。

　　浏览器厂商们——他们拥有最大的筹码，却始终冷眼旁观——此时却在开心地内斗，对此情况耸耸肩表示无能为力。

　　你可能会对此感到沮丧，但这的确是目前 Web 中的事实，承认也好不承认也好，确定一个目标，然后艰难而执著地前行，大概是我们这些标准推广者唯一能做的。

　　注释

也并非完全没有办法，对于用 PHP 或者 ASP 这样创建的动态内容而言，通过检测 HTTP 头来进行内容协商是最好的办法：给 `Accept: ` 中包含了 `application/xhtml+xml` 的请求提供 `Content-type: application/xhtml+xml` 的数据，而给其他的请求提供 `text/html` 的数据。(在 456 Berea Street 的一篇文章详细解释了这种方法，实际上，打开
Mozilla/Firefox 的 `about:config` 页面，你可以找到相关的配置 `network.http.accept.default` 来验证一下 Mozilla 是否发送了正确的 HTTP 头。)，这几乎是一种完美的方法了 (实际上静态内容大概可以通过 Web 服务器的内容协商功能实现这种提供方式)，但考虑到本文主要的目的是探讨是否应该用 XHTML，所以不在正文中详细讨论。

仍旧是指对普通用户而言，事实上必须承认，XHTML 的出现对于整个 Web 本身的长远发展绝对有好处。

其实话不该说得那么绝，应该说 XHTML 的出现是绝对有必要的，但其带来的好处绝大部分是对 Web 本身的，长远的，现在难以看出的好处，对用户或者开发者的好处微乎其微。

　　参考文献

Ian Hickson, Sending XHTML as text/html Considered Harmful

Gez Lemon, It’s all in the MIME

Gez Lemon, Specifying a MIME Type

Roger Johansson, Developing With Web Standards, Recommendations
and best practices, Part 5: XHTML

Network Working Group, The ‘application/xhtml+xml’ Media Type

Tommy Olsson, Content Negotiation

W3C, XHTML Media Types

No Comments »

HTML/CSS17 Nov 2004 12:00 am
HTML编写小经验

　　 在用HTML(HyperText Markup Language，超文本链接标示语言)语言编写Web页面时，由于所用的Web浏览器对HTML支持的程度不同，常常会在HTML语言的运用上产生一些疑问。在此，笔者将学习和实践中获得的几点经验奉献给大家，以供参考。

　　 HTML中的几种常用特殊符号：

　　 符号　　　　替代指令

　　 <(小于符号)　　＆lt

　　 >(大于符号)　　＆gt

　　 ＆(与符号)　　　＆amp

　　 ″(双引号)　　　＆quot

　　 不可分的空格　 ＆nbsp

　　 其中，不可分的空格是指两个单词有时会因版面关系而分成两行，此时如果将两个单词之间的空格替代为＆nbsp，则它们将总是在一行中。

　　 例1：在HTML中，语句

　　 A＋B

　　3>1

　　(显示为A＋B3>1)

　　 应写为

　　 A＋B＆ltC

　　3＆gt1

　　

　　 (显示为A＋B1)

　　 例2：′＆′符一般不使用，只要不产生歧义，就不必用′＆amp′替代。如：

　　 ′if (ac)′可用语句

　　 if (a＆ltb＆＆b＆gtc)表示，而不必用

　　 if (a＆ltb＆amp＆ampb＆gtc)表示。

　　 ′＆lt′则必须用语句＆amplt表示，而不能用＆lt表示(显示为<)。

　　 例3：替代指令中的英文字母在HTML语句中的大小写必须统一，即或者均为大写，或者均为小写，而不能大小写混合。如：

　　 ′<′符可用′＆LT′或′＆lt′表示，而不能用′＆Lt′或′＆lT′表示。

　　 笔者所使用的是Netscape Navigator 3?0，在Windows 3?1环境中运行。

No Comments »

HTML/CSS15 Nov 2004 12:00 am
用CSS轻松实现网上填空

在网上做有奖信息的时候，经常看见一些注册表单，只有一条线供你填写，就跟做考卷时的填空题一样，很Cool！

其实要做成这样的效果并不难，只需用一段很简短的CSS代码即可搞定！

< style type=”text/css”>

　　< !–

　　.xian{BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none}

　　– >

　　< /style>

其中代码的作用如下：

“BORDER-LEFT-STYLE:none”： 不显示左边框

　　“BORDER-RIGHT-STYLE: none”： 不显示右边框

　　“BORDER-TOP-STYLE: none”： 不显示上边框

　　“BORDER-bottom-STYLE: none”： 不显示上边框，加上这条，什么边框也没有了

让我们一起来看一个应用实例吧：

< html>

　　< head>

　　< title>网上填空< /title>

　　< style type=”text/css”>

　　< !–

　　.xian{BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none ;}

　　– >

　　< /style>< !–注：此段为css代码，在这里更改参数可以设置出更cool的效果–>

　　< /head>

　　< body bgcolor=”#FFFFFF” text=”#000000″>

　　隐藏你的边框

　　< p>用户名：

　　< input type=”text” name=”name” class=xian> < !–注：class=这条一定要加，设置你的css应用在表单里面– >

　　< /p>

　　< /body>

　　< /html>

实现的效果简洁清爽，怎么样，也改改你的表单吧！

No Comments »

HTML/CSS08 Nov 2004 12:00 am
用CSS控制网页总体风格

　　网页设计中我们通常需要统一网页的整体风格，统一的风格大部分涉及到网页中文字属性、网页背景色以及链接文字属性等等，如果我们应用CSS来控制这些属性，会大大提高网页设计速度，更加统一网页总体效果。

为了达到修改整个网页的目的，我们需要编辑一个外挂式的CSS文档。根据这个文档定义和修改不同CSS属性并在页面元素相同或者相似的网页里调用它。

整体改变页面风格

现在网页中流行宋体的9pt和10.5pt的字体，按快捷键“Shift+F11”打开“CSS Style控制面板”，单击“New Style”按钮，弹出“New Style”对话框，复选“Redefine HTML Tag”的“Type”类型，这时在Tag处会出现“body”、“br”、“cite”等选项，选择“body”后确认。这样我们就建立了一个外挂的CSS文档，在保存对话框中保存为all后就进入“Style Definition for body
in all.css”对话框(如图1)。选择“Category”中的“Type”项，定义“Font”为“宋体”、“Size”参数为“9”，其后的下拉框选择“Points”、“Color”自定义为喜好颜色就可以了。当然还可以选择“Category”中的“Background”项来定义“Background”颜色和其他背景属性。这时您会看到页面中内容的整体改变。

<img <="" p="" style="border: 0px; ">
src="http://www.it.com.cn/f/edu/0410/27/02806css001.jpg">

图1

偏好元素风格的改变

经过上面的改变有时不免给您带来一定麻烦，如果遇到页面中某个元素，比如突出显示的文字的字体、字号以及颜色怎么办！这里我们就需要再定义一个新的CSS样式单来对其进行控制，右键点击页面编辑区，在弹出快捷菜单中点击“CSS Style/Edit Style Sheet”命令，弹出“Edit Style Sheet”对话框，选择列表中的all.css，点击“New”按钮，在弹出的“New Style”对话框中选择“Make Custom Style(class)”的“Type”类型定义一个自己偏好的CSS控制。如果想更改页面中某一元素的属性，选中它然后右键单击“CSS
Styles”面板中“Apply Styles”中刚才定义的CSS，执行“Apply”命令就可以了(如图2)。

<img <="" p="" style="border: 0px; ">
src="http://www.it.com.cn/f/edu/0410/27/02806css002.jpg">

图2

统一控制超级链接

超级链接也是网页中经常使用的，而网页的链接色默认都是蓝色，虽然可以更改，但单一色彩在不同背景色的网页上显示就不是那么奏效了，我们来看一下如何用CSS控制网页实现不同的个性链接颜色。在“New Style”对话框中，选择“Use CSS Selector”的“Type”类型，在“Selector”下拉框中会列出“a:link(链接属性)”、“a:hover(鼠标移动到链接上的属性)”、“a:visited(链接被访问后属性)”、“a:active(链接焦点状态下的属性)”4个选项(如图3)，这4个选项的设置会控制网页中所有的链接的属性，我们可以分别定义这4个属性，然后添加到“CSS
Style”面板中与默认设置不同的CSS控制中，再将其“Apply”到需要改变的链接上就实现了。如果将“Hover”的字体设置的比“Link”稍微大一点，就会出现鼠标移动到链接上时字体变大的效果，试试看是不是很奇妙！

<img <="" p="" style="border: 0px; ">
src="http://www.it.com.cn/f/edu/0410/27/02806css003.jpg">

图3

名词解释：CSS即层叠样式表(Cascading Style Sheet)是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。Dreamweaver MX推出后，其改进的CSS渲染和设计工具、通过增强CSS面板清晰显示内、外部定义的样式，让用户构建出符合最新CSS标准的站点。

No Comments »

HTML/CSS31 Oct 2004 12:00 am
网页字体的美化

本来，我没打算写这篇文。因为许多站长都亲自撰稿，传授秘籍了。但很多网页上的字体仍然没有“美化”效果，想必还是用了软件提供的默认字号，所以我也跟着来嚷嚷两句，凑凑热闹。

比如我吧，设计第一篇网页的时候，就遇到了字体的设置问题。我发现如果用软件约定的字体大小，则显示效果会很难看的。我是用Frontpage2000作网页，在这个微软大加宣传的网络软件里，文本的设置居然是如此令人失望，可能有它的难处，我不知道。总之，当我研究了半天之后，我明白过来：在显示器上，中文字体的字号，最保险的，是9pt，11pt也不错。如果你在word或excel里设置文本的大小，可很容易找到这两种字号。但在Frontpage里，甭想！除非你手工设置“格式”菜单里的“样式”。在“样式”对话框里，你可以对网页的各个部分进行较为自由的“修改”。修改的内容就是“格式”，有“字体”、“段落”、“边框”、“编号方式”和“定位”五种。实际上，这些格式内容，在“格式”菜单里就有的。但在“样式”设置当中，可以得到更大的自主权。不信你就试试，在某一表格内先随便写一段中文，然后打开“格式”菜单里的“字体”设置对话框。看看在字体大小选择中，是否有9pt？没有。直接写上9pt行吗？不行。没辙了？别急，请进入“样式”对话框试试，此对话框的左边是“样式”内容选择，也就是说，让你选择你想手工设置的具体内容。比如你可以选择“td”，即对表格内容进行设置。“样式”对话框的右边有一个“修改”按钮，进入“修改”后，就看到左下角那个讨厌的“格式”按钮了。里面就是上边谈到的五种选择。我们选“字体”。在这个字体对话框中，你可以写入自己想要的字体大小值，直接写入“9pt”，再一路“确定”回来，看看页面上的字体是否听话？

好了，我们总算找到一种完全通过菜单选定字体大小的方法。用这种方法，你可以设置各种尺寸的字体。（这下微软又有理了：谁说我们的软件不是摆脱了编码的麻烦？）然而，这还不算麻烦么？

实际上，如果你对编码这玩意儿不抱成见，肯用心去研究一下，它也不见得有多吓人。还是以上面这个例子来说吧，我们自定义“td”即表格的字体大小为9pt。那么，它的编码是什么样的呢？转到软件界面左下角的HTML显示窗，你将看到网页的HTML编码。一般都叫它HTML代码。

在代码的上方，区之间，有一句“TD{ font-size: 9pt }”。这就是我们刚才费半天劲设置的“表格样式”代码。实际上，如果你记得住，将这一句直接写上去就可以了。

现在，我可以告诉你简单的结果了：在网页字体的大小设置上，只须在每页的区之间加入以下一段代码即可。

关键的问题倒是：究竟我们可以在网页上用几种大小的字体？也就是说，显示器上的网页中，有几种字号是美观的？9pt是公认的字号。绝大多数网页都用它。11pt也好看。问题似乎解决了，可是假如你有一段文字想设置得比9pt更小，咋办？用8pt或7pt行吗？如果你的显示器“桌面显示字体”是大字体，那你会觉得可行。然而且住！大多数显示器不是1024×768分辨率的17寸，而是800×600或者640×480的14、15寸。他们的“桌面显示字体”往往是小字体，这时，8pt或7pt的显示效果会很难看，而且基本上看不清。有别的办法吗？有！

办法很简单，告诉你另一种大小的字体表示法，即：“12px”。它比9pt字号要小，而且在不同的显示器上，看上去都挺好。所以，你只要将上面代码中的9pt改为12px就行了。但你可能会问：我不想要整张网页都改成12px，而只想让某一段文字是12px，那又如何是好？

对单独文本的改动可用这样的方法：在这一段文本的开头位置（我是指在代码页），加入这样一句代码：

如此，这一段文字就是12px的小字体了。OK？

最后，捎带着讲一下“粘贴代码”的问题。你肯定会拿这些代码去粘贴的，因为很方便。我们在制作网页时，常常需要作这样的粘贴。在粘贴代码时，如果你的代码是直接从其它网页上copy的，则在粘贴时软件很有可能把代码看作文本，这时，代码不起作用，而且，你会在网页上看到你刚粘贴上的代码。如果是这种情况，可以先将copy的代码粘贴到写字板上，再copy一次，然后贴入网页代码区内，问题将得到解决。