91高清一区,99久久精品国产成人一区二区

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

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

　　* 菜單技術(shù)

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

　　Macromedia 采用的是多頁技術(shù)。就是先做一個(gè)沒有展開項(xiàng)的主菜單的頁面，然后分別制作每一個(gè)主菜單項(xiàng)展開后的頁面，主菜單有多少項(xiàng)，就得做多少個(gè)子頁面與之相對(duì)應(yīng)。下面我們舉個(gè)簡(jiǎn)單的例子加以說明：

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

　　點(diǎn)擊圖1中的Click here!就會(huì)出現(xiàn)圖2的效果。具體實(shí)現(xiàn)時(shí)，一定要注意標(biāo)簽<a name=" ">的定義和使用，要做到一一對(duì)應(yīng)，否則就會(huì)亂套。另外，當(dāng)菜單項(xiàng)很多時(shí)，記住只有當(dāng)前列出的子菜單處用<a name=" ">來定義，別的主菜單項(xiàng)應(yīng)分別鏈接到它相應(yīng)展開的頁面去。

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

　　Microsoft采用的是DHTML技術(shù)。DHTML是比較新的技術(shù)，因此對(duì)于一些“古老”的瀏覽器來說，這種菜單實(shí)現(xiàn)方式就無能為力了。

　　我們還是舉個(gè)例子來說明一下。

　　如圖3，單擊 Product & Services 立刻就出現(xiàn)了下面的菜單，再點(diǎn)一下又隱去了，和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='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>

　　 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函數(shù)是控制菜單項(xiàng)顯示和隱藏的，其中變量a控制文字，變量b控制圖片（因下載不全，圖中未顯示）。在實(shí)際應(yīng)用時(shí)，請(qǐng)注意 div所定義的范圍，不要在點(diǎn)擊時(shí)把別的主菜單項(xiàng)也隱去了。

　　Microsoft的實(shí)現(xiàn)方式相對(duì)比較高明，它速度快，制作比較簡(jiǎn)單，只需要一個(gè)頁面就行了。不足之處是至少需要 IE 4.0或 NN 4.0以上版本的支持。

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

　　* 文字變色

　　這是Web上最常見的技術(shù)，當(dāng)你的鼠標(biāo)劃過某個(gè)元素時(shí)，該元素立刻改變顏色，有時(shí)還會(huì)發(fā)出聲音，就像多媒體教育軟件一樣。如果您的顏色調(diào)配得好，頁面就會(huì)非常令人喜愛。

　　實(shí)現(xiàn)文字變色的方法也有好多種，這里只簡(jiǎn)單地介紹其中的兩種。

　　第一種方法是單純使用CSS技術(shù)，目前還只有IE 4.0支持這種技術(shù)。它的示例代碼如下。

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

　　這是一個(gè)最簡(jiǎn)單的利用CSS技術(shù)控制文本顏色的例子.</a></p>

　　</body>

　　</html>

　　在這個(gè)示例中，鏈接文字起初用紅色顯示，當(dāng)鼠標(biāo)劃過文字時(shí)變?yōu)樗{(lán)色，點(diǎn)擊訪問時(shí)改為紫紅色，訪問之后又變?yōu)槔跎�。由于Netscape還不支持link、visited、hover等CSS屬性，因此，您要是用Communicator 的話，就看不到這些效果了。

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

　　<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 != null) && (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 對(duì)對(duì)象的控制機(jī)制不同，因此需要先檢查瀏覽器，然后再作相應(yīng)的處理。MM_changeProp()函數(shù)實(shí)現(xiàn)了這一種文本變色方法。這種方法需要在應(yīng)變色的每個(gè)地方都用span定義ID并添加onmouseover和onmouseout，這與第一種方法相比麻煩了不少。因此，您若不是對(duì)Microsoft很有意見的話，就用第一種方法為好。

　　* 動(dòng)態(tài)按鈕

　　這里的動(dòng)態(tài)按鈕既不是.gif動(dòng)畫，也不是FrontPage 中提供的各種特效按鈕。相信您一定遇到過這種情況：當(dāng)您的鼠標(biāo)劃過某一個(gè)按鈕時(shí)，它會(huì)忽然動(dòng)一下，似乎在誘惑您去點(diǎn)擊它，很有意思是嗎？下面我們來實(shí)現(xiàn)它。

　　首先您應(yīng)該準(zhǔn)備兩幅圖片，由于是按鈕，不必很大，顏色也不必太花，簡(jiǎn)單的.gif就行，兩幅圖要有一些差別，免得動(dòng)了以后看不出來。下面是我做的兩張圖片。

　　接下來讓我們來看看動(dòng)態(tài)效果是怎么實(shí)現(xiàn)的。其源代碼如下。

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

　　應(yīng)該注意的地方有兩處：

　　1.一定要給img賦一個(gè)名字，然后在源圖片定義處應(yīng)用這個(gè)名字。

　　2.注意源文件中的各種符號(hào)，特別是引號(hào)，還要注意源圖片文件的路徑，最好用相對(duì)路徑，以免站點(diǎn)上載后無法正常顯示。當(dāng)然，這種交換圖片的方式也需要4.0以上版本的瀏覽器的支持，如果您還在使用3.0版本的瀏覽器，就趕快升級(jí)吧！

　　* 提示的話

　　把鼠標(biāo)放到一幅圖片上就能出現(xiàn)提示信息，就像好多軟件的按鈕給出功能提示一樣。這一功能在網(wǎng)頁編輯中很容易實(shí)現(xiàn)，下面我們來看看其效果。

　　實(shí)現(xiàn)這種效果很容易，看看源代碼就明白了。

　　......

　　<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="周華健個(gè)人小檔案" 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>

　　......

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

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

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

大多數(shù)人在上網(wǎng)的時(shí)候，都會(huì)瀏覽網(wǎng)頁提供給我們的信息。

溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！

當(dāng)前位置:蘿卜系統(tǒng)下載站 > 網(wǎng)頁設(shè)計(jì)教程 > 詳細(xì)頁面

讓你的頁面活躍起來

本類教程下載

系統(tǒng)下載排行