學會動態HTML

Home Home

引用 | 編輯 t0306894
2005-02-10 13:33

樓主

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>

</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>

</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之間的區別。