第一步  
  
　　將下列JavaScript代碼放在頁面的頭部。  
  
　　  
  
　　<SCRIPT LANGUAGE="JavaScript">  
  
　　<!--  
  
　　  
  
　　function makearray(n) {  
  
　　 this.length = n;  
  
　　 for(var i = 1; i <= n; i++)  
  
　　 this[i] = 0;  
  
　　 return this;  
  
　　}  
  
　　  
  
　　hexa = new makearray(16);  
  
　　for(var i = 0; i < 10; i++) hexa[i] = i;  
  
　　hexa[10]="a"; hexa[11]="b"; hexa[12]="c";  
  
　　hexa[13]="d"; hexa[14]="e"; hexa[15]="f";  
  
　　  
  
　　function hex(i) {  
  
　　 if (i < 0)  
  
　　 return "00";  
  
　　 else if (i > 255)  
  
　　 return "ff";  
  
　　 else  
  
　　 return "" + hexa[Math.floor(i/16)] + hexa[i%16];  
  
　　}  
  
　　  
  
　　function setbgColor(r, g, b) {  
  
　　 var hr = hex(r); var hg = hex(g); var hb = hex(b);  
  
　　 document.bgColor = "#"+hr+hg+hb;  
  
　　}  
  
　　  
  
　　function fade(sr, sg, sb, er, eg, eb, step) {  
  
　　 for(var i = 0; i <= step; i++) {  
  
　　 setbgColor(  
  
　　 Math.floor(sr ((step-i)/step) + er (i/step)),  
  
　　 Math.floor(sg ((step-i)/step) + eg (i/step)),  
  
　　 Math.floor(sb ((step-i)/step) + eb (i/step)));  
  
　　 }  
  
　　}  
  
　　  
  
　　fade(0,0,0,255,255,255,150);  
  
　　  
  
　　// -->  
  
　　</SCRIPT>  
  
　　  
  
　　第二步  
  
　　創(chuàng)建自己的顏色模式時(shí)，只需調(diào)整上述代碼最后一行中的參數(shù)：  
  
　　  
  
　　 fade(0,0,0,255,255,255,150);  
  
　　  
  
　　這七個(gè)參數(shù)的作用如下：前三個(gè)參數(shù)用三種原色——紅，綠，藍(lán)——表示變化開始時(shí)的顏色，緊接著的三個(gè)參數(shù)用同樣的方法表示變化結(jié)束時(shí)的RGB顏色。最后一個(gè)參數(shù)表示顏色的變化從開始到結(jié)束要經(jīng)過多少步，這個(gè)數(shù)字越高，淡入淡出的時(shí)間越長，顏色的變化也越緩慢。上述這一行中的參數(shù)表示某頁面的顏色從黑色(0,0,0)變?yōu)榘咨?255,255,255)要經(jīng)過150步方可完成。  
  
　　  
  
　　只需輕輕一按  
  
　　這個(gè)技巧向你展示如何避免由于頁面中存在過多由JavaScript產(chǎn)生的按鈕所造成的混亂。你可以將一系列鏈接放在一個(gè)可滾動(dòng)的列表框中，這樣就可以用一個(gè)簡潔的界面來代替一長串諸如<OL>、<UL>、<BR>之類的標(biāo)記。通常訪問者在選擇一個(gè)鏈接后，點(diǎn)擊Go按鈕即可進(jìn)入所選擇的頁面。  
  
　　 你也可以去掉點(diǎn)擊Go按鈕這一步，讓訪問者一選中鏈接就馬上進(jìn)入新頁面：  
  
　　  
  
　　第一步  
  
　　將下面的代碼放入你要顯示的可滾動(dòng)列表框的頁面中：  
  
　　 <FORM name="QuickIndex" >  
  
　　  
  
　　<SELECT size=5 name="URL"  
  
　　 onChange="if(options[selectedIndex].value)  
  
　　 window.location.href=  
  
　　 (options[selectedIndex].value)">  
  
　　  
  
　　<OPTION value="ss01.html">Fade in, fade out</OPTION>  
  
