Dreamweaver輕松打造彈出窗口

一瓢若水 2012-03-12

展開全文

Dreamweaver輕松打造彈出窗口

http://www. 資料教程 2004-10-4 20:10:14

“如何制作彈出式窗口？”，這是Dreamweaver初學(xué)者經(jīng)常會問的問題。找個提供特效的網(wǎng)站，或是Down個特效工具粘貼一下代碼不就得了！還不容易。其實更容易的方法是使用我們最常用的Dreamweaver。一般的彈出式窗口，簡單地點幾下就可以完成。不信？來看看！只要按以下幾步操作，你就能輕松地做出彈出窗口效果。

1. 首先，從菜單欄中Window->Behaviors (窗口->行為)或直接按快捷鍵Shift+F3調(diào)出行為面板。

2. 如圖所示，按行為面板左上角的“+”號添加行為，在彈出的菜單中選擇“Open Browser Window（彈出瀏覽器窗口）”行為。

3. 選擇了行為以后，就會彈出Open Browser Window對話框，如圖所示。只要在對話框中填入相應(yīng)的窗口信息，按“確定”后就可以完成對彈出窗口的定制了。其中
“URL to Display”：為你想要在新窗口中顯示網(wǎng)頁的地址，你可以直接輸入地址，也可以按“Browse”按鈕指定。
“Window Width”與“Window Height”：分別為新窗口的寬和高，單位為px。
“Attributes”：為窗口的特性。“Navigation Toolbar”、“Menu Bar”、“Location Toolbar”、“Scrollbars as Needed”、“Status Bar”、“Resize Handles”分別代表工具欄、菜單欄、定位工具欄、滾動條以及更改大小手柄。選上相應(yīng)位置前的對勾，就代表新窗口中具有相應(yīng)的特性。
“Window Name”：為目標(biāo)窗口的名字?？梢噪S便起一個，也可以指定框架組內(nèi)某一窗口的名字。在制作彈出窗口時，名字隨便起一個就可以了。

完成了上面幾步之后，行為面板將會變成下面這個樣子，表示載入頁面（onLoad）的同時，打開一個新的瀏覽窗口。

實際上，在行為面板中添加行為的過程，就是Dreamweaver生成Javascript代碼的過程。上面的幾步中，生成了下列代碼。在下面以粗體顯示，“<!—”和“-->” 之間的為該部分代碼的注釋：
<html>

<head>

<!--

function MM_openBrWindow(theURL,winName,features) { //v2.0

window.open(theURL,winName,features);

}

//-->

</script><!—根據(jù)傳遞過來的值打開窗口 -->

</head>

彈出窗口效果

</body>

</html>

你可以這樣理解上面的代碼：當(dāng)onLoad事件激發(fā)時（即當(dāng)圖象或頁面結(jié)束載入時），調(diào)用MM_openBrWindow()方法，并將值“ yourpage.htm , winname , toolbar=yes,location=yes, status=yes,menubar=yes,scrollbars=yes, resizable=yes,width=300,height=200 ”(這里稱為實參)傳入對應(yīng)的形參――“theURL,winName,features”，供window.open()使用。注意，三個參數(shù)都要用單引號括起來。在這些代碼中，最關(guān)鍵的一句是：“window.open(theURL,winName,features)”。它的意思是在名為winName的窗口中，按 features的規(guī)定的特性打開 theURL地址上的頁面。

理解了代碼的意思后，我們可以知道代碼可以直接這樣寫：在<body>內(nèi)加入onLoad="window.open( yourpage.htm , winname , toolbar=yes, location=yes,status=yes,menubar=yes, scrollbars=yes,resizable=yes,width=300,height=200 )"一句。這種寫法與Dreamweaver
自動生成代碼的效果無異。

我們已經(jīng)知道window.open()內(nèi)三個參數(shù)的意思――第一個為所要顯示頁的地址，第二個為目標(biāo)窗口的名稱，第三個則為窗口的外觀特性的描述。第一、二個參數(shù)就不多講了，我們講一下第三個參數(shù)。對于第三個參數(shù)，我們可以這樣寫“ 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代表導(dǎo)航條，status為狀態(tài)欄，menubar為菜單欄，scrollbars為滾動條，resizable為更改大小手柄，而 width、height分別表示窗口的寬和高，left、top則表示窗口彈出的位置。toolbar, location, directories, status, menubar, scrollbars, resizable的值可設(shè)為yes、no、1或0，yes(1)表示新窗口具有該特性，no(0)則否。而width、height、left、top的值則應(yīng)以數(shù)字填入，單位為px。