HTML和中文DreamweaverMX2004實用教程第5章

第5章樣式表與時間線

本章要點(diǎn)5.1重做“卡通青蛙”網(wǎng)頁

5.2再做“俏皮歇后語”網(wǎng)頁

5.3“霸道的文字”網(wǎng)頁

5.4再做“心情隨筆”網(wǎng)頁

5.5“射門”網(wǎng)頁

5.6再做“射門”網(wǎng)頁

5.7“風(fēng)景幻燈”網(wǎng)頁5.8“浮動圖像”網(wǎng)頁

習(xí)題55.1重做“卡通青蛙”網(wǎng)頁

在Dreamweaver中重做后的“卡通青蛙”網(wǎng)頁如圖5-1-1所示?？梢钥闯觯摼W(wǎng)頁和第1章中的“卡通青蛙”網(wǎng)頁基本相同，在網(wǎng)頁中包含幾個大小不同的卡通青蛙圖像，并且每個圖像的周圍都增加了邊框。這兩個網(wǎng)頁的不同之處在于第1章中的“卡通青蛙”網(wǎng)頁是使用HTML代碼實現(xiàn)的，而本實例是使用“樣式”實現(xiàn)的。

圖5-1-1“卡通青蛙”網(wǎng)頁的顯示效果5.1重做“卡通青蛙”網(wǎng)頁

5.1.1創(chuàng)建CSS樣式表1．“CSS樣式”面板執(zhí)行“窗口”→“CSS樣式”菜單命令，或者按Shift+F1鍵，即可調(diào)出“CSS樣式”面板，如圖5-1-2所示。其中各選項的作用如下。圖5-1-2“CSS樣式”面板（1）顯示窗口：顯示所有樣式表的名稱，“（未定義樣式）”表示沒有樣式。（2）“附加樣式表”按鈕：單擊該按鈕，調(diào)出“選擇樣式表文件”對話框，用于導(dǎo)入外部的樣式表（文件的擴(kuò)展名為.css）。

圖5-1-2“CSS樣式”面板5.1重做“卡通青蛙”網(wǎng)頁

（3）“新建CSS樣式”按鈕：單擊該按鈕，調(diào)出“新建CSS樣式”對話框，如圖5-1-3所示。利用該對話框可以建立新的樣式。

圖5-1-3“新建CSS樣式”對話框5.1重做“卡通青蛙”網(wǎng)頁

（4）“編輯樣式表”按鈕：單擊該按鈕，調(diào)出能進(jìn)行樣式表編輯的對話框，利用該對話框可以對CSS樣式表進(jìn)行編輯。（5）“刪除CSS樣式”按鈕：單擊該按鈕，將刪除選中的樣式。2．創(chuàng)建CSS樣式表（1）在“CSS樣式”面板中單擊“新建CSS樣式”按鈕，調(diào)出如圖5-1-3所示的“新建CSS樣式”對話框。選中“選擇器類型”欄內(nèi)的第1個單選鈕，在“名稱”下拉列表框內(nèi)輸入一個樣式表的名稱，名稱必須以“.”開始。（2）單擊該對話框中的“確定”按鈕，即可退出該對話框，調(diào)出“保存樣式表文件為”對話框。利用該對話框，輸入CSS樣式表名稱，單擊“保存”按鈕，將新建的空的CSS樣式表保存。同時，可彈出“CSS樣式定義”對話框，如圖5-1-4所示（初始時“分類”欄中選中的是“類別”列表項）。利用該對話框可以定義樣式表內(nèi)各個對象屬性。

5.1重做“卡通青蛙”網(wǎng)頁

圖5-1-4“CSS樣式定義”對話框5.1重做“卡通青蛙”網(wǎng)頁

（3）設(shè)置完畢后，單擊“確定”按鈕，即可完成樣式表的定義。此時，在“CSS樣式表”面板的顯示窗口內(nèi)，會顯示出新創(chuàng)建的樣式表的名稱。3．“新建CSS樣式”對話框中其他各選項的含義（1）“標(biāo)簽”單選鈕：選中該單選鈕后，“名稱”下拉列表框顯示為“標(biāo)簽”下拉列表框，它提供了各種HTML語言的標(biāo)記，可利用它對HTML標(biāo)記重新定義，改變其屬性。（2）“高級”單選鈕：選中該單選鈕后，“名稱”下拉列表框顯示為“選擇器”下拉列表框。“選擇器”下拉列表框有4個選項，都是針對熱字的：link（一般鏈接）、visited（訪問過的鏈接字）、hover（當(dāng)前的鏈接字）和active（被激活的鏈接字）。針對這4種狀態(tài)，可設(shè)置它們的屬性，使鏈接字在各種狀態(tài)下有不同特性。（3）“定義在”欄：用于確定CSS樣式定義在文件（.css）還是定義在當(dāng)前文檔中。

