利用圖層技術(shù)制作網(wǎng)

1、.第九章 利用圖層技術(shù)制作網(wǎng)頁(yè)層是一種HTML頁(yè)面元素，可以將它放置在頁(yè)面的任意位置。層可以包含文本、圖像或其他可放在HTML文檔正文中的任何內(nèi)容。本章介紹在網(wǎng)頁(yè)制作中圖層技術(shù)的應(yīng)用。通過(guò)本章的學(xué)習(xí)，讀者應(yīng)該掌握以下內(nèi)容：·認(rèn)識(shí)圖層·圖層的基本操作·圖層與表格的操作·利用圖層制作動(dòng)畫(huà)9.1 認(rèn)識(shí)圖層有網(wǎng)頁(yè)創(chuàng)作經(jīng)歷的人可能都有過(guò)這樣的經(jīng)歷：在網(wǎng)頁(yè)中，控制文字和對(duì)象的位置實(shí)在是太困難了，有限的HTML標(biāo)記和煩瑣的源代碼極大限制了用戶對(duì)網(wǎng)頁(yè)內(nèi)容的控制能力，為了實(shí)現(xiàn)文本和對(duì)象在頁(yè)面中的定位，人們不得不采用其他一些特殊手段，比如利用表格來(lái)擺放文本和對(duì)象。當(dāng)頁(yè)面元素

2、較多，位置較復(fù)雜時(shí)，單純利用表格定位就有些不方便了。在Dreamweaver中，通過(guò)圖層可以實(shí)現(xiàn)對(duì)頁(yè)面元素的精確定位，其友好的可視化特性能夠幫助用戶在文檔中輕松地創(chuàng)建圖層、定位文檔內(nèi)容，不僅避免了煩瑣的源代碼輸入，而且創(chuàng)建出的頁(yè)面內(nèi)容定位效果也非常簡(jiǎn)潔、高效。什么是層呢？層是網(wǎng)頁(yè)中用來(lái)放置文本、圖像、動(dòng)畫(huà)、表單、插件等網(wǎng)頁(yè)元素的載體。沒(méi)有層的網(wǎng)頁(yè)像一個(gè)平面，即由x軸和y軸組合成的二維空間，而層所確定的區(qū)域是在z軸上，它擺脫了二維平面的束縛，形成了一個(gè)三維空間結(jié)構(gòu)，如圖9-1所示。同時(shí)，層與層之間的關(guān)系也由z軸的坐標(biāo)來(lái)決定。一般來(lái)說(shuō)，默認(rèn)后建立的層的z值大，先建立的層z值小，z值大的層可以覆蓋z

3、值小的層，當(dāng)然也可以通過(guò)調(diào)整來(lái)改變先前層的疊放次序。層不僅可以有特殊的位置，也可以有豐富的內(nèi)容。層可以包含文字、圖像、表單、插件，層中甚至可以包含另一個(gè)層。由于層可以具有特殊的位置和內(nèi)容，因此，在網(wǎng)頁(yè)制作中也可以用層來(lái)進(jìn)行頁(yè)面布局，可以實(shí)現(xiàn)頁(yè)面元素的精確定位。把層和時(shí)間軸配合使用，可以很方便地設(shè)計(jì)出動(dòng)態(tài)頁(yè)面效果，層與行為配合使用還可以很方便地制作出滾動(dòng)字幕、下拉式菜單等頁(yè)面效果。9.2 圖層的基本操作9.2.1 創(chuàng)建圖層當(dāng)在文檔中放置層時(shí)，Dreamweaver將在代碼中插入該層的HTML標(biāo)簽?？梢赃x擇利用Dreamweaver將div標(biāo)簽或span標(biāo)簽用于層中。默認(rèn)情況下，Dreamweav

4、er會(huì)使用div標(biāo)簽創(chuàng)建層。div和span標(biāo)簽之間的區(qū)別在于瀏覽器不支持層在div標(biāo)簽之前和之后放置額外的換行符。也就是說(shuō)，div標(biāo)簽是塊級(jí)別的元素，而span標(biāo)簽則是內(nèi)聯(lián)元素。大多數(shù)情況下，在不支持層的瀏覽器中，最好讓層內(nèi)容出現(xiàn)在自己的段落中，因此大多數(shù)情況下最好使用div而不是span。若要進(jìn)一步提高在較早瀏覽器中的可讀性，應(yīng)注意放置層代碼的位置。定義層的代碼可以位于HTML文件正文中的任意位置。當(dāng)在Dreamweaver中繪制一個(gè)層時(shí)，該層會(huì)顯示在指定的地方，但Dreamweaver將在頁(yè)開(kāi)頭且緊接在body標(biāo)簽之后插入該層的代碼(如果使用的是“插入層”命令而不是繪制層，層代碼將在插入

5、點(diǎn)處插入)。如果創(chuàng)建一個(gè)嵌套層，Dreamweaver會(huì)在定義父層的標(biāo)簽內(nèi)插入代碼。Dreamweaver可以方便地在頁(yè)面上創(chuàng)建層并精確地將層定位。Dreamweaver提供了幾種不同的方法來(lái)創(chuàng)建層，下面介紹幾種常用的方法。1.利用工具創(chuàng)建圖層(1)單擊對(duì)象面板上的“描繪圖層”按鈕。(2)將鼠標(biāo)移動(dòng)到文檔窗口中，鼠標(biāo)指針會(huì)變成“十”字形狀。(3)在文檔窗口中將要放置圖層的位置上按下鼠標(biāo)左鍵。(4)拖動(dòng)鼠標(biāo)，根據(jù)需要繪制圖層的大小，釋放鼠標(biāo)，圖層就被放置在所希望的位置上，如圖9-2所示。圖9-2 描繪圖層2.通過(guò)菜單創(chuàng)建圖層(1)將插入點(diǎn)放置在文檔窗口中。(2)單擊“插入”“層”命令，即可在文檔