　　<OPTION value="ss02.html">Click 'n' go</OPTION>  
  
　　<OPTION value="ss03.html">Timing your splash page</OPTION>  
  
　　<OPTION value="ss04.html">Easy includes for everyone</OPTION>  
  
　　<OPTION value="ss05.html">Super ninja mailtos</OPTION>  
  
　　<OPTION value="ss06.html">Home sweet home page</OPTION>  
  
　　<OPTION value="ss07.html">Slick slide show</OPTION>  
  
　　<OPTION value="ss08.html">Add a watermark</OPTION>  
  
　　<OPTION value="ss09.html">Search me</OPTION>  
  
　　</SELECT>  
  
　　  
  
　　<NOSCRIPT>  
  
　　<INPUT type=submit value="Go">  
  
　　</NOSCRIPT>  
  
　　</FORM>  
  
　　  
  
　　第二步  
  
　　 上面例子中<OPTION>標(biāo)記的value屬性表示可選擇的鏈接。將value的值及其后的文本換成自己的內(nèi)容就行了。可以根據(jù)需要使用任意多個(gè)<OPTION>標(biāo)記。  
  
　　  
  
　　第三步  
  
　　 千萬別忘了上述代碼的<NOSCRIPT>項(xiàng)。由于一些老版本的瀏覽器不支持JavaScript增強(qiáng)了功能的列表，使用<NOSCRIPT>就可以給使用這種瀏覽器的用戶訪問您的站點(diǎn)的按鈕。如果你在我們下邊的實(shí)例中的網(wǎng)站看到這個(gè)按鈕，說明你的瀏覽器不支持JavaScript（如果你用的是Navigator 2.0，那也看不到這個(gè)按鈕，因?yàn)樗�連<NOSCRTPT>都不支持）。注意，要使Go按鈕有效，還須有一個(gè)能處理這種表格的CGI程序。  
  
　　為了給頁面節(jié)省出更多的空間，你可以將這種列表框變?yōu)橹徽家恍械南吕�列表框，為此，去掉上述代碼<SELECT>標(biāo)記中的size=5。將第一個(gè)<OPTION>標(biāo)記的value屬性賦為空值（value=""），用它作為說明，選中它時(shí)并不起作用。如  
  
　　<OPTION value="">Go to page:</OPTION>。  
  
　　  
  
　　封面頁的定時(shí)方法  
  
　　你也許想通過封面頁表現(xiàn)一些特別的東西，比如說公司的的股票上市了、孩子的生日等。同時(shí)你還要確保訪問者能進(jìn)入真正的主頁。為什么非要讓訪問者自己進(jìn)入主頁呢？最好的做法是在進(jìn)入封面頁后一定時(shí)間自動(dòng)進(jìn)入主頁。  
  
　　  
  
　　第一步  
  
　　在頁面的頭域中寫入下面一行：  
  
　　 <META http-equiv="refresh" content="10; URL=index.html">  
  
　　  
  
　　第二步  
  
　　可以根據(jù)你的需要來調(diào)整封面頁停留的時(shí)間。在這個(gè)例子中，我們把它設(shè)為10秒（就是上述代碼中的10），這個(gè)時(shí)間只是一個(gè)近似值。可以根據(jù)網(wǎng)頁上的內(nèi)容來調(diào)整這個(gè)時(shí)間間隔，原則是能確保訪問者有足夠的時(shí)間來閱讀網(wǎng)頁。最讓人感到氣憤的是，還沒把網(wǎng)頁內(nèi)容看完它就進(jìn)入下一頁了。  
  
　　這里還有一個(gè)問題，使用meta 標(biāo)記刷新時(shí),時(shí)間是從頁面開始下載算起的。如果用戶線路速度較慢或網(wǎng)絡(luò)發(fā)生阻塞，可能還沒等頁面全部下載就進(jìn)入下一頁了。為了避免上述現(xiàn)象，可以去掉<META>標(biāo)記，而在體<BODY>域中用如下語句代替：  
  
　　  
  
　　onload=setTimeout("location.href='index.html'",10000)  
  
　　  
  
