IT 技术宝库HTML/CSS - 达人(在海水中游泳)

2005/08/11 | IT 技术宝库HTML/CSS
类别(网页类学习笔记) | 评论(2) | 阅读(2502) | 发表于 23:47: IT 技术宝库HTML/CSS

HTML/CSS27 Oct 2004 12:00 am
用CSS巧控制段落缩进

有关CSS段落缩进的语法如下：

语法: text-indent: 〈值〉
　　允许值: 〈长度〉 | 〈百分比〉
　　初始值: 0

文本缩进属性可以应用于块级元素(P，H1，等.)，以定义该元素第一行可以接受的缩进的数量。该值必须是一个长度或一个百分比。若百分比则视上级元素的宽度而定。通用的文本缩进用法是用于段的缩进:

P { text-indent: 2em } 即表示段落缩进2个字符

我们可以作如下定义,并把代码放在与间：

〈style〉
　　p{text-indent:2em}
　　〈/style〉

这样，整篇文档的段落的首行都会自动缩进两个字符。另外我们还可以在需要缩进的地方加上以下代码即可：

〈style=”text-indent:2em〉

用CSS控制段落缩进的好处就是只要定义一次，所以显得很方便。

No Comments »
HTML/CSS27 Oct 2004 12:00 am
用CSS实现鼠标单击特效

如果你能很好地应用CSS，那么你的主页将被打扮得很靓。下面就给大家介绍用CSS做出的一个鼠标单击特殊效果图。

1、将下面的代码复制到你的主页中和之间。

〈STYLE〉.shadow {
　　FILTER: shadow(color=blue，direction=225)
　　}
　　.shadow1 {
　　FILTER: shadow(color=red，direction=225)
　　}
　　.shadow2 {
　　FILTER: shadow(color=green，direction=225)
　　}
　　.div {
　　CURSOR: move; FILTER: blur(add=ture，direction=135，strength=10); WIDTH: 800px
　　}
　　〈/STYLE〉

在这里应用的是blur滤镜。

2、在页面中插入一张图片，比如我插入是〈img border=”0″ src=”file:///F:/hbg/图象/校园/武测美景/广场夜景.jpg” width=”300″ height=”210″〉。在其前加入〈TD id=flttgt style=”filter: light(enabled=1)，’width 300′” width=315〉。

在刚才我们插入图片下一行中加入〈TD style=”VERTICAL-ALIGN: top” width=314〉

3、在设置了图片属性后，我们还要应用javascript脚本代码，也就是使图片跟随鼠标移动一些特效，代码如下。

〈SCRIPT language=javascript〉
　　〈!–
　　var g_numlights=0;
　　var blurbs= new Array(” 现在的动态滤镜赋予了网页更多的交互性能来响应用户的动作。”，” 我们使用了光源滤镜来响应用户的点击。点击图片可以增加光源。”，” 通过捕捉用户鼠标位置的方法来移动光源。”，” 不需要太多的编程。”);
　　window.onload=setlights;
　　document.onclick=keyhandler;
　　flttgt.onmousemove=mousehandler;
　　function setlights(){
　　flttgt.filters[0].clear();
　　flttgt.filters[0].addcone(0，0，5，100，100，225，225，0，60，15);
　　if (g_numlights>0){
　　flttgt.filters[0].addcone(400，170，5，100，100，225，0，0，160，15);
　　if (g_numlights>1){
　　flttgt.filters[0].addcone(320，330，5，100，100，0，225，225，60，15);
　　}
　　}
　　}
　　function keyhandler()
　　{
　　g_numlights=(g_numlights+=1)%4;
　　holder.innerHTML=blurbs[g_numlights];
　　setlights();
　　}
　　function mousehandler()
　　{
　　x=(window.event.x-80);
　　y=(window.event.y-80);
　　flttgt.filters[0].movelight(1，x，y，5，1);
　　if(g_numlights>0){
　　flttgt.filters[0].movelight(1，x，y，5，1);
　　if(g_numlights>1)
　　{
　　flttgt.filters[0].movelight(2，x，y，5，1);
　　}
　　}
　　}
　　〈/SCRIPT〉

这样就设置好一个比较有个性的图片特效，效果如图1所显示。

图1

No Comments »
HTML/CSS27 Oct 2004 12:00 am
CSS样式表高效使用的技巧

随着互联网经济的不断发展，互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长，各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信息量，我们对网页中每一个栏目的增删，都会是一个很复杂的过程。为了提高网页的维护更新效率，我们可以使用样式表，来仅仅改变一个文件，就能达到同时改变几百个网页的外观，而其个性化的表现未受任何损失。为了能充分用好样式表的强大性和灵活性，笔者就怎样有效使用样式表，来谈谈自己的一些心得体会。

1、在一个网页中同时调用CSS的多种引入方式

在HTML中引入CSS的方式很多，例如直接插入式，使用链接外部样式表，使用CSS”@import”导入样式表以及在内部元素中使用”STYLE”标记来定义样式表等。有网友询问，这些引入方式能不能同时在一个网页中被调用，它们之间会不会产生混乱？其实，我们大可不必这么担心，这就是它为什么称之为“层叠样式表”的原因，浏览器在处理网页中的样式表是按照一定的顺序来处理的，首先检查页面中是否有直接插入式CSS，如果存在就先执行它，针对本句的其它CSS就不去管它了；接着检查网页源代码中的”STYLE”标记，有就执行了；接下来再依次检查执行”@import”导入的内部样式表和链接的外部样式表。因此，我们完全可以在一个网页中同时调用CSS的多种引入方式。

2、快速创建CSS外连式文件

对于一个初接触CSS的网页设计人员来讲，要用写字板之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于Dreamweaver对CSS支持的很好，用它来帮助就轻松多了。具体可以这样操作：首先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver的编辑窗中调出CSS面板，一个一个地定义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修改；全部定义好后，再用记事本创建一个空的CSS外连式文件，把在〈head〉与〈/head〉之间的那段定义好的CSS复制到CSS文件中去，就大功告成了。

3、让背景图案静止不动

当网页不能在一屏全部显示时，我们往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容，移动滚动条时一般图象和文字是一起移动的，那么我们有没有办法使背景图象不随文字一起“滚动”呢？利用CSS就可以实现这样的目的，我们只要把下面这段源代码直接放在网页的与标签之间就可以了，其中bg.jpg就是网页中的背景图象，大家可以把它换成自己需要的背景图象：

〈style type=”text/css”〉
　　〈!–
　　　BODY { background: purple url(bg.jpg);
　　　　　background-repeat:repeat-y;
　　　　　background-attachment:fixed
　　　　　}
–〉
〈/style〉

4、让网页自动进行“首行缩进”

用DreamWeaver来设计网页的用户知道，在DreamWeaver中输入空格不是那么的方便，我们可以利用css来设计“首行缩进”功能来弥补这个缺憾。打开DreamWeaver的设计界面，在该界面中找到CSS的属性定义对话框（Style Definition for .style1)，在该对话框的“Block”标签下的“text-indent”属性定义设置项中来设置“首行缩进”功能，在这里要注意的是，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示：

〈style type=”text/css”〉
　　〈!–
　　.style1 { text-indent: 2em}
　　–〉
　　〈/style〉

5、巧用css来设定文字的背景

在DreamWeaver中，如果我们需要给文字加上不同的背景颜色时，操作上很简单，只要用鼠标单击属性面板上的文字颜色按钮，从弹出的颜色设置栏中选择需要的颜色就可以了。但如果我们要给部分文字加不同的背景色，该怎么操作呢？由于DreamWeaver3中没有这方面的功能，但我们可以巧妙利用css来实现这样的目的。具体操作过程是，首先我们可以先做一个定义背景色的CSS，例如给这个css命名为bjstyle，接着在网页中选中需要设置颜色的文字，然后在工具栏中单击一下“bjstyle”就行了。下面就是一个定义颜色背景的CSS的源代码：

〈style type=”text/css”〉
　　〈!–
　　.bjstyle { background: #cc00bb}
　　–〉
　　〈/style〉

6、给指定内容加边框

在DreamWeaver中，我们可以利用CSS强大的定义功能来给某部分内容加边框，定义时首先打开DreamWeaver的设计界面，在该界面中找到CSS的属性定义对话框（Style Definition for .style1)，该对话框的“Border”设置项就是用来定义指定内容边框线的，其中“top”、“bottom”、“left”、“right”设置栏是分别用来定义指定内容四周边框线的粗细和颜色的，这些设置项设置好后还需要在下面的“Style”中定义线型，否则我们将看不到定义的边框线，因为css默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框为：绿色中粗线的CSS源代码：

〈style type=”text/css”〉
　　〈!–
　　.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
　　–〉
　　〈/style〉

7、用样式表来控制超级链接的颜色

如果你仔细研究一下超级链接，你就会发现，浏览器处理超级链接的默认方式是，对于目前还没有访问过的超级链接是用蓝色且带有下划线的文字来显示的，对于已经访问过的超级链接则是用深紫色且带有深紫色的下划线的文字来显示的。这些默认的设置颜色看得时间，可能就产生厌倦之感，并且很有可能与自己网页的背景颜色不协调。因此我们完全可以按照自己的视觉要求，来自由更改超级链接的显示颜色，让它更能体现自己的风格。下面笔者就来介绍一段修改超级链接显示颜色的源代码，代码如下：

我们可以把这段源代码添加在HTML文件的……之间，它可以对对本网页中的任何一个超级链接都起作用，其中这段代码中的：

A:link {text－decoration: none; color:blue}是说明了超级链接还没有被访问，它没有下划线，颜色为蓝色。

A:visited { color:red; text－decoration:line－through }说明了超级链接被访问后，它的颜色变成了红色，有了一根删除线。

A:active { color:white; text－decoration:underline }说明超级链接处于活动状态的时候，它的颜色变成了白色，有了下划线。

A:hover {text－decoration:none;color:＃FF0000;background－color:black}说明鼠标移动到超级链接后，它没有下划线，文字颜色变成了黄色，背景颜色是黑色。

根据上面的解释，我们可以把超级链接在各种状态下的显示颜色修改成自己喜欢的那种，以便能更好地展示自己的个性。

8、给选中文字加背景图像

在DreamWeaver中，我们同样可以给指定文字加上背景图象，其操作过程与给指定文字加背景色操作类似，只不过是把选择背景颜色换成选择加载的背景图象就是了。其具体操作过程是，首先我们可以先做一个定义背景色的CSS，例如给这个css命名为txstyle，接着在网页中选中需要设置颜色的文字，然后在工具栏中单击一下“txstyle”就行了。下面就是一个定义背景图象的CSS的源代码（其中test.gif就是所加载的背景图象）：

〈style type=”text/css”〉
　　〈!–
　　.txbgstyle { background-image: url(test.gif)}
　　–〉
　　〈/style〉

No Comments »
HTML/CSS26 Oct 2004 12:00 am
深入透析样式表滤镜(下)

6、遮罩滤镜

作用：该滤镜可以为对象建立一个覆盖于表面的膜，其效果就象戴着有色眼镜看物体一样。

语法： {filter:mask(color=color)}

参数：该滤镜的color参数表示覆盖对象表面的颜色，例如如果遮罩颜色为绿色，那么就应该设置color=blue。