5.1重做“卡通青蛙”網(wǎng)頁

5.1.2“CSS樣式定義”對話框中的邊框?qū)傩詥螕簟癈SS樣式定義”對話框左邊“分類”列表框中的“邊框”列表項，調(diào)出“邊框”的樣式設(shè)置內(nèi)容，如圖5-1-4所示。利用該對話框可以對圍繞所有對象的邊框?qū)傩赃M(jìn)行定義。該對話框中各選項的作用如下?！斑吙颉睓趦?nèi)有“樣式”、“寬度”和“顏色”3個欄，每個欄中均有一個“全部相同”復(fù)選框，以及4行選項。4行選項分別用來定義“上”、“右”、“下”和“左”邊框。選擇“全部相同”復(fù)選框后，只有“上”欄為可用狀態(tài)，定義了“上”邊框后，其他邊框也采用相同的定義?！皹邮健睓谥懈飨吕斜砜蛑杏?個選項。其中，“無”選項是取消邊框，其他選項對應(yīng)著一種不同的邊框。邊框的最終顯示效果還與瀏覽器有關(guān)。“寬度”欄的下拉列表框中有4個選項。它的第一列的下拉列表框用于設(shè)置邊框的寬度，第二列下拉列表框用于選擇數(shù)值的單位，只有在第一列下拉列表框中選擇了“（值）”選項時，它才有效，否則均采用像素為單位。選擇“細(xì)”選項時，可設(shè)置細(xì)邊框；選擇“中”選項時，可設(shè)置中等粗細(xì)的邊框；選擇“粗”選項時，可設(shè)置粗邊框；選擇“值”選項時，可輸入邊框粗細(xì)的數(shù)值，此時其右邊的下拉列表框變?yōu)橛行В梢赃x擇數(shù)值的單位。“顏色”欄中有1個按鈕和1個文本框用于設(shè)置邊框的顏色。

5.2再做“俏皮歇后語”網(wǎng)頁

在Dreamweaver中利用樣式表再做的“俏皮歇后語”網(wǎng)頁的顯示效果如圖5-2-1所示。使用CSS樣式表中的“類型”和“背景”屬性，即可在網(wǎng)頁中設(shè)置文字的不同樣式。

圖5-2-1再做的“俏皮歇后語”網(wǎng)頁的顯示效果5.2再做“俏皮歇后語”網(wǎng)頁

5.2.1定義樣式表中的類型屬性在“CSS樣式定義”對話框左邊的“分類”列表框中單擊“類型”列表項，調(diào)出“類型”屬性的設(shè)置內(nèi)容，如圖5-2-2所示。其中各選項的含義如下。

圖5-2-2“分類”屬性的設(shè)置內(nèi)容5.2再做“俏皮歇后語”網(wǎng)頁

（1）“字體”下拉列表框：設(shè)置應(yīng)用樣式的對象所使用的字體。（2）“大小”下拉列表框：設(shè)置應(yīng)用樣式的對象的字體大小，在后面的下拉列表框中可以設(shè)置使用的單位。（3）“樣式”下拉列表框：設(shè)置應(yīng)用樣式的字體是否為斜體或偏斜體。（4）“行高”下拉列表框：設(shè)置應(yīng)用樣式的對象所在行的高度。選擇“正?！绷斜眄?，則表示使用默認(rèn)的行高；選擇“（值）”列表項后，可以在此處輸入一個數(shù)值，在后面的下拉列表框中選擇單位。（5）“粗細(xì)”下拉列表框：設(shè)置網(wǎng)頁中應(yīng)用樣式的對象字體的粗細(xì)程度。其中各選項的含義如下。“正?！绷斜眄棧菏褂媚J(rèn)的文字設(shè)置。“粗體”列表項：將文字設(shè)置為“粗體”樣式。“特粗”列表項：將文字設(shè)置為“特粗”樣式。“細(xì)體”列表項：將文字設(shè)置為“細(xì)體”樣式。100到900列表項：使用數(shù)值的方法定義文字的粗細(xì)樣式，數(shù)值越大文字也就越粗。

5.2再做“俏皮歇后語”網(wǎng)頁

（6）“變量”下拉列表框：選中“小型大寫字母”列表項后，應(yīng)用樣式的文字中的英文字母將按照小寫字母的大小顯示成大寫字母。（7）“大小寫”下拉列表框：將網(wǎng)頁中應(yīng)用樣式的文字設(shè)置為大寫、小寫或首字母大寫樣式。（8）“修飾”欄：設(shè)置文字的各種樣式，在“修飾”欄中進(jìn)行設(shè)置可以制作出各種特殊效果的連接熱字，如圖5-2-3所示。

圖5-2-3

在“修飾”欄中進(jìn)行設(shè)置后制作的“雙劃線鏈接”和“刪除線鏈接”熱字

5.2再做“俏皮歇后語”網(wǎng)頁

5.2.2定義樣式表中的背景屬性在“CSS樣式定義”對話框內(nèi)左邊的“分類”列表框中單擊“背景”列表項，調(diào)出“背景”屬性的設(shè)置內(nèi)容，如圖5-2-4所示。其中各選項的含義如下。

圖5-2-4“背景”屬性的設(shè)置內(nèi)容5.2再做“俏皮歇后語”網(wǎng)頁

（1）“背景顏色”按鈕與文本框：用于給選中的對象加背景色。（2）“背景圖像”下拉列表框與“瀏覽”按鈕：用于設(shè)置選中對象的背景圖像。下拉列表框內(nèi)有兩個選項?！盁o”選項：此選項是默認(rèn)選項，表示不使用背景圖案。“URL”選項：選擇該選項或單擊“瀏覽”按鈕，可調(diào)出“選擇圖像源”對話框，利用該對話框，可以選擇背景圖像。（3）“重復(fù)”下拉列表框：用于設(shè)置背景圖像的重復(fù)方式。包括4個選項：“不重復(fù)”（只在左上角顯示一幅圖像）、“重復(fù)”（沿水平與垂直方向重復(fù)）、“橫向重復(fù)”（沿水平方向重復(fù)）和“縱向重復(fù)”（沿垂直方向重復(fù)）。（4）“附件”下拉列表框：設(shè)置圖像是否隨內(nèi)容的滾動而滾動。（5）“水平位置”下拉列表框：用于設(shè)置圖像與選定對象的水平相對位置。（6）“垂直位置”下拉列表框：用于設(shè)置圖像與選定對象的垂直相對位置。對于“水平位置”和“垂直位置”下拉列表框，如果選擇了“值”選項，則其右邊的下拉列表框變?yōu)橛行В捎糜谶x擇單位。

5.3“霸道的文字”網(wǎng)頁

網(wǎng)頁中的文字應(yīng)該占用多大的地方，取決于這些文字的格式和大小屬性如何設(shè)置。另外，利用樣式中的“區(qū)塊”和“方框”屬性，可以制作一些比較霸道的文字（本身沒有那么大的字號，可是卻偏要占用網(wǎng)頁中的大量地方，突出自己與眾不同）?！鞍缘赖奈淖帧本W(wǎng)頁的顯示效果如圖5-3-1所示。除了文字外，樣式中的“區(qū)塊”和“方框”屬性對網(wǎng)頁中的其他對象同樣有效。

圖5-3-1“霸道的文字”網(wǎng)頁的顯示效果5.3“霸道的文字”網(wǎng)頁

5.3.1定義樣式表中的區(qū)塊屬性在“CSS樣式定義”對話框左邊的“分類”列表框中單擊“區(qū)塊”列表項，調(diào)出“區(qū)塊”屬性的設(shè)置內(nèi)容，如圖5-3-2所示。其中各選項的含義如下。

圖5-3-2“分類”屬性的設(shè)置內(nèi)容5.3“霸道的文字”網(wǎng)頁

