第6章頁(yè)面布局、層、行為和時(shí)間軸的使用

1、 6.3.3層的基本操作層的基本操作 利用層可以精確的定位網(wǎng)頁(yè)元素，包括如何選擇層，設(shè)置利用層可以精確的定位網(wǎng)頁(yè)元素，包括如何選擇層，設(shè)置 層的背景顏色、改變層的可見(jiàn)性等基本操作。層的背景顏色、改變層的可見(jiàn)性等基本操作。 6.3.4 應(yīng)用層排版應(yīng)用層排版 雖然通過(guò)層定位網(wǎng)頁(yè)元素比表格方便很多，但由于受到瀏雖然通過(guò)層定位網(wǎng)頁(yè)元素比表格方便很多，但由于受到瀏 覽器版本的限制不是所有的瀏覽器都支持層，只有覽器版本的限制不是所有的瀏覽器都支持層，只有IE4.0以以 上的版本才能支持，上的版本才能支持，Dreamweaver8.0提供了層和表格相提供了層和表格相 互轉(zhuǎn)換功能，可以最大程度方便網(wǎng)頁(yè)設(shè)計(jì)，同

2、時(shí)兼顧低版本互轉(zhuǎn)換功能，可以最大程度方便網(wǎng)頁(yè)設(shè)計(jì)，同時(shí)兼顧低版本 瀏覽器的訪問(wèn)者。瀏覽器的訪問(wèn)者。 將層轉(zhuǎn)換為表格將層轉(zhuǎn)換為表格 2.將表格轉(zhuǎn)換為層將表格轉(zhuǎn)換為層 給出網(wǎng)頁(yè)的頁(yè)面如下：給出網(wǎng)頁(yè)的頁(yè)面如下： 6.3.5實(shí)踐技能訓(xùn)練實(shí)踐技能訓(xùn)練1-利用層布局頁(yè)面板面利用層布局頁(yè)面板面 制作后的效果如下：制作后的效果如下： 6.3.5實(shí)踐技能訓(xùn)練實(shí)踐技能訓(xùn)練1-利用層布局頁(yè)面板面利用層布局頁(yè)面板面 給出的網(wǎng)頁(yè)如下：給出的網(wǎng)頁(yè)如下： 6.3.6 實(shí)踐技能訓(xùn)練實(shí)踐技能訓(xùn)練2-利用層制作下拉菜單利用層制作下拉菜單 制作后的效果如下：制作后的效果如下： 6.3.6 實(shí)踐技能訓(xùn)練實(shí)踐技能訓(xùn)練2-利用層制作下拉

3、菜單利用層制作下拉菜單 6.4.1時(shí)間軸的概念時(shí)間軸的概念 時(shí)間軸通過(guò)在不同的時(shí)間改變層的位置、大小、可見(jiàn)時(shí)間軸通過(guò)在不同的時(shí)間改變層的位置、大小、可見(jiàn) 性和疊放順序可以實(shí)現(xiàn)動(dòng)畫(huà)效果。這就是動(dòng)態(tài)性和疊放順序可以實(shí)現(xiàn)動(dòng)畫(huà)效果。這就是動(dòng)態(tài)HTML的表的表 達(dá)方式，也是達(dá)方式，也是Dreamweaver8-0強(qiáng)于其它網(wǎng)頁(yè)編輯器的強(qiáng)于其它網(wǎng)頁(yè)編輯器的 地方。地方。 “時(shí)間軸時(shí)間軸”只能對(duì)只能對(duì)“層層”發(fā)生作用，因此，如果要產(chǎn)發(fā)生作用，因此，如果要產(chǎn) 生動(dòng)畫(huà)效果，首先要?jiǎng)?chuàng)建層，再將圖像、文本等內(nèi)容插入生動(dòng)畫(huà)效果，首先要?jiǎng)?chuàng)建層，再將圖像、文本等內(nèi)容插入 到層中，然后通過(guò)層來(lái)移動(dòng)這些元素。到層中，然后通過(guò)層

4、來(lái)移動(dòng)這些元素。 在在Dreamweaver8-0中為我們提供了時(shí)間軸的功中為我們提供了時(shí)間軸的功 能，它是將動(dòng)態(tài)的能，它是將動(dòng)態(tài)的DHTM功能轉(zhuǎn)換為類(lèi)似動(dòng)畫(huà)編輯的時(shí)間功能轉(zhuǎn)換為類(lèi)似動(dòng)畫(huà)編輯的時(shí)間 軸概念，可以非常方便地設(shè)定對(duì)象在頁(yè)面中的運(yùn)動(dòng)。軸概念，可以非常方便地設(shè)定對(duì)象在頁(yè)面中的運(yùn)動(dòng)。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用 6.4.1時(shí)間軸的概念時(shí)間軸的概念 1、“時(shí)間軸時(shí)間軸”面板面板 2、創(chuàng)建時(shí)間軸動(dòng)畫(huà)、創(chuàng)建時(shí)間軸動(dòng)畫(huà) 3、修改時(shí)間軸、修改時(shí)間軸 4、使用多個(gè)時(shí)間軸、使用多個(gè)時(shí)間軸 5、拷貝和粘貼動(dòng)畫(huà)、拷貝和粘貼動(dòng)畫(huà) 6、將動(dòng)畫(huà)序列應(yīng)用于另一對(duì)象、將動(dòng)畫(huà)序列應(yīng)用于另一對(duì)象 7、重命名時(shí)間軸、

