初中九年級信息技術(shù)用行為功能制作動感網(wǎng)頁

用“行為”功能制作動感網(wǎng)頁

Dreamweaver中的“行為”實際上就是預(yù)置的一些JavaScript程序，添加“行為”的過程就是用一種所見即所得的方式在網(wǎng)頁中插入這些JavaScript腳本程序。因此，輕松制作出漂亮的交互網(wǎng)頁成為可能。所謂下拉式菜單，就是指網(wǎng)頁中排列著一排導(dǎo)航菜單欄，當(dāng)鼠標(biāo)移到其中一個菜單項時，在該菜單項下就會出現(xiàn)相應(yīng)的子菜單，這樣不但生動了網(wǎng)頁，而且節(jié)省了有限空間，使網(wǎng)頁充滿新意。這種動態(tài)菜單的應(yīng)用很靈活，只要你發(fā)揮自己的想象力，便可以創(chuàng)作出更精彩的效果。一、制作下拉式菜單1.制作網(wǎng)頁導(dǎo)航菜單欄做一做制作以下內(nèi)容的表格：這部分的內(nèi)容使用了從上到下的3個連續(xù)表格，第1個表格放置網(wǎng)站導(dǎo)航欄，中間的表格放置網(wǎng)頁的Logo圖片，第3個表格放置本網(wǎng)頁導(dǎo)航菜單欄的主菜單項。第一步：新建一個空白頁面，在文檔窗口的“標(biāo)題”欄中輸入文字“晉陽書屋”，以“bookhouse.htm”為文件名保存頁面。第二步：選擇“窗口”→“CSS樣式”菜單命令，彈出“CSS樣式”面板，分別創(chuàng)建body和td兩個HTML標(biāo)簽樣式，設(shè)置body樣式字體大小為12pixels；td樣式字體大小為12pixels，顏色為#FFFFFF。第三步：移動光標(biāo)到頁面的適當(dāng)位置，單擊“對象”面板中的“插入表格”按鈕，在頁面中插入一個1×2的表格，設(shè)置其屬性如圖所示，在表格中輸入網(wǎng)站的導(dǎo)航文字。操作步驟第四步：在第一個表格的下面插入一個1×2的表格，移動光標(biāo)到新表格中，在兩個單元格中分別插入網(wǎng)頁的Logo圖片和動畫。第五步：在下面插入一個1×3的表格，設(shè)置表格背景色為#336666，在第1、3個單元格中分別插入一幅圖片，在第2個單元格中插入一個1×9的表格，設(shè)置表格寬度為100%，并在表格中輸入菜單欄導(dǎo)航文字，結(jié)果如圖所示。這部分內(nèi)容主要是使用表格和表格的嵌套來制作網(wǎng)頁的Logo標(biāo)志以及下拉菜單的主菜單。使用表格布局網(wǎng)頁時，外層的表格一般固定寬度，這樣可以使制作的網(wǎng)頁在不同分辨率的瀏覽器下都可以看到相同的效果，而嵌在內(nèi)部的表格則使用相對寬度，如設(shè)置為100%寬度可以使子表格充滿整個表格。說明2.制作下拉式菜單在每個主菜單項的下面，還需要有子菜單項，即下拉式菜單。做一做使用層制作主菜單項的子菜單。第一步：選擇“窗口”→“CSS樣式”菜單命令，打開“CSS樣式”面板，單擊面板右下角的“新建CSS樣式”按鈕，彈出如圖所示的“新建CSS樣式”對話框。第二步：在“名稱”框中輸入“.popmenu”，單擊“確定”按鈕，彈出如圖所示的“.popmenu的CSS樣式定義”對話框。操作步驟第三步：在“分類”列表框中選擇“擴展”選項，在“過濾器”下拉列表框中選擇Alpha過濾器。單擊“過濾器”右邊的文本框，使文本光標(biāo)停放在文本框中，輸入過濾器參數(shù)Opacity=70，刪除后邊的其他參數(shù)。第四步：在“分類”列表框中選擇“背景”選項，把“背景顏色”設(shè)置為#0000FF，單擊“確定”按鈕。第五步：單擊“對象”面板中的“描繪層”按鈕，在頁面中插入一個層，取層的名稱為“menu1”。第六步：選擇該層，單擊“CSS樣式”面板中的.popmenu樣式名稱，對該層使用.popmenu樣式。第七步：移動光標(biāo)到menu1層中，插入一個3×1的表格，設(shè)置表格的長度、寬度均為100%，并輸入如圖所示的文字。第八步：重復(fù)第五至第七步的操作，依次插入menu2~menu9共8個層，輸入相應(yīng)的文字，并移動層到如圖所示的合適位置。第九步：選擇“窗口”→“層”菜單命令，彈出如圖所示的“層”面板。第十步：單擊所有層左邊的眼睛圖標(biāo)，使所有的層隱藏起來。第十一步：選擇“窗口”→“CSS樣式”菜單命令，彈出“CSS樣式”面板。第十二步：單擊面板右下角的“新建樣式”按鈕，創(chuàng)建超鏈接的CSS樣式，a:link設(shè)置字體為白色，無修飾；a:hover設(shè)置字體為紅色，有下畫線。第十三步：給所有的菜單項添加超鏈接。本小節(jié)是制作下拉式菜單，每個下拉式菜單通過在一個層中插入表格來實現(xiàn)。在創(chuàng)建.popmenu樣式時，我們使用了CSS樣式的透明過濾器效果，這樣制作的下拉式菜單具有透明效果，使網(wǎng)頁更具特色。