6、窗口中插入一個(gè)預(yù)設(shè)大小的圖層。3.拖動(dòng)法創(chuàng)建圖層將對(duì)象面板上的“描繪圖層”按鈕直接拖動(dòng)到文檔中，即可在文檔中放置一個(gè)預(yù)設(shè)大小的圖層。9.2.2 激活圖層要把對(duì)象放入圖層中，首先要激活圖層。未被選中的圖層如圖9-3所示。把鼠標(biāo)放至層內(nèi)任意位置單擊，即可激活層。此時(shí)，光標(biāo)在層中閃爍，被激活的層的邊界突出顯示(由灰色變成黑色)，選擇手柄也同時(shí)顯示出來(lái)，如圖9-4所示。 圖9-3 未選中的圖層 圖9-4 被擊活的圖層9.2.3 選中圖層1.選中一個(gè)圖層要選中一個(gè)圖層，有如下幾種方法。方法一：?jiǎn)螕粑臋n中的圖層標(biāo)記，即可選中對(duì)應(yīng)的圖層，如果圖層標(biāo)記沒(méi)有顯示，可以打開(kāi)“查看”菜單，選擇“可視化助理”，在其下

7、拉菜單中選擇“隱藏元素”命令，顯示“不可見(jiàn)元素”命令。選中的圖層，在其邊框上會(huì)出現(xiàn)八個(gè)調(diào)整手柄，如圖9-5所示。通過(guò)拖動(dòng)手柄可以調(diào)整圖層的大小。方法二：?jiǎn)螕魣D層中的任意位置，首先激活圖層，然后單擊圖層右上角的選擇柄口，即可選中該圖層。方法三：?jiǎn)螕魣D層邊框，即可選中該圖層。方法四：在沒(méi)有圖層被激活的情況下，按Shift鍵，在單擊圖層中的任意位置，即可選中該圖層。方法五：如果選中了多個(gè)圖層，按住Ctrl+Shift鍵，再單擊要選中的圖層，即可選中該圖層，而取消對(duì)其他圖層的選擇。方法六：按F2鍵打開(kāi)圖層面板，在圖層面板上，單擊圖層的名稱，即可在文檔窗口中選中相應(yīng)的圖層，如圖9-6所示。 圖9-5 被

8、選中的圖層 圖9-6 在圖層面板中選擇圖層2.選擇多個(gè)圖層如果希望同時(shí)選中多個(gè)圖層，則可以按以下方法進(jìn)行操作。方法一：按住Shift鍵，然后在每個(gè)要選中的圖層中單擊鼠標(biāo)，即可選中多個(gè)圖層。方法二：按住Shift鍵，然后在圖層面板中單擊兩個(gè)或多個(gè)圖層的名稱，即可選中多個(gè)圖層，如圖9-7所示。圖9-7 利用層面板選中多個(gè)圖層選中多個(gè)圖層的情形，如圖9-8所示，其中最右邊的圖層是最后選中的圖層。從圖中可以看到，最后被選中的圖層，其邊框上的控制點(diǎn)是黑色的，而先選中的圖層的控制點(diǎn)是白色的。圖9-8 被選中的多個(gè)圖層9.2.4 調(diào)節(jié)圖層大小1.調(diào)整單個(gè)圖層的大小用戶可以調(diào)整單個(gè)層的大小，也可以同時(shí)調(diào)整多個(gè)

9、層的大小以使其具有相同的寬度和高度。如果已啟用“防止重疊”選項(xiàng)，那么在調(diào)整層的大小時(shí)將無(wú)法使該層與另一個(gè)層重疊。調(diào)整單個(gè)圖層大小的方法如下。(1)拖動(dòng)圖層邊框的控制點(diǎn)來(lái)改變其大小選擇圖層。把光標(biāo)定位在層的邊框，單擊后會(huì)出現(xiàn)8個(gè)控制點(diǎn)。上下(左右、斜方向)拖動(dòng)層邊框的控制點(diǎn)到合適的位置，釋放鼠標(biāo)，就可以改變層的大小，如圖9-9所示。 圖9-9 拖動(dòng)圖層邊框控制點(diǎn)改變層的大小(2)利用屬性面板精確調(diào)整圖層的大小選擇要調(diào)整的圖層，打開(kāi)屬性面板，如圖9-10所示。在屬性檢查器的“高”和“寬”文本框中修改層的寬度值和高度值。圖9-10 利用屬性檢查器調(diào)整圖層的大小(3)利用鍵盤(pán)來(lái)調(diào)整圖層的大小選擇要調(diào)整

10、的圖層。按Ctrl+方向鍵，每次調(diào)整一個(gè)像素單位。按Ctrl+Shift+方向鍵，每次調(diào)整一個(gè)網(wǎng)格單位。注意：在調(diào)整層的大小時(shí)，當(dāng)層比圖片大時(shí)，圖片的尺寸保持不變，而層最小只能調(diào)整到圖片的大小。在調(diào)整層中圖片的大小時(shí)，層的尺寸會(huì)隨著圖片的大小而調(diào)整。2.調(diào)整多個(gè)圖層的大小(1)利用菜單調(diào)整多個(gè)圖層的大小在設(shè)計(jì)視圖中按Shift鍵選擇多個(gè)圖層。單擊“修改”“對(duì)齊”“設(shè)成寬度相同”或“修改”“對(duì)齊”“設(shè)成高度相同”，如圖9-11所示。圖9-11 “對(duì)齊”命令選項(xiàng)注意：多個(gè)圖層調(diào)整后的高度和寬度以最后一個(gè)被選中的圖層的(黑色突出顯示)寬度或高度為基準(zhǔn)。(2)利用屬性面板精確調(diào)整多個(gè)圖層的大小選擇要調(diào)

