📄 0033.htm
字号:
<html>
<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1 {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
<p align="center"><big><strong>动态HTML教程（二）</strong></big></p>
<div align="right">---《网猴》版权所有</div>
<p> 动态HMTL网页利用串接样式表布局，并利用Javascript控制网页元素。实际并不复杂或有很多的规定。我们所需要作的只是要给网页加入样式，能使其运动，并且在两种主要的浏览器中都能正确显示。
</font></p>
<p> 精通我们将用CSS-P布局网页，这是学习动态HTML的第1步。学习完定位元素之后，我们将接着学习编写使其动态显示的脚本。</font></p>
<p> 大多数用于设计和页面布局的程序或文件格式必须现生成box，它们的宽度和高度可以改变，它们还能使你控制将对象叠放在对象之上。CSS-P的原理与其相似，你先用HTML定义一个容器（为了便于具备跨平台应用的兼容性，你最好实用<DIV>或<SPAN>标签），设置其水平和垂直位置，然后设定哪个对象应该叠放在哪个对象之上。</font></p>
<p><font face="宋体">真的很简单，它能象大多数人（尤其那些利用表格定位和布局的人）希望的那样让HTML发挥功能。你只需以一种不同的思维角度来思考网页的布局，本教程将重点讲述一些基本的布局技巧明天我们将利用Javascript控制你的网页布局。</font></p>
</font>
<p> 动态HTML中大多数的内容都要用到<tt><DIV></tt>标签作为容器。(在
串接样式表和CSS定位的规范草案中规定可以将任何对象 定位，但Netscape的浏览器还不支持这项规定。所以你必须
用<tt><DIV></tt>标签作为类属容器），在容器内加入对象然后再
定位。</font></p>
<p><font face="宋体">我们先为本教程中的范例生成一个box。在本教程的范例中
我们将用网猴的一个编辑Tim作为范例中的主角：</font></p>
</font>
<p><font face="宋体" size="3"><html> <br>
<head> <br>
<title>dramatis personae</title><br>
<style> <br>
<!-- <br>
#tim {position: absolute;left: 10px; top: 10px; width: 140px; height:
91px; }<br>
--> <br>
</style> <br>
</head> <br>
<body> <br>
<div id="tim"></div> <br>
</body> <br>
</html></font></p>
<p><font face="宋体" size="3">这里是box的显示结果（为了辨认的方便，我给它加了一个
红色边框） </font></p>
<div id="timExample" align="center">
<dd><img src="dhtml/test1.jpg" id="timSpacer" width="128" height="128"> </dd>
</div>
<p align="center"> </p>
<p><font face="宋体" size="3">现在我们有了一个空的box，其ID名称为<tt>tim</tt>，其位置在距窗
口左边10个像素，距窗口顶部10个像素的位置。现在它还没
有体现出动态HTML的魅力，所以我们在这个box中填入Tim的
图片，并给它加一点说明：</font></p>
<p><font face="宋体" size="3"><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.</font></p>
<font size="3">
<p><font face="宋体">在3.2版本的HTML的网页（即不能支持动态HTML的网页）
中，你将会注意到文字一直流到屏幕边缘之外，而Tim的图
片朝左浮动。 </font></p>
<div id="timExample2" align="center">
<dd><img src="dhtml/test2.jpg" align="LEFT" width="68" height="68"><span class="dpDesc">Tim, the
hero. Webmonkey editor and resident banjo-picker. </span></dd>
</div>
<p align="center"> </p>
<p>实际上是<font face="宋体">它浮动到了本文所在的表格单元的左边。这是一个
重要的区别。当你将HTML放在一个已经被定位了的<tt><DIV></tt>之
内时，你可以把它看作是放在了一个表格单元中（或者象在
其他出版系统之内的制作方法那样）。</font></p>
<p><font face="宋体">在支持HTML 3.2以后的版本的网页中，你可以看到文字自动
回行：</font></p>
</font><div id="timExample3" align="center">
<dd><img src="dhtml/test2.jpg" align="LEFT" width="68" height="68"><span class="dpDesc">Tim, the
hero. Webmonkey editor and resident banjo-picker. </span></dd>
</div>
<p align="center"> </p>
<p><font face="宋体" size="3">现在这个<tt><DIV></tt>标签里已经填充了内容，让我们利用CSS-P
的<tt>LEFT</tt>和<tt>TOP</tt>选项技将其定位。</font></p>
<p><font face="宋体" size="3"><html> <br>
<head> <br>
<title>dramatis personae</title> <br>
<style> <br>
<!-- <br>
#tim {<br>
position: absolute;<br>
left: 300px; <br>
top: 10px;
<br>
width: 140px;
<br>
height: 91px;
<br>
} <br>
--> <br>
</style> <br>
</head> <br>
<body> <br>
<div id="tim"> <br>
</div> <br>
</body> <br>
</html> </font></p>
<p><font face="宋体" size="3">显示结果: </font></p>
<div id="timExample3" align="center">
<dd><img src="dhtml/test2.jpg" align="LEFT" width="68" height="68"><span class="dpDesc">Tim, the
hero. Webmonkey editor and resident banjo-picker. </span></dd>
</div>
<p><font face="宋体">你可能会注意到在本例中我使用了相对定位。在相对定位和绝对定位中有一个很微妙但确确实实的区别。
</font></p>
<p> 当你将一个对象用绝对定位指令定位时，你实际将其从你的HTML文件流中抽了出来，将其直接根据网页的左上角的位置进行定位。这种情况下各个对象有可能互相重叠在一起。
</font></p>
<p><font face="宋体">相对定位并不指根据百分比值或其他某个元素的位置来定位这个元素的位置。它实际占据的就是它在这个HTML文件中的位置，它的定位起点基于HTML页所在的位置，这里是一个例子：</font>
<ul>
<tt><p>Tim, the hero. <span class="absPos">Webmonkey</span> editor and resident
banjo-picker.</p>
<p>Tim, the hero. <span class="relPos">Webmonkey</span> editor and resident banjo-picker.</p>
</tt>
</ul>
<p><font face="宋体" size="3">这两个句子中，单词<tt>Webmonkey</tt>都定位在距左边200像素的位置。第1个句子用的是绝对定位，第2个用的是相对定位。注意相对定位的句子中空出了相当于单词<tt>Webmonkey</tt>长度的空间，而绝对定位了的句子中没有这个空间，如果我给两个句子都加一个"top"参数值，则你会看到绝对定位了的句子将飘在文章的顶部，而相对定位的句子则就在它所在的句子的位置之下：</font>
<ul>
<tt><p>Tim, the hero. <span class="relPos2">Webmonkey</span> editor and resident
banjo-picker.</p>
</tt>
</ul>
<font size="3">
<p><font face="宋体">现在我们已经了解了两种定位的不同。我们作一个小练习。我们用CSS-P作一个网页。试着做网页，然后我们将制作更复杂的布局（提示：你可以用这个屏幕快照中的图象作为网页背景图象来帮助你定位。注意将字体采用<a
href="javascript:if(confirm('../../www.microsoft.com/typography/web/fonts/comicsns/default.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server@'))window.location='../../www.microsoft.com/typography/web/fonts/comicsns/default.htm'" tppabs="http://www.microsoft.com/typography/web/fonts/comicsns/default.htm">Comic Sans MS</a>）。</font></p>
</font>
<p><font face="宋体" size="3">你可以注意到上面的那个布局用表格就能很轻易地做到。但是串接样式表比表格有一项独特的优势：分层。</font></p>
<font size="3">
<p><font face="宋体">你肯定注意到你无法用表格将几幅图片或文字叠放在一起。一般情况下，如果人们希望实现这种效果只有制作一幅位图，在图片中制作出文字或图象叠放在一起的效果，然后将图片放在网页中。</font></p>
<p> 而利用动态HTML，则可以利用分层顺序将叠放显示各个对象，例：</font></p>
</font><div id="container2"
style="position: absolute; left:400; width:146; height:145; background-color:purple; border: 1px solid purple; layer-background-color: purple"
class="example" align="center">
<p>Here is Aaron in front of a desk. </p>
<div id="desk2" style="position:absolute; left:10px; top:59px; width:42px; height:8px;">
<dd><img src="dhtml/test.jpg" width="120" height="120"> </dd>
</div><div id="aaron2"
style="position:absolute; left:8px; top:31px; width:79px; height:73px;">
<dd><img src="dhtml/test2.jpg" width="68" height="68"> </dd>
</div></div><div id="container1"
style="position: relative; left:20; width:146; height:145; background-color: blue; border: 1px solid blue; layer-background-color: blue"
class="example" align="center">
<p>Here is Aaron behind a desk. </p>
<div id="aaron1" style="position:absolute; left:8px; top:31px; width:79px; height:73px;">
<dd><img src="dhtml/test2.jpg" width="68" height="68"> </dd>
</div><div id="desk1"
style="position:absolute; left:10px; top:59px; width:42px; height:8px;">
<dd><img src="dhtml/test.jpg" width="120" height="120"> </dd>
</div></div>
<ul>
<font size="3"><p> </p>
<p><font face="宋体">在这个例子中，Aaron在他的桌子后面，Aaron的图片首先出现在源代码中：</font>
<ul>
<pre> <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></font></pre>
</ul>
<p> 但是如果我们想让Aaron站在桌子前面，我们可以这样写HTML代码：</font>
</font><ul>
<pre class="dhtmlExamp">
<font face="宋体" size="3"><div id="desk">
<img src="http://www.webmonkey.com.cn/
dynamic_html/tutor/extraDesk.gif">
</div>
<div id="aaron">
<img src="</font><font
size="3"><font size="2" face="宋体">http://www.webmonkey.com.cn/
dynamic_html/tutor/</font><font
face="宋体" size="3">aaron.gif">
</div></font></font></pre>
</ul>
<font size="3"><p><font face="宋体">这种类型的分层在HTML暗示编写。所以搭建动态HTML网页的方法之一就是将各个对象按照显示的前后层次顺序排列排在显示底层的对象最先列出，而排在显示最上层的对象在源代码顺序的最后列出。但是这种方式不一定不出问题。很多时候象在源代码中的顺序和它最后的显示顺序必须没有任何关系。而此时就需要用到z-index
CSS属性。</font></p>
<p><font face="宋体">这里是重新制作后的例子。这次的HTML标识和一起一样，但是对象采用了明示的z-index。</font></p>
<div id="container4"
style="position:absolute; left:400; width:168; height:145; background-color: red; border: 1px solid red; layer-background-color: red; font-size: 10px"
class="example"><p>Aaron has a z-index of 2. The desk has a z-index of 1. </p>
<div id="aaron4"
style="position:absolute; left:8px; top:31px; width:79px; height:73px;; z-index: 2">
<dd><img src="dhtml/test2.jpg" width="68" height="68"> </dd>
</div><div id="desk4"
style="position:absolute; left:10px; top:59px; width:42px; height:8px;; z-index: 1">
<dd><img src="dhtml/test.jpg" width="120" height="120"> </dd>
</div></div><div id="container3"
style="position:relative; left:20; width:146; height:145; background-color: blue; border: 1px solid blue; layer-background-color: blue; font-size: 10px"
class="example"><p>Aaron and the desk have an implied z-index. </p>
<div id="aaron3" style="position:absolute; left:8px; top:31px; width:79px; height:73px">
<dd><img src="dhtml/test2.jpg" width="68" height="68"> </dd>
</div><div id="desk3"
style="position:absolute; left:10px; top:59px; width:42px; height:8px">
<dd><img src="dhtml/test.jpg" width="120" height="120"> </dd>
</div></div><p> </p>
<p><font face="宋体">两个例子的HTML都是相同的，但CSS不同。</font> <ul>
<p><style type="text/css"> #aaron {position:absolute;
left: 8px; top: 31px; width: 79px; height: 73px; z-index: 2 } </style> </p>
</font>
</ul>
<p><font face="宋体">z-index可以是一个正值或一个负值（带负值的元素将位于母体元素的下面）
，它所造成的显示效果为：如果一个对象的z-index比另一个元素大，则z-index为<tt>1</tt>时的视觉效果和Z-index为2时的视觉效果的区别相当于<tt>1</tt>和<tt>1000</tt>Z之间的区别。</font></p>
<p><font face="宋体" size="3">这些定位的基本知识是你搭建跨平台动态HTML的第1步。明天我们将学习到动态HTML的精华之处以及目前所受的局限。</font></p>
<font size="3">
<p><font face="宋体">明天我们将陶醉在JavaScript的神奇魅力中。 </font></p>
</font>
</table>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -