網頁設計的錦囊妙計日期：2009/11/11 15:20:52　　

第一步

　　將下列JavaScript代碼放在頁面的頭部。

　　

　　<SCRIPT LANGUAGE="JavaScript">

　　

　　</SCRIPT>

　　

　　第二步

　　創(chuàng)建自己的顏色模式時，只需調整上述代碼最后一行中的參數(shù)：

　　

　　 fade(0,0,0,255,255,255,150);

　　

　　這七個參數(shù)的作用如下：前三個參數(shù)用三種原色——紅，綠，藍——表示變化開始時的顏色，緊接著的三個參數(shù)用同樣的方法表示變化結束時的RGB顏色。最后一個參數(shù)表示顏色的變化從開始到結束要經過多少步，這個數(shù)字越高，淡入淡出的時間越長，顏色的變化也越緩慢。上述這一行中的參數(shù)表示某頁面的顏色從黑色(0,0,0)變?yōu)榘咨?255,255,255)要經過150步方可完成。

　　

　　只需輕輕一按

　　這個技巧向你展示如何避免由于頁面中存在過多由JavaScript產生的按鈕所造成的混亂。你可以將一系列鏈接放在一個可滾動的列表框中，這樣就可以用一個簡潔的界面來代替一長串諸如<OL>、<UL>、<BR>之類的標記。通常訪問者在選擇一個鏈接后，點擊Go按鈕即可進入所選擇的頁面。

　　你也可以去掉點擊Go按鈕這一步，讓訪問者一選中鏈接就馬上進入新頁面：

　　

　　第一步

　　將下面的代碼放入你要顯示的可滾動列表框的頁面中：

　　 <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>標記的value屬性表示可選擇的鏈接。將value的值及其后的文本換成自己的內容就行了�？梢愿鶕枰褂萌我舛鄠€<OPTION>標記。

　　

　　第三步

　　千萬別忘了上述代碼的<NOSCRIPT>項。由于一些老版本的瀏覽器不支持JavaScript增強了功能的列表，使用<NOSCRIPT>就可以給使用這種瀏覽器的用戶訪問您的站點的按鈕。如果你在我們下邊的實例中的網站看到這個按鈕，說明你的瀏覽器不支持JavaScript（如果你用的是Navigator 2.0，那也看不到這個按鈕，因為它連<NOSCRTPT>都不支持）。注意，要使Go按鈕有效，還須有一個能處理這種表格的CGI程序。

　　為了給頁面節(jié)省出更多的空間，你可以將這種列表框變?yōu)橹徽家恍械南吕斜砜�，為此，去掉上述代碼<SELECT>標記中的size=5。將第一個<OPTION>標記的value屬性賦為空值（value=""），用它作為說明，選中它時并不起作用。如

　　<OPTION value="">Go to page:</OPTION>。

　　

　　封面頁的定時方法

　　你也許想通過封面頁表現(xiàn)一些特別的東西，比如說公司的的股票上市了、孩子的生日等。同時你還要確保訪問者能進入真正的主頁。為什么非要讓訪問者自己進入主頁呢？最好的做法是在進入封面頁后一定時間自動進入主頁。

　　

　　第一步

　　在頁面的頭域中寫入下面一行：

　　 <META http-equiv="refresh" content="10; URL=index.html">

　　

　　第二步

　　可以根據你的需要來調整封面頁停留的時間。在這個例子中，我們把它設為10秒（就是上述代碼中的10），這個時間只是一個近似值。可以根據網頁上的內容來調整這個時間間隔，原則是能確保訪問者有足夠的時間來閱讀網頁。最讓人感到氣憤的是，還沒把網頁內容看完它就進入下一頁了。

　　這里還有一個問題，使用meta 標記刷新時,時間是從頁面開始下載算起的。如果用戶線路速度較慢或網絡發(fā)生阻塞，可能還沒等頁面全部下載就進入下一頁了。為了避免上述現(xiàn)象，可以去掉<META>標記，而在體<BODY>域中用如下語句代替：

　　

　　onload=setTimeout("location.href='index.html'",10000)

　　

　　onload的事件句柄在頁面結束下載才被激活。與使用meta標記刷新不同，onLoad接受的參數(shù)單位是毫秒，而不是秒。這種方法只能在支持JavaScript的瀏覽器上正常工作。為了支持早期的瀏覽器，同時考慮meta標記刷新方法可能造成的超時操作，應該在封面頁中提供一個進入下一頁的鏈接以備不測。還要注意的是，網站的起始頁應有一個缺省的文件名，當用戶訪問網站時就自動下載這一頁，例如index.html或homepage.html。如果要先顯示一個臨時的封面頁，就必須把封面頁的名字改為缺省的起始頁名字，而把主頁改為其他名字。在啟用或禁止封面頁時要特別注意這一點。

　　

