《动态html教程》word版

《《动态html教程》word版》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、[(第1章动态HTML教程)]动态HTML教程作者：佚名1.1第一天经过微软和Netscape关于浏览器大战新闻发布会以及种种传闻和无休止的辩论之后，你从新发布的这两种4.0版的浏览器中得到了什么呢？只是一个占据了你的硬盘40-MB空间的庞大怪物？还是可以推动媒体发展的令人兴奋倍受鼓舞的充满活力的新生事物？除了一些有能力制定4.0版本规格的大型站点之外，实际上动态HTML还没有真正广泛应用于互联网。如果你不了解动态HTML的含义，你应该了解dHTML只能应用于最新版的浏览器，即InternetExplorer4和NetscapeN

2、avigator4。这两种浏览器对于动态HTML的支持并不相同，所以目前缺少一种编写dHMTL网页的通用方式。这就是动态HTML不能在互联网中得到广泛应用的原因。网站开发者为了使自己的网页让尽量多的人看到，宁可使网页的编写臃肿不堪也不敢使用动态HTML使自己的网页具备更高的效率。因为用动态HTML编写的网页在这两种广泛使用的浏览器中显示的效果有很大的区别。我们将学习使用串接样式表编写网页并利用Javascript给网页加入动画。如果某些用户认为在网页中加入满天飞的动画实在是无益的劳动，那么我还要讲授一些只有动态HTML才能做到的非

3、常实用的动态用户界面。我们将充分结合我们大脑两个半球的优势编写动态的事件驱动的动画，这种动画可以根据用户的指令进行变化，如果这些还不足够吸引你，我们还将应用结构、数组循环、对象引用以及更多的串接样式表使你拥有编写可以令任何梦想都变成现实的结构化网页编程能力。1.2你需配备的工具坦白的地说，动态HMTL不是为初学者准备的教程。要引用动态HTML，你必须熟悉3中不同的技术：HTML、样式表和JavaScript。动态HTML网页实际上就是这3种技术的集成。所以第1天的课程只是一堂复习课。你的作业就是要重温以前所了解的关于这3种技术的知

4、识。不是很难，但你至少要掌握这3种技术的语法。对于JavaScript,建议你先阅读Javascript教程。你应该特别注意学习一下第2日教程中关于变量的知识，第3日教程中文件对象模块（DOM）的知识，第4日教程中的循环和数组，以及在表单中通过引用来控制对象的技巧。关于串接样式表的内容，你可以阅读5日精通样式表教程熟悉一下样式表的语法。你还应该阅读CSS定位一文，学习如何利用样式表布局页面。至于HTML，你应该熟悉div和span标签。我并不希望你阅读和记住所有这些内容，你只需浏览一下，知道所需要的知识在什么位置可以找到就可以了。

5、1.3这五天的学习计划这里是本教程所要讲授的内容：第2日：利用CSS定位生成在两种浏览器都可以浏览的网页布局，以及如何将文字和图象叠放在彼此之上。第3日利用你的布局并制作动画效果。第4日用动态HTML建立用户界面，以及如何隐藏和显示界面的元素。第5日：更深入地了解动态HTML以及常见的问题。明天见。2.1第二天在Nadav的DHTML揭密一文中所述，动态HMTL网页利用串接样式表布局，并利用Javascript控制网页元素。实际并不复杂或有很多的规定。我们所需要作的只是要给网页加入样式，能使其运动，并且在两种主要的浏览器中都能正确

6、显示。精通我们将用CSS-P布局网页，这是学习动态HTML的第1步。学习完定位元素之后，我们将接着学习编写使其动态显示的脚本。大多数用于设计和页面布局的程序或文件格式必须现生成box，它们的宽度和高度可以改变，它们还能使你控制将对象叠放在对象之上。CSS-P的原理与其相似，你先用HTML定义一个容器（为了便于具备跨平台应用的兼容性，你最好实用DIV或SPAN标签），设置其水平和垂直位置，然后设定哪个对象应该叠放在哪个对象之上。真的很简单，它能象大多数人（尤其那些利用表格定位和布局的人）希望的那样让HTML发挥功能。你只需以一种不同

7、的思维角度来思考网页的布局，本教程将重点讲述一些基本的布局技巧明天我们将利用Javascript控制你的网页布局。2.2深入动态HTML中大多数的内容都要用到DIV标签作为容器。(在串接样式表和CSS定位的规范草案中规定可以将任何对象定位，但Netscape的浏览器还不支持这项规定。所以你必须用DIV标签作为类属容器），在容器内加入对象然后再定位。我们先为本教程中的范例生成一个box。htmlheadtitledramatispersonae/titlestyle!--#tim{position:absolute;left:10p

8、x;top:10px;width:140px;height:91px;}--/style/headbodydivid=tim/div/body/html这里是box的显示结果（为了辨认的方便，我给它加了一个红色边框）现在我们有了一个空的box，其I