《項目12 使用行為完善網(wǎng)頁功能》由會員分享,可在線閱讀,更多相關《項目12 使用行為完善網(wǎng)頁功能(14頁珍藏版)》請在裝配圖網(wǎng)上搜索。
1、項目七項目七 使用行為完善網(wǎng)頁功能 設置頁眉部分設置頁眉部分 任務一任務一設置主體部分設置主體部分 任務二任務二任務一 設置頁眉部分(一)設置狀態(tài)欄文本【操作步驟】1.在Dreamweaver 8中定義一個本地站點,并將教學輔助光盤“項目12項目素材”文件夾下的內容復制到站點根文件夾下面,然后在網(wǎng)站根文件夾下面打開主頁文檔“index.htm”。2.在菜單欄中選擇【窗口】【行為】命令,打開【行為】面板,如圖所示。3.選中頁眉左端的logo圖像“images/logo.gif”,然后在【行為】面板中單擊 按鈕,打開【行為】菜單,從中選擇【設置文本】【設置狀態(tài)欄文本】命令,打開【設置狀態(tài)欄文本】對
2、話框,在【消息】文本框中輸入“西雙版納歡迎您!”,如圖所示。4.單擊 按鈕完成設置,如圖所示。5.保存文檔并在瀏覽器中瀏覽,當鼠標光標停留在logo圖像上時,瀏覽器狀態(tài)欄將顯示事先定義的文本“西雙版納歡迎您!”(二二)制作彈出式菜單制作彈出式菜單1.選中標有選中標有“西雙版納歡迎您西雙版納歡迎您”字樣的圖像文件字樣的圖像文件“images/logo01.gif”,并在,并在【屬性屬性】面板中為其添加空鏈面板中為其添加空鏈接接“#”。2.在在【行為行為】面板中單擊面板中單擊 按鈕,從按鈕,從【行為行為】菜單中選擇菜單中選擇【顯示彈顯示彈出式菜單出式菜單】命令,打開圖所示的對話框。命令,打開圖所示
3、的對話框。3.勾選勾選【Dont show me this message again】復選框,此對話框將不復選框,此對話框將不再出現(xiàn),單擊按鈕,打開下方圖片所示的對話框。再出現(xiàn),單擊按鈕,打開下方圖片所示的對話框。4.在在【文本文本】文本框中輸入文本框中輸入“瀾滄江瀾滄江”,在,在【目標目標】下拉列表中選擇下拉列表中選擇【_blank】選項,在選項,在【鏈接鏈接】文本框中定義鏈接文件為文本框中定義鏈接文件為“l(fā)cj.htm”。5.單擊單擊 按鈕,繼續(xù)添加其他菜單項,如圖所示。按鈕,繼續(xù)添加其他菜單項,如圖所示。6.切換至切換至【外觀外觀】選項卡,設置菜單的外觀參數(shù),其中一般狀態(tài)選項卡,設置菜
4、單的外觀參數(shù),其中一般狀態(tài)【文文本本】的顏色為的顏色為“#000000”,【單元格單元格】的顏色為的顏色為“#006600”,滑過,滑過狀態(tài)狀態(tài)【文本文本】的顏色為的顏色為“#FF0000”,【單元格單元格】的顏色為的顏色為“#CCCCCC”,如圖所示。,如圖所示。7.切換至切換至【高級高級】選項卡,將選項卡,將【單元格寬度單元格寬度】設置為設置為“80像素像素”,將,將【單元格高度單元格高度】設置為設置為“25像素像素”,其他參數(shù)可以根據(jù)個人喜,其他參數(shù)可以根據(jù)個人喜好進行設置,如圖所示。好進行設置,如圖所示。8.切換至切換至【位置位置】選項卡,在選項卡,在【菜單位置菜單位置】選項中單擊第選
5、項中單擊第4個按鈕,個按鈕,并勾選并勾選【在發(fā)生在發(fā)生onMouseOut事件時隱藏菜單事件時隱藏菜單】復選框,如復選框,如圖所示圖所示。9.單擊單擊 按鈕,完成彈出式菜單設置工作,如圖所示。按鈕,完成彈出式菜單設置工作,如圖所示。10.保存文檔,然后按保存文檔,然后按F12鍵預覽網(wǎng)頁,當鼠標光標經(jīng)過欄目時,鍵預覽網(wǎng)頁,當鼠標光標經(jīng)過欄目時,便會彈出菜單,單擊菜單中的某一項,便會打開所指向的便會彈出菜單,單擊菜單中的某一項,便會打開所指向的文檔窗口,當鼠標光標離開欄目時,菜單便會消失。文檔窗口,當鼠標光標離開欄目時,菜單便會消失。任務二 設置主體部分(一)打開瀏覽器窗口【操作步驟】1.選中“風
6、景欣賞”欄目下面的第1幅圖像“images/xsbn1.jpg”,然后在【行為】面板中單擊按鈕,從【行為】菜單中選擇【打開瀏覽器窗口】命令,打開【打開瀏覽器窗口】對話框,2.單擊按鈕,選擇圖像文件“images/xsbn 1.jpg”,將【窗口寬度】和【窗口高度】分別設置為“330”和“230”,并勾選【需要時使用滾動條】復選框,如圖所示。3.單擊單擊 按鈕,關閉對話框,在按鈕,關閉對話框,在【行為行為】面板中將事件設置為面板中將事件設置為“onClick”。然后用相同的方法設置下面的圖像。然后用相同的方法設置下面的圖像。4.保存網(wǎng)頁并按保存網(wǎng)頁并按F12鍵預覽網(wǎng)頁,單擊鍵預覽網(wǎng)頁,單擊“風景
7、欣賞風景欣賞”欄目下面的第欄目下面的第2幅幅圖像,將打開一個新窗口,如圖所示。圖像,將打開一個新窗口,如圖所示。(二)交換圖像【操作步驟】1.在文檔中選定地圖圖像“images/map.jpg”,并確認在其【屬性】面板中設置了圖像名稱,這里為“map”。2.在【行為】面板中單擊 按鈕,從【行為】菜單中選擇【交換圖像】命令,打開【交換圖像】對話框。3.在【圖像】列表框中選擇要改變的圖像“map”,然后在【設定原始檔為】文本框中定義其要交換的圖像文件“images/xsbn6.jpg”,并勾選【預先載入圖像】和【鼠標滑開時恢復圖像】兩個復選框,如圖所示。4.單擊按鈕,關閉對話框,然后保存網(wǎng)頁并進行
8、預覽,當鼠標光標停在圖像上時,圖像會變換為另一幅圖像。(三)彈出信息【操作步驟】1.在文檔中選定地圖圖像“images/map.jpg”,然后在【行為】面板中單擊按鈕,從行為菜單中選擇【彈出信息】命令,打開【彈出信息】對話框。2.在【彈出信息】對話框的【消息】文本框中輸入提示信息,如圖所示。單擊按鈕,關閉對話框,然后在【行為】面板中選擇【onMouseDown】事件。3.保存網(wǎng)頁并按F12鍵進行預覽,單擊鼠標左鍵或右鍵都會彈出信息框,如圖所示。(四)控制Shockwave或Flash【操作步驟】1.選定文檔左下角的Flash動畫,打開其【屬性】面板,將視頻命名為“fengguang”,并取消對【循環(huán)】和【自動播放】兩個復選框的勾選。2.選定Flash動畫右側的文本“播放”,并為其添加空鏈接“#”。3.在【行為】面板中單擊 按鈕,從【行為】菜單中選擇【控制Shockwave或Flash】命令,打開【控制Shockwave或Flash】對話框。4.在【影片】列表中選擇命名的影片“fengguang”,在【操作】選項組中點選【播放】單選鈕,如圖所示。5.單擊 按鈕,關閉對話框,然后用相同的方法為“停止”添加【停止】行為。6.在【行為】面板中設置事件為“onClick”。7.保存網(wǎng)頁并按F12鍵進行預覽,驗證“播放”和“停止”鏈接的有效性。