當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

讓你的頁面活躍起來

讓你的頁面活躍起來

更新時間：2020-02-17 文章作者：未知 信息來源：網絡 閱讀次數：次

網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。

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

　　* 菜單技術 

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

　　Macromedia 采用的是多頁技術。就是先做一個沒有展開項的主菜單的頁面，然后分別制作每一個主菜單項展開后的頁面，主菜單有多少項，就得做多少個子頁面與之相對應。下面我們舉個簡單的例子加以說明： 


　　<html> 

　　<head> 

　　<title>A menu example</title> 

　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

　　</head> 

　　<body bgcolor="#FFFFFF"> 

　　<a name="abc"></a><p> 

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

　　</body> 

　　</html> 

　　<html> 

　　<head> 

　　<title>A menu example</title> 

　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

　　</head> 

　　<body bgcolor="#FFFFFF"> 

　　<p><a name="abc"></a></p> 

　　<p><a href="menu_1.htm#abc"> 

　　<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> 

　　<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1"> 

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

　　 

　　<style TYPE="text/css"> 

　　.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> 

　　 

　　<script TYPE="text/javascript"> 

　　 

　　 function clikker(a,b) { 

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

　　 a.style.display = 'none'; 

　　 b.src='http://www.okasp.com/techinfo/usm.gif'; 

　　 } 

　　 else { 

　　 a.style.display='; 

　　 b.src='http://www.okasp.com/techinfo/http://www.okasp.com/techinfo/dsmh.gif'; 

　　 } 

　　 } 

　　</script> 

　　<div CLASS="NV1" ID="BB" onClick="clikker(BB1,BBp);"> 

　　 <dd><img ID="BBp" SRC="http://www.okasp.com/techinfo/http://www.okasp.com/techinfo/dsmh.gif" ALT="*" ALIGN="MIDDLE" BORDER="0" WIDTH="11" HEIGHT="11"> 

　　 Products & Services 

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

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

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

　　 <a >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> 

　　<style type="text/css"> 

　　 BODY { background: white; } 

　　 A:link { color: red } 

　　 A:visited { color: maroon } 

　　 A:active { color: fuchsia } 

　　 A:hover {color:blue} 

　　</style> 

　　</head> 

　　 

　　<body> 

　　<p><a href="www.microsoft.com"> 

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

　　</body> 

　　 

　　</html> 

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

　　第二種方法是利用 JavaScript編寫一個小腳本程序來運行，從而起到變色的目的。它的示例代碼如下。 

　　<html> 

　　<head> 

　　<title>Change text color</title> 

　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

　　 

　　<style type="text/css"> 

　　<!-- 

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

　　--> 

　　</style> 

　　 

　　<script language="JavaScript"> 

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

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

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

　　theObj.style != null)) 

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

　　} 

　　</script> 

　　</head> 

　　<body bgcolor="#FFFFFF"> 

　　<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> 

　　<body bgcolor=ffffff> 

　　<script> 

　　<!-- 

　　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.http://www.okasp.com/techinfo/home.gif"; 

　　 toc1off = new Image(42, 197); 

　　 toc1off.src = "http://www.okasp.com/techinfo/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=http://www.okasp.com/techinfo/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="http://www.okasp.com/images/button_who0.gif" NAME="who" 

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

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

　　HREF="who.html" TARGET="_parent" ONMOUSEOVER="img_act('who')" 

　　ONMOUSEOUT="img_inact('who')"></a></td> 

　　</tr> 

　　...... 

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

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

　�。ㄌ旖蚴兴E縣旅游局 301900 賈賀敬）

大多數人在上網的時候，都會瀏覽網頁提供給我們的信息。

溫馨提示：喜歡本站的話，請收藏一下本站！

本類教程下載

系統下載排行

亚洲嫩草影院久久精品