想要成為網(wǎng)頁設(shè)計師嗎？那你得先學會網(wǎng)頁設(shè)計啊！想要學會網(wǎng)頁設(shè)計嗎？那你也得先學會網(wǎng)頁設(shè)計的規(guī)范吧！今天合肥榮博電腦培訓學校就為大家分享一些網(wǎng)頁設(shè)計規(guī)范以及建議，快來看看吧！網(wǎng)頁中有大量的空白區(qū)域供設(shè)計師利用，千萬別設(shè)計的過于簡單了哦。
合肥榮博電腦培訓學校為你分享網(wǎng)頁設(shè)計規(guī)范
一、網(wǎng)頁設(shè)計中的規(guī)定和規(guī)范（全文重點）：
1、網(wǎng)頁設(shè)計中的原件：
傳統(tǒng)的網(wǎng)頁設(shè)計中，網(wǎng)頁從上到下分為：頂欄（top_bar），導航欄（nav），內(nèi)容區(qū)（content），頂欄（bottom_bar）。而一般情況下內(nèi)容區(qū)域分為版心、banner圖等重要原件。
第一屏：即你打開網(wǎng)頁不使用滾輪所看到的內(nèi)容，設(shè)計師通常把頂欄+導航欄+banner圖稱為第一屏。一般情況下第一屏應(yīng)該可以看到top+nav+banner+一部分內(nèi)容區(qū)域，大概高度在580px左右。如果你想讓第一屏只能看到banner圖的話，top+nav+banner圖的高度就要在800px左右，但是nav的高度不能超過80px。
尺寸參考：
畫布：一般情況下可以考慮1920*N
頂欄：40-60px
導航欄：不超過80px
banner圖：一般在500-800px不等（下面會細說怎么樣能第一屏只看圖）
底欄：越小越好，300px左右
版心：960 980 1000 1200下文詳解
板塊間距：一般在30-50px之間
2、字體的使用：
網(wǎng)頁的開發(fā)中，代碼僅支持實現(xiàn)微軟雅黑和宋體，所以除了微軟雅黑和宋體外所有的其余字體將以切圖的形式去體現(xiàn)。在網(wǎng)頁當中字體的使用一般是在12px-100px之內(nèi)，12px以下是肉眼不可視范圍，大于80px其實就是非常愚蠢的設(shè)計了。
一般情況下：
我們在12-14px這個像素區(qū)間內(nèi)，使用宋體，字體樣式為無。（順帶一提宋體這個字體的樣式只能是無，因為如果調(diào)整為平滑等或大于14px都會出現(xiàn)毛邊）。大于14px的字體，我們要使用的是微軟雅黑，字體樣式為平滑。（微軟雅黑必須加平滑樣式。其實也可以12px用雅黑，但是12px的話會有一些毛邊，可以自己control+1試一下）。
3、常用的字體顏色：
網(wǎng)頁當中是十分注重父子級關(guān)系的，通常設(shè)計中不會使用純黑色或純白色。如果想通過字體顏色去區(qū)分父子關(guān)系，推薦從高-低（#333，#666，#999，#ccc），#666是正文常用的字體。
4、版心的概念：
版心是整個網(wǎng)頁的主顯示區(qū)域，并不是全部的內(nèi)容顯示區(qū)域，如果沒有版心的存在，整個頁面的內(nèi)容將無法完全呈現(xiàn)于網(wǎng)頁當中（如果control+1你的頁面無法居中平鋪的話，你要看一下是不是版心歪了）。版心內(nèi)容納視覺中心，即核心的表達內(nèi)容。一般情況下版心的尺寸為：960，980，1000，1200px或其他尺寸（僅提供參考，不是死規(guī)矩）。
5、標準的按鈕（了解）： #p#分頁標題#e#
在之前的網(wǎng)頁設(shè)計中是有規(guī)范的按鈕這么個說法的，但是現(xiàn)在沒了，看的舒服就好。建議可以了解一下，標準的按鈕尺寸是：上下留白為文字的1/2，左右留白為文字的2/3。關(guān)于圓角的使用，要么就不加圓角，要加圓角的話，建議加到滿（膠囊狀）或10px以內(nèi)。
二、設(shè)計建議：
正如我說的，網(wǎng)頁當中有大面積的空白區(qū)域，你的設(shè)計可以天馬行空，也可以為所欲為。但是你要在做的時候想一下你設(shè)計的那部分需要去切圖，如果切圖的話，這個圖片的位置是否需要相對或定位（定位很有可能出現(xiàn)bug，因為對于不同的瀏覽器而言，相對和都不是一定的）。
1、盒子的概念：
盒子即塊級元素，一般的網(wǎng)頁代碼中都是以div+css（div布局，css添加屬性）來寫的。你所設(shè)計的元素將會以一個一個的小盒子去分布，在設(shè)計的時候要有塊級概念，一方面方便代碼，另一方面讓網(wǎng)頁不同的區(qū)域更突出。沒有分塊的百度搜索結(jié)果，右側(cè)的部分顯得較弱。分塊設(shè)計的微博，各個板塊都相對獨立，除空間感外，更能引起注意。
2、對齊
無論做哪方面的設(shè)計，該對齊的一定要對齊。程序員只會按你打的頁面去畫，不會去設(shè)計，如果你差一個像素，那就真的結(jié)果也是一樣的，還有ps字體的虛邊是算像素的。
