第10章使用層和時(shí)間軸

本章將介紹層和時(shí)間軸的基本知識(shí)以及使用它們創(chuàng)建動(dòng)畫的基本方法。

第10章使用層和時(shí)間軸教學(xué)目標(biāo)了解層的概念和【層】面板的使用方法。掌握創(chuàng)建和編輯層的基本方法。掌握【時(shí)間軸】面板的使用方法。掌握使用層和時(shí)間軸創(chuàng)建動(dòng)畫的方法。10.1創(chuàng)建層本節(jié)主要內(nèi)容：認(rèn)識(shí)層創(chuàng)建層設(shè)置層屬性10.1.1

認(rèn)識(shí)層層是一種能夠隨意定位的頁(yè)面元素，如同浮動(dòng)在頁(yè)面里的透明層，可以將層放置在頁(yè)面的任何位置。在網(wǎng)頁(yè)制作中，可以使用層將許多對(duì)象進(jìn)行重疊，從而使其產(chǎn)生層次感。層與Div標(biāo)簽還有一定的聯(lián)系，它們的共同點(diǎn)是在源代碼中都都使用HTML標(biāo)簽<div>…</div>進(jìn)行標(biāo)識(shí)，不同的是Div標(biāo)簽是相對(duì)定位的，不能重疊，而層是絕對(duì)定位的，可以重疊。層和Div標(biāo)簽兩者可以相互轉(zhuǎn)換，轉(zhuǎn)換的方法是，在【CSS規(guī)則定義】對(duì)話框的【定位】分類中，將【類型】選項(xiàng)設(shè)置為“絕對(duì)”，即表示層，否則即為Div標(biāo)簽，這是層與Div標(biāo)簽轉(zhuǎn)換的關(guān)鍵因素。在插入層時(shí)，層同時(shí)被賦予了CSS樣式，通過【屬性】面板還可以修改這些CSS樣式，而插入Div標(biāo)簽時(shí)，需要再單獨(dú)創(chuàng)建CSS樣式對(duì)它進(jìn)行控制，而且也不能通過【屬性】面板設(shè)置其CSS樣式。10.1.1

認(rèn)識(shí)層Div標(biāo)簽和層的外觀和源代碼。10.1.2

創(chuàng)建層一、創(chuàng)建層? 選擇【插入】/【布局對(duì)象】/【層】命令，插入一個(gè)默認(rèn)大小的層。? 將【插入】/【布局】面板上的（繪制層）按鈕拖動(dòng)到文檔窗口中，插入一個(gè)默認(rèn)大小的層。? 單擊【插入】/【布局】面板上的（繪制層）按鈕，并將光標(biāo)移至文檔窗口中，當(dāng)光標(biāo)變?yōu)樾螤顣r(shí)拖曳光標(biāo)，繪制一個(gè)自定義大小的層。? 如果想一次繪制多個(gè)層，在單擊（繪制層）按鈕后，按住Ctrl鍵不放，連續(xù)進(jìn)行繪制即可。10.1.2

創(chuàng)建層二、選擇層1、在【層】面板中單擊層的名稱選中層。10.1.2

創(chuàng)建層2、單擊文檔中的圖標(biāo)來選定層，如果該圖標(biāo)沒有顯示，可在【首選參數(shù)】/【不可見元素】分類中勾選【層錨記】復(fù)選框。10.1.2

創(chuàng)建層3、將光標(biāo)置于層內(nèi)，然后在文檔窗口底邊的標(biāo)簽條中選擇相應(yīng)的HTML標(biāo)簽。10.1.2

創(chuàng)建層4、單擊層的邊框線選中層。10.1.2

創(chuàng)建層三、縮放層1、選定層，然后拖動(dòng)縮放手柄（層周圍出現(xiàn)的小方塊）來改變層的尺寸。拖動(dòng)上或下手柄改變層的高度，拖動(dòng)左或右手柄改變層的寬度，拖動(dòng)4個(gè)角的任意一個(gè)縮放點(diǎn)同時(shí)改變層的寬度和高度。10.1.2

創(chuàng)建層2、選定層，然后按住Ctrl鍵，每按一次方向鍵，層就被改變一個(gè)像素值。3、選定層，然后同時(shí)按住Shift＋Ctrl鍵，每按一次方向鍵，層就被改變10個(gè)像素值。如果同時(shí)對(duì)多個(gè)層的大小進(jìn)行統(tǒng)一調(diào)整，方法是，按住Shift鍵，將所有的層逐一選定，然后在【屬性】面板的【寬】文本框內(nèi)輸入數(shù)值，按Enter鍵確認(rèn)。此時(shí)文檔窗口中所有層的寬度全部變成了指定的寬度。還可以使用【修改】/【排列順序】/【設(shè)成寬度相同】命令來統(tǒng)一寬度，利用這種方法將以最后選定的層的寬度為標(biāo)準(zhǔn)。10.1.2