5、重命名時(shí)間軸 8、時(shí)間軸動(dòng)畫(huà)小技巧、時(shí)間軸動(dòng)畫(huà)小技巧 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用 1.“時(shí)間軸時(shí)間軸”面板面板 “時(shí)間軸時(shí)間軸”彈出式菜單：指定當(dāng)前在彈出式菜單：指定當(dāng)前在“時(shí)間軸時(shí)間軸”面板中顯示文檔的面板中顯示文檔的 哪些時(shí)間軸。哪些時(shí)間軸。 播放欄：顯示當(dāng)前在播放欄：顯示當(dāng)前在“文檔文檔”窗口中顯示時(shí)間軸的哪一幀。窗口中顯示時(shí)間軸的哪一幀。 幀編號(hào)：指示幀的序號(hào)。幀編號(hào)：指示幀的序號(hào)?！昂笸撕笸恕焙秃汀安シ挪シ拧卑粹o之間的數(shù)字是當(dāng)按鈕之間的數(shù)字是當(dāng) 前幀編號(hào)。每秒前幀編號(hào)。每秒 15 幀這一默認(rèn)設(shè)置是比較適當(dāng)?shù)钠骄俾?，可用于幀這一默認(rèn)設(shè)置是比較適當(dāng)?shù)钠骄俾剩捎糜?在通常的在通常

6、的 Windows 和和 Macintosh 系統(tǒng)上運(yùn)行的大多數(shù)瀏覽器。系統(tǒng)上運(yùn)行的大多數(shù)瀏覽器。 上下文菜單：包含各種與時(shí)間軸相關(guān)的命令。上下文菜單：包含各種與時(shí)間軸相關(guān)的命令。 “行為行為”通道：是應(yīng)該在時(shí)間軸中特定幀處執(zhí)行的行為的通道。通道：是應(yīng)該在時(shí)間軸中特定幀處執(zhí)行的行為的通道。 動(dòng)畫(huà)條：顯示每個(gè)對(duì)象的動(dòng)畫(huà)的持續(xù)時(shí)間。一個(gè)行可以包含表示不動(dòng)畫(huà)條：顯示每個(gè)對(duì)象的動(dòng)畫(huà)的持續(xù)時(shí)間。一個(gè)行可以包含表示不 同對(duì)象的多個(gè)條。不同的條無(wú)法控制同一幀中的同一對(duì)象。同對(duì)象的多個(gè)條。不同的條無(wú)法控制同一幀中的同一對(duì)象。 關(guān)鍵幀：是動(dòng)畫(huà)條中已經(jīng)為對(duì)象指定屬性（如位置）的幀。關(guān)鍵幀：是動(dòng)畫(huà)條中已經(jīng)為對(duì)象指定

7、屬性（如位置）的幀。 Dreamweaver 8會(huì)計(jì)算關(guān)鍵幀之間幀的中間值。小圓標(biāo)記表示關(guān)鍵會(huì)計(jì)算關(guān)鍵幀之間幀的中間值。小圓標(biāo)記表示關(guān)鍵 幀。幀。 “動(dòng)畫(huà)動(dòng)畫(huà)”通道：顯示用于制作層和圖像動(dòng)畫(huà)的條。通道：顯示用于制作層和圖像動(dòng)畫(huà)的條。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用-時(shí)間軸的概念時(shí)間軸的概念 后退至起點(diǎn)：將播放欄移至?xí)r間軸中的第一幀。后退至起點(diǎn)：將播放欄移至?xí)r間軸中的第一幀。 后退：將播放欄向左移動(dòng)一幀。單擊后退：將播放欄向左移動(dòng)一幀。單擊“后退后退”并按住鼠標(biāo)按鈕可向后播放時(shí)并按住鼠標(biāo)按鈕可向后播放時(shí) 間軸。間軸。 當(dāng)前幀序號(hào)：當(dāng)前幀序號(hào)： 當(dāng)前所在幀。當(dāng)前所在幀。 播放：將播放欄向右移動(dòng)一幀

8、。單擊播放：將播放欄向右移動(dòng)一幀。單擊“播放播放”并按住鼠標(biāo)按鈕可向前播放并按住鼠標(biāo)按鈕可向前播放 時(shí)間軸。時(shí)間軸。 自動(dòng)播放：使時(shí)間軸于當(dāng)前頁(yè)在瀏覽器中加載時(shí)自動(dòng)開(kāi)始播放。自動(dòng)播放：使時(shí)間軸于當(dāng)前頁(yè)在瀏覽器中加載時(shí)自動(dòng)開(kāi)始播放?！白詣?dòng)播自動(dòng)播 放放”將一個(gè)行為附加到頁(yè)的將一個(gè)行為附加到頁(yè)的 body 標(biāo)簽，該行為在頁(yè)加載時(shí)執(zhí)行標(biāo)簽，該行為在頁(yè)加載時(shí)執(zhí)行“播放時(shí)間播放時(shí)間 軸軸”操作。操作。 循環(huán)：使當(dāng)前時(shí)間軸于頁(yè)在瀏覽器中打開(kāi)時(shí)無(wú)限地循環(huán)。循環(huán)：使當(dāng)前時(shí)間軸于頁(yè)在瀏覽器中打開(kāi)時(shí)無(wú)限地循環(huán)?！把h(huán)循環(huán)”在動(dòng)畫(huà)在動(dòng)畫(huà) 的最后一幀之后將的最后一幀之后將“轉(zhuǎn)到時(shí)間軸幀轉(zhuǎn)到時(shí)間軸幀”行為插入到行為插入

