动态HTML教程

[(第1章动态HTML教程)]动态HTML教程作者：佚名1.1第一天经过微软和Netscape关于浏览器大战新闻发布会以及种种传闻和无休止的辩论之后，你从新发布的这两种4.0版的浏览器中得到了什么呢？只是一个占据了你的硬盘40-MB空间的庞大怪物？还是可以推动媒体发展的令人兴奋倍受鼓舞的充满活力的新生事物？除了一些有能力制定4.0版本规格的大型站点之外，实际上动态HTML还没有真正广泛应用于互联网。如果你不了解动态HTML的含义，你应该了解dHTML只能应用于最新版的浏览器，即InternetExplorer4和NetscapeNavigator4。这两种浏览器对于动态HTML的支持并不相同，所以目前缺少一种编写dHMTL网页的通用方式。这就是动态HTML不能在互联网中得到广泛应用的原因。网站开发者为了使自己的网页让尽量多的人看到，宁可使网页的编写臃肿不堪也不敢使用动态HTML使自己的网页具备更高的效率。因为用动态HTML编写的网页在这两种广泛使用的浏览器中显示的效果有很大的区别。我们将学习使用串接样式表编写网页并利用Javascript给网页加入动画。如果某些用户认为在网页中加入满天飞的动画实在是无益的劳动，那么我还要讲授一些只有动态HTML才能做到的非常实用的动态用户界面。我们将充分结合我们大脑两个半球的优势编写动态的事件驱动的动画，这种动画可以根据用户的指令进行变化，如果这些还不足够吸引你，我们还将应用结构、数组循环、对象引用以及更多的串接样式表使你拥有编写可以令任何梦想都变成现实的结构化网页编程能力。1.2你需配备的工具坦白的地说，动态HMTL不是为初学者准备的教程。要引用动态HTML，你必须熟悉3中不同的技术：HTML、样式表和JavaScript。动态HTML网页实际上就是这3种技术的集成。所以第1天的课程只是一堂复习课。你的作业就是要重温以前所了解的关于这3种技术的知识。不是很难，但你至少要掌握这3种技术的语法。对于JavaScript,建议你先阅读Javascript教程。你应该特别注意学习一下第2日教程中关于变量的知识，第3日教程中文件对象模块（DOM）的知识，第4日教程中的循环和数组，以及在表单中通过引用来控制对象的技巧。关于串接样式表的内容，你可以阅读5日精通样式表教程熟悉一下样式表的语法。你还应该阅读CSS定位一文，学习如何利用样式表布局页面。至于HTML，你应该熟悉div和span标签。我并不希望你阅读和记住所有这些内容，你只需浏览一下，知道所需要的知识在什么位置可以找到就可以了。1.3这五天的学习计划这里是本教程所要讲授的内容：第2日：利用CSS定位生成在两种浏览器都可以浏览的网页布局，以及如何将文字和图象叠放在彼此之上。第3日利用你的布局并制作动画效果。第4日用动态HTML建立用户界面，以及如何隐藏和显示界面的元素。第5日：更深入地了解动态HTML以及常见的问题。明天见。2.1第二天在Nadav的DHTML揭密一文中所述，动态HMTL网页利用串接样式表布局，并利用Javascript控制网页元素。实际并不复杂或有很多的规定。我们所需要作的只是要给网页加入样式，能使其运动，并且在两种主要的浏览器中都能正确显示。精通我们将用CSS-P布局网页，这是学习动态HTML的第1步。学习完定位元素之后，我们将接着学习编写使其动态显示的脚本。大多数用于设计和页面布局的程序或文件格式必须现生成box，它们的宽度和高度可以改变，它们还能使你控制将对象叠放在对象之上。CSS-P的原理与其相似，你先用HTML定义一个容器（为了便于具备跨平台应用的兼容性，你最好实用DIV或SPAN标签），设置其水平和垂直位置，然后设定哪个对象应该叠放在哪个对象之上。真的很简单，它能象大多数人（尤其那些利用表格定位和布局的人）希望的那样让HTML发挥功能。你只需以一种不同的思维角度来思考网页的布局，本教程将重点讲述一些基本的布局技巧明天我们将利用Javascript控制你的网页布局。2.2深入动态HTML中大多数的内容都要用到DIV标签作为容器。(在串接样式表和CSS定位的规范草案中规定可以将任何对象定位，但Netscape的浏览器还不支持这项规定。所以你必须用DIV标签作为类属容器），在容器内加入对象然后再定位。我们先为本教程中的范例生成一个box。htmlheadtitledramatispersonae/titlestyle!--#tim{position:absolute;left:10px;top:10px;width:140px;height:91px;}--/style/headbodydivid=tim/div/body/html这里是box的显示结果（为了辨认的方便，我给它加了一个红色边框）现在我们有了一个空的box，其ID名称为tim，其位置在距窗口左边10个像素，距窗口顶部10个像素的位置。现在它还没有体现出动态HTML的魅力，所以我们在这个box中填入Tim的图片，并给它加一点说明：Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.在3.2版本的HTML的网页（即不能支持动态HTML的网页）中，你将会注意到文字一直流到屏幕边缘之外，而Tim的图片朝左浮动。Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.实际上是它浮动到了本文所在的表格单元的左边。这是一个重要的区别。当你将HTML放在一个已经被定位了的DIV之内时，你可以把它看作是放在了一个表格单元中（或者象在其他出版系统之内的制作方法那样）。在支持HTML3.2以后的版本的网页中，你可以看到文字自动回行：Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.现在这个DIV标签里已经填充了内容，让我们利用CSS-P的LEFT和TOP选项技将其定位。htmlheadtitledramatispersonae/titlestyle!--#tim{position:absolute;left:300px;top:10px;width:140px;height:91px;}--/style/headbodydivid=tim/div/body/html显示结果:Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.2.3相对和绝对定位你可能会注意到在本例中我使用了相对定位。在相对定位和绝对定位中有一个很微妙但确确实实的区别。当你将一个对象用绝对定位指令定位时，你实际将其从你的HTML文件流中抽了出来，将其直接根据网页的左上角的位置进行定位。这种情况下各个对象有可能互相重叠在一起。相对定位并不指根据百分比值或其他某个元素的位置来定位这个元素的位置。它实际占据的就是它在这个HTML文件中的位置，它的定位起点基于HTML页所在的位置，这里是一个例子：Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.这两个句子中，单词Webmonkey都定位在距左边200像素的位置。第1个句子用的是绝对定位，第2个用的是相对定位。注意相对定位的句子中空出了相当于单词Webmonkey长度的空间，而绝对定位了的句子中没有这个空间，如果我给两个句子都加一个top参数值，则你会看到绝对定位了的句子将飘在文章的顶部，而相对定位的句子则就在它所在的句子的位置之下：Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.现在我们已经了解了两种定位的不同。我们作一个小练习。我们用CSS-P作一个网页。这里是该网页的屏幕快照。试着做出这个网页，然后我们将制作更复杂的布局（提示：你可以用这个屏幕快照中的图象作为网页背景图象来帮助你定位。注意将字体采用ComicSansMS）。2.4学习分层技术你可以注意到上面的那个布局用表格就能很轻易地做到。但是串接样式表比表格有一项独特的优势：分层。你肯定注意到你无法用表格将几幅图片或文字叠放在一起。一般情况下，如果人们希望实现这种效果只有制作一幅位图，在图片中制作出文字或图象叠放在一起的效果，然后将图片放在网页中。而利用动态HTML，则可以利用分层顺序将叠放显示各个对象，例：HereisAaroninfrontofadesk.HereisAaronbehindadesk.在这个例子中，Aaron在他的桌子后面，Aaron的图片首先出现在源代码中：divid=aaronimgsrc==deskimgsrc=但是如果我们想让Aaron站在桌子前面，我们可以这样写HTML代码：divid=deskimgsrc==aaronimgsrc=这种类型的分层在HTML暗示编写。所以搭建动态HTML网页的方法之一就是将各个对象按照显示的前后层次顺序排列排在显示底层的对象最先列出，而排在显示最上层的对象在源代码顺序的最后列出。但是这种方式不一定不出问题。很多时候象在源代码中的顺序和它最后的显示顺序必须没有任何关系。而此时就需要用到z-indexCSS属性。这里是重新制作后的例子。这次的HTML标识和一起一样，但是对象采用了明示的z-index。Aaronhasaz-indexof2.Thedeskhasaz-indexof1.Aaronandthedeskhaveanimpliedz-index.两个例子的HTML都是相同的，但CSS不同。styletype=text/css#aaron{position:absolute;left:8px;top:31px;width:79px;height:73px;z-index:2}/stylez-index可以是一个正值或一个负值（带负值的元素将位于母体元素的下面），它所造成的显示效果为：如果一个对象的z-index比另一个元素大，则z-index为1时的视觉效果和Z-index为2时的视觉效果的区别相当于1和1000Z之间的区别。2.5家庭作业这些定位的基本知识是你搭建跨平台动态HTML的第1步。明天我们将学习到动态HTML的精华之处以及目前所受的局限。但是现在，让我们作一个家庭作业。这里是act1,scene1。下载这些文件，然后将其按照屏幕快照的布局安排布局。明天我们还要将屏幕中的图象制作出动画效果。所以你最好先把今天的作业完成了，因为明天的课程中我们还要它。明天我们将陶醉在JavaScript的神奇魅力中。3.1第三天今天我们将开始学习动态HTML最精彩的部分：动态HTML编程。HTM之所以成功的原因之一在于它提供了在互联网上展现网页的统一方式。一旦你标识了一个网页，它在任何地方都可以看到。Javascript也是如此。及时它的版本会有很多种，但它的核心和语法是统一的，它在支持Javascript的所有浏览器中都可以应用。CSS也具有统一的语法。在所有的浏览器中它的显示结果也应该是一致的。所以它能帮助你生成跨平台风格一致的动态网页。但是，还有一些小问题。在1997中期时，Netscape和Microsoft都推出了自己的动态HTML浏览器，但那时没有一种规范编程语言同网页元素之间的交流的统一规定。但是在那时已经有了JavaScript同网页中的图象、链接和表单元素进行交流的规范。然而这两家公司对于如何控制网页元素存在不同的见解。Netscape对JavaScript加入了一系列