11、整的圖層，打開(kāi)其屬性面板。在屬性面板的多個(gè)層“高”和“寬”文本框中修改所有選中的層的寬度值和高度值，如圖9-12所示。圖9-12 利用屬性檢查器調(diào)整多個(gè)圖層的大小9.2.5 移動(dòng)圖層除了圖層的大小可以被調(diào)整以外，圖層還可以被隨意移動(dòng)。正是這一特點(diǎn)，方便了網(wǎng)頁(yè)元素的定位，使我們可以方便地利用圖層進(jìn)行網(wǎng)頁(yè)布局。圖層移動(dòng)時(shí)，首先應(yīng)該選中它，然后可以按以下方法進(jìn)行操作。1.拖動(dòng)層拖動(dòng)層邊框左上角的方形手柄到適合的位置，如圖9-13所示，然后釋放鼠標(biāo)即可。圖9-13 拖動(dòng)圖層2.利用屬性面板在屬性面板的“左”或“右”文本框中輸入新的水平或垂直的坐標(biāo)值，如圖9-14所示。圖9-14 利用屬性檢查器移動(dòng)圖層

12、3.利用鍵盤(pán)每按一次方向鍵，則移動(dòng)一個(gè)像素單位：若按Shift鍵的同時(shí)按一次方向鍵，則移動(dòng)一個(gè)網(wǎng)格單位。9.2.6 對(duì)齊圖層先選中多個(gè)要對(duì)齊的層，單擊“修改”“對(duì)齊”“左對(duì)齊”(右對(duì)齊、對(duì)齊上緣、對(duì)齊下緣)，如圖9-11所示。9.2.7 圖層與網(wǎng)格的對(duì)齊在調(diào)整層的大小和位置時(shí)，如果配合網(wǎng)格線和吸附功能的設(shè)置，則層的調(diào)整就會(huì)更加精確了。要顯示網(wǎng)格線，選擇“查看”“網(wǎng)格”“顯示網(wǎng)格”命令即可，如圖9-15所示。圖9-15 顯示網(wǎng)格線設(shè)置網(wǎng)格和吸附的值的步驟如下。(1)選擇“查看”“網(wǎng)格”“網(wǎng)格設(shè)置”命令。(2)在對(duì)話框中，用戶可以根據(jù)需要進(jìn)行選項(xiàng)設(shè)置。顏色：用于設(shè)置網(wǎng)格線的顏色。間隔：用于設(shè)置網(wǎng)格

13、線的間距和間距單位。顯示：該選項(xiàng)組的單選按鈕用于設(shè)置網(wǎng)格用線還是用點(diǎn)來(lái)顯示。(3)單擊“確定”按鈕完成設(shè)置，如圖9-16所示。圖9-16 “網(wǎng)格設(shè)置”對(duì)話框注意：不論網(wǎng)格是否可見(jiàn)，都可以選中“靠齊到網(wǎng)格”。9.3 層面板的應(yīng)用9.3.1 層屬性面板的應(yīng)用用戶可以在屬性面板中查看和設(shè)置層的各種屬性。選擇一個(gè)層，單擊“窗口”“屬性”，打開(kāi)層屬性面板，如圖9-17所示，各選項(xiàng)含義如下。圖9-17 設(shè)置層的屬性·層編號(hào)：用于指定一個(gè)名稱，以便在“層”面板和JavaScript代碼中標(biāo)識(shí)該層。輸入名稱時(shí)只使用標(biāo)準(zhǔn)的字母數(shù)字字符，而不要使用空格、連字符、斜杠或句號(hào)等特殊字符。每個(gè)層都必須有它自己

14、的惟一名稱。·“左”和“上”(左側(cè)和頂部)：指定層的左上角相對(duì)于頁(yè)面(如果嵌套，則為父層)左上角的位置。·“寬”和“高”：指定層的寬度和高度。·Z軸：確定層的z軸(即層疊順序)。在瀏覽器中，編號(hào)較大的層出現(xiàn)在編號(hào)較小的層的前面。值可以為正，也可以為負(fù)。當(dāng)更改層的層疊順序時(shí)，使用“層”控制面板操作要比輸入特定的z軸更為簡(jiǎn)便。·顯示：指定該層最初是否是可見(jiàn)的。請(qǐng)從下列選項(xiàng)中選擇。默認(rèn)不指定可見(jiàn)性屬性。當(dāng)未指定可見(jiàn)性時(shí)，大多數(shù)瀏覽器都會(huì)默認(rèn)為“繼承”。繼承使用該層父級(jí)的可見(jiàn)性屬性。可見(jiàn)顯示該層的內(nèi)容，而不管父級(jí)的值是什么。隱藏隱藏這些層的內(nèi)容，而不管父級(jí)的值是

15、什么。請(qǐng)注意，創(chuàng)建的隱藏層會(huì)像可見(jiàn)層一樣占用相同的空間。使用腳本語(yǔ)言(如JavaScript)可控制可見(jiàn)性屬性并動(dòng)態(tài)地顯示層的內(nèi)容。·背景圖像：指定層的背景圖像。單擊其文件夾圖標(biāo)可瀏覽到一個(gè)圖像文件并將其選定。·背景顏色：指定層的背景顏色。如果將此選項(xiàng)留為空白，則可以指定透明的背景，如圖9-18所示。圖9-18 背景顏色·標(biāo)簽：指定用來(lái)定義該層的HTML標(biāo)簽。·溢出：控制當(dāng)層的內(nèi)容超過(guò)層的指定大小時(shí)如何在瀏覽器中顯示層?！皏isible”(可見(jiàn))指示在層中顯示額外的內(nèi)容。實(shí)際上，該層會(huì)通過(guò)延伸來(lái)容納額外的內(nèi)容?！癶idden”(隱藏)指定不在瀏覽器中顯示

