Dreamweaver網(wǎng)頁設(shè)計(jì)任務(wù)5-2

1、Dreamweaver網(wǎng)頁設(shè)計(jì)項(xiàng)目教程機(jī)械工業(yè)出版社任務(wù)五 制作下拉菜單1（建議2學(xué)時(shí)）01任務(wù)實(shí)施02任務(wù)評價(jià)03觸類旁通任務(wù)實(shí)施2 制作下拉菜單1. 制作下拉菜單。（1）設(shè)置DIV“nav”的定位方式為相對定位。在layout.css樣式表中找到對DIV“nav”的設(shè)置，對其CSS樣式進(jìn)行更改。生成的CSS代碼如下 （2）制作下拉菜單框架。在DIV“nav”結(jié)束標(biāo)簽之前插入DIV，對應(yīng)的ID名稱為“a-mcmw”，用來制作下拉菜單的框架 任務(wù)實(shí)施2 制作下拉菜單任務(wù)實(shí)施2 制作下拉菜單（3）制作下拉菜單的內(nèi)容。在DIV“a-mcmw”中插入列表，并為每個(gè)列表項(xiàng)設(shè)置鏈接，對應(yīng)的HTML代碼如

2、下： 任務(wù)實(shí)施2 制作下拉菜單設(shè)置該列表的CSS樣式 任務(wù)實(shí)施2 制作下拉菜單4. 為下拉菜單添加行為。（1）選中“美廚&美味”鏈接，按住鍵盤上的“Shift+F4”，打開行為面板選擇“添加行為”“顯示-隱藏元素”， 任務(wù)實(shí)施2 制作下拉菜單回到行為面板后，行為面板中出現(xiàn)了剛才設(shè)定的“顯示-隱藏元素”，對其進(jìn)行設(shè)置 任務(wù)實(shí)施2 制作下拉菜單（2）選中“美廚&美味”鏈接，按住鍵盤上的“Shift+F4”，打開行為面板選擇“添加行為”“顯示-隱藏元素”。任務(wù)實(shí)施2 制作下拉菜單回到行為面板后，行為面板中出現(xiàn)了剛才設(shè)定的“顯示-隱藏元素”，對其進(jìn)行設(shè)置，參數(shù)如圖所示。 （3）選擇下拉菜單中的“公司簡

3、介”鏈接，按照第（1）、（2）步驟的操作，添加鼠標(biāo)移上“onmouseover”顯示DIV“a-mcmw”， 鼠標(biāo)移開“onmouseout”隱藏DIV“a-mcmw”的行為。 任務(wù)實(shí)施2 制作下拉菜單（4）選擇下拉菜單中的“企業(yè)文化”鏈接，按照第（1）、（2）步驟的操作，添加鼠標(biāo)移上“onmouseover”顯示DIV“a-mcmw”， 鼠標(biāo)移開“onmouseout”隱藏DIV“a-mcmw”的行為。（5）選擇下拉菜單中的“所獲獎(jiǎng)項(xiàng)”鏈接，按照第（1）、（2）步驟的操作，添加鼠標(biāo)移上“onmouseover”顯示DIV“a-mcmw”， 鼠標(biāo)移開“onmouseout”隱藏DIV“a-mc

4、mw”的行為。3. 設(shè)置DIV“a-mcmw”的顯示初始狀態(tài)。在預(yù)覽網(wǎng)頁的時(shí)候可以看到，下拉菜單的初始狀態(tài)時(shí)顯示的，我們應(yīng)該更改它的初始狀態(tài)為隱藏。選中DIV“a-mcmw”，在下方的屬性欄中設(shè)置其可見性屬性為“hidden”。 任務(wù)實(shí)施2 制作下拉菜單任務(wù)評價(jià)關(guān)于這個(gè)任務(wù)的評價(jià)可以從以下幾個(gè)方面考慮：1. 制作的速度，在熟練的情況下，制作一個(gè)菜單的時(shí)間應(yīng)控制在30分鐘以內(nèi)。2. 要求不要生成多余的代碼。 觸類旁通 彈出廣告也是應(yīng)用比較多的行為功能。彈出廣告可以在第一時(shí)間吸引瀏覽者的眼球，常用在“在線咨詢”、“最新活動(dòng)”等宣傳中。彈出廣告事件一般加載到網(wǎng)頁的標(biāo)簽中，當(dāng)網(wǎng)頁載入，即打開彈出窗口。以首頁為例，制作的方法是：打開index.html首頁，在狀態(tài)欄選中“bo