9、到“行為行為”通道中。在通道中。在“行為行為” 通道中雙擊該行為的標(biāo)記可編輯此行為的參數(shù)并更改循環(huán)的次數(shù)通道中雙擊該行為的標(biāo)記可編輯此行為的參數(shù)并更改循環(huán)的次數(shù)。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用-時(shí)間軸面板時(shí)間軸面板 2.修改時(shí)間軸修改時(shí)間軸 定義完時(shí)間軸的基本組成部分后，可以進(jìn)行一些更改，如添加和刪除幀、定義完時(shí)間軸的基本組成部分后，可以進(jìn)行一些更改，如添加和刪除幀、 更改動(dòng)畫(huà)開(kāi)始時(shí)間等。要修改時(shí)間軸，請(qǐng)執(zhí)行以下任一操作：更改動(dòng)畫(huà)開(kāi)始時(shí)間等。要修改時(shí)間軸，請(qǐng)執(zhí)行以下任一操作： 若要使動(dòng)畫(huà)的播放時(shí)間更長(zhǎng)，請(qǐng)將結(jié)束幀標(biāo)記向右拖動(dòng)。動(dòng)畫(huà)中的所若要使動(dòng)畫(huà)的播放時(shí)間更長(zhǎng)，請(qǐng)將結(jié)束幀標(biāo)記向右拖動(dòng)。動(dòng)畫(huà)中

10、的所 有關(guān)鍵幀都會(huì)移動(dòng)，以保持它們的相對(duì)位置不變。若要阻止其他關(guān)鍵幀移動(dòng)，有關(guān)鍵幀都會(huì)移動(dòng)，以保持它們的相對(duì)位置不變。若要阻止其他關(guān)鍵幀移動(dòng)， 請(qǐng)按住請(qǐng)按住 Ctrl 鍵并拖動(dòng)結(jié)束幀標(biāo)記。鍵并拖動(dòng)結(jié)束幀標(biāo)記。 若要使層更早或更晚地到達(dá)某一關(guān)鍵幀位置，請(qǐng)?jiān)趧?dòng)畫(huà)條中將關(guān)鍵幀若要使層更早或更晚地到達(dá)某一關(guān)鍵幀位置，請(qǐng)?jiān)趧?dòng)畫(huà)條中將關(guān)鍵幀 向左或向右移動(dòng)。向左或向右移動(dòng)。 若要更改動(dòng)畫(huà)的開(kāi)始時(shí)間，請(qǐng)選擇一個(gè)或多個(gè)與該動(dòng)畫(huà)關(guān)聯(lián)的動(dòng)畫(huà)條若要更改動(dòng)畫(huà)的開(kāi)始時(shí)間，請(qǐng)選擇一個(gè)或多個(gè)與該動(dòng)畫(huà)關(guān)聯(lián)的動(dòng)畫(huà)條 （按（按 Shift 可一次選擇多個(gè)動(dòng)畫(huà)條），然后向左或向右移動(dòng)。可一次選擇多個(gè)動(dòng)畫(huà)條），然后向左或向右移動(dòng)。

11、若要移動(dòng)整個(gè)動(dòng)畫(huà)軌跡的位置，請(qǐng)選擇整個(gè)動(dòng)畫(huà)條，然后在頁(yè)面上拖若要移動(dòng)整個(gè)動(dòng)畫(huà)軌跡的位置，請(qǐng)選擇整個(gè)動(dòng)畫(huà)條，然后在頁(yè)面上拖 動(dòng)該對(duì)象。動(dòng)該對(duì)象。Dreamweaver 會(huì)調(diào)整所有關(guān)鍵幀的位置。在整個(gè)動(dòng)畫(huà)條上所做會(huì)調(diào)整所有關(guān)鍵幀的位置。在整個(gè)動(dòng)畫(huà)條上所做 出的任何更改將更改所有關(guān)鍵幀。出的任何更改將更改所有關(guān)鍵幀。 若要在時(shí)間軸上添加或刪除幀，請(qǐng)選擇若要在時(shí)間軸上添加或刪除幀，請(qǐng)選擇“修改修改”“時(shí)間軸時(shí)間軸”“添加添加 幀幀”或或“修改修改”“時(shí)間軸時(shí)間軸”“刪除幀刪除幀”。 若要使時(shí)間軸于頁(yè)在瀏覽器中打開(kāi)時(shí)自動(dòng)播放，請(qǐng)單擊若要使時(shí)間軸于頁(yè)在瀏覽器中打開(kāi)時(shí)自動(dòng)播放，請(qǐng)單擊“自動(dòng)播放自動(dòng)播放”。

12、“自動(dòng)播放自動(dòng)播放”會(huì)向頁(yè)附加一個(gè)行為，該行為將在頁(yè)加載時(shí)執(zhí)行會(huì)向頁(yè)附加一個(gè)行為，該行為將在頁(yè)加載時(shí)執(zhí)行“播放時(shí)間軸播放時(shí)間軸” 操作。操作。 若要使時(shí)間軸連續(xù)循環(huán)，請(qǐng)單擊若要使時(shí)間軸連續(xù)循環(huán)，請(qǐng)單擊“循環(huán)循環(huán)”。“循環(huán)循環(huán)”將將“轉(zhuǎn)到時(shí)間軸幀轉(zhuǎn)到時(shí)間軸幀” 操作插入到動(dòng)畫(huà)最后一幀后的操作插入到動(dòng)畫(huà)最后一幀后的“行為行為”通道。您可以編輯此行為的參數(shù)以定通道。您可以編輯此行為的參數(shù)以定 義循環(huán)的次數(shù)。義循環(huán)的次數(shù)。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用-時(shí)間軸的概念時(shí)間軸的概念 3.使用多個(gè)時(shí)間軸使用多個(gè)時(shí)間軸 若要管理多個(gè)時(shí)間軸，請(qǐng)執(zhí)行以下任一操作：若要管理多個(gè)時(shí)間軸，請(qǐng)執(zhí)行以下任一操作： 若要新

