網(wǎng)站建設(shè)是指使用標識語言(markup language),通過一系列設(shè)計、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸,最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。簡單來說,網(wǎng)頁設(shè)計的目的就是產(chǎn)生網(wǎng)站。簡單的信息如文字,圖片(GIF,JPEG,PNG)和表格,都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網(wǎng)站頁面上。 Dreamweaver(以下簡稱DW)提供了一種稱為“Behavior”(行為)的機制,幫助你構(gòu)建頁面中的交互行為。行為,就是在網(wǎng)頁中進行一系列動作,通過這些動作實現(xiàn)用戶與頁面的交互。利用DW的行為,你不需要書寫一行代碼,就可以實現(xiàn)豐富的動態(tài)頁面效果,達到用戶與頁面的交互。
一個行為是由事件和動作組成的。事件是動作被觸發(fā)的結(jié)果,而動作是用于完成特殊任務(wù)的預(yù)先編好的JavaScript代碼,諸如打開一個瀏覽器窗口,播放聲音等。
當對一個頁面元素使用行為時,你可以指定動作和所觸發(fā)的事件。在DW中已經(jīng)提供了一些確定的動作,你可以把它們應(yīng)用在頁面元素中。
一、內(nèi)置的一些基本行為
1.調(diào)用JavaScript(Call JavaScript) 這個行為允許你設(shè)置當某些事件被觸發(fā)時,調(diào)用相應(yīng)的JavaScript腳本,以實現(xiàn)相應(yīng)的動作。在這個行為設(shè)置時,你可以直接輸入JavaScript腳本或者函數(shù)。
2.改變屬性(Change Property) 這個行為允許你動態(tài)地改變對象屬性,比如圖像的大小、層的背景色等等。需要注意的是,這個行為的設(shè)置取決于瀏覽器的支持。
3.檢查瀏覽器(Check Brower) 不同瀏覽器的支持能力有一定的差異,利用這個行為,我們可以檢查瀏覽器的版本,以跳轉(zhuǎn)到不同的頁面。
4.檢查插件(Check Plugin) 有時候我們制作的頁面需要某些插件的支持,比如使用Flash制作的網(wǎng)頁,所以有必要對用戶瀏覽器的插件進行檢查,看看它是否安裝了指定的插件。這個行為就可以實現(xiàn)這一點。
5.控制Shockwave或者Flash(Control Shockwave or Flash) Shockwave和Flash是目前網(wǎng)頁制作經(jīng)常插入的對象,這個行為就是用于控制這些對象的。用它可以控制動畫的播放、停止、返回,還可以控制直接跳轉(zhuǎn)到第幾幀。
6.移動分層(Drag Layer) “移動分層”行為可以實現(xiàn)在頁面上分層的移動,甚至是分層內(nèi)容的移動。
7.跳轉(zhuǎn)到URL(Go To URL) 你可以制定當前瀏覽器窗口或者指定的框架窗口載入指定的頁面。
8.跳轉(zhuǎn)表單(Jump Menu) “跳轉(zhuǎn)表單”行為主要是用于編輯跳轉(zhuǎn)表單。
9.彈出信息對話框(Popup Message) 如果你要在頁面上顯示一個信息對話框,或者給用戶一個提示信息,就可以使用這個行為了。 r> 二、簡單實例
下面我們就以動態(tài)圖片為例,介紹一下行為的使用。首先你要制作兩張大小相同的圖片1和圖片2。下面是具體步驟。
1.打開DW創(chuàng)建一個頁面,在這個頁面中插入圖1。
2.在DW編輯窗口選擇好圖1。
3.在菜單“windows”中選擇“Behaviors”或者是按F8來打開Behavior面板。注意,在Events For的彈出式菜單中,“3.0 and Later Browsers”應(yīng)該被選擇。
4.按“+”號按鈕添加一個新的行為——“Swap Image”(變換圖片),這時會彈出“Swap Image”的對話框。在圖片列表中,你將看見在頁面中的所有圖片的列表,選中你要變換的圖片1,這是原始圖片,當鼠標指針移到它上面時,它將會被一張高亮顯示的圖片2所替代。
5.單擊Browse按鈕,選擇好你要替換的,通過“onMouseOver”事件,選擇的圖片2代替了原圖片1。
6.選擇默認設(shè)置進行圖片的預(yù)調(diào)用和存儲。
“Preload Images”選項表示在整個頁面下載時,把進行變換的圖片放進瀏覽器的緩存里,當瀏覽者第一次把鼠標指針移到Our Story圖片上時,他幾乎感覺不到高亮圖片的出現(xiàn)有什么延遲。“Restore Images onMouseOut”選項表示當“onMouseOut”(鼠標移開)事件發(fā)生時,自動地將圖片恢復(fù)原狀。 7.設(shè)置完成后點擊“OK”按鈕關(guān)閉“Swap Image“對話框,應(yīng)用剛才的設(shè)置。
這時Behavior面板包含了你剛才為圖片所設(shè)置的事件和動作。“OnMouseOver”事件旁有一個“Swap Image”動作的標記,在它上面還有“onMouseOut”事件以及相應(yīng)的“Swap Image Restore”的動作(該behavior是當你在Swap Image對話框中接受缺省的選項而被定義的)。
8.關(guān)閉Behavior面板。按F12預(yù)覽頁面。當你把鼠標指針分別移到圖片1上,你會發(fā)現(xiàn)已經(jīng)被圖片2所替代。
以上的例子只是DW的Behavior的一個簡單應(yīng)用實例。用途還有很多,這里就不作一一說明了。此外,DW還允許用戶使用擴展的行為,在Macromedia公司的主頁可以下載。大多數(shù)人在上網(wǎng)的時候,都會瀏覽網(wǎng)頁提供給我們的信息。
|