7、阴影滤镜

作用：阴影滤镜就是给对象添加阴影效果，其工作原理是建立一个偏移量，加上色彩。

语法：{filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive)}
参数：该滤镜中的Color参数表示投射阴影的颜色，offx 表示水平方向阴影的偏移量，offy 表示竖直方向阴影的偏移量，Positive参数是一个布尔值，其数值如果为TRUE，就为任何的非透明像素建立可见的投影，如果为FASLE，就为透明的像素部分建立透明效果。

8、灰度滤镜

作用：该滤镜主要是将图象对象转换成灰度形式显示。

语法：{filter:gray}

参数：该滤镜没有参数。

9、翻转滤镜

作用：翻转滤镜主要是实现图象对象的水平或者竖直翻转效果。

语法：{filter:filph} {filter:filpv}

参数；这种滤镜也不带参数，其中{filter:filph}是实现水平翻转的，{filter:filpv} 是实现竖直翻转的。

10、X光滤镜

作用：X光滤镜可以让对象反映出它的轮廓并把这些轮廓加亮。

语法： {filter:xray}

参数：该滤镜本身不含有参数。

11、倒置滤镜

作用：使用该滤镜可以把包括色彩、饱和度、和亮度值等对象的可视化属性全部翻转。

语法： {filter:invert}

参数：该滤镜没有参数。

12、波纹滤镜

作用：波纹滤镜可以在水平和竖直方向利用正弦波打乱图象，使图象产生水波效果。

语法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}

参数：该滤镜的add参数是一个布尔数值，它是用来表示是否要把对象按照波形样式打乱；freq参数是用来设置波纹频率的，也就是指定在对象上一共需要产生多少个完整的波纹；lightstrength参数可以设置波纹光影的增强效果的，其数值范围在0到100之间；phase参数是用来设置正弦波的偏移量的，strength是设置正弦波的振幅大小的。

No Comments »
HTML/CSS26 Oct 2004 12:00 am
深入透析样式表滤镜(上)

样式表是一种为超文本标签语言提供增强补充服务的技术，可对每一个html的标签做精雕细刻的修饰。只用html制作的网页，对页面内各部分的修饰能力有限且语句烦锁，样式表正是弥补这一缺陷的有力技术，它语句文法简单，只要在源码中插入style语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能，使网页更加生动活泼，从而获得满意的效果。当然，样式表的强大还依靠的就是它的滤镜功能。因为有了滤镜，大家就可以轻易地创造出“专业”的艺术效果。为了能帮助大家高效使用好样式表滤镜，笔者将对样式表滤镜各方面的内容进行详细介绍。

一、什么是样式表滤镜

说到滤镜，其实它并不是对图像进行了什么处理，而是在浏览器中对使用了该属性的对象进行一定的修饰。样式表滤镜实际上是样式表一个新的扩展部分，使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的html元素上，例如图片、文本、以及其他一些对象，为页面添加一些丰富的变化。如果大家有一些脚本语言的基础，能够把滤镜效果与类似javascript的脚本代码做一些结合，就可以拥有一个在样式表滤镜与脚本共同作用下建立的强大的动态交互文档工具。现在能使用的滤镜有13个之多，不过要欣赏到这些滤镜的特效，必须要求用户的浏览器必须在IE4.0/NC6.0之上，因为只有这些版本的浏览器才能支持样式表滤镜效果。

二、常用的样式表滤镜

随着样式表技术的不断成熟，其滤镜功能和种类也在不断增多。如果用户能够熟练地混合使用它们，将可以产生意想不到的效果。在操作上，用户只需要了解具体滤镜的实际效果后，就能根据实际进行微调了。为了使大家能有针对性地使用滤镜，笔者下面就把一些常用滤镜的功能和参数详细介绍如下：

1、α滤镜

作用：该滤镜可以实现各种溶入效果，如果大家将该滤镜与网页脚本语言结合起来，对滤镜的参数进行处理的话，就能很轻易地做出淡入淡出的效果来。

语法：{FILTER：ALPHA(opacity=opacity，finishopacity=finishopacity，
style=style，startx=startx，starty=starty，finishx=finishx，finishy=finishy)}

参数：Opacity参数代表图象的起始透明度，其默认的数值是从0到100，0代表完全透明，100代表完全不透明；FinishOpacity是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度，作用范围也是0到100；Style表示透明区域的形状特征，其中“0”代表统一形状，“1”代表线形。“2”代表放射状，“3”代表矩形；startx表示渐变透明效果开始处的X坐标，starty代表渐变透明效果开始处的Y坐标，finishx代表渐变透明效果结束处的X坐标，finishy表示渐变透明效果结束处的Y坐标。

2、模糊滤镜

作用：该滤镜主要是让图象产生一种模糊效果。

语法：{filter:blur(add=add，direction=direction，strength=strength)}

参数：该滤镜主要包括三个参数，其中add是用来指定图象是否被改变成印象派的模糊效果，模糊效果是按顺时针的方向进行的，它的数值应该是ture或false；direction参数是用来设置模糊的方向的，其中0度代表垂直向上，每45度为一个单位，默认值是向左的270度；strength 参数代表有多少像素的宽度将受到模糊影响，缺省的参数值是5个像素，而且该参数值只能使用整数来指定。

3、斜影滤镜

作用：该滤镜主要是为对象建立轮廓的影子效果的，它可以在指定的方向建立物体的投影；

语法：{filter:shadow(color=color,direction=direction)}

参数：斜影滤镜只有两个参数，其中color代表投影的底色，该数值是用英文字母来代替的，例如投影底色是红色的话，就应该设置color=red;direction参数是用来设置投影方向的，如果该数值是0的话，就代表垂直投影，此外该数值每45度为一个单位，它的默认值是向左的270度。

4、发光滤镜

作用：该滤镜可以给图象或者文字产生一种发光效果；

语法：{filter:glow(color=color,strength=strength)}

参数：该滤镜的color参数与阴影滤镜的color参数功能几乎是一样的，不过这里的color参数是用来设置发光颜色的;strength参数是用来指定发光强度的，其值为1到255之间的任何整数。

5、灯光滤镜

作用：灯光滤镜是模拟光源来投射文字或者图象，使图象和文字能产生一定的投射效果；

语法：{filter:light}

参数：一旦为对象定义了“light”滤镜属性后，大家就可以调用它的“方法(Method)”来设置或者改变属性，该滤镜可用的方法有：AddAmbient方法是用来加入包围光源的，AddCone方法是用来加入锥形光源的，MoveLight方法是用来移动光源的，Changstrength方法是用来改变光源强度的，Changcolor方法是用来改变光的颜色的，Clear方法是用来清除所有光源的。

No Comments »
HTML/CSS26 Oct 2004 12:00 am
制作精美圆角表格两种方法

　　做网页时候为了美化网页，常常把表格边框的拐角处做成圆角，这样可以避免直接使用表格直角的生硬，使得网页整体更加美观。下面就给大家介绍两种制作圆角表格的常用的办法。

　　方法一：用图片制作圆角表格

　　这是最常用也是最通用的方法，它能很好地适应各种浏览器和不同分辨率，大部分网页都使用这种方法。

　　①先用Photoshop等作图软件绘制一个圆角矩形，再用“矩形选框工具”选取左上交的圆角部分(如图1)，复制它。

　　

src="http://www.it.com.cn/f/edu/0410/26/0406151108533031991.jpg">

　　②不要取消选取，直接新建一副图像，Photoshop会根据选取部分的高度、宽度自动设置新建图像的大小。张贴后，保存为WEB所用格式即可。

　　③重复步骤②，分别用“水平翻转”工具和“垂直翻转”工具，保存另外三个方向的圆角。(如图2)

　　

src="http://www.it.com.cn/f/edu/0410/26/0406151109003032012.jpg">

　　④打开网页制作软件，这里以Dreamweaver为例。插入一个一行三列的表格，设置其CellPad、CellSpace和Border属性值都为0。在第一列插入图片1.gif，第三列插入图片3.gif，并设置单元格的高度和宽度与图片一致。设置第二列的背景颜色为与圆角图片一致的颜色，设置宽度为整个表格的宽度减去两个图片的宽度，并打开源代码察看器，删除这列中的字符” ”(Dreamweaver会自动在每个单元格中插入此字符，若不删除会撑大表格)。依葫芦画瓢，做好下半部分的圆角。

　　⑤再已插入的两个表格中间再插入一个一行三列同宽的的表格，CellPad、CellSpace和Border属性值都为0，宽度为100%。设置第一列和第三列背景颜色为与圆角图片一致的颜色，宽度为1像素，并打开源代码察看器，删除这两列中的字符” ”。到这，一个圆角表格就做好了，您可以在第二列中添加您想要的内容。(如图3)

　　

src="http://www.it.com.cn/f/edu/0410/26/040615110907303203.jpg">

　　方法二：利用VML技术

　　用VML技术可以更容易地制作一个圆角表格，而且还有投影哦！

　　①修改＜html＞表识为＜html xmlns:v＞