13、建時(shí)間軸，請(qǐng)選擇若要新建時(shí)間軸，請(qǐng)選擇“修改修改”“時(shí)間時(shí)間 軸軸”“添加時(shí)間軸添加時(shí)間軸”。 若要?jiǎng)h除選定的時(shí)間軸，請(qǐng)選擇若要?jiǎng)h除選定的時(shí)間軸，請(qǐng)選擇“修改修改”“時(shí)間時(shí)間 軸軸”“刪除時(shí)間軸刪除時(shí)間軸”。這將永久刪除選定時(shí)間軸中的所。這將永久刪除選定時(shí)間軸中的所 有動(dòng)畫(huà)。有動(dòng)畫(huà)。 若要重命名選定時(shí)間軸，請(qǐng)選擇若要重命名選定時(shí)間軸，請(qǐng)選擇“修改修改”“時(shí)時(shí) 間軸間軸”“重命名時(shí)間軸重命名時(shí)間軸”，或者在，或者在“時(shí)間軸時(shí)間軸”面板的面板的 “時(shí)間軸時(shí)間軸”彈出式菜單中輸入新的名稱(chēng)。彈出式菜單中輸入新的名稱(chēng)。 若要在若要在“時(shí)間軸時(shí)間軸”面板中查看另一個(gè)時(shí)間軸，請(qǐng)面板中查看另一個(gè)時(shí)間軸，請(qǐng) 從

14、從“時(shí)間軸時(shí)間軸”面板的面板的“時(shí)間軸時(shí)間軸”彈出式菜單中選擇一個(gè)新彈出式菜單中選擇一個(gè)新 的時(shí)間軸。的時(shí)間軸。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用-時(shí)間軸的概念時(shí)間軸的概念 4.拷貝和粘貼動(dòng)畫(huà)拷貝和粘貼動(dòng)畫(huà) 若要剪切（或拷貝）并粘貼動(dòng)畫(huà)序列，請(qǐng)執(zhí)行以下操若要剪切（或拷貝）并粘貼動(dòng)畫(huà)序列，請(qǐng)執(zhí)行以下操 作：作： 單擊一個(gè)動(dòng)畫(huà)條以選擇一個(gè)序列。若要選擇多個(gè)序單擊一個(gè)動(dòng)畫(huà)條以選擇一個(gè)序列。若要選擇多個(gè)序 列，請(qǐng)按住列，請(qǐng)按住 Shift 鍵并單擊多個(gè)動(dòng)畫(huà)條；若要選擇所有序鍵并單擊多個(gè)動(dòng)畫(huà)條；若要選擇所有序 列，請(qǐng)按列，請(qǐng)按 Ctrl+A 鍵鍵 (Windows) 或或 Command+A 鍵鍵 (Ma

15、cintosh)。 拷貝或剪切選定內(nèi)容。拷貝或剪切選定內(nèi)容。 執(zhí)行下列操作之一：執(zhí)行下列操作之一： 將播放欄移至當(dāng)前時(shí)間軸中的另一處。將播放欄移至當(dāng)前時(shí)間軸中的另一處。 從從“時(shí)間軸時(shí)間軸”彈出式菜單中選擇另一個(gè)時(shí)間軸。彈出式菜單中選擇另一個(gè)時(shí)間軸。 打開(kāi)另一個(gè)文檔或創(chuàng)建一個(gè)新文檔，然后在打開(kāi)另一個(gè)文檔或創(chuàng)建一個(gè)新文檔，然后在“時(shí)時(shí) 間軸間軸”面板中單擊。面板中單擊。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用-時(shí)間軸的概念時(shí)間軸的概念 將選定內(nèi)容粘貼到時(shí)間軸中。將選定內(nèi)容粘貼到時(shí)間軸中。 同一對(duì)象的動(dòng)畫(huà)條不同一對(duì)象的動(dòng)畫(huà)條不 能重疊，因?yàn)橐粋€(gè)層不能同時(shí)處于兩個(gè)位置（一個(gè)圖像也能重疊，因?yàn)橐粋€(gè)層不能同時(shí)處

16、于兩個(gè)位置（一個(gè)圖像也 不能同時(shí)具有兩個(gè)不同的源）。如果您所粘貼的動(dòng)畫(huà)條與不能同時(shí)具有兩個(gè)不同的源）。如果您所粘貼的動(dòng)畫(huà)條與 同一對(duì)象的另一動(dòng)畫(huà)條重疊，同一對(duì)象的另一動(dòng)畫(huà)條重疊，Dreamweaver 會(huì)自動(dòng)將選會(huì)自動(dòng)將選 定內(nèi)容移至第一個(gè)不重疊的幀。定內(nèi)容移至第一個(gè)不重疊的幀。 在將動(dòng)畫(huà)序列粘貼到另一文檔時(shí)，應(yīng)牢記兩條原則：在將動(dòng)畫(huà)序列粘貼到另一文檔時(shí)，應(yīng)牢記兩條原則： 如果您拷貝層的動(dòng)畫(huà)序列且新文檔包含同名的層，如果您拷貝層的動(dòng)畫(huà)序列且新文檔包含同名的層， Dreamweaver 會(huì)將動(dòng)畫(huà)屬性應(yīng)用于新文檔中的現(xiàn)有層。會(huì)將動(dòng)畫(huà)屬性應(yīng)用于新文檔中的現(xiàn)有層。 如果您拷貝層的動(dòng)畫(huà)序列且新文檔不包含

