高級網(wǎng)頁制作.ppt

1、第5章 高級網(wǎng)頁制作,學(xué)會制作基本的網(wǎng)頁后，就要學(xué)習(xí)在網(wǎng)頁中加入一些特殊的效果，例如圖像運動、隱藏、增加一些動態(tài)文字效果等，這些都需要使用行為或編寫腳本代碼完成。使用模板和資源可以快速制作風(fēng)格統(tǒng)一的網(wǎng)站。網(wǎng)站制作完成后，需要在服務(wù)器發(fā)布。本章將介紹這幾種高級網(wǎng)頁制作的知識。,第5章 高級網(wǎng)頁制作,5.1 行為 5.2 使用JavaScript代碼 5.3 網(wǎng)頁模板和資源面板 5.4 管理站點,5.1 行為,行為是 Dreamweaver 8的又一個非常好的功能，它使用戶不用親自手動編寫HTML代碼就可以制作出功能齊全的頁面。例如，可以直接調(diào)用JavaScript、改變屬性、檢查插件、檢查瀏覽器

2、、拖動圖層、播放聲音等，還可以控制瀏覽器的顯示、控制Shockwave、Flash以及時間軸等。一個行為通常由一個事件和一個動作組成。,5.1 行為,5.1.1 使用行為 1事件和動作 2行為和JavaScript腳本程序,5.1 行為,3使用行為的實例 【實例5.1】使用行為實現(xiàn)光標(biāo)移動到圖片上面時改變狀態(tài)欄文字。,5.1 行為,4使用行為面板 設(shè)置了事件和動作后，在行為面板中會列出這些行為效果，如圖所示。,行為面板,修改行為設(shè)置,5.1 行為,5.1.2 事件 事件就是在瀏覽器工作過程中的某種狀態(tài)的變化。如網(wǎng)頁瀏覽者在瀏覽某一個頁面的時候，單擊某一個元素，瀏覽器就會引發(fā)一個onClick事

3、件，這個事件可以用來調(diào)用為特定功能編寫的JavaScript函數(shù)，使得網(wǎng)頁具有交互性。事件也可以不用響應(yīng)用戶就可以產(chǎn)生，例如將網(wǎng)頁設(shè)置為每隔10秒自動重載一次，就會自動引發(fā)相應(yīng)事件。,5.1 行為,5.1.3 附加動作 通過行為面板可以將動作附加給各種與網(wǎng)頁元素相關(guān)的事件，也可以附加給整個網(wǎng)頁。附加動作前首先要選中要產(chǎn)生行為的元素，如果要附加給整個網(wǎng)頁，則單擊編輯窗口下方標(biāo)簽欄的標(biāo)簽。選中元素后，標(biāo)簽面板組的標(biāo)題后面會出現(xiàn)選中的標(biāo)簽，例如、等。,5.1 行為,1檢查瀏覽器 使用“檢查瀏覽器”行為，可以根據(jù)瀏覽者所使用的瀏覽器品牌和版本發(fā)送不同的頁面。 “檢查瀏覽器”對話框如圖所示。,5.1 行

4、為,2檢查插件 “檢查插件”行為用于檢查在瀏覽器中是否安裝了指定的插件（如Flash播放器、視頻播放器等），從而將瀏覽者連接到不同的頁面。,5.1 行為,3轉(zhuǎn)到URL “轉(zhuǎn)到URL”行為用于在當(dāng)前窗口或指定的框架中，打開一個新的頁面。 “轉(zhuǎn)到URL”對話框如圖所示。,5.1 行為,4. 跳轉(zhuǎn)菜單 雙擊行為面板中現(xiàn)有跳轉(zhuǎn)菜單的行為，或者在添加行為菜單中選擇“跳轉(zhuǎn)菜單”即可編輯跳轉(zhuǎn)菜單，改變當(dāng)前文件的路徑或增加、改變菜單中的命令。 “跳轉(zhuǎn)菜單開始”行為用按鈕與跳轉(zhuǎn)菜單相連，單擊按鈕打開在跳轉(zhuǎn)菜單中選擇的連接。,5.1 行為,5打開瀏覽器窗口 使用“打開瀏覽器窗口”行為可以在新窗口中打開一個URL，

5、并可以指定新窗口的屬性。 【實例5.2】在網(wǎng)頁調(diào)入的同時打開一個POP窗口。,5.1 行為,6彈出信息 “彈出信息”行為用于彈出一個顯示指定消息的警告對話框。 “彈出信息”對話框如圖所示。,5.1 行為,【實例5.3】制作一個顯示當(dāng)前URL的對話框。,5.1 行為,7設(shè)置文本 （1）設(shè)置狀態(tài)欄文本 “設(shè)置狀態(tài)欄文本”行為能在瀏覽窗口下方的狀態(tài)欄中顯示指定的信息。 （2）設(shè)置層文本 “設(shè)置層文本”行為可以用指定的內(nèi)容來替換某一個頁面上存在的層的內(nèi)容和格式，但是并不改變原來層的包括顏色在內(nèi)的屬性。,5.1 行為,7設(shè)置文本 【實例5.4】一個顯示會員簡介的網(wǎng)頁。,5.1 行為,8預(yù)先載入圖像 “預(yù)

