《網(wǎng)頁設(shè)計(jì)與制作》第五章：高級(jí)網(wǎng)頁制作

1、1第第5章章 高級(jí)網(wǎng)頁制作高級(jí)網(wǎng)頁制作網(wǎng)頁設(shè)計(jì)與制作網(wǎng)頁設(shè)計(jì)與制作 南海學(xué)院計(jì)算機(jī)系制作2 第5章 高級(jí)網(wǎng)頁制作v行為事件和動(dòng)作行為和JavaScript腳本程序3 認(rèn)識(shí)“行為”面板v“行為”面板是添加和控制操作行為的場(chǎng)所。選擇“窗口/行為”命令或按Shift+F3鍵，打開“行為”面板，在面板中會(huì)顯示已添加的行為。v“行為”面板中各按鈕的功能如下：4 認(rèn)識(shí)“行為”面板v單擊 按鈕只顯示已設(shè)置的事件列表。v單擊 按鈕顯示所有事件列表。v單擊 按鈕會(huì)彈出“行為”菜單。在該菜單中 選擇相應(yīng)的行為后，會(huì)打開相應(yīng)的對(duì)話框，設(shè)置完成后將為指定的對(duì)象添加行為。v單擊 按鈕會(huì)刪除一個(gè)行為。5 認(rèn)識(shí)“行為”面板

2、v單擊 按鈕將向上移動(dòng)所選擇的動(dòng)作。若該按鈕為灰色，則表示不能移動(dòng)。v單擊 按鈕將向下移動(dòng)所選擇的動(dòng)作。6實(shí)例5.1：使用行為實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片上面改變狀態(tài)欄文字。v事件v附加動(dòng)作7 檢查瀏覽器v由于訪問者可能會(huì)使用不同類型和版本的瀏覽器，利用“檢查瀏覽器”行為可根據(jù)訪問者使用的瀏覽器而跳轉(zhuǎn)到不同的頁面。8 檢查插件v“檢查插件”行為的目的是檢查瀏覽者的電腦是否安裝了指定的插件，從而決定將網(wǎng)頁轉(zhuǎn)到不同的頁面。如讓安裝了Shockwave插件的訪問者轉(zhuǎn)到有Shockwave影片的頁面，讓未安裝該插件的訪問者轉(zhuǎn)到?jīng)]有Shockwave影片的頁面。9 轉(zhuǎn)到URLv“轉(zhuǎn)到URL”行為可以在當(dāng)前窗口或指

3、定的框架中打開一個(gè)新頁面。利用此行為可以通過一次單擊更改兩個(gè)或多個(gè)框架的內(nèi)容，非常方便。10 跳轉(zhuǎn)菜單v“跳轉(zhuǎn)菜單”行為可通過選擇“插入/表單/跳轉(zhuǎn)菜單”命令進(jìn)行創(chuàng)建，并可通過“行為”面板對(duì)已有的跳轉(zhuǎn)菜單進(jìn)行編輯修改。在“跳轉(zhuǎn)菜單”對(duì)話框中可設(shè)置跳轉(zhuǎn)菜單的屬性，打開該對(duì)話框的方法有以下兩種：11 跳轉(zhuǎn)菜單v選中已插入的跳轉(zhuǎn)菜單，雙擊“行為”面板中的“跳轉(zhuǎn)菜單”動(dòng)作，打開“跳轉(zhuǎn)菜單”對(duì)話框。v選中已插入的跳轉(zhuǎn)菜單，在打開的“行為”面板中單擊 +按鈕，在彈出的“行為”菜單中選擇“跳轉(zhuǎn)菜單”命令，打開“跳轉(zhuǎn)菜單”對(duì)話框。v在“跳轉(zhuǎn)菜單”對(duì)話框中設(shè)置跳轉(zhuǎn)菜單的方法和“跳轉(zhuǎn)菜單”的創(chuàng)建基本相同，完成后單

