用FrongPage設計網頁花樣

2024-09-12 15:14:24

字體：大中小

來源：轉載

供稿：網友

    技術在進步，思維在發展，網頁上的花樣當然也要一天天地趕時髦了。在“滾動字符”、“跑馬燈”已成平常的今天，網頁上還能變出新花樣嗎？

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

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

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

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

◆用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標簽后面，是不是比自已編容易得多？

◆制作彈出式窗口

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

〈script language=″javascript″〉

window．open（′url′，′窗口名′，′屬性列表′）；

〈／script〉

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

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

上一篇：認識FrontPage 2002擴充插件之五

下一篇：如何在FrontPage中插入Flash動畫？