熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> Javascript >> 正文

為網頁添加特效

2013-11-23 17:56:12  來源: Javascript 

  制作彈出式窗口有許多網頁在打開的時候會彈出一個較小的窗口顯示廣告或一些最新信息這種彈出式窗口制作很簡單只要在網頁代碼的〈body〉標簽後面插入類似代碼即可<script language=″javascript″> windowopen(′url′′窗口名′′屬性列表′)</script>其中url是在窗口中顯示的html文檔的地址窗口名可任意起一個但不要用中文屬性列表是一個用逗號分開的各個屬性值的字符串它確定了彈出窗口的外觀與狀態常用屬性有toolbar(是否顯示工具欄)location(是否顯示地址欄)directories(是否顯示常用鏈接)status(是否顯示狀態欄)menubar(是否顯示選單條)scrollbars(是否使用滾動條)resizable(是否可改變大小)這些屬性值等於時表示是等於或不將此屬性加入列表時表示否此外還有width(窗口寬)height(窗口高)top(與屏幕上邊的距離)left(與屏幕左邊的距離)等屬性用於對彈出窗口大小和位置的控制

  例子要制作一個只有地址欄無滾動條可改變大小像素像素初始位置為距屏幕上邊與左邊都為像素的彈出窗口並在其中顯示當前目錄下的內容則要將上面的代碼中間的一段改為windowopen(′′′window′location=scrollbars=resizable=height=width=top=left=′)

  制作關閉窗口前進後退鏈接關閉窗口前進後退這些浏覽器本身具備的功能也可通過頁面中的超級鏈接來實現

  在frontpage中選擇要鏈接的文字或圖像按ctrl-k 打開create hyperlink(創建超級鏈接)對話框url中輸入javascriptwindowclose()可制作關閉當前浏覽器窗口鏈接輸入javascripthistoryforward()可制作前進鏈接功能相當於浏覽器上的前進按鈕輸入javascripthistoryback()可制作後退鏈接功能相當於浏覽器上的後退按鈕這些鏈接對於沒有選單沒有按鈕的彈出式窗口會非常有用

  制作具有鏈接功能的下拉式選單在frontpage 中使用insert(插入)form field(表單域)drop-down menu(下拉選單)命令插入一個下拉選單右鍵單擊它在快捷選單中選form field properties(表單域屬性)在打開的對話框中按add……(添加……)按鈕打開add choice(添加選項)對話框choice(選項)中輸入要在下拉選單中顯示的文本描述點擊指定值前的復選框使該項有效在它下邊的文本框中輸入相應的完整url地址然後確定繼續添加其它選單選項完成後確定

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

  點擊frontpage 界面左下角的html標簽進入源代碼狀態尋找剛才制作的下拉式選擇框所對應的代碼在〈select〉標簽中加入這樣一段代碼onchange=″locationhref=thisoptions[thisselectedindex]value″

  用frontpage可視化編輯樣式表你一定見過許多主頁上有這樣的鏈接它並不像普通鏈接總是帶下劃線當鼠標指上去時鏈接文字就會變色並出現下劃線這都是樣式表的功勞!

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

  例子你希望鼠標移動到鏈接上時文字背景變為黃色文字本身變為紅色且無下劃線先在〈!——……——〉之間輸入ahover然後把光標停在它末尾style……(樣式……)按鈕進入style(樣式)對話框colors(顏色)頁中設置foreground color(前景顏色)為紅色background color(背景顏色)為黃色text(文本)頁中設置decoration(修飾)none(無)然後確定這時frontpage已將代碼{ background-color rgb( color rgb( text-decoration none }添加到ahover標簽後面是不是比自已編容易得多?

  制作鼠標指針指在上面時會變化的動態按鈕在frontpage中通過選單命令insert(插入)active elements(active單元)hover botton(動態按鈕)可以制作動態效果的按鈕但是這種按鈕效果是基於java applet 小程序的它有速度慢不能顯示提示文本鼠標指針不能變為手形等缺點這裡介紹用dreamweaver 制作基於javascript的動態按鈕的方法

  在制作這種按鈕效果之前首先要為每個按鈕制作兩張不同的圖片一張是正常情況下要顯示的圖片另一張是鼠標指針停留在按鈕上時要顯示的圖片圖片命名時最好有規律比如兩張圖片名分別是bottongif botton_gif首先在frontpage中插入第一張圖片並設好超級鏈接文件保存後用dreamweaver調入(如果熟悉dreamweaver可以不要frontpage幫忙單擊已插入的第一張圖片選中它點擊behaviors (行為)窗口(如果未顯示按f顯示它)中的+號按鈕在選單中選swip image(交換圖片)打開對話框browse(浏覽)按鈕選擇第二張圖片最後點ok確定這樣一個動態效果按鈕就做成了簡單吧


From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25382.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.