創(chuàng)建層四、移動(dòng)層? 選定層后，當(dāng)光標(biāo)靠近縮放手柄出現(xiàn)時(shí)，按住鼠標(biāo)左鍵不放并進(jìn)行拖動(dòng)，層將跟著鼠標(biāo)的移動(dòng)而發(fā)生位移。? 選定層，然后按4個(gè)方向鍵向4個(gè)方向移動(dòng)層。每按一次方向鍵，將使層移動(dòng)1個(gè)像素值的距離。? 選定層，按住Shift鍵，然后按4個(gè)方向鍵，向4個(gè)方向移動(dòng)層。每按一次方向鍵，將使層移動(dòng)10個(gè)像素值的距離。10.1.2

創(chuàng)建層五、對(duì)齊層對(duì)齊層的方法是，首先將所有層選定，然后選擇【修改】/【排列順序】中的相應(yīng)命令即可。? 【左對(duì)齊】：以最后選定的層的左邊線為標(biāo)準(zhǔn)，對(duì)齊排列層。? 【右對(duì)齊】：以最后選定的層的右邊線為標(biāo)準(zhǔn)，對(duì)齊排列層。? 【對(duì)齊上緣】：以最后選定的層的頂邊為標(biāo)準(zhǔn)，對(duì)齊排列層。? 【對(duì)齊下緣】：以最后選定的層的底邊為標(biāo)準(zhǔn)，對(duì)齊排列層。10.1.3

設(shè)置層屬性插入層后，還需要設(shè)置層的屬性，這樣它才會(huì)更符合要求。10.2使用時(shí)間軸認(rèn)識(shí)時(shí)間軸創(chuàng)建時(shí)間軸動(dòng)畫錄制層路徑本節(jié)主要內(nèi)容：10.2.1

認(rèn)識(shí)時(shí)間軸時(shí)間軸是通過計(jì)算機(jī)技術(shù)，依據(jù)時(shí)間順序，把一方面或多方面的事件串聯(lián)起來，形成相對(duì)完整的記錄體系，運(yùn)用圖文的形式呈現(xiàn)給用戶。在Dreamweaver中，【時(shí)間軸】面板是創(chuàng)建時(shí)間軸動(dòng)畫的關(guān)鍵。選擇【窗口】/【時(shí)間軸】命令即可打開【時(shí)間軸】面板。10.2.1

認(rèn)識(shí)時(shí)間軸動(dòng)畫的基本單位叫做幀，將很多幀按照時(shí)間先后順序連接起來就形成了動(dòng)畫，而時(shí)間軸用來排列幀。在動(dòng)畫中有些幀非常關(guān)鍵，可以影響整個(gè)動(dòng)畫，這樣的幀叫做關(guān)鍵幀。關(guān)鍵幀的概念來源于傳統(tǒng)的卡通片制作。在早期，熟練的動(dòng)畫師設(shè)計(jì)卡通片中的關(guān)鍵畫面，也即所謂的關(guān)鍵幀，然后由一般的動(dòng)畫師設(shè)計(jì)中間幀。在三維計(jì)算機(jī)動(dòng)畫中，中間幀的生成由計(jì)算機(jī)來完成。所有影響畫面圖像的參數(shù)都可成為關(guān)鍵幀的參數(shù)，如位置、旋轉(zhuǎn)角、紋理的參數(shù)等。關(guān)鍵幀技術(shù)是計(jì)算機(jī)動(dòng)畫中最基本并且運(yùn)用最廣泛的方法。10.2.2創(chuàng)建時(shí)間軸動(dòng)畫一、使用層創(chuàng)建時(shí)間軸動(dòng)畫（1）選中層，然后選擇【修改】/【時(shí)間軸】/【增加對(duì)象到時(shí)間軸】命令，將對(duì)象添加到時(shí)間軸。（2）調(diào)整動(dòng)畫條的長(zhǎng)度，然后設(shè)置最后一幀層的【左】和【上】屬性。（3）根據(jù)需要在動(dòng)畫條的中間增加關(guān)鍵幀并設(shè)置層的【左】和【上】屬性。10.2.2創(chuàng)建時(shí)間軸動(dòng)畫（4）如果需要在動(dòng)畫運(yùn)動(dòng)過程中變換圖像，可單擊時(shí)間軸的第1幀，然后選中層中的圖像，接著選擇【修改】/【時(shí)間軸】/【增加對(duì)象到時(shí)間軸】命令將其添加到時(shí)間軸中，調(diào)整播放長(zhǎng)度，然后在適當(dāng)位置增加一個(gè)關(guān)鍵幀，最后在圖像【屬性】面板中將圖像修改為其他圖像。（5）在【時(shí)間軸】面板中設(shè)置動(dòng)畫為自動(dòng)循環(huán)播放，即勾選【自動(dòng)播放】和【循環(huán)】復(fù)選框。10.2.2創(chuàng)建時(shí)間軸動(dòng)畫二、將對(duì)象添加到【時(shí)間軸】面板的方法? 選擇【修改】/【時(shí)間軸】/【增加對(duì)象到時(shí)間軸】命令。? 將層直接拖曳到【時(shí)間軸】面板中。? 單擊【時(shí)間軸】面板右上角的按鈕，在快捷菜單中選擇【添加對(duì)象】命令。三、在時(shí)間軸中添加或移除幀的方法? 選擇【修改】/【時(shí)間軸】/【添加幀】或【刪除幀】命令，在播放頭右邊加入或刪除1幀。也可以使用右鍵菜單命令進(jìn)行操作。? 選擇【修改】/【時(shí)間軸】/【增加關(guān)鍵幀】命令，在當(dāng)前播放頭位置增加關(guān)鍵幀；選定關(guān)鍵幀，選擇【修改】/【時(shí)間軸】/【刪除關(guān)鍵幀】命令，將當(dāng)前關(guān)鍵幀刪除。也可以使用右鍵菜單命令進(jìn)行操作。10.2.2創(chuàng)建時(shí)間軸動(dòng)畫四、修改時(shí)間軸?

