網頁各部分設計技巧匯總
網頁設計不同于其他藝術，即便是完全自己設計的，也是沿用了人們已經認同的大部分用戶習慣，技巧很重要。下面是小編分享的網頁各部分設計技巧匯總，一起來看一下吧。
首先我們需要了解一下網站的頁面組成，網站一般包括以下幾部分：
首頁：網站的門面，如同公司的形象，特別注重設計和規劃。
框架頁：網站的主要結構頁面，又稱次首頁、內頁，大型網站往往框架頁即首頁，如一些門戶網站。框架頁主要是網站內部主要欄目的首頁，講究風格的一致性，并于主頁呼應。
普通頁：網站主要的承載信息的頁面，設計要求不高，但要求鏈接準確、文字無誤、圖文并茂，并沿襲網頁的風格。
彈出頁：一般用于廣告、新聞、消息、到其他網站的鏈接等等，一般用的很少。
通過上面的分析，我們可以看出：
從功能上來看，首頁主要承擔著樹立企業形象(當然不僅僅是首頁)的作用，框架頁在導航方面起著重要的作用，比如各欄目內部主要內容的介紹，都可以在框架頁中體現再進入普通頁，讓瀏覽者能夠迅速了解網站各欄目的主要內容，擇其需要而瀏覽，而普通頁則是主要的信息頁面，也是網站的最終頁面，對于大型網站，這種結構非常重要，而對于中小型企業，網站規模較小、頁面數量不多，有時框架頁就起著普通頁的作用，至于彈出頁，建議您不是必要，最好不要用。下面詳細介紹各頁面的設計技巧：
一、首頁設計技巧
網站首頁是企業網上的虛擬門面，在此，提醒上網的企業注意自己門面的設計，決不能敷衍了事、馬馬虎虎。我們會經常看到印刷精美的產品目錄或廣告，當您屢屢看到那些印有產品目錄或廣告的精美印刷制品的時候，相信您或多或少會對有關的產品形成一種好感，即使您不會購買，也必然對這些產品形成一定程度的認同。而對于設計毛糙的宣傳品，您肯定會懷疑其內容的真實性，從而對其產品或服務產生質疑。好，現在說說網站的設計，相信您會同意這種說法：網站的頁面就好比是“無紙的印刷品”。既然如此，我們會因此而得出一個結論：精良和專業網站的設計，如同制作精美的印刷品，會大大刺激消費者(訪問者)的購買欲望，反之，您公司所提供的產品或服務將不會給消費者(訪問者)留下較好的印象。值得一提的是，除非您的企業有專業的網站規劃、設計人員，否則您最好找專業公司或專業人員為您設計制作，一個優秀的專業設計人員會很快明白您的意圖，并根據您的建站目的提出建設性的意見。
一般來說，網站首頁的形式不外乎有兩種，一種是純粹的形象展示型，這種類型文字信息較少，圖像信息較多，通過藝術造型和設計布局，利用一系列與公司形象和產品、服務有關的圖像、文字信息，組成一幅生動的畫面，向瀏覽者展示一種形象、一個氛圍，從而吸引瀏覽者進入瀏覽。這需要設計者具有良好的設計基礎和審美能力，能夠努力挖掘企業深層的內涵，展示企業文化。這種類型的首頁在設計過程中一定要明確要以設計為主導，通過色彩、布局給訪問者留下深刻的印象，當然，我們不能為了設計而設計，我們的目的是營銷，在設計過程中一定要牢記這一點!
另一種是信息羅列型，一般的大、中型企業網站和門戶網站常用的方式，即在首頁中就羅列出網站的主要內容分類、重點信息、網站導航、公司信息等等，也就是我們上面談到的框架頁，這種風格比較適合網站信息量大，內容豐富的網站，因為是以展示信息為主，這是的設計就要在細微之處體現企業形象，建議設計人員最好仔細閱讀企業的CI手冊，熟悉企業標志、吉祥物、字體及用色標準，在網站的局部體現出來，往往平淡之中一個優美的符合企業特點的曲線就能夠給人以深刻的印象，從而將企業形象印在瀏覽者的腦海里。設計人員在設計過程中要注意使用這些語言符號來表達一種獨特的企業信息。
二、風格保持一致——內頁設計技巧
如何保持網站風格的一致，是進行內頁設計過程中考慮的重要方面，根據我的經驗，您可以嘗試以下幾種設計方式：
1、結構的一致性：我們知道，網站的統一性在網站營銷中占重要地位，而網站結構是網站風格統一的重要手段，包括網站布局、文字排版、裝飾性元素出現的位置、導航的統一、圖片的位置等等，到國外著名的電子商務網站瀏覽，你會發現這些網站結構驚奇的一致性，所不同的是色彩或內容，在結構的一致性中，我們要強調網站標志性元素的一致性，即網站或公司名稱、網站或企業標志、導航及輔助導航的形式及位置、公司聯系信息等，這種方式是目前網站普遍采用的結構，一方面減少設計、開發的工作量，同時更有利于以后的網站維護與更新。
2、色彩的一致性：方式是保持站點主體色彩的一致，只改變局部色塊，優點是一個獨特色彩的網站會給人留下很深刻的印象，因為人的視覺對色彩要比布局更敏感，更容易在大腦中形成記憶符號。在色彩的一致性中，我們強調的是如果企業有自身的CI形象，最好在互聯網中沿襲這個形象，給觀眾網上網下一致的感覺，更有利于企業形象的樹立。一個建議是選取一兩種主要色彩，幾種輔助色彩。
3、利用導航取得統一：導航是網站的一項重要組成部分，一個出色的富有企業特性的導航將會給人留下深刻的印象，比如將標志的形態寓于導航之中，或將導航設計在整個網站布局之中等等不一而足，花點力氣在導航上，也會設計出一個出色的站點。
4、特別元素的一致性：在網站設計中，個別具有特色的元素(如標志、象征圖形、局部設計等)重復出現，也會給訪問者留下深刻印象。比如網站結構在某一點上的變化，由直線變為圓弧、暗色點綴的亮色、色彩中的補色等等。
5、利用圖像取得統一： 網頁中的圖像在使用上一定要甚之又甚，尤其是一些動畫，網頁中充斥著各種可有可無的動畫，而這些動畫根本與本企業內容無關!認真檢查網頁中的動畫，將沒用的刪掉!這里我們所說的利用圖像取得統一，決不是在每頁中放置幾個動畫!而是作為網站結構一部分的局部圖像，根據網頁內容的不同，配以相應的圖像或動畫，從而給瀏覽者形成頁面的連續性。
6、利用背景取得統一：從技術上而言，網頁背景包括背景色和背景圖像兩種，一般來說，我們并不提倡使用背景圖像，而使用背景色或色塊。原因很明顯，第一，速度，背景色的速度忽略不計，而背景圖像就得根據圖像字節大小下載了，這里需要說明的是，如果你的背景圖像比較深，那么最好將背景色置為深色調(默認的背景色是白色)，這樣在等待瀏覽器下載背景圖片的時候前面的淺色文字可以很容易閱讀，因為如果有背景色，瀏覽器先將其下載，然后下載背景圖片;第二，顯示效果，經常看到國內一些網站設有背景圖像，或者是公司的廠房、辦公大樓，或者是產品圖片，甚至是某某人物的照片，使得前面的文字很難辨認!給人一種很不舒服的感覺，讓人無法停留。在此，提醒您注意：有效利用背景取得網站統一和專業化的方法有以下幾種：
第一，認識到并不是所有的圖片都可以作為背景，在考慮設置網站背景圖像的時請您注意;
第二，加強與前景的明暗對比，即要么淡化背景，隱隱約約可以看到即可，要么加深背景，而將前面的文字亮化。
那么什么適合網頁背景呢?一個好的建議是將公司的標志、象征性的簡單圖片作為背景，并將其淡化，使瀏覽者在閱讀網站內容的同時不經意記下公司的標志。曾經一個網站的背景設計給我留下深刻的印象：單色背景中一個網站標志的居中放大淡化，前面元素中也不斷重復這個標志：如提交按紐形狀刻意設計成標志的形式等等，在整個頁面中形成特有元素在大小、明暗及位置的呼應，很好地塑造了網站的特有形象。
三、色彩搭配
網頁中最難處理的也就是色彩搭配的問題了。如何運用最簡單的色彩表達最豐富的含義，體現企業形象是網頁設計人員需要不斷學習、探索的課題。如何進行色彩搭配是一門學問，下面的一些方法是我在實踐過程中的體會，希望能夠為您起到一定的參考作用。
1、運用相同色系色彩：所謂相同色系，是指幾種色彩在360°色相環上位置十分相近，大約在45°左右或同一色彩不同明度的幾種色彩，如：，這種搭配的優點是易于使網頁色彩趨于一致，對于網頁設計新手有很好的借鑒作用，這種用色方式容易塑造網頁和諧統一的氛圍，缺點是容易造成頁面的單調，因此往往利用局部加入對比色來增加變化，如局部對比色彩的圖片等。這種方法不失為一種設計的好方法。
2、運用對比色或互補色：所謂對比色，是指色相環相距較遠，大約在100°左右，視覺效果鮮亮、強烈，而互補色則是色相環上相距最遠的連種色彩，即相距180°，其對比關系最強烈、最富有刺激性，往往使畫面十分突出，如：，這種用色方式容易塑造活潑、韻動的網頁效果，特別適合體現輕松、積極的素材的網站，缺點是容易造成色彩的花，使用中注意色彩使用的度。
值得注意的是，以上兩種用色方式在實際應用中要注意主體色彩的運用，即以一種或兩種色彩為主，其它色彩為輔，不要幾種色彩等量使用，以免造成色彩的混亂。
3、使用過渡色：過渡色能夠神奇地將幾種不協調的色彩統一起來，在網頁中合理地使用過渡色能夠使你的色彩搭配技術更上一層樓。過渡色包括幾種形式：兩種色彩的中間色調、單色中混入黑、白、灰進行調和以及單色中混入相同色彩進行調和等等，您可以自己嘗試調配，在以后的更新中，我會專題介紹如何使用過渡色。
四、版面布局
一般來說，企業網站首頁的布局比較靈活，著重設計，這里我所說的布局主要是指內頁的版面布局。中、小型企業網站的內頁布局一般比較簡單，即內頁的一欄式版面布局，從排版布局的角度而言，我們還可以設計成等分兩欄式、三欄式、多欄式，不等分兩欄式、三欄式、多欄式等等，但因為瀏覽器寬幅有限，一般不宜設計成三欄以上的布局。
在版面布局中主要是考慮導航、必要信息與正文之間的布局關系。比較多的情況是采用頂部放置必要的信息，如公司名稱、標志、廣告條以及導航條，或將導航條放在左側而右側是正文等等，這樣的布局結構清晰、易于使用。當然，您也可以嘗試這些布局的變化形式，如：左右兩欄式布局，一半是正文，另一半是形象的圖片、導航;或正文不等兩欄式布置，通過背景色來區分，分別放置圖片和文字等等。在設計中注意多吸取好的網站設計的精髓。
【網頁各部分設計技巧】相關文章：
網頁設計技巧「經典」02-07
網頁設計技巧03-14
網頁設計技巧精選10-06
網頁設計的技巧02-17
網頁設計的設計技巧03-06
網頁設計案例分享:網頁專題設計技巧11-28
簡潔網頁設計的技巧02-14
網頁設計的技巧經驗03-04
Dreamweaver網頁設計技巧11-08