Dreamweaver顯示彈出式菜單

1、實驗 19 顯示彈出式菜單實驗要求使用“顯示彈出式菜單”行為來創(chuàng)建或編輯 Dreamweaver 彈出式菜單，或者打開并修 改已插入 Dreamweaver 文檔的 Fireworks 彈出式菜單。通過實驗，掌握如何通過在“顯示彈 出式菜單”對話框中設(shè)置選項來創(chuàng)建水平或垂直彈出菜單，并使用此對話框來設(shè)置或修改彈 出菜單，并使用此對話框來設(shè)置或修改彈出菜單的 顏色、文本和位置。說明 若要察看文檔中的彈出菜單，必須在瀏覽器窗口中打開該文檔，然后將鼠標(biāo) 指針滑過觸發(fā)圖像或鏈接。對應(yīng)知識點：行為面板的使用設(shè)置行為事件 創(chuàng)建并編輯“顯示彈出式菜單”行為心：疫實驗素材無實驗步驟啟動Dreamweaver

2、MX 2004程序，新建HTML網(wǎng)頁。保存網(wǎng)頁為“pagel9.htm”。單擊屬性面板的“頁面屬性”按鈕，在“屬性面板 ”對話框中設(shè)置大小為“12 像素”，webenyanse為“白色（色標(biāo)值為#FFFFFF）”。設(shè)置“鏈接顏色”和“已 訪問鏈接”為“白色”，“變換圖像鏈接”為“黃色（色標(biāo)值#FFFF00） ”，在“下劃線樣式”下拉列表中選擇“金在變換圖像時顯示下劃線”選項。在“標(biāo)題” 編輯框內(nèi)輸入網(wǎng)頁標(biāo)題“東方聯(lián)網(wǎng)”，選擇“簡體中文”編碼。在空白網(wǎng)頁中插入1 行1 列，寬度為172像素，其他項為0的表格。選中表格，在 屬性面板中設(shè)置“高”為“50像素” 。在單元格內(nèi)輸入文字“東方網(wǎng)聯(lián)”，選中

3、文字，在屬性面板中設(shè)置字體為“黑體”， 大小為“30 像素“，顏色為“白色” ,背景顏色為“暗紅色（色標(biāo)值為#993366）”， 單擊“居中對齊”按鈕，完成后效果如圖 19-1 所示。在標(biāo)題表格下方插入1行1列，寬度為17 2像素，單元格邊距為6表格。選中表格，在屬性面板中設(shè)置其背景顏色為“淺灰色（色標(biāo)值#EAEAEA）”。在單元格內(nèi)插入7行1列，寬度為160像素，單元格間距為2的嵌套表格。拖動鼠 標(biāo)選中7個單元格，在屬性面板中設(shè)置高俄日“20”，背景色為“暗紅色（色標(biāo)值 為#993366）”，并單擊“居中對齊”按鈕，效果如圖19 2所示。圖 19-1 設(shè)置標(biāo)題效果圖 19-2 列表效果在每行

4、單元格內(nèi)輸入“欄目標(biāo)題”，如網(wǎng)站推薦、新聞動態(tài)、購物天地、分類信息 等等。如圖 19-3 所示。選中“網(wǎng)站推薦”標(biāo)題文字，在屬性面板“鏈接”編輯框內(nèi)輸入“# ”。選擇菜單“窗口” “行為”命令，打開行為面板。單擊行為面板的“+”按鈕，在菜單 中選擇“顯示彈出式菜單 ”選項。如圖 19-4 所示。1網(wǎng)站薄匸towijwwi*聃 qx 387+ 2 K / 1 1網(wǎng)站薄匸towijwwi*聃 qx 387+ 2 K / 1 秒東方網(wǎng)聯(lián)圖 19-4 無址鏈接并行為面板的“顯示彈出式菜單”圖 19-3 單元格內(nèi)輸入欄目題9.打開“顯示彈出式菜單”對話框。在“文本”編輯框內(nèi)輸入“搜索引擎”，單9.擊“”

