本章學習目標創建和使用層10.1轉換表格和層10.2使用時間軸10.310.1.1創建層

插入層時，Dreamweaver將顯示層的邊框，默認情況下，在將指針移到塊上時它還會高亮顯示塊。通過在“查看”→“可視化助理”菜單中禁用“層外框”和“CSS布局外框”，可以啟用層邊框。在設計時，還可以啟用CSS布局背景和CSS布局框模型，作為可視化助理。

創建層后，只需將插入點放置于該層中，然后像在頁面中添加內容一樣，就可以將內容添加到層中。連續繪制一個或多個層，步驟如下：在“插入”欄的“布局”類別中單擊“繪制層”按鈕。在“文檔”窗口的“設計”視圖中，執行下列操作之一：

（1）拖動以繪制一個層。（2）通過按住Ctrl鍵并拖動(Windows)或通過按住Command鍵并拖動(Macintosh)來連續繪制多個層。只要不松開Ctrl或Command鍵，就可以繼續繪制新的層。注意：如果要隱藏層邊框，可選擇“查看”→“可視化助理”，然后取消選擇“層外框”和“CSS布局外框”。10.1.2嵌套層繪制嵌套層時，步驟如下：1.在“插入”欄的“布局”類別中單擊“繪制層”按鈕。2.在“文檔”窗口的“設計”視圖中，拖動以在現有層中繪制層：如果已經在層首選參數中關閉了”嵌套”功能，請通過按住Alt鍵并拖動(Windows)或按住Option鍵并拖動(Macintosh)在現有層中嵌套一個層。插入嵌套層，步驟如下：1.在“文檔”窗口的“設計”視圖中將插入點放置在一個現有層中，然后選擇“插入”→“層”。2.若要使用“層”面板將現有層嵌套在另一個層中，執行以下操作：3.選擇“窗口”→“層”，打開“層”面板。4.在“層”面板中選擇一個層，然后通過按住Ctrl鍵并拖動(Windows)或按住Command鍵并拖動(Macintosh)將層移動到”層”面板上的目標層。5.當目標層的名稱突出顯示時，松開鼠標按鈕。10.1.3層標簽具體操作如下：在“文檔”窗口中，將插入點放置在要顯示.div標簽的位置。1．選擇“插入”→“布局對象”→“Div標簽”。在“插入”欄的“布局”類別中單擊“Div標簽”按鈕。2．出現“插入Div標簽”對話框，3．完成對話框。4．單擊”確定”。.div標簽以一個框的形式出現文檔中，并帶有占位符文本。將指針移到該框的邊緣上時，Dreamweaver會高亮顯示該框。如果已經給.div標簽分配了絕對位置，它就可充當一個Dreamweaver層。10.1.4選擇層要在“層”面板中選擇一個層，在“層”面板（“窗口”→“層”）中，單擊該層的名稱。若要在“文檔”窗口中選擇一個層，可執行以下操作之一：單擊一個層的選擇柄。如果選擇柄不可見，請在該層中的任意位置單擊以顯示該選項柄。單擊一個層的邊框。在一個層中按住Ctrl-Shift鍵并單擊(Windows)或按住Command-Shift鍵并單擊(Macintosh)。在層內單擊并按Ctrl+A(Windows)或Command+A(Macintosh)以選擇層的內容。再次按Ctrl+A或Command+A以選擇層。在層內單擊并在標簽選擇器中選擇層的標簽。

注意：選擇多個層時，可以在“層”面板（“窗口”→“層”）中，請按住Shift鍵并單擊兩個或更多的層名稱。在“文檔”窗口中，在兩個或更多個層的邊框內（或邊框上）按住Shift鍵并單擊。若要查看和設置層屬性，具體操作如下：選擇一個層。在”屬性”檢查器（“窗口”→“屬性”）中，單擊右下角的展開箭頭（如果它尚未展開）以查看所有屬性，如圖所示。

