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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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