（1）“單詞間距”下拉列表框：用于設(shè)定單詞之間的間距，包括兩個選項，一個是“正常”，一個是“（值）”。選擇“（值）”選項后，可以輸入數(shù)值，再在其右邊的下拉列表框內(nèi)選擇數(shù)值的單位（此處可用負(fù)值）。選擇“正?！边x項后，單詞間距是正常的默認(rèn)值。（2）“字母間距”下拉列表框：用于設(shè)定字母間距，包括兩個選項，一個是“正?！?，一個是“（值）”。選擇“（值）”選項后，可以輸入數(shù)值，再在其右邊的下拉列表框內(nèi)選擇數(shù)值的單位（此處可用負(fù)值）。選擇“正常”選項后，字母間距是正常的默認(rèn)值。（3）“垂直對齊”下拉列表框：用于設(shè)置選中的對象相對于上級對象或相對所在行，在垂直方向的對齊方式。包括9個選項，各選項的作用如下?！盎€”：將對象與上一級對象的基線對齊?！吧蠘?biāo)”：使上標(biāo)對齊?！跋聵?biāo)”：使下標(biāo)對齊?！绊敳俊保菏箤ο笈c所在行中最高對象對齊。“文本頂對齊”：使對象與上級對象的文字頂部對齊。“中線對齊”：使對象與所在行中對象的中線對齊?！暗撞俊保菏箤ο笈c當(dāng)前行中最低的對象的底部對齊?！拔谋镜讓R”：使對象與上級對象的文字底部對齊。

5.3“霸道的文字”網(wǎng)頁

“（值）”：使用數(shù)值方式對齊。（4）“文本對齊”下拉列表框：用于設(shè)置首行文字在對象中的對齊方式。包括“左對齊”、“右對齊”、“居中”和“兩端對齊”4個選項。（5）“文字縮進(jìn)”文本框：用于輸入文字的縮進(jìn)量。（6）“空格”下拉列表框：用于設(shè)置文本空白的使用包括3個選項?！罢！保罕硎緦⑺械目瞻拙顫M?！氨Ａ簟保罕硎居捎脩糨斎霑r控制?！安粨Q行”：表示文本只有加入標(biāo)記<BR>時才換行。（7）“顯示”下拉列表框：用于設(shè)置是否顯示指定的對象，以及如何顯示指定的對象。選擇“無”選項時，不顯示它被指定的對象。5.3.2定義樣式表中的方框?qū)傩栽凇癈SS樣式定義”對話框左邊的“分類”列表框中單擊“方框”列表項，調(diào)出“方框”屬性的設(shè)置內(nèi)容，如圖5-3-3所示。其中各選項的含義如下。

5.3“霸道的文字”網(wǎng)頁

圖5-3-3“分類”屬性的設(shè)置內(nèi)容5.3“霸道的文字”網(wǎng)頁

（1）“寬”下拉列表框：用于設(shè)置對象的寬度。包括兩個選項：“自動”和“值”。在其右邊的下拉列表框內(nèi)選擇數(shù)字的單位。（2）“高”下拉列表框：用于設(shè)置對象的高度。也包括“自動”和“值”兩個選項。（3）“浮動”下拉列表框：用于設(shè)置是否允許文字環(huán)繞在選中對象的周圍。包括3個選項，“左對齊”、“右對齊”和“無”（即對象不移動）。（4）“清除”下拉列表框：用于設(shè)定其他對象是否可以在選定對象的左右。包括3個選項，“左對齊”、“右對齊”和“無”（不允許其他對象在其左右）。（5）“填充”欄：用于設(shè)置邊框與其中的內(nèi)容之間填充的空白間距，4個下拉列表框分別用來決定上、右、下和左邊框與內(nèi)容之間的間距。下拉列表框內(nèi)應(yīng)輸入數(shù)值，在其右邊的下拉列表框內(nèi)選擇數(shù)值的單位。（6）“邊界”欄：用于設(shè)置邊緣的空白寬度，在其下拉列表框內(nèi)可輸入數(shù)值或選擇“自動”。

5.4再做“心情隨筆”網(wǎng)頁

再做的“心情隨筆”網(wǎng)頁的顯示效果如圖5-4-1所示?？梢钥闯?，網(wǎng)頁的結(jié)構(gòu)及網(wǎng)頁中的對象沒有什么變化，但是網(wǎng)頁中的圖像與原來網(wǎng)頁中的圖像相比，產(chǎn)生了一種虛化的效果。使用樣式中的“擴(kuò)展”屬性即可產(chǎn)生這樣的效果。

圖5-4-1“心情隨筆”網(wǎng)頁的顯示效果5.4再做“心情隨筆”網(wǎng)頁

