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

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

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

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

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

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

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

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

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

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

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

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

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