导航: 好喜爱学习网 >> 网站制作 >> 网页制作技巧 >> 动态HTML教程(二)
相关文章
最新文章
文章内容
动态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>

     

[1] [2] [3] 

E-MAIL:309076721@163.com
本站为非营利性质个人网站,建站只为个人爱好与学习,内容大多为电脑技术教程;
网站内容来源于互联网收集整理,禁止用于非法途径,如发现本网站上有侵权的文章请联系我们,我们会尽快删除;
本站不对站点内容准确性、完整性和真实性作任何承诺,由此产生的后果本站不承担任何责任,对以上引起的一切法律纠纷本站无权利承担。