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

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鍵 打開 行為 面板 在面板中會(huì)顯示已添加的行為 行為 面板中各按鈕的功能如下 4 認(rèn)識(shí) 行為 面板 單擊按鈕只顯示已設(shè)置的事件列表 單擊按鈕顯示所有事件列表 單擊按鈕會(huì)彈出 行為 菜單 在該菜單中選擇相應(yīng)的行為后 會(huì)打開相應(yīng)的對(duì)話框 設(shè)置完成后將為指定的對(duì)象添加行為 單擊按鈕會(huì)刪除一個(gè)行為 5 認(rèn)識(shí) 行為 面板 單擊按鈕將向上移動(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 檢查瀏覽器 由于訪問(wèn)者可能會(huì)使用不同類型和版本的瀏覽器 利用 檢查瀏覽器 行為可根據(jù)訪問(wèn)者使用的瀏覽器而跳轉(zhuǎn)到不同的頁(yè)面 8 檢查插件 檢查插件 行為的目的是檢查瀏覽者的電腦是否安裝了指定的插件 從而決定將網(wǎng)頁(yè)轉(zhuǎn)到不同的頁(yè)面 如讓安裝了Shockwave插件的訪問(wèn)者轉(zhuǎn)到有Shockwave影片的頁(yè)面 讓未安裝該插件的訪問(wèn)者轉(zhuǎn)到?jīng)]有Shockwave影片的頁(yè)面 9 轉(zhuǎn)到URL 轉(zhuǎn)到URL 行為可以在當(dāng)前窗口或指定的框架中打開一個(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ì)話框中可設(shè)置跳轉(zhuǎn)菜單的屬性 打開該對(duì)話框的方法有以下兩種 11 跳轉(zhuǎn)菜單 選中已插入的跳轉(zhuǎn)菜單 雙擊 行為 面板中的 跳轉(zhuǎn)菜單 動(dòng)作 打開 跳轉(zhuǎn)菜單 對(duì)話框 選中已插入的跳轉(zhuǎn)菜單 在打開的 行為 面板中單擊 按鈕 在彈出的 行為 菜單中選擇 跳轉(zhuǎn)菜單 命令 打開 跳轉(zhuǎn)菜單 對(duì)話框 在 跳轉(zhuǎn)菜單 對(duì)話框中設(shè)置跳轉(zhuǎn)菜單的方法和 跳轉(zhuǎn)菜單 的創(chuàng)建基本相同 完成后單擊按鈕關(guān)閉對(duì)話框 如有需要可在面板中修改事件 12 打開瀏覽器窗口 使用 打開瀏覽器窗口 行為可打開一個(gè)新的瀏覽器窗口顯示指定的文檔 并且可以指定新窗口的屬性和名稱 實(shí)例2 在網(wǎng)頁(yè)調(diào)入的同時(shí) 打開一個(gè)POP窗口 13 彈出信息 添加了 彈出信息 行為后 當(dāng)觸發(fā)設(shè)定的事件時(shí)將會(huì)彈出預(yù)設(shè)對(duì)話框 實(shí)例5 3 制作一個(gè)顯示URL的對(duì)話框 14 設(shè)置文本 設(shè)置狀態(tài)欄文本 行為 設(shè)置狀態(tài)欄文本 行為可用于在瀏覽器窗口底部左側(cè)的狀態(tài)欄中顯示消息 設(shè)置層文本 行為 設(shè)置層文本 行為可以設(shè)置層的內(nèi)容和格式 但保留層的屬性 如顏色等 該內(nèi)容可以包括任何有效的HTML源代碼 15 實(shí)例一個(gè)顯示會(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è) 交換圖像 行為 交換圖像 行為通過(guò)更改標(biāo)簽的屬性將一個(gè)圖像和另一個(gè)圖像進(jìn)行交換 該行為創(chuàng)建了按鈕變換和其他圖像效果 包括一次交換多個(gè)圖像 19 改變屬性 使用 改變屬性 行為可更改對(duì)象的某些屬性 其中可更改的屬性是由瀏覽器決定的 實(shí)例5 5 鼠標(biāo)移過(guò)圖像時(shí)改變大小 20 顯示 隱藏層 顯示 隱藏層 行為用于交互時(shí)顯示信息 可以顯示 隱藏或恢復(fù)一個(gè)或多個(gè)層的可見性 實(shí)例5 6 鼠標(biāo)移動(dòng)到會(huì)員圖像上時(shí)顯示會(huì)員介紹 21 拖動(dòng)層 瀏覽者在訪問(wèn)添加了 拖動(dòng)層 行為的頁(yè)面時(shí)可拖動(dòng)層到頁(yè)面的任意位置 拖動(dòng)層 行為可通過(guò) 拖動(dòng)層 對(duì)話框?qū)崿F(xiàn) 選中所需的層并打開 行為 面板 單擊按鈕 在彈出的 行為 菜單中選擇 拖動(dòng)層 命令 打開 拖動(dòng)層 對(duì)話框 該對(duì)話框中有 基本 和 高級(jí) 兩個(gè)選項(xiàng)卡 可以設(shè)定瀏覽者向水平 垂直或任意方向拖動(dòng)層 以及用JavaScript函數(shù)名或代碼實(shí)現(xiàn)一些特殊功能 22 拖動(dòng)層 1 基本 選項(xiàng)卡2 高級(jí) 選項(xiàng)卡 23 1 基本 選項(xiàng)卡 基本 選項(xiàng)卡中可選擇添加行為的層 拖動(dòng)限制等 24 2 高級(jí) 選項(xiàng)卡 單擊對(duì)話框的 高級(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)行類似拼圖的效果 將會(huì)員圖片拖到指定位置 26 調(diào)用JavaScript 調(diào)用JavaScript 行為允許用戶使用 行為 面板指定當(dāng)發(fā)生某個(gè)事件時(shí)執(zhí)行自定義功能 27 控制Shockwave或Flash 使用 控制Shockwave或Flash 行為可播放 停止 倒退 轉(zhuǎn)到Flash或Shockwave文件中的幀 28 播放聲音 使用 播放聲音 行為可以在頁(yè)面載入時(shí)播放音樂(lè) 29 檢查表單 檢查表單行為用于檢查用戶輸入的文本區(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)建模板有兩種方式 將現(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ū)域中插入可編輯區(qū)域 4 定義可選區(qū)域 可選區(qū)域是指在滿足一定條件下才在頁(yè)面中顯示的區(qū)域 5 定義嵌套模板 嵌套模板是指在一個(gè)模板中調(diào)用了另一個(gè)模板的內(nèi)容 37 應(yīng)用模板 1 基于模板創(chuàng)建文件 使用菜單 文件 新建 在彈出的對(duì)話框中選擇 模板 選項(xiàng)卡 出現(xiàn) 從模板新建 對(duì)話框 在對(duì)話框中選擇一個(gè)模板 然后單擊 創(chuàng)建 按鈕 或使用資源面板 2 在已有的文件中應(yīng)用模板 使用菜單 修改 模板 應(yīng)用模板到頁(yè) 從列表中選擇一個(gè)模板 然后單擊 選定 按鈕 38 從資源面板的模板子面板中拖動(dòng)模板到文本窗口中 在資源面板中選中一個(gè)模板 然后 點(diǎn)擊應(yīng)用按鈕 3 將文件從模板中分離使用菜單 修改 模板 從模板中分離 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ì)話框中 選擇需要修改的文件 3 單擊開始按鈕完成更新 42 網(wǎng)站的發(fā)布與維護(hù) 站點(diǎn)的測(cè)試和發(fā)布的主要工作和步驟如下 申請(qǐng)域名 申請(qǐng)站點(diǎn)空間 本地站點(diǎn)的測(cè)試 網(wǎng)頁(yè)的上傳 網(wǎng)站的宣傳推廣 43 申請(qǐng)主頁(yè)空間及域名 若要發(fā)布網(wǎng)站 需要先申請(qǐng)一個(gè)主頁(yè)存放空間 將完成的Web頁(yè)上傳到這個(gè)空間里 然后申請(qǐng)一個(gè)域名 瀏覽者即可通過(guò)該域名訪問(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)提供 其空間大小及支持條件可供用戶根據(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) 打開 管理站點(diǎn) 對(duì)話框 2 上傳文件使用菜單 窗口 文件 打開 文件面板 在文件面板的下面列出站點(diǎn)的文件 47 管理站點(diǎn)的文件 1 站點(diǎn)中的文件結(jié)構(gòu) 1 分門別類地將文件存放在不同的目錄下 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 檢查鏈接 使用菜