概述:
這一節就來說說一個網站是如何做出來的。在你開始想作網站到付諸于實施,有一個準備的過程比較重要。因為準備好了,作起來就會得心應手,作到心中有數。一般來說,作網站需要明白你要作什么樣的網站。可別告訴我,你要作綜合門戶,雖說不是不行,但也不是現在能辦到的事
這一節就來說說一個網站是如何做出來的。在你開始想作網站到付諸于實施,有一個準備的過程比較重要。因為準備好了,作起來就會得心應手,作到心中有數。一般來說,作網站需要明白你要作什么樣的網站。可別告訴我,你要作綜合門戶,雖說不是不行,但也不是現在能辦到的事情。所以,花點時間想想自己想作什么樣的網站。
想好了要作什么樣的網站后,就要開始準備相關的材料了,比如文章,圖片,視頻等等,越多越好,這樣選擇范圍也大的多。為什么要做這一步呢?我想道理很明顯,準備的越充足,做起事來也越順利。目前來說,我們能找到的材料除自己的少量以外,多數以轉載為多,比如看者網絡上一篇文章不錯,轉載過來為己所用。雖說,這網絡復制是很容易的,但千萬別忘記版權問題。當然,如果你僅僅因為是個人興趣并且聲明了轉載的地方,那就問題不大了。不過最好能和擁有者打個招呼,一般都是會同意的。
這材料也準備好了,接下來該選擇好的工具了。當然,這工具的選擇是很多的。作為初學者可以使用FrontPage Express,雖說它是FrontPage的簡化版,但功能一樣不少,而且還是免費的。再說,這網頁制作都有互通性,學會了FrontPage Express的使用,其它也大同小異。
工具也選好了,該規劃網站建設以及設計頁面的布局了。一個網站是一個整體,它所包含的網頁都是互相鏈接起來的。從每一個頁面都能跳轉到另一個頁面。我們知道,這作網站就象辦一份雜志,雜志就該有標題,講明這雜志是什么名字;雜志有目錄,讓讀者可以選擇感興趣的內容直接去讀;雜志還有出版者的信息。這些和作網站差不多,一個網站要包含以下內容
1.網站標題;
2.網站目錄,又稱導航欄;
3.網站首頁,引導訪問者瀏覽你的網站;
4.網站制作者的信息。
如圖65.jpg顯示了一個網站首頁的組成。
這里有個概念要給大家說清楚,首頁其實有兩種說法:其一,服務器默認的首頁,文件名稱一般是:index.htm,index.html或者default.htm。服務器是裝載你的網站的地方,它們能24小時都連接在網絡上。網站都有一個地址,比如:http://www.itiantao.com/。那么當你在瀏覽器敲入這個地址的時侯,服務器會自動尋找上面提到的三個文件,至于是那一個文件根據服務器要求會有不同;其二,網站首頁,你的網站應該有個首頁來引導訪問者瀏覽站點,那么這個首頁的文件名可以自行指定。比如你為網站指定首頁名為:zgr.htm,那么當你要讓別人訪問的時侯,就得告訴它地址是:http://www.itiantao.com/index.html。目前我們制作網站的首頁,都是合而為一了,即網站首頁就是服務器首首頁。
首頁的制作很重要,而且它的樣式應該和其它頁面有所區別。首頁上放置的都是最吸引人的東西,這樣訪問者才有興趣留下來訪問網站其它頁面。至于首頁,沒有一個什么規定的樣式,以能說明問題最根本。一般首頁不要超過三屏,這樣免得讓訪問者看起來很累人。除了首頁,其它的都是與首頁相連接的分頁了。分頁的內容是從首頁定義而來,比如你有個欄目是自我介紹,那么必定有個分頁是關于你自己介紹的內容,那么訪問者單擊這一頁后,就能跳轉到該分頁來。分頁必須有個鏈接指向首頁,這樣,無論訪問者如何看你的網站,它都能很容易的回到網站的首頁。這里有個建議個大家,就是在開始制作網站和網頁的時侯,最好能畫個圖出來,把網站的結構和網頁的布局都畫出來,這樣作起來就心中有數了。
如果你的網站最開始就構思的很復雜,可能真正作起來就很費時間,每一個鏈接都不能出錯了,不然改起來真是很麻煩。另外,大家在作網站的時侯,應該把所有網頁,圖片,聲音文件,視頻文件都放置到一個目錄里,這樣當你以后發布網站的時侯,就不會顯示不出內容了。比如,你的網頁全部放在A目錄里,但有一張圖片卻放置在B目錄,當你發布A目錄網頁后,B目錄的圖片就不會顯示出來了。因為服務器沒有B目錄。經過你的努力,網站有了雛形了。接下來就該學學如何上傳網頁,以及維護更新和宣傳網站了。
【精】網頁布局設計基礎
正如你現在所看到的一樣,網頁的布局設計變得越來越重要。訪問者不愿意再看到只注重內容的站點。雖然內容很重要,但只有當網頁布局和網頁內容成功接合時,這種網頁或者說站點才是受人喜歡的。取任何一面你都無法留住太過"挑剔"的訪問者。
一.網頁布局的基本概念
最開始,網頁呈現在你面前的時侯,它就好像一張白紙,它需要你任意揮灑你的設計才思。在開始的時侯,你需要明白,雖然你能控制一切你所能控制的東西,但假如你知道什么是一種約定俗成的標準或者說大多數訪問者的瀏覽習慣,那么你可以在此基礎上加上自己的東西。你當然也可以創造出自己的設計方案,但如果你是初學者,那么最好明白網頁布局的基本概念。
1.頁面尺寸:
如果你擁有更大的顯示器,比如21英寸,那么你能在屏幕上看到更多的網頁內容。但事實上不是人人都擁有這樣的顯示器。頁面尺寸和顯示器大小及分辨率有關系,網頁的局限性就在于你無法突破顯示器的范圍,而且因為瀏覽器也將占去不少空間,留下給你的頁面范圍變得越來越小。一般分辨率在800x600的情況下,頁面的顯示尺寸為:780x428個象素;分辨率在640x480的情況下,頁面的顯示尺寸為:620X311個象素;分辨率在1024X768的情況下,頁面的顯示尺寸為:1007x600。從以上數據可以看出,分辨率越高頁面尺寸越大。瀏覽器的工具欄也是影響頁面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加,那么當你顯示全部的工具欄時,和關閉全部工具欄時,頁面的尺寸是不一樣的。在網頁設計過程中,向下拖動頁面是惟一給網頁增加更多內容(尺寸)的方法。但我想提醒大家除非你能肯定站點的內容能吸引大家拖動,否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內容,那么你最好能在上面做上頁面內部連接,方便訪問者瀏覽。
2.整體造型:
什么是造型,造型就是創造出來的物體形象。這里是指頁面的整體形象,這種形象應該是一個整體,圖形與文本的接合應該是層疊有序。雖然,顯示器和瀏覽器都是矩形,但對于頁面的造型,你可以充分運用自然界中的其它形狀以及它們的組合:矩形,圓形,三角形,菱形等。對于不同的形狀,它們所代表的意義是不同的。比如矩形代表著正式,規則,你注意到很多ICP和政府網頁都是以矩形為整體造型;圓形帶表著柔和,團結,溫暖,安全等,許多時尚站點喜歡以圓形為頁面整體造型;三角形代表著力量,權威,牢固,侵略等,許多大型的商業站點為顯示它的權威性常以三角形為頁面整體造型;菱形代表著平衡,協調,公平,一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義,但目前的網頁制作多數是接合多個圖形加以設計,在這其中某種圖形的構圖比例可能占的多一些。
3.頁頭:
頁頭又可稱之為頁眉,頁眉的作用是定義頁面的主題。比如一個站點的名字多數都顯示在頁眉里。這樣,訪問者能很快知道這個站點是什么內容。頁頭是整個頁面設計的關鍵,它將牽涉到下面的更多設計和整個頁面的協調性。頁頭常放置站點名字的圖片和公司標志以及旗幟廣告。
4.文本:
文本在頁面中出現都數以行或者塊(段落)出現,它們的擺放位置決定者整個頁面布局的可視性。在過去因為頁面制作技術的局限,文本放置的位置的靈活性非常小,而隨著DHTML的興起,文本已經可以按照自己的要求放置到頁面的任何位置。
5.頁腳:
頁腳和頁頭相呼應。頁頭是放置站點主題的地方,而頁腳是放置制作者或者公司信息的地方。你能看到,許多制作信息都是放置在頁腳的。
6.圖片
圖片和文本是網頁的兩大構成元素,卻一不可。如何處理好圖片和文本的位置成了整個頁面布局的關鍵。而你的布局思維也將體現在這里。
7.多媒體
除了文本和圖片,還有聲音,動畫,視頻等等其它媒體。雖然它們不是經常能被利用到,但隨著動態網頁的興起,它們在網頁布局上也將變得更重要。
二.網頁布局的方法
網頁布局的方法有兩種,第一種為紙上布局;第二種為軟件布局。下面分別加以介紹:
1.紙上布局法
許多網頁制作者不喜歡先畫出頁面布局的草圖,而是直接在網頁設計器里邊設計布局邊加內容。這種不打草稿的方法不能讓你設計出優秀的網頁來。所以在開始制作網頁時,要先在紙上畫出你頁面的布局草圖來。準備一若干張白紙和一只鉛筆,你要設計一個時尚站點。*尺寸選擇:目前一般800X600的分辨率為約定俗成的瀏覽模式。所以為了照顧大多數訪問者,你頁面的尺寸以800X600的分辨率為準。*造型的選擇:先在白紙上畫出象征瀏覽器窗口的矩形,這個矩形就是你布局的范圍了。選擇一個形狀作為整個頁面的主題造型,我們選擇圓形,因為它代表者柔和,和時尚流行比較相稱,然后在矩形框架里隨意畫出來,你可以試者在增加一些圓形或者其它形狀。這樣畫下來,你會發現很亂。其實,如果你一開始就想設計出一個完美的布局來是比較困難的,而你要在這看似很亂的圖形中找出隱藏在其中的特別的造型出來。還要注意一點,你不要擔心你設計的布局是否能夠實現。事實上,只要你能想到的布局都能靠現今的HTML技術實現。(圖1,2)考慮到左邊向左凹的弧線,為了取得平衡我們在頁面右邊增加了一個矩形(也可以是一條線段)。*增加頁頭:圖3是我們從圖1和2得到的布局造型,那么我們該增加頁頭了。一般頁頭都是位于頁面頂部,所以我們為圖3增加了一個頁頭,為了和左邊的弧線和右邊的矩形取得平衡,我們增加了一個矩形頁頭并讓頁頭相交與左邊的弧線。
*增加文本:
頁面的空白部分加別加入文本和圖形。因為在頁面右邊有矩形作為陪襯,所以文本放置在空白部分不會因為左邊的弧線而顯得不協調。圖片是美化頁面和說明內容必須的媒體。在這里把圖片加入到適當的地方。經過以上的幾個步驟,一個時尚頁面的大概布局就出現了。當然,它不是最后的結果,而是你以后制作時的重要參考依據。
2.軟件布局法如果你不喜歡用紙來畫出你的布局意圖,那么你還可以利用軟件來完成這些工作。這個軟件就是Photoshop。Photoshop所具有的對圖像的編輯功能用到設計網頁布局上更顯得心應手。不像用紙來設計布局,利用Photoshop可以方便的使用顏色,使用圖形,并且可以利用層的功能設計出用紙張無法實現的布局意念。
三.網頁布局的技術
1.層疊樣式表布局在新的HTML4.0標準中,CSS(層疊樣式表)被提出來,它能完全精確的定位文本和圖片。CSS對于初學者來說顯得有點復雜,但它的確是一個好的布局方法。你曾經無法實現的想法利用CSS都能實現。目前在許多站點上,層疊樣式表的運用是一個站點優秀的體現。你可以在網上找到許多關于CSS的介紹和使用方法。
2.表格布局表格布局好像已經成為一個標準,隨便瀏覽一個站點,它們一定是用表格布局的。表格布局的優勢在于它能對不同對象加以處理,而又不用擔心不同對象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點是,當你用了過多表格時,頁面下載速度受到影響。對于表格布局,你可以隨便找一個站點的首頁,然后保存為HTML文件,利用網頁編輯工具打開它(要所見即所得的軟件),你會看到這個頁面是如何利用表格的。
3.框架布局不知道什么原故,框架結構的頁面開始被許多人不喜歡,可能是因為它的兼容性。但從布局上考慮,框架結構不失為一個好的布局方法。它如同表格布局一樣,把不同對象放置到不同頁面加以處理,因為框架可以取消邊框,所以一般來說不影響整體美觀。
結尾我今天來介紹的布局指南并不是全部的網頁布局技術,從某種意義上來說,我想引導你在制作網頁的時侯,怎樣把圖片和文本放置的恰到好處,而且如何擁有一個跳越的設計思維。好,就到這里。【精】淺談個人主頁之網頁優化發表時間:2005年10月7日 16時51分55秒 評論/閱讀(58/234)網頁做的是否成功,除了要考慮外觀設計,內容組織外,最重要的是當一位訪客瀏覽你的網頁時,能快速地看到內容,而不是等待,等待,再等待。個人主頁安家多在提供該項服務的服務器上,所以在硬件上我們選擇的余地不多,但我們可以在軟件上下功夫,提高網頁的下載速度,而今天我就從以下幾個方面來談談網頁的優化問題。
一.不該要的就不要我們在制作個人網頁時,都想提供最多、最新的內容給訪客,因為這是吸引他們的有力工具。但貪得無厭會使自己的網頁過于臃腫,別人等待半天,什么也沒有看到,所以我們在制作網頁時要記住,不該要的東西就不要。這并不是一個技巧,但往往被人忽略。在一些網頁上聚集著很多小圖標,也就是廣告交換LOGO,大小一般為88x31,容量一般為3K在右,在有些人看來,這并不會影響下載的速度,因為它們的容量都很小。下載一個88x31的LOGO標準時間需要1秒鐘,如果服務器速度有問題,很可能要2秒以上,假使你網頁上有5個這樣的LOGO,那么下載完全需要5-10秒,你覺得很短嗎,的確是,但訪客的容忍限度是20-30秒,也就是說如果在這段時間里,還沒有看到網頁或者網頁的全部內容,那么訪客很可能離去。還有一個問題是,往往有些網友放置了一些"毫無意義"的LOGO,比如IE4.0下載圖標,很少有人會點擊它。除非你的網頁沒有LOGO可用了,不然就刪除這些LOGO。不管是網頁制作者還是訪問者,都會有這樣的經驗,不會完全等到頁面所有內容下載完后,去選擇鏈接單擊,你設計的絢麗多姿的內容,可能別人還沒有看就從他視覺里消失了,而如果有同樣的選擇,訪客會去一連接就能出現內容的網頁,而不是去你那等待。
我知道,大家都喜歡用GIF動畫來裝飾網頁,它的確很吸引人,但我們在選擇時,是否能確定必須用GIF動畫,如果答否,那么就選擇靜止的圖片,因為它的容量要小得多。同樣的88x31的LOGO,GIF動畫的容量有5K,而靜止LOGO的只有3K。雖然只有2K之差,但多起來,就會影響下載的速度,所以,如果有些不是必須的,就選擇最小的。同樣我們在選擇是否用java script時,也要如此問自己,是否需要。總之,在我們制作網頁時,要有"積少成多"的意識,也就是說,小的東西多起來就會變成了大的,不管是一幅圖片或者一個按鈕,都要把它設計到最小,這樣節約下來的下載時間是很可觀的,而不要把任何沒有經過處理的對象放置到網頁上,這點很重要。
二.圖形的問題圖形是網頁必須要的,一副圖片完全可以表達大量文字所代表的意義,但圖片也是影響網頁下載速度的罪魁禍首。我們在制作網頁時,GIF與JPEG是打交道最多圖片格式,而在使用它們也有一些技巧。首先來簡單了解一下這兩種圖片格式的性質。GIF圖片格式顏色允許最大256色,而JPEG允許16萬色,而GIF支持動畫格式,JPEG不支持,但它們都可以交織顯示,也就是從模糊到清楚。了解了兩種格式的性質后,在使用它們時,該怎樣選擇呢,專家有這樣的建議,當你要顯示照片或者要圖片具有某種水印效果,模糊效果,那么選擇JPEG,如果你需要動畫、黑白圖片、透明圖片,那么就選擇GIF。
GIF圖片格式顏色最大允許256色,但在選擇GIF調色板時,可以設置256顏色以下的顏色,比如188,204等,大家如果使用Photoshop這樣的圖片處理軟件就會發現在保存GIF圖片時,會讓你選擇保存的顏色數,一般來說,你可以選擇256色以下的,因為它可以減少圖片容量。
GIF圖片的優勢在于顯示小圖標時,比如公司圖標,廣告圖標,也就是為什么現在廣告LOGO都是GIF圖片格式。而在與JPEG圖片相比較,當它們顯示同一副圖片時,會發現GIF圖片格式和網頁背景融合的更好,而JPEG圖片會發現四周的暈邊,而且GIF可以處理成透明圖片,和網頁背景有更好的融合。但如果處理大的圖片,會發現GIF圖片的大小比保存至JPEG格式的圖片要大的多,所以,處理大的圖片,最好用JPEG格式,它有高的壓縮比。
我們在使用這兩種圖片格式時,要注意圖片的尺寸,選擇過大的圖片尺寸,會使得網頁下載速度過慢,增加WEB服務器的負荷,目前網絡速度慢的原因,有很大原因是訪客等待圖片的下載,所以,對于圖片,要選擇更合適的尺寸。而且在制作網頁過程中,要給圖片指定高度和寬度,因為有時候我們會把本來尺寸很大的圖片設置成小尺寸的圖片,雖然圖片本身沒有改變,但指定小尺寸后,就會減少下載時間。也可以在原圖片下載之前,指定一個小容量的圖片,因為小容量的圖片會先顯示,然后在顯示原來的圖片,如果你使用FrontPage98工具,那么可以在圖片設置欄里設置,你也可以按以下HTML代碼設置:<IMGsrc="1.gif"LOWsrc="2.gif">
這時候,2.gif會先1.gif顯示。目前在網絡上又出現了一種圖片格式-PNG,它具有以上兩種圖片格式的優點,無失真,高壓縮,透明支持,真彩色,但因為現在的瀏覽器對它的支持不夠,所以使用的人不是很多,但以后新的瀏覽器會支持它。圖片問題是網頁制作中最復雜的問題,我們在利用圖片時,要精,而不要隨便就把沒有經過處理的圖片放到網頁上。
三.網頁設計在瀏覽網頁時,一般要經過:下載、完善、可視三個視覺步驟,而下載是最關鍵的一個步驟。如果連接半天還沒有返回頁面,那么訪客會離開,所以,提高下載速度是網頁優化的關鍵。在設計網頁時,會利用許多老的或新的技術,但當你使用某一項技術時,有可能因為瀏覽器的兼容問題,會使得網頁下載變得非常緩慢。有時,只出現了網頁背景,內容卻遲遲不出現,這就是因為瀏覽器在解釋網頁文件時,出現了問題,所以,在網頁設計上一定要注意。
目前利用表格制作網頁成為流行,因為它具有完備的布局功能,可以指定文檔或圖片在某一個地方出現。但在利用表格過程中,要注意一些問題,筆者利用FrontPage98表格功能做的一個網頁,在IE4瀏覽器可以非常快速的瀏覽,但利用網景瀏覽器時,發現背景出現了而內容遲遲沒有露面,經過分析發現是因為表格的緣故。因為表格嵌套過深,也就是在一個表格里,還包含數個其它表格,我們知道,當瀏覽器遇到表格時,會首先解釋最里層的表格,然后再解釋外層的表格,順序是從里到外,最后再解釋表格里含有的內容,也就是說,當你使用一個大的表格,而其中又包含其它表格時,瀏覽器的解釋將變得十分麻煩,它將一層層解釋表格,然后瀏覽器本身含有不兼容的的問題,就會照成頁面內容沒有出現,但數據還在傳輸。如果要避免這個問題,專家建議不嵌套超過三層的表格。你也可以把網頁分成幾個表格進行設計,比如標題導航一個表格,內容目錄一個表格,然后制作信息一個表格,這樣做可以使得瀏覽器分開解釋表格,它可以解釋完一個表格就出現表格里的內容,然后再解釋下一個表格。
網頁制作技術發展十分迅速,但相關的標準卻遲遲定不下來,這當然主要是兩大瀏覽器公司為各自利益相爭的緣故,使得瀏覽器的兼容性大大降低,往往在某一個瀏覽器瀏覽十分好,但使用另一家瀏覽器時,頁面是一團糟,所以,當我們制作完網頁后,要進行測試,下面就談談這個問題。
四.測試網站當完成網頁的制作,測試網頁是必須的,因為你可以首先發現網頁的問題,比如下載的速度。
1.確定自己的想法我們制作網頁,會有自己的想法,比如提供給別人什么。那么,我們就要確定自己的某些想法,自己能忍受的網頁下載速度是多少秒,10秒,還是30秒,再看看你的網頁是否達到了這個標準,如果沒有達到,分析一下,網頁上什么影響了下載速度,你可以試著取消某一個圖片,再看看,當然,這些測試不能在本地,而要把網頁上載到服務器上。
2.人工測試網站要測試網站,首先把網頁上載到服務器上,然后打開瀏覽器,把緩沖里的資料全部刪除。因為如果沒有刪除,瀏覽器請求頁面時,會讀取緩沖里已含有的內容。你也要選取所有的功能支持,比如java script,CSS。然后在瀏覽器里填寫請求的URL,如果你有一個跑表或者某一個能夠計秒的工具,在請求的開始,開始計秒,等到出現了頁面的整體框架時,停止計秒,看看下載的時間。這時候,你并沒有獲得網頁的全部內容,所以第二次測試,將是看看下載完全的網頁,所需要的時間,重復以上所有過程,而到網頁的內容全部下載后,停止計秒,然后再看看所花的時間,經過以上的步驟,你就會對自己網頁的下載時間做到心中有數了。當然,還有些問題要注意,比如測試網站的時間,晚間就較快,而白天就較慢;還有服務器的問題,不同的瀏覽器,不同的調制解調器,測試網站時都要考慮,你也可以在不同條件下進行測試。當然,這些測試只能取得一個附合大多數訪客的標準,要附合每一位訪客的要求,那是非常困難的。
3.第三方測試是否覺得人工測試很麻煩,那么你可以試試第三方測試,也就是請你的朋友測試,詢問他們的感覺。當然,最好選擇不同地域的朋友一起來測試,讓他們回復你,告訴你請求網頁時的時間等等,因為,做網頁就是給人訪問的,所以訪客就是權威。
你可以試試某些網站提供的服務,只需在網站上填寫一張表格,然后就可以靜候網站對你的評價了,如果填寫了自己的電子郵件地址,那么它會把測試結果發送到郵箱里。而該測試的內容也是豐富的,比如HTML代碼是否精煉,GIF及JPEG的圖片使用是否有效率等等,的確值得一試,但我們也不能完全相信,因為這種服務多數都在國外,不可避免的產生某些問題。如果需要,可以連接至某些網站(網站建設)進行測試:文章寫到這里,我也知道這并不是提高網頁訪問速度技術的全部,因為,要提高自己網頁的訪問速度需要自己在實踐中去總結,去不停地修改。如果你從來都沒有重視過這個問題,那么現在開始去注意它,因為自己發現缺陷,總比別人發現好,你說呢?

