網(wǎng)友解答: 這個問題我來回答一下，我本人是一個前端工程師，經(jīng)常給系統(tǒng)設計頁面。如果你只是做靜態(tài)的網(wǎng)頁頁面設計，首先你要會HTML(包括html5)包括和CSS，這是頁面布局的基礎，現(xiàn)在一

這個問題我來回答一下，我本人是一個前端工程師，經(jīng)常給系統(tǒng)設計頁面。

如果你只是做靜態(tài)的網(wǎng)頁頁面設計，首先你要會HTML(包括html5)包括和CSS，這是頁面布局的基礎，現(xiàn)在一般都是div+css。

當然做頁面設計肯定離不開圖像處理軟件，比如PS，AI(不是人工智能)這類的軟件，總要會一個，把需要的圖片進行處理，符合頁面的要求。

現(xiàn)在一般都是響應式布局，就是一套代碼，可以在大小不同的屏幕上正常顯示，比較簡單的方法是css里的@media，不過這樣寫代碼會比較多。

除此之外就是用Bootstrap框架，是支持響應式布局的，樣式也挺好看的，能夠快速地布局。

這些是一些基礎的知識，如果都了解，可以去從事網(wǎng)頁設計了，在工作中遇到其他問題，再繼續(xù)學習。

學網(wǎng)頁設計需要耐心和細心。

以下總結了目前網(wǎng)絡上常見的網(wǎng)頁設計布局，其實還有許許多多別具一格的布局，關鍵在于你的創(chuàng)意和設計了。對于版面布局的技巧，這里提供四個建議，您可以自己推敲：

　　1."T"結構布局。所謂"T"結構。就是指頁面頂部為橫條網(wǎng)站標志+廣告條，下方左面為主菜單，右面顯示內容的布局，因為菜單條背景教深，整體效果類似英文字母"T",所以我們稱之為"T"形布局。這是網(wǎng)站設計中用的最廣返的一種布局方式。這種布局的優(yōu)點是頁面結構清晰，主次分明。是初學者最容易上手的布局方法。缺點是規(guī)矩呆板，如果細節(jié)色彩上不注意，很容易讓人"看之無味"。

　　2."口"型布局。這是一個象形的說法，就是頁面一般上下各有一個廣告條，左面是主菜單，右面放友情連接等，中間是主要內容。這種布局的優(yōu)點是充分利用版面，信息量大。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網(wǎng)易壁紙站。

　　3."三"型布局。這種布局多用于國外站點，國內用的不多。特點是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。

　　4.對稱對比布局。顧名思義，采取左右或者上下對稱的布局，一半深色，一半淺色，一般用于設計型站點。優(yōu)點是視覺沖擊力強，缺點是將兩部分有機的結合比較困難。

　　5.POP布局。POP引自廣告術語，就是指頁面布局象一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用于時尚類站點，比如http://ELLE.com。優(yōu)點顯而易見：漂亮吸引人。缺點就是速度慢。作為版面布局還是值得借鑒的。

再舉一些網(wǎng)頁設計的分類別設計技巧和案例

一 頁頭設計

一般是主頁的的頭部及導航設計，主圖需要高清，這張圖也就是上面所說的T型布局。最廣返的一種布局方式。這種布局的優(yōu)點是頁面結構清晰，主次分明，容易上手。詳細可看：10款網(wǎng)站頁頭設計欣賞，拯救你的模板生涯 http://www.19lou.com/board-56181520322767595-thread-49031521098795869-1.html。

二導航設計

這種導航設計比較富有個性，而不是單單的拉橫條，動感和不對稱的隨意性排列，讓整個頁面風格更加活潑和跳動。

三 滑動塊設計

