網(wǎng)頁設計原則與制作技巧

黃曉乾 陳超 湖南交通工程職業(yè)技術學院 421001

一、設計原則

1、 表格的定位功能

表格在網(wǎng)頁制作中除了可以起到表格本身的作用外, 它最主要的作用是定位頁面中的元素。運用表格可以自由控制文本和圖像在網(wǎng)頁上出現(xiàn)的具體位置, 而不用擔心不同的對象之間的影響, 從而使整個網(wǎng)頁看上去緊湊統(tǒng)一。使用表格定位頁面元素時要注意以下兩點：

（1）一個網(wǎng)頁要盡避免用整個一張大表格, 所有的內容都嵌套在這個大表格之內。因為瀏覽器解釋HTML頁面的順序是自上而下依次逐行解釋和顯示出來, 但當碰到表格時, 瀏覽器會讀取表格中所有的元素后才將結果在頁面中顯示出來, 在頁面內容較多而瀏覽者瀏覽的速度又較慢的情況下, 瀏覽器的這種解釋次序將明顯表露出來, 只有等到瀏覽器解釋到了頁面的最后, 才會將整個頁面的內容在瀏覽者眼前顯示出來, 而在瀏覽器解釋過程中瀏覽者將看到一片空白。我們在采用表格進行定位時, 可以一行使用一個表格, 并且盡量不使用表格的嵌套。

（2）有的學生在使用表格定位時, 在頁面視圖下顯示沒有一點問題,可在瀏覽器中預覽的時候會出現(xiàn)頁面元素錯位的現(xiàn)象, 這個問題就在于表格寬度的設置上, 表格寬度的設置有兩種,一種是百分比, 一種是像素, 如采用百分比就會出現(xiàn)在不同分辨率下顯示效果不同的現(xiàn)象, 而將表格的寬度都更換成像素, 就可以解決這個問題了。

2、文件的命名

在制作網(wǎng)頁的過程中, 學生經常會遇到這樣一些問題：網(wǎng)頁中插入的圖片在瀏覽時無法顯示、做好的鏈接不能正常應用等。分析原因, 我們常常發(fā)現(xiàn), 是因為文件使用了中文名稱。學生為了便于記憶和查看明了, 總是喜歡給自己網(wǎng)站中的文件起一個中文名稱, 正是這些中文名稱導致了網(wǎng)頁瀏覽中的一些問題, 解決的方法就是將文件名改為英文。為了便于記憶可以使用漢語拼音或是中文的英譯, 如背景圖片文件可命名為background.gif或bg.gif

3、圖像的無縫拼接

圖像是網(wǎng)頁中必不可少的元素, 它起到美化頁面的作用。圖像的格式有很多種, 但在網(wǎng)頁中常用的只有三種格式GIF、JPG、PNG。圖像的大小在很大程度上影響網(wǎng)頁的下載速度, 所以在使用圖片之前要先用圖形處理軟件（如PhotoShop）對圖片進行優(yōu)化處理, 在不影響顯示效果的情況下盡量使用小尺寸的圖片。如需使用大圖片,我們可以采用圖像的無縫拼接技術, 所謂圖像的無縫拼接就是在圖形處理軟件中將一個大的圖片分割成幾個小的圖片, 然后在網(wǎng)頁制作軟件中再把幾個小圖片拼合成一個大的圖片, 拼合后的圖像跟原來的圖像顯示效果一樣, 看不出拼接的痕跡。完成拼接主要利用了表格的定位功能, 把幾個小的圖片分別放在表格的各個單元格中, 設置表格的邊框、單元格的間距和邊距均為零, 然后再手動調整一下, 就可以完成圖像的無縫拼接了, 這樣處理雖然比較麻煩,但卻既能使用效果好的大圖片又解決了圖片下載速度的問題。

4、個人站點中導航按鈕的設計

（1）使用現(xiàn)成的大圖片。根據(jù)站點的主題選用一個與主題相關的圖片,利用圖片的各部分做成導航, 如制作一個文學網(wǎng)站, 可以選用一本書作為導航, 書的目錄就是站點的欄目。

（2）使用Photoshop或Flash來制作自己的導航按鈕。采用這種方法,要求學生熟練掌握圖形處理軟件及動畫制作軟件的使用, 并具有創(chuàng)新性, 自己動手設計并使用相關軟件完成這樣創(chuàng)作出的導航系統(tǒng)就會具有新意, 會吸引更多的瀏覽者。

二、制作技巧

