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。
<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的图片，并给它加一点说明：
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.
2.3 相对和绝对定位
你可能会注意到在本例中我使用了相对定位。在相对定位和绝对定位中有一个很微妙但确确实实的区别。
当你将一个物件用绝对定位指令定位时，你实际将其从你的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）。
2.4 学习分层技术
你可以注意到上面的那个布局用表格就能很轻易地做到。但是串接样式表比表格有一项独特的优势：分层。
你肯定注意到你无法用表格将几幅图片或文字叠放在一起。一般情况下，如果人们希望实现这种效果只有制作一幅点阵图，在图片中制作出文字或图像叠放在一起的效果，然后将图片放在网页中。
而利用动态HTML，则可以利用分层顺序将叠放显示各个物件，例：
Here is Aaron in front of a desk.
Here is Aaron behind a desk.
在这个例子中，Aaron在他的桌子后面，Aaron的图片
首先出现在源代码中：
<div id="aaron">
<img src="
";>
</div>
<div id="desk">
<img src="
";>
</div>
但是如果我们想让Aaron站在桌子前面，我们可以这样写HTML代码：
<div id="desk">
<img src="
";>
</div>
<div id="aaron">
<img src="
";>
</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之间的区别。