16、額外的內(nèi)容。“scroll”(滾動(dòng))指定瀏覽器應(yīng)在層上添加滾動(dòng)條，而不管是否需要滾動(dòng)條。“auto”(自動(dòng))指定瀏覽器僅在需要時(shí)(即當(dāng)層的內(nèi)容超過(guò)其邊界時(shí))才顯示層的滾動(dòng)條。·剪輯：定義層的可見(jiàn)區(qū)域。指定左側(cè)、頂部、右側(cè)和底邊坐標(biāo)，可在層的坐標(biāo)空間中定義一個(gè)矩形(從層的左上角開(kāi)始計(jì)算)。層經(jīng)過(guò)“剪輯”后，只有指定的矩形區(qū)域才是可見(jiàn)的。如，若要使一個(gè)層中50像素寬、75像素高的矩形區(qū)域可見(jiàn)而其他內(nèi)容均不可見(jiàn)，請(qǐng)將“左”設(shè)置為0，將“上”設(shè)置為0，將“右”設(shè)置為50，并將“下”設(shè)置為75。9.3.2 層控制面板的應(yīng)用1.改變圖層的可見(jiàn)性當(dāng)處理文檔時(shí)，可以使用“層”控制面板手動(dòng)顯示和隱藏層

17、，以查看頁(yè)如何在不同的條件下顯示。注意：當(dāng)前選定層始終會(huì)變?yōu)榭梢?jiàn)，它在選定時(shí)將出現(xiàn)在其他層的前面。(1)若要更改層可見(jiàn)性，請(qǐng)執(zhí)行以下操作。單擊“窗口”“其他”“層”菜單命令，打開(kāi)“層”面板。單擊一個(gè)層的眼睛圖標(biāo)以更改其可見(jiàn)性。眼睛睜開(kāi)表示該層是可見(jiàn)的。眼睛閉合表示該層是不可見(jiàn)的。如果沒(méi)有眼形圖標(biāo)，該層通常會(huì)繼承其父級(jí)的可見(jiàn)性(如果層沒(méi)有嵌套，父級(jí)就是文檔正文，而文檔正文始終是可見(jiàn)的。)另外，如果未指定可見(jiàn)性，則不會(huì)顯示眼睛圖標(biāo)(這在屬性面板中表示為“默認(rèn)”可見(jiàn)性)。(2)若要同時(shí)更改所有層的可見(jiàn)性，請(qǐng)執(zhí)行以下操作。單擊“窗口”“其他”“層”，打開(kāi)“層”面板。單擊位于列頂部的標(biāo)頭眼睛圖標(biāo)。注意：

18、此過(guò)程可以將所有層設(shè)置為“可見(jiàn)”或“隱藏”，但不能設(shè)置為“繼承”。2.圖層的疊放次序前面已經(jīng)介紹過(guò)，層位于z軸上。通常，最先創(chuàng)建的層位于z軸的最下層，而最后創(chuàng)建的層則位于z軸的最上層。疊放的順序可以從“層”面板上看到，如圖9-19所示。圖9-19 層的名稱和Z值(1)利用“層”控制面板來(lái)調(diào)整層間的位置把光標(biāo)放置到要改變位置的層的名稱上，比如拖動(dòng)Layer3到Layer1下面，如圖9-20所示。圖9-20 拖動(dòng)Layer3層操作樣圖釋放鼠標(biāo)，Layer3便移到最底端，如圖9-21所示。Layer3的z值由3變成1，表示其現(xiàn)在位于其他3個(gè)層的下面。圖9-21 調(diào)整層的位置(2)利用層屬性面板來(lái)調(diào)整

19、層間的位置在層屬性面板中直接修改Layer3層的“Z軸”值，使其小于Layer1的“Z軸”值，如圖9-22所示。 圖9-22 修改層的Z值3.創(chuàng)建嵌套圖層圖層中可以放置各種文檔內(nèi)容，當(dāng)然也可以放置圖層，這就是所謂的圖層嵌套。嵌套通常用于將層組織在一起。嵌套層隨其父層一起移動(dòng)，并且可以設(shè)置為繼承其父級(jí)的可見(jiàn)性。若要?jiǎng)?chuàng)建嵌套層，可以在另一個(gè)層中插入或繪制一個(gè)層，或者使用“層”控制面板。若要在繪制層時(shí)強(qiáng)制使用自動(dòng)嵌套，可以在層參數(shù)中選擇“嵌套”選項(xiàng)。(1)利用菜單命令創(chuàng)建嵌套層將插入點(diǎn)放入現(xiàn)有層中。選擇“插入”“層”菜單命令，這時(shí)在現(xiàn)有圖層中就會(huì)出現(xiàn)新的嵌套圖層，如圖9-23所示。圖9-23 創(chuàng)建嵌

20、套層(2)繪制嵌套層在“插入”面板上單擊“描繪層”按鈕，然后通過(guò)拖動(dòng)在現(xiàn)有層中繪制一個(gè)層。提示：在不同的瀏覽器中，嵌套層的外觀，可能會(huì)有所不同。當(dāng)創(chuàng)建嵌套層時(shí)，請(qǐng)?jiān)谠O(shè)計(jì)過(guò)程中頻繁地檢查它們?cè)诓煌瑸g覽器中的外觀。(3)利用層控制面板將現(xiàn)有層嵌套在另一個(gè)層中單擊“窗口”“其他”“層”，打開(kāi)“層”控制面板。在“層”控制面板中選擇一個(gè)層，然后通過(guò)按住Ctrl鍵并拖動(dòng)，將層移動(dòng)到層控制面板上的目標(biāo)層。當(dāng)目標(biāo)層的名稱被選中時(shí)，如圖9-24所示，松開(kāi)鼠標(biāo)按鈕。圖9-24 在“層”控制面板中創(chuàng)建嵌套層操作完成后“層”控制面板如圖9-25所示。注意：當(dāng)在頁(yè)面上使用嵌套層時(shí)，請(qǐng)使用Netscape調(diào)整大小修復(fù)命令