4、擊 按鈕關(guān)閉對(duì)話框，如有需要可在面板中修改事件。12 打開瀏覽器窗口v使用“打開瀏覽器窗口”行為可打開一個(gè)新的瀏覽器窗口顯示指定的文檔，并且可以指定新窗口的屬性和名稱。v實(shí)例2:在網(wǎng)頁調(diào)入的同時(shí),打開一個(gè)POP窗口.13 彈出信息v添加了“彈出信息”行為后，當(dāng)觸發(fā)設(shè)定的事件時(shí)將會(huì)彈出預(yù)設(shè)對(duì)話框。v實(shí)例5.3：制作一個(gè)顯示URL的對(duì)話框。14設(shè)置文本v“設(shè)置狀態(tài)欄文本”行為“設(shè)置狀態(tài)欄文本”行為可用于在瀏覽器窗口底部左側(cè)的狀態(tài)欄中顯示消息。v“設(shè)置層文本”行為“設(shè)置層文本”行為可以設(shè)置層的內(nèi)容和格式，但保留層的屬性，如顏色等。該內(nèi)容可以包括任何有效的HTML源代碼。15實(shí)例一個(gè)顯示會(huì)員簡(jiǎn)介的網(wǎng)頁

5、16 預(yù)先載入圖像v“預(yù)先載入圖像”行為將不會(huì)立即出現(xiàn)在頁面上的圖像預(yù)先載入瀏覽器緩存中，可防止圖像出現(xiàn)時(shí)由于下載而導(dǎo)致延遲。17 設(shè)置導(dǎo)航欄圖像v使用“設(shè)置導(dǎo)航欄圖像”行為不僅可以將某個(gè)圖像變?yōu)閷?dǎo)航條圖像，還可以更改導(dǎo)航條中圖像的顯示和動(dòng)作。18 交換圖像v在頁面中插入鼠標(biāo)經(jīng)過圖像實(shí)際上就是Dreamweaver自動(dòng)添加了一個(gè)“交換圖像”行為?！敖粨Q圖像”行為通過更改標(biāo)簽的屬性將一個(gè)圖像和另一個(gè)圖像進(jìn)行交換，該行為創(chuàng)建了按鈕變換和其他圖像效果，包括一次交換多個(gè)圖像。19 改變屬性v使用“改變屬性”行為可更改對(duì)象的某些屬性，其中可更改的屬性是由瀏覽器決定的。v實(shí)例5.5：鼠標(biāo)移過圖像時(shí)改變大小

6、。20 顯示-隱藏層v“顯示-隱藏層”行為用于交互時(shí)顯示信息，可以顯示、隱藏或恢復(fù)一個(gè)或多個(gè)層的可見性。v實(shí)例5.6:鼠標(biāo)移動(dòng)到會(huì)員圖像上時(shí)顯示會(huì)員介紹。21 拖動(dòng)層v瀏覽者在訪問添加了“拖動(dòng)層”行為的頁面時(shí)可拖動(dòng)層到頁面的任意位置。v“拖動(dòng)層”行為可通過“拖動(dòng)層”對(duì)話框?qū)崿F(xiàn)。選中所需的層并打開“行為”面板，單擊 按鈕，在彈出的 “行為”菜單中選擇“拖動(dòng)層”命令，打開“拖動(dòng)層”對(duì)話框，該對(duì)話框中有“基本”和“高級(jí)”兩個(gè)選項(xiàng)卡?？梢栽O(shè)定瀏覽者向水平、垂直或任意方向拖動(dòng)層，以及用JavaScript函數(shù)名或代碼實(shí)現(xiàn)一些特殊功能。22 拖動(dòng)層v1“基本”選項(xiàng)卡v2. “高級(jí)”選項(xiàng)卡231“基本”選項(xiàng)

7、卡v“基本”選項(xiàng)卡中可選擇添加行為的層、拖動(dòng)限制等。242.“高級(jí)”選項(xiàng)卡v單擊對(duì)話框的“高級(jí)”選項(xiàng)卡，在其中可進(jìn)行層的拖動(dòng)控制點(diǎn)、在拖動(dòng)層時(shí)跟蹤層的移動(dòng)以及當(dāng)放下層時(shí)觸發(fā)一個(gè)動(dòng)作等設(shè)置。25v實(shí)例5.7：制作拖動(dòng)圖像進(jìn)行類似拼圖的效果，將會(huì)員圖片拖到指定位置。26 調(diào)用JavaScriptv“調(diào)用JavaScript”行為允許用戶使用“行為”面板指定當(dāng)發(fā)生某個(gè)事件時(shí)執(zhí)行自定義功能。27 控制Shockwave或Flashv使用“控制Shockwave或Flash”行為可播放、停止、倒退、轉(zhuǎn)到Flash或Shockwave文件中的幀。28播放聲音v使用“播放聲音”行為可以在頁面載入時(shí)播放音樂。