　　onload的事件句柄在頁面結(jié)束下載才被激活。與使用meta標(biāo)記刷新不同，onLoad接受的參數(shù)單位是毫秒，而不是秒。這種方法只能在支持JavaScript的瀏覽器上正常工作。為了支持早期的瀏覽器，同時(shí)考慮meta標(biāo)記刷新方法可能造成的超時(shí)操作，應(yīng)該在封面頁中提供一個(gè)進(jìn)入下一頁的鏈接以備不測。還要注意的是，網(wǎng)站的起始頁應(yīng)有一個(gè)缺省的文件名，當(dāng)用戶訪問網(wǎng)站時(shí)就自動(dòng)下載這一頁，例如index.html或homepage.html。如果要先顯示一個(gè)臨時(shí)的封面頁，就必須把封面頁的名字改為缺省的起始頁名字，而把主頁改為其他名字。 在啟用或禁止封面頁時(shí)要特別注意這一點(diǎn)。  
  
　　  
  
　　在所有頁面中包含特定信息  
  
　　如果你有一個(gè)出售干酪的站點(diǎn)，那一定希望盡可能多地發(fā)布廣告信息。就像下面這樣的廣告:“如果您對干酪有興趣，請快快訪問――huckie 在線干酪公司，我們可以提供符合您口味的各式各樣的干酪，我們是干酪在線超市”。  
  
　　如果想在所有的頁面發(fā)布這條廣告，并不需要將它拷貝下來再粘貼到每個(gè)頁面上；要想同時(shí)改變所有頁面上的這條消息，也不必對它再進(jìn)行拷貝和粘貼。  
  
　　應(yīng)該怎么做呢？用Server-side includes(SSI)，這是解決這種站點(diǎn)維護(hù)問題的最佳方案。要是站點(diǎn)上的每一頁都有一個(gè)標(biāo)準(zhǔn)的導(dǎo)航條，干脆就把它做成一個(gè)SSI, 這樣當(dāng)改變結(jié)構(gòu)或增加選項(xiàng)時(shí)，就只需改動(dòng)一個(gè)文件。如果您已有鏈接的JavaScript或DHTML文件，將其設(shè)置為SSI方式，這樣一來訪問者在訪問時(shí)只需在服務(wù)器上下載一次該頁面。  
  
　　和樣式表一樣，SSI最大的好處在于，當(dāng)你要做一些改動(dòng)時(shí)只需改變一個(gè)包含文件，該變化就會(huì)在所有的頁面同步。  
  
　　下面介紹SSI的工作原理。當(dāng)服務(wù)器讀取HTML文件時(shí)，發(fā)現(xiàn)有插入標(biāo)志就插入一段其他代碼。然后服務(wù)器整理所有代碼，形成最終的文件。所有這些都在幕后執(zhí)行，訪問者感覺不到。  
  
　　下面就是如何實(shí)現(xiàn)SSI。  
  
　　第一步  
  
　　確保你站點(diǎn)的服務(wù)器的配置支持SSI。  
  
　　如果你的站點(diǎn)建在ISP上，則可以從ISP管理員處確認(rèn)該ISP是否支持SSI。如果不支持，則可以要求它支持SSI。  
  
　　如果你有自己的服務(wù)器，可以參考NCSA 的HTTP SSI 文檔(http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html)。  
  
　　  
  
　　第二步  
  
　　創(chuàng)建一個(gè)存放包含(Include)文件的目錄。  
  
　　第三步  
  
　　創(chuàng)建包含文件。我們的例子使用的是chess_text.html。注意不要加入開始符和結(jié)束符，只要?jiǎng)?chuàng)建要包含的HTML文本就可以了。  
  
　　  
  
　　第四步  
  
　　在頁面的HTML文件中插入如下代碼 。這段代碼將告訴服務(wù)器將從何處得到包含文件：  
  
　　<!--#include virtual="/Includes/cheese_text.html"-->  
  
　　  
  
　　然后把你希望出現(xiàn)在各網(wǎng)頁上的文字（如第一段引號(hào)中的文字）寫入一個(gè)單獨(dú)的文件即可。  
  
　　  
  