17、同名的層，如果您拷貝層的動(dòng)畫(huà)序列且新文檔不包含同名的層， Dreamweaver會(huì)將層和它的內(nèi)容隨動(dòng)畫(huà)序列一起從初始會(huì)將層和它的內(nèi)容隨動(dòng)畫(huà)序列一起從初始 文檔中拷貝下來(lái)。若要將粘貼的動(dòng)畫(huà)序列應(yīng)用于新文檔中文檔中拷貝下來(lái)。若要將粘貼的動(dòng)畫(huà)序列應(yīng)用于新文檔中 的另一個(gè)層，請(qǐng)從上下文菜單中選擇的另一個(gè)層，請(qǐng)從上下文菜單中選擇“更改對(duì)象更改對(duì)象”并從彈并從彈 出式菜單中選擇第二個(gè)層的名稱(chēng)。如果需要，刪除所粘貼出式菜單中選擇第二個(gè)層的名稱(chēng)。如果需要，刪除所粘貼 的層。的層。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用-拷貝和粘貼動(dòng)畫(huà)拷貝和粘貼動(dòng)畫(huà) 6.4.1時(shí)間軸的概念時(shí)間軸的概念 5.將動(dòng)畫(huà)序列應(yīng)用于另一對(duì)象將動(dòng)

18、畫(huà)序列應(yīng)用于另一對(duì)象 為了節(jié)約時(shí)間，您可以只創(chuàng)建一次動(dòng)畫(huà)序列，然后將其應(yīng)用為了節(jié)約時(shí)間，您可以只創(chuàng)建一次動(dòng)畫(huà)序列，然后將其應(yīng)用 于文檔中剩余的每個(gè)層。若要將現(xiàn)有動(dòng)畫(huà)序列應(yīng)用于其他對(duì)象，于文檔中剩余的每個(gè)層。若要將現(xiàn)有動(dòng)畫(huà)序列應(yīng)用于其他對(duì)象， 請(qǐng)執(zhí)行以下操作：請(qǐng)執(zhí)行以下操作： 在在“時(shí)間軸時(shí)間軸”面板中，選擇動(dòng)畫(huà)序列并將其拷貝。面板中，選擇動(dòng)畫(huà)序列并將其拷貝。 單擊單擊“時(shí)間軸時(shí)間軸”面板的任一幀，然后在該幀處粘貼動(dòng)畫(huà)面板的任一幀，然后在該幀處粘貼動(dòng)畫(huà) 序列。序列。 右鍵單擊右鍵單擊 (Windows) 或按住或按住 Control 鍵并單擊鍵并單擊 (Macintosh) 粘貼的動(dòng)畫(huà)序列，然后

19、從上下文菜單中選擇粘貼的動(dòng)畫(huà)序列，然后從上下文菜單中選擇“更更 改對(duì)象改對(duì)象”。 在出現(xiàn)的對(duì)話框中，從彈出式菜單中選擇另一對(duì)象并單在出現(xiàn)的對(duì)話框中，從彈出式菜單中選擇另一對(duì)象并單 擊擊“確定確定”。 對(duì)于要遵循同一動(dòng)畫(huà)序列的其他所有對(duì)象，重復(fù)第對(duì)于要遵循同一動(dòng)畫(huà)序列的其他所有對(duì)象，重復(fù)第 2 步到步到 第第 4 步。步。 創(chuàng)建動(dòng)畫(huà)序列后，您也可以改變關(guān)于制作哪一個(gè)層的創(chuàng)建動(dòng)畫(huà)序列后，您也可以改變關(guān)于制作哪一個(gè)層的 動(dòng)畫(huà)的決定；只需執(zhí)行上面的第動(dòng)畫(huà)的決定；只需執(zhí)行上面的第 3 步和第步和第 4 步即可（不必進(jìn)行步即可（不必進(jìn)行 拷貝或粘貼）。拷貝或粘貼）。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用 6.重

20、命名時(shí)間軸重命名時(shí)間軸 若要重命名當(dāng)前在若要重命名當(dāng)前在“時(shí)間軸時(shí)間軸”面板中顯示的時(shí)間軸，請(qǐng)執(zhí)面板中顯示的時(shí)間軸，請(qǐng)執(zhí) 行以下操作：行以下操作： 選擇選擇“修改修改 ”、“時(shí)間軸時(shí)間軸”、“重命名時(shí)間軸重命名時(shí)間軸”。 在在“重命名時(shí)間軸重命名時(shí)間軸”對(duì)話框中輸入新的名稱(chēng)。對(duì)話框中輸入新的名稱(chēng)。 如果您的文檔包含如果您的文檔包含“播放時(shí)間軸播放時(shí)間軸”行為操作（例如，如果行為操作（例如，如果 它包含訪問(wèn)者必須單擊才能啟動(dòng)時(shí)間軸的按鈕），則必須它包含訪問(wèn)者必須單擊才能啟動(dòng)時(shí)間軸的按鈕），則必須 編輯該行為以反映新的時(shí)間軸名稱(chēng)。編輯該行為以反映新的時(shí)間軸名稱(chēng)。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用-時(shí)

