圖層的使用

圖層是網(wǎng)頁的一個(gè)區(qū)域，在一個(gè)網(wǎng)頁中可以有多個(gè)圖層存在，它最大的魅力在于各個(gè)圖層可以重疊，并且可以決定每個(gè)圖層是否可見，同時(shí)也能夠自定義各圖層之間的層次關(guān)系。在熟練掌握了圖層技術(shù)之后，就可以給網(wǎng)頁提供強(qiáng)大的頁面控制能力。


　　創(chuàng)建圖層


　　為了說明圖層的功能，我們先來制作圖1所示的簡單的實(shí)例效果（如圖1）。

圖1
　　第一步 在Dreamweaver MX 2004中新建一個(gè)頁面，運(yùn)行“Insert→Layer Objects→Layer”命令，此時(shí)編輯窗口中會(huì)出現(xiàn)一個(gè)黑色矩形框，這就是插入的圖層。當(dāng)鼠標(biāo)移動(dòng)到矩形的框線上時(shí)，鼠標(biāo)會(huì)變成十字箭頭形狀，此時(shí)點(diǎn)擊鼠標(biāo)則框線周圍出現(xiàn)8個(gè)黑色實(shí)心方塊，左上角還有一個(gè)空心方塊，表示這個(gè)圖層被選中了。

　　提示：用鼠標(biāo)拖拽實(shí)心方塊可以改變圖層大小，拖拽左上角的空心方塊可以改變圖層的位置。


　　第二步 在圖層中點(diǎn)擊一下鼠標(biāo)，并且在其中輸入“中國電腦教育報(bào)”，然后在屬性面板窗口中將文字設(shè)置為藍(lán)色。

　　第三步 單擊圖層邊框選中圖層，接著運(yùn)行“Edit→Copy”命令復(fù)制當(dāng)前圖層，然后在編輯窗口其它空白處點(diǎn)擊一下鼠標(biāo)，并且運(yùn)行“Edit→Paste”命令，這樣在編輯窗口中就又出現(xiàn)了一個(gè)圖層，不過目前它們重疊在一起，需要移動(dòng)圖層之后才能看見這兩個(gè)圖層。

　　第四步 把其中一個(gè)圖層的文字顏色更改為黑色，并且移動(dòng)圖層位置，使得兩個(gè)圖層的位置相差幾個(gè)像素，這樣就產(chǎn)生了陰影效果（如圖2）。

圖2
　　完成上述操作之后按下“F12”按鍵進(jìn)行預(yù)覽，就可以在IE瀏覽器中查看到圖1所示的效果了。
　嵌套圖層


　　所謂嵌套圖層指的是一個(gè)圖層創(chuàng)建在另外一個(gè)圖層中，比如圖3所示的就是一個(gè)典型的嵌套圖層（如圖3）。實(shí)際上制作這種嵌套圖層很簡單，只要?jiǎng)?chuàng)建了一個(gè)父圖層之后用鼠標(biāo)點(diǎn)擊圖層內(nèi)部，并且再次插入一個(gè)圖層即可。不過嵌套的圖層并不意味著子圖層必須要在父圖層內(nèi)部，它們之間存在著繼承關(guān)系。

圖3
　　繼承的作用是可以使子圖層的可見性和父圖層保持一致，由于很多動(dòng)態(tài)網(wǎng)頁的特效是通過控制圖層的可見性來實(shí)現(xiàn)的，因此當(dāng)父圖層可見性改變時(shí)，子圖層的可見性也隨之改變。而且繼承關(guān)系也可以讓子圖層和父圖層的相對(duì)位置不變，比如我們拖拽父圖層移動(dòng)，此時(shí)子圖層也會(huì)跟隨著移動(dòng)，這在制作動(dòng)態(tài)網(wǎng)頁的時(shí)候?qū)@得非常有用。


　　圖層的“Z－順序”


　　和表格相比，圖層最大的優(yōu)勢(shì)在于圖層可以重疊，為了表示各個(gè)圖層哪個(gè)在上面，哪個(gè)在下面，就要給每個(gè)圖層設(shè)定一個(gè)序號(hào)，這個(gè)序號(hào)就是“Z-順序”，它的意思就是除了屏幕的X和Y坐標(biāo)之外，人為增加一個(gè)垂直于屏幕的Z軸。

　　如圖4所示，左邊區(qū)域的四個(gè)圖層和右邊區(qū)域的四個(gè)圖層就有明顯的不同，而調(diào)整圖層的順序也很簡單，只要用鼠標(biāo)依次點(diǎn)選放置在最下部、中部和最上部的圖層即可。但是這種操作方式在圖層很多的時(shí)候就顯得有些麻煩了，后期調(diào)整也不便，因此我們可以通過圖層面板進(jìn)行調(diào)整。

圖4
　　先運(yùn)行“Window→Layers”命令激活圖層面板，此時(shí)可以看見圖5所示的面板窗口（如圖5），在這里只要選中需要改變序號(hào)的圖層，按下鼠標(biāo)之后向上或者向下拖拽，當(dāng)拖拽到希望插入的兩層之間出現(xiàn)一條橫線時(shí)松開鼠標(biāo)，這樣就可以改變各個(gè)圖層的“Z-順序”了。

圖5
　　提示：直接單擊“Z”框的數(shù)值可以更改為所需要的圖層層次。
　　使用圖層建立表格


　　雖然使用圖層來定位網(wǎng)頁元素比使用表格方便得多，但是只有IE 4.0以上版本的瀏覽器才支持圖層功能，因此為了讓使用舊版本瀏覽器的朋友也可以看到你辛苦制作出來的作品，最好的方法就是把圖層轉(zhuǎn)換為表格。

　　第一步 在圖5所示的窗口中選取上部的“Prevent overlaps”復(fù)選框，這樣使得每個(gè)圖層不能互相重疊，否則在轉(zhuǎn)換過程中會(huì)有警告信息提示。

　　第二步 運(yùn)行“Modify→Convert→Layers to Table”命令，這時(shí)可以看見圖6所示的窗口（如圖6），在“Table layout”區(qū)域中分別選擇“Most Accurate”和“Use Transparent GIFs”兩個(gè)選項(xiàng)，其中前者通過精確轉(zhuǎn)換為每個(gè)圖層建立一個(gè)單元格，確保各個(gè)單元格之間的距離；后者會(huì)在轉(zhuǎn)換的表格最后一行中填充透明的GIF圖，這樣可以保證在所有瀏覽器中都有相同的外觀。

圖6
　　第三步 按下“OK”按鈕之后即可完成圖層到表格的轉(zhuǎn)換操作。

　　提示：Dreamweaver MX 2004還提供了從表格到圖層的轉(zhuǎn)換功能，操作步驟類似。

　　如果想把自己的網(wǎng)頁制作的絢麗多彩，就必須掌握?qǐng)D層技術(shù)，否則日后制作動(dòng)態(tài)網(wǎng)頁時(shí)候?qū)?huì)遇到不少困難，因此建議大家通過上文的介紹深入研究一下，才能夠真正掌握?qǐng)D層技術(shù)。