6、先載入圖像”對話框如圖所示。,5.1 行為,9設(shè)置導(dǎo)航欄圖像 “設(shè)置導(dǎo)航欄圖像”行為使圖像成為導(dǎo)航條圖像或改變在導(dǎo)航條中的圖像顯示。 “設(shè)置導(dǎo)航欄圖像”對話框如圖所示。,5.1 行為,10交換圖像 “交換圖像”行為用于改變IMG標(biāo)簽的SRC屬性，即用另一幅圖像替代當(dāng)前的圖像。 “交換圖像”對話框如圖所示。,5.1 行為,11改變屬性 使用“改變屬性”行為可以改變某個對象屬性的值。 【實例5.5】光標(biāo)移過圖像時改變其大小。,5.1 行為,12顯示-隱藏層 “顯示-隱藏層”行為可以顯示、隱藏或者恢復(fù)一個或多個層默認(rèn)的可見性。 【實例5.6】鼠標(biāo)移動到會員圖像上時顯示會員介紹。,5.1 行為,13拖

7、動層 【實例5.7】制作拖動圖像進(jìn)行類似拼圖的效果，將會員圖片拖動到指定位置。,5.1 行為,14調(diào)用JavaScript “調(diào)用JavaScript”行為用于事件發(fā)生時，執(zhí)行在“行為”面板中指定的自定義函數(shù)或JavaScript語言腳本。 “調(diào)用 JavaScript”對話框如圖所示。,5.1 行為,15控制Shockwave或Flash “控制Shockwave或flash”行為可控制Shockwave或flash的播放。 “控制Shockwave或flash”對話框如圖所示。,5.1 行為,16播放聲音 使用“播放聲音”行為可以播放聲音。例如，當(dāng)光標(biāo)移過了一個鏈接時可能希望有一種聲音效果

8、，或者當(dāng)一個頁面載入的時候希望有一段音樂剪輯。 “播放聲音”對話框如圖所示。,5.1 行為,17檢查表單 “檢查表單”行為可檢查表單指定文本區(qū)的內(nèi)容，以確保用戶輸入的數(shù)據(jù)類型正確。 “檢查表單”對話框如圖所示。,5.1 行為,5.1.4 下載并安裝第三方行為 若要從Macromedia Exchange Web站點下載并安裝新行為，可執(zhí)行以下操作。 （1）打開“行為”面板并從“添加行為”彈出菜單中選擇“獲取更多行為”。 （2）系統(tǒng)打開瀏覽器窗口，并連接到Exchange站點（此時計算機必須可以連接到因特網(wǎng)）。 （3）瀏覽或搜索擴展包。 （4）下載并安裝所需的擴展包。,5.2 使用JavaScr

9、ipt代碼,使用行為面板可以實現(xiàn)的功能是有限的，高級網(wǎng)頁制作者往往需要直接操作代碼實現(xiàn)更復(fù)雜的網(wǎng)頁效果。Dreamweaver 8的代碼片斷面板提供了許多常用的代碼，這里將給出了一些網(wǎng)頁中常用的代碼。,5.2 使用JavaScript代碼,5.2.1 使用代碼片斷 1使用“代碼片斷”面板 使用菜單“窗口”“代碼片斷”，可打開“代碼片斷”面板，如圖所示。,5.2 使用JavaScript代碼,2幾個使用代碼片段的實例 【實例5.8】插入關(guān)閉窗口按鈕。,5.2 使用JavaScript代碼,【實例5.9】插入頁眉和導(dǎo)航效果。,5.2 使用JavaScript代碼,5.2.2 一些常用效果的腳本代碼

10、 【實例5.12】顯示用戶輸入的文字的長度。,5.2 使用JavaScript代碼,【實例5.13】一個走馬燈效果?？梢允勾翱跇?biāo)題、狀態(tài)欄和窗口中的文字產(chǎn)生逐漸出現(xiàn)的變化效果，如圖所示。,5.2 使用JavaScript代碼,【實例5.14】在窗口中顯示時鐘。腳本中函數(shù)showTime()從date對象取出時間后顯示在表單的單行文本框中，如圖所示。,5.2 使用JavaScript代碼,【實例5.20】使用動態(tài)CSS濾鏡，當(dāng)單擊文字時，文字會發(fā)光。再次單擊，發(fā)光消失，如圖所示。,5.3 網(wǎng)頁模板和資源面板,用模板和資源面板可以創(chuàng)建具有統(tǒng)一結(jié)構(gòu)和外觀的網(wǎng)站，在需要更改網(wǎng)站的整個外觀時，只要將相應(yīng)

11、的模板文件和資源項目稍做修改，即可應(yīng)用模板和資源對整個網(wǎng)站進(jìn)行快速更新，節(jié)省編輯時間。,5.3 網(wǎng)頁模板和資源面板,5.3.1 生成模板 1保存模板文件 【實例5.21】將一個已存在的文件另存為模板。,5.3 網(wǎng)頁模板和資源面板,2使用資源面板 【實例5.22】生成一新的空白模板。,5.3 網(wǎng)頁模板和資源面板,5.3.2 設(shè)置模板的屬性 1設(shè)置模板的頁面屬性 2定義模板的可編輯區(qū) 3定義重復(fù)區(qū)域 4定義可選區(qū)域 5定義嵌套模板,5.3 網(wǎng)頁模板和資源面板,5.3.3 應(yīng)用模板 1基于模板創(chuàng)建文件 2在已有的文件中應(yīng)用模板 3將文件從模板中分離 4修改模板并更新站點,5.3 網(wǎng)頁模板和資源面板,5.3.4 使用資源面板 1使用資源面板添加網(wǎng)頁元素 使用菜單“窗口”“資源”可打開資源面板，如圖所示。 2. 管理資源,5.3 網(wǎng)頁模板和資源面板,5.3.5 使用庫 使用庫可處理在多個頁面中使用并且需要經(jīng)常更新的內(nèi)容。 1生成庫項目 2應(yīng)用庫項目 3編輯庫項目 4修改使用庫項目的頁面,5.4 管理站點,Dreamweaver 8提供了完善的站點管理的功能，可以方便地完成站點上傳、在線管理等網(wǎng)絡(luò)傳輸功能，使用文件管理