21、間軸的概念時(shí)間軸的概念 7.時(shí)間軸動(dòng)畫(huà)小技巧時(shí)間軸動(dòng)畫(huà)小技巧 通過(guò)以下方法可以提高動(dòng)畫(huà)的性能并使動(dòng)畫(huà)更易于創(chuàng)建：通過(guò)以下方法可以提高動(dòng)畫(huà)的性能并使動(dòng)畫(huà)更易于創(chuàng)建： 顯示和隱藏層，而不是更改多圖像動(dòng)畫(huà)的源文件。由于新的圖像必須進(jìn)行下載，顯示和隱藏層，而不是更改多圖像動(dòng)畫(huà)的源文件。由于新的圖像必須進(jìn)行下載， 所以切換圖像的源文件會(huì)降低動(dòng)畫(huà)的速度。如果所有圖像都在動(dòng)畫(huà)運(yùn)行前在所以切換圖像的源文件會(huì)降低動(dòng)畫(huà)的速度。如果所有圖像都在動(dòng)畫(huà)運(yùn)行前在 隱藏層中同時(shí)下載，將不會(huì)出現(xiàn)明顯的停頓，并且不會(huì)缺少圖像。隱藏層中同時(shí)下載，將不會(huì)出現(xiàn)明顯的停頓，并且不會(huì)缺少圖像。 擴(kuò)展動(dòng)畫(huà)條以創(chuàng)建更順暢的動(dòng)作。如果動(dòng)畫(huà)斷斷

22、續(xù)續(xù)并且圖像在不同位置之間擴(kuò)展動(dòng)畫(huà)條以創(chuàng)建更順暢的動(dòng)作。如果動(dòng)畫(huà)斷斷續(xù)續(xù)并且圖像在不同位置之間 跳動(dòng)，請(qǐng)拖動(dòng)該層動(dòng)畫(huà)條的結(jié)束幀，使動(dòng)作延伸到更多的幀。通過(guò)延長(zhǎng)動(dòng)畫(huà)跳動(dòng)，請(qǐ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ì)象條，可以在運(yùn)動(dòng)的開(kāi)始點(diǎn)和結(jié)束點(diǎn)之間創(chuàng)建更多的數(shù)據(jù)點(diǎn)，同時(shí)也會(huì)使對(duì)象 更為緩慢地移動(dòng)。請(qǐng)嘗試增加每秒幀數(shù)更為緩慢地移動(dòng)。請(qǐng)嘗試增加每秒幀數(shù) (fps) 以提高速度，但應(yīng)注意在普通以提高速度，但應(yīng)注意在普通 系統(tǒng)上運(yùn)行的大多數(shù)瀏覽器都不能支持超過(guò)系統(tǒng)上運(yùn)行的大多數(shù)瀏覽器都不能支持超過(guò) 15 fps 的動(dòng)畫(huà)速

23、度。請(qǐng)?jiān)诓煌牡膭?dòng)畫(huà)速度。請(qǐng)?jiān)诓煌?系統(tǒng)上用不同的瀏覽器對(duì)動(dòng)畫(huà)進(jìn)行測(cè)試，以找到最佳的設(shè)置。系統(tǒng)上用不同的瀏覽器對(duì)動(dòng)畫(huà)進(jìn)行測(cè)試，以找到最佳的設(shè)置。 不要制作大型位圖的動(dòng)畫(huà)。制作大型圖像的動(dòng)畫(huà)會(huì)導(dǎo)致動(dòng)畫(huà)速度減慢。相反，不要制作大型位圖的動(dòng)畫(huà)。制作大型圖像的動(dòng)畫(huà)會(huì)導(dǎo)致動(dòng)畫(huà)速度減慢。相反， 應(yīng)創(chuàng)建合成圖像，并移動(dòng)圖像中較小的部分。例如，可以通過(guò)僅制作汽車(chē)輪應(yīng)創(chuàng)建合成圖像，并移動(dòng)圖像中較小的部分。例如，可以通過(guò)僅制作汽車(chē)輪 胎的動(dòng)畫(huà)來(lái)顯示汽車(chē)的運(yùn)動(dòng)。胎的動(dòng)畫(huà)來(lái)顯示汽車(chē)的運(yùn)動(dòng)。 創(chuàng)建簡(jiǎn)單的動(dòng)畫(huà)。不要?jiǎng)?chuàng)建對(duì)當(dāng)前瀏覽器要求過(guò)高的動(dòng)畫(huà)。即使在系統(tǒng)或創(chuàng)建簡(jiǎn)單的動(dòng)畫(huà)。不要?jiǎng)?chuàng)建對(duì)當(dāng)前瀏覽器要求過(guò)高的動(dòng)畫(huà)。即使在系統(tǒng)

24、或 Internet 性能降低時(shí)，瀏覽器始終會(huì)播放時(shí)間軸動(dòng)畫(huà)中的每一幀。性能降低時(shí)，瀏覽器始終會(huì)播放時(shí)間軸動(dòng)畫(huà)中的每一幀。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用-時(shí)間軸的概念時(shí)間軸的概念 6.4.2使用時(shí)間軸改變圖像屬性使用時(shí)間軸改變圖像屬性 除了可以利用時(shí)間軸移動(dòng)層制作動(dòng)畫(huà)以外，還可以除了可以利用時(shí)間軸移動(dòng)層制作動(dòng)畫(huà)以外，還可以 用時(shí)間軸在不同的關(guān)鍵幀改變圖像的源文件、層的屬性，用時(shí)間軸在不同的關(guān)鍵幀改變圖像的源文件、層的屬性， 制作動(dòng)畫(huà)效果。下面以一實(shí)例說(shuō)明使用時(shí)間軸改變圖像屬制作動(dòng)畫(huà)效果。下面以一實(shí)例說(shuō)明使用時(shí)間軸改變圖像屬 性的制作過(guò)程：性的制作過(guò)程： (1)新建網(wǎng)頁(yè)。在本地站點(diǎn)下新建一個(gè)空

