r \/>
I�\u0000\f''''�\u001c④按下Shift鍵，分別單擊要選擇的各個APDiv的內部或邊框線，可以選中多個APDiv。
（5）調整APDiv的大小。
①拖動APDiv的控製柄。
②在APDiv的“屬性”麵板中，輸入“寬度”和“高度”值。
③按住Ctrl鍵，同時使用方向鍵，將以1px為單位精確調整大小。
④按住Shift+Ctrl鍵，同時使用方向鍵，將以10px為單位調整大小。
（6）調整APDiv的位置。
①選中APDiv後使用鼠標拖動。
②選中APDiv後使用方向鍵，一次可移動1個像素。
③選中APDiv後按住Shift鍵同時使用方向鍵，一次可移動10個像素。
④在APDiv的“屬性”麵板中，輸入“左”和“上”的值可精確定位APDiv的位置。
（7）對齊APDiv。選中多個APDiv，選擇“修改→排列順序”命令，選擇其子菜單中的命令，即可獲得相應的對齊效果。
56項目四網頁的布局2.設置APDiv的屬性選中APDiv後，顯示APDiv的“屬性”麵板，如圖4-23所示。
圖4-23APDiv的“屬性”麵板（1）CSS-P元素：用於輸入APDiv的名稱。
（2）左、上：用於設置APDiv左上角相對於頁麵左上角的水平距離和垂直距離，單位是像素。對於嵌套中的子APDiv，則相對於父APDiv。
（3）寬、高：用於設置APDiv的大小，單位默認為像素。
（4）Z軸：用於確定APDiv在Z軸上的位置，即層疊順序。
（5）可見性：用來設置APDiv的可視性，包括以下幾種屬性。default，表示默認，其可見性由瀏覽器決定，大多數瀏覽器會繼承該APDiv的父APDiv的可見性。inherit，繼承父APDiv的可見性。visible，顯示APDiv和其內對象。hidden，隱藏APDiv和其內對象。
（6）溢出：用於設置當前APDiv中的內容超出其大小時的狀態，包括以下幾種參數。
visible，APDiv高度自動增加，以容納超出的內容。hidden，超出的內容隱藏。scroll，不管是否超出，都顯示滾動條。auto，自動識別是否顯示滾動條，APDiv中的內容超出時顯示滾動條，否則不顯示。
（7）剪輯：用於確定APDiv的可見區域。
（8）背景圖像：用於確定APDiv的背景圖像。
（9）背景顏色：用於確定APDiv的背景顏色。
3.APDiv在排版中的應用（1）“AP元素”麵板：選擇“窗口→AP元素”命令或按F2鍵均可打開“AP元素”麵板，如圖4-24所示。
（2）改變APDiv的層疊順序：APDiv可以重疊在一起，要改變其層疊順序，可使用以下方法。
①選中APDiv，在屬性麵板的“Z軸”框中圖4-24“AP元素”麵板直接輸入Z值。
②在“AP元素”麵板中，使用鼠標直接拖動APDiv到指定位置。
③在“AP元素”麵板中，單擊APDiv的Z值，直接輸入新的Z值。
小貼士：Z軸的數值越大，APDiv的位置越靠上，Z軸的值可以是正數，也可以是負數，但不能為小數。
57DreamweaverCS3（3）設置APDiv的可見性：選中APDiv，在屬性麵板的“可見性”列表中選擇可見性屬性，如圖4-25所示。在“AP元素”麵板中，通過單擊眼睛圖標進行設置，如圖4-26所示。
圖4-25可見性屬性單擊切換全部層是否可見閉合表示APDiv不可見，睜開表示可見空白表示繼承父元素的可見性單擊切換該APDiv是否可見圖4-26設置可見性屬性（4）創建嵌套APDiv可使用以下方法。
①在“首選參數”對話框“AP元素”類別中，勾選“嵌套”複選框，再將插入點置於一個APDiv中繪製一個APDiv。
②如果沒有勾選“嵌套”屬性，則需要按住Alt鍵在現有APDiv中繪製一個APDiv。
③在“AP元素”麵板中，按住Ctrl鍵拖動一個APDiv的名稱到另一個APDiv的名稱上，即將拖動的APDiv插入到另一個APDiv中。
小貼士：1.創建嵌套APDiv後，選定父APDiv後，子APDiv也會被選定；在移動或複製父APDiv時，子APDiv也會隨之被移動或複製；刪除父APDiv，子APDiv也將一並被刪除。子APDiv的任何操作不會影響父APDiv。
2.如果想解除APDiv間的嵌套關係，隻需在“AP元素”麵板上，拖動子APDiv的名稱到左下方即可。
58項目四網頁的布局任務四趣味拚圖★任務目的1.掌握將表格轉換為APDiv的方法及應用。
2.掌握使用APDiv製作拚圖的方法。
★實施步驟（1）新建網頁，將網頁保存在files文件夾內，文件名為shixun4.4.html。
（2）插入1行2列的表格，表格寬度為950像素，在第二列單元格中插入素材圖像kuang.gif。
（3）將光標定位在左側單元格內，插入一個2行1列的表格，在第一行單元格中插入素材圖像icom2.jpg，在第二行單元格中插入3行3列的嵌套表格，並插入素材拚圖tp1.
jpg～tp9.jpg9幅圖。如圖4-27所示。
圖4-27插入效果（4）執行“修改”→“轉換”→“將表格轉換為APDiv”命令，在彈出的“將表格轉換為APDiv”對話框中保留默認值的設置，並確認，如圖4-28所示。
圖4-28“將表格轉換為APDiv”對話框（5）將上述圖片所在的AP元素分別選取，並在“屬性”麵板中設置CSS-P編號，編號順序從上到下，從左到右依次排列，名稱分別為pt1~pt9，如圖4-29所示。
59DreamweaverCS3圖4-29設置CSS-P編號（6）單擊編輯窗口底部的“body”標簽，單擊“行為”麵板的添加按鈕，選取行為“拖動AP元素”，在“AP元素”中選擇“divpt1”，確認後，將觸發事件修改為“onMouseOver”。
（7）重複上述步驟，完成pt2~pt9的設置。
（8）保存當前網頁，預覽效果。
★知識鏈接表格與APDiv的相互轉換（1）APDiv轉換為表格：選擇“修改→轉換→將APDiv轉換為表格”命令，彈出“將APDiv轉換為表格”對話框，設置後，單擊“確定”按鈕。
（2）表格轉換為APDiv：選擇“修改→轉換→將表格轉換為APDiv”命令，彈出“將表格轉換為APDiv”對話框，設置後，單擊“確定”按鈕，如圖4-30所示。
圖4-30表格與APDiv的相互轉換60項目四網頁的布局任務五模板的應用★任務目的1.掌握模板的創建方法。
2.掌握使用模板創建和更新網頁。
★實施步驟（1）新建站點dw，或者打開已經存在的站點，把素材中的index.html和logo.swf複製到站點目錄中。打開index.html，選擇“文件→另存為模板”命令，打開“另存為”對話框，“文件名”為muban，單擊“保存”。這時，站點目錄下會自動產生一個存放模板的文件夾Templates。
（2）打開muban.dwt，在中間的空單元格中插入光標，選擇“插入記錄→模板對象→可編輯區域（E）”命令，插入一個可編輯區域“EditRegion1”標誌。保存網頁，在彈出的“更新模板文件”對話框中選“更新”。
（3）選擇“文件→新建”命令，彈出“新建文檔”對話框，單擊左邊欄內的“模板中的頁”，在“站點”列表中選擇模板所在的站點，在模板列表中選擇“muban.dwt”。
（4）選擇“文件→導入→word文檔”選擇素材中的“臨沭縣職業中等專業學校簡介.doc”，點擊“打開”，保存網頁，命名為index1.html，如圖4-31所示。
圖4-31網頁效果（5）打開前麵所建的“shixun3.2.html”，選擇“修改→模板→應用模板到頁”命令，彈出“選擇模板”對話框，在“模板”列表中選擇“moban1”（注意：複選框要選中），單擊“選61DreamweaverCS3定”按鈕，彈出“不一致的區域名稱”對話框。選擇“Documentbody”，在“將內容移到新區域”列表中選擇可編輯區域“EditRegion1”，單擊“確定”按鈕，“文件→另存為”命令，將網頁保存為“xyfj.html”。
（6）打開“muban.dwt”，修改“網站首頁”的連接目標為index1.html，“校園風光”的鏈接目標為“xyfj.html”，保存模板，在彈出的“更新模板文件”對話框中單擊“更新”。
★知識鏈接1.模板的建立（1）創建模板的方法有兩種，一是將原有頁麵轉存為模板文件，另一種是新建一個模板文件。
①新建一個模板文件：選擇“文件→新建文檔”命令，打開“新建文檔”對話框，依次選擇“空白頁→HTML模板”，單擊“創建”按鈕，如圖4-32所示。
圖4-32創建模板文件②把現有文檔轉存為模板：打開要轉存為模板的網頁文件；選擇“文件→另存為模板”或“插入記錄→模板→創建模板”命令，彈出“另存模板”對話框，如圖4-33所示；選擇一個用來保存模板的站點，在“另存為”文本框中輸入模板名稱，單擊“保存”按鈕。
圖4-33“另存模板”對話框62項目四網頁的布局小貼士：DreamweaverCS3將模板文件以擴展名.dwt保存到站點本地根目錄的Templates文件夾中。如果該Templates文件夾在站點中尚不存在，DreamweaverCS3將在保存新建模板時自動創建該文件夾。
（2）可編輯區域的建立與取消：模板被創建後，所有的區域為鎖定區域，若要使用模板創建網頁，必須設置可編輯區域。
①創建可編輯區域：在模板文檔中，選擇要設置為可編輯區域的文本或內容，或將光標定位到要插入可編輯區域的地方。按Ctrl+Alt+V快捷鍵或選擇“插入記錄→模板對象→可編輯區域”命令，打開“新建可編輯區域”對話框，如圖4-34所示。在“名稱”文本框中為該區域輸入唯一的名稱，單擊“確定”按鈕，即可完成可編輯區域的創建。
圖4-34創建可編輯區域小貼士：命名可編輯區域時，不能使用單引號、雙引號、尖括號和&符號。
不能對特定模板中的多個可編輯區域使用相同的名稱。
可將整個表格或單個單元格標記為可編輯的，但不能將多個表格或單元格標記為單個可編輯區域。
AP元素和AP元素內容是不同的元素，將AP元素設置為可編輯便可以更改AP元素的位置和該元素的內容，而使AP元素的內容可編輯則隻能更改AP元素的內容，不能更改該元素的位置。
②取消可編輯區域標記：如果已經將模板文件的某個區域標記為可編輯，若要重新鎖定該區域，可刪除該可編輯區域。在模板文檔中，選中要刪除的可編輯區域。選擇“修改→模板→刪除模板標記”命令，即可刪除可編輯區域，該區域此時變成鎖定區。
2.模板的應用（1）使用模板創建新網頁文件的方法有以下3種。
①選擇“文件→新建”命令，打開“新建文檔”對話框，單擊“模板中的頁”選項，在“站點”列表中選擇站點，在“模板”列表中選擇相應的模板，單擊“創建”按鈕，即可使用該模板創建一個網頁文件，如圖4-35所示。
63DreamweaverCS3圖4-35使用模板創建新網頁文件②新建一個網頁，選擇“修改→模板→應用模板到頁”命令，彈出“選擇模板”對話框，從模板列表中選擇一個模板，單擊“選定”按鈕，如圖4-36所示。
③新建一個網頁，選擇“窗口→資源”命令打開“資源”麵板，單擊“模板”按鈕，選中相應模板，單擊“應用”按鈕，如圖4-37所示。
圖4-36“選擇模板”對話框圖4-37“資源”麵板（2）將模板應用於已有網頁的操作。
①打開要應用模板的文檔，選擇“修改→模板→應用模板到頁”命令，彈出“選擇模板”對話框。
②從模板列表中選擇一個模板，單擊“選定”按鈕，彈出“不一致的區域名稱”對話，如圖4-38所示。
③選擇“Documentbody”，在“將內容移到新區域”列表中選擇要移動到的可編輯區域名稱，選擇“Documenthead”，在“將內容移到新區域”列表中選擇“head”，單擊“確定”按鈕。
64項目四網頁的布局圖4-38選擇把已有網頁放在模板中某個區域（3）將模板從網頁中分離的操作。
①打開要分離模板的網頁。
②選擇“修改→模板→從模板中分離”命令，所有區域都變為可編輯區域。
（4）更新模板的操作。
①打開模板文檔，對模板進行修改，按Ctrl+S保存模板文檔，彈出“更新模板文件”對話框。
②單擊“更新”按鈕，彈出“更新頁麵”對話框，自動更新相關的所有網頁，更新完成後，單擊“關閉”按鈕，如圖4-39所示。
圖4-39“更新頁麵”對話框★項目總結為了提高網頁編輯的效率和效果，本項目係統提出了網頁布局的3種工具：表格、框架和APDiv，及模板在網頁中的使用。熟練掌握了以上幾種工具的使用，可以大大提高同學們網頁的編輯效率，改善網頁的可視效果。
65DreamweaverCS3★項目評價項目評價見表4-2。
表4-2項目評價評價標準自我評價教師評價評價項目評價內容很好一般再學習已達標再努力學會表格創建的一般方法學會表格的基本操作，如選擇表格、行、列、單元格等學會框架創建的一般方法基本知識和基本操作了解框架的優缺點技
學會ApDiv創建的一般方能
法和基本操作知
識了解模板的作用掌能夠掌握表格的創建過程握和設置方法能夠掌握框架的創建過程和設置方法基本技能能夠掌握APDiv的創建和設置方法能夠掌握模板的創建和應用方法合能積極發表意見和傾聽他交流討論作人發言交
幫助他人能認真聽課，富有建設性流
★思考與上機實訓1.創建一個網頁，利用APDiv的重疊特性製作圖4-40效果的陰影文字。
圖4-40文字效果2.創建一個頂部固定左側嵌套的框架集，當單擊左側框架中文字“神探柯南”時，將在主框架中打開神探柯南動畫的頁麵；當單擊左側框架中文字“火影忍者”時，將在新的窗口中打開火影忍者動畫的頁麵。請問應該如何做？
3.小明從網上下載了一個名為moban.dwt的模板，並保存到了硬盤上。他想將該模板套用到已有的一個頁麵上，在打開的“選擇模板”對話框模板列表中卻沒有發現該模板文件，請問：（1）為什麼會出現這樣的情況？該怎麼解決？
（2）如何將該模板套用到該頁麵上？具體操作步驟是怎樣的？
66項目五簡單網頁特效製作項目五簡單網頁特效製作★項目要點1.利用CSS樣式美化和布局網頁。
2.通過利用行為，實現簡單網頁交互的效果。
3.利用時間軸，學習簡單動態網頁效果的製作。
任務一對臨沭職專頁麵進行美化（CSS樣式表的應用）★任務目的1.學會CSS樣式的創建、編輯和應用。
2.學會使用CSS樣式對網頁進行美化和布局網頁的方法。
★實施步驟如何創建一個內部樣式zt（類樣式），並通過應用該樣式美化網頁index.html的正文內容？下麵動手試一試。
（1）將素材中的lszyzz文件夾複製到D盤根目錄下，運行DreamweaverCS3，新建站點“臨沭職業中專”，站點文件夾為D：\\lszyzz。打開站點根目錄下的index.html網頁文件。如圖5-1所示。
圖5-1index.html網頁文件67DreamweaverCS3（2）選擇“窗口→CSS樣式”命令或按Shift+F11組合鍵，打開“CSS樣式”麵板，如圖5-2所示。單擊“CSS樣式”麵板右下方的“新建CSS規則”按鈕，彈出“新建CSS規則”對話框，在“選擇器類型”中選擇“類”，在“名稱”文本框中輸入“.zt”，在“定義在”項中選擇“僅對該文檔”，如圖5-3所示。單擊“確定”按鈕，彈出“.zt的CSS規則定義”對話框。
圖5-2“CSS樣式”麵板圖5-3“新建CSS規則”對話框（3）在“.zt的CSS規則定義”對話框中的“分類”列表中選擇“類型”，設置“行高”為18像素，“大小”為12像素，在“顏色”文本框中輸入顏色值“#006666”，如圖5-4所示。設置完成後，單擊“確定”按鈕。
圖5-4“.zt的CSS規則定義”對話框（4）選中網頁中的文本，在屬性麵板中“樣式”下拉列表中選擇zt，如圖5-5所示。
或在“CSS樣式”麵板中選擇樣式“zt”，單擊鼠標右鍵，在彈出的快捷菜單中選擇“套用”命令。此時，定義的樣式將被應用到選中的文本中。
圖5-5在“文本”屬性麵板上樣式列表中選擇zt樣式68項目五簡單網頁特效製作★擴展練習1.如何通過創建樣式，實現對超鏈接4種狀態顏色的快速設置？下麵動手試一試。
（1）單擊“CSS樣式”麵板右下方的“新建CSS規則”按鈕，彈出“新建CSS規則”對話框。在“選擇器類型”中選擇“高級”，在“選擇器”下拉列表中選擇“a：link”，在“定義在”項中選擇“僅對該文檔”，如圖5-6所示。單擊“確定”按鈕，彈出“a：link的CSS規則定義”對話框。
圖5-6“a：link高級樣式”（2）在“a：link的CSS規則定義”對話框的“分類”列表中選擇“類型”，設置“修飾”為“無”，在“顏色”框中輸入顏色值“#00cc66”，單擊“確定”按鈕。用同樣的方法，分別為超鏈接的其他3種狀態a：visited、a：hover、a：active進行顏色的適當設置。設置完成後這4種超鏈接樣式將被直接應用到網頁文件中。如圖5-7所示。
圖5-7應用鏈接樣式後的效果2.如何創建一個ys.css樣式表文件，包含一個名為.kj的樣式，將字體大小設為14像素、樣式設為斜體、行高設為18像素，包含一個table標簽樣式，將表格邊框線設為藍色細虛線？下麵動手試一試。
（1）在“CSS樣式”麵板中，單擊“新建CSS規則”按鈕，彈出“新建CSS規則”對話框。在“選擇器類型”中選擇“類”，在“名稱”文本框中輸入.kj，在“定義在”項中選擇“新建樣式表文件”，單擊“確定”按鈕。彈出“保存樣式表文件為”對話框，在文件名文本框中輸入ys，單擊“保存”按鈕。如圖5-8所示。
69DreamweaverCS3圖5-8“保存樣式表文件對話框”（2）在隨後彈出的“.kj的CSS規則定義（在ys.css中）”對話框中，在“分類”中選擇“類型”，設置大小為14像素、樣式設為斜體、行高設為18像素，單擊“確定”按鈕。
（3）再次單擊“CSS樣式”麵板中“新建CSS規則”按鈕，彈出“新建CSS規則”對話框。在“選擇器類型”中選擇“標簽”，在“標簽”名稱框中輸入table或直接在其列表中選擇table，在“定義在”項中選擇“ys”，單擊“確定”按鈕。在彈出的“table的CSS規則定義（在ys.css中）”對話框中，在“分類”中選擇“邊框”，將“樣式”設為“虛線”，“寬度”設為“細”，“顏色”設為“藍色”。如圖5-9所示。
圖5-9“table的CSS規則定義”對話框（在ys.css中）3.如何將一個外部樣式文件應用到index.html網頁中？下麵動手試一試。
（1）在“CSS樣式”麵板中，單擊“附加樣式表”按鈕，彈出“鏈接外部樣式表”對話框，如圖5-10所示。單擊“瀏覽”按鈕，選擇ys.css樣式表文件，單擊“確定”按鈕。
70項目五簡單網頁特效製作5-10“鏈接外部樣式表”對話框（2）在文件麵板上雙擊打開index.html網頁文件，單擊“”標簽，選中網頁正文內容，在“屬性”麵板上“樣式”下拉列表中選擇“kj”樣式，該樣式就可以被應用到網頁正文內容中。按Ctrl+S組合鍵保存。頁麵效果如圖5-11所示。
5-11應用ys外部樣式後的頁麵效果4.如何利用CSS規則定義對話框中的“擴展”分類提供的參數來設置圖像的特殊效果？下麵動手試一試。
（1）打開xq.html網頁文件，如圖5-12所示。單擊“CSS樣式”麵板右下方的“新建CSS規則”按鈕，彈出“新建CSS規則”對話框，在“選擇器類型”中選擇“類”，在“名稱”文本框中輸入.tx1，在“定義在”項中選擇“僅對該文檔”，單擊“確定”按鈕。
圖5-12xq.html網頁文件71DreamweaverCS3（2）在彈出的“.tx1的CSS規則定義”對話框的“分類”列表中選擇“擴展”，在“過濾器”下拉列表中選擇透明度效果“Alpha”，將過濾器效果設置為“Alpha（Opacity=100，Finishopacity=0，Style=2，StartX=0，StartY=0，FinishX=550，FinishY=450）”，單擊“確定”按鈕，如圖5-13所示。
圖5-13“.tx1的CSS規則定義”對話框（3）選中頁麵中間單元格中的圖片，在屬性麵板的“類”列表中選擇“tx1”，按F12鍵保存並預覽網頁。效果如圖5-14所示。
圖5-14設置透明度效果★知識鏈接1.了解CSS樣式在設計網頁時，我們通常要對網頁中各種對象的屬性進行設置，以達成我們需要的外觀效果，但是，每次改變不同網頁對象的屬性時，我們常常遇到重複性高的問題。例如，為不同的段落文本設置相同的字體效果，如果對這些相同的元素逐項設置其字體、字號、大小、顏色等，那將是非常大的重複工作。
Dreamweaver通過CSS樣式表很好地解決了這個問題。通過建立樣式表，可以非常靈活地將頁麵的布局、背景、字體等屬性進行統一設置，並通過應用這些樣式表，高效地實72項目五簡單網頁特效製作現對不同對象相同效果的樣式化。
CSS（CascadingStyleSheet，即層疊樣式表）技術是一種格式化網頁的標準方式，它通過設置CSS屬性使網頁元素對象獲得不同的效果。在定義了一個CSS樣式後，可以將它應用於網頁內不同的元素，使這些元素具有相同的屬性效果。而在修改該CSS樣式後，所有應用了該樣式的網頁元素的屬性效果也會隨之自動得到相應改變，這樣既保證了站點風格的一致性，又提高了工作效率。
2.CSS樣式分類從樣式的頁麵應用區別來分，CSS樣式分為內部樣式和外部樣式。內部樣式，隻能應用於當前頁麵。既可以在頁麵的與之間定義一個樣式代碼段…，然後在後麵段落內容編排中應用；也可以直接在需要設置樣式的標簽內部添加style屬性，實現對標簽對象外觀效果的臨時調整。例如。外部樣式，它是一個獨立的CSS樣式表文件，不屬於任何一個頁麵，可以被應用於不同的網頁中，該類樣式文件裏可以包含多個不同的樣式內容，靈活性很高。
從樣式應用範圍的區別來分，CSS樣式分為類樣式、標簽樣式、高級樣式。
3.創建CSS樣式默認情況下，在Dreamweaver中設置文本格式時，Dreamweaver係統會自動產生CSS樣式，當用戶通過“屬性”麵板或菜單命令設置文本格式時，係統將自動創建CSS樣式，這些樣式被嵌入到當前文檔的頭部，處於與之間。默認產生的CSS樣式名稱為STYLE+N。當我們對選中的文本進行字體、大小、顏色等屬性設置後，係統自動生成了一個CSS樣式，名稱為STYLE1，如圖5-15所示。
圖5-15對字體設置後產生的STYLE1樣式使用這種方法創建的CSS樣式，雖然操作設置簡單，但功能有限，創建的樣式也隻能嵌入到當前文檔中使用。CSS樣式麵板提供了功能全麵的樣式編輯功能，使用CSS樣式麵板創建的樣式，不僅可以嵌入到當前文檔，還可以形成一個樣式文件應用到其他頁麵中。
（1）打開“CSS樣式”麵板：可以使用“CSS樣式”麵板查看、創建、編輯、刪除CSS樣式，並且可以將外部樣式表附加到當前文檔中，如圖5-16所示。用以下方法均可打開“CSS樣式”麵板。
①選擇“窗口→CSS樣式”命令。
②按Shift+F11組合鍵。
③單擊屬性麵板上的按鈕。
73DreamweaverCS3內部CSS樣式外部CSS樣式文件名外部CSS樣式文件裏的樣式名稱選中的CSS樣式的屬性及屬性值圖5-16“CSS樣式”麵板（2）“CSS樣式”麵板中各按鈕的含義及作用如下。
①“類別”視圖按鈕：將Dreamweaver支持的CSS屬性分為字體、背景、區塊、邊框、方框、列表、定位和擴展8個類別。每個類別的屬性都包含在一個列表中。
②“列表”視圖按鈕：按字母順序顯示Dreamweaver支持的所有CSS屬性。
③“設置屬性”視圖按鈕：僅顯示那些已進行設置的屬性。
④“附加樣式表”按鈕：單擊該按鈕，可彈出“鏈接外部樣式表”對話框，用來選擇要鏈接或導入的外部樣式表文件，如圖5-17所示。
⑤“新建CSS規則”按鈕：單擊該按鈕，可彈出“新建CSS規則”對話框，用來創建新的CSS樣式，如圖5-18所示。
⑥“編輯樣式”按鈕：單擊該按鈕可彈出樣式表編輯對話框，對當前選中的CSS樣式進行編輯。
⑦“刪除CSS屬性”按鈕：刪除“CSS樣式”麵板中選定的樣式或屬性。刪除之後，所有應用該樣式的網頁元素的格式也會被刪除。
圖5-17“鏈接外部樣式表”對話框圖5-18“新建CSS規則”對話框小貼士：使用“CSS樣式”麵板中的“正在”模式可以跟蹤當前所選頁麵元素的CSS規則和屬性；使用“全部”模式也可以跟蹤文檔可用的所有規則和屬性。
74項目五簡單網頁特效製作（3）使用“CSS樣式”麵板創建CSS樣式。
①打開“CSS樣式”麵板，單擊麵板右下方的“新建CSS規則”按鈕，彈出“新建CSS規則”對話框。
②選擇要創建的CSS樣式的類型。“類”樣式：可創建作為類屬性應用於文本範圍或文本塊的自定義樣式。選擇該類型後，在名稱文本框中輸入樣式名稱，如圖5-17所示。
“標簽”樣式：可創建重新定義特定的HTML標簽的默認格式設置。選擇該類型後，在“標簽”文本框中輸入一個HTML標簽或從列表中選擇該標簽，如圖5-19所示。“高級”樣式：可創建為具體某個標簽組合或所有包含特定ID屬性的標簽定義格式的設置。選擇該類型後，默認的“選擇器”列表中包括a：link、a：visited、a：hover、a：active4個選項，如圖5-20所示。
圖5-19重新定義hr標簽默認樣式圖5-20定義“高級”選項小貼士：創建類樣式時，樣式名稱必須以英文句點開頭，並且可以包含任何字母和數字的組合。
如果沒有輸入開頭的句點，Dreamweaver將自動為名稱添加句點。
類樣式被創建後，隻有選定對象應用後才能生效；而標簽樣式和高級樣式被創建後，無需應用即可生效。
③選擇“定義在”選項（定義樣式的位置），然後單擊“確定”按鈕。若要創建嵌入到文檔的樣式時，選擇“僅對該文檔”。若要創建外部樣式表文件時，選擇“新建樣式表文件”。如果選擇該選項，在單擊“確定”之後會彈出“保存樣式表文件為”對話框，如圖5-21所示，選擇外部樣式表文件的保存位置和文件名，單擊“保存”按鈕。若要將創建的樣式放置到已存在的樣式表文件中時，打開列表選擇相應的樣式表文件即可。
④緊接著在彈出的“CSS規則定義”對話框中，從“分類”列表中選擇樣式選項，完成樣式屬性的設置後，單擊“確定”按鈕，如圖5-21所示。
75DreamweaverCS3圖5-21“保存樣式表文件為”對話框（4）定義CSS樣式的屬性。“CSS規則定義”對話框共包括類型、背景、區塊、方框、邊框、列表、定位和擴展8個選項。
①CSS樣式“類型”分類。“類型”分類是CSS規則定義對話框的默認分類，在此分類中，可以定義CSS樣式的基本字體和其他類型設置，如圖5-22所示。字體、顏色和大小：為樣式設置文本的字體、顏色和大小。樣式：指定字體樣式為正常、斜體或偏斜體，默認為正常。行高：設置文本所在行的高度，選擇“正常”時自動計算字體大小的行高，或者輸入一個確切的值進行界定。修飾：為文本添加字體效果，包括“下劃線”、“上劃線”、“刪除線”、“閃爍”、“無”幾項。文本的默認設置為“無”，鏈接文本默認設置是“下劃線”。
圖5-22“類型”分類屬性定義窗口②CSS樣式“背景”分類。在此分類中可定義CSS樣式的背景屬性，如圖5-23所示。背景顏色和背景圖像：給選定的對象添加背景顏色和背景圖像。重複：設置背景圖像的重複方式，包括“不重複”、“重複”、“橫向重複”、“縱向重複”4個選項。附件：設置圖像是固定在原始位置還是隨內容一起滾動。水平位置和垂直位置：設置圖像與選定對象水平和垂直的相對位置。
76項目五簡單網頁特效製作圖5-23“背景”分類屬性定義窗口③CSS樣式“區塊”分類。在此分類中可以定義CSS樣式的標簽及屬性的間距和對齊方式，如圖5-24所示。單詞間距和字母間距：設置單詞和字母的間距，選擇“值”後可輸入數值，並在右邊的列表框中選擇單位。垂直對齊：設置選中對象相對於上級對象或所在行垂直方向的對齊方式。文本對齊：設置首行文字在對象中的對齊方式。
④CSS樣式“方框”分類。在此分類中可以對控製元素在頁麵上放置方式的標簽和屬性進行設置，如圖5-25所示。寬和高：設置元素的寬度和高度。填充：指定元素內容與元素邊框之間的間距，取消選擇“全部相同”選項可設置元素各個邊的填充。邊界：指定一個元素的邊框與另一個元素之間的間距。
圖5-24“區塊”分類屬性定義窗口圖5-25“方框”分類屬性定義窗口⑤CSS樣式“邊框”分類。在此分類中可以進行元素周圍邊框的設置，如圖5-26所示。樣式：設置邊框的樣式外觀，樣式的顯示方式取決於瀏覽器，Dreamweaver在“文檔”窗口中將所有樣式呈現為實線。寬度：設置元素邊框的粗細。顏色：設置邊框的顏色。可分別設置每條邊的顏色，但顯示方式取決於瀏覽器。
⑥CSS樣式“列表”分類。在此分類中可為列表標簽定義列表設置，如項目符號的大小和類型等，如圖5-27所示。類型：設置列表的標記。項目符號圖像：為項目符號指定自定義圖像。位置：設置列表標記的縮進方式。
77DreamweaverCS3圖5-26“邊框”分類屬性定義窗口圖5-27“列表”分類屬性定義窗口⑦CSS樣式“定位”分類。此分類用來確定與選定的CSS樣式相關的內容在頁麵上的定位方式，如圖5-28所示。類型：設置對象的位置。顯示：設置對象的可見性，包括“繼承”、“可見”和“隱藏”。Z軸：設置對象的層疊順序，包括“自動”和“值”兩個選項，值越大，越靠上顯示。溢出：設置內容超出容器時的處理方式。定位：設置放置對象的容器大小和位置。剪輯：定義內容的可見區域。
⑧CSS樣式“擴展”分類。在此分類中可對光標、圖像等內容視覺效果進行定義。如圖5-29所示。分頁：設置打印時在樣式所控製的對象之前或之後強行分頁。光標：設置當指針位於樣式所控製的對象上時改變指針圖像。過濾器：對樣式所控製的對象應用特殊效果。
圖5-28“定位”分類屬性定義窗口圖5-29“擴展”分類屬性定義窗口4.應用CSS樣式（1）應用CSS樣式。在CSS樣式被定義後，可以將這些CSS樣式應用於網頁中的文本、圖像等對象，對於“標簽”和“高級”樣式，樣式定義後將直接被應用到頁麵中相應的標簽對象中，而“類”樣式則需要選擇對象並應用後才會生效。應用樣式的方法可以有多種。
①對於文本對象，可以選中文本後，在其“屬性”麵板的“樣式”下拉列表中選擇需要的樣式名稱。
②也可以選中要應用樣式的對象，在“CSS樣式”麵板中鼠標右鍵單擊樣式名稱，從彈出的快捷菜單中選擇“套用”命令。
③對於圖像、Flash動畫、表格等頁麵元素，可在選中這些對象後，在“屬性”麵板的“類”下拉列表中選擇需要的樣式名稱。
78項目五簡單網頁特效製作（2）編輯CSS樣式：選擇“窗口→CSS樣式”命令，打開“CSS樣式”麵板。在樣式麵板中編輯樣式的方法很多。
①雙擊要編輯的樣式名稱，彈出“CSS規則定義”對話框，然後進行更改即可。
②選擇要編輯的樣式的樣式名稱，然後在“CSS樣式”麵板的“屬性”窗格中編輯該規則的屬性，如圖5-30所示。
③選擇要編輯的樣式名稱，單擊“CSS樣式”麵板右下方的“編輯樣式”按鈕，彈出“CSS規則定義”對話框，然後進行更改，如圖5-31所示。
圖5-30在“屬性”窗格中修改樣式圖5-31在“CSS規則定義”對話框修改樣式（3）CSS樣式的基本操作。
①移除對類樣式的應用：選擇應用該樣式的文本或對象。在屬性麵板的“樣式”列表中或“類”列表中選擇“無”。
②刪除CSS樣式：在“CSS樣式”麵板中，選中要刪除的樣式，單擊“刪除樣式”按鈕或按Delete鍵即可將樣式刪除。
小貼士：樣式被編輯修改後，將會自動更新應用該樣式的對象。
樣式被刪除後，所有應用該樣式的文本或對象的格式效果也同時被刪除。文本或對象本身不受刪除影響。
③重命名CSS樣式：在“CSS樣式”麵板中，用鼠標右鍵單擊要重命名的CSS類樣式，在彈出的快捷菜單中選擇“重命名類”命令，彈出“重命名類”對話框，如圖5-32所示。在該對話框中，在“重命名類”列表中選擇要重命名的類樣式，在“新建名稱”文本框中輸入新的名稱，然後單擊“確定”按鈕。
圖5-32“重命名類”對話框79DreamweaverCS3④鏈接外部CSS樣式表文件：在“CSS樣式”麵板中，單擊麵板右下方的“附加樣式表”按鈕，彈出“鏈接外部樣式表”對話框，如圖5-33所示。在“鏈接外部樣式表”對話框中，單擊“瀏覽”按鈕選擇外部CSS樣式表或直接在“文件\/URL”文本框中輸入該樣式表文件的路徑，單擊“確定”按鈕，樣式表文件中的樣式將添加到“CSS樣式”麵板中，如圖5-34所示。
圖5-33“鏈接外部樣式表”對話框圖5-34鏈接外部樣式表文件任務二zy的動漫世界——行為在網頁中的效果應用★任務目的1.掌握行為的創建、編輯和應用。
2.學會使用行為創建動感網頁的有效方法。
80項目五簡單網頁特效製作★實施步驟當瀏覽者打開index.html頁麵時，彈出一個帶“確定”按鈕的消息提示框：“為了達到最佳效果，建議將顯示器分辨率設為1024*768！”，應如何做？下麵動手試一試。
（1）啟動DreamweaverCS3，選擇站點“zy的動漫世界”，打開index.html，如圖5-35所示。
圖5-35index.html網頁文件（2）選擇“窗口→行為”命令或按Shift+F4組合鍵，打開“行為”麵板，如圖5-36所示。選中網頁中的圖像“hzw.jpg”，單擊“行為”麵板上的“添加行為”按鈕，在彈出的菜單中選擇“彈出信息”命令，彈出“彈出信息”對話框，輸入文本“為了達到最佳效果，建議將顯示器分辨率設為1024*768！”，單擊“確定”按鈕，如圖5-37所示。
圖5-36“行為”麵板圖5-37“彈出信息”對話框（3）在左邊“事件”欄中單擊，然後在列表中選擇“onload”，如圖5-38所示。按Ctrl+S組合鍵保存文件，按F12鍵預覽網頁效果，當打開index.html網頁時，彈出如圖5-39所示的消息提示框。
圖5-38彈出信息事件列表圖5-39彈出信息框★擴展練習1.當瀏覽者打開index.html網頁時，會自動播放一首背景音“我和你.mp3”，你應如何操作？下麵動手試一試。
81DreamweaverCS3（1）單擊標簽選擇器上的標簽，選中整個網頁，單擊“行為”麵板上的“添加行為”按鈕，在彈出的菜單中選擇“建議不再使用→播放聲音”命令，彈出“播放聲音”對話框，如圖5-40所示。然後單擊“瀏覽”按鈕選擇“我和你.mp3”，單擊“確定”按鈕。在行為麵板“事件”列表中選擇“onLoad”，如圖5-41所示。
（2）預覽網頁index.html時，將自動播放我和你.mp3音樂文件。
圖5-40“播放聲音”對話框圖5-41播放聲音行為麵板2.當瀏覽者鼠標指向“hyrz11.jpg”圖像的時候會將自動變換成“hyrz22.jpg”圖像，當鼠標離開的時候又會恢複顯示“hyrz11.jpg”圖像，你應如何操作？下麵動手試一試。
（1）選中圖像“hyrz11.jpg”，單擊“行為”麵板上的“添加行為”按鈕，在彈出的菜單中選擇“變換圖像”命令，在彈出的“變換圖像”對話框中將“hyrz22”設置為交換圖像，選擇“鼠標滑開時恢複圖像”複選框，如圖5-42所示。單擊“確定”按鈕，係統將自動生成“交換圖像”和“恢複交換圖像”兩個行為，默認的事件分別為“onMouseOver”和“onMouseOut”，如圖5-43所示。
（2）按F12鍵保存並預覽網頁，當鼠標指向圖像“hyrz11.jpg”的時候自動變換成“hyrz22.jpg”圖像，當鼠標離開的時候又會恢複顯示“hyrz11.jpg”圖像。
圖5-42“交換圖像”對話框圖5-43交換圖像“行為”麵板3.當瀏覽者在打開index.html頁麵的時候，同時打開瀏覽器窗口顯示廣告宣傳頁麵qiangtuizx.html，你應如何操作？下麵動手試一試。
（1）單擊標簽選擇器上的標簽，選中整個網頁，單擊“行為”麵板上的“添加行為”按鈕，在彈出菜單中選擇“打開瀏覽器窗口”命令，彈出“打開瀏覽器窗口”對話框，如圖5-44所示。通過單擊“瀏覽”按鈕選擇網頁“qiangtuizx.html”，設置窗口的寬度和高度分別為590像素和400像素，單擊“確定”按鈕。在行為麵板的“事件”列表中選擇“onLoad”。
（2）按F12鍵保存並預覽網頁，在瀏覽器打開index.html網頁的同時，打開了qiangtuizx.html頁麵，如圖5-45所示。
82項目五簡單網頁特效製作圖5-44“打開瀏覽器窗口”圖5-45打開瀏覽器窗口同時打開了qiangtuizx.html4.當瀏覽者將鼠標指向“火影忍者”文本時，在窗口中顯示火影忍者的經典動畫圖像，當瀏覽者將鼠標指向“喜洋洋與灰太狼”文本時，在窗口中顯示喜洋洋與灰太狼的經典動畫圖像，以此類推，該頁麵效果如何做？下麵動手試一試。
（1）打開index.html，如圖5-46所示。將光標移到到窗口中間最大的那個空白單元格中，選擇“插入記錄→布局對象→APDiv”命令，插入一個默認大小的APDiv，如圖5-47所示。單擊其邊框，選中該APDiv，在“屬性”麵板的“CSS-P元素”文本框中輸入名稱apDiv1。
（2）用同樣的方法，在同一個單元格內再插入7個APDiv，分別命名為apDiv2、apDiv3、apDiv4、apDiv5、apDiv6、apDiv7。選擇“窗口→AP元素”命令，或按F12鍵打開“AP元素”麵板，可以看到剛插入的7個AP元素，如圖5-48所示。
圖5-46index.html網頁圖5-47插入APDiv圖5-48“AP元素”麵板圖5-49在apDiv中插入圖像（3）在“AP元素”麵板中選中apDiv1，將光標定位到apDiv1中，選擇“插入記錄→圖像”命令插入圖像jiasushijie1.jpg。用同樣的方法，分別在apDiv2、apDiv3、apDiv4、83DreamweaverCS3apDiv5、apDiv6、apDiv7中分別插入文件夾中的daojianshenyu.jpg、kenan.jpg、qibosn.jpg、hzw.jpg、xyy.jpg、hyrz.jpg，效果如圖5-49所示。
（4）選中文本“加速世界”，單擊“行為”麵板上的“添加行為”按鈕，在彈出的菜單中選擇“顯示—隱藏元素”命令，彈出“顯示—隱藏元素”對話框，如圖5-50所示。設置apDiv1為“顯示”，設置其他AP元素全部為“隱藏”，單擊“確定”按鈕。在“行為”麵板的事件欄中選擇事件“onMouseOver”，如圖5-51所示。
圖5-50“顯示—隱藏元素”對話框圖5-51顯示—隱藏元素行為麵板（5）以此類推，用同樣的方法，為文本“刀劍神域”、“名偵探柯南”、“棋搏少年”、“海賊王”、“喜洋洋與灰太狼”、“火影忍者”設置“顯示—隱藏元素”行為。在設置行為時，將文本對應的apDiv設置為“顯示”，其他AP元素全部設置為“隱藏”，事件均設置為“onMouseOver”。
（6）按Ctrl+S組合鍵保存，按F12並預覽網頁，當將鼠標指向文本時會在網頁中間的單元格中顯示對應的動畫劇照，如圖5-52所示。
圖5-52顯示—隱藏元素最終頁麵效果84項目五簡單網頁特效製作★知識鏈接1.行為行為是DreamweaverCS3內的一個JavaScript程序段。每個行為包括一個動作和一個事件，其中，事件是指引發動作產生的條件，即觸發動態效果的原因，例如，鼠標單擊某對象、移到某對象上等。動作是指事件出現後係統隨而按程序執行的一個動作，即形成的動態效果，例如，打開瀏覽器窗口、交換圖像、播放聲音、彈出信息等。
2.添加行為在DreamweaverCS3中，利用其提供的“行為”麵板來完成行為中的動作和事件設置。
（1）了解“行為”麵板：選擇“窗口→行為”命令或按Shift+F4組合鍵，可以打開“行為”麵板，如圖5-53所示。
圖5-53“行為”麵板“顯示設置事件”按鈕：僅顯示設置到當前文檔的那些事件。該視圖是默認視圖，如圖5-54所示。“顯示所有事件”按鈕：按字母順序顯示屬於特定類別的所有事件，也包括網頁中已設置的事件。如圖5-55所示。“添加行為”按鈕：單擊該按鈕，彈出動作菜單，其中包括可附加到當前所選對象上的所有行為，當從該菜單中選擇一個動作時，將彈出一個對話框，可從中設置動作的相關參數。“刪除事件”按鈕：單擊該按鈕，可從行為列表中刪除所選事件及動作。“增加\/降低事件值”按鈕：可將特定事件所選的動作在行為列表中向上或向下移動，改變動作發生的先後次序。
圖5-54顯示設置事件圖5-55顯示所有事件（2）添加行為：要創建一個行為，首先要確定添加行為的對象，它可以是圖像、文本、多媒體文件或者網頁本身等，然後指定一個動作，最後再確定觸發該動作的事件。
85DreamweaverCS3①在頁麵上選擇設置行為的元素，如一段文本或一個圖像。若要將行為添加到整個頁麵上時，可以在標簽選擇器中單擊標簽選中整個網頁。
②選擇“窗口→行為”命令打開“行為”麵板，單擊“行為”麵板上的“添加行為”按鈕，彈出動作菜單，如圖5-56所示。從動作菜單中選擇一個動作，彈出相應的參數設置對話框，進行參數設置後，單擊“確定”按鈕。
③在“事件”列表中將顯示默認的事件值，單擊該事件名稱旁邊的按鈕，會彈出一個下拉菜單，如圖5-57所示。在菜單中列出了可以觸發該動作的所有事件，我們可以從中選擇一個適合的事件即可。
圖5-56動作菜單圖5-57“事件”列表（3）更改或刪除行為：在網頁對象附加了行為之後，可以更改觸發動作的事件、添加或刪除動作及更改動作的參數。首先打開該網頁，並選擇附件有行為的對象。然後按Shift+F4打開“行為”麵板。在行為麵板中可以通過以下操作，實現對行為和事件的編輯。如果需要更改事件的參數，單擊事件名稱，然後單擊旁邊的按鈕，從打開的菜單中重新選取合適的參數。如果需要編輯動作的參數，雙擊動作的名稱或選中該動作後按Enter鍵，在彈出的對話框中更新更改後，單擊“確定”按鈕即可。如果需要更改給定事件的多個動作發生的順序，可以選擇某個動作後單擊或，增加或降低事件值；或者選擇該動作後，將其剪切並粘貼到其他動作之間的合適位置。如果需要刪除某個行為，可以將其選中後單擊“刪除事件”按鈕或按Delete鍵。
（4）常見的動作：所謂動作就是像打開瀏覽器窗口、播放聲音、彈出消息框等此類特殊的JavaScript效果，在設定的事件出現後執行該動作達成頁麵效果。下麵介紹幾個常用的動作。
①交換圖像：通過更改“img”標簽的“src”屬性將一個圖像和另一個圖像進行交換。
②恢複交換圖像：將最後一組交換的圖像恢複為以前的源文件。
③效果：為選中的對象添加增大\/收縮、擠壓、顯示\/隱藏、晃動、滑動、遮簾等效果。
④彈出信息：可顯示一個帶有用戶指定信息的JavaScript警告框和一個“確定”按鈕，86項目五簡單網頁特效製作使用此動作隻能提供信息，而不能為用戶提供選擇。
⑤打開瀏覽器窗口：可在一個新的窗口中打開URL，可指定新窗口的大小、特性和名稱。
⑥播放聲音：可在網頁中播放聲音，例如，當鼠標滑過某圖像時可以播放一段音樂；或者當頁麵載入時播放音樂。
⑦改變屬性：可通過改變圖像、APDiv、表單等的某個屬性來實現動態效果，例如，層的背景顏色或圖像的寬或高。具體可更改哪個屬性由當前選用的瀏覽器來決定。
⑧設置文本：可用於設置框架文本、狀態欄文本和表單元素中的文本域文本。
⑨預先載入圖像：用於將不立即顯示在網頁中的圖像預先載入瀏覽器緩存中，防止當圖像顯示時由於下載而導致延遲。
⑩檢查表單：可以為表單中各元素設置有效性規則，並檢查指定文本域的內容以確保用戶輸入正確的數據類型，防止表單提交到服務器後，文本域中包含無效的數據。
11顯示—隱藏元素：顯示、隱藏或恢複一個或多個AP元素的默認可見性。
12調用JavaScript：發生事件時，調用特定的JavaScript函數。
（5）常見的事件：事件用於指定設置的行為在什麼情況下發生。例如，單擊某網頁、指向某對象等。
①onLoad：加載對象時觸發。
②onClick：鼠標單擊時觸發。
③onDblClick：鼠標雙擊時觸發。
④onMouseDown：按下鼠標左鍵時觸發。
⑤onMouseUp：鼠標左鍵按下後釋放時觸發。
⑥onMouseOver：鼠標指針移到某對象上時觸發。
⑦onMouseMove：鼠標移動時觸發。
⑧onMouseOut：鼠標離開某對象時觸發。
⑨onKeyPress：當釋放鍵盤上某個按下的鍵時觸發。
⑩onKeyDown：當按下鍵盤上某個鍵時觸發。
11onKeyUp：當鬆開鍵盤上某個鍵時觸發。
任務三zy的動漫世界——時間軸動態效果的應用★任務目的1.學習了解時間軸形成動畫的基本原理。
2.學會使用時間軸製作自動間隔變換圖像和曲線運動對象的方法。
87DreamweaverCS3★實施步驟當瀏覽者打開tuxiangbh.html頁麵時，頁麵中的“hyrz1.jpg”圖像會在間隔2秒鍾後自動變換為“hyrz2.jpg”圖像，再間隔2秒鍾後又變為前者圖像，應如何做？下麵一起動手試一試。
（1）打開tuxiangbh.html網頁，在頁麵空白處單擊，選擇“插入記錄→圖像”命令，在彈出的對話框中選擇“hyrz1.jpg”圖像文件，單擊“確定”按鈕。
（2）選擇“窗口→時間軸”命令或按Alt+F9組合鍵打開“時間軸”麵板，如圖5-58所示。然後在網頁編輯窗口中將剛才插入的“hyrz1.jpg”圖像用鼠標將其拖動到“時間軸”麵板上形成一條動畫條，默認的幀數為15幀，如圖5-59所示。先行勾選“自動播放”和“循環”複選框，讓網頁可以在瀏覽器中自動和循環播放該動畫。
圖5-58“時間軸”麵板圖5-59拖動圖像到時間軸上形成一個默認15幀的動畫條（3）選中動畫條的終止關鍵幀（第15幀），用鼠標將其拖動到60幀處，如圖5-60所示。按住Ctrl鍵用鼠標在第30幀處單擊，增加一個關鍵幀，如圖5-61所示。
圖5-60調整動畫條長度的幀數圖5-61增加關鍵幀（4）選中動畫條上的第2個關鍵幀（第30幀），然後單擊圖像“屬性”麵板上的“源文88項目五簡單網頁特效製作件”後麵的“瀏覽文件”按鈕，在彈出的對話框中選擇“hyrz2.jpg”，單擊“確定”按鈕，將圖像更改為“hyrz2.jpg”，如圖5-62所示。
圖5-62將30幀處關鍵幀屬性設為圖像“hyrz2.jpg”（5）按F12鍵保存並預覽網頁，我們看到圖像間隔2秒鍾自動循環顯示。
★擴展練習當瀏覽者打開feibiaoqx.html頁麵時，頁麵中的飛鏢會自動以曲線路徑從左向右飛去，這樣的頁麵效果應如何做？下麵一起動手試一試。
（1）打開feibiaoqx.html網頁，單擊插入欄“布局”類別中的“繪製APDiv”按鈕，將鼠標指針移到文檔窗口中，拖動鼠標在窗口的左邊繪製一個APDiv。將光標定位到APDiv內，選擇“插入記錄→圖像”命令，在彈出的對話框中選擇“feibiao.jpg”，單擊“確定”按鈕，將該圖像插入到APDiv中，如圖5-63所示。
圖5-63在APDiv中插入圖像（2）單擊APDiv的邊框選中APDiv，將APDiv拖動到“時間軸”麵板，形成一條動畫條，選擇“自動播放”和“循環”兩個複選框。選擇“修改→時間軸→記錄AP元素的路徑”命令，按照設計的曲線路徑拖動APDiv。隨著鼠標的移動係統自動生成一條曲線路徑，同時，“時間軸”麵板自動生成相應的動畫條和關鍵幀，如圖5-64所示。按F12鍵保存並預覽網頁，飛鏢將按照生成的曲線路徑移動。
89DreamweaverCS3圖5-64拖動APDiv產生的曲線路徑以及在時間軸上自動生成的關鍵幀★知識鏈接動感HTML是指HTML與腳本語言結合，通過腳本語言更改HTML元素的初始樣式或定位屬性，以達成的一種網頁效果。在本節中，我們通過時間軸使用動態HTML來更改AP元素和圖像在一段時間內的屬性，從而製作出各種動感效果，如交替顯示的圖像、飛來飛去的飛鏢圖像等。
1.利用時間軸製作動態效果（1）了解“時間軸”麵板：選擇“窗口→時間軸”命令或按Alt+F9組合鍵，即可打開“時間軸”麵板，如圖5-65所示。
當前幀號碼速率“時間軸”下拉列表歸位後退播放行為通道播放頭圖層號動畫條關鍵幀行為幀時間標尺圖5-65“時間軸”麵板①時間軸：列出了當前頁麵中所有時間軸動畫的名字。
②歸位：將播放頭移至時間軸中的第一幀。
③後退：將播放頭向左移動一幀。
④當前幀號碼：用來顯示和輸入播放頭所處的位置，即當前所處的幀數。
⑤播放：將播放頭向右移動一幀。按下“播放”按鈕不可向前播放動畫。
⑥自動播放：使時間軸在當前頁從瀏覽器中加載時自動開始播放。
⑦循環：使動畫進行循環播放。
90項目五簡單網頁特效製作⑧速率：用來輸入動畫每秒鍾播放的幀數。
⑨動畫條：表示一個動畫所占的幀數，上麵標有該動畫所在APDiv的名字。
⑩關鍵幀：定義動畫條中已經為對象指定屬性的幀，決定了動畫的走向。
11行為幀：加入了行為的幀，它在“行為通道”內。
12動畫通道：由許多APDiv組成，表示可在一個頁麵中加入多個時間軸動畫，最多可加入32個。
（2）使用時間軸製作直線動畫：最常見的時間軸動畫是沿著一條路徑移動AP元素。
時間軸隻可以移動AP元素，若要使圖像或文本移動，隻有將圖像或文本插入到AP元素中才可行。操作步驟如下。
①在頁麵中插入一個APDiv，然後在APDiv中插入一個圖像、動畫或文本等。在APDiv中插入了一個飛鏢的圖像，如圖5-66所示。
②將插有圖像或文本的APDiv拖動到編輯窗口的起始位置，然後選擇“窗口→時間軸”命令，打開“時間軸”麵板，圖5-66在APDiv中插入飛鏢圖選擇“修改→時間軸→增加對象到時間軸”命令或直接將APDiv拖動到“時間軸”麵板的動畫通道內，此時動畫通道內會出現一個動畫條，AP元素的名稱將出現在該動畫條中，如圖5-67所示。
圖5-67“時間軸”麵板上的默認長度動畫條③係統將默認生成15幀長度的動畫條，單擊位於動畫條末端的關鍵幀，即選中動畫條的終止關鍵幀，用鼠標拖動改變終止關鍵幀的位置，可以達成調整動畫條播放長度的目的，如圖5-68所示。
圖5-68APDiv的移動路徑91DreamweaverCS3④選中終止關鍵幀，在頁麵編輯窗口中將APDiv從起始位置拖動到動畫結束位置，釋放鼠標會看到一條直線，表示APDiv移動的路徑。
⑤在“時間軸”麵板中單擊“歸位”按鈕，使播放頭回到動畫起始位置，然後按住“播放”按鈕不放，預覽動畫效果。
（3）使用時間軸製作曲線動畫：“時間軸”麵板可以在用戶給出起始幀和終止幀後自動生成中間過程中的各幀。如果動畫移動路徑不是直線的，中間有轉折點，那麼每個轉折點處的畫麵都是一個關鍵幀。加入關鍵幀，可以使沿直線路徑移動的動畫變為曲線移動的動畫。製作曲線動畫的方法如下。
①在直線動畫上添加關鍵幀製作曲線動畫：先製作一個直線動畫，選中動畫條內要插入關鍵幀的位置，選擇“修改→時間軸→增加關鍵幀”命令，或右鍵單擊，在彈出的快捷菜單中選擇“增加關鍵幀”命令，或按住Ctrl單擊來添加關鍵幀。依次選中關鍵幀，然後拖動APDiv到新的目標位置，生成曲線動畫路徑。在“時間軸”麵板中單擊“歸位”按鈕，使播放頭回到動畫的起始位置，然後按住“播放”按鈕不放，預覽動畫。可以添加關鍵幀。
小貼士：如果要刪除關鍵幀，可以選中要刪除的關鍵幀，單擊鼠標右鍵，在彈出的快捷菜單中選擇“移除關鍵幀”命令。
②通過拖動AP元素形成路徑來製作曲線動畫：在頁麵中插入一個APDiv，然後在APDiv中插入一個圖像、動畫或文本等，再將該APDiv在頁麵編輯窗口中拖動到動畫的起始位置。選中該APDiv，選擇“修改→時間軸→記錄AP元素的路徑”命令，或在時間軸上右鍵單擊鼠標，在彈出的快捷菜單中選擇“記錄AP元素的路徑”。在網頁編輯窗口中，按照設計的曲線路徑拖動APDiv。隨著鼠標的移動，係統會自動生成一條曲線路徑，同時在“時間軸”麵板上會自動生成相應的關鍵幀。在“時間軸”麵板中單擊“歸位”按鈕，使播放頭回到動畫的起始位置，然後按住“播放”按鈕不放，預覽動畫。
（4）利用時間軸更改AP元素的屬性，製作徐徐展開的圖像：在頁麵中插入一個APDiv，然後在APDiv中插入一個圖像，例如，插入一幅“火影忍者合影照”圖像。選中該APDiv，調整APDiv的大小和圖像一致，然後在APDiv屬性麵板中設置APDiv的“溢出”屬性為“hidden”。將APDiv拖動到“時間軸”麵板的動畫通道中，選中動畫條末端的終止關鍵幀，用鼠標拖動延長動畫的幀數。選中動畫的起始幀，在屬性麵板上設置APDiv的“寬”為比較小的值，例如設為5像素。在“時間軸”麵板中單擊“歸位”按鈕，使播放頭回到動畫的起始位置，然後按住“播放”按鈕不放，預覽動畫，效果如圖5-69所示。
92項目五簡單網頁特效製作圖5-69徐徐展開的火影忍者合影照（5）動畫的其他基本操作。
①動畫的刪除。刪除動畫條：在“時間軸”麵板中選中要刪除的動畫條，按Delete鍵或選擇“編輯→剪切”命令。刪除所有動畫條：在“時間軸”麵板中單擊鼠標右鍵，在彈出的快捷菜單中選擇“移除時間軸”命令，如圖5-70所示。
②動畫的重命名。在“時間軸”麵板中單擊鼠標右鍵，在彈出的快捷菜單中選擇“重命名時間軸”命令，彈出“重命名時間軸”對話框，在時間軸名稱文本框中輸入新的名字，單擊“確定”按鈕。
③調整動畫播放速度。動畫的默認播放速率是每秒15幀，要調整其速率，可以直接在“時間軸”麵板的“Fps”文本框中輸入新的值，如圖5-71所示。值越大，播放速度越快。圖5-70動畫條的右鍵快捷菜單圖5-71將播放速率調整為了每秒25幀★項目總結為了提高網頁元素的美化效率，本項目引領大家學習了一種工具：CSS樣式文件的使用；更在上一項目的基礎上，利用行為和時間軸技巧繼續延伸學習了網頁的簡單特效製作方法。
93DreamweaverCS3★項目評價項目評價見表5-1。
表5-1項目評價評價標準自我評價教師評價評價項目評價內容很好一般再學習已達標再努力了解CSS的基本概念和分類了解網頁中常見行為基本知識和事件技
能了解時間軸實現的原知理識能夠掌握內部和外部掌CSS樣式的創建方法握能夠掌握常見行為的基本技能簡單特效創建能夠掌握時間軸簡單特效的製作過程合能積極發表意見和傾交流討論作聽他人發言交能認真聽課，富有建幫助他人流設性★思考與上機實訓1.在D：\\project5文件夾中創建樣式表文件web.css，在樣式表文件中定義以下3種樣式：（1）樣式名稱ys1，內容：大小14pt，行距20像素。
（2）樣式名稱body，內容：上下左右邊距為0像素。
（3）樣式名稱a：link，內容：大小為9pt，顏色為“#cc3300”，修飾為“無”。