5.4.1定義樣式表中的擴(kuò)展屬性在“CSS樣式定義”對話框左邊的“分類”列表框中單擊“擴(kuò)展”列表項，調(diào)出“擴(kuò)展”屬性的設(shè)置內(nèi)容，如圖5-4-2所示。其中各選項的含義如下。

圖5-4-2“擴(kuò)展”屬性的設(shè)置內(nèi)容5.4再做“心情隨筆”網(wǎng)頁

（1）“分頁”欄：用于在選中的對象的前面或后面強(qiáng)制加入分頁符。一般瀏覽器均不支持此項功能。該欄有“之前”和“之后”兩個下拉列表框，其內(nèi)的選項是：“自動”、“始終”、“左對齊”和“右對齊”，用于確定分頁符的位置。（2）視覺效果欄：利用該欄的兩個下拉列表框中的選項，可以設(shè)置特殊的顯示效果，使頁面的顯示效果更動人?！肮鈽?biāo)”下拉列表框：可以利用該下拉列表框中的選項，設(shè)置各種鼠標(biāo)的形狀。低版本的瀏覽器不支持此項功能。“過濾器”下拉列表框：用于對圖像進(jìn)行濾鏡處理，獲得各種特殊的效果。

5.4再做“心情隨筆”網(wǎng)頁

5.4.2定義樣式表中的列表屬性和定位屬性1．定義樣式表中的列表屬性在“CSS樣式定義”對話框內(nèi)左邊的“分類”列表框中單擊“列表”列表項，調(diào)出“列表”屬性的設(shè)置內(nèi)容，如圖5-4-3所示。其中各選項的含義如下。

圖5-4-3“擴(kuò)展”屬性的設(shè)置內(nèi)容5.4再做“心情隨筆”網(wǎng)頁

（1）“類型”下拉列表框：用于設(shè)置列表的標(biāo)記。選擇標(biāo)記是序號（有序列表）或符號（無序列表）。該下拉列表框內(nèi)有9個選項：“圓點(diǎn)”、“圓圈”等。（2）“項目符號圖像”下拉列表框和按鈕：該下拉列表框內(nèi)有兩個選項，“無”和“（URL）”。選擇“無”選項，不加圖像標(biāo)記；選擇“（URL）”選項，單擊“瀏覽”按鈕，打開“選擇圖像源”對話框，利用該對話框可選擇圖像，在列表行加入小的圖標(biāo)圖案作為列表標(biāo)記。（3）“位置”下拉列表框：使用該下拉列表框來設(shè)置列表標(biāo)記的縮進(jìn)方式。2．定義樣式表中的定位屬性在“CSS樣式定義”對話框內(nèi)左邊的“分類”列表框中單擊“定位”列表項，調(diào)出“定位”屬性的設(shè)置內(nèi)容，如圖5-4-4所示。其中各選項的含義如下。（1）“類型”下拉列表框：用于設(shè)置對象的位置。其中各選項的作用如下。

“絕對”：以頁面左上角的坐標(biāo)為基點(diǎn)?！跋鄬Α保阂阅阁w左上角的坐標(biāo)為基點(diǎn)?！办o態(tài)”：按文本正常順序定位，一般與“相對”定位相同。

5.4再做“心情隨筆”網(wǎng)頁

圖5-4-4“定位”屬性的設(shè)置內(nèi)容5.4再做“心情隨筆”網(wǎng)頁