8、29檢查表單v檢查表單行為用于檢查用戶輸入的文本區(qū)的內(nèi)容是否正確。v此行為可以附加給onBlur或Submit事件。30使用JavaScript代碼v認(rèn)識(shí)使用代碼片斷面板 執(zhí)行窗口代碼片斷 拖動(dòng)代碼片斷到編輯窗口得網(wǎng)頁中； 在編輯窗口中要插入代碼片斷的地方單擊，然后雙擊代碼片斷； 在編輯窗口要插入代碼片斷的地方單擊，然后執(zhí)行插入按鈕。31JavaSrript代碼實(shí)例v實(shí)例一：插入關(guān)閉窗口按鈕。v實(shí)例二：會(huì)暫停的滾動(dòng)字幕。32 模板的使用v在創(chuàng)建模板前需先創(chuàng)建站點(diǎn)，因?yàn)槟０灞仨毐４嬖谡军c(diǎn)中，否則創(chuàng)建模板時(shí)系統(tǒng)會(huì)提示創(chuàng)建站點(diǎn)。創(chuàng)建模板有兩種方式：將現(xiàn)有網(wǎng)頁另存為模板和直接創(chuàng)建空白模板。331將現(xiàn)有

9、網(wǎng)頁另存為模板342直接創(chuàng)建空白模板35設(shè)置模板的屬性設(shè)置模板的屬性1.設(shè)置模板的頁面屬性設(shè)置模板的頁面屬性使用菜單“修改”“ 頁面屬性”改變模板的頁面屬性。 2.定義模板的可編輯區(qū)定義模板的可編輯區(qū)每個(gè)模板都包含可編輯區(qū)和不可編輯區(qū)兩部分。可編輯區(qū)指的是一個(gè)頁面中可以更改的部分，它所包含的內(nèi)容是經(jīng)常變換的。不可編輯區(qū)是指在所有頁面中不能改變的內(nèi)容，它的內(nèi)容只能在模板中編輯，如某些公共標(biāo)識(shí)符等。363.定義重復(fù)區(qū)域定義重復(fù)區(qū)域重復(fù)區(qū)域指的是一個(gè)頁面中可以任意多地增加的部分，例如表格中的內(nèi)容等。重復(fù)區(qū)域是不可編輯區(qū)，如果要在重復(fù)區(qū)域中編輯不同的內(nèi)容，必須在重復(fù)區(qū)域中插入可編輯區(qū)域。4.定義可選區(qū)

10、域定義可選區(qū)域可選區(qū)域是指在滿足一定條件下才在頁面中顯示的區(qū)域。5.定義嵌套模板定義嵌套模板嵌套模板是指在一個(gè)模板中調(diào)用了另一個(gè)模板的內(nèi)容。 37應(yīng)用模板應(yīng)用模板1.基于模板創(chuàng)建文件基于模板創(chuàng)建文件 使用菜單“文件”“新建”，在彈出的對(duì)話框中選擇“模板”選項(xiàng)卡，出現(xiàn)“從模板新建”對(duì)話框，在對(duì)話框中選擇一個(gè)模板，然后單擊“創(chuàng)建”按鈕； 或使用資源面板。2. 在已有的文件中應(yīng)用模板在已有的文件中應(yīng)用模板使用菜單“修改” “模板”“應(yīng)用模板到頁”，從列表中選擇一個(gè)模板，然后單擊“選定”按鈕。38 從資源面板的模板子面板中拖動(dòng)模板到文本窗口中； 在資源面板中選中一個(gè)模板，然后，點(diǎn)擊應(yīng)用按鈕。3.將文件