　　②在＜head＞区域添加如下代码：
　　＜style＞〈br>v:* {behavior: url(#default#VML);}〈br〉＜/style＞

　　③在您要添加圆角表格的地方加入以下代码：＜v:RoundRect style=”position:relative;width:200;height:100px”＞
　　＜v:shadow on=”T” type=”single” color=”#b3b3b3″ offset=”5px,5px”/＞
　　＜v:textbox style=”font-size:12px”＞

　　这里输入表格中的内容
　　＜/v:textbox＞
　　＜/v:RoundRect＞

　　您可以在上面的代码中设置圆角表格的宽度、高度、投影颜色等。

　　这样，一个有投影的圆角表格就制作好了(如图4)。

　　

src="http://www.it.com.cn/f/edu/0410/26/0406151111403032054.jpg">

　　这种添加圆角表格的方法虽然很方便，但是它不能很好的适应每个浏览器版本，且在设计时是以层的方式现实，不利于版面设计，所以尽量使用第一种方法。

No Comments »
HTML/CSS23 Oct 2004 12:00 am
WEB界面设计五种特征

　　1.比喻
　　如同Windows用桌面、文件夹、垃圾筒来比喻计算机的*作，Web的设计也是如此。善于利用明确、抽象或概念化的比喻ICON来表达各不相同的栏目，能够增加观众对栏目的兴趣，但是要紧记不适合原意的I CON再漂亮也好，其效果将是适得其反的。

　　2.明确
　　“页面每个元素都应该有其存在的理由”大家在规划页面时一定要将它作为原则来考虑。Less is more 从来就是每一位优秀的设计者设计的原则。除了这个，还要确保页面上每一个元素都能让使用者看到，每一个元素都能非常清楚地表达了制作者的意图。混乱不清是页面设计最失败的地方。

　　3.一致性
　　访问者去到一个设计地非常棒的网站，其图形很有意思又吸引人，布局清晰新颖，但是点击它的其它栏目后呢？他也许会想，呃，怎么好像来到另外一个站点。大家想一下这会对整个网站产生什么样的反效果呢？因此统一的风格（统一的调色板、统一的导航栏、统一的字体）是非常非常重要的，这在商业站点更是如此。

　　4.方向
　　网站的设计者有责任保证访问者在浏览页面时不会迷失了方向，而访问者也能够清楚的知道自己的所在位置。这种人性化地设想不是能更好地捉住观众的心吗？
　　页眉(Title) 是一个大家经常忽略的问题。
　　最合适的做法是类似这样：风玲设计：设计论坛：艺术与设计。

　　5.导航
　　设计导航条要从使用者的角度来考虑，简便、清晰、完整是制作的前提。另外除了导航条，Site Map也是必须的，当然有Search Engine那就更好了。

No Comments »
HTML/CSS23 Oct 2004 12:00 am
主页制作ABC—XYZ

　　今天已经是第三个人问我如何制作网页了，按照惯例以前只要有一个人问我问题，我就会知无不讳、言无不尽，然而对于“如何制作网页”这个问题要说起来话就比较长了，区区一篇文章真是很难讲述明白。因为网页制作的相关话题太多、软件也非常庞杂，我这里不能一一列举，因而就选用了比较枯燥的HTML代码进行讲解，至于能达到多少效果，就要看各位看官自己的悟性了。

　　首先说一下网页文件的基本概念。“网页文件”这个名字很不正规，它真正的名字应该叫做“超文本文件”，也就是说网页都是文本文件编写出来的，像可执行文件是二进制的，而网页文件都是文本文件。那么问什么要叫“超”文本呢？原因是文本文件不能表现出缤纷的文本效果，例如我们使用Word可以编辑一份五颜六色的报告、其中还可以插入图片，而纯文本就不能实现了，超文本正是能将多种文字效果体现出来的文本格式。

　　很多软件都可以编辑这种网页文件，例如Dreamweaver、Frontpage、Homepage等等，它们的机理都是相同的，都是通过软件编写HTML文件源代码，因而我们只需要使用系统提供的记事本或者任何其他的文本编辑软件，都可以编写出相同的HTML文件！之所以使用上述高级的软件，是因为那些软件具有高度的“傻瓜化”和“可视化”效果，我这里讲解HTML的理论，因此不对上述软件进行讲解，大家只要了解了HTML文件的格式，剩下的软件选择和使用只是个人爱好而已了。

　　现在开始说HTML文件的格式：HTML文件的扩展名可以是HTM和HTML，两者之间的区别我不敢肯定，在我印象中HTML好像是MAC机器上使用的，这一点对我们来说无所谓，因为两者之间没有任何区别，用记事本创建一个扩展名位HTM或者HTML的文件，然后在其中随便输入一些文字并保存，之后用浏览器浏览这个文件就可以了。

　　例如将这篇文章保存成index.htm文件，之后用IE浏览器可以很方便的进行阅读！然而真正完成这项工作之后你也许会发现浏览器虽然能够显示文件的内容，可是段落全没有了，密密麻麻一大堆字显示在眼前，这是什么原因？原因很简单，浏览器在读入index.htm文件后要先对其中的标记进行分析，然后按照标记生成网页，这篇文章里面没有任何HTML标记，浏览器自然不会理清格式。

　　 HTML的标记有一个共性：都是被尖括号包含起来的，例如下面的几个标记：〈p〉和〈/p〉、〈li〉和〈/li〉、〈table〉和〈/table〉等等，这些标记成对出现，在其中“和”的位置可以有我们自己的文字内容，不同的标记可以对文字效果进行更改，这样浏览器才能按照标记出现的位置显示不同的效果。

　　将这篇文章每一个段落都用〈p〉和〈/p〉包含起来，之后保存index.htm文件，再用浏览器观看，就会发现段落已经被划分出来了！

　　颜色呢？段落是被划分出来了，可是所有的文字都是黑颜色的！而且字体、自号全都一样！！这和纯文本文件没有任何区别呀？对呀，因为我还没说更改字体大小、颜色的标记〈font〉和〈/font〉呢！在index.htm文件中写入如下两行代码，然后保存看一下效果：

　　〈p〉〈font size=1 color=red〉这是一行红颜色的小字〈/font〉〈/p〉
　　〈p〉〈font size=4 color=blue〉这是一行兰颜色的大字〈/font〉〈/p〉

　　看到了吗？在〈font〉中有“属性”size和color，大多数HTML“标记”中都有各自的“属性”，〈font〉是文字标记，而具体到其中文字大小、颜色、字体等等效果，就要通过属性来修改了。你也许会问：那HTML到底有多少标记和属性？其实这个问题我也不知道，我手里面有一本《HTML3.2样本手册》，在编写HTML代码的时候，如果忘记了某个标记可以进行查阅，而上述那些高级软件的“傻瓜化”就在这里，利用它们你不需要记忆繁多的标记和属性，只要晃动鼠标就可以了。

　　说到这里你也许已经领悟了HTML文件的真谛：说白了就是用标记对一篇纯文本文件进行格式排版！下面说一下HTML文件大体的结构。

　　 HTML文件很灵活，也很不正规，缺少标记或者使用标记错误浏览器都能够容忍，只不过影响最终的浏览效果而已。但是正确的、完整的使用标记是没有坏处的，例如我们这里的index.htm文件中包含简体中文，而浏览器并不能自动识别文件中的文字是什么语言，这个时候就要在index.htm文件中加入“语言标记”，这样做无非是让我们的浏览器更加“听话”。

　　一个标准的HTML文件应该是如下格式：

　　〈HTML〉
　　〈HEAD〉
　　〈TITLE〉标题〈/TITLE〉
　　〈/HEAD〉

　　〈BODY〉
　　〈P〉这里是正文内容〈/P〉
　　〈/BODY〉
　　〈/HTML〉

　　忘记说明两点：1、标记中的内容不区分大小写，也就是说〈BODY〉和〈body〉浏览器都支持；2、空格和换行不会影响效果，例如上面的9行代码写成一行也同样可以。

　　在〈head〉和〈/head〉之间是一些控制语句，例如可以控制文件的标题、使用的语言和字体样式等等；
　　在〈body〉和〈/body〉是文件的内容，所有要显示在浏览器中的内容都要输入到这里，之后只要对内容进行排版就可以了。

　　仍然是上面的文件，将〈p〉这里是正文内容〈/p〉更改成〈p align=center〉这里是正文内容〈/p〉保存浏览，可以发现这段话跑到浏览器正中央了，在将〈body〉更改成〈body bgcolor=blue〉能够发现整个页面的背景变成了深蓝色。就是这么简单！多么复杂、精美的一个页面，也不过是修改修改这里、美化美化那里来实现的。

　　正如上面所说，HTML格式可以包含动画、图片、Flash等等，这些也都是靠标记实现的，但是内容实在太多了，整整一本《HTML3.2样本手册》都不能全面述说清楚，更何况一篇教程呢？我这里就是抛砖引玉，让不了解HTML文件的朋友对此有一个基本认识，至于灵活应用，要在自己的反复实践、不断摸索中慢慢掌握。

No Comments »
HTML/CSS23 Oct 2004 12:00 am
加密网页破解

当你在浏览网页时，看到一个很漂亮的特效，你查看源代码时看到的是一队乱码，那多扫兴呀！根据本人的研究，总结出了三种解密方法，与大家分享！！

方法一：

　　有一种加密的办法是采用javascript的escape()函数，把某些符号、汉字等变成乱码，以达到迷惑人的目的。解密这种代码的办法是采用其反函数加以还原。下面是一个经过加密的例子：

<HTML>
<SCRIPT LANGUAGE=”javascript”>
var Words =”%3Chtml%3E%3Cbody%20bgcolor%3D%22red%22%3E%3Cp%3E%u8FD9%u662F%u4F8B%u5B50%uFF01%uFF01%uFF1A%uFF09%3C/p%3E%3C/body%3E%3C/html%3E”
var NewWords;
NewWords = unescape(Words);
document.write(NewWords)
</SCRIPT>
<BODY>
</BODY>
</HTML>

　　这种文件最好解密，一看就明白，关键是unescape()函数起了还原源代码的作用。要想看到加密前的代码是什么样子，可以用下面的办法：

<HTML><SCRIPT LANGUAGE=”javascript”>
var Words =”%3Chtml%3E%3Cbody%20bgcolor%3D%22red%22%3E%3Cp%3E%u8FD9%u662F%u4F8B%u5B50%uFF01%uFF01%uFF1A%uFF09%3C/p%3E%3C/body%3E%3C/html%3E”
var NewWords;
NewWords = unescape(Words);
NewWords=NewWords.toString();
function password(){
document.pw.txtpw.value=NewWords;
}
</SCRIPT>
<BODY>
<form name=pw>
<input type=button onclick=”password()” value=”解密”>
<br>
<textarea name=”txtpw” cols=”100″ rows=”100″></textarea>
</form>
</BODY>
</HTML>

方法二：

　　有一个软件叫HTMLEncrypt.exe，它就是把源代码进行加密的软件，这个软件的加密的原理是把字符转换成Unicode代码。下面的例子是一个分帧的页面：

<html><head><script>
function Carbosoft( s ) { var sRet=”"; for(j=0; j< s.length; j++ ){ var n= s.charCodeAt(j); if (n>=8364) {n = 128;} sRet += String.fromCharCode( n - 3 ); } return( sRet ); }
var sJsCmds =”" +
“?kwpoA?khdgA?phwd#kwws0htxly@%Frqwhqw0W|sh%#frqwhqw@%wh{w2kwpo>#fkduvhw@lvr0;;8<04%A?wlwohAZHOFRPH?2wlwohA?phwd#qdph@%JHQHUDWRU%#frqwhqw@%Plfurvriw#IurqwSdjh#613%A?phwd#qdph@%Plfurvriw#Wkhph%#frqwhqw@%qrqh/#ghidxow%A?phwd#qdph@%Plfurvriw#Erughu%#frqwhqw@%qrqh/#ghidxow%A?2khdgA?iudphvhw#erughu@%3%#iudpherughu@%3%#urzv@%-/93%A##?iudph#qdph@%pdlq%#vuf@%xs1kwp%#vfuroolqj@%dxwr%A##?iudph#qdph@%rqolqh%#vuf@%grzq1kwp%#vfuroolqj@%qr%#qruhvl}h#wdujhw@%beodqn%A##?qriudphvA##?erg|A##?sAWklv#sdjh#xvhv#iudphv/#exw#|rxu#eurzvhu#grhvq*w#vxssruw#wkhp1#?2sA##?2erg|A##?2qriudphvA?2iudphvhwA?2kwpoA?irqw#froru@%&33333%A?s#doljq@%fhqwhu%A?vpdooA?irqw#idfh@%Wdkrpd%AWklv#iloh#zdv#hqfu|swhg#xvlqj#dq#xquhjlvwhuhg#yhuvlrq#ri#?d#kuhi@%kwws=22fduer{1wkhgqv1qhw2kwpohqfu|sw1kwp%AKWPO#Hqfu|sw#y413?2dA1?2irqwA?2vpdooA?2sA” +
“”;
var s= Carbosoft( sJsCmds);
document.write (s);
</script>
</head><body></body></html>

　　从上面可以看出，浏览器解释这写代码前，进行了还原，从而可以得到破解的方法如下：

<script>
function Carbosoft( s ) { var sRet=”"; for(j=0; j< s.length; j++ ){ var n= s.charCodeAt(j); if (n>=8364) {n = 128;} sRet += String.fromCharCode( n - 3 ); } return( sRet ); }
var sJsCmds =”" +
“?kwpoA?khdgA?phwd#kwws0htxly@%Frqwhqw0W|sh%#frqwhqw@%wh{w2kwpo>#fkduvhw@lvr0;;8<04%A?wlwohAZHOFRPH?2wlwohA?phwd#qdph@%JHQHUDWRU%#frqwhqw@%Plfurvriw#IurqwSdjh#613%A?phwd#qdph@%Plfurvriw#Wkhph%#frqwhqw@%qrqh/#ghidxow%A?phwd#qdph@%Plfurvriw#Erughu%#frqwhqw@%qrqh/#ghidxow%A?2khdgA?iudphvhw#erughu@%3%#iudpherughu@%3%#urzv@%-/93%A##?iudph#qdph@%pdlq%#vuf@%xs1kwp%#vfuroolqj@%dxwr%A##?iudph#qdph@%rqolqh%#vuf@%grzq1kwp%#vfuroolqj@%qr%#qruhvl}h#wdujhw@%beodqn%A##?qriudphvA##?erg|A##?sAWklv#sdjh#xvhv#iudphv/#exw#|rxu#eurzvhu#grhvq*w#vxssruw#wkhp1#?2sA##?2erg|A##?2qriudphvA?2iudphvhwA?2kwpoA?irqw#froru@%&33333%A?s#doljq@%fhqwhu%A?vpdooA?irqw#idfh@%Wdkrpd%AWklv#iloh#zdv#hqfu|swhg#xvlqj#dq#xquhjlvwhuhg#yhuvlrq#ri#?d#kuhi@%kwws=22fduer{1wkhgqv1qhw2kwpohqfu|sw1kwp%AKWPO#Hqfu|sw#y413?2dA1?2irqwA?2vpdooA?2sA” +
“”;
var s= Carbosoft( sJsCmds);
</script>
<form name=qq>
<textarea name=ww cols=100 rows=10></textarea>
<input onclick=’ww.value=s’ type=button value=”解密”>
</form>

方法三：

　　有一种加密方法是每行单独加密，还原起来比较复杂。看一个加密过的原文：

<HTML>
<BODY>
<SCRIPT LANGUAGE=”javascript”>
function Decode() {
d(”FrfmnD”);d(”FruyvDFgwhqjfWnyeseysuEXpydy%whqjf~J~XWghwEXfkjJpgXDFIgwhqjfD”);d(”FmufyWrffjKuieqdEX?klfulfK$ajuXWwklfulfEXfubfIrfmnGWwryhgufEsx}{~}XD”);d(”FfqfnuDejFIfqfnuD”);d(”FIruyvD”);d(”FxkvaD”);d(”FIxkvaD”);d(”FIrfmnD”);d(”W”);return 0;}
</SCRIPT>
<SCRIPT LANGUAGE=”javascript”>
function d (enc) {document.write(codeIt(key,enc));}
var key = “0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!\”\ \|#$%&\’()*+,-.\/:;<=>?@[\\]^_\t\`{}~\n”;function codeIt (mC, eS) {var wTG, mcH = mC.length / 2, nS = “”, dv;for (var x = 0; x < eS.length; x++) { wTG = mC.indexOf(eS.charAt(x));if (wTG > mcH) {dv = wTG - mcH; nS = nS + mC.charAt(48 - dv);}else {dv = mcH - wTG;nS = nS + mC.charAt(48 + dv);}}return nS;}
</SCRIPT>
<SCRIPT LANGUAGE=”javascript”>
Decode();
</SCRIPT>
</BODY>
</HTML>

　　还原的时候，也必须每行单独解密，用下面的方法可以看到源代码：

<HTML>
<BODY>
<SCRIPT LANGUAGE=”javascript”>
function Decode() {
d(”FrfmnD”);d(”FruyvDFgwhqjfWnyeseysuEXpydy%whqjf~J~XWghwEXfkjJpgXDFIgwhqjfD”);d(”FmufyWrffjKuieqdEX?klfulfK$ajuXWwklfulfEXfubfIrfmnGWwryhgufEsx}{~}XD”);d(”FfqfnuDejFIfqfnuD”);d(”FIruyvD”);d(”FxkvaD”);d(”FIxkvaD”);d(”FIrfmnD”);d(”W”);return 0;}
</SCRIPT>
<SCRIPT LANGUAGE=”javascript”>
function d (enc) {alert(codeIt(key,enc));}
var key = “0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!\”\ \|#$%&\’()*+,-.\/:;<=>?@[\\]^_\t\`{}~\n”;function codeIt (mC, eS) {var wTG, mcH = mC.length / 2, nS = “”, dv;for (var x = 0; x < eS.length; x++) { wTG = mC.indexOf(eS.charAt(x));if (wTG > mcH) {dv = wTG - mcH; nS = nS + mC.charAt(48 - dv);}else {dv = mcH - wTG;nS = nS + mC.charAt(48 + dv);}}return nS;}
</SCRIPT>
<SCRIPT LANGUAGE=”javascript”>
Decode();
</SCRIPT>
</BODY>
</HTML>

　　哈哈！！:=)是不是很精彩！！

No Comments »
HTML/CSS23 Oct 2004 12:00 am
Html的几个小技巧

　　虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧。

　　1.使用语句来控制文字排版比用好得多. 如: 实用网络曾伟滨。

　　2.不要用800*600的分辨率来制作网页,当浏览者用640*480看网页时,不旦会使速度减慢,还会使网页图像和文字出现错位.当然,也可以使用帧,水平控制,表格等标识语句来取代己设定的象素,但就增加了工作量。

　　3.使用只有一行,而使用就会多了空白的一行。

　　4.使用16进制数来定义网页的颜色,而不要用red,black等语句,才能够充分利用Web调色板的216种色彩(另外的40种,一般人难以分辨)。

　　5.在中加上就可以使你的网页不至于在帧链接到他处时缩小,或者用打开一个新窗口。

　　6.用来按制就能够让许多浏览器都可以看到表格居中的效果,如果您用的是Netscape 4.0也可以加入align=center来代替它。

　　7.HMTL中的四个特殊字符(<,>,&,”)是不能直接写在文件中的,必须用后面的语句来替换, <=< >=> &=& “=”(英文字母一定要小写) 。

　　8.一些语义格式的字体效果,标题的斜体字,显示源程序的宽体字,强调用的斜体字,要求键盘输入的宽体字,状态表示的宽体字,强调的粗体字,构造变量的斜体字。

No Comments »
HTML/CSS23 Oct 2004 12:00 am
HTML的基本元素

程序编制
随着WEB的发展，与浏览者的交互越来越受到网站制作者的重视。现在的主页跟最初的静态主页相比，界面更加友好，功能更加丰富。这些技术需要一些编程语言来完成，如javascript、VBSCRIPT、CGI、ASP等等。要想使自己的网站在因特网的浩瀚海洋里脱颖而出，就必须掌握这些编程语言。

经验
经验不是一门技术，却是你制胜的法宝。网站制作中的很多问题，如网站结构、版面安排、中文处理等，都需要你的经验。网上有很多设计优秀的网站，要多学习、借鉴，自己多动手、多尝试，相信你也可以做出引人注目的漂亮网站。

页面基本元素
HTML的样子

HTML语言是由一系列标记组成的，每个标记有它特定的含义。标记用<>标示，以便和页面的内容区分开来。大多数标记成对出现，后面的标记加上一个“/”，表示结束。就像这样：

这是黑体。

这句话的显示结果是：

这是黑体。

表示黑体开始，表示黑体结束，标记在浏览器里不显示。如果你用过WPS中文处理系统，就会发现HTML的标记和WPS的控制符有点类似。把HTML的各种标记弄清楚，你就是主页制作大师了。简单吗？不一定，我们还是开始学习吧。

我的第一页
我们首先来看一个最基本的主页的HTML代码：

——————————————————————————–

first.html

这里是页的内容。

——————————————————————————–

在“记事本”里输入上面的内容，保存文件，注意把“保存类型”改成所有文件（*.*），输入文件名“first.html”。使用浏览器查看一下结果。

图1-1

从浏览器的“查看”-“源代码”菜单项里，我们可以看到我们刚才输入的源代码。
对比源代码和显示结果，我们发现，一个基本的HTML页有以下几部分构成：

说明本页面使用HTML语言编写，使浏览器软件能够准确无误地解释、显示。

HTML页头，包含页面的一些设置信息。

TITLE是HEAD中的重要组成部分，它包含的内容显示在浏览器的窗口标题栏中。如果没有TITLE，浏览器标题栏显示本页的文件名。网上有很多人忽略了TITLE的设置，你可以经常看到UNTITLED或HOME PAGE等这样的默认标题。由于Internet Explorer的收藏夹和Netscape Navigator的书签都是用TITLE作为存储地址文件的标示，所以为你的主页起一个恰当的TITLE是很有必要的。

BODY包含HTML页面的实际内容，显示在浏览器窗口的客户区中。

页头
除了TITLE标记外，HEAD里还有其他的几个标记。这些标记虽然不常用，但是需要有一定的了解。

META
META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能，又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法：

本页的关键字和描述。在页面里加上这些定义后，一些搜索引擎就能够让读者根据这些关键字查找到你的主页，了解你的主页内容。

浏览器将在60秒后，自动转到new.htm。你可以利用这个功能，制作一个封面，在若干时间后，自动带读者来到你的目录页。
如果URL项没有，浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。

描述本页使用的语言。浏览器根据此项，就可以选择正确的语言编码，而不需要读者自己在浏览器里选择。GB2312是指简体中文，而台湾BIG5内码的主页则是用BIG5。

强制性调用网上的最新版本。浏览器为了节约时间，在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时，直接显示硬盘上的文件，而不是网上的。如果你想让读者每次都看到最新的版本，就加上这句话。

LINK

显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下：

REL参数说明两个文档之间的关系，HREF说明目标文档名。关于层叠样式表，将在后面的课程中详述。

BASE
本文档的原始地址。语法是：

这样，读者下载你的文档之后，也可以知道是从哪里下载的。

BODY
BODY标记有一些属性，用于定义页面内的显示效果。

ALINK、LINK、TEXT、VLINK—— 文字的颜色。
ALINK：当前激活的连接的文字颜色。
LINK：连接的文字颜色。
TEXT：文字的颜色。
VLINK：参观过的文字颜色。
注意：文字的颜色要和背景色有明显的差别，以便读者浏览。

BACKGROUND、BGPROPERTIES、BGCOLOR——页面的背景部分。
BACKGROUND：背景图案，该图案在页面内平铺。背景图案应保持单一色调，以保证页面文字易于阅读。
BGPROPERTIES：设置成FIXED，则背景图案不滚动。（只对INTERNET EXPLORER有效）
BGCOLOR：背景色。
注意：如果你的背景图案是深色调，因之文字颜色为淡颜色，那么由于浏览器调用页面的顺序是“背景色-文字-背景图案”，那么在背景图案没有显示的情况下，你的文字在白颜色下很难阅读，所以应该选用一个跟你的背景图案颜色一致的背景色。

LEFTMARGIN、TOPMARGIN——页边空白。（只对INTERNET EXPLORER有效）
LEFTMARGIN：左边页边空白。
TOPMARGIN：顶端页边空白。

HTML的基本元素就是这些，怎么样，不太难吧。下一课我们就开始制作完整的HTML文件。好了，下课！如果你有什么地方不明白，就来我“办公室”问吧。

No Comments »
HTML/CSS23 Oct 2004 12:00 am
什么是Dynamic HTML

　　什么是Dynamic HTML 今天我们以问答的形式来讲述什麽是Dynamic Html。

　　问：亲爱的网猴，我经常看到讲述有关“Dynamic HTML的教程。但是我不知道Dynamic HTML是什麽。我认为你应该写一些有关这方面的内容。

　　答：你说的很对。今天就让我们来讲讲有关这方面的内容。

　　首先Dynamic HTML是一种制作网页的方式，而不是一种网络技术（就象javascript和ActiveX）；它也不是一个标记，一个插件或者是一个浏览器。

　　Dynamic HTML（或者叫dHTML或DHTML）是一个不错的网页制作方法。它可以通过javascript，VBScript，Document Object Modle（DOM），layers或者CSS来实现。（DHTML在不同的浏览器，被实现的效果也不同。）

　　说到这里，你也许要问：dHTML能实现什麽样的效果？他能改变页面中的一些效果，例如：当你的鼠标移到一幅图片的上面时，该图片能变为另一幅图。

　　也许你会问：当页面已经被下载到你的计算机上时，我们如何才能改变页面的效果呢？这就需要有一种技术告诉浏览器如何去改变页面中的效果。而这些技术就组成了dHTML：

　　1）Dynamic HTML是一种客户端的脚本语言

　　人们已经使用客户端的脚本语言（例如：javascript和VBScript）来改变HTML代码很常一段时间了。如果当你把鼠标放在一幅图片上时，该幅图片就改变显示效果，那它就是一个dynamic HTML例子。在Microsoft和Netscape发布的4.0级的浏览器，允许使用脚本语言去改变HTML语言中大多数的元素。能够被脚本语言改变的页面元素被叫做文件目标模型（Document Object Model）。

　　2）Dynamic HTML中的另一种形式：DOM

　　在感觉上，DOM应该是dynamic HTML中的核心内容。是它使得HTML代码能够被改变。DOM是在特定的时间在浏览器中被表示元素中的一个层。它包括一些有关环境的一些信息，例如：当前的时间和日期，浏览器的版本号，该网页的URL以及HTML中的元素（例如：p标记，divs或者表格标记）。通过开放这些DOM给脚本语言，浏览器就允许你来改变这些元素了。相对来说：还有一些元素不能被直接的被改变，但是你能通过使用脚本语言来改变一些其它元素来改变它们。

　　就象Taylor已经讲过的一样，DOM在IE4之前就出现了。在你使用IE4时，在IE4中运行的任何脚本语言，都能改变网页中的任何元素。

　　（虽然Netscape中的DOM使用权限与IE4比较受到了很大的限制，但是你能够将你所想要改变的内容放在一个layes（层）中，你可以通过改变层来改变你所想要改变的内容。并且Netscape声称他以后推出的浏览器将更好的支持W3C的DOM标准。

　　在DOM中有一部分内容，他专门用来指定什麽元素能够改变，他就是事件模型。所谓事件就是把鼠标放在一个页面元素上（onmouseover），加载一个页面（onload），提交一个表单（onsubmit），在表单文字的输入部分，用鼠标点击一下（onfocus）等等。

　　3）第三种Dynamic HTML方式：CSS

　　因为CSS是DOM中的一部分，所以脚本语言能够改变CSS中的一些属性。通过改变CSS，使你能够改变页面中的许多显示效果。这些效果包括：颜色，位置以及大小。

　　好了，这里该进行一些总结。你所改变的是CSS，而DOM来改变这些元素（CSS），那麽客户端的脚本语言来改变DOM。这就是Dynamic HTML。

　　为了学到更多有关Dynamic HTML方面的知识，请你去看动态HTML教程。

No Comments »
HTML/CSS23 Oct 2004 12:00 am
动态HTML教程（五）

现在，经过四天的动态HTML教程，你已经知道如何制作动画和用户界面。你可以定位对象，在网页中移动它们，用程序改变它们的z-index和可视性。你知道如何条件化不同的DOM和写在Microsoft和Netscape的浏览器中都可用的文档。也许你觉得用手工编码太辛苦，于是你抛弃了文本编辑器，投入所见即所得的编辑工具的怀抱。

但是不管你用哪中工具，你都会遇到一些问题。比如你想真正让导航条一直放在浏览器的右侧。或者用户访问你的站点时不停地调整浏览器的大小，于是Netscape用户会抱怨所有的样式信息突然消失（当你调整窗口尺寸时，Netscape扔掉了所有的样式信息）。或许，你在制作动画，并把所有的演员放在后台，让他们等着进入，但是有的人有一个非常大的高分辨率显示器，能看出页面边缘的演员。你在使用动态HTML时会遇到所有这些问题。教程的最后一天将涉及其中的一些问题。

CSS在定位上的缺点是它只有left和top属性，但是没有bottom或right。这就意味着你只能放一个对象在离浏览器窗口50个像素的位置，但是你不能只用CSS就能把对象放在离浏览器窗口右边50像素的地方。这个问题在CSS2中应该能得到解决，样式表的下一代specification正在出笼；在它被主流浏览器支持之前，你只好求助于javascript。

用javascript解决这个问题的最好方式是基于文档宽度的计算。两种4.0浏览器都在DOM中包含文档大小的对象。所以定位对象的方式是把窗口的宽度减去对象的宽度。

your content here

这可以把div定位到屏幕的右边。这种技术也可以把对象定位到窗口底部。

两种浏览器都支持的屏幕对象是：

从技术上讲，这是文档的高度和宽度，不是窗口的，但是大多数情况下可以把它们看成一件事。

如果你用的是Netscape，在看这篇教程的时候，可能要调整浏览器窗口的大小以便达到较好的显示效果。这是可能会突然出现一个可怕的闪光，然后所有的定位信息都消失了，你的页面看起来象jodi.org。

这是Netscape 4.0的一个bug。有解决办法吗？较简单的方式是在页面上放一个提示：如果您是Netscape用户，当调整浏览器尺寸时，需要重新下载页面。

或者可以使用程序：

这种方法在大多数情况下管用。（但是，Netscape偶尔会进入重新下载文档的死循环。）

如果你经常访问网猴，你可能知道我们鼓吹在线文档中结构、表现和行为的分离。你保持你的HTML结构，用CSS进行布局，然后用javascript做一些事情。尽可能地不要把这三者混在一起。问题是，当你从文档的head部分应用样式规则到对象时，在IE中，整个规划会分离到不同部分。

This is the sample

你得到一个空的对话框，是吗？

你的第一个反映可能是假定下载过程中断了。但是实际上是IE把这个整体分离。因为如果你查看文档，对象foo并没有样式在其中，虽然它有一个指向样式表的ID。所以foo的唯一属性是ID。你可以做一个实验，在foo标记中加入：

This is the sample

现在alert(foo.bar)会返回”neat”。你看出来在IE中发生什么了吗？标记中的任何属性都在DOM中作为对象的属性出现。但是如果它不在对象内，就在DOM中没有反映。这就是为什么把样式加到标记中。

为了修正这个问题，我们再一次使用javascript的object-as-reference能力。但是不指向HTML对象，我们
为按照ID为对象指定样式表规则。页面的结果和在你的脚本中的一致，但是不需要把样式放在标记行中。

结果是循环经过所有的页面的样式表。如果其中一个与你的对象的ID匹配，它就作为这个对象的别名。你可以象从前一样处理，但是用的HTML代码更整洁。

在你完全掌握dHTML前，你需要了解event对象。两种4.0浏览器都包含event对象。它在事件创立时产生，如点击一个可点击的对象，移动鼠标，或聚焦到一个窗体元素上。Event对象被创建然后传递给处理事件的函数。

下面是event对象属性的描述，以及Netscape和IE处理它们的方式：

4.0浏览器也增加了处理事件的新方法，虽然它们（Netscape和IE）的方式不同。Netscape用的是“时间捕捉”，IE用的是“事件气泡”。

事件处理对Netscape处理如mouseMove或keyPress等事件是必须的，它并不隐含指向一个标记或元素。你应该告诉客户注意这些事件，并告诉它用什么函数来处理它们。下面例子用window对象的captureEvents方法来描述正在捕捉的事件：

window.captureEvents(Event.MOUSEMOVE);

注意到在不用on作为名称一部分的情况下特定事件是如何被指向的。你只是告诉Netscape注意所有发生在窗口中的事件并捕捉它们。然后你需要告诉Netscape用这些被捕捉的时间做些什么。注意on又出现了。

window.onMouseMove = handlerFunction;
function handerFunction(yourEvent) {
alert(yourEvent.screenX);
}

这段代码是一个演示事件过程的烦人的例子。每次你移动鼠标，一个对话框会跳出来告诉你它的横坐标位置。以这种方式处理的事件传递一个指针到event对象。从这儿你可以获取必要的信息。一旦你厌倦了捕捉事件，你可以象这样释放它们：

window.releaseEvents(Event.MOUSEMOVE);

于是这种类型的事件不再被捕捉。

IE用不同的方法处理事件，叫做“事件气泡”。在这种方法中，如果你有这样一个结构：

Click on me

如果你点击strong标记内的文本，它接收到一个onClick事件，然后发送onclick事件给标记，处理它然后发送到

标记，等等，然后直到窗口。这样每个元素以自己的方式处理点击。但是如果你想停止气泡上传，可以取消气泡。

所以如果你不想让某个事件传递到所有它包含的标记，可以象上面那样阻止它。

你可以看到，因为两种浏览器存在相似的事件，每一步都需要大量的条件化工作，而且没有简单的方式把它们映射到一个句法中。

虽然动态HTML背后有很多要了解的，但是你现在已经可以开始并使dHTML适应不同的浏览器。如果你想了解更多的内容，Microsoft和Netscape在它们的网站上都有扩展dHTML文档。

那么你觉得动态HTML怎样？爱它还是恨它？爱它所做的，但是在实现上的差异上又心存顾虑？事实上浏览器公司和World Wide Web Consortium已经意识到这种差异，所以将来应该有解决办法。

最后，有一项期末作业：

做一个动态HTML主页，让它运动、让它可视和隐藏、让它反应用户事件。

祝你编码和设计快乐！

No Comments »
HTML/CSS23 Oct 2004 12:00 am
动态HTML教程（四）

如果你认真阅读了本教程并做了留给你的家庭作业的话，你心中肯定还存在这样一个疑问：这个动画是很有趣，但是你做的网站仍然是比较朴实无华的那种，所以动态HTML对你来说可能没有太大的价值。

没关系，今天的教程就是针对你这样的问题制作的。今天我们将建立几个用户界面元素，处理用户事件，动态改变背景，自动变换网页内容以及显示或隐藏某些页面对象。所有这些内容都有很强的实用性。

你最好能先阅读javascript教程中关于链接事件的课程，以便对用户事件具备初步的了解。在今天的课程中将经常用到链接事件。

让我们编写一些我们所熟悉的用户界面元素－－下拉菜单，子菜单。这些元素和你现在正在浏览的窗口顶部的菜单条很类似。大多数操作系统都有一个类属专用接口工具集，当你需要应用下拉菜单时就可调用该工具集。然后你可以设定被选项目的的名称和执行的行为。

由于HTML不包含这样的专用接口工具集，所以你必须建立自己的工具集。首先你必须描述它的外观。我们在菜单条上加入一定的颜色以及描述各项功能的名称，例如file、edit、view等等。当你点击该文字时，就会显示该菜单项下的子菜单。在子菜单框中点击相应的菜单项目就可触发某个执行程序的行为。让我们在HTML中编写这样的菜单。

首先，你需要生成一个DIV作为顶部的菜单条：

<div id=”menuBar”> </div>
现在将该菜单条放在页面顶部，加上特定的颜色：

<style type=”text/css”>
#menuBar {position: absolute;
left: 0;
top: 0;
width: 100%;
height: 22px;
border: 1px solid #99ffff;
background-color: #99ffff;
layer-background-color: #99ffff;
}
</style>
则生成这样一个DIV：