　　超級(jí)Mailto  
  
　　Mailto 能讓訪問者方便地向網(wǎng)站提供反饋或聯(lián)系信息。除了自動(dòng)產(chǎn)生一個(gè)email消息外，你還可以使用mailto做許多其他事情。超級(jí)Mailto能自動(dòng)填寫抄送和密件抄送，甚至能自動(dòng)填充主題行。下面介紹如何定制mailto功能。  
  
　　基本的mailto實(shí)現(xiàn)方法：  
  
　　 <A href="mailto:person@buider.com">  
  
　　 Click here to send a boring old mailto message</a>  
  
　　當(dāng)訪問者點(diǎn)擊這個(gè)鏈接時(shí)，會(huì)調(diào)用他們客戶端的email程序，并在收件人框中自動(dòng)填上收件人的地址。下面，我們將分以下幾步介紹如何增加mailto的功能。  
  
　　  
  
　　 第一步  
  
　　創(chuàng)建一個(gè)基本的mailto，包含收件人的地址。  
  
　　  
  
　　 第二步  
  
　　 在收件人地址后用“?cc=”開頭，你可以填寫抄送(CC地址，下面這個(gè)例子將實(shí)現(xiàn)該功能：  
  
　　<A href=mailto:person@builder.com?cc=second_person@builder.com>  
  
　　 Click here to send an email message to multiple recipients</a>.  
  
　　  
  
　　 第三步  
  
　　就像下面這個(gè)例子一樣，緊跟著抄送地址之后，寫上"&bcc=",就可以填上密件抄送(BCC)地址了 （在添加這些功能時(shí)，第一個(gè)功能以"a?"開頭，后面的以"&"開頭）。  
  
　　  
  
　　<A href="mailto:person@builder.com?cc=second_person@builder.com&bcc=third_person@builder.com">  
  
　　Click here to send an email message to multiple recipients (only some of which you know about)</a>.  
  
　　  
  
　　還可以把收件人、抄送、密件抄送人的多個(gè)地址用逗號(hào)分開：  
  
　　<A href="mailto:person@builder.com, second_person@builder.com">  
  
　　Click here to send an email message to multiple comma-delimited recipients.</a>  
  
　　  
  
　　第四步  
  
　　在第一步和第二步之后就可以用&subject=填上主題了，下面給出實(shí)現(xiàn)所有功能的例子（包括收件人，抄送，密件抄送和主題）。  
  
　　 <a href="mailto:person@builder.com?cc=second_person@builder.com&bcc=third_person@builder.com&subject=This is only a test">Click here to send us super ninja email</a>.  
  
　　  
  
　　  
  
　　  
  
　　將自己的主頁設(shè)置為缺省主頁  
  
　　Microsoft和Netscape 都將各自瀏覽器的缺省主頁設(shè)為自己的站點(diǎn)，這有助于它們的網(wǎng)站獲得更多的訪問者。但是為什么只有它們能這樣做而占盡風(fēng)光呢？為什么不讓人們在第一次啟動(dòng)瀏覽器時(shí)，進(jìn)入你自己的站點(diǎn)呢？其實(shí)你可以很輕松地讓訪問者把缺省的主頁改為你的頁面。  
  
　　 如果訪問者使用的是IE瀏覽器，那么改變他的主頁設(shè)置很簡單。對于使用Netscape Navigator的訪問者就不同了，就連我的Navigator在使用基于Java的設(shè)置方法時(shí)也老產(chǎn)生 運(yùn)行時(shí)錯(cuò)誤（我用的是最新版本）。唯一可靠的方法就是讓使用Netscape的用戶在Preference菜單中手工調(diào)整缺省主頁的設(shè)置。  
  
　　 因?yàn)楝F(xiàn)在有幾乎半數(shù)的網(wǎng)上沖浪者都使用IE，因此這個(gè)技巧對你的站點(diǎn)仍然很有用。下面就是具體實(shí)現(xiàn)步驟。  
  
　　  
  
　　 第一步  
  
　　 在一個(gè)空文本文件中，貼入如下字符：  
  