5、按鈕，“搜索引擎”項被添加到“文本”列表中。在“文本”編輯框內(nèi)輸入“百度”替換“新建項目”文字，選擇“目標(biāo)”下拉列表中的“ _blank”選項，在“鏈接”編輯框內(nèi)輸入“HTTP:/“ 。如圖 19-5 所示。說明 在出現(xiàn)的“顯示彈出菜單”對話框中，使用以下標(biāo)簽來設(shè)置彈出菜單的選項：“內(nèi)容”允許你單獨設(shè)置個菜單項的名稱、結(jié)構(gòu)、URL和目標(biāo)?！巴庥^”使你 能夠設(shè)置菜單“一般狀態(tài)”和“滑過狀態(tài)”的外觀以及設(shè)置菜單項文本的字體選擇?！案呒墶痹试S你設(shè)置菜單單元格的屬性。例如，你可以設(shè)置單元格的寬度和高度、單元格顏色和邊框?qū)挾取⑽谋究s進以及在用戶將鼠標(biāo)指針移到觸發(fā)起上后菜單出現(xiàn) 之前的延遲時間長度?！拔恢?/p>

6、”允許你設(shè)置菜單相對于觸發(fā)圖像或鏈接的防治位置。選中文本列表中的“百度”選擇，單擊“縮進項”按鈕 ，是“百度”創(chuàng)建為“搜索引擎”的子菜單項。如圖19-6 所示百度顯示為縮進狀態(tài)。圖19-5添加新建項目“百度”圖19-6 圖19-5添加新建項目“百度”圖19-6 “百度”為“搜索引擎”的子菜單項說明 你不能使列表中的第一個菜單項成為子菜單項。再次單擊“+”按鈕，輸入文本、目標(biāo)和鏈接內(nèi)容，這時，自動添加為子菜單項。 如圖 19-7 所示。在新建完“搜索引擎”子菜單項后，同樣單擊“”按鈕，新建項目“門戶網(wǎng)站” 然后，單擊“左縮進項”按鈕，可以刪除縮進。如圖 19-8 所示。同樣的方法制作“門戶網(wǎng)站”

7、的子菜單項和“電子商務(wù)”菜單，完成后對話框如 圖19 9所示。說明 若要更改菜單中某個項的順序，在“顯示彈出菜單”列表中，選擇你要向上 或向下移動的項，然后單擊向上或向下的箭頭將項移動到想要其顯示的位置，若要從選擇你要從“顯示彈出菜單”列表中刪除的菜菜單中刪除某項，在“內(nèi)容”標(biāo)簽中選擇你要從“顯示彈出菜單”列表中刪除的菜單項，單擊減號按鈕。圖 19-7 新建項目自動添加為子菜單項 圖 19-8 新建項目刪除縮進在創(chuàng)建了菜單項之后，使用“顯示彈出菜單”的“外觀”選項卡設(shè)置彈出菜單的 方向、字體屬性和按鈕狀態(tài)屬性。單擊“外觀”標(biāo)簽，在選項卡頂部的下拉列表中選擇“垂 直菜單”選項。設(shè)置大小為12（單

8、位為像素），單擊“左對齊”。在“一般狀態(tài)”區(qū)選擇“文本”顏色為白色（色標(biāo)值為#FFFFFF） “單元格”顏色為暗紅色（色標(biāo)值為# 993366），在“滑過狀態(tài)”區(qū)選擇“文本”顏色為暗紅色（色標(biāo)值為#993366），“單元格” 顏色為粉色（色標(biāo)值為#E9BCD2）。如圖所示19-10圖 19-9 添加的所有菜單和子菜單項圖 圖 19-9 添加的所有菜單和子菜單項圖 19-10 設(shè)置外觀選項卡說明 “外觀”選項卡的預(yù)覽窗格概略顯示你在此選項卡中設(shè)置的選項。使用“高級”標(biāo)簽中的選項指定單元單元格的其他屬性。例如，可以設(shè)置菜單按鈕的寬度、高度、單元格間距或邊距、縮進文本以及設(shè)置邊框?qū)傩?。單擊“高級”?biāo)