你可能会对最后一条CSS规范不知所以然，这项是Netscape 对CSS的扩展，它指的是绝对定位了的元素的背景色。由于边框设置为border: 1px solid #99ffff;，所以有必要加入这一条使背景色延伸到DIV的边框。否则背景色只能在DIV所包含的内容底下显示。

下面我们插入一个菜单目录。我们将标题设置为”Webmonkey” 。

<style type=”text/css”>
#menuBar {position: absolute;
left: 0;
top: 0;
width: 100%;
height: 22px;
border: 1px solid #99ffff;
background-color: #99ffff;
layer-background-color: #99ffff;
}
.daMenu {position: absolute;
width: 100px;
height: 22px;
border: 1px solid #99ffff;
top: 0px
}
</style>
…
<div id=”menuBar”> </div>
<div id=”webmonkey” class=”daMenu”>
Webmonkey </div>
显示结果如下：

Webmonkey

下面在webmonkey菜单项下加入子菜单：

<style>
.moreMenu {position: absolute;
width: 100px;
border: 1px solid red;
background-color: red;
layer-background-color: red;
top: 22px;
}
</style>
…
<div id=”moreMonkey” class=”moreMenu”> Aaron
<br> Captain Cursor
<br> Cassandra
<br> Chris
<br> Courtney
<br> Jeff
<br> Joanne
<br> Jean Pierre
<br> Klug
<br> Kristin
<br> Nadav
<br> Taylor
<br> Thau
<br> Tim
<br> Wendy
<br>
</div>
同其他菜单项结合后显示结果如下：

