1、第7章 使用層和時間軸,本章簡介： 如果用戶想在網(wǎng)頁上實現(xiàn)多個元素重疊的效果，可以使用層。層是網(wǎng)頁中的一個區(qū)域，并且游離在文檔之上。利用層可精確定位和重疊網(wǎng)頁元素。通過設置不同層的顯示或隱藏，實現(xiàn)特殊的效果。 Dreamweaver CS3提供了在網(wǎng)頁上制作動態(tài)效果的功能，利用時間軸組織、控制層和圖像等對象，在一定時間內播放，從而產(chǎn)生動態(tài)效果。,層的引入,在網(wǎng)頁設計當中，層的概念的引入主要表現(xiàn)出兩大優(yōu)勢： 在層出現(xiàn)之前，所有頁面的布局具有很大的空間局限性，早期的網(wǎng)頁設計人員一般用表格來控制圖形等網(wǎng)頁元素的位置。但是如果要精確定位一個圖形，則必須在表格內進行表格嵌套，使設計變得十分復雜。當層出現(xiàn)

2、以后，定位技術及其相關的設計就變的非常容易實現(xiàn)了。 在層出現(xiàn)之前，所有的網(wǎng)頁設計和制作都是在同一個平面內進行的，可以利用的空間和設計的技術手段都十分有限，人們不得不在有限的空間對頁面進行細致的略顯繁瑣布局規(guī)劃，而在層出現(xiàn)之后，網(wǎng)頁設計的空間由二維拓展成了三維，從而大大增加了設計人員的自由空間。,層的理解,網(wǎng)頁中的層，就好像一張張透明的畫布，每張畫布都畫著一些獨立的色彩，而一幅完整的畫就是由許多張這樣的畫布疊加在一起組成的，每一個層的色彩都能夠和其它層進行疊加，而修改其中的某一層卻不會影響其他層的效果，這就是層的概念核心，也體現(xiàn)了層的作用。,課堂學習目標,層的基本操作 應用層設計表格 時間軸動畫

3、 制作時間軸動畫的技巧,7.1 層的基本操作,課堂案例圣誕禮品屋 創(chuàng)建層 選擇層 設置層的默認屬性 AP元素面板 更改層的堆疊順序 更改層的可見性 調整層的大小 嵌套層 移動層 對齊層 層靠齊到網(wǎng)格,7.1.1 課堂案例圣誕禮品屋,使用“繪制 AP Div”按鈕繪制層。使用“AP元素”控制面板選擇層。使用“背景顏色”按鈕改變層的背景顏色。,7.1.2 創(chuàng)建層,若想利用層來定位網(wǎng)頁元素，先要創(chuàng)建層，再根據(jù)需要在層內插入其他表單元素。有時為了布局，還可以顯示或隱藏層邊框。 創(chuàng)建層 單擊“插入”面板“布局”選項卡中的“繪制AP Div”按鈕，在文檔窗口中拖曳鼠標繪制。 將“插入”面板“布局”選項卡中

4、的“繪制AP Div”按鈕拖曳到文檔窗口中。 將光標放置文檔窗口中，選擇“插入記錄布局對象AP Div”命令。,如果需要連續(xù)繪制新的層？,單擊“插入”面板“布局”選項卡中的“繪制AP Div”按鈕，在文檔窗口中，按住Ctrl鍵的同時拖曳鼠標左鍵繪制層。只要不放Ctrl鍵，就可以連續(xù)繪制新的層。,7.1.2 創(chuàng)建層,在默認情況下，每當用戶創(chuàng)建一個新的層，都會使用DIV標志它，并將層標記顯示到網(wǎng)頁左上角的位置。 若要顯示層標記？ 編輯首選參數(shù)AP元素的錨點 查看可視化助理不可見元素,7.1.2 創(chuàng)建層,顯示或隱藏層邊框 若要顯示或隱藏層邊框，可選擇“查看 可視化助理 隱藏所有”命令。,7.1.3

5、選擇層,選擇一個層 （1）利用層面板選擇一個層。 窗口AP元素 （2）在文檔窗口中選擇一個層。 單擊層的邊框 按住Ctrl+shift，在層中單擊 單擊選擇柄,7.1.3 選擇層,選定多個層 選擇“窗口 AP元素”命令，彈出“AP元素”控制面板。在“AP元素”控制面板中，按住鍵并單擊兩個或更多的層名稱。 在文檔窗口中按住鍵并單擊兩個或更多個層的邊框。當選定多個層時，當前層的大小調整柄以藍色突出顯示，其它層的大小調整柄則以白色顯示，并且只能對當前層進行操作。,7.1.4 設置層的默認屬性,當層插入后，其屬性為默認值，如果想查看或修改層的屬性，選擇“編輯 首選參數(shù)”命令。 “顯示”選項：設置層的初