21、(“命令”“添加/刪除Netscape調(diào)整大小修復(fù)”)。否則，當(dāng)訪問(wèn)者在Netscape Navigator 4版中調(diào)整瀏覽器窗口的大小時(shí)，層會(huì)失去它們的位置?？梢栽O(shè)置一個(gè)參數(shù)選擇選項(xiàng)，以始終插入Netscape調(diào)整大小修復(fù)命令。9.4 圖層與表格圖層只有在較高版本的瀏覽器，如Internet Explorer4.0或Netscape Navigator 4.0及其更高版本中，才能夠正確顯示，如果要使設(shè)計(jì)的網(wǎng)頁(yè)在3.0版本的瀏覽器中也正確顯示，則不能使用圖層來(lái)控制版面。很多人喜歡用表格作為控制版面的手段，在很多時(shí)候這是非常有效的。在Dreamweaver中，可以實(shí)現(xiàn)圖層和表格之間相互轉(zhuǎn)換。例如

22、，將圖層轉(zhuǎn)換為表格中的單元格，以使網(wǎng)頁(yè)能夠被3.0版本的瀏覽器正確瀏覽。當(dāng)然，如果確信用戶都使用4.0及更高版本的瀏覽器瀏覽網(wǎng)頁(yè)，也可以將現(xiàn)有用表格設(shè)計(jì)的網(wǎng)頁(yè)轉(zhuǎn)換為用圖層設(shè)計(jì)的網(wǎng)頁(yè)，使網(wǎng)頁(yè)顯得更加專業(yè)化。9.4.1 防止圖層重疊由于表格單元格不能重疊，Dreamweaver無(wú)法利用重疊層創(chuàng)建表格。如果要將文檔中的層轉(zhuǎn)換為表格，應(yīng)使用“防止重疊”選項(xiàng)來(lái)約束層的移動(dòng)和定位，使層不會(huì)重疊。在啟用該選項(xiàng)后，則不能在現(xiàn)有層前面創(chuàng)建層，不能在現(xiàn)有層上移動(dòng)層或調(diào)整層大小，也不能將某個(gè)層嵌套在現(xiàn)有層中。如果在創(chuàng)建重疊層后激活此選項(xiàng)？請(qǐng)拖動(dòng)每個(gè)重疊層以使其離開(kāi)其他層。當(dāng)啟用“防止層重疊”選項(xiàng)后，Dreamwea

23、ver不會(huì)自動(dòng)修正頁(yè)面上的現(xiàn)有重疊層。若要防止層重疊，可以使用以下方法之一。方法一：在“層”控制面板中，請(qǐng)選擇“防止層重疊”選項(xiàng)，如圖9-26所示。圖9-26 “層”控制面板中“防止重疊”設(shè)置方法二：在“文檔”窗口中，選擇“修改”“排列順序”“防止重疊”命令。注意：即使在啟用“防止重疊”選項(xiàng)后，仍可以執(zhí)行某些操作來(lái)將層重疊。如果使用“插入”菜單插入一個(gè)層，在屬性面板中輸入數(shù)字或者通過(guò)編輯HTML源代碼來(lái)重定位層，則可以在此選項(xiàng)已啟用時(shí)使層重疊或嵌套。如果出現(xiàn)重疊，請(qǐng)?jiān)凇霸O(shè)計(jì)”視圖中拖動(dòng)各重疊層以使其分離。9.4.2 把圖層轉(zhuǎn)換為表格一些Web設(shè)計(jì)人員可能不喜歡使用表格或“布局”模式來(lái)創(chuàng)建自己的

24、布局，而是喜歡通過(guò)層來(lái)進(jìn)行設(shè)計(jì)。在Dreamweaver MX中可以使用層來(lái)創(chuàng)建網(wǎng)頁(yè)布局，然后將它們轉(zhuǎn)換為表格(如果愿意的話)。例如，如果需要支持4.0版之前的瀏覽器，可能需要將層轉(zhuǎn)換為表格。用戶可以在層和表之間來(lái)回轉(zhuǎn)換，以調(diào)整布局并優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)。不能轉(zhuǎn)換頁(yè)面上特定的表格或?qū)樱仨殞⒄麄€(gè)頁(yè)面上的層轉(zhuǎn)換為表格或?qū)⒈砀褶D(zhuǎn)換為層。要把頁(yè)面中的層轉(zhuǎn)換為表格，請(qǐng)按以下步驟操作。(1)選擇“修改”“轉(zhuǎn)換”“層到表格”命令。(2)在彈出的“轉(zhuǎn)換層為表格”對(duì)話框中，選擇需要的布局選項(xiàng)，如圖9-27所示。圖9-27 “轉(zhuǎn)換層為表格”對(duì)話框若要設(shè)置“轉(zhuǎn)換層為表格”對(duì)話框，請(qǐng)指定以下任一選項(xiàng)。最精確：為每個(gè)層創(chuàng)建一

25、個(gè)單元格，并附加保留層之間所必須的任何單元格。最小：折疊空單元格，指定如果層定位在指定數(shù)目的像素內(nèi)，則層的邊緣應(yīng)對(duì)齊。如果選擇此選工頁(yè)，結(jié)果表格將包含較少的空行和空列，但可能與精確布局不匹配。使用透明GIF：用透明的GIF填充表格的最后一行。這將確保該表格在所有瀏覽器中以相同的列寬顯示。當(dāng)啟用此選項(xiàng)后，不能通過(guò)拖動(dòng)表列來(lái)編輯結(jié)果表格。當(dāng)禁用此選項(xiàng)后，含透明GIF，在不同的瀏覽器中可能會(huì)具有不同的列寬。置于頁(yè)面中央：將結(jié)果表格放置在頁(yè)面的中央。如果禁用此選項(xiàng)，表格將在頁(yè)面的左邊緣開(kāi)始。選擇所需的布局工具，然后單擊“確定”按鈕。注意：在模板文檔或已應(yīng)用模板的文檔中，不能將層轉(zhuǎn)換為表格或?qū)⒈砀褶D(zhuǎn)換為

