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