高級(jí)網(wǎng)頁(yè)制作.ppt

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

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

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

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

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

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

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

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

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

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

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