用行為豐富網(wǎng)頁(yè)效果

行為可以說(shuō)是Dreamweaver MX 2004中最有特色的功能，它可以讓你不用書(shū)寫(xiě)一行JavaScript代碼即可實(shí)現(xiàn)多種動(dòng)態(tài)網(wǎng)頁(yè)效果。行為的關(guān)鍵在于Dreamweaver MX 2004中提供了很多動(dòng)作，其實(shí)就是標(biāo)準(zhǔn)的JavaScript程序，每個(gè)動(dòng)作可以完成特定的任務(wù)。這樣，如果你所需要的功能在這些動(dòng)作中，那么就不要自己編寫(xiě)JavaScript程序了。


　　彈出消息框


　　如果希望別人進(jìn)入網(wǎng)站首頁(yè)的時(shí)候可以看見(jiàn)一個(gè)彈出的消息框來(lái)顯示一些內(nèi)容，則可以通過(guò)下述方法實(shí)現(xiàn)。

　　第一步 在Dreamweaver MX 2004主窗口中新建一個(gè)頁(yè)面，接著運(yùn)行“Windows→Behaviors”命令激活行為面板。

　　第二步 在行為面板中點(diǎn)擊“+”按鈕，并且從彈出菜單中選取“Popup Message”命令，這時(shí)可以看見(jiàn)圖1所示的窗口，在其中可以輸入諸如“歡迎光臨中國(guó)電腦教育報(bào)網(wǎng)站！”之類的提示信息。

圖01
　　第三步 添加好提示文字之后，控制面板中就多出一個(gè)名為“Popup Message”的行為，此時(shí)還要點(diǎn)擊左部的下拉菜單，并且從中選擇“onLoad”一項(xiàng)，這樣當(dāng)別人進(jìn)入頁(yè)面之后就會(huì)自動(dòng)執(zhí)行設(shè)置的行為，自然也就能夠看見(jiàn)彈出的消息框了。

　　提示：從下拉菜單中還可以選擇“onKeyDown”、“onMouseDown”之類的行為，使得按下鍵盤或者點(diǎn)擊鼠標(biāo)之后出現(xiàn)消息框。


　　鏈接解釋文字


　　在瀏覽一些網(wǎng)頁(yè)的時(shí)候，將鼠標(biāo)放在圖像或者鏈接上會(huì)有解釋文字出現(xiàn)，實(shí)現(xiàn)這種效果可以通過(guò)下述步驟實(shí)現(xiàn)。

　　第一步 先在Dreamweaver MX 2004的編輯窗口中插入一幅圖像，單擊這幅圖像之后在屬性面板的鏈接輸入框內(nèi)填寫(xiě)“#”號(hào)讓它鏈接本頁(yè)。

　　第二步 通過(guò)“Insert→Layer Objects→Layer”命令在圖像旁邊添加一個(gè)層，并且輸入需要顯示的話。選擇這個(gè)層之后，在屬性面板中將“Vis”屬性設(shè)置為“hiddend”來(lái)隱藏該層（如圖2）。

圖02
　第三步 選擇圖像之后，通過(guò)“Windows→Behaviors”命令激活行為面板，單擊“+”按鈕并選擇“Show-Hide Layers”一項(xiàng)。在彈出的窗口中選取需要顯示的層，接著點(diǎn)擊下部的“Show”按鈕，這樣確認(rèn)之后就可以在行為面板中多出了一個(gè)名為onMouseOver的事件。此時(shí)點(diǎn)擊“+”按鈕并擊選擇“OnMouseOver”一項(xiàng)，這樣當(dāng)鼠標(biāo)放在圖像上就可以顯示該層，也就是可以出現(xiàn)浮動(dòng)的文字解釋了。

　　第四步 接著參照第三步為剛才的層添加“Hide”事件，并且將行為設(shè)置為“OnMouseOut”，這樣鼠標(biāo)拿開(kāi)時(shí)就可以隱藏該層了。

　　完成上述操作之后，按下“F12”按鈕即可打開(kāi)IE瀏覽器進(jìn)行預(yù)覽，當(dāng)鼠標(biāo)移動(dòng)到這個(gè)圖片上的時(shí)候會(huì)出現(xiàn)預(yù)先設(shè)置好的提示字樣，而鼠標(biāo)移開(kāi)圖片時(shí)字樣自動(dòng)隱藏。


　　自動(dòng)調(diào)整窗口大小


　　有些網(wǎng)頁(yè)在改變窗口大小的時(shí)候也會(huì)隨之調(diào)整網(wǎng)頁(yè)頁(yè)面大小，因此窗口過(guò)大就不會(huì)有空白處，窗口過(guò)小邊緣就不會(huì)跑出移動(dòng)條，對(duì)于這種自動(dòng)調(diào)整頁(yè)面大小的功能，在Dreamweaver MX 2004中可以參照下述步驟來(lái)很容易的實(shí)現(xiàn)。

　　第一步 新建一個(gè)頁(yè)面，然后通過(guò)“Insert→Table”命令插入一個(gè)一行三列的表格，此時(shí)可以先不管它的寬度，而是通過(guò)下述設(shè)置讓它自動(dòng)伸展適合瀏覽器窗口。

　　第二步 這時(shí)可以看見(jiàn)每個(gè)單元格下部都標(biāo)明了寬度且有一個(gè)小三角形（如圖3）。在這個(gè)表格中，可以設(shè)定哪部分是需要固定的，不過(guò)只能讓一列自動(dòng)伸展，比如此處我們?cè)O(shè)定最后一列隨著窗口大小的變化自動(dòng)伸展。

圖03
　　第三步 選中最后一列，運(yùn)行“View→Table Mode→Layout Mode”命令，并且在彈出的菜單中選擇“Make Column Autostrach”一項(xiàng)（如圖4）。

圖04
　　第四步 接著將出現(xiàn)對(duì)話框，并且會(huì)提示為了能夠使行伸展，Dreamweaver需要放置一些間隔圖片在其它列中，在此選擇“Create a spacer image file”一項(xiàng)，這樣圖片在瀏覽器窗口不會(huì)顯示出來(lái)，而是起著固定表格的作用。

　　第五步 確認(rèn)之后返回原先的編輯窗口，可以看見(jiàn)最后一列已經(jīng)自動(dòng)伸展填充了整個(gè)瀏覽器窗口，而另外兩列則保持著固定的寬度。

　　提示：設(shè)定自動(dòng)伸展的列可以在列上端看見(jiàn)一個(gè)波浪線。

　　完成上述操作之后，在IE瀏覽器中預(yù)覽頁(yè)面效果的時(shí)候，如果改變窗口的大小，則最后一列的寬度也會(huì)隨之變化，而前兩列的寬度維持不變，這樣就可以實(shí)現(xiàn)自動(dòng)調(diào)整窗口大小了。

　　上文介紹的僅僅是Dreamweaver MX 2004中行為功能的一些方法，靈活地把行為和圖層結(jié)合運(yùn)用還可以實(shí)現(xiàn)諸如動(dòng)態(tài)圖片、可拖拽的圖層等等功能，讓你的主頁(yè)看起來(lái)更加豐富多彩！