若要使動(dòng)畫的播放時(shí)間更長(zhǎng)，可將結(jié)束幀標(biāo)記向右拖動(dòng)。動(dòng)畫中的所有關(guān)鍵幀都會(huì)相應(yīng)移動(dòng)，若要阻止其他關(guān)鍵幀移動(dòng)，可按住Ctrl鍵不放再拖動(dòng)結(jié)束幀標(biāo)記。? 播放時(shí)間軸動(dòng)畫時(shí)，若要使層更早或更晚地到達(dá)某一關(guān)鍵幀位置，可在動(dòng)畫條中將關(guān)鍵幀向左或向右移動(dòng)。? 若要更改動(dòng)畫的開始時(shí)間，請(qǐng)選擇一個(gè)或多個(gè)與該動(dòng)畫關(guān)聯(lián)的動(dòng)畫條（按Shift可一次選擇多個(gè)動(dòng)畫條），然后向左或向右移動(dòng)。? 若要在頁(yè)面中移動(dòng)整個(gè)動(dòng)畫運(yùn)行軌跡的位置，可在【時(shí)間軸】面板中選擇整個(gè)動(dòng)畫條，然后在頁(yè)面上拖動(dòng)該對(duì)象。Dreamweaver會(huì)調(diào)整所有關(guān)鍵幀的位置。在整個(gè)動(dòng)畫條上所做出的任何更改將更改所有關(guān)鍵幀。10.2.3錄制層路徑如果需要?jiǎng)?chuàng)建具有復(fù)雜運(yùn)動(dòng)路徑的動(dòng)畫，逐個(gè)創(chuàng)建關(guān)鍵幀會(huì)花費(fèi)許多時(shí)間。使用記錄AP元素的路徑功能來創(chuàng)建復(fù)雜運(yùn)動(dòng)軌跡的動(dòng)畫。在文檔中選中層，然后選擇【修改】/【時(shí)間軸】/【錄制層路徑】命令，并在頁(yè)面上拖動(dòng)層來錄制層移動(dòng)的軌跡，在動(dòng)畫停止的地方釋放鼠標(biāo)左鍵，Dreamweaver將自動(dòng)在【時(shí)間軸】面板中添加對(duì)象，并且較為合理地創(chuàng)建一定數(shù)目的關(guān)鍵幀。10.2.3錄制層路徑在創(chuàng)建時(shí)間軸動(dòng)畫時(shí)需要講究一些小技巧的應(yīng)用，以下幾點(diǎn)可以提高動(dòng)畫的性能。? 使用顯示和隱藏層，而不是更改多圖像動(dòng)畫的源文件。由于新的圖像必須進(jìn)行下載，所以切換圖像的源文件會(huì)降低動(dòng)畫的速度。如果所有圖像都在動(dòng)畫運(yùn)行前在隱藏層中同時(shí)下載，將不會(huì)出現(xiàn)明顯的停頓，并且不會(huì)缺少圖像。? 擴(kuò)展動(dòng)畫條以創(chuàng)建更順暢的動(dòng)作。如果動(dòng)畫斷斷續(xù)續(xù)并且圖像在不同位置之間跳動(dòng)，可拖動(dòng)該層動(dòng)畫條的結(jié)束幀，使動(dòng)作延伸到更多的幀。通過延長(zhǎng)動(dòng)畫條，可以在運(yùn)動(dòng)的開始點(diǎn)和結(jié)束點(diǎn)之間創(chuàng)建更多的數(shù)據(jù)點(diǎn)，同時(shí)也會(huì)使對(duì)象更為緩慢地移動(dòng)。可嘗試增加每秒幀數(shù)(fps)以提高速度，但應(yīng)注意在