9、簽，在“單 元格寬度”編輯框輸入“120 像素”；在“單元格邊距”編輯框內(nèi)輸入“3”；在“文本縮 進”和“單元格間距”編輯框內(nèi)輸入“0”；在“菜單延遲”編輯框默認設(shè)置為1 0 0 0相 當(dāng)于1秒；我們需要菜單顯示邊框，因此默認設(shè)置1 0 0 0相當(dāng)于1秒。對于所需的每秒延 遲，都添加1 0 0 0；例如：對于3秒的延遲，請鍵入3 0 0 0,陰影和咼亮顯示不反映在 預(yù)覽中。使用“位置”選項設(shè)置彈出式菜單相對于觸發(fā)圖像或鏈接的顯示位置。您還可以設(shè) 置當(dāng)用戶將鼠標(biāo)指針移開觸發(fā)器之后改菜單是否隱藏。單擊“位置”標(biāo)簽；在“菜單位置” 區(qū)選擇“觸發(fā)器在右上邊緣”按鈕；確保選中了“在發(fā)生onmouseou

10、t事件時隱藏菜單”復(fù)選框。如圖 19-12 所示。選框。如圖 19-12 所示。圖 19-11 設(shè)置咼級選擇卡圖 19-12 設(shè)置位置選項卡說明：設(shè)置自定義位置鼠標(biāo)，方法是在“X”文本框中鍵入一個數(shù)字設(shè)置水平坐標(biāo)，在“Y”文本框中鍵入一個數(shù)字設(shè)置垂直坐標(biāo)。坐標(biāo)以菜單的左上角為基準(zhǔn)計算。若要 在鼠標(biāo)指針不在其上時隱藏彈出菜單，請確保選中了“在發(fā)生onmouseout事件時隱藏 菜單”。若要讓菜單顯示，則取消對改選項的選擇。創(chuàng)建完彈出菜單之后，單擊“確定“按鈕，返回網(wǎng)頁編輯窗口。在行為面板列 表中顯示了兩個動作。如圖19-13 所示。在行為面板中雙擊“顯示彈出式菜單“項，或是右擊彈出式菜單中選擇”

11、編輯 行為“命令，如圖19-14所示。打開”顯示彈出菜單“對話框，對該彈出對話框做出所 需的更改，修改完該彈出對話框后，單擊”確定“按鈕。20.按Ctrl+S鍵保存網(wǎng)頁，按F12鍵在瀏覽中查看網(wǎng)頁效果，如圖19-15所示。圖 19-13 行為面板圖 19-14 選擇編輯行為圖 19-13 行為面板圖 19-14 選擇編輯行為圖 19-15 瀏覽彈出式菜單效果中顯示了兩個動作實驗作業(yè)模仿:創(chuàng)建網(wǎng)頁，設(shè)置頁面屬性、布局表格和文字。在行為面板中選擇“顯示彈出式菜單”選項。添加菜單內(nèi)容。設(shè)置菜單外觀。設(shè)置高級選項卡。設(shè)置菜單位置。修改彈出式菜單。 創(chuàng)作：1. 創(chuàng)建網(wǎng)頁，布局水平式表格樣式。. 創(chuàng)建行為“顯示彈出式菜單”。. 根據(jù)欄目設(shè)置，添加菜單內(nèi)容。. 設(shè)置菜單外觀，選項“水平菜單”命令，并選擇自己喜歡的，適合欄目的顏色。. 設(shè)置高級選項卡。6 . 設(shè)置菜單位置。7.可參考本書配套光盤expl7-19sitel9文件夾中的提供的網(wǎng)頁進行彈出式菜單的設(shè)計，如圖19-16和圖19-17所示。解陀如豹斬 陽8H2BS甜卿麹SWI啊財卩】呷訶曲橄:FWW/5卩冋陽罐將個砸/咖:叩血遜番洋衛(wèi)用