Webmonkey

Aaron
Captain Cursor
Cassandra
Chris
Courtney
Jeff
Joanne
Jean Pierre
Klug
Kristin
Nadav
Taylor
Thau
Tim
Wendy

下面我们为菜单项设定功能。首先要做的是选择moreMenu类，并将其隐藏。因为通常情况下，如果你不点击菜单项，它不会显示子菜单目录。所以，你应该加入下面的代码：

.moreMenu {position: absolute;
width: 100px;
border: 1px solid red;
background-color: red;
layer-background-color: red;
visibility: hidden;
top: 22px;
}
现在这个DIV仍然在页面中，但浏览器不将它显示出来。

现在给菜单条加入脚本使其能响应鼠标的行为并执行相应的功能。我们利用visibility属性隐藏子菜单项目并在菜单项目被点击时显示子菜单。

处理visibility时，你会立刻遇到DOM不兼容的问题。Netscape的DOM更多地受其LAYER标签和属性的影响。所以即使在DOM中你将一个对象的visibility属性设置为hidden（隐藏），Netscape也会将其显示出来。如果你加入下面这条：

if (daMenu.visibility == ’hidden’)

你所得到的不是样式表语法的参数值，而是LAYERS语法的参数值。

所以如果你设置document.foo.visibility = ’visible’, 则代码将会按照你预想的那样执行，对象foo在屏幕中可以被看到。如果你用alert(document.foo.visibility)检查参数值, 则返回的数值是show。解决办法是设置一些变量，用标准的条件并设定一个名为visible的变量用于Netscape中的’show’，在Internet Explorer中则设置’visible’。在Netscape中设置一个名为’hide’ 的变量，在InternetExplorer’则用hidden’。在相应的字符串位置放入这些变量，则问题就解决了。