6、始顯示狀態(tài)。 Default：默認值，一般情況下，大多數(shù)瀏覽器都會默認為“inherit”。 Inherit：繼承父級層的顯示屬性。 Visible：表示不管父級層是什么都顯示層的內容。 Hidden：表示不管父級層是什么都隱藏層的內容。 “嵌套”：設置在層出現(xiàn)重疊時，是否采用嵌套方式。,7.1.5 AP元素面板,通過“AP元素”控制面板可以管理網(wǎng)頁文檔中的層。選擇“窗口 AP元素”命令，啟用“AP元素”控制面板。 使用“AP元素”控制面板可以防止層重疊，更改層的可見性，將層嵌套或層疊，以及選擇一個或多個層。,7.1.6 更改層的堆疊順序,排版時常需要控制疊放在一起的不同網(wǎng)頁元素的顯示順序，以

7、實現(xiàn)特殊的效果，這可通過修改選定層的“Z軸”屬性值實現(xiàn)。層的顯示順序與Z軸值的順序一致。Z值越大，層的位置越靠上前。 在“AP元素”控制面板中更改層的堆疊順序 在“屬性”面板中更改層的堆疊順序,7.1.7 更改層的可見性,當處理文檔時，可以使用“AP元素”控制面板手動設置顯示或隱藏層，來查看層在不同條件下的顯示方式。更改層的可見性，有以下幾種方法。 使用“AP元素”控制面板更改層的可見性。 單擊眼形圖標，可以更改其可見性。 眼睛睜開表示該層是可見的； 眼睛閉合表示該層是不可見的； 如果沒有眼形圖標，該層通常會繼承其父級的可見性。如果層沒有嵌套，父級就是文檔正文，而文檔正文始終是可見的，因此層默

8、認是可見的。,7.1.7 更改層的可見性,使用“屬性”面板更改層的可見性。 選中一個或多個層，在“屬性”面板中的“可見性”選項中進行選擇： Visible：無論父級如何設置都顯示層的內容； Hidden:無論父級如何設置都隱藏層的內容； Inherit：繼承父級層的顯示屬性，若父級屬性可見則顯示該層，若父級層不可見則隱藏該層。,7.1.8 調整層的大小,可以調整單個層的大小，也可以同時調整多個層的大小以使它們具有相同的寬度和高度。 調整單個層的大小 選中一個層： 應用鼠標拖曳 應用鍵盤移動：同時按住和鍵盤上的方向鍵，可調整一個像素的大小。 應用網(wǎng)格靠齊方式：同時按住和鍵盤上的方向鍵，可按網(wǎng)格靠

9、齊增量來調整大小。 應用修改屬性值的方法：在“屬性”面板中，修改“寬”和“高”。,7.1.8 調整層的大小,同時調整多個層的大小 選擇多個層： 應用菜單命令：選擇“修改排列順序設成寬度相同或高度”命令。 應用快捷鍵：按，以當前層為標準同時調整多個層的寬度或高度。 應用修改屬性值方式：在“屬性”面板中，修改“寬”和“高”。,7.1.9 嵌套層,嵌套層指代碼包含在另一個層中的層。嵌套通常用于將層組織在一起。 創(chuàng)建嵌套層 應用菜單命令：將插入點放在現(xiàn)有層中，選擇“插入記錄布局對象AP Div”命令。 應用按鈕繪制：拖曳“插入”面板中的“布局”選項卡中的“繪制AP Div”按鈕，將其放置在現(xiàn)有層中。

10、修改“首選參數(shù)”：修改“首選參數(shù)”對話框中“AP元素”選項，選擇“在AP Div中創(chuàng)建以后嵌套”復選框，單擊“繪制AP Div”按鈕，然后拖曳鼠標在現(xiàn)有層中繪制一個層。,7.1.9 嵌套層,將現(xiàn)有層嵌套在另一個層中 啟用“AP元素”控制面板 在控制面板中選擇一個層，按住Ctrl鍵的同時拖曳鼠標，將其移動到“AP元素”控制面板的目標層上，當目標層的名稱突出顯示時，松開鼠標左鍵，即完成嵌套操作。,7.1.9 嵌套層,層嵌套的注意事項 嵌套層并不意味著一層位于另一層內的顯示效果，嵌套層的本質是一層的HTML代碼嵌套與另一層的HTML代碼之內?？梢杂猛弦返姆椒ㄅ袛鄡蓚€或多個層是否嵌套，嵌套層隨其父級層

