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

第5章樣式表與時間線

本章要點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“風景幻燈”網(wǎng)頁5.8“浮動圖像”網(wǎng)頁

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

在Dreamweaver中重做后的“卡通青蛙”網(wǎng)頁如圖5-1-1所示?？梢钥闯?，該網(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鍵，即可調出“CSS樣式”面板，如圖5-1-2所示。其中各選項的作用如下。圖5-1-2“CSS樣式”面板（1）顯示窗口：顯示所有樣式表的名稱，“（未定義樣式）”表示沒有樣式。（2）“附加樣式表”按鈕：單擊該按鈕，調出“選擇樣式表文件”對話框，用于導入外部的樣式表（文件的擴展名為.css）。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖5-2-3

在“修飾”欄中進行設置后制作的“雙劃線鏈接”和“刪除線鏈接”熱字

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

并移到動畫的起始位置

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

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

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

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

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

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

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

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

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

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

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

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

圖5-7-1

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

圖5-7-2

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

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

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

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

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

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

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