（2）“顯示”下拉列表框：用于設(shè)置對象的可視性。其中各選項的作用如下“可見”：選中的對象是可視的。“隱藏”：選中的對象是隱藏的?！袄^承”：選中的對象繼承其母體的可視性。（3）“Z軸”下拉列表框：用于設(shè)置不同層的對象的顯示次序。包括兩個選項：“自動”（按原顯示次序）和“值”。選擇“值”選項，可輸入數(shù)值，數(shù)值越大，顯示越靠上。（4）“溢出”下拉列表框：用于設(shè)置當(dāng)文字超出其容器（如層）時的處理方式?！翱梢姟保寒?dāng)文字超出其容器時仍然可以顯示?！半[藏”：當(dāng)文字超出其容器時，超出的內(nèi)容不能顯示。“滾動”：在母體加一個滾動條，可利用滾動條滾動顯示母體中的文字。“自動”：一般默認(rèn)狀態(tài)為“隱藏”狀態(tài)。（5）“定位”欄：用于設(shè)置放置對象的容器的大小和位置。（6）“剪輯”欄：用于設(shè)定對象溢出母體容器部分的剪切方式。對網(wǎng)頁中的對象應(yīng)用“定位”樣式后，Dreamweaver會自動將該對象插入到一個層中，并將該層按照“定位”屬性中的內(nèi)容進(jìn)行定義。

5.5“射門”網(wǎng)頁

“射門”網(wǎng)頁中有一個足球和一個球門，網(wǎng)頁在初始狀態(tài)下的顯示效果如圖5-5-1所示，瀏覽器加載網(wǎng)頁后，足球會向球門移動，直到射到球門內(nèi)，效果如圖5-5-2所示。

圖5-5-2當(dāng)足球射入到球門內(nèi)時網(wǎng)頁的顯示效果圖5-5-1初始時“射門”網(wǎng)頁的顯示效果5.5“射門”網(wǎng)頁

5.5.1“時間軸”面板“時間軸”面板是用于控制網(wǎng)頁中層的屬性隨時間變化而改變的工具。利用它可以產(chǎn)生動畫效果。執(zhí)行“窗口”→“時間軸”菜單命令，或按Alt+F9鍵，即可調(diào)出“時間軸”面板，如圖5-5-3所示。該面板中的各個工具及其他項目的作用如下。

圖5-5-3“時間軸”面板5.5“射門”網(wǎng)頁

1．“時間軸”面板的工具欄（1）“時間軸”下拉列表框：列出了當(dāng)前頁面內(nèi)所有時間軸動畫的名稱，選中其中一個選項后，相應(yīng)的動畫就會在“時間軸”面板中顯示出來。（2）“歸位”按鈕：將動畫圖像移到起始位置，同時回放頭也移動到該位置處。（3）“回放”按鈕：單擊該按鈕，可以使動畫退回一個幀。按住該按鈕不放，可以向相反方向播放動畫。（4）“回放頭位置”文本框：用于輸入顯示和設(shè)置“回放頭”所處的時間軸位置號。（5）“播放”按鈕：單擊該按鈕，可使動畫前進(jìn)一個幀。按住該按鈕不放，可以向正常方向播放動畫。（6）“速度”文本框：用于輸入每秒鐘播放的幀數(shù)。（7）“自動播放”復(fù)選框：選中該復(fù)選框后，則在網(wǎng)上下載后會自動播放。不選中該復(fù)選框時，需要在使用行為事件時才可以播放。（8）“循環(huán)”復(fù)選框：選中該復(fù)選框后，則循環(huán)播放動畫，否則只播放一次動畫。

5.5“射門”網(wǎng)頁

2．通道（1）行為通道：其左邊標(biāo)有字母“B”，可以在該通道的特定幀使用行為事件。（2）行為幀：加入了行為事件的幀，它在“行為通道”內(nèi)。（3）時間標(biāo)尺：給出了與時間對應(yīng)的幀數(shù)。（4）回放頭：播放動畫時，回放頭在時間標(biāo)尺上移動，好像放像機(jī)的磁頭一樣。用鼠標(biāo)拖曳回放頭在時間標(biāo)尺上移動，當(dāng)它移到某一時間單位處時，相應(yīng)的動畫畫面會出現(xiàn)在文檔窗口內(nèi)。（5）動畫條：表示一個動畫所占的幀數(shù)，上面標(biāo)有該動畫所在層的名稱。它的起始處和終止處各有一個小圓，表示首幀和終止幀。如果設(shè)置了關(guān)鍵幀，則關(guān)鍵幀也會有一個小圓。（6）動畫通道：由許多圖層組成，表示可以在一個頁面內(nèi)加入多個時間軸動畫，但最多可以加32個，它的左邊標(biāo)有圖層的編號。圖層編號大的動畫在圖層編號小的動畫之上。

5.5“射門”網(wǎng)頁

5.5.2制作直線移動動畫（1）在頁面內(nèi)插入一個層，給該層起一個名字，例如，Layer1。然后在層內(nèi)插入一個圖像或輸入一些文字等。此處層中插入的是圖像，如圖5-5-4所示。圖5-5-4在層中插入圖像

并移到動畫的起始位置（2）將插有圖像或文字的層移到動畫的起始位置。（3）調(diào)出“時間軸”面板。（4）用鼠標(biāo)將層拖曳到“時間軸”面板的動畫通道內(nèi)，或執(zhí)行“修改”→“時間軸”→“增加對象到時間軸”菜單命令。這時，“時間軸”面板的動畫通道內(nèi)會出現(xiàn)一個動畫條，如圖5-5-5所示。如果選中了“循環(huán)”復(fù)選框，則在動畫通道中，會同時出現(xiàn)一個“動作幀”。圖5-5-5動畫通道內(nèi)出現(xiàn)一個動畫條（5）選中動畫條的終止幀。默認(rèn)的動畫幀數(shù)是15幀，如果要調(diào)整動畫的幀數(shù)，可用鼠標(biāo)將動畫條終止幀拖曳到希望結(jié)束的幀上面。在改變了終止幀的位置之后，如果要編輯行為，則應(yīng)該雙擊動畫通道中最后一幀的下一幀。

5.5“射門”網(wǎng)頁

圖5-5-4在層中插入圖像

并移到動畫的起始位置

圖5-5-5動畫通道內(nèi)出現(xiàn)一個動畫條5.5“射門”網(wǎng)頁

（6）用鼠標(biāo)拖曳動畫層到目標(biāo)處，當(dāng)松開鼠標(biāo)左鍵時，會看到一條直線，表示圖像移動的路徑，如圖5-5-6所示。

圖5-5-6表示圖像移動路徑的一條直線（7）按住“播放”按鈕不放，即可在網(wǎng)頁編輯窗口內(nèi)看到動畫了。5.6再做“射門”網(wǎng)頁

在上一節(jié)的“射門”網(wǎng)頁中，足球是以直線運(yùn)動射入球門。其實，更精彩的射門應(yīng)該是沿曲線射出的“香蕉球”，在修改后的“射門”網(wǎng)頁中，足球變?yōu)榍€向球門移動，直到移到球門內(nèi)，效果如圖5-6-1所示。

