如果你覺(jué)得這樣看有點(diǎn)難也可以按運(yùn)行代碼觀看 -------------------------------------------------------------------------------- http://www.sina.com.cn 2001/06/19 16:29 賽迪網(wǎng) 牛云飛 　　制作彈出式窗口 　　有許多網(wǎng)頁(yè)在打開的時(shí)候，會(huì)彈出一個(gè)較小的窗口，顯示廣告或一些最新信息。這種彈出式窗口制作很簡(jiǎn)單，只要在網(wǎng)頁(yè)代碼的〈body〉標(biāo)簽后面插入類似代碼即可： 　　〈script language=″javascript″〉 　　window.open(′url′,′窗口名′,′屬性列表′); 　　〈/script〉 　　其中“url”是在窗口中顯示的html文檔的地址；“窗口名”可任意起一個(gè)，但不要用中文；“屬性列表”是一個(gè)用逗號(hào)分開的各個(gè)屬性值的字符串，它確定了彈出窗口的外觀與狀態(tài)。常用屬性有： 　　toolbar（是否顯示工具欄 ）、location（是否顯示地址欄）、directories（是否顯示常用鏈接）、status（是否顯示狀態(tài)欄）、menubar（是否顯示選單條）、scrollbars（是否使用滾動(dòng)條）、resizable（是否可改變大?。?，這些屬性值等于1時(shí)表示是，等于0或不將此屬性加入列表時(shí)表示否。此外，還有width（窗口寬）、height（窗口高）、top（與屏幕上邊的距離）、left（與屏幕左邊的距離）等屬性用于對(duì)彈出窗口大小和位置的控制。 　　例子：要制作一個(gè)只有地址欄、無(wú)滾動(dòng)條、可改變大小、高100像素、寬300像素、初始位置為距屏幕上邊與左邊都為100像素的彈出窗口，并在其中顯示當(dāng)前目錄下hello.htm的內(nèi)容，則要將上面的代碼中間的一段改為：“window.open(′hello.htm′,′window1′,′location=1,scrollbars=0,resizable=1,height=100,width=300,top=100,left=100′);”。 　　制作“關(guān)閉窗口”、“前進(jìn)”、“后退”鏈接 　　“關(guān)閉窗口”、“前進(jìn)”、“后退”這些瀏覽器本身具備的功能，也可通過(guò)頁(yè)面中的超級(jí)鏈接來(lái)實(shí)現(xiàn)。 　　在frontpage中，選擇要鏈接的文字或圖像，按ctrl－k 打開“create hyperlink（創(chuàng)建超級(jí)鏈接）”對(duì)話框，在“url”中輸入“javascript:window.close()”可制作關(guān)閉當(dāng)前瀏覽器窗口鏈接；輸入“javascript:history.forward()”可制作“前進(jìn)”鏈接，功能相當(dāng)于瀏覽器上的“前進(jìn)”按鈕；輸入“javascript:history.back()”可制作“后退”鏈接，功能相當(dāng)于瀏覽器上的“后退”按鈕。這些鏈接對(duì)于沒(méi)有選單、沒(méi)有按鈕的彈出式窗口會(huì)非常有用。 　　制作具有鏈接功能的下拉式選單 　　在frontpage 中，使用“insert（插入）”〉“form field（表單域）”〉“drop－down menu（下拉選單）”命令插入一個(gè)下拉選單。右鍵單擊它，在快捷選單中選“form field properties（表單域?qū)傩裕保诖蜷_的對(duì)話框中按“add...（添加...）”按鈕打開“add choice（添加選項(xiàng)）”對(duì)話框，在“choice（選項(xiàng)）”中輸入要在下拉選單中顯示的文本描述，點(diǎn)擊“指定值”前的復(fù)選框使該項(xiàng)有效，在它下邊的文本框中輸入相應(yīng)的完整url地址，然后確定。繼續(xù)添加其它選單選項(xiàng)，完成后確定。 　　在表單中任意位置擊右鍵，在快捷選單中選“form properties（表單屬性）”，在彈出的對(duì)話框中選擇“send to other（發(fā)送到其它）”。 　　點(diǎn)擊frontpage 界面左下角的“html”標(biāo)簽進(jìn)入源代碼狀態(tài)，尋找剛才制作的下拉式選擇框所對(duì)應(yīng)的代碼，在〈select〉標(biāo)簽中加入這樣一段代碼：onchange=″location.href=this.options[this.selectedindex].value″。 　　用frontpage可視化編輯樣式表 　　你一定見(jiàn)過(guò)許多主頁(yè)上有這樣的鏈接，它并不像普通鏈接總是帶下劃線，當(dāng)鼠標(biāo)指上去時(shí)，鏈接文字就會(huì)變色并出現(xiàn)下劃線，這都是樣式表的功勞！ 　　用frontpage打開要編輯的html文件，使用選單命令“format(格式)”〉“stylesheet...(樣式...)”打開“format stylesheet(樣式格式)”對(duì)話框，這里顯示了當(dāng)前文件內(nèi)聯(lián)樣式表的內(nèi)容，你可以在〈!－－...－－〉 之間添加或修改樣式表語(yǔ)句。如果要添加新的樣式語(yǔ)句，首先要輸入標(biāo)簽(如：a:link、a:hover、a:active、a:visited 它們分別表示：正常情況下未訪問(wèn)過(guò)的、鼠標(biāo)接近時(shí)、鼠標(biāo)點(diǎn)擊時(shí)、訪問(wèn)過(guò)的鏈接的樣式)。然后，把光標(biāo)停在這個(gè)標(biāo)簽?zāi)┪玻c(diǎn)擊對(duì)話框左下角的“style...(樣式...)”按鈕，進(jìn)入“style(樣式)”對(duì)話框，在這里你可以跟據(jù)需要設(shè)置多種樣式屬性。如果要更改某個(gè)標(biāo)簽的樣式，只要光標(biāo)停在相應(yīng)標(biāo)簽后面的一對(duì)大括號(hào)中代碼的任意位置，然后按“style...(樣式...)”按鈕進(jìn)行修改即可。 　　例子：你希望鼠標(biāo)移動(dòng)到鏈接上時(shí)，文字背景變?yōu)辄S色，文字本身變?yōu)榧t色且無(wú)下劃線。先在〈!－－...－－〉之間輸入a:hover，然后把光標(biāo)停在它末尾，按“style...（樣式...）”按鈕進(jìn)入“style（樣式）”對(duì)話框，在“colors（顏色）”頁(yè)中設(shè)置“foreground color（前景顏色）”為紅色，“background color（背景顏色）”為黃色，在“text（文本）”頁(yè)中設(shè)置“decoration（修飾）”為“none（無(wú)）”，然后確定。這時(shí)，frontpage已將代碼{ background－color: rgb(0,0,128); color: rgb(255,255,255); text－decoration: none }添加到a:hover標(biāo)簽后面，是不是比自已編容易得多？ 　　制作鼠標(biāo)指針指在上面時(shí)會(huì)變化的動(dòng)態(tài)按鈕 　　在frontpage中通過(guò)選單命令：“insert（插入）”〉“active elements（active單元）”〉“hover botton（動(dòng)態(tài)按鈕）”，可以制作動(dòng)態(tài)效果的按鈕。但是，這種按鈕效果是基于java applet 小程序的，它有速度慢、不能顯示提示文本、鼠標(biāo)指針不能變?yōu)槭中蔚热秉c(diǎn)。這里介紹用dreamweaver 2.0 制作基于javascript的動(dòng)態(tài)按鈕的方法。 　　在制作這種按鈕效果之前，首先要為每個(gè)按鈕制作兩張不同的圖片，一張是正常情況下要顯示的圖片，另一張是鼠標(biāo)指針停留在按鈕上時(shí)要顯示的圖片。圖片命名時(shí)最好有規(guī)律，比如兩張圖片名分別是botton.gif 、botton_1.gif。 　　首先在frontpage中插入第一張圖片，并設(shè)好超級(jí)鏈接，文件保存后用dreamweaver調(diào)入（如果熟悉dreamweaver，可以不要frontpage“幫忙”）。單擊已插入的第一張圖片選中它，點(diǎn)擊“behaviors (行為)”窗口（如果未顯示，按f8顯示它）中的＋號(hào)按鈕，在選單中選“swip image（交換圖片）”打開對(duì)話框，按“browse（瀏覽）”按鈕選擇第二張圖片，最后點(diǎn)“ok”確定。這樣，一個(gè)動(dòng)態(tài)效果按鈕就做成了，簡(jiǎn)單吧。（責(zé)任編輯 Ray )