《網(wǎng)頁設計與制作》第五章高級網(wǎng)頁制作.ppt

1 第5章高級網(wǎng)頁制作 網(wǎng)頁設計與制作 南海學院計算機系制作 2 第5章高級網(wǎng)頁制作 行為事件和動作行為和JavaScript腳本程序 3 認識 行為 面板 行為 面板是添加和控制操作行為的場所 選擇 窗口 行為 命令或按Shift F3鍵 打開 行為 面板 在面板中會顯示已添加的行為 行為 面板中各按鈕的功能如下 4 認識 行為 面板 單擊按鈕只顯示已設置的事件列表 單擊按鈕顯示所有事件列表 單擊按鈕會彈出 行為 菜單 在該菜單中選擇相應的行為后 會打開相應的對話框 設置完成后將為指定的對象添加行為 單擊按鈕會刪除一個行為 5 認識 行為 面板 單擊按鈕將向上移動所選擇的動作 若該按鈕為灰色 則表示不能移動 單擊按鈕將向下移動所選擇的動作 6 實例5 1 使用行為實現(xiàn)鼠標移動到圖片上面改變狀態(tài)欄文字 事件附加動作 7 檢查瀏覽器 由于訪問者可能會使用不同類型和版本的瀏覽器 利用 檢查瀏覽器 行為可根據(jù)訪問者使用的瀏覽器而跳轉到不同的頁面 8 檢查插件 檢查插件 行為的目的是檢查瀏覽者的電腦是否安裝了指定的插件 從而決定將網(wǎng)頁轉到不同的頁面 如讓安裝了Shockwave插件的訪問者轉到有Shockwave影片的頁面 讓未安裝該插件的訪問者轉到?jīng)]有Shockwave影片的頁面 9 轉到URL 轉到URL 行為可以在當前窗口或指定的框架中打開一個新頁面 利用此行為可以通過一次單擊更改兩個或多個框架的內容 非常方便 10 跳轉菜單 跳轉菜單 行為可通過選擇 插入 表單 跳轉菜單 命令進行創(chuàng)建 并可通過 行為 面板對已有的跳轉菜單進行編輯修改 在 跳轉菜單 對話框中可設置跳轉菜單的屬性 打開該對話框的方法有以下兩種 11 跳轉菜單 選中已插入的跳轉菜單 雙擊 行為 面板中的 跳轉菜單 動作 打開 跳轉菜單 對話框 選中已插入的跳轉菜單 在打開的 行為 面板中單擊 按鈕 在彈出的 行為 菜單中選擇 跳轉菜單 命令 打開 跳轉菜單 對話框 在 跳轉菜單 對話框中設置跳轉菜單的方法和 跳轉菜單 的創(chuàng)建基本相同 完成后單擊按鈕關閉對話框 如有需要可在面板中修改事件 12 打開瀏覽器窗口 使用 打開瀏覽器窗口 行為可打開一個新的瀏覽器窗口顯示指定的文檔 并且可以指定新窗口的屬性和名稱 實例2 在網(wǎng)頁調入的同時 打開一個POP窗口 13 彈出信息 添加了 彈出信息 行為后 當觸發(fā)設定的事件時將會彈出預設對話框 實例5 3 制作一個顯示URL的對話框 14 設置文本 設置狀態(tài)欄文本 行為 設置狀態(tài)欄文本 行為可用于在瀏覽器窗口底部左側的狀態(tài)欄中顯示消息 設置層文本 行為 設置層文本 行為可以設置層的內容和格式 但保留層的屬性 如顏色等 該內容可以包括任何有效的HTML源代碼 15 實例一個顯示會員簡介的網(wǎng)頁 16 預先載入圖像 預先載入圖像 行為將不會立即出現(xiàn)在頁面上的圖像預先載入瀏覽器緩存中 可防止圖像出現(xiàn)時由于下載而導致延遲 17 設置導航欄圖像 使用 設置導航欄圖像 行為不僅可以將某個圖像變?yōu)閷Ш綏l圖像 還可以更改導航條中圖像的顯示和動作 18 交換圖像 在頁面中插入鼠標經(jīng)過圖像實際上就是Dreamweaver自動添加了一個 交換圖像 行為 交換圖像 行為通過更改標簽的屬性將一個圖像和另一個圖像進行交換 該行為創(chuàng)建了按鈕變換和其他圖像效果 包括一次交換多個圖像 19 改變屬性 使用 改變屬性 行為可更改對象的某些屬性 其中可更改的屬性是由瀏覽器決定的 實例5 5 鼠標移過圖像時改變大小 20 顯示 隱藏層 顯示 隱藏層 行為用于交互時顯示信息 可以顯示 隱藏或恢復一個或多個層的可見性 實例5 6 鼠標移動到會員圖像上時顯示會員介紹 21 拖動層 瀏覽者在訪問添加了 拖動層 行為的頁面時可拖動層到頁面的任意位置 拖動層 行為可通過 拖動層 對話框實現(xiàn) 選中所需的層并打開 行為 面板 單擊按鈕 在彈出的 行為 菜單中選擇 拖動層 命令 打開 拖動層 對話框 該對話框中有 基本 和 高級 兩個選項卡 可以設定瀏覽者向水平 垂直或任意方向拖動層 以及用JavaScript函數(shù)名或代碼實現(xiàn)一些特殊功能 22 拖動層 1 基本 選項卡2 高級 選項卡 23 1 基本 選項卡 基本 選項卡中可選擇添加行為的層 拖動限制等 24 2 高級 選項卡 單擊對話框的 高級 選項卡 在其中可進行層的拖動控制點 在拖動層時跟蹤層的移動以及當放下層時觸發(fā)一個動作等設置 25 實例5 7 制作拖動圖像進行類似拼圖的效果 將會員圖片拖到指定位置 26 調用JavaScript 調用JavaScript 行為允許用戶使用 行為 面板指定當發(fā)生某個事件時執(zhí)行自定義功能 27 控制Shockwave或Flash 使用 控制Shockwave或Flash 行為可播放 停止 倒退 轉到Flash或Shockwave文件中的幀 28 播放聲音 使用 播放聲音 行為可以在頁面載入時播放音樂 29 檢查表單 檢查表單行為用于檢查用戶輸入的文本區(qū)的內容是否正確 此行為可以附加給onBlur或Submit事件 30 使用JavaScript代碼 認識使用代碼片斷面板執(zhí)行窗口 代碼片斷拖動代碼片斷到編輯窗口得網(wǎng)頁中 在編輯窗口中要插入代碼片斷的地方單擊 然后雙擊代碼片斷 在編輯窗口要插入代碼片斷的地方單擊 然后執(zhí)行插入按鈕 31 JavaSrript代碼實例 實例一 插入關閉窗口按鈕 實例二 會暫停的滾動字幕 32 模板的使用 在創(chuàng)建模板前需先創(chuàng)建站點 因為模板必須保存在站點中 否則創(chuàng)建模板時系統(tǒng)會提示創(chuàng)建站點 創(chuàng)建模板有兩種方式 將現(xiàn)有網(wǎng)頁另存為模板和直接創(chuàng)建空白模板 33 1 將現(xiàn)有網(wǎng)頁另存為模板 34 2 直接創(chuàng)建空白模板 35 設置模板的屬性 1 設置模板的頁面屬性 使用菜單 修改 頁面屬性 改變模板的頁面屬性 2 定義模板的可編輯區(qū) 每個模板都包含可編輯區(qū)和不可編輯區(qū)兩部分 可編輯區(qū)指的是一個頁面中可以更改的部分 它所包含的內容是經(jīng)常變換的 不可編輯區(qū)是指在所有頁面中不能改變的內容 它的內容只能在模板中編輯 如某些公共標識符等 36 3 定義重復區(qū)域 重復區(qū)域指的是一個頁面中可以任意多地增加的部分 例如表格中的內容等 重復區(qū)域是不可編輯區(qū) 如果要在重復區(qū)域中編輯不同的內容 必須在重復區(qū)域中插入可編輯區(qū)域 4 定義可選區(qū)域 可選區(qū)域是指在滿足一定條件下才在頁面中顯示的區(qū)域 5 定義嵌套模板 嵌套模板是指在一個模板中調用了另一個模板的內容 37 應用模板 1 基于模板創(chuàng)建文件 使用菜單 文件 新建 在彈出的對話框中選擇 模板 選項卡 出現(xiàn) 從模板新建 對話框 在對話框中選擇一個模板 然后單擊 創(chuàng)建 按鈕 或使用資源面板 2 在已有的文件中應用模板 使用菜單 修改 模板 應用模板到頁 從列表中選擇一個模板 然后單擊 選定 按鈕 38 從資源面板的模板子面板中拖動模板到文本窗口中 在資源面板中選中一個模板 然后 點擊應用按鈕 3 將文件從模板中分離使用菜單 修改 模板 從模板中分離 39 應用舉例 創(chuàng)建和應用模板 40 使用庫 生成庫項目在 設計 模式下 選中窗口中的一個或多個元素 然后 將其拖動到資源面板的庫項目列表中 就生成了一個新的庫項目 應用庫項目在站點的任一網(wǎng)頁中 可以通過拖動一個庫項目到網(wǎng)頁編輯窗口中 41 編輯庫項目選中資源面板中的一個庫項目 單擊編輯按鈕進行編輯 修改使用庫項目的頁面 1 執(zhí)行修改 庫 更新頁面命令 2 在 更新頁面 對話框中 選擇需要修改的文件 3 單擊開始按鈕完成更新 42 網(wǎng)站的發(fā)布與維護 站點的測試和發(fā)布的主要工作和步驟如下 申請域名 申請站點空間 本地站點的測試 網(wǎng)頁的上傳 網(wǎng)站的宣傳推廣 43 申請主頁空間及域名 若要發(fā)布網(wǎng)站 需要先申請一個主頁存放空間 將完成的Web頁上傳到這個空間里 然后申請一個域名 瀏覽者即可通過該域名訪問到站點 44 申請主頁空間 主頁空間通常有免費和收費兩種 免費主頁空間的大小和運行的支持條件會受一定限制 收費主頁空間一般由網(wǎng)站托管機構提供 其空間大小及支持條件可供用戶根據(jù)需要進行選擇 45 申請免費主頁空間 網(wǎng)上可申請免費主頁空間的網(wǎng)站比較多 各個網(wǎng)站上的申請操作基本相同 下面以中華網(wǎng) 為例 介紹免費主頁空間的申請過程 46 站點的管理 1 配置FTP上傳功能使用菜單 站點 管理站點 打開 管理站點 對話框 2 上傳文件使用菜單 窗口 文件 打開 文件面板 在文件面板的下面列出站點的文件 47 管理站點的文件 1 站點中的文件結構 1 分門別類地將文件存放在不同的目錄下 2 在每個主目錄下建立獨立的images目錄 3 目錄的層次不要太深 建議不要超過3層 4 不要使用中文文件名和中文目錄名 使用中文的名字可能對網(wǎng)址的正確顯示造成困難 有一些瀏覽器不支持中文文件名和目錄名的調用 5 不要使用過長的目錄名 盡管大多數(shù)服務器支持長文件名 但是太長的目錄名不便于記憶 也不容易管理 48 2 文件管理窗口 單擊 文件 面板的按鈕 窗口轉換為文件管理的模式 單擊其中的站點文件按鈕 在左右兩欄分別顯示遠程文件和本地文件 3 地圖視圖 在文件管理窗口單擊地圖視圖按鈕 4 檢查鏈接 使用菜