11、一起移動，并且繼承其父級層的可見性。,7.1.10 移動層,移動層的操作非常簡單，可以按照在大多數(shù)圖形應用程序中移動對象的相同方法在“設計”視圖中移動層。移動一個或多個選定層有以下幾種方法。首先要選中要移動的層： 拖曳選擇柄來移動層 移動一個像素來移動層 使用方向鍵，直接以一個像素來移動層； 按住鍵的同時按方向鍵，則按當前網(wǎng)格靠齊增量來移動層的位置。,7.1.11 對齊層,使用層對齊命令可以當前層的邊框為基準對齊一個或多個層。當對選定層進行對齊時，未選定的子層可能會因為其父層被選定并移動而隨之移動。為了避免這種情況，不要使用嵌套層。對齊兩個或更多個層有以下幾種方法。 應用菜單命令對齊層 在文檔

12、窗口中選擇多個層，選擇“修改排列順序”命令。 應用“屬性”面板對齊層 在文檔窗口中選擇多個層，在屬性面板的 “上”輸入具體值，則以多個層的上邊線相對于頁面頂部的位置來對齊。,7.1.12 層靠齊到網(wǎng)格,在移動網(wǎng)頁元素時可以讓其自動靠齊到網(wǎng)格，還可以通過指定網(wǎng)格設置來更改網(wǎng)格或控制靠齊行為。無論網(wǎng)格是否可見，都可以使用靠齊。 應用Dreamweaver CS3中的靠齊功能，層與網(wǎng)格之間的關系如鐵塊與磁鐵之間的關系。層與網(wǎng)格線之間靠齊的距離是可以設定的。 層靠齊到網(wǎng)格 查看網(wǎng)格設置靠齊到網(wǎng)格 選擇一個層并拖曳它，當拖曳它靠近網(wǎng)格線一定距離時，該層會自動跳到最近的靠齊位置。,7.1.12 層靠齊到網(wǎng)

13、格,更改網(wǎng)格設置 查看網(wǎng)格設置網(wǎng)格設置,7.2 應用層設計表格,將AP Div轉換為表格 將表格轉換為AP Div,因為早期版本的瀏覽器不能顯示使用層布局的網(wǎng)頁，為了實現(xiàn)較復雜的效果又需要將早期使用表格布局的網(wǎng)頁轉換成層。,7.2.1 將AP Div轉換為表格,將AP Div轉換為表格 若將AP Div轉換為表格，則選擇“修改 轉換 將AP Div轉換為表格”命令，彈出“將AP Div轉換為表格”對話框，根據(jù)需要完成設置后，單擊“確定”按鈕。,7.2.1 將AP Div轉換為表格,防止層重疊 因為表單元格不能重疊，所以Dreamweaver CS3無法從重疊層創(chuàng)建表格。如果要將一個文檔中的層轉

14、換為表格以兼容IE 3.0瀏覽器，則選擇“防止重疊”選項來約束層的移動和定位，使層不會重疊。,7.2.2 將表格轉換為AP Div,當不滿意頁面布局時，就需要對其進行調整，但層布局要比表格布局調整起來方便，所以需要將表格轉換為AP Div。 若將表格轉換為AP Div，則選擇“修改 轉換 將表格轉換為AP Div”命令，彈出“將表格轉換為AP Div”對話框，根據(jù)需要完成設置后，單擊“確定”按鈕。,不能轉換單個表格或層，只能將整個網(wǎng)頁的層轉換為表格或將整個網(wǎng)頁的表格轉換為層。,將表格轉換為AP Div,7.3 時間軸動畫,時間軸也叫時間線，顧名思義，它是一條貫穿時間的線，用來表示網(wǎng)頁顯示時間內

15、發(fā)生的各種狀態(tài)，在時間軸上不同時間部位放置不同的內容，就可以實現(xiàn)網(wǎng)頁的動態(tài)效果。在不使用時間軸的情況下，要實現(xiàn)網(wǎng)頁中元素的移動，需要寫出非常復雜的代碼。使用時間軸去實現(xiàn)它們則非常簡單。其主要原因就在于它是通過向文檔中添加JavaScript代碼實現(xiàn)動態(tài)效果的，不需要其他控件、插件或Java小程序的支持，具有很好的兼容性。,7.3 時間軸動畫,動畫是由一系列靜止圖像連續(xù)播放，利用人類眼睛的“視覺暫留”特性形成的。時間軸動畫是通過讓層的位置、可見性和疊加順序等屬性隨時間變化所生成的動畫。 它的基本原理是：使層中的內容在一定時間內，按照設計好的路線顯示在頁面中。 時間軸里的層叫做動畫欄，時間軸的基本