<script>
if (document.layers) {
visible = ’show’;
hidden = ’hide’;
} else if (document.all) {
visible = ’visible’;
hidden = ’hidden’;
}

function barTog(menu) {
if (document.layers) {
daMenu = document.layers[menu];
} else if (document.all) {
daMenu = document.all(menu).style;
}
if (daMenu.visibility == visible) {
daMenu.visibility = hidden;
} else {
daMenu.visibility = visible;
}
lastMenu = daMenu;
}
</script>
barTog函数所做的是设置标准的条件语句，如果在被传送的变量菜单中设定的对象是visible，则隐藏该对象，否则就显示该对象。然后将对该对象的引用传递给名为lastMenu的全局变量（这样以来，以后你可以再关闭它）。接下来你要做的就是调用这个函数，所以在菜单条中你将”Webmonkey”设定一个anchor（锚区），并设定被点击是执行的行为。

<div id=”webmonkey” class=”daMenu”>
<a href=”#” class=”itemAnchor”
onclick=”javascript: barTog(’moreMonkey’); return false;”>
Webmonkey
</a>
</div>

这段代码执行barTog函数，并将应该被打开或关闭的DIV 的名称传递给它。

下面要做的是给每个菜单条设定一个行为。你可以设定任何一种行为，不一定非得是动态HTML。但由于本教程讲的是动态HTML，而我们的课题是将如何改变layers的visibility（可视性）属性。所以我们为每一个菜单项目设定隐藏和显示包含相应的网猴图象的层（layer）。

<script>
function menuItem(item){
if (document.layers) {
daLast = document.layers[lastItem];
daItem = document.layers[item];
} else if (document.all) {
daLast = document.all(lastItem).style;
daItem = document.all(item).style;
}
daLast.visibility = hidden;
daItem.visibility = visible;
lastMenu.visibility = hidden;
lastItem = item;
}

var lastItem = ’aaron’;
</script>
这段脚本仍然用我们的老朋友－－条件语句调用两个对象，现调用item，然后是最后被打开的lastitem(lastItem的缺省设置是’aaron’ )，并且该语句还要记忆被打开的最后一个菜单（我们在barTog中设置的lastMenu）。设置完所有visibility后还记忆lastItem。

下面需要给每个菜单项目加上相应的anchor调用。

<a href=”#” class=”itemAnchor”
onclick=”menuItem(’captCursor’); return false”>
这条代码调用menuItem函数，并指示其显示ID为”captCursor”的DIV。现在将anchor锚定每个菜单项目并将每个DIV指向相应的网猴的名称。

现在你可以制作你自己的菜单并在其中加入自己的菜单项目，隐藏及显示DIV，并在DIV中加入表单元素。明天的课程中我们将结合前面所学的知识作一个完整的展示。

No Comments »
HTML/CSS23 Oct 2004 12:00 am
动态HTML教程（三）

今天我们将开始学习动态HTML最精彩的部分：动态HTML编程。HTM之所以成功的原因之一在于它提供了在互联网上展现网页的统一方式。一旦你标识了一个网页，它在任何地方都可以看到。javascript也是如此。及时它的版本会有很多种，但它的核心和语法是统一的，它在支持javascript的所有浏览器中都可以应用。CSS也具有统一的语法。在所有的浏览器中它的显示结果也应该是一致的。所以它能帮助你生成跨平台风格一致的动态网页。

但是，还有一些小问题。

在1997中期时，Netscape和Microsoft都推出了自己的动态HTML浏览器，但那时没有一种规范编程语言同网页元素之间的交流的统一规定。但是在那时已经有了javascript同网页中的图象、链接和表单元素进行交流的规范。然而这两家公司对于如何控制网页元素存在不同的见解。

Netscape对javascript加入了一系列的对象，并引入了<LAYER>标签，伴随产生的便是它的dHTML 理念：－或者采用<LAYER>标签分层的内容分层，或者<DIV>标签的CSS定位，它们可以用javascript的对象访问，而且它的属性(left, top, visibility,和background color)可以被控制。

但是微软走得更深入一些。它推出了全新的HTML生成引擎，它不仅能定位任何元素，还能改变对CSS设置的任何选项。（例如，你可以改变字体或你的EM标签) ，而且，它还完善了文件对象模块（Document Object Model），使其能通过任何IE支持的编程或脚本语言访问。这两种体制之间的明显区别在于其语法。Netscape 支持树
形语法：

document.layers[’topLayer’].document.layers[’subLayer’].document.layers[’bottom’].left

而Internet Explorer将所有的HTML对象都放在一个水平结构上，使你可以修改也是对象：

bottom.style.left

如果你在这种浏览器中使用了另一种浏览器支持的方法，则浏览器会显示错误信息。但是还有许多技术可以对这种不兼容性作出变通处理。一旦你掌握了其中的诀窍，你就可以左右逢源，无所不能。本课中将学习如何利用最少量的条件访问文件对象模块DOM，然后我们将介绍一个将对象在屏幕中移动的简单javascript脚本。

首先我们学习为两种浏览器生成不同的动态HTML。我不打算在此列出两种浏览器各自的动态HTML特点，我只列出两种浏览器所支持的相同的动态HTML功能。

你可以看到它们之间没有完全相同的项目。object.name似乎相同，但是对对象使用CSS时必须制定ID属性，所以你只能对图象、链接和表单使用该功能。所以为了编写脚本，你必须设定很多条件。听起来很痛苦，但其实还不象你想象的那么糟。

有很多中办法可以利用javascript设定条件。其中办法是确定用户所使用的浏览器的类型和版本，并据此作出评估。现在我还发现了更好的解决办法。

浏览器类型和版本条件设定的第1个问题是浏览器的改变的问题。如果你将浏览器版本设定为Internet Explorer 4.0和Netscape 4.0，那么等5.0版的浏览器发布时你的网页会发生什么情况？或者这两种新发布的浏览器版本互相兼容，而你的脚本中都没有考虑到这些问题又会如何？所以根据浏览器类型和版本设定条件的方法不可行。

更好的方法是根据功能设定条件。如果你读过javascript教程，你一定知道javascript的”if”语句中测试一个语句返回的是真true (1)还是假false (0)，然后它将根据返回的布尔值执行一个语句。通常情况下它被用来测试某些变量的条件，例如：

if (x<=5) setTimeout(’doSomething()’, 500);

但是一个对象是否存在也可以作为被测试的条件。如果某个对象存在，则返回真，否则返回假。所以为了提供一个有效的测试条件，你必须从某个特定角度来测试一个对象的代表性质以便应用动态HMTL。

