Dreamweaver MX 2004從零開始(4)
作者：Eve Cole
更新時間：2009-05-31 21:02:51
圖層的使用<BR> 圖層是網頁的一個區域，在一個網頁中可以有多個圖層存在，它最大的魅力在於各個圖層可以重疊，並且可以決定每個圖層是否可見，同時也能夠自訂各圖層之間的層次關係。在熟練了圖層技術之後，就可以提供網頁強大的頁面控制能力。
建立圖層
為了說明圖層的功能，我們先來製作圖1所示的簡單的實例效果（如圖1）。
圖1
第一步在Dreamweaver MX 2004中新建一個頁面，執行「Insert→Layer Objects→Layer」指令，此時編輯視窗中會出現一個黑色矩形框，這就是插入的圖層。當滑鼠移到矩形的框線上時，滑鼠會變成十字箭頭形狀，此時點擊滑鼠則框線周圍出現8個黑色實心方塊，左上角還有一個空心方塊，表示這個圖層被選中了。
提示：用滑鼠拖曳實心方塊可以改變圖層大小，拖曳左上角的空心方塊可以改變圖層的位置。
第二步在圖層中點擊滑鼠，並且在其中輸入“中國電腦教育報”，然後在屬性面板視窗中將文字設為藍色。
第三步驟點選圖層邊框選取圖層，接著執行「Edit→Copy」指令複製目前圖層，然後在編輯視窗其它空白處點選滑鼠，並且執行「Edit→Paste」指令，這樣在編輯視窗中就又出現了一個圖層，不過目前它們重疊在一起，需要移動圖層之後才能看見這兩個圖層。
第四步把其中一個圖層的文字顏色改為黑色，並且移動圖層位置，使得兩個圖層的位置相差幾個像素，這樣就產生了陰影效果（如圖2）。
圖2
完成上述操作之後按下「F12」按鍵進行預覽，就可以在IE瀏覽器中查看到圖1所示的效果了。
嵌套圖層
所謂嵌套圖層指的是一個圖層創建在另一個圖層中，比如圖3所示的就是一個典型的嵌套圖層（如圖3）。實際上製作這種嵌套圖層很簡單，只要創建了一個父圖層之後用滑鼠點擊圖層內部，並且再次插入一個圖層即可。不過嵌套的圖層並不代表子圖層必須在父圖層內部，它們之間存在著繼承關係。
圖3
繼承的作用是可以使子圖層的可見性和父圖層保持一致，由於許多動態網頁的特效是透過控制圖層的可見性來實現的，因此當父圖層可見性改變時，子圖層的可見性也隨之改變。而且繼承關係也可以讓子圖層和父圖層的相對位置不變，例如我們拖曳父圖層移動，此時子圖層也會跟著移動，這在製作動態網頁的時候將顯得非常有用。
圖層的“Z－順序”
和表格相比，圖層最大的優勢在於圖層可以重疊，為了表示各個圖層哪個在上面，哪個在下面，就要給每個圖層設定一個序號，這個序號就是“Z-順序”，它的意思就是除了螢幕的X和Y座標之外，人為增加一個垂直於螢幕的Z軸。
如圖4所示，左邊區域的四個圖層和右邊區域的四個圖層就有明顯的不同，而調整圖層的順序也很簡單，只要用滑鼠依序點選放置在最下部、中部和最上部的圖層即可。但是這種操作方式在圖層很多的時候就顯得有些麻煩了，後製調整也不便，因此我們可以透過圖層面板進行調整。
圖4
先執行「Window→Layers」指令啟動圖層面板，此時可以看見圖5所示的面板視窗（如圖5），在這裡只要選取需要改變序號的圖層，按下滑鼠之後再向上或向下拖拽，當拖曳到希望插入的兩層之間出現一條橫線時鬆開滑鼠，這樣就可以改變各個圖層的「Z-順序」了。
圖5
提示：直接點選「Z」框的數值可以變更為所需的圖層層次。
使用圖層建立表格
雖然使用圖層來定位網頁元素比使用表格方便得多，但是只有IE 4.0以上版本的瀏覽器才支援圖層功能，因此為了讓使用舊版瀏覽器的朋友也可以看到你辛苦製作出來的作品，最好的方法就是把圖層轉換為表格。
第一步在圖5所示的視窗中選取上部的「Prevent overlaps」複選框，這樣使得每個圖層不能互相重疊，否則在轉換過程中會有警告訊息提示。
第二步驟執行“Modify→Convert→Layers to Table”指令，這時可以看見圖6所示的視窗（如圖6），在“Table layout”區域中分別選擇“Most Accurate”和“Use Transparent GIFs”兩個選項，其中前者透過精確轉換為每個圖層建立一個單元格，確保各個單元格之間的距離；後者會在轉換的表格最後一行中填充透明的GIF圖，這樣可以保證在所有瀏覽器中都有相同的外觀。
圖6
第三步按下「OK」按鈕之後即可完成圖層到表格的轉換操作。
提示： Dreamweaver MX 2004也提供了從表格到圖層的轉換功能，操作步驟也類似。
如果想把自己的網頁製作的絢麗多彩，就必須掌握圖層技術，否則日後製作動態網頁時候將會遇到不少困難，因此建議大家透過上文的介紹深入研究一下，才能夠真正掌握圖層技術。
