讓你的網頁活躍起來

作者：Eve Cole 更新時間：2009-06-20 17:01:07

W3C組織( www.w3c.org )定義的新的HTML 4.0規範為每個網頁設計者帶來了更強大的工具，這是一項影響所有網頁開發者和設計者的變化，許多在過去想都不敢想的動態效果，如今借助於DHTML和CSS可以輕易地實現，這裡就網頁編制過程中一些效果的實現加以詳述，希望您能夠藉以活躍一下您的網頁。

* 選單技術

造訪過Microsoft和Macromedia網站的人如果細心的話，一定會注意到其中的選單技術，點擊一下出現子選單，再點一下隱去子選單，很是有趣和實用。筆者分別下載了這兩個頁面，在對源碼進行分析之後，發現他們用的並不是同一種方法，而且兩種方法各有利弊，下面讓我們來看一下他們都是如何實現的。

Macromedia 採用的是多頁技術。就是先做一個沒有展開項的主選單的頁面，然後分別製作每一個主選單項目展開後的頁面，主選單有多少項，就得做多少個子頁面與之相對應。下面我們舉個簡單的例子來說明：

<html>

<head>

<title>A menu example</title>

</head>

<a href="menu_2.htm#abc"><b>Click here!</b></a>

</body>

</html >

<html>

<head>

<title>A menu example</title>

</head>

<b>Click here!</b></a > </p>

list 1

list 2

list 3

</body>

</html>

點選圖1中的Click here!就會出現圖2的效果。具體實現時，一定要注意標籤<a name=" ">的定義與使用，要做到一一對應，否則就會亂套。另外，當選單項目很多時，記住只有目前列出的子選單處用<a name=" ">來定義，別的主選單項目應分別連結到它對應展開的頁面去。

這種方法實現得很簡單，一般人很快就能掌握，而且任何瀏覽器均可支持，但它的缺點也是明顯的。首先是慢，來回調用各個頁面必然帶來長時間的等待，只有頁面上都是文字時，才感覺不到停滯；再就是編制困難，雖然技術簡單，但是一個一個地製作實在是有點麻煩。因此，這種技術還是有一定的限制的。

Microsoft採用的是DHTML技術。 DHTML是比較新的技術，因此對於一些「古老」的瀏覽器來說，這種選單實作方式就無能為力了。

我們還是舉個例子來說明一下。

如圖3，點選Product & Services 立刻就出現了下面的選單，再點一下又隱去了，和Macromedia的一樣，不同的是彷彿快了許多，它的原始碼如下。

<html>

<head>

<title>Welcome to Microsoft's Homepage</title>

.NV1 {font-family:Arial;font-weight:bold;font-size:.9em;cursor:hand;margin-top:10;text-indent: -14;margin -left: 14;}

.NV2 {position:relative;font-size:.9em;font-weight:normal;}

</style>

</head>

<body>

