Dreamweaver-CS6網頁設計與制作標準課件

第8章使用層本章簡介：如果用戶想在網頁上實現多個元素重疊的效果，可以使用層。層是網頁中的一個區(qū)域，并且游離在文檔之上。利用層可精確定位和重疊網頁元素。通過設置不同層的顯示或隱藏，還可實現特殊的效果。因此，在掌握層技術之后，就可以給網頁制作提供強大的頁面控制能力。課堂學習目標熟練掌握層的基本操作方法掌握應用層設計表格的技巧8.1層的基本操作課堂案例——聯創(chuàng)網絡技術網頁創(chuàng)建層選擇層設置層的默認屬性AP元素面板更改層的堆疊順序更改層的可見性調整層的大小移動層對齊層層靠齊到網格8.1.1課堂案例——聯創(chuàng)網絡技術網頁使用繪制“APDiv”按鈕繪制層；使用“圖像”按鈕，插入圖像。效果圖8.1.2創(chuàng)建層創(chuàng)建層若想利用層來定位網頁元素，先要創(chuàng)建層，再根據需要在層內插入其他表單元素。有時為了布局，還可以顯示或隱藏層邊框。創(chuàng)建層有以下4種方法。1、單擊“插入”面板“布局”選項卡中的“繪制APDiv”按鈕。此時，在文檔窗口中，鼠標指針呈“+”形。按住鼠標左鍵拖曳，畫出一個矩形層。2、將“插入”面板“布局”選項卡中的“繪制APDiv”按鈕拖曳到文檔窗口中，松開鼠標，此時，在文檔窗口中出現一個矩形層。3、將光標放置到文檔窗口中要插入層的位置，選擇“插入>布局對象>APDiv”命令，在插入點的位置插入新的矩形層。4、單擊“插入”面板“布局”選項卡中的“繪制APDiv”按鈕。此時，在文檔窗口中鼠標指針呈“+”形。按住Ctrl鍵的同時，單擊鼠標并拖曳，畫出一個矩形層。只要不松開Ctrl鍵，就可以繼續(xù)繪制新的層。顯示或隱藏層邊框若要顯示或隱藏層邊框，可選擇“查看>可視化助理>隱藏所有”命令。8.1.3選擇層選擇一個層（1）利用層面板選擇一個層。選擇“窗口>AP元素”命令，彈出“AP元素”面板。在“AP元素”面板中，單擊該層的名稱。（2）在文檔窗口中選擇一個層，有以下3種方法。單擊一個層的邊框。按Ctrl+Shift組合鍵的同時，在要選擇的層內部單擊。單擊一個選擇層的選擇柄。如果選擇柄不可見，則可以在該層中的任意位置單擊以顯示該選擇柄。選定多個層選擇“窗口>AP元素”命令，彈出“AP元素”面板。在“AP元素”面板中，按住Shift鍵并單擊兩個或更多的層名稱。在文檔窗口中按住Shift鍵并單擊兩個或更多個層的邊框內（或邊框上）。當選定多個層時，當前層的大小調整柄將以藍色突出顯示，其他層的大小調整柄則以白色顯示，并且只能對當前層進行操作。選中圖層8.1.4設置層的默認屬性當層插入后，其屬性為默認值，如果想查看或修改層的屬性，選擇“編輯>首選參數”命令，彈出“首選參數”對話框，在左側的“分類”列表中選擇“AP元素”選項，此時，可查看或修改層的默認屬性。“首選參數”對話框8.1.5AP元素面板通過“AP元素”面板可以管理網頁文檔中的層。選擇“窗口>AP元素”命令，彈出“AP元素”面板。使用“AP元素”面板可以防止層重疊，更改層的可見性，將層嵌套或層疊，以及選擇一個或多個層。“AP元素”面板8.1.6更改層的堆疊順序排版時常需要控制疊放在一起的不同網頁元素的顯示順序，以實現特殊的效果，這可通過修改選定層的“Z軸”屬性值實現。層的顯示順序與Z軸值的順序一致。Z值越大，層的位置越靠上前。在“AP元素”面板中按照堆疊順序排列層的名稱。效果圖8.1.7更改層的可見性當處理文檔時，可以使用“AP元素”面板手動設置顯示或隱藏層，以便查看層在不同條件下的顯示方式。更改層的可見性，有以下幾種方法。使用“AP元素”面板更改層的可見性使用“屬性”面板更改層的可見性8.1.8調整層的大小可以調整單個層的大小，也可以同時調整多個層的大小以使它們具有相同的寬度和高度。調整單個層的大小同時調整多個層的大小8.1.9移動層移動層的操作非常簡單，可以按照在大多數圖形應用程序中移動對象的相同方法在“設計”視圖中移動層。移動一個或多個選定層有以下幾種方法。拖曳選擇柄來移動層移動一個像素來移動層8.1.10對齊層使用層對齊命令可以當前層的邊框為基準對齊一個或多個層。當對選定層進行對齊時，未選定的子層可能會因為其父層被選定并移動而隨之移動。為了避免這種情況，不要使用嵌套層。對齊兩個或更多個層有以下幾種方法。應用菜單命令對齊層應用“屬性”面板對齊層8.1.11層靠齊到網格在移動網頁元素時可以讓其自動靠齊到網格，還可以通過指定網格設置來更改網格或控制靠齊行為。無論網格是否可見，都可以使用靠齊。應用DreamweaverCS6中的靠齊功能，可以使層與網格之間的關系如鐵塊與磁鐵之間的關系一般。另外，層與網格線之間靠齊的距離是可以設定的。層靠齊到網格更改網格設置8.2應用層設計表格課堂案例——信業(yè)融資網頁將APDiv轉換為表格將表格轉換為APDiv8.5.1課堂案例——信業(yè)融資網頁使用“將APDiv轉換為表格”命令，將層轉換為表格。效果圖8.2.2將APDiv轉換為表格1、將APDiv轉換為表格2、防止層重疊8.2.3將表格轉換為APDiv當不滿意頁面布局時，就需要對其進行調整，但層布局要比表格布局調整起來方便，所以需要將表格轉換為APDiv。要將表格轉換為APDiv，則選擇“修改>轉換>將表格轉換為APDiv”命令，彈出“將表格轉換為APDiv”對話框。根據需要完成設置后，單擊“確定”按鈕。“將表格轉換為APDiv”對話框8.3課堂練習——美味小吃網頁使用“繪制APDiv”按鈕，繪制層