　　 REGEDIT4  
  
　　  
  
　　 [ HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]  
  
　　"Start Page" ="http://yoururl.com/"  
  
　　  
  
　　 第二步  
  
　　將這個(gè)文件存為default.reg，并把它放在你的Web服務(wù)器上的任何一個(gè)目錄下，因?yàn)檫@個(gè)文件只是供訪問者下載的。  
  
　　  
  
　　 第三步  
  
　　在你的主頁中加入一行文本，如“Make PC Computing your home page!”，將它的鏈接指向default.reg文件：  
  
　　  
  
　　 <a href="default.reg">Make PC Computing your home page!</a>  
  
　　  
  
　　要確保該鏈接指向default.reg所在目錄。  
  
　　  
  
　　 第四步  
  
　　 加入一些文本用來說明點(diǎn)擊這個(gè)鏈接后訪問者還該做些什么。點(diǎn)擊后IE會(huì)提示他們?nèi)绾翁幚韉efault.reg這個(gè)文件（打開或保存）。在這里應(yīng)選打開文件，在出現(xiàn)提示注冊表已更新的對話框后單擊OK。  
  
　　  
  
　　這樣，訪問者下次在啟動(dòng)IE或點(diǎn)擊主頁按鈕時(shí)，將會(huì)直接進(jìn)入你的站點(diǎn)！  
  
　　  
  
　　在網(wǎng)頁上制作幻燈片  
  
　　誰都可以把度假時(shí)拍的照片放在自己的網(wǎng)站上，要是能把它們做成幻燈片效果就更酷了。這里指的不是將一張照片制成一個(gè)頁面那樣的幻燈片，而是指所有照片都在同一頁面上顯示的真正的動(dòng)態(tài)幻燈片效果。這里我們將向你介紹如何使用層疊式樣式表(CSS)和動(dòng)態(tài)HTML(DHTML)制作幻燈片效果，你也許會(huì)感到這樣做很枯燥，不過，想想這會(huì)給你的朋友、家人、同事留下多么深刻的印象吧。記住，由于實(shí)現(xiàn)這個(gè)效果使用了DHTML，所以只有4.0以上版本的瀏覽器支持它。  
  
　　 當(dāng)然，實(shí)現(xiàn)幻燈片效果需要功能很強(qiáng)的應(yīng)用程序，我們一時(shí)不可能考慮得面面俱到。  
  
　　  
  
　　第一步  
  
　　 收集你要顯示的圖片，并把它們裁剪為相同的尺寸。圖片的尺寸不能超過640x480像素，并且所有圖片的像素?cái)?shù)都相等——如果圖片有大有小看起來就很不和諧。  
  
　　  
  
　　第二步  
  
　　在頭域中，需要用<STYLE>標(biāo)記指出正在使用CSS。在<STYLE>標(biāo)記中，設(shè)置幻燈片在頁面中播放的位置，并確定播放是以背景色開始，還是以第一張幻燈片作為開始。代碼示例如下：  
  
　　  
  
　　 <STYLE type="text/css">  
  
　　<!-- .slides {position:absolute; left: 25%; top:25%; visibility:hidden} -->  
  
　　</STYLE>  
  
　　  
  
　　第三步  
  
　　 在頭域中，設(shè)置完CSS后，就可以插入你的JavaScript代碼了。在var numSlides后設(shè)置幻燈片的數(shù)目（這個(gè)值不要太大，因?yàn)槊糠�畫都需要�?shù)千字節(jié)左右），這里用了5幅畫。  
  
　　  
  
　　<SCRIPT language="JavaScript1.2">  
  
　　var numSlides = 5;  
  
　　var currentSlide = numSlides;  
  
　　  
  
　　第四步  
  
　　 使用下面代碼可以在幻燈片中加入字幕說明，當(dāng)然你要把這里引號(hào)中的文字換成自己的話。  
  
　　  
  
　　 var captionTxt = new Array(numSlides);  
  