26、層。即應(yīng)該在非模板文檔中創(chuàng)建布局，然后再將該文檔另存為模板之前進(jìn)行轉(zhuǎn)換。9.4.3 把表格轉(zhuǎn)換為圖層用表格也可以實(shí)現(xiàn)對(duì)頁(yè)面的布局，如果用表格的布局感到不滿意，可以把表格轉(zhuǎn)換為圖層后重新調(diào)整。將表格轉(zhuǎn)換為圖層的操作步驟如下。(1)單擊“修改”“轉(zhuǎn)換”“表格到層”命令。(2)在彈出的“轉(zhuǎn)換表格為層”對(duì)話框中，選擇需要的選項(xiàng)，如圖9-28所示。圖9-28 將表格轉(zhuǎn)換為層防止層重疊：在創(chuàng)建、移動(dòng)層和調(diào)整層大小時(shí)約束層的位置，使層不會(huì)重疊。顯示層面板：顯示“層”面板。顯示網(wǎng)格和靠齊到網(wǎng)格：能夠使用網(wǎng)格來(lái)協(xié)助將層定位。(3)單擊“確定”按鈕。注意：表格轉(zhuǎn)換為層時(shí)，空單元格不會(huì)轉(zhuǎn)換為層(除非它們具有背景顏色

27、)。位于表格外的頁(yè)面元素也會(huì)放入層中。9.5 圖層與時(shí)間軸DHTML，也就是動(dòng)態(tài)HTML，是一種能夠具有使用腳本語(yǔ)言來(lái)改變樣式或位置能力的語(yǔ)言。時(shí)間軸在網(wǎng)頁(yè)中所獲得的效果就是利用動(dòng)態(tài)HTML語(yǔ)言來(lái)實(shí)現(xiàn)的。通過(guò)DHTML來(lái)改變層的屬性，或是通過(guò)時(shí)間軸各幀上的一系列圖像來(lái)實(shí)現(xiàn)動(dòng)態(tài)的效果。時(shí)間軸也叫時(shí)間線，顧名思義，它是一條貫穿時(shí)間的軸。通過(guò)在這條時(shí)間軸上不同的時(shí)間部位放置不同的內(nèi)容，就可以實(shí)現(xiàn)網(wǎng)頁(yè)元素的動(dòng)態(tài)效果。利用時(shí)間軸，可以在頁(yè)面中創(chuàng)建出各種類型的動(dòng)態(tài)效果，這些效果是通過(guò)改變層的位置、大小、可見(jiàn)性、重疊順序等來(lái)實(shí)現(xiàn)的，所以說(shuō)時(shí)間軸是層的好幫手。9.5.1 時(shí)間軸介紹1.時(shí)間軸面板Dreamwe

28、aver MX時(shí)間軸是通過(guò)“時(shí)間軸”(Timeline)面板制作完成的?！皶r(shí)間軸”面板的主要功能是顯示層和圖像的屬性在一段時(shí)間內(nèi)如何更改。在Dreamweaver MX中，單擊“窗口”“其他”“時(shí)間軸”，可打開(kāi)“時(shí)間軸”面板。圖9-29所示為一個(gè)圖片的時(shí)間軸面板。圖9-29 時(shí)間軸面板時(shí)間軸面板中的各項(xiàng)參數(shù)的含義如下?！皶r(shí)間軸”彈出式菜單：是時(shí)間軸的選擇列表，在同一個(gè)文檔中可以設(shè)置多個(gè)時(shí)間軸，當(dāng)用戶創(chuàng)建多個(gè)時(shí)間軸時(shí)，利用該下拉列表可選擇當(dāng)前時(shí)間軸?！靶袨椤蓖ǖ溃菏菓?yīng)該在時(shí)間軸中特定幀處執(zhí)行的行為通道。動(dòng)畫(huà)條：顯示每個(gè)對(duì)象的動(dòng)畫(huà)持續(xù)時(shí)間。一個(gè)行可以包含表示不同對(duì)象的多個(gè)條。不同的條無(wú)法控制同一幀

29、中的同一對(duì)象。關(guān)鍵幀：是動(dòng)畫(huà)條中已經(jīng)為對(duì)象指定屬性(如位置)的幀。Dreamweaver會(huì)計(jì)算關(guān)鍵幀之間的中間值。小圓標(biāo)記表示關(guān)鍵幀?！皠?dòng)畫(huà)”通道：顯示用于制作層和圖像動(dòng)畫(huà)的條。2.播放選項(xiàng)“時(shí)間軸”面板的第一欄用于查看動(dòng)畫(huà)播放選項(xiàng)，如圖9-30所示。圖9-30 播放選項(xiàng)下面是用于查看動(dòng)畫(huà)的播放選項(xiàng)。倒帶：將播放欄移至?xí)r間軸中的第一幀。后退：將播放欄向左移動(dòng)一幀。單擊“后退”并按住鼠標(biāo)按鈕可向后播放。播放：將播放欄向右移動(dòng)一幀。單擊“播放”并按住鼠標(biāo)按鈕可向前播放。播放速度：在Fps文本框中設(shè)置每秒要播放的速度，默認(rèn)值為15幀/秒。該數(shù)值越小，播放速度越慢。動(dòng)畫(huà)的幀頻率等于幀總數(shù)(即長(zhǎng)度)除以