　　在所有頁面中包含特定信息

　　如果你有一個出售干酪的站點，那一定希望盡可能多地發(fā)布廣告信息。就像下面這樣的廣告:“如果您對干酪有興趣，請快快訪問――huckie 在線干酪公司，我們可以提供符合您口味的各式各樣的干酪，我們是干酪在線超市”。

　　如果想在所有的頁面發(fā)布這條廣告，并不需要將它拷貝下來再粘貼到每個頁面上；要想同時改變所有頁面上的這條消息，也不必對它再進行拷貝和粘貼。

　　應該怎么做呢？用Server-side includes(SSI)，這是解決這種站點維護問題的最佳方案。要是站點上的每一頁都有一個標準的導航條，干脆就把它做成一個SSI, 這樣當改變結構或增加選項時，就只需改動一個文件。如果您已有鏈接的JavaScript或DHTML文件，將其設置為SSI方式，這樣一來訪問者在訪問時只需在服務器上下載一次該頁面。

　　和樣式表一樣，SSI最大的好處在于，當你要做一些改動時只需改變一個包含文件，該變化就會在所有的頁面同步。

　　下面介紹SSI的工作原理。當服務器讀取HTML文件時，發(fā)現(xiàn)有插入標志就插入一段其他代碼。然后服務器整理所有代碼，形成最終的文件。所有這些都在幕后執(zhí)行，訪問者感覺不到。

　　下面就是如何實現(xiàn)SSI。

　　第一步

　　確保你站點的服務器的配置支持SSI。

　　如果你的站點建在ISP上，則可以從ISP管理員處確認該ISP是否支持SSI。如果不支持，則可以要求它支持SSI。

　　如果你有自己的服務器，可以參考NCSA 的HTTP SSI 文檔(http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html)。

　　

　　第二步

　　創(chuàng)建一個存放包含(Include)文件的目錄。

　　第三步

　　創(chuàng)建包含文件。我們的例子使用的是chess_text.html。注意不要加入開始符和結束符，只要創(chuàng)建要包含的HTML文本就可以了。

　　

　　第四步

　　在頁面的HTML文件中插入如下代碼。這段代碼將告訴服務器將從何處得到包含文件：

　　

　　

　　然后把你希望出現(xiàn)在各網頁上的文字（如第一段引號中的文字）寫入一個單獨的文件即可。

　　

　　超級Mailto

　　Mailto 能讓訪問者方便地向網站提供反饋或聯(lián)系信息。除了自動產生一個email消息外，你還可以使用mailto做許多其他事情。超級Mailto能自動填寫抄送和密件抄送，甚至能自動填充主題行。下面介紹如何定制mailto功能。

　　基本的mailto實現(xiàn)方法：

　　 <A href="mailto:person@buider.com">

　　 Click here to send a boring old mailto message</a>

　　當訪問者點擊這個鏈接時，會調用他們客戶端的email程序，并在收件人框中自動填上收件人的地址。下面，我們將分以下幾步介紹如何增加mailto的功能。

　　

　　第一步

　　創(chuàng)建一個基本的mailto，包含收件人的地址。

　　

　　第二步