　　 function setUpCaptions() {  
  
　　 captionTxt[1] = "Entrance to Pier 39."  
  
　　 captionTxt[2] = "Sea Lions lounging around the pier."  
  
　　 captionTxt[3] = "Boats docked on the Pier."  
  
　　 captionTxt[4] = "Underwater World whale mural."  
  
　　 captionTxt[5] = "Alcatraz, or, The Rock."  
  
　　 }  
  
　　  
  
　　第五步  
  
　　在字幕說明的JavaScript后放入下面的代碼。由于Navigator 4.0和IE 4.0對CSS的解釋不同，我們在腳本中加入了檢測瀏覽器版本的對象檢測。如果用的是Navigator，則它定義某些定制的對象，使這些代碼也能在其下正常工作。在后面加上</SCRIPT>標(biāo)記表示腳本在這里結(jié)束。  
  
　　function setUp() {  
  
　　if (!document.all) {  
  
　　 document.all = document;  
  
　　 for (i=1;i<=numSlides;i++)document.all[("image"+i)].style=document.all[("image"+i)];  
  
　　 }  
  
　　switchSlide(1);  
  
　　}  
  
　　  
  
　　function switchSlide(sDir) {  
  
　　newSlide = currentSlide + sDir;  
  
　　if (!newSlide) newSlide=numSlides;  
  
　　if (newSlide > numSlides) newSlide=1;  
  
　　document.all[("image"+newSlide)].style.visibility="visible";  
  
　　document.all[("image"+currentSlide)].style.visibility="hidden";  
  
　　// remove the next line if you don't want captions:  
  
　　document.all["captions"].document.forCaptions.captionsText.value=captionTxt[newSlide];  
  
　　currentSlide = newSlide;  
  
　　}  
  
　　  
  
　　//-->  
  
　　</script>  
  
　　  
  
　　注意腳本后部的注釋：要是不想使用字幕說明，則去掉注釋下面那一行。  
  
　　  
  
　　第六步  
  
　　用</HEAD>標(biāo)記結(jié)束頭域，在體域中使用下面的代碼。注意代碼中每幅圖像都使用了<DIV>標(biāo)記，并使用<IMG src>引入圖像。  
  
　　<BODY onLoad="setUp()">  
  
　　<B>PC Computing slide show!</B>  
  
　　<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>  
  
　　<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>  
  
　　<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>  
  
　　<DIV id="image2" class="slides"><IMG src="second.jpg"></DIV>  
  
　　<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>  
  
　　  
  
　　  
  
　　第七步  
  
　　 為了方便訪問者察看特定的圖像，可以增加一些用于定位的按鈕。你可以采用老式的超級(jí)鏈接，但是專現(xiàn)在專為Next和Previous按鈕設(shè)計(jì)的圖案非常多，可以使用現(xiàn)成的圖案。下面的代碼就是使用next.gif和previous.gif作為按鈕圖案來實(shí)現(xiàn)這個(gè)功能  
  
　　 <DIV style="position:absolute; top:350px; left:100px">  
  
　　<A href="javascript:switchSlide(-1)">  
  
　　<IMG src="previous.gif" border=0></A>  
  
　　<A href="javascript:switchSlide(1)">  
  
　　<IMG src="next.gif" border=0></A>  
  
　　</DIV>  
  
　　  
  
　　如果不想在Previous和Next上顯示圖片，可以用文字代替<IMG>標(biāo)記。  
  
　　  
  
　　 第八步  
  
　　 最后，使用<TEXTAREA>來顯示字幕說明，可以通過rows和cols來確定顯示行數(shù)和列數(shù)。  
  
　　下面給出代碼：  
  
　　  
  
　　 <DIV id="captions" style="position:absolute; left: 320px; top:75px">  
  
　　<B>Picture caption</B>  
  
　　<FORM name=forCaptions>  
  
　　<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>  
  
　　</FORM>  
  
　　</DIV>  
  
　　  
  
　　  
  
　　添加水印  
  
　　從傳統(tǒng)意義上講，水印是用來鑒別真假，因?yàn)樗麄兊拇嬖诓⒉挥绊懹∷⒃谠擁撋蟽?nèi)容的清晰度。 后來GeoCities 把水印的概念引入數(shù)字時(shí)代。在頁面制作時(shí)利用這個(gè)技巧，在頁面上就可以作出一個(gè)半透明的標(biāo)志，它就像獨(dú)立的懸浮在頁面上一樣。盡管這很麻煩，但能產(chǎn)生非常漂亮的效果 。  
  
