Dreamweaver-CS6網(wǎng)頁(yè)設(shè)計(jì)與制作標(biāo)準(zhǔn)課件

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