25、白網(wǎng)頁(yè)文檔新建網(wǎng)頁(yè)。在本地站點(diǎn)下新建一個(gè)空白網(wǎng)頁(yè)文檔 并保存為為并保存為為picture1-html。 (2)插入第一幅圖像。設(shè)置網(wǎng)頁(yè)對(duì)齊方式為居中對(duì)齊，插入第一幅圖像。設(shè)置網(wǎng)頁(yè)對(duì)齊方式為居中對(duì)齊， 執(zhí)行執(zhí)行“插入插入”“圖像圖像”命令，在命令，在“選擇圖像源文件選擇圖像源文件”對(duì)對(duì) 話框中，選擇第一幅圖像話框中，選擇第一幅圖像car1.jpg，將圖像插入到頁(yè)面中。，將圖像插入到頁(yè)面中。 (3)選取插入的圖像，然后將其拖到時(shí)間軸面板。選取插入的圖像，然后將其拖到時(shí)間軸面板。 (4)改變動(dòng)畫(huà)幀數(shù)。用鼠標(biāo)拖動(dòng)動(dòng)畫(huà)條右端結(jié)束關(guān)鍵改變動(dòng)畫(huà)幀數(shù)。用鼠標(biāo)拖動(dòng)動(dòng)畫(huà)條右端結(jié)束關(guān)鍵 幀標(biāo)記，將第幀標(biāo)記，將第15

26、幀拖動(dòng)到第幀拖動(dòng)到第30幀，改變動(dòng)畫(huà)長(zhǎng)度。幀，改變動(dòng)畫(huà)長(zhǎng)度。 (5)添加關(guān)鍵幀并設(shè)置關(guān)鍵幀的圖像來(lái)源。添加關(guān)鍵幀并設(shè)置關(guān)鍵幀的圖像來(lái)源。 (6) 預(yù)覽網(wǎng)頁(yè)。預(yù)覽網(wǎng)頁(yè)。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用 6.4.3 使用時(shí)間軸改變圖層屬性使用時(shí)間軸改變圖層屬性 在時(shí)間軸中除了可以移動(dòng)層之外，還可以改變層的可見(jiàn)性、在時(shí)間軸中除了可以移動(dòng)層之外，還可以改變層的可見(jiàn)性、 大小以及疊放次序等。大小以及疊放次序等。 (1)選擇一個(gè)包含圖像或文字，然后拖到時(shí)間軸中。選擇一個(gè)包含圖像或文字，然后拖到時(shí)間軸中。 (2)在時(shí)間軸面板中選擇一個(gè)已存在的關(guān)鍵幀或建立一在時(shí)間軸面板中選擇一個(gè)已存在的關(guān)鍵幀或建立一 個(gè)關(guān)鍵

27、幀。個(gè)關(guān)鍵幀。 (3)在在“屬性屬性”面板中的面板中的“顯示顯示”下拉列表中選擇層下拉列表中選擇層 的顯示屬性為的顯示屬性為visible。為達(dá)到動(dòng)態(tài)效果而改變層的屬性，。為達(dá)到動(dòng)態(tài)效果而改變層的屬性， 可以設(shè)置層的可見(jiàn)性，還可以改變層的大小等屬性?？梢栽O(shè)置層的可見(jiàn)性，還可以改變層的大小等屬性。 (4)再選擇另一個(gè)已存在的關(guān)鍵幀或建立一個(gè)關(guān)鍵幀，再選擇另一個(gè)已存在的關(guān)鍵幀或建立一個(gè)關(guān)鍵幀， 然后在然后在“屬性屬性”面板中選擇層的顯示屬性為面板中選擇層的顯示屬性為hidden。 (5)選中自動(dòng)播放和循環(huán)復(fù)選框，按選中自動(dòng)播放和循環(huán)復(fù)選框，按鍵預(yù)覽可鍵預(yù)覽可 以看到間隔一段時(shí)間層就循環(huán)出現(xiàn)和消失的

28、動(dòng)畫(huà)效果。以看到間隔一段時(shí)間層就循環(huán)出現(xiàn)和消失的動(dòng)畫(huà)效果。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用 6.4.4 實(shí)踐技能訓(xùn)練實(shí)踐技能訓(xùn)練- 層與時(shí)間軸動(dòng)畫(huà)制作綜合實(shí)例層與時(shí)間軸動(dòng)畫(huà)制作綜合實(shí)例 制作一個(gè)小天使沿直線運(yùn)動(dòng)、簡(jiǎn)單曲線制作一個(gè)小天使沿直線運(yùn)動(dòng)、簡(jiǎn)單曲線 運(yùn)動(dòng)和任意路徑運(yùn)動(dòng)的時(shí)間軸動(dòng)畫(huà)。運(yùn)動(dòng)和任意路徑運(yùn)動(dòng)的時(shí)間軸動(dòng)畫(huà)。 6.4時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用 6.5.1 行為概念行為概念 行為（行為（Behavior）指某個(gè)事件發(fā)生時(shí)瀏覽器執(zhí)行的動(dòng)作，其實(shí)質(zhì)是在）指某個(gè)事件發(fā)生時(shí)瀏覽器執(zhí)行的動(dòng)作，其實(shí)質(zhì)是在 Dreamweaver 8中預(yù)置的中預(yù)置的JavaScript程序，由事件（程序，由事件（ev