11、從模板中分離將文件從模板中分離使用菜單“修改” “模板”“從模板中分離”。 39應(yīng)用舉例創(chuàng)建和應(yīng)用模板 40使用庫v生成庫項(xiàng)目 在“設(shè)計(jì)”模式下，選中窗口中的一個(gè)或多個(gè)元素，然后，將其拖動(dòng)到資源面板的庫項(xiàng)目列表中，就生成了一個(gè)新的庫項(xiàng)目。v應(yīng)用庫項(xiàng)目 在站點(diǎn)的任一網(wǎng)頁中，可以通過拖動(dòng)一個(gè)庫項(xiàng)目到網(wǎng)頁編輯窗口中。41v編輯庫項(xiàng)目 選中資源面板中的一個(gè)庫項(xiàng)目，單擊編輯按鈕進(jìn)行編輯。v修改使用庫項(xiàng)目的頁面 （1）執(zhí)行修改庫更新頁面命令； （2）在“更新頁面”對(duì)話框中，選擇需要修改的文件； （3）單擊開始按鈕完成更新。42網(wǎng)站的發(fā)布與維護(hù)站點(diǎn)的測(cè)試和發(fā)布的主要工作和步驟如下： 申請(qǐng)域名。 申請(qǐng)站點(diǎn)空間

12、。 本地站點(diǎn)的測(cè)試。 網(wǎng)頁的上傳。 網(wǎng)站的宣傳推廣。 43申請(qǐng)主頁空間及域名v若要發(fā)布網(wǎng)站，需要先申請(qǐng)一個(gè)主頁存放空間，將完成的Web頁上傳到這個(gè)空間里，然后申請(qǐng)一個(gè)域名，瀏覽者即可通過該域名訪問到站點(diǎn)。44 申請(qǐng)主頁空間v主頁空間通常有免費(fèi)和收費(fèi)兩種： 免費(fèi)主頁空間的大小和運(yùn)行的支持條件會(huì)受一定限制。 收費(fèi)主頁空間一般由網(wǎng)站托管機(jī)構(gòu)提供，其空間大小及支持條件可供用戶根據(jù)需要進(jìn)行選擇。45申請(qǐng)免費(fèi)主頁空間v網(wǎng)上可申請(qǐng)免費(fèi)主頁空間的網(wǎng)站比較多，各個(gè)網(wǎng)站上的申請(qǐng)操作基本相同，下面以中華網(wǎng)(http:/)為例，介紹免費(fèi)主頁空間的申請(qǐng)過程。46站點(diǎn)的管理站點(diǎn)的管理1.配置FTP上傳功能 使用菜單“站點(diǎn)

13、”“管理站點(diǎn)”打開“管理站點(diǎn)”對(duì)話框。 2.上傳文件 使用菜單“窗口”“文件”打開“文件面板”，在文件面板的下面列出站點(diǎn)的文件。47管理站點(diǎn)的文件管理站點(diǎn)的文件1.站點(diǎn)中的文件結(jié)構(gòu)站點(diǎn)中的文件結(jié)構(gòu)（1）分門別類地將文件存放在不同的目錄下。（2）在每個(gè)主目錄下建立獨(dú)立的images目錄。（3）目錄的層次不要太深，建議不要超過3層。（4）不要使用中文文件名和中文目錄名，使用中文的名字可能對(duì)網(wǎng)址的正確顯示造成困難，有一些瀏覽器不支持中文文件名和目錄名的調(diào)用。（5）不要使用過長(zhǎng)的目錄名，盡管大多數(shù)服務(wù)器支持長(zhǎng)文件名，但是太長(zhǎng)的目錄名不便于記憶，也不容易管理。482.文件管理窗口文件管理窗口單擊“文件”面板的按鈕 窗口轉(zhuǎn)換為文件管理的模式。 單擊其中的站點(diǎn)文件按鈕 在左右兩欄分別顯示遠(yuǎn)程文件和本地文件。 3.地圖視圖地圖視圖在文件管理窗口單擊地圖視圖按鈕 4.檢查鏈接檢查鏈接使用菜單