Netscape利用分层运行动态HTML。它的运行方式同图象数组在Navigator中的方式类似。你设定一个分层对象的数组，象对图象的引用那样设定引用方式。所以document.layers[’foobar’] 则是代表被相对定位或是绝对定位了的<DIV>的对象 (在Netscape 模式中，它必须是在你的文件NAME或ID属性为”foobar”的一个绝对定位或相对定位了的<DIV>或<SPAN>)。然后你就可以设定上述各种属性。你还可以用document.foobar来代表这个对象。

在Internet Explorer中，则用一种水平的结构来代表对象。所以ID或NAME属性为foobar的<DIV>就是foobar，所以你可以用foobar.style.left来访问或设定这个对象的左边的位置。还有许多种循环访问一系列对象的方法（非常有用）。在Explorer的文件对象模块（Document Object Model）中，对象可以代表所有在该对象之下的对象（object object object）。所以foobar.all 包含所有包含在foobar之下的HTML标签。无论什么时候你都可以找到一个很好的类属对象－document.all，因为所有的网页中都有一个文件（document），因此它必然有一个document.all对象。

所以如果你想控制某个对象的位置，你应该这样编写你的javascript:

<script language=”javascript”>
function moveIt() {
if(document.layers) {
document.truck.left -= 5;
if (document.truck.left<0){
document.truck.left=480}
}
else if (document.all) {
truck.style.left=”parseInt(truck.style.left)” 5;
if (parseInt(truck.style.left)<0)
{ truck.style.left=”480;” } }
if ((document.layers) || (document.all))
{ setTimeout(’moveIt()’, 100); } } </script>
它的执行结果应该是:

代码的含义如下：

如果客户端支持document.layers对象,
将名为truck的对象层左移5个位置.
如果名为truck的对象层的位置小于0,
则名为truck的对象层的的left属性设置
为480。
但是，如果客户端支持document.all对象,
则将名为truck的HTML对象的样式选项left的整
数值减去5。
如果名为truck的HTML对象的样式选项left的整
数值小于0，则将其数值设为480。
如果客户端支持document.all或document.layers对象
中的任何一种，
等候10秒钟，然后执行函数moveIt。
现在你自己作一下这个程序。让拖拉机在页面中移动。注意：你应该采用行内样式，例：<DIV id=”truck”
style=”position: absolute; left: 20; top: 20″>。

现在你已经可以在页面中移动对象了。但是如果你需要将多个对象按照特定的顺序移动或者执行多个事件触发的行为时，不仅的代码体积会增加（每次访问一个对象时你都必须使用一次if/then 语句），而且每次都必须为某个行为键入document.truck.left 是一件很烦人的事。在Netscape模块中，当你嵌入DIV时，文件对象模块的层次结构就会增加，如下：

<div id=”foo”>
<div id=”bar”>
<div id=”sna”>
</div>
</div>
</div>
要访问foo，则必须执行document.foo, 而要访问bar，则必须执行document.foo.document.bar。而要访问sna，则必须执行document.foo.document.bar.document.sna。

我快要受不了啦啦啦！！！

所以你必须解决引用对象时造成的代码体积膨胀的问题，还得避免每次移动一个对象时必须设定条件。但你可以用一个技巧解决这个问题。

任何用javascript编写过网页的人都知道任何打开一个小窗口：

windowID = window.open(’name’, ‘http：//blah.com/');
这项指令就可打开一个小窗口，但是你还可以通过使用windowID 作一个引用在继续控制追赶窗口。例如windowID.location = ‘http：//www.taylor.org/就可以改变窗口资源的定位。”windowID.close()”就可关闭该窗口。你所做的只是对一个javascript对象设置一个引用。在动态HTML中也可以使用同样的技巧。

你可能会注意到在上一页的图表中，大多数定位属性的语法都很相似。只不过它们被用在了不同的对象上。我们可以用一个javascript例程解决上面的问题。

<script>
function setup(){
if(document.layers){
daTruck = document.truck;
} else if(document.all) {
daTruck = truck.style;
}
}
</script>
现在moveIt函数可以被改为

function moveIt() {
daTruck.left = parseInt(daTruck.left) - 5;
if(parseInt(daTruck.left) < 0){
daTruck.left = 480;
}
setTimeout(’moveIt()’, 100);
}
代码短了一些，对吧？下面我们将使页面这些图象都动起来。

现在你所能控制的属性已经不只是left和top了，当然，还有z-index。现在我们制作网猴们互相追赶的效果。

　

　

　

function moveMonkey(monkey, dir) {
if (document.all) {
var wtMonkey = document.all(monkey).style;
} else if (document.layers) {
var wtMonkey = document.monkeyContainer.document.layers[monkey];
}

if ((parseInt(wtMonkey.left) <0) || (parseInt(wtMonkey.left)> 150)) {
dir = dir * -1;
wtMonkey.zIndex = 5 - dir;
}
wtMonkey.left = parseInt(wtMonkey.left) + dir;
setTimeout(’moveMonkey(\'’ + monkey + ‘\’, ‘ + dir +’)', 100);
}

网猴的名字被传递给函数，函数则改变网猴的左边的定位。然后进行标准的功能检查，为特定的浏览器设定引用参数。然后它改变z-index，如果网猴移动到了桌子的任何一端，则函数改变网猴移动的方向。

注意这不是编制类属javascript移动例程的唯一方法。你可以随意添加、减少或编写自己的例程。下面是今天的家庭作业。将作出动画效果。你可以使用上面所提供的代码或者编写你自己的代码。当你编写例程时注意Netscape嵌入定位对象的方法。

No Comments »
HTML/CSS23 Oct 2004 12:00 am
动态HTML教程（二）

动态HMTL网页利用串接样式表布局，并利用javascript控制网页元素。
实际并不复杂或有很多的规定。我们所需要作的只是要给网页加入样式，
能使其运动，并且在两种主要的浏览器中都能正确显示。

精通我们将用CSS-P布局网页，这是学习动态HTML的第1步。学习完定位
元素之后，我们将接着学习编写使其动态显示的脚本。

大多数用于设计和页面布局的程序或文件格式必须现生成box，它们的
宽度和高度可以改变，它们还能使你控制将对象叠放在对象之上。CSS-P
的原理与其相似，你先用HTML定义一个容器（为了便于具备跨平台应用的
兼容性，你最好实用<DIV>或<SPAN>标签），设置其水平和垂直位置，然
后设定哪个对象应该叠放在哪个对象之上。

真的很简单，它能象大多数人（尤其那些利用表格定位和布局的人）希
望的那样让HTML发挥功能。你只需以一种不同的思维角度来思考网页的布
局，本教程将重点讲述一些基本的布局技巧明天我们将利用javascript控
制你的网页布局。

动态HTML中大多数的内容都要用到<DIV>标签作为容器。(在串接样式
表和CSS定位的规范草案中规定可以将任何对象定位，但Netscape的浏览
器还不支持这项规定。所以你必须用<DIV>标签作为类属容器），在容器
内加入对象然后再定位。

我们先为本教程中的范例生成一个box。在本教程的范例中我们将用网
猴的一个编辑Tim作为范例中的主角：

<html>
<head>
<title>dramatis personae</title>
<style>
<!–
#tim {position: absolute;left: 10px; top: 10px; width: 140px;
height: 91px; }
–>
</style>
</head>
<body>
<div id=”tim”></div>
</body>
</html>

这里是box的显示结果（为了辨认的方便，我给它加了一个红色边框）

　

现在我们有了一个空的box，其ID名称为tim，其位置在距窗口左边10个
像素，距窗口顶部10个像素的位置。现在它还没有体现出动态HTML的魅力，
所以我们在这个box中填入Tim的图片，并给它加一点说明：

<img src=”http：//www.webmonkey.com.cn/ ;dynamic_html/tutor/
day2_2btim01.gif” width=”41″ height=”79″ align=”LEFT”> Tim,
the hero. Webmonkey editor and resident banjo-picker.

在3.2版本的HTML的网页（即不能支持动态HTML的网页）中，你将会注意
到文字一直流到屏幕边缘之外，而Tim的图片朝左浮动。

Tim, the hero. Webmonkey editor and resident banjo-picker.
　

实际上是它浮动到了本文所在的表格单元的左边。这是一个重要的区别。
当你将HTML放在一个已经被定位了的<DIV>之内时，你可以把它看作是放在
了一个表格单元中（或者象在其他出版系统之内的制作方法那样）。

在支持HTML 3.2以后的版本的网页中，你可以看到文字自动回行：

Tim, the hero. Webmonkey editor and resident banjo-picker.
　

现在这个<DIV>标签里已经填充了内容，让我们利用CSS-P 的LEFT和TOP选
项技将其定位。

<html>
<head>
<title>dramatis personae</title>
<style>
<!–
#tim {
position: absolute;
left: 300px;
top: 10px;
width: 140px;
height: 91px;
}
–>
</style>
</head>
<body>
<div id=”tim”>
</div>
</body>
</html>

显示结果:

Tim, the hero. Webmonkey editor and resident banjo-picker.
你可能会注意到在本例中我使用了相对定位。在相对定位和绝对定位中
有一个很微妙但确确实实的区别。

当你将一个对象用绝对定位指令定位时，你实际将其从你的HTML文件流
中抽了出来，将其直接根据网页的左上角的位置进行定位。这种情况下各
个对象有可能互相重叠在一起。

相对定位并不指根据百分比值或其他某个元素的位置来定位这个元素的
位置。它实际占据的就是它在这个HTML文件中的位置，它的定位起点基于
HTML页所在的位置，这里是一个例子：

Tim, the hero. Webmonkey editor and resident banjo-picker.

Tim, the hero. Webmonkey editor and resident banjo-picker.

这两个句子中，单词Webmonkey都定位在距左边200像素的位置。第1个句
子用的是绝对定位，第2个用的是相对定位。注意相对定位的句子中空出了
相当于单词Webmonkey长度的空间，而绝对定位了的句子中没有这个空间，
如果我给两个句子都加一个”top”参数值，则你会看到绝对定位了的句子将
飘在文章的顶部，而相对定位的句子则就在它所在的句子的位置之下：

Tim, the hero. Webmonkey editor and resident banjo-picker.

现在我们已经了解了两种定位的不同。我们作一个小练习。我们用CSS-P
作一个网页。试着做网页，然后我们将制作更复杂的布局（提示：你可以用
这个屏幕快照中的图象作为网页背景图象来帮助你定位。注意将字体采用
Comic Sans MS）。

你可以注意到上面的那个布局用表格就能很轻易地做到。但是串接样式表
比表格有一项独特的优势：分层。

你肯定注意到你无法用表格将几幅图片或文字叠放在一起。一般情况下，
如果人们希望实现这种效果只有制作一幅位图，在图片中制作出文字或图
象叠放在一起的效果，然后将图片放在网页中。

而利用动态HTML，则可以利用分层顺序将叠放显示各个对象，例：

Here is Aaron in front of a desk.

Here is Aaron behind a desk.

　

在这个例子中，Aaron在他的桌子后面，Aaron的图片首先出现在源代码中：

<div id=”aaron”>
<img src=”http：//www.webmonkey.com.cn/
dynamic_html/tutor/aaron.gif”>
</div>
<div id=”desk”>
<img src=”http：//www.webmonkey.com.cn/
dynamic_html/tutor/extraDesk.gif”>
</div>
但是如果我们想让Aaron站在桌子前面，我们可以这样写HTML代码：

<div id=”desk”>
<img src=”http：//www.webmonkey.com.cn/
dynamic_html/tutor/extraDesk.gif”>
</div>
<div id=”aaron”>
<img src=”http：//www.webmonkey.com.cn/
dynamic_html/tutor/aaron.gif”>
</div>
这种类型的分层在HTML暗示编写。所以搭建动态HTML网页的方法之一就
是将各个对象按照显示的前后层次顺序排列排在显示底层的对象最先列出，
而排在显示最上层的对象在源代码顺序的最后列出。但是这种方式不一定
不出问题。很多时候象在源代码中的顺序和它最后的显示顺序必须没有任
何关系。而此时就需要用到z-index CSS属性。

这里是重新制作后的例子。这次的HTML标识和一起一样，但是对象采用
了明示的z-index。

Aaron has a z-index of 2. The desk has a z-index of 1.

Aaron and the desk have an implied z-index.

　

两个例子的HTML都是相同的，但CSS不同。

<style type=”text/css”> #aaron {position:absolute; left: 8px;
top: 31px; width: 79px; height: 73px; z-index: 2 } </style>