29、ent）和對(duì)應(yīng)動(dòng)作）和對(duì)應(yīng)動(dòng)作 （actions）組成。它能實(shí)現(xiàn)用戶與網(wǎng)頁(yè)間的交互，通過(guò)某個(gè)動(dòng)作來(lái)觸發(fā)某項(xiàng)）組成。它能實(shí)現(xiàn)用戶與網(wǎng)頁(yè)間的交互，通過(guò)某個(gè)動(dòng)作來(lái)觸發(fā)某項(xiàng) 事件。如當(dāng)用戶在頁(yè)面中將鼠標(biāo)移動(dòng)并單擊某一個(gè)鏈接后，載入了一幅圖像，事件。如當(dāng)用戶在頁(yè)面中將鼠標(biāo)移動(dòng)并單擊某一個(gè)鏈接后，載入了一幅圖像， 這就產(chǎn)生了兩個(gè)事件這就產(chǎn)生了兩個(gè)事件onMouseOver和和onClick，同時(shí)觸發(fā)了一個(gè)動(dòng)作載入圖，同時(shí)觸發(fā)了一個(gè)動(dòng)作載入圖 像。像。 事件事件是由瀏覽器為每個(gè)頁(yè)面元素定義的，通常瀏覽器都會(huì)提供一組事件，是由瀏覽器為每個(gè)頁(yè)面元素定義的，通常瀏覽器都會(huì)提供一組事件， 如如onMouseOver

30、、onMouseOut和和onClick等，事件總是與動(dòng)作相關(guān)聯(lián)。當(dāng)?shù)?，事件總是與動(dòng)作相關(guān)聯(lián)。當(dāng) 訪問(wèn)者與網(wǎng)頁(yè)進(jìn)行交互時(shí)，瀏覽器生成事件，但并非所有的事件都是交互的，訪問(wèn)者與網(wǎng)頁(yè)進(jìn)行交互時(shí)，瀏覽器生成事件，但并非所有的事件都是交互的， 如設(shè)置網(wǎng)頁(yè)每如設(shè)置網(wǎng)頁(yè)每10s自動(dòng)重新載入。自動(dòng)重新載入。 根據(jù)所選對(duì)象和在根據(jù)所選對(duì)象和在“顯示事件顯示事件”子菜單中指定的瀏覽器的不同，顯示在子菜單中指定的瀏覽器的不同，顯示在 “事件事件”下拉列表框中的事件將有所不同。下拉列表框中的事件將有所不同。Internet Explorer和和Netscape Navigator是當(dāng)今主流瀏覽器。是當(dāng)今主流瀏覽器。

31、IE4表明此事件適用于表明此事件適用于Internet Explorer 4- 0瀏覽器，瀏覽器，NE4表明此事件適用于表明此事件適用于Netscape Navigator 4-0瀏覽器。瀏覽器。 動(dòng)作動(dòng)作是由預(yù)先寫(xiě)好的可以執(zhí)行指定任務(wù)的是由預(yù)先寫(xiě)好的可以執(zhí)行指定任務(wù)的JavaScript代碼，如打開(kāi)瀏覽代碼，如打開(kāi)瀏覽 器窗口、顯示或隱藏層、播放聲音等。器窗口、顯示或隱藏層、播放聲音等。 6.5行為行為 6.5.2 行為面板行為面板 1、打開(kāi)行為面板、打開(kāi)行為面板 2、行為菜單、行為菜單 3、設(shè)置行為面板選項(xiàng)、設(shè)置行為面板選項(xiàng) (1)顯示設(shè)置事件顯示設(shè)置事件:僅顯示附加到當(dāng)前文檔的那些事件。

32、每個(gè)類(lèi)別的事僅顯示附加到當(dāng)前文檔的那些事件。每個(gè)類(lèi)別的事 件都包含在一個(gè)可折疊的列表中，您可以單擊類(lèi)別名稱(chēng)旁邊的加號(hào)件都包含在一個(gè)可折疊的列表中，您可以單擊類(lèi)別名稱(chēng)旁邊的加號(hào)/ 減號(hào)按鈕展開(kāi)或折疊該列表。減號(hào)按鈕展開(kāi)或折疊該列表?！帮@示設(shè)置事件顯示設(shè)置事件”是默認(rèn)的視圖。是默認(rèn)的視圖。 (2)顯示所有事件顯示所有事件:按字母降序顯示給定類(lèi)別的所有事件。按字母降序顯示給定類(lèi)別的所有事件。 (3)添加動(dòng)作添加動(dòng)作(+):是一個(gè)彈出菜單，其中包含可以附加到當(dāng)前所選對(duì)象是一個(gè)彈出菜單，其中包含可以附加到當(dāng)前所選對(duì)象 的動(dòng)作。當(dāng)從該列表中選擇一個(gè)動(dòng)作時(shí)，將出現(xiàn)一個(gè)對(duì)話框，您可以的動(dòng)作。當(dāng)從該列表中選擇一個(gè)動(dòng)作時(shí)，將出現(xiàn)一個(gè)對(duì)話框，您可以 在該對(duì)話框中指定該動(dòng)作的參數(shù)。如果所有動(dòng)作都灰顯，則沒(méi)有所選在該對(duì)話