制作簡(jiǎn)單的一級(jí)導(dǎo)航菜單(網(wǎng)頁(yè)特效)

《制作簡(jiǎn)單的一級(jí)導(dǎo)航菜單(網(wǎng)頁(yè)特效)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、講授課題簡(jiǎn)單的一級(jí)導(dǎo)航菜單課型新授教案序號(hào)(1,2)教學(xué)目標(biāo)知識(shí)與技能目標(biāo)1、熟練掌握制作簡(jiǎn)單一級(jí)導(dǎo)航菜單的方法2、會(huì)通過(guò)鼠標(biāo)事件實(shí)現(xiàn)菜單背景的切換過(guò)程與方法目標(biāo)通過(guò)教師引導(dǎo)學(xué)生，學(xué)生自主學(xué)習(xí)，使學(xué)生會(huì)使用本課內(nèi)容情感態(tài)度與價(jià)值觀目標(biāo)使學(xué)生體驗(yàn)使用本軟件處理問(wèn)題的便捷與好處，使學(xué)生能以積極態(tài)度學(xué)習(xí)本軟件,激發(fā)學(xué)生的學(xué)習(xí)興趣教學(xué)重點(diǎn)難點(diǎn)及解決辦法教學(xué)重點(diǎn)制作簡(jiǎn)單一級(jí)導(dǎo)航菜單的方法教學(xué)難點(diǎn)如何添加鼠標(biāo)事件解決辦法極域或多媒體演示，上機(jī)練習(xí)教學(xué)手段運(yùn)用極域或多媒體學(xué)法指導(dǎo)教師教法講解、演示、引導(dǎo)學(xué)生學(xué)法發(fā)

2、現(xiàn)問(wèn)題解決問(wèn)題教師活動(dòng)學(xué)生活動(dòng)課題導(dǎo)入[課前五分鐘]使用愛(ài)的鼓勵(lì)使學(xué)生更加喜歡課前五分鐘，并通過(guò)課前五分鐘讓學(xué)生明白一個(gè)道理或明白一些知識(shí)。[復(fù)習(xí)]一、頁(yè)面布局在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，首先需要根據(jù)頁(yè)面的內(nèi)容進(jìn)行網(wǎng)頁(yè)布局。一般來(lái)說(shuō)，網(wǎng)頁(yè)布局可以采用兩種方式。1、表格布局表格是網(wǎng)頁(yè)設(shè)計(jì)中用得最多的元素之一，利用表格組織網(wǎng)頁(yè)內(nèi)容，可以設(shè)計(jì)出布局合理，結(jié)構(gòu)協(xié)調(diào)、美觀勻稱的網(wǎng)頁(yè)。在網(wǎng)頁(yè)制作中表格主要有兩個(gè)用途：（1）在頁(yè)面上顯示表格數(shù)據(jù)。可以在網(wǎng)頁(yè)中直接顯示表格數(shù)據(jù)，當(dāng)遇到網(wǎng)頁(yè)中有大量數(shù)據(jù)文字信息時(shí)，使用表格形式顯示要

3、清晰得多。例如：成績(jī)單、新聞列表、通訊錄等。（2）使用表格布局。這是當(dāng)前網(wǎng)頁(yè)布局使用比較多的技術(shù)之一，通過(guò)設(shè)置表格的高度、寬度、比例等屬性對(duì)頁(yè)面元素進(jìn)行控制，精確布局網(wǎng)頁(yè)上的元素。1、CSS+DIV層布局CSS+DIV布局是利用CSS控制DIV標(biāo)簽的位置來(lái)實(shí)現(xiàn)的。CSS控制DIV搭建網(wǎng)頁(yè)，可以生成簡(jiǎn)潔的網(wǎng)頁(yè)源代碼，提高頁(yè)面的瀏覽速度，同時(shí)CSS也可以自如地控制網(wǎng)頁(yè)外觀，如邊框、背景、鏈接等，利用這種布局方法不僅可以制作出精美的網(wǎng)頁(yè)，也可以提供良好的用戶瀏覽體驗(yàn)。二、JavaScript事件簡(jiǎn)單地理解

