“如何制作彈出式窗口?”,這是Dreamweaver初學者經常會問的問題。找個提供特效的網站,或是Down個特效工具粘貼一下代碼不就得了!還不容易。其實更容易的方法是使用我們最常用的Dreamweaver。一般的彈出式窗口,簡單地點幾下就可以完成。不信?來看看!只要按以下幾步操作,你就能輕松地做出彈出窗口效果。
1. 首先,從菜單欄中Window->Behaviors (窗口->行為)或直接按快捷鍵Shift+F3調出行為面板。
2. 如圖所示,按行為面板左上角的“+”號添加行為,在彈出的菜單中選擇“Open Browser Window(彈出瀏覽器窗口)”行為。
3. 選擇了行為以后,就會彈出Open Browser Window對話框,如圖所示。只要在對話框中填入相應的窗口信息,按“確定”后就可以完成對彈出窗口的定制了。其中
“URL to Display”:為你想要在新窗口中顯示網頁的地址,你可以直接輸入地址,也可以按“Browse”按鈕指定。
“Window Width”與“Window Height”:分別為新窗口的寬和高,單位為px。
“Attributes”:為窗口的特性。“Navigation Toolbar”、“Menu Bar”、“Location Toolbar”、“Scrollbars as Needed”、“Status Bar”、“Resize Handles”分別代表工具欄、菜單欄、定位工具欄、滾動條以及更改大小手柄。選上相應位置前的對勾,就代表新窗口中具有相應的特性。
“Window Name”:為目標窗口的名字。可以隨便起一個,也可以指定框架組內某一窗口的名字。在制作彈出窗口時,名字隨便起一個就可以了。
完成了上面幾步之后,行為面板將會變成下面這個樣子,表示載入頁面(onLoad)的同時,打開一個新的瀏覽窗口。
實際上,在行為面板中添加行為的過程,就是Dreamweaver生成Javascript代碼的過程。上面的幾步中,生成了下列代碼。在下面以粗體顯示,“<!—”和“-->” 之間的為該部分代碼的注釋:
<html>
<head>
<title>無標題文檔</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script><!—根據傳遞過來的值打開窗口 -->
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_openBrWindow('yourpage.htm', 'winname','toolbar=yes,location=yes,status=yes, menubar=yes,scrollbars=yes,resizable=yes,width=300,height=200')"> <!—設置彈出窗口的各個屬性的值,并將值傳遞到各對應形參,并設置激發事件為onLoad-->
彈出窗口效果
</body>
</html>
你可以這樣理解上面的代碼:當onLoad事件激發時(即當圖象或頁面結束載入時),調用MM_openBrWindow()方法,并將值“'yourpage.htm', 'winname', 'toolbar=yes,location=yes, status=yes,menubar=yes,scrollbars=yes, resizable=yes,width=300,height=200'”(這里稱為實參)傳入對應的形參――“theURL,winName,features”,供window.open()使用。注意,三個參數都要用單引號括起來。在這些代碼中,最關鍵的一句是:“window.open(theURL,winName,features)”。它的意思是在名為winName的窗口中,按 features的規定的特性打開 theURL地址上的頁面。
理解了代碼的意思后,我們可以知道代碼可以直接這樣寫:在<body>內加入onLoad="window.open('yourpage.htm', 'winname','toolbar=yes, location=yes,status=yes,menubar=yes, scrollbars=yes,resizable=yes,width=300,height=200')"一句。這種寫法與Dreamweaver自動生成代碼的效果無異。
我們已經知道window.open()內三個參數的意思――第一個為所要顯示頁的地址,第二個為目標窗口的名稱,第三個則為窗口的外觀特性的描述。第一、二個參數就不多講了,我們講一下第三個參數。對于第三個參數,我們可以這樣寫“'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no, width=300, height=200,left=100, top=100'”在這里toolbar代表工具欄,location代表地址欄,directories代表導航條,status為狀態欄,menubar為菜單欄,scrollbars為滾動條,resizable為更改大小手柄,而 width、height分別表示窗口的寬和高,left、top則表示窗口彈出的位置。toolbar, location, directories, status, menubar, scrollbars, resizable的值可設為yes、no、1或0,yes(1)表示新窗口具有該特性,no(0)則否。而width、height、left、top的值則應以數字填入,單位為px。
講了這么多,你理解了嗎?在Dreamweaver中添加行為,制作彈出窗口是不是很簡單啊?手寫代碼也不是很難嘛!只要你再稍加實踐,在很短的時間內,你就會感覺到:原來做彈出窗口,是這么簡單的!