30、所持續(xù)的時(shí)間，即幀總數(shù)=持續(xù)時(shí)間(秒)×幀頻率。自動(dòng)播放：若選中該復(fù)選框，表示網(wǎng)頁(yè)打開(kāi)后，循環(huán)播放時(shí)間軸動(dòng)畫(huà)?！白詣?dòng)播放”將一個(gè)行為附加到頁(yè)的body標(biāo)簽，在頁(yè)加載時(shí)執(zhí)行“播放時(shí)間軸”操作。循環(huán)：若選中該復(fù)選框，表示網(wǎng)頁(yè)打開(kāi)后，循環(huán)播放時(shí)間軸動(dòng)畫(huà)?！把h(huán)”在動(dòng)畫(huà)的最后一幀之后將“轉(zhuǎn)到時(shí)間軸幀”行為插入到“行為”通道中。在“行為”通道中雙擊該行為的標(biāo)記可編輯此行為的參數(shù)并更改循環(huán)的次數(shù)。3.修改時(shí)間軸定義完時(shí)間軸的基本組成部分后，可以進(jìn)行一些更改，如添加和刪除幀、更改動(dòng)畫(huà)開(kāi)始時(shí)間等。若要修改時(shí)間軸，請(qǐng)執(zhí)行以下任一操作。·若要使動(dòng)畫(huà)的播放時(shí)間更長(zhǎng)，可結(jié)束幀標(biāo)記向右拖動(dòng)。動(dòng)畫(huà)中的

31、所有關(guān)鍵幀都會(huì)移動(dòng)，以保持其相對(duì)位置不變。若要防止其他關(guān)鍵幀移動(dòng)，按住Alt鍵并拖動(dòng)結(jié)束幀標(biāo)記。·若要使層更早或更晚地到達(dá)某一關(guān)鍵幀位置，可在動(dòng)畫(huà)條中將關(guān)鍵幀向左或向右移動(dòng)。·若要更改動(dòng)畫(huà)的開(kāi)始時(shí)間，可選擇一個(gè)或多個(gè)與該動(dòng)畫(huà)關(guān)聯(lián)的動(dòng)畫(huà)條(按Shift鍵可一次選擇多個(gè)動(dòng)畫(huà)條)，然后向左或向右移動(dòng)。·若要移動(dòng)整個(gè)動(dòng)畫(huà)軌跡的位置，可選擇整個(gè)動(dòng)畫(huà)條，然后在頁(yè)面上拖動(dòng)該對(duì)象。Dreamweaver MX會(huì)調(diào)整所有關(guān)鍵幀的位置。在整個(gè)動(dòng)畫(huà)條上所做出的任何更改將更改所有關(guān)鍵幀。·若要在時(shí)間軸上添加或刪除幀，可選擇“修改”“時(shí)間軸”“添加幀”或“修改”“時(shí)間軸”“移除幀

32、”菜單命令。·若要使時(shí)間軸在瀏覽器中打開(kāi)時(shí)自動(dòng)播放，可單擊“自動(dòng)播放”。·若要使時(shí)間軸連續(xù)循環(huán)，可單擊“循環(huán)”?！把h(huán)”將“轉(zhuǎn)到時(shí)間軸幀”操作插入到動(dòng)畫(huà)最后一幀后的“行為”通道。可以編輯此行為的參數(shù)以定義循環(huán)的次數(shù)。4.重命名時(shí)間軸若要重命名當(dāng)前在“時(shí)間軸”面板中顯示的時(shí)間軸，可執(zhí)行以下操作。(1)單擊“修改”“時(shí)間軸”“重命名時(shí)間軸”菜單命令。(2)在“重命名時(shí)間軸”對(duì)話框中輸入新的名稱，如圖9-31所示。圖9-31 “重命名時(shí)間軸”對(duì)話框5.用時(shí)間軸更改圖像和層的屬性除了可以用時(shí)間軸移動(dòng)層之外，還可以更改層的可見(jiàn)性、大小和層疊順序，并更改圖像的源文件。若要用時(shí)間軸更改圖

33、像和層的屬性，可執(zhí)行以下操作。(1)在“時(shí)間軸”面板中，執(zhí)行以下操作之一。·在控制要更改對(duì)象的動(dòng)畫(huà)條中選擇一個(gè)現(xiàn)有關(guān)鍵幀(起始幀和結(jié)束幀始終是關(guān)鍵幀)。·單擊動(dòng)畫(huà)條中部的一個(gè)幀并選擇“修改”“時(shí)間軸”“增加關(guān)鍵幀”菜單命令，創(chuàng)建一個(gè)新的關(guān)鍵幀?；蛘?，可以通過(guò)按住Ctrl鍵并單擊動(dòng)畫(huà)條中的一個(gè)幀來(lái)創(chuàng)建一個(gè)新的關(guān)鍵幀。(2)通過(guò)執(zhí)行以下操作之一定義對(duì)象的新屬性。·若要更改圖像的源文件，可單擊“屬性”面板中“源文件”文本框旁的文件夾圖標(biāo)，然后瀏覽到新圖像并將其選定。·若要更改層的可見(jiàn)性，可從屬性面板“顯示”文本框中的彈出式菜單選擇“inherit”(繼承)、“

34、invisible”(可見(jiàn))或“hidden”(隱藏)?；蛘撸部梢允褂谩皩印笨刂泼姘逯械难劬D標(biāo)來(lái)更改層的可見(jiàn)性。·若要更改層的大小，可拖動(dòng)該層的大小調(diào)整柄或在屬性檢查器的“寬”和“高”文本框中輸入新的值。并非所有瀏覽器都會(huì)動(dòng)態(tài)更改層的大小。·若要更改層的層疊順序，請(qǐng)?jiān)凇癦軸”文本框中輸入新值，或使用“層”面板更改當(dāng)前層的層疊順序。(3)按住“播放”按鈕以查看動(dòng)畫(huà)。6.使用多個(gè)時(shí)間軸若要管理多個(gè)時(shí)間軸，可執(zhí)行以下任一操作。·若要新建時(shí)間軸，可選擇“修改”“時(shí)間軸”“添加時(shí)間軸”菜單命令。·若要?jiǎng)h除選定的時(shí)間軸，可選擇“修改”“時(shí)間軸”“移除時(shí)間軸”菜單