　　 這里有幾種在主頁上產(chǎn)生水印效果的方法。例如，如果訪問者使用的是IE瀏覽器，只需用<BODY background="graphic/g.gif" bgproperties=fixed>就可產(chǎn)生水印效果。但這對Navigator不適用，它會(huì)自動(dòng)的將圖片平鋪顯示。  
  
　　 為了兼顧不同的瀏覽器，必須使用動(dòng)態(tài)HTML(DHTML)來實(shí)現(xiàn)這個(gè)功能。GeoCities采用服務(wù)器端來檢測訪問者使用的瀏覽器，并針對不同的瀏覽器（IE或Navigate）采用不同的實(shí)現(xiàn)方法。我們編寫了一種單一的客戶端腳本，它能在上述兩種瀏覽器上工作，甚至還可以給您更大的選擇余地。  
  
　　  
  
　　 第一步  
  
　　 創(chuàng)建或設(shè)計(jì)水印圖案。它可以是支持任何HTML語言的圖像格式，盡管圖像的的尺寸是準(zhǔn)確的，您還必須將它的尺寸提供給腳本。同時(shí)您還需花時(shí)間從頁面的整體上來考慮水印的設(shè)計(jì)。水印是否設(shè)計(jì)為透明的？是否要和背景色協(xié)調(diào)？應(yīng)該有多大？我們建議這一步一定要細(xì)心，以免遮蔽頁面或擾亂訪問者的注意力。  
  
　　  
  
　　 第二步  
  
　　 確定把水印放在不支持DHTML瀏覽器的何處（比如說底部）。然后在<DIV>標(biāo)記中嵌入屬性 id="waterMark",stytle="position:absolute"。  
  
　　  
  
　　<DIV id="waterMark" style="position:absolute">  
  
　　<A href="/index.html"><IMG src="/Images/watermark.gif" width=90 height=90 border=0></A>  
  
　　</DIV>  
  
　　第三步  
  
　　  
  
　　 在包含水印的<DIV>容器之后添加該腳本，這樣就可以實(shí)現(xiàn)水印效果。較好的位置是放在結(jié)束的</BODY>標(biāo)記前。  
  
　　  
  
　　<script language="JavaScript1.2"><!--  
  
　　// Watermark script by Paul Anderson, CNET Builder.com. All rights reserved.  
  
　　markW = 64; // pixels wide  
  
　　markH = 64; // pixels high  
  
　　markX = 100; // percent right  
  
　　markY = 100; // percent down  
  
　　markRefresh = 20; // milliseconds  
  
　　  
  
　　// set common object reference  
  
　　if (!document.all) document.all = document;  
  
　　if (!document.all.waterMark.style) document.all.waterMark.style = document.all.waterMark;  
  
　　  
  
　　wMark = document.all.waterMark.style;  
  
　　wMark.width = markW;  
  
　　wMark.height = markH;  
  
　　navDOM = window.innerHeight; // Nav DOM flag  
  
　　  
  
　　function setVals() {  
  
　　 barW = 0; // scrollbar compensation for PC Nav  
  
　　 barH = 0; if (navDOM) {  
  
　　 if (document.height > innerHeight) barW = 20;  
  
　　 if (document.width > innerWidth) barH = 20;  
  
　　 } else {  
  
　　 innerWidth = document.body.clientWidth;  
  
　　 innerHeight = document.body.clientHeight; }  
  
　　 posX = ((innerWidth - markW)-barW) (markX/100);  
  
　　 posY = ((innerHeight - markH)-barH) (markY/100);  
  
　　 }  
  
　　  
  
　　function wRefresh() {  
  
　　 wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft);  
  
　　 wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop);  
  
　　 }  
  
　　  
  
　　function markMe() {  
  
　　 setVals(); window.onresize=setVals;  
  
　　 markID = setInterval ("wRefresh()",markRefresh);  
  
　　 }  
  
　　  
  