圖5-6-1再做的“射門”網(wǎng)頁的顯示效果5.6再做“射門”網(wǎng)頁

5.6.1加入關(guān)鍵幀“時間軸”面板可以在用戶給出起始幀和終止幀后，自動產(chǎn)生中間過程的各幀。如果動畫的移動路徑不是直線的，中間有轉(zhuǎn)折點(diǎn)，則轉(zhuǎn)折點(diǎn)處的畫面就是關(guān)鍵幀。加入關(guān)鍵幀，可以使沿直線路徑移動的動畫變?yōu)檠厍€或折線路徑移動的動畫，加入關(guān)鍵幀的方法如下。（1）選中動畫條內(nèi)要加入關(guān)鍵幀的位置，回放頭會隨之移到此時間位置，同時產(chǎn)生一條垂直的紅線，用于指示選中的位置。（2）在動畫條內(nèi)，單擊鼠標(biāo)右鍵，彈出時間軸快捷菜單。再單擊該菜單內(nèi)的“增加關(guān)鍵幀”菜單命令，即可在選中的位置處插入一個關(guān)鍵幀，如圖5-6-2所示。（3）還可以通過按住Ctrl鍵的同時單擊要加入關(guān)鍵幀的位置來插入關(guān)鍵幀。如果對關(guān)鍵幀的位置不滿意，可以用鼠標(biāo)拖曳關(guān)鍵幀上的小圓來調(diào)整其位置。如果要刪除關(guān)鍵幀，可以選中要刪除的關(guān)鍵幀，然后單擊鼠標(biāo)右鍵，彈出時間軸快捷菜單，再單擊該菜單中的“移除關(guān)鍵幀”菜單命令即可。

5.6再做“射門”網(wǎng)頁

圖5-6-2加入關(guān)鍵幀后的“時間軸”面板5.6再做“射門”網(wǎng)頁

5.6.2制作沿曲線路徑移動的動畫（1）選中關(guān)鍵幀，用鼠標(biāo)拖曳動畫層到新的位置，即可確定關(guān)鍵幀圖像的位置。此時動畫移動的路徑線會變?yōu)橐粭l曲線，如圖5-6-3所示。可以看出，路徑線的起始位置與終止位置不變。如果要改變關(guān)鍵幀的位置，可以再用鼠標(biāo)拖曳動畫層到新的位置。（2）按住“播放”按鈕不放，即可在網(wǎng)頁編輯窗口內(nèi)看到沿曲線路徑移動的動畫。