網(wǎng)站一般包括首頁（網(wǎng)站的門面）、框架頁（網(wǎng)站的主要結構頁面）、普通頁（網(wǎng)站主要的承載信息的頁面）、彈出頁（一般用于廣告、新聞、消息、到其他網(wǎng)站的鏈接等等）。

1、首頁設計技巧

網(wǎng)站首頁的形式有兩種，一種是形象展示型，通過藝術造型和設計布局，利用一系列與公司形象和產品、服務有關的圖像（較多）、文字信息（較少），組成一幅生動的畫面，向瀏覽者展示一種形象、一個氛圍， 從而吸引瀏覽者進入瀏覽。另一種是信息羅列型，這是一般大、中型企業(yè)網(wǎng)站和門戶網(wǎng)站常用的方式，即在首頁中就羅列出網(wǎng)站的主要內容分類、重點信息、網(wǎng)站導航、公司信息等等。

2、風格保持一致

（1）結構的一致性：網(wǎng)站的統(tǒng)一性在網(wǎng)站營銷中占重要地位，而網(wǎng)站結構是網(wǎng)站風格統(tǒng)一的重要手段，包括網(wǎng)站布局、文字排版、裝飾性元素出現(xiàn)的位置、導航的統(tǒng)一、圖片的位置等等，在結構的一致性中，我們要強調網(wǎng)站標志性元素的一致性，即網(wǎng)站或公司名稱、網(wǎng)站或企業(yè)標志、導航及輔助導航的形式及位置、公司聯(lián)系信息等，這種方式是目前網(wǎng)站普遍采用的結構，一方面減少設計、開發(fā)的工作量，同時更有利于以后的網(wǎng)站維護與更新。

（2）色彩的一致性：方式是保持站點主體色彩的一致，只改變局部色塊，優(yōu)點是一個獨特色彩的網(wǎng)站會給人留下很深刻的印象。

（3）導航欄的一致性：導航是網(wǎng)站的一項重要組成部分，一個出色的富有企業(yè)特性的導航將會給人留下深刻的印象。利用背景取得統(tǒng)一：有效利用背景取得網(wǎng)站統(tǒng)一和專業(yè)化，將公司的標志、象征性的簡單圖片作為背景，并將其淡化，使瀏覽者在閱讀網(wǎng)站內容的同時不經意記下公司的標志。在整個頁面中形成特有元素在大小、明暗及位置的呼應， 很好地塑造了網(wǎng)站的特有形象。

3、色彩搭配

頁面的色彩搭配是與網(wǎng)站的主題分不開的，在色彩搭配上，一般來說，頁面的主體文字應盡量使用黑色)與背景對比明顯，按鈕、邊框、背景等使用彩色。色彩的應用最好根據(jù)網(wǎng)站主題風格選定一種基調，再根據(jù)這個基調來搭配其他顏色。一般來講，綠色配以金黃、淡白，可以產生優(yōu)雅、舒適的氣氛；藍色與白色混合，能給人柔順、淡雅、浪漫的感覺；紅色和黃色、金色搭配能渲染喜慶的氣氛；而金色和咖啡色搭配則會給人帶來暖意。整個頁面在視覺上應是一個整體，以達到和諧、悅目的最佳視覺效果。

4、版面布局

網(wǎng)頁布局大致可分為“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、變化型，下面重點論述以下幾種布局：

（1）“國”字型：

也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標題以及橫幅廣告條，接下來就是網(wǎng)站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權聲明等。這種結構是我們在網(wǎng)上見到的差不多最多的一種結構類型。

（2）拐角型：

這種結構與上一種其實只是形式上的區(qū)別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。

（3）標題正文型：

這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類型。

（4）左右框架型：

這是一種左右為分別兩頁的框架結構，一般左面是導航鏈接，有時最上面會有一個小的標題或標致，右面是正文。我們見到的大部分的大型論壇都是這種結構的，有一些企業(yè)網(wǎng)站也喜歡采用。這種類型結構非常清晰，一目了然。

三、結束語

網(wǎng)頁制作中有很多的技巧, 只有在不斷的實踐中才會總結出更多更好的制作網(wǎng)頁的方法,在知道了一些技巧之后一定要付諸實踐, 這樣才能更好地掌握, 把別人的知識變成自己的知識。

[1]王為正,何小翠,應紅.計算機網(wǎng)頁制作中幾個疑難問題研究.金華市金華職業(yè)技術學院學報

[2]張鳴.關于網(wǎng)頁設計與制作方法的探討.長春市長春大學學報

[3]陳欣.Dreamweaver Mx教程.清華大學出版社