　　在收件人地址后用“?cc=”開頭，你可以填寫抄送(CC地址，下面這個例子將實現(xiàn)該功能：

　　<A href=mailto:person@builder.com?cc=second_person@builder.com>

　　 Click here to send an email message to multiple recipients</a>.

　　

　　第三步

　　就像下面這個例子一樣，緊跟著抄送地址之后，寫上"&bcc=",就可以填上密件抄送(BCC)地址了（在添加這些功能時，第一個功能以"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>.

　　

　　還可以把收件人、抄送、密件抄送人的多個地址用逗號分開：

　　<A href="mailto:person@builder.com, second_person@builder.com">

　　Click here to send an email message to multiple comma-delimited recipients.</a>

　　

　　第四步

　　在第一步和第二步之后就可以用&subject=填上主題了，下面給出實現(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>.

　　

　　

　　

　　將自己的主頁設置為缺省主頁

　　Microsoft和Netscape 都將各自瀏覽器的缺省主頁設為自己的站點，這有助于它們的網站獲得更多的訪問者。但是為什么只有它們能這樣做而占盡風光呢？為什么不讓人們在第一次啟動瀏覽器時，進入你自己的站點呢？其實你可以很輕松地讓訪問者把缺省的主頁改為你的頁面。

　　如果訪問者使用的是IE瀏覽器，那么改變他的主頁設置很簡單。對于使用Netscape Navigator的訪問者就不同了，就連我的Navigator在使用基于Java的設置方法時也老產生運行時錯誤（我用的是最新版本）。唯一可靠的方法就是讓使用Netscape的用戶在Preference菜單中手工調整缺省主頁的設置。

　　因為現(xiàn)在有幾乎半數(shù)的網上沖浪者都使用IE，因此這個技巧對你的站點仍然很有用。下面就是具體實現(xiàn)步驟。

　　

　　第一步

　　在一個空文本文件中，貼入如下字符：

　　 REGEDIT4

　　

　　 [ HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]

　　"Start Page" ="http://yoururl.com/"

　　

　　第二步

　　將這個文件存為default.reg，并把它放在你的Web服務器上的任何一個目錄下，因為這個文件只是供訪問者下載的。

　　

　　第三步

　　在你的主頁中加入一行文本，如“Make PC Computing your home page!”，將它的鏈接指向default.reg文件：

　　

　　 <a href="default.reg">Make PC Computing your home page!</a>

　　

　　要確保該鏈接指向default.reg所在目錄。

　　

　　第四步

　　加入一些文本用來說明點擊這個鏈接后訪問者還該做些什么。點擊后IE會提示他們如何處理default.reg這個文件（打開或保存）。在這里應選打開文件，在出現(xiàn)提示注冊表已更新的對話框后單擊OK。

　　

　　這樣，訪問者下次在啟動IE或點擊主頁按鈕時，將會直接進入你的站點！

　　

　　在網頁上制作幻燈片

　　誰都可以把度假時拍的照片放在自己的網站上，要是能把它們做成幻燈片效果就更酷了。這里指的不是將一張照片制成一個頁面那樣的幻燈片，而是指所有照片都在同一頁面上顯示的真正的動態(tài)幻燈片效果。這里我們將向你介紹如何使用層疊式樣式表(CSS)和動態(tài)HTML(DHTML)制作幻燈片效果，你也許會感到這樣做很枯燥，不過，想想這會給你的朋友、家人、同事留下多么深刻的印象吧。記住，由于實現(xiàn)這個效果使用了DHTML，所以只有4.0以上版本的瀏覽器支持它。

　　當然，實現(xiàn)幻燈片效果需要功能很強的應用程序，我們一時不可能考慮得面面俱到。

　　

　　第一步

　　收集你要顯示的圖片，并把它們裁剪為相同的尺寸。圖片的尺寸不能超過640x480像素，并且所有圖片的像素數(shù)都相等——如果圖片有大有小看起來就很不和諧。

　　

　　第二步

　　在頭域中，需要用<STYLE>標記指出正在使用CSS。在<STYLE>標記中，設置幻燈片在頁面中播放的位置，并確定播放是以背景色開始，還是以第一張幻燈片作為開始。代碼示例如下：

　　

　　 <STYLE type="text/css">

　　

　　</STYLE>

　　

　　第三步

　　在頭域中，設置完CSS后，就可以插入你的JavaScript代碼了。在var numSlides后設置幻燈片的數(shù)目（這個值不要太大，因為每幅畫都需要數(shù)千字節(jié)左右），這里用了5幅畫。

　　

　　<SCRIPT language="JavaScript1.2">

　　var numSlides = 5;

　　var currentSlide = numSlides;

　　

　　第四步

　　使用下面代碼可以在幻燈片中加入字幕說明，當然你要把這里引號中的文字換成自己的話。

　　

　　 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>標記表示腳本在這里結束。

　　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>標記結束頭域，在體域中使用下面的代碼。注意代碼中每幅圖像都使用了<DIV>標記，并使用<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>

　　

　　

　　第七步

　　為了方便訪問者察看特定的圖像，可以增加一些用于定位的按鈕。你可以采用老式的超級鏈接，但是專現(xiàn)在專為Next和Previous按鈕設計的圖案非常多，可以使用現(xiàn)成的圖案。下面的代碼就是使用next.gif和previous.gif作為按鈕圖案來實現(xiàn)這個功能

　　 <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>標記。

　　

　　第八步

　　最后，使用<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)意義上講，水印是用來鑒別真假，因為他們的存在并不影響印刷在該頁上內容的清晰度。后來GeoCities 把水印的概念引入數(shù)字時代。在頁面制作時利用這個技巧，在頁面上就可以作出一個半透明的標志，它就像獨立的懸浮在頁面上一樣。盡管這很麻煩，但能產生非常漂亮的效果。

　　這里有幾種在主頁上產生水印效果的方法。例如，如果訪問者使用的是IE瀏覽器，只需用<BODY background="graphic/g.gif" bgproperties=fixed>就可產生水印效果。但這對Navigator不適用，它會自動的將圖片平鋪顯示。

　　為了兼顧不同的瀏覽器，必須使用動態(tài)HTML(DHTML)來實現(xiàn)這個功能。GeoCities采用服務器端來檢測訪問者使用的瀏覽器，并針對不同的瀏覽器（IE或Navigate）采用不同的實現(xiàn)方法。我們編寫了一種單一的客戶端腳本，它能在上述兩種瀏覽器上工作，甚至還可以給您更大的選擇余地。

　　

　　第一步

　　創(chuàng)建或設計水印圖案。它可以是支持任何HTML語言的圖像格式，盡管圖像的的尺寸是準確的，您還必須將它的尺寸提供給腳本。同時您還需花時間從頁面的整體上來考慮水印的設計。水印是否設計為透明的？是否要和背景色協(xié)調？應該有多大？我們建議這一步一定要細心，以免遮蔽頁面或擾亂訪問者的注意力。

　　

　　第二步

　　確定把水印放在不支持DHTML瀏覽器的何處（比如說底部）。然后在<DIV>標記中嵌入屬性 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>容器之后添加該腳本，這樣就可以實現(xiàn)水印效果。較好的位置是放在結束的</BODY>標記前。

　　

　　<script language="JavaScript1.2">

　　</script>

　　

　　你可以根據自己的水印來調整這個腳本前面的五個設置變量。

　　 markW = 64; // pixels wide

　　 markH = 64; // pixels high

　　 markX = 100; // percent right

　　 markY = 100; // percent down

　　 markRefresh = 20; // milliseconds

　　

　　 markW和markH變量分別和水印寬度和高度（用象素數(shù)表示）相等。如果水印中包含HTML文本，那么文本的寬度大約和該像素寬度相等。markX和markY用于確定水印在頁面中的位置，它們是用所在位置與離開屏幕右上角尺寸的百分比來表示的。例如，如果它們均為50則表示位于屏幕的中央，如果分別為100和0時，表示位于屏幕的右上角。最后，調整markRefresh確定瀏覽器更新水印位置的頻度，單位是毫秒。當這個值較低時，在滾動頁面和水印本身更新的延遲時間較短，但這會向瀏覽器提出更多的更新請求。

　　

　　加入搜索功能

　　現(xiàn)在主要的站點上都有搜索功能。訪問者利用這個功能可以很方便地找到所需的信息。但是構造一個搜索引擎對于大多數(shù)網站設計者來說是不可能的，因為必須要將網站中的文本編入索引，此外還要構造一個查詢系統(tǒng)，用于用戶輸入關鍵詞并返回查找結果。

　　幸運的是，現(xiàn)在有幾種免費的方法能在網頁中輕松加入搜索功能。其中有Thunderstone's Webbinator(www.thunderstone.com/webinator),PicoSearch(www.picosearch.com)和ht://Dig(www.htdig.org)。另外還有一些公司在提供主機服務的同時還附帶這種站點查詢功能。

　　為了說明這有多容易，我們將和你一起在你的站點中加入一個免費的PicoSearch。你可以在任何站點安裝PicoSearch而不必考慮主機的擁有者是誰,而上述其他幾種方法需要在服務器上安裝一些軟件。它唯一的缺點是在用戶查詢結果頁上會出現(xiàn)一些廣告。

　　

　　第一步

　　到PicoSearch的新用戶注冊頁(www.picosearch.com/newaccount.html)輸入注冊信息。在點擊完Submit按鈕后，服務器會分析你的站點。

　　

　　第二步

　　在你的站點加入PicoSearch的索引后，它會提示你是否預定這項服務，如果選擇預定，則它會給你發(fā)送一份包含HTML代碼的email，你可以在網頁中使用這段代碼。這段代碼可以創(chuàng)建一個查詢框。當訪問者填完之后，就可以在PicoSearch站點得到查詢結果頁面。

　　

　　另外還有一些軟件也有查詢功能，但你必須把它安裝在服務器上，再指出你要查找的目錄，這樣它才會去查找你要的文本。使用這種軟件的好處是查詢結果將出現(xiàn)在自己的站點上，缺點是你必須自己去安裝建立這個系統(tǒng)。

波多野结衣新婚被邻居,亚洲av无码一区二区三区在线观看,毛豆日产精品卡2卡3卡4卡免费,久久精品人人做人人爽电影蜜月

網頁設計的錦囊妙計日期：2009/11/11 15:20:52

咨詢電話：15201609116

波多野结衣新婚被邻居,亚洲av无码一区二区三区在线观看,毛豆日产精品卡2卡3卡4卡免费,久久精品人人做人人爽电影蜜月

網頁設計的錦囊妙計 日期：2009/11/11 15:20:52

咨詢電話：15201609116

網頁設計的錦囊妙計日期：2009/11/11 15:20:52　　