CSS的過濾器可以使由樣式控制的對象產(chǎn)生特殊的效果，比如模糊、反轉(zhuǎn)、透明等。這些效果只能在IE3.0以上版本的瀏覽器中才可以看到。關(guān)于CSS過濾器的屬性、語法以及參數(shù)請參考其他有關(guān)書籍。說明3.給下拉式菜單添加“行為”怎樣使菜單“動”起來呢？這需要給每個主菜單項增加適當(dāng)?shù)摹靶袨椤?，再利用層可以隱藏、顯示的特性，一個真正的菜單就制作完成了。做一做給下拉菜單添加“行為”。第一步：選擇“窗口”→“行為”菜單命令，彈出如圖所示的“行為”面板。第二步：選中表格中的“散文詩歌”文字，單擊“行為”面板中的按鈕，在彈出的快捷菜單中選擇“顯示-隱藏層”命令，彈出如圖所示的“顯示-隱藏層”對話框。操作步驟第三步：選中層“menu1”，單擊“顯示”按鈕，使該層顯示。第四步：依次選中menu2~menu9層，單擊“隱藏”按鈕，使這些層隱藏，單擊“確定”按鈕，完成一個事件的創(chuàng)建。第五步：單擊“行為”面板中的下三角按鈕，在彈出的事件選擇菜單中選擇“onMouseOver”事件，設(shè)置觸發(fā)“顯示-隱藏層”的事件為onMouseOver。第六步：重復(fù)第二至第五步驟，再創(chuàng)建一個onMouseOut事件來觸發(fā)“顯示-隱藏層”動作，使所有的層全部隱藏，如圖