　　window.onload=markMe; // safety for Mac IE4.5  
  
　　  
  
　　//-->  
  
　　</script>  
  
　　  
  
　　 你可以根據(jù)自己的水印來調(diào)整這個(gè)腳本前面的五個(gè)設(shè)置變量。  
  
　　 markW = 64; // pixels wide  
  
　　 markH = 64; // pixels high  
  
　　 markX = 100; // percent right  
  
　　 markY = 100; // percent down  
  
　　 markRefresh = 20; // milliseconds  
  
　　  
  
　　 markW和markH變量分別和水印寬度和高度（用象素?cái)?shù)表示）相等。如果水印中包含HTML文本，那么文本的寬度大約和該像素寬度相等。markX和markY用于確定水印在頁面中的位置，它們是用所在位置與離開屏幕右上角尺寸的百分比來表示的。例如，如果它們均為50則表示位于屏幕的中央，如果分別為100和0時(shí)，表示位于屏幕的右上角。最后，調(diào)整markRefresh確定瀏覽器更新水印位置的頻度，單位是毫秒。當(dāng)這個(gè)值較低時(shí)，在滾動(dòng)頁面和水印本身更新的延遲時(shí)間較短，但這會(huì)向?yàn)g覽器提出更多的更新請求。  
  
　　  
  
　　加入搜索功能  
  
　　 現(xiàn)在主要的站點(diǎn)上都有搜索功能。訪問者利用這個(gè)功能可以很方便地找到所需的信息。但是構(gòu)造一個(gè)搜索引擎對于大多數(shù)網(wǎng)站設(shè)計(jì)者來說是不可能的，因?yàn)楸仨氁獙⒕W(wǎng)站中的文本編入索引，此外還要構(gòu)造一個(gè)查詢系統(tǒng)，用于用戶輸入關(guān)鍵詞并返回查找結(jié)果。  
  
　　幸運(yùn)的是，現(xiàn)在有幾種免費(fèi)的方法能在網(wǎng)頁中輕松加入搜索功能。其中有Thunderstone's Webbinator(www.thunderstone.com/webinator),PicoSearch(www.picosearch.com)和ht://Dig(www.htdig.org)。另外還有一些公司在提供主機(jī)服務(wù)的同時(shí)還附帶這種站點(diǎn)查詢功能。  
  
　　為了說明這有多容易，我們將和你一起在你的站點(diǎn)中加入一個(gè)免費(fèi)的PicoSearch。你可以在任何站點(diǎn)安裝PicoSearch而不必考慮主機(jī)的擁有者是誰,而上述其他幾種方法需要在服務(wù)器上安裝一些軟件。它唯一的缺點(diǎn)是在用戶查詢結(jié)果頁上會(huì)出現(xiàn)一些廣告。  
  
　　  
  
　　 第一步  
  
　　 到PicoSearch的新用戶注冊頁(www.picosearch.com/newaccount.html)輸入注冊信息。在點(diǎn)擊完Submit按鈕后，服務(wù)器會(huì)分析你的站點(diǎn)。  
  
　　  
  
　　 第二步  
  
　　 在你的站點(diǎn)加入PicoSearch的索引后，它會(huì)提示你是否預(yù)定這項(xiàng)服務(wù)，如果選擇預(yù)定，則它會(huì)給你發(fā)送一份包含HTML代碼的email，你可以在網(wǎng)頁中使用這段代碼。這段代碼可以創(chuàng)建一個(gè)查詢框。當(dāng)訪問者填完之后，就可以在PicoSearch站點(diǎn)得到查詢結(jié)果頁面。  
  
　　  
  
　　另外還有一些軟件也有查詢功能，但你必須把它安裝在服務(wù)器上，再指出你要查找的目錄，這樣它才會(huì)去查找你要的文本。使用這種軟件的好處是查詢結(jié)果將出現(xiàn)在自己的站點(diǎn)上，缺點(diǎn)是你必須自己去安裝建立這個(gè)系統(tǒng)。

www.91wangzhan.cn