這是一個網(wǎng)頁設計中算是細節(jié)的設計了，網(wǎng)頁設計細節(jié)在網(wǎng)站設計中至關重要：文章來源可以參考：( http://www.mountor.cn/news_det_455_i5012.html ).我們說細節(jié)決定了網(wǎng)頁的成和敗，這也是基于瀏覽者的體驗，這是我們做設計的最最根本的要義。設計行業(yè)的從業(yè)人員應該對此有所體會。很多時候，一個小小的網(wǎng)頁設計細節(jié)的失誤往往會毀了整個網(wǎng)站的品牌形象設計。

四 版式布局設計

上面第一段講到了5種網(wǎng)站頁面設計布局：T型，口型、三型、對稱、pop布局。那么如果你是新人，就建議不要向著飛，先一步一步來，嘗試前幾種。但是技術和設計理念成熟了，可以試一試pop的布局和一些不對稱的設計如下圖：

五 分頁設計

分頁設計一般指在主頁上使用過的網(wǎng)格系統(tǒng)讓整個網(wǎng)站井井有條，同時還留有相當數(shù)量的空白，讓眼睛能迅速抓取重要信息。但是也有不規(guī)則的額，到那時難度要大，把控不好就可能會讓頁面內容表達不清晰，但下圖中的分頁設計，你一定在想：怎么才能看到詳細信息?就這樣……快速滑動的效果，很棒吧!

六 頁腳設計

網(wǎng)站頁腳也是網(wǎng)站重要一部分。但是，最近本人在看別人網(wǎng)站的時候，發(fā)現(xiàn)很多問題，就是頁腳設計的特別粗心，甚至很多都是草草了事，應付網(wǎng)站頁腳。因此，我們在設計網(wǎng)站頁腳就需要通過細心的方式，這不僅在網(wǎng)站優(yōu)化帶來好處，還在網(wǎng)站整體美感獲得加分。

七 字體排版設計

其實很多人會覺得字體不就是那樣嗎 ？對剛接觸頁面設計的人更加是如此的。但是我要說的是：真的很重要，很重要，很重要。對于頁面上的各式各樣的字體想必已經(jīng)看得熟透了，我們都希望創(chuàng)造出更加豐富新穎的文字版式，它能為網(wǎng)頁設計加油添彩，我們可以回憶經(jīng)典字體排版設計，并與現(xiàn)代的創(chuàng)意創(chuàng)新技術相結合，有一種叫字象乾坤的網(wǎng)站字體的排版設計可以看一看，使文字的版面越來越活波生動，富有創(chuàng)新。

最后再分享一些網(wǎng)頁設計背景圖的高清圖片，有點適合創(chuàng)意行業(yè)的網(wǎng)站設計

1 該項目作品中融入多種風格，包括逐漸消退和飛濺模式，以此形成一種手勢繪畫體驗，讓參觀者們看到自己身體的移動和扭曲。作品仿佛在揭示一座全新未知的城市。

2 霓虹色調的背景和彩色幾何圖形相互融合，圖片模糊了真實情景與數(shù)字添加景觀之間的界限，淡粉色的天空搭配超現(xiàn)實景觀，這些色彩艷麗的虛擬幾何形狀凸顯了藝術家對顏色的敏銳記憶。

3 印度教徒在慶祝為期三天的Rakher Upabas節(jié)，拍攝于孟加拉國達卡附近，該作品榮獲2015年意大利錫耶納國際攝影獎。

4

5 悉尼的海水與世界任何地方都不同，“閃耀、純凈得好似玻璃”。

6 春裝出鏡，時髦的波波頭，醒目的配飾，讓自己在這個春天靚起來！適合于服裝類的時尚網(wǎng)站！

這些網(wǎng)站需要好的顏色的充斥，不管是網(wǎng)站整體的配色還是圖片的而色彩，對于一個網(wǎng)頁是起到第一作用的，特別是做時尚網(wǎng)站的，色彩的敏銳度是生命。

7 灰加橙，不多說。

8 在美國加利福尼亞州南部的科羅拉多沙漠（Colorado Desert）中，聳立著一座用50萬加侖油漆潑出的彩色“救贖山”（Salvation Mountain）。這是由當?shù)鼐用袢R昂納德·奈特（Leonard Knight）花費30多年時間建成的，希望向所有訪客傳遞“上帝之愛”。如果上帝真的存在,那一定是他借助老人Leonard Knight之手以展示信仰的力量和慈愛?！x天堂最近的地方。

這么多素材夠學的了，不管是老手還是新人，提升自己的最好的辦法就是不斷欣賞，不斷收藏，不斷實踐......