DIV CSS 佈局教程網

　Dreamweaver在編輯動態HTML方面別具特色，程序利用層疊樣式表和JavaSript腳本語言進行編輯。一般的用戶不必關心具體的實現方法或具體的代碼，而是像進行影像編輯一樣一幀一幀的設計，所以使用的時候有點不像編寫網頁而是在進行多媒體設計。如果你用過Adobe Premiere 的話，就會很快熟悉這種編輯方法。再具體的實現上分為行為（Behavior）和時線(timeline)行為用來對外界的情況進行響應，產生交互式的操作，這些響應是基於HTML和javascript語言並與具體的浏覽器有關。而時線則根據頁面元素的位置、大小、內容的變化來實現。其中引入層是實現網頁精美動畫的關鍵。
　　層是建立動態HTML的基礎。我們可以在insert菜單或直接在工具條中找到層工具，就是這個小圖標。選中後就可以在網頁上劃定一個矩形區域表示建立一個新的層，選中一個層後這個層邊界用細框線表示出來，左上角有一個小的標記。我們可以在這個劃定的矩形區域內編輯任何內容，就像編輯一般的網頁一樣。我們看下面這個例子，圖Ａ一先後建立了三個層，第一層是包含一副風景畫的圖層，第二個層是包含汽車的層，

　　　　

    最上面的第三層是海鷗。其中第三層是一張GIF89A的圖片，所以我們可以通過第三層看到下面的前兩個層。層的大小可以是任意的，但不能小於層中的元素。也就是說我們不能通過改變層的大小來改變層中元素的大小，這個例子中要改變第三層中海鷗的大小只能通過對海鷗這幅圖的屬性來改變。在上一期介紹插入圖片的段落中有相關內容。當我們選中一個層進行操作時（注意是對層的內容進行編輯，而不是對層本身），這時該層的邊框由灰色變為黑色，我們就可以在這個層中插入 或修改各種元素。並且選中以後活動層的左上角出現一個小方塊的標志。上面的例子是單擊這個小方塊後的情況，這時層的邊界出現八個小方塊點，我們可以通過用鼠標拉動這些點來改變層的大小。為了對層進行更好的管理還需調出層控制面板（選window中的 layer命令）。圖Ａ二是針對上一個例子的層面板。面板上標出了三個層的情況。層面板一共有三個選項供選擇，有眼睛標記的選項是顯示或隱藏層。當點最上面的眼睛標記時可以對所有層進行顯示和隱藏操作。在下面還有三個眼睛標記，上面的兩個是睜開的眼睛，表示本層可見，下面一個是一個閉合的眼睛，表示本層，也就是層一是隱藏的，為了更好地說明層面板的使用方法，層面板沒有和例圖完全對應，例圖中的第一層是顯示的。我們可以為每個層指定名稱，缺省時名稱按層建立的先後命名為layer1、layer2……層面板中Z項指的是Z－order，層的順序，Z值越小表明該層的位置越靠下。還有另一種簡單的方法來改變層的順序是：點住要改變層次順序的層的名字拖動到適當的位置，就像Photoshop 中的層管理一樣。