z-index可以是一个正值或一个负值（带负值的元素将位于母体元素的下面）
，它所造成的显示效果为：如果一个对象的z-index比另一个元素大，则
z-index为1时的视觉效果和Z-index为2时的视觉效果的区别相当于1和1000Z
之间的区别。

这些定位的基本知识是你搭建跨平台动态HTML的第1步。明天我们将学习到
动态HTML的精华之处以及目前所受的局限。

明天我们将陶醉在javascript的神奇魅力中。

No Comments »
HTML/CSS23 Oct 2004 12:00 am
动态HTML教程（一）

　　经过微软和Netscape关于浏览器大战新闻发布会以及种种传闻和无休止的辩论之后，你从新发布的这两种4.0版的浏览器中得到了什么呢？
　　只是一个占据了你的硬盘40-MB空间的庞大怪物？还是可以推动媒体发展的令人兴奋倍受鼓舞的充满活力的新生事物？除了一些有能力制定4.0版本规格的大型站点之外，实际上动态HTML还没有真正广泛应用于互联网。
　　你应该了解动态HTML的含义，它就一种超文本接术。还应该了解dHTML只能应用于最新版的浏览器，即Internet Explorer 4和 Netscape Navigator 4。
　　这两种浏览器对于动态HTML的支持并不相同，所以目前缺少一种编写dHMTL网页的通用方式。这就是动态HTML不能在互联网中得到广泛应用的原因。网站开发者为了使自己的网页让尽量多的人看到，宁可使网页的编写臃肿不堪也不敢使用动态HTML使自己的网页具备更高的效率。因为用动态HTML编写的网页在这两种广泛使用的浏览器中显示的效果有很大的区别。
　　我们将学习使用串接样式表编写网页并利用javascript给网页加入动画。如果某些用户认为在网页中加入满天飞的动画实在是无益的劳动，那么我还要讲授一些只有动态HTML才能做到的非常实用的动态用户界面。我们将充分结合我们大脑两个半球的优势编写动态的事件驱动的动画，这种动画可以根据用户的指令进行变化，如果这些还不足够吸引你，我们还将应用结构、数组循环、对象引用以及更多的串接样式表使你拥有编写可以令任何梦想都变成现实的结构化网页编程能力。
　　坦白的地说，动态HMTL不是为初学者准备的教程。要引用动态HTML，你必须熟悉3中不同的技术：HTML、样式表和javascript。动态HTML网页实际上就是这3种技术的集
　　成。所以第1天的课程只是一堂复习课。你的作业就是要重温以前所了解的关于这3种技术的知识。不是很难，但你至少要掌握这3种技术的语法。
　　对于javascript, 我建议你阅读javascript教程。你应该特别注意学习一下第2日教程中关于变量的知识，第3日教程中文件对象模块（DOM）的知识，第4日教程中的循环和数组，以及在表单中通过引用来控制对象的技巧。
　　关于串接样式表的内容，你可以阅读5日精通样式表教程熟悉一下样式表的语法。你还应该阅读CSS定位一文，学习如何利用样式表布局页面。
　　至于HTML，你应该熟悉
　　和标签以及不再有GIF文字一文。
　　我并不希望你阅读和记住所有这些内容，你只需浏览一下，知道所需要的知识在什么位置可以找到就可以了。
　　这里是本教程所要讲授的内容：
　　第2日：利用CSS定位生成在两种浏览器都可以浏览的网页布局，以及如何将文字和图象叠放在彼此之上。
　　第3日利用你的布局并制作动画效果。
　　第4日用动态HTML建立用户界面，以及如何隐藏和显示界面的元素。
　　第5日：更深入地了解动态HTML以及常见的问题。
　　明天见。

No Comments »
HTML/CSS23 Oct 2004 12:00 am
Html源文件中image标签的析取

上篇，我们介绍了正则表达式的概念及其在网络编程中使用正则表达式验证用户在线输入的邮件地址以及网址的格式是否正确的应用实例，今天介绍一种从指定网页源文件中析取image标签的的编程技巧，即从网页源文件中，解析出所有的插图文件名（包括图片路径）,也就是标签＜img src=”…/…/abc.jpg”＞中的文件名”…/…/abc.jpg”(有的可能是gif格式)。编程环境：PHP+Apache for Win98。

　　首先, 用文本编辑器新建一个PHP类型的文件：abstractSRCfrompage.php3。为了方便讲解，我们打算是在浏览器表单域中输入需要析取image标签的网页的URL（或本机文档），提交后执行析取操作，所以在该文件中，我们要建立一个用于输入网址的表单，举例如下：

＜form action=” abstractSRCfrompage.php3″ method=”post”＞
　　输入网址＜input type=text name=filename＞＜br＞
　　＜input type=submit name=submit value=”提交”＞
＜/form＞

　　输入正确的网址，提交后表单信息被送到abstractSRCfrompage.php3页面，由于表单本身就在该页面，所以相当于被送到自身页面，下面我们需要编写析取处理的PHP代码，紧接着表单代码段后写入如下代码：

＜?php
if ($filename!=”"){
$fp = fopen($filename, ”r”); file://若输入不为空，开启本地或者远程档案；
while ($buffer = fgets($fp, 1024)) {
$source .=$buffer; }
fclose($fp);
file://查找$source中是否有＜img …src=”…/…gif | jpg”＞这样的标记
if(eregi(”(＜img)+[^＜＞]+(src=”)+[^*”＜＞|]+(.)+((gif)|(jpg))+(”)”,$source)) {
echo ”找到图片标签:)＜br＞”;}
else{
echo ”未发现图片标签:(＜br＞”;}
file://拆分,第一次用标签,＜img …src=拆分,得到了以图形文件名开头的数组，
$splitres=split(”((”＞)|())+(＜img)+[^＜＞]+(src=”)”,$source);
echo ”找到: $imagenums-1个图片＜br＞分别为:＜br＞”;
for($i=1;$i＜sizeof($splitres);$i++){
file://二次拆分，用”拆分。因为文件名能含有”，得到的拆分数组的第一个元素就是路径+文件名了;
unset($imgname); // 再次使用前删除imgname变量；
$imgname=spliti(”"”,$splitres[$i]);//将析取的图片信息依次赋给imgname变量
echo ”$i=＞”.$imgname[0].”＜br＞”; file://输出析取的图片信息
}
}
?＞

　　该段程序的设计思路是：PHP程式判断是否输入了档案名称(网址URL或本机档案名)，若不为空则以只读方式打开该档案；接着使用函式fgets(fp,length)取得档案指标fp所指的行并传回该行内长度为length-1 的字串，上例中就是1024-1=1023；然后利用字串比对剖析函式ereg()查找$source中是否含有＜img …src=”…/…gif | jpg”＞这样的标记（关于该函式在上篇中有详细的介绍）；假如找到的话，则利用split()函式按一定的规则执行两次拆分，去掉标记中的＜img…src=字符和”字符，结果得到数组splitres，其中的每一个元素都是以图形路径+文件名开头的数组；用for循环在屏幕上输出每个数组的第一个元素值，即我们所需要的所有图形路径+文件名。

　　其中函式sizeof($splitres)返回个数；在for循环中，依次将数组splitres的每个元素（也是数组）赋给数组变量imgname，并输出imgname的第一个元素值（为找到的一个图形路径+文件名），当执行下次循环时，删除变量imgname，达到重复使用的目的。大家可以仔细研究其中的奥妙。

　　好了，写好后，将abstractSRCfrompage.php3存到你的服务器指定目录下，启动Apache服务器，在浏览器中打开它，随便输入一个存在的网页名称或是远程URL,看看效果如何。

　　如果有兴趣，你可以尝试析取HTML文档中的任意感兴趣的信息，如果稍加改装，做一个网站文本搜索引擎岂不更妙？

No Comments »
HTML/CSS23 Oct 2004 12:00 am
给你的网页加上两种以上的文字链接效果

很多人也许学会了怎样使链接文字随鼠标点击状态改变而改变的效果，这是css的使用效果，也许你只懂得设置一种状态，比如鼠标放在文字上方，文字变为红色。但这样是整个页面都是如此的统一效果，但有没办法在一个页面中有多种效果呢？比如页面中有两个文字链接，我们想其中一个当鼠标放上去的时候是红色，另一个则是黄色。答案是肯定的。如果手写代码，也只是几行而已。考虑到现在大多数人都在使用Dreamweaver，下面我们以在Dreamweaver4中谈谈如何做这种效果。

1：打开Dreamweaver，新建一文件，做两个带链接的文字。
2：SHIFT+F11，打开css styles控制面板，新建一use css selector，需要注意的是，你选择Use css selector再选择a:hover，并没有出现上图的效果，其实技巧就是在这里！我们手动把a:hove改成a.one:hove，也就是在a的后面加上一个点与名字（可任意英文，不能是数字）。设置好后点ok
3：在弹出的style definition for one.a:hover面板中设置你要的效果，这里我们选择字体的颜色为红色。设置完后点ok
4：重复第2、3步，第2步需要修改的地方就是把a.one:hover该回a:hover(就是直接选中a:hover就可。第3步需要改的就是字体的颜色了，我们设置为黄色。
5：现在预览还没有效果，我们还需要动点小手术，我们来看看设置完后的css styles控制面板，如下图，里面会出现个one
6：在页面中选中其中你想要当鼠标放上去的时候是红色的链接文字，再在css styles控制面板中用鼠标选中one
7：现在你的页面已经有两种效果了。
总结：按照以上逻辑，我们可以做出无限个文字链接效果，关键是在于a:hover a:active a:link a:visited的修改而已，前面介绍的只是a:hover，其实其他三个一样可以。只要参照第2步的设置就可以轻松的搞定。

No Comments »
HTML/CSS23 Oct 2004 12:00 am
关于字体的一些思考

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

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

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

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的间距。

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

每次写专栏的文章都有这种感觉，越写越不知道怎么结尾，:) 这可能就是随笔方式的弊病吧。请留言讨论，我这个就算是抛砖了。; 0

http://wwle.5d.cn/

我有一对翅膀，不是用来飞翔，而是用来煮汤。

评论Comments