HTML和中文DreamweaverMX2004實(shí)用教程第5章

第5章樣式表與時(shí)間線

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

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

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

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

5.5“射門(mén)”網(wǎng)頁(yè)

5.6再做“射門(mén)”網(wǎng)頁(yè)

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

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

在Dreamweaver中重做后的“卡通青蛙”網(wǎng)頁(yè)如圖5-1-1所示?？梢钥闯?，該網(wǎng)頁(yè)和第1章中的“卡通青蛙”網(wǎng)頁(yè)基本相同，在網(wǎng)頁(yè)中包含幾個(gè)大小不同的卡通青蛙圖像，并且每個(gè)圖像的周?chē)荚黾恿诉吙?。這兩個(gè)網(wǎng)頁(yè)的不同之處在于第1章中的“卡通青蛙”網(wǎng)頁(yè)是使用HTML代碼實(shí)現(xiàn)的，而本實(shí)例是使用“樣式”實(shí)現(xiàn)的。

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

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

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

（3）“新建CSS樣式”按鈕：?jiǎn)螕粼摪粹o，調(diào)出“新建CSS樣式”對(duì)話框，如圖5-1-3所示。利用該對(duì)話框可以建立新的樣式。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖5-2-3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.5“射門(mén)”網(wǎng)頁(yè)

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

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

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

圖5-5-3“時(shí)間軸”面板5.5“射門(mén)”網(wǎng)頁(yè)

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

5.5“射門(mén)”網(wǎng)頁(yè)

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

5.5“射門(mén)”網(wǎng)頁(yè)

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

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

5.5“射門(mén)”網(wǎng)頁(yè)

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

并移到動(dòng)畫(huà)的起始位置

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

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

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

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

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

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

5.6再做“射門(mén)”網(wǎng)頁(yè)

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

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

5.6再做“射門(mén)”網(wǎng)頁(yè)

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

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

圖5-7-1

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

圖5-7-2

“風(fēng)景幻燈”網(wǎng)頁(yè)中動(dòng)畫(huà)的顯示效果

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

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

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

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

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

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