5.6再做“射門”網(wǎng)頁

圖5-6-3調(diào)整關(guān)鍵幀動畫層的位置后產(chǎn)生的曲線路徑線5.7“風(fēng)景幻燈”網(wǎng)頁

“風(fēng)景幻燈”網(wǎng)頁初始時顯示為一幅風(fēng)景圖像，如圖5-7-1所示。網(wǎng)頁加載后，其中的圖像會向右移動，當(dāng)移動到一定的位置后，該圖像消失，在網(wǎng)頁的左邊顯示出另外一幅圖像，并且和第一幅一樣向右移動，如圖5-7-2所示。交替顯示4幅圖像后從第一幅圖像開始重新進(jìn)行循環(huán)顯示。

圖5-7-1

“風(fēng)景幻燈”網(wǎng)頁初始時的顯示效果

圖5-7-2

“風(fēng)景幻燈”網(wǎng)頁中動畫的顯示效果

5.7“風(fēng)景幻燈”網(wǎng)頁

5.7.1動畫的刪除、復(fù)制、移動和更名1．動畫的刪除（1）刪除動畫條：選中要刪除的動畫條后，再按Delet鍵即可。（2）刪除動畫的移動路徑：選中要刪除的動畫條，再按Delet按鍵即可。（3）刪除所有動畫條：單擊時間軸菜單中的“刪除時間軸”菜單命令即可。2．動畫的復(fù)制（1）選中要復(fù)制的動畫條，再單擊時間軸菜單中的“復(fù)制”菜單命令即可。（2）調(diào)整回放頭的位置，再單擊時間軸菜單中的“粘貼”菜單命令，即可在選中的動畫條的右邊復(fù)制一個動畫條，而且可以將其復(fù)制到其他頁面的“時間軸”面板中。3．動畫的移動（1）選中要移動的動畫條，再單擊時間軸菜單中的“剪切”菜單命令。（2）調(diào)整回放頭的位置，再單擊時間軸菜單中的“粘貼”菜單命令，即可將動畫條移到回放頭所處的位置處，而且可以將其移動到其他頁面的“時間軸”面板中。

5.7“風(fēng)景幻燈”網(wǎng)頁

（3）可以用鼠標(biāo)拖曳一個動畫條在整個動畫通道內(nèi)移動。按住Shift鍵的同時單擊要移動的動畫條，選中多個動畫條，鼠標(biāo)拖曳一個動畫條即可同時移動多個動畫條。4．動畫的更名（1）可以直接在“時間軸”面板的列表框內(nèi)更改動畫的名稱。（2）單擊時間軸菜單中的“重命名時間軸”菜單命令，調(diào)出“重命名時間軸”對話框。在該對話框內(nèi)的“時間軸名稱”文本框內(nèi)輸入新的名稱，再單擊“確定”按鈕即可。5.7.2使用多個時間軸與用時間軸控制頁面上的所有操作相比，使用單獨(dú)的時間軸來控制頁的各個離散部分會更容易。例如，一個頁可能包含多個互動對象，每個對象都可以觸發(fā)不同的時間軸。若要管理多個時間軸，可執(zhí)行以下任意一種操作。新建時間軸：執(zhí)行“修改”→“時間軸”→“添加時間軸”菜單命令即可。刪除時間軸：選中要刪除的時間軸，執(zhí)行“修改”→“時間軸”→“刪除時間軸”菜單命令，將永久刪除選中的時間軸中的所有動畫。

5.7“風(fēng)景幻燈”網(wǎng)頁

重命名時間軸：選中要重命名的時間軸，執(zhí)行“修改”→“時間軸”→“重命名時間軸”菜單命令；單擊“時間軸”面板右上角的按鈕，調(diào)出時間軸菜單，單擊該菜單中的“重命名時間軸”菜單命令即可。查看另一個時間軸：要在“時間軸”面板中查看另一個時間軸，可在“時間軸”面板左上角的下拉列表框中直接選擇一個新的時間軸即可。在時間軸中插入對象：選中網(wǎng)頁文檔中的對象，再單擊“時間軸”面板右上角的按鈕，調(diào)出時間軸菜單，單擊該菜單中的“插入對象”菜單命令即可。