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

這個(gè)問(wèn)題我來(lái)回答一下，我本人是一個(gè)前端工程師，經(jīng)常給系統(tǒng)設(shè)計(jì)頁(yè)面。

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

當(dāng)然做頁(yè)面設(shè)計(jì)肯定離不開(kāi)圖像處理軟件，比如PS，AI(不是人工智能)這類的軟件，總要會(huì)一個(gè)，把需要的圖片進(jìn)行處理，符合頁(yè)面的要求。

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

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

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

學(xué)網(wǎng)頁(yè)設(shè)計(jì)需要耐心和細(xì)心。

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

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

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

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

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

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

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

一 頁(yè)頭設(shè)計(jì)

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

二導(dǎo)航設(shè)計(jì)

這種導(dǎo)航設(shè)計(jì)比較富有個(gè)性，而不是單單的拉橫條，動(dòng)感和不對(duì)稱的隨意性排列，讓整個(gè)頁(yè)面風(fēng)格更加活潑和跳動(dòng)。

三 滑動(dòng)塊設(shè)計(jì)

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

四 版式布局設(shè)計(jì)

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

五 分頁(yè)設(shè)計(jì)

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

六 頁(yè)腳設(shè)計(jì)

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

七 字體排版設(shè)計(jì)

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

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

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

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

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

4

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

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

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

7 灰加橙，不多說(shuō)。

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

這么多素材夠?qū)W的了，不管是老手還是新人，提升自己的最好的辦法就是不斷欣賞，不斷收藏，不斷實(shí)踐......