function clikker(a,b) {

if (a.style.display ==') {

a.style.display = 'none';

b.src='usm.gif';

}

else {

a.style.display=' ;

b.src='dsmh.gif';

}

</script>

Products & Services

<div CLASS="NV2" ID="BB1" STYLE ="display:';"

onclick="window.event.cancelBubble = true;">

<a HREF="/products/"><p>Product Catalog</a>

<a HREF=" http://support.microsoft.com/support/">Technical Support</a>

<a HREF="/events/">Events & Seminars</a>

<a HREF="/train_cert/">Training & Certification</a>

<a HREF="/referral/sr_default.asp">Referrals to 3rd Parties</a> </p>

</div>

</dd>

</div>

</body>

</html>

在原始程式碼中，.NV1和.NV2 是CSS字體定義，clikker函數是控制選單項目顯示和隱藏的，其中變數a控製文字，變數b控制圖片（因下載不全，圖中未顯示）。在實際應用時，請注意div所定義的範圍，不要在點擊時把別的主選單項目也隱去了。

Microsoft的實作方式相對比較高明，它速度快，製作比較簡單，只需要一個頁面就行了。缺點是至少需要IE 4.0或NN 4.0以上版本的支援。

兩種方法各有利弊，您到底選用哪一種，這要看您的主頁性質和對瀏覽器的支援情況。

* 文字變色

這是Web上最常見的技術，當你的滑鼠劃過某個元素時，該元素立刻改變顏色，有時還會發出聲音，就像多媒體教育軟體一樣。如果您的顏色調配得好，頁面就會非常令人喜愛。

實作文字變色的方法也有好多種，這裡只簡單介紹其中的兩種。

第一種方法是單純使用CSS技術，目前只有IE 4.0支援這種技術。它的範例程式碼如下。

<html>

<head>

<title>A study of population dynamics</title>

BODY { background: white; }

A:link { color: red }

A:visited { color: maroon }

A: active { color: fuchsia }

A:hover {color:blue}

</style>

</head>

<body>

這是一個最簡單的利用CSS技術控製文字顏色的例子.</a></p>

</body>

</html>

在這個範例中，連結文字起初用紅色顯示，當滑鼠劃過文字時變為藍色，點擊訪問時改為紫紅色，訪問之後又變為栗色。由於Netscape還不支援link、visited、hover等CSS屬性，因此，您要是用Communicator 的話，就看不到這些效果了。

第二種方法是利用JavaScript編寫一個小腳本程式來執行，以達到變色的目的。它的範例程式碼如下。

<html>

<head>

<title>Change text color</title>

<!--

.css1 { font-family: "Courier New", Courier, mono; font-size: 14pt; font-style: normal; line-height: normal; font- weight: bold; color: blue}

-->

</style>

function MM_changeProp(objStrNS,objStrIE,theProp,theValue) {

var theObj = eval((navigator.appName == 'Netscape')?objStrNS:objStrIE); if ((theObj == 'Netscape')?objStrNS:objStrIE);

if ((theObj == 'Netscape')&&&! (theProp.indexOf("style.") != 0 &&

theObj.style != null))

eval(((navigator.appName == 'Netscape')?objStrNS:objStrIE)+'.'+theProp + '=" '+theValue+'"');

}

</script>

</head>

<span class="css1" ID="x"

onmouseover="MM_changeProp(','document.all[ 'x']','style.color','red','SPAN')" onmouseout="MM_changeProp(','document.all['x']','style.color',' blue','SPAN')">

改變文字顏色.</span>

</body>

</html>

由於IE 4.0 和NN 4.0 對物件的控制機制不同，因此需要先檢查瀏覽器，然後再作對應的處理。 MM_changeProp()函數實作了這一種文字變色方法。這種方法需要在應變色的每個地方都用span定義ID並添加onmouseover和onmouseout，這與第一種方法相比麻煩了不少。因此，您若不是對Microsoft很有意見的話，就用第一種方法為好。

* 動態按鈕

這裡的動態按鈕既不是.gif動畫，也不是FrontPage 中提供的各種特效按鈕。相信您一定遇到過這種情況：當您的滑鼠劃過某一個按鈕時，它會忽然動一下，似乎在誘惑您去點擊它，很有意思是嗎？下面我們來實現它。

首先您應該準備兩幅圖片，由於是按鈕，不必很大，顏色也不必太花，簡單的.gif就行，兩幅圖要有一些差別，免得動了以後看不出來。下面是我做的兩張圖片。

接下來讓我們來看看動態效果是怎麼達成的。其原始碼如下。

<html>

<head>

<title>Push-In Buttons</title>

</head>

<!--

versionButton = 1

browserName = navigator.appName;

browserVer = parseInt(navigator.appVersion );

if ( browserVer >= 3)

versionButton = "3";

if (versionButton == "3")

{

toc1on = new Image(42, 197);

toc1on.src = "on.home.gif";

toc1off = new Image(42, 197);

toc1off.src = "home.gif";

}

function img_act(imgName)

{

if (versionButton == "3")

{

imgOn = eval(imgName + "on.src");

document [imgName].src = imgOn;

}

function img_inact(imgName)

{

if (versionButton == "3")

{

imgOff = eval(imgName + "off.src");

document [imgName].src = imgOff;

}

// -->

</script>

< a href=http://www.microsoft.com

onMouseover = "img_act('toc1')"

onMouseout = "img_inact('toc1')"><img src=home.gif

width=100 height=50 border=0 name ="toc1"></a>

</body>

</html>

應該注意的地方有兩處：

1.一定要給img賦一個名字，然後在來源圖片定義處套用這個名字。

2.注意來源檔案中的各種符號，特別是引號，也要注意來源圖片檔案的路徑，最好用相對路徑，以免站點上載後無法正常顯示。當然，這種交換圖片的方式也需要4.0以上版本的瀏覽器的支持，如果您還在使用3.0版本的瀏覽器，就趕快升級吧！

* 提示的話

把滑鼠放到一幅圖片上就能出現提示訊息，就像好多軟體的按鈕給出功能提示一樣。這項功能在網頁編輯中很容易實現，下面我們來看看其效果。

要實現這種效果很容易，看看原始碼就明白了。

....

<tr>

<td WIDTH="57"><a HREF="who.html" TARGET="main"

ONMOUSEOVER="img_act('who')"

ONMOUSEOUT="img_inact('who') "><img

SRC="../images/button_who0.gif" NAME="who"

title="週華健個人小檔案" ALT="我是誰"

BORDER="0" WIDTH="113" HEIGHT="45 "></a>

</a></td>

< /tr>

......

程式碼中加底線的部分就是實現它的方法。 Title這一屬性很有用吧！它可用於除了BASE、BASEFONT、HEAD、HTML、META、PARAM、SCRIPT、STYLE、TITLE以外的所有元素中，以定義滑鼠劃過時的提示資訊。

以上我們就網頁編製過程中的一些小技巧進行了詳細的討論。 Web上有許多設計精美、技術先進的頁面，分析它們的原始碼是很好的學習途徑。電腦科技不斷進步，面對這些紛至沓來的新科技：DHTML、CSS、XML......我們只有迎難而上去掌握它，並把它應用到我們的網頁上，使我們的網頁更加活躍起來。

（天津市薊縣旅遊局301900 賈賀敬）