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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一 頁頭設(shè)計

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

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

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

三 滑動塊設(shè)計

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

四 版式布局設(shè)計

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

五 分頁設(shè)計

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

六 頁腳設(shè)計

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

七 字體排版設(shè)計

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

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

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

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

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

4

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

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

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

7 灰加橙，不多說。

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

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