根據需要設置屬性來更改層的屬性。當選擇兩個或更多個層時，層“屬性”檢查器會顯示文本屬性以及全部層屬性的一部分，從而允許同時修改多個層。10.1.5設置層屬性在HTML代碼中，層的堆疊順序或z軸確定層在瀏覽器中的繪制順序。層的z軸值越高，該層的堆疊順序就越高。步驟如下：1．選擇“窗口”→“層”，打開“層”面板。2．將層向上或向下拖至所需的堆疊順序。移動層時會出現一條線，它指示該層將出現的位置。當放置線出現在層疊順序中的所需位置時，請松開鼠標按鈕。如果用”屬性”檢查器更改層的層疊順序，則選擇“窗口”→“層”，打開“層”面板以查看當前堆疊順序。10.1.6更改層的層疊屬性在“層”面板或“文檔”窗口中選擇一個層。在層的“屬性”檢查器（“窗口”→“屬性”）中，在z軸文本框中鍵入一個編號。

鍵入一個較大的數字可將該層在層疊順序中上移。鍵入一個較小的數字可將該層在層疊順序中下移。10.1.6更改層的層疊屬性更改層可見性，具體操作如下：1．選擇“窗口”→“層”，打開“層”面板。2．在層的眼形圖標列內單擊可以更改其可見性。眼睛睜開表示該層是可見的。眼睛閉合表示該層是不可見的。如果沒有眼形圖標，該層通常會繼承其父級的可見性。（如果層沒有嵌套，父級就是文檔正文，而文檔正文始終是可見的。）另外，如果未指定可見性，則不會顯示眼形圖標（這在“屬性”檢查器中表示為“默認”可見性）。10.1.7更改層可見性一些

Web設計人員可能不喜歡使用表格或“布局”模式來創建自己的布局，而是喜歡通過層來進行設計。Dreamweaver使您可以使用層來創建自己的布局，然后將它們轉換為表格。

注意：在模板文檔或已應用模板的文檔中，不能將層轉換為表格或將表格轉換為層。相反，應該在非模板文檔中創建布局，然后在將該文檔另存為模板之前進行轉換。

在轉換為表格之前，請確保層沒有重疊。將層轉換為表格，具體操作如下：1.選擇“修改”→“轉換”→“層到表格”。即可顯示“轉換層為表格”對話框10.2將層轉換成表格10.2將層轉換成表格2.選擇所需的選項。3.單擊“確定”。注意：從層轉換為表格可能會生成包含大量空單元格的表。10.3使用時間軸時間軸通過隨時間的變化改變層的位置、大小、可見性和疊放順序來創建動畫。這就是動態HTML的表達方式，也是Dreamweaver強于其它網頁編輯器的地方。時間軸只能移動層，因此想讓圖象或文本對象移動，就須先創建層，然后在層中插入對象。時間軸描述了層和圖像的屬性隨時間變化的情況。選擇“窗口”→“時間軸”，打開時間軸控制器，如圖所示。在時間軸控制器中：播放頭（Playbackhead）指示在網頁中顯示的是哪一幀。動畫通道（Animationchannels）顯示動畫層的地方。動畫條（Animationbars）即圖中的Layer1，可顯示每個對象的持續時間。一行可以包含代表不同對象的多個動畫條。關鍵幀（Keyframes）動畫條中的小圓圈是關鍵幀。行為通道（Behaviorchannel）在時間軸中執行行為的通道。回放（Rewind）可將播放頭移到時間軸的初始幀。后退（Back）將播放頭往左移動一幀。播放（Play）將播放頭往右移動一幀。單擊Play按鈕并按住鼠標不放，則時間軸向前連續播放。自動播放（Autoplay）當網頁載入到瀏覽器時使當前時間軸自動播放。循環（Loop）當網頁載入到瀏覽器時使當前時間軸無限循環播放。10.3使用時間軸10.3使用時間軸由于時間軸只能移動層，因此如果要移動圖像或文本，則要創建一個層，然后在該層中插入圖像、文本或其它類型的內容。下面就通過一個實例來認識時間軸動畫的創建。本章小