所示。第七步：選中層“menu1”，單擊“行為”面板中的“添加事件”按鈕，添加一個通過“onMouseOut”事件觸發(fā)的“顯示-隱藏層”動作，該動作使層“menu1”隱藏。第八步：再添加一個通過“onMouseOver”事件觸發(fā)的“顯示-隱藏層”動作，該動作使層“menu1”顯示。第九步：按F12鍵，顯示如圖所示的預(yù)覽效果。第十步：重復(fù)第二至第六步的操作，給每個下拉菜單的主菜單項和代表下拉菜單的層增加“onMouseOut”和“onMouseOver”行為。第一，動作是系統(tǒng)先編制好的一些JavaScript腳本程序，用來執(zhí)行指定的任務(wù)。例如，打開瀏覽器、顯示-隱藏層、改變對象屬性等，用戶可以直接調(diào)用這些動作而不必再編寫任何代碼。如果你也精通JavaScript，還可以自己編寫新動作并使之保存在“行為”工具欄中的動作列表中。另外，Dreamweaver還可以使用第三方編寫和提供的插件，充分利用這些插件可以使你的網(wǎng)頁更具有迷人的魅力。說明第二，事件是由瀏覽器為每個頁面元素定義的，由用戶或瀏覽器觸發(fā)產(chǎn)生。例如，on-MouseOver、onMouseOut和onClick等，它們在大多數(shù)瀏覽器中與鏈接相關(guān)聯(lián)，以下是常見的幾個事件的介紹：

onMouseOver：當(dāng)鼠標(biāo)指針從指定元素之外移動到指定元素之上時即可觸發(fā)該事件。

onMouseOut：當(dāng)鼠標(biāo)指針從指定元素移出時即可觸發(fā)該事件。

onClick：當(dāng)用戶單擊指定元素時即可觸發(fā)該事件。

onLoad：當(dāng)圖像或頁面完成載入時即可觸發(fā)該事件。第三，行為是事件和動作的組合，相關(guān)聯(lián)的事件和動作共同構(gòu)成了行為。例如，將鼠標(biāo)移至頁面中某一對象時，就會有音樂播放出來，這就是行為的一種具體形式，移動鼠標(biāo)到對象上是一個事件，播放音樂是動作，把兩者關(guān)聯(lián)起來就構(gòu)成了行為。第四，用戶必須將行為附加到網(wǎng)頁對象上。例如，可以附加給整個文檔（body部分），也可以附加給鏈接、圖像、表單等對象或任何其他頁面元素。只要瀏覽器支持該行為，就會顯示在菜單欄中。給“晉陽書屋”添加“播放聲音”的行為，使瀏覽者在訪問該網(wǎng)頁時可以聽歌輕松、愉快的背景音樂。練一練二、給狀態(tài)欄添加文字做一做使用行為在網(wǎng)頁的狀態(tài)欄中顯示頁面提示性文字。第一步：選擇“標(biāo)簽選擇器”中左邊第一個{body}標(biāo)簽來選中整個頁面。第二步：按Shift+F3組合鍵，打開“行為”面板，單擊按鈕，在彈出的菜單中選擇“設(shè)置文本”→“設(shè)置狀態(tài)條文本”命令，彈出如圖所示的“設(shè)置狀態(tài)條文本”對話框。第三步：在“信息”框中輸入希望顯示的文字，單擊“確定”按鈕，按F12鍵，預(yù)覽網(wǎng)頁的效果，如圖所示。操作步驟由于瀏覽器的狀態(tài)欄能容納的信息比較少，所以文本框中的文字信息一定要簡短，否則瀏覽器會自動截去超過文字框范圍的內(nèi)容。說明我們經(jīng)常會遇到這樣的情況：在打開一個頁面時，同時又彈出了另一個小窗口。三、制作能自動打開的頁面做一做使用“行為”功能來制作這樣的效果。第一步：事先制作好一個如圖所示的“通知”頁面，保存文件。取文件名為“message.htm”。第二步：打開“晉陽書屋”網(wǎng)頁，單擊“標(biāo)簽選擇器”中左邊第1個{body}標(biāo)簽，選擇整個頁面。第三步：單擊“微型啟動面板”中的“顯示行為”按鈕，打開“行為”面板。第四步：單擊“行為”面板中的按鈕，在彈出的快捷菜單中選擇“打開瀏覽器窗口”命令，彈出如圖所示的“打開瀏覽器窗口”對話框。操作步驟第五步：在“要顯示的URL：”框中輸入要自動彈出的窗口的文件名，設(shè)定彈出窗口的大小，還可以