35、命令。這將永久刪除選定時(shí)間軸中的所有動(dòng)畫(huà)。·若要重命名選定時(shí)間軸，可單擊“修改”“時(shí)間軸”“重命名時(shí)間軸”菜單命令，或者在“時(shí)間軸”面板上的“時(shí)間軸”彈出式菜單中輸入新的名稱。·若要在“時(shí)間軸”面板中查看另一個(gè)時(shí)間軸，可從“時(shí)間軸”面板上的“時(shí)間軸”彈出式菜單中選擇一個(gè)新的時(shí)間軸，如圖9-32所示。圖9-32 使用多個(gè)時(shí)間軸9.5.2 時(shí)間軸的應(yīng)用1.拷貝和粘貼動(dòng)畫(huà)如果有喜愛(ài)的動(dòng)畫(huà)序列，可以將其拷貝并粘貼到當(dāng)前時(shí)間軸的另一區(qū)域、同一文檔中的另一時(shí)間軸或者另一文檔中的時(shí)間軸。還可以同時(shí)拷貝并粘貼多個(gè)序列。若要剪切(或拷貝)并粘貼動(dòng)畫(huà)序列，可執(zhí)行以下操作。(1)單擊一個(gè)動(dòng)畫(huà)條以

36、選擇一個(gè)序列。若要選擇多個(gè)序列，可按住Shift鍵并單擊多個(gè)動(dòng)畫(huà)條；若要選擇所有序列，可按Ctrl+A鍵。(2)拷貝或剪切選定內(nèi)容。(3)執(zhí)行以下操作之一。·將播放欄移至當(dāng)前時(shí)間軸中的另一處。·從“時(shí)間軸”彈出式菜單中選擇另一個(gè)時(shí)間軸。·打開(kāi)另一個(gè)文檔或創(chuàng)建一個(gè)新文檔，然后在“時(shí)間軸”面板中單擊。(4)將選定內(nèi)容粘貼到時(shí)間軸中。同一對(duì)象的動(dòng)畫(huà)條不能重疊，因?yàn)橐粋€(gè)層不能同時(shí)處于兩個(gè)位置(一個(gè)圖像也不能同時(shí)具有兩個(gè)不同的源)。如果所粘貼的動(dòng)畫(huà)條與同一對(duì)象的另一動(dòng)畫(huà)條重疊，Dreamweaver MX會(huì)自動(dòng)將選定內(nèi)容移至第一個(gè)不重疊的幀。2.將動(dòng)畫(huà)序列應(yīng)用于另一對(duì)象為了

37、節(jié)約時(shí)間，可以只創(chuàng)建一次動(dòng)畫(huà)序列，然后將其應(yīng)用于文檔中剩余的每個(gè)層。若要將現(xiàn)有動(dòng)畫(huà)序列應(yīng)用于其他對(duì)象，可執(zhí)行以下操作。(1)在“時(shí)間軸”面板中選擇動(dòng)畫(huà)序列并將其拷貝。(2)單擊“時(shí)間軸”面板上的任一幀，然后在該幀處粘貼動(dòng)畫(huà)序列。(3)右擊粘貼的動(dòng)畫(huà)序列，然后在彈出的快捷菜單中選擇“改變對(duì)象”命令。(4)在出現(xiàn)的“更改對(duì)象”對(duì)話框中，選擇另一對(duì)象并單擊“確定”按鈕，如圖9-33所示。3.時(shí)間軸動(dòng)畫(huà)小技巧以下建議可以提高動(dòng)畫(huà)的性能并使動(dòng)畫(huà)更易于創(chuàng)建。(1)顯示和隱藏層，而不是更改多圖像動(dòng)畫(huà)的源文件由于新的圖像必須進(jìn)行下載，所以切換圖像的源文件會(huì)降低動(dòng)畫(huà)的速度。如果所有圖像都在動(dòng)畫(huà)運(yùn)行前在隱藏層中同

38、時(shí)下載，將不會(huì)出現(xiàn)明顯的停頓，并且不會(huì)缺少圖像。(2)擴(kuò)展動(dòng)畫(huà)條以創(chuàng)建更順暢的動(dòng)作如果動(dòng)畫(huà)斷斷續(xù)續(xù)并且圖像在不同位置之間跳動(dòng)，可拖動(dòng)該層動(dòng)畫(huà)條的結(jié)束幀，使動(dòng)作延伸到更多的幀。通過(guò)延長(zhǎng)動(dòng)畫(huà)條，可以在運(yùn)動(dòng)的開(kāi)始點(diǎn)和結(jié)束點(diǎn)之間創(chuàng)建更多的數(shù)據(jù)點(diǎn)，同時(shí)也會(huì)使對(duì)象更為緩慢地移動(dòng)。可嘗試增加每秒幀數(shù)(fps)以提高速度，但應(yīng)注意在普通系統(tǒng)上運(yùn)行的大多數(shù)瀏覽器都不能支持超過(guò)15fps的動(dòng)畫(huà)速度?？稍诓煌南到y(tǒng)上用不同的瀏覽器對(duì)動(dòng)畫(huà)進(jìn)行測(cè)試，以找到最佳的設(shè)置。(3)不要制作大型位圖的動(dòng)畫(huà)制作大型圖像的動(dòng)畫(huà)會(huì)導(dǎo)致動(dòng)畫(huà)速度減慢?？梢詣?chuàng)建合成圖像，并移動(dòng)圖像中較小的部分。例如，可以通過(guò)僅制作汽車輪胎的動(dòng)畫(huà)來(lái)顯示汽車的運(yùn)動(dòng)。(4)創(chuàng)建簡(jiǎn)單的動(dòng)畫(huà)不要?jiǎng)?chuàng)建對(duì)當(dāng)前瀏覽器要求過(guò)高的動(dòng)畫(huà)。即使在系統(tǒng)或Internet性能降低時(shí)，瀏覽器始終會(huì)播放時(shí)間軸動(dòng)畫(huà)中的每一幀。9.5.3 創(chuàng)建時(shí)間軸動(dòng)畫(huà)要?jiǎng)?chuàng)建時(shí)間軸