JavaScript為你的網頁添油加醋

制作彈出式窗口

　　有許多網頁在打開的時候，會彈出一個較小的窗口，顯示廣告或一些最新信息。這種彈出式窗口制作很簡單，只要在網頁代碼的〈body〉標簽后面插入類似代碼即可：

　　〈script language=″javascript″〉

　　window.open(′url′,′窗口名′,′屬性列表′);

　　〈/script〉

　　其中“url”是在窗口中顯示的html文檔的地址；“窗口名”可任意起一個，但不要用中文；“屬性列表”是一個用逗號分開的各個屬性值的字符串，它確定了彈出窗口的外觀與狀態。常用屬性有：

　　toolbar（是否顯示工具欄

<TABLE border=0 cellSpacing=0 cellPadding=0 align=right>

</TR></TBODY></TABLE>）、location（是否顯示地址欄）、directories（是否顯示常用鏈接）、status（是否顯示狀態欄）、menubar（是否顯示選單條）、scrollbars（是否使用滾動條）、resizable（是否可改變大小），這些屬性值等于1時表示是，等于0或不將此屬性加入列表時表示否。此外，還有width（窗口寬）、height（窗口高）、top（與屏幕上邊的距離）、left（與屏幕左邊的距離）等屬性用于對彈出窗口大小和位置的控制。

　　例子：要制作一個只有地址欄、無滾動條、可改變大小、高100像素、寬300像素、初始位置為距屏幕上邊與左邊都為100像素的彈出窗口，并在其中顯示當前目錄下hello.htm的內容，則要將上面的代碼中間的一段改為：“window.open(′hello.htm′,′window1′,′location=1,scrollbars=0,resizable=1,height=100,width=300,top=100,left=100′);”。

　　制作“關閉窗口”、“前進”、“后退”鏈接

　　“關閉窗口”、“前進”、“后退”這些瀏覽器本身具備的功能，也可通過頁面中的超級鏈接來實現。

　　在frontpage中，選擇要鏈接的文字或圖像，按ctrl－k 打開“create hyperlink（創建超級鏈接）”對話框，在“url”中輸入“javascript:window.close()”可制作關閉當前瀏覽器窗口鏈接；輸入“javascript:history.forward()”可制作“前進”鏈接，功能相當于瀏覽器上的“前進”按鈕；輸入“javascript:history.back()”可制作“后退”鏈接，功能相當于瀏覽器上的“后退”按鈕。這些鏈接對于沒有選單、沒有按鈕的彈出式窗口會非常有用。

　　制作具有鏈接功能的下拉式選單

　　在frontpage 中，使用“insert（插入）”〉“form field（表單域）”〉“drop－down menu（下拉選單）”命令插入一個下拉選單。右鍵單擊它，在快捷選單中選“form field properties（表單域屬性）”，在打開的對話框中按“add...（添加...）”按鈕打開“add choice（添加選項）”對話框，在“choice（選項）”中輸入要在下拉選單中顯示的文本描述，點擊“指定值”前的復選框使該項有效，在它下邊的文本框中輸入相應的完整url地址，然后確定。繼續添加其它選單選項，完成后確定。

　　在表單中任意位置擊右鍵，在快捷選單中選“form properties（表單屬性）”，在彈出的對話框中選擇“send to other（發送到其它）”。

　　點擊frontpage 界面左下角的“html”標簽進入源代碼狀態，尋找剛才制作的下拉式選擇框所對應的代碼，在〈select〉標簽中加入這樣一段代碼：onchange=″location.href=this.options[this.selectedindex].value″。

　　用frontpage可視化編輯樣式表

　　你一定見過許多主頁上有這樣的鏈接，它并不像普通鏈接總是帶下劃線，當鼠標指上去時，鏈接文字就會變色并出現下劃線，這都是樣式表的功勞！

　　用frontpage打開要編輯的html文件，使用選單命令“format(格式)”〉“stylesheet...(樣式...)”打開“format stylesheet(樣式格式)”對話框，這里顯示了當前文件內聯樣式表的內容，你可以在〈!－－...－－〉 之間添加或修改樣式表語句。如果要添加新的樣式語句，首先要輸入標簽(如：a:link、a:hover、a:active、a:visited 它們分別表示：正常情況下未訪問過的、鼠標接近時、鼠標點擊時、訪問過的鏈接的樣式)。然后，把光標停在這個標簽末尾，點擊對話框左下角的“style...(樣式...)”按鈕，進入“style(樣式)”對話框，在這里你可以跟據需要設置多種樣式屬性。如果要更改某個標簽的樣式，只要光標停在相應標簽后面的一對大括號中代碼的任意位置，然后按“style...(樣式...)”按鈕進行修改即可。

　　例子：你希望鼠標移動到鏈接上時，文字背景變為黃色，文字本身變為紅色且無下劃線。先在〈!－－...－－〉之間輸入a:hover，然后把光標停在它末尾，按“style...（樣式...）”按鈕進入“style（樣式）”對話框，在“colors（顏色）”頁中設置“foreground color（前景顏色）”為紅色，“background color（背景顏色）”為黃色，在“text（文本）”頁中設置“decoration（修飾）”為“none（無）”，然后確定。這時，frontpage已將代碼{ background－color: rgb(0,0,128); color: rgb(255,255,255); text－decoration: none }添加到a:hover標簽后面，是不是比自已編容易得多？

　　制作鼠標指針指在上面時會變化的動態按鈕

　　在frontpage中通過選單命令：“insert（插入）”〉“active elements（active單元）”〉“hover botton（動態按鈕）”，可以制作動態效果的按鈕。但是，這種按鈕效果是基于java applet 小程序的，它有速度慢、不能顯示提示文本、鼠標指針不能變為手形等缺點。這里介紹用dreamweaver 2.0 制作基于javascript的動態按鈕的方法。

　　在制作這種按鈕效果之前，首先要為每個按鈕制作兩張不同的圖片，一張是正常情況下要顯示的圖片，另一張是鼠標指針停留在按鈕上時要顯示的圖片。圖片命名時最好有規律，比如兩張圖片名分別是botton.gif 、botton_1.gif。

　　首先在frontpage中插入第一張圖片，并設好超級鏈接，文件保存后用dreamweaver調入（如果熟悉dreamweaver，可以不要frontpage“幫忙”）。單擊已插入的第一張圖片選中它，點擊“behaviors (行為)”窗口（如果未顯示，按f8顯示它）中的＋號按鈕，在選單中選“swip image（交換圖片）”打開對話框，按“browse（瀏覽）”按鈕選擇第二張圖片，最后點“ok”確定。這樣，一個動態效果按鈕就做成了，簡單吧!