4、，事件就是某一個(gè)動(dòng)作發(fā)生時(shí)產(chǎn)生的一種信號(hào)。在用戶瀏覽頁(yè)面時(shí)，隨時(shí)都會(huì)引發(fā)不同類型的事件。例如：鼠標(biāo)單擊了頁(yè)面上的按鈕、在文本框中輸入內(nèi)容等。JavaScript是一種基于事件觸發(fā)的腳本語(yǔ)言，因此在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，可以將事件與JavaScrip語(yǔ)言二者有機(jī)地結(jié)合起來(lái)，制作出生動(dòng)美觀的頁(yè)面效果。JavaScrip中常用的幾種鼠標(biāo)事件如表1-1所示：事件說(shuō)明OnMouseDown按下鼠標(biāo)按鍵時(shí)激發(fā)的事件onMouseUp松開(kāi)鼠標(biāo)按鍵時(shí)激發(fā)的事件OnMouseMove鼠標(biāo)指針在指定對(duì)象區(qū)域上移動(dòng)時(shí)激發(fā)的事件On

5、MouseOut鼠標(biāo)指針離開(kāi)指定對(duì)象區(qū)域時(shí)激發(fā)的事件OnMouseOver鼠標(biāo)指針移入指定對(duì)象時(shí)激發(fā)的事件OnClick使用鼠標(biāo)在指定對(duì)象區(qū)域上單擊時(shí)激發(fā)的事件一、相關(guān)的背景樣式常見(jiàn)的背景屬性如表1-2所示：名稱說(shuō)明Background-color設(shè)置背景顏色Background-image設(shè)置背景圖像Background-repeat設(shè)置一個(gè)指定的圖像如何被重復(fù)Background-position設(shè)置一個(gè)指定的圖像的位置[課前引入]我們經(jīng)常在瀏覽網(wǎng)頁(yè)時(shí)會(huì)看到網(wǎng)頁(yè)上端會(huì)出現(xiàn)菜單項(xiàng)，今天我們就一起來(lái)

6、學(xué)習(xí)一下如何制作簡(jiǎn)單的一級(jí)導(dǎo)航菜單。講授過(guò)程[教師活動(dòng)]1、演示案例——簡(jiǎn)單的一級(jí)導(dǎo)航菜單2、提問(wèn)：大家觀察到了上述那些特效？[學(xué)生活動(dòng)]看到了上邊的菜單和菜單背景可以動(dòng)態(tài)改變[教師活動(dòng)]案例中的特效分析1、菜單布局從演示我們可以看到，在簡(jiǎn)單的一級(jí)導(dǎo)航菜單中，每一個(gè)菜單都處于同一行之中。因此，可以直接通過(guò)表格布局的方式來(lái)實(shí)現(xiàn)。將每一個(gè)菜單視為一個(gè)單元格，這樣可以很方便地控制菜單條的顯示位置。2、動(dòng)態(tài)改變菜單背景菜單背景一般都是通過(guò)頁(yè)面的樣式來(lái)控制的，借助鼠標(biāo)事件改變菜單原來(lái)的顯示樣式，即可實(shí)現(xiàn)剛才演

7、示的效果。[學(xué)生活動(dòng)]按照教師分析進(jìn)行案例制作，上傳作品，并讓學(xué)生演示操作步驟：1、打開(kāi)素材頁(yè)面，并切換到代碼視圖使用DW打開(kāi)“素材”頁(yè)面，如圖所示：1、使用表格布局制作菜單從演示過(guò)程中可以看到，在頁(yè)面的菜單欄中設(shè)置了5個(gè)菜單項(xiàng)，對(duì)應(yīng)到表格中就是需要有5個(gè)單元格來(lái)顯示菜單選項(xiàng)。那么現(xiàn)在就需要將文字“在此處添加菜單”所在的單元格進(jìn)行拆分。設(shè)置菜單選項(xiàng)單元格的具體步驟為：（1）使用鼠標(biāo)選中文字所在的單元格，然后單擊“屬性”面板中“拆分單元格”按鈕，如下圖所示：在彈出的“拆分單元格”對(duì)話框中設(shè)置需要拆分的

8、行數(shù)和列數(shù)，本例中將單元格拆分成6列，如下圖所示：?jiǎn)卧癫鸱滞戤吅?，調(diào)整單元格的寬度，如下圖所示（2）在前五個(gè)單元格中分別輸入菜單選項(xiàng)的文字，使頁(yè)面具有菜單的初步效果，如下圖所示：（3）添加文字后，可以看出文字的顯示效果不是很美觀，因此需要對(duì)單元格的內(nèi)容設(shè)置相關(guān)的顯示樣式。設(shè)置單元格樣式，打開(kāi)DW浮動(dòng)面板——CSS——新建CSS規(guī)則，如下圖所示：?jiǎn)螕簟按_定”按鈕，然后設(shè)置具體的單元格樣式，如下圖所示：本例中單元格樣式設(shè)置如下：Td{Font-size:13px;Col