16、單位是幀，整個時間軸由許多幀構成，這些幀在頁面中連續(xù)播放就構成了時間軸動畫。 由時間軸的原理可知，時間軸必須與層結合起來使用。創(chuàng)建動畫的時候，各種元素先放置到層中，然后再結合時間軸創(chuàng)建動態(tài)效果。,7.3 時間軸動畫,課堂案例卡通動畫網(wǎng) “時間軸”面板 使用時間軸移動層 錄制層路徑 控制動畫播放 修改關鍵幀 添加、刪除幀 課堂案例精品家居網(wǎng) 用時間軸改變圖像與層的屬性,7.3 時間軸動畫,課堂案例卡通動畫網(wǎng) “時間軸”面板 使用時間軸移動層 錄制層路徑 控制動畫播放 修改關鍵幀 添加、刪除幀 課堂案例精品家居網(wǎng) 用時間軸改變圖像與層的屬性,7.3.1 課堂案例卡通動畫網(wǎng),使用“時間軸”面板制作層

17、動畫效果。使用“記錄AP元素的路徑”命令制作層沿著繪制的路徑移動效果。,效果圖,7.3.2 “時間軸”面板,“時間軸”面板用于顯示層與圖像隨時間變化的屬性。 選擇“窗口 時間軸”命令，可以啟用“時間軸”面板。,“時間軸”面板,7.3.2 “時間軸”面板,時間軸 下拉列表,回首幀,后退,播放一幀，按住不放，可播放動畫,當前播放幀,時間軸,動畫通道,每秒播放幀數(shù),動畫欄,關鍵幀,行為通道,7.3.3 使用時間軸移動層,最常見的時間軸動畫都涉及到沿著一條軌跡移動層。時間軸只能移動層，若要使圖像或文本移動，必須先創(chuàng)建一個層，然后在該層中插入圖像、文本或其他任何類型的內容。,7.3.3 使用時間軸移動層

18、,使用時間軸制作層動畫的具體操作步驟如下： （1）創(chuàng)建一個層，并在層中插入一張圖片； （2）啟動“時間軸”面板； （3）選中當前創(chuàng)建的層，將層拖曳到“時間軸”面板中適當?shù)膸柼?；（添加對象到“時間軸”面板） （4）在“時間軸”面板中拖曳結束關鍵幀到適當?shù)膸蛱柼?，以確定動畫的播放時間； （5）選定結束關鍵幀，在頁面中拖曳層到動畫的結束位置，文檔窗口中顯示動畫運動的直線路徑； （6）若要制作曲線軌跡的動畫，需要在時間軸上添加關鍵幀； （7）按住“時間軸”面板中的“播放”按鈕不放，在頁面中預覽動畫效果。,7.3.3 使用時間軸移動層,添加對象到“時間軸”面板的幾種方法： 將層直接拖曳到“時間軸”面

19、板中，然后釋放鼠標； 選中要添加的層，單擊“時間軸”面板右上角的按鈕，在彈出的菜單中選擇“添加對象”命令； 選中要添加的層，選擇“修改時間軸增加對象到時間軸”命令； 選中要添加的層，在“時間軸”面板中單擊鼠標右鍵，在彈出的菜單欄中選擇“添加對象”命令。,返回,7.3.3 使用時間軸移動層,關鍵幀：在動畫中可以影響到整個動畫效果的幀。 如何添加關鍵幀以制作曲線軌跡的動畫： 按住的同時在時間軸適當幀序號處單擊鼠標左鍵； 在網(wǎng)頁中拖曳層到適當?shù)奈恢茫梢钥吹轿臋n區(qū)中的直線軌跡變成曲線狀。,返回,7.3.4 錄制層路徑,如果想制作沿任意軌跡運動的動畫，可以使用“錄制層路徑”命令。 （1）在文檔中插入一個層，并在層中插入一張圖片。在文檔窗口中將層移至動畫開始時應處于的位置，并將播放頭放置在“時間軸”面板中適當?shù)膸蛱柼帯?（2）選擇“修改 時間軸 錄制AP元素路徑”命令。在文檔中拖曳該層，拖曳的軌跡為層運動的路徑。 （3）在動畫停止