網(wǎng)頁設(shè)計(jì)布局方法
導(dǎo)語：一個(gè)好看實(shí)用的網(wǎng)頁應(yīng)該如何布局呢?跟著小編一起來學(xué)習(xí)吧!
1.欄目設(shè)置
導(dǎo)航欄：中心概況、組織架構(gòu)、實(shí)驗(yàn)教學(xué)、設(shè)備環(huán)境、管理制度、開放實(shí)驗(yàn)、創(chuàng)新基金、學(xué)生感言。
二級(jí)欄目： 無二級(jí)欄目。
在ps中新建寬度為1200px、高度隨意、分辨率為72ppi、RGB顏色模式的文檔，注意文檔規(guī)范語義化命名為“網(wǎng)站名稱_index_版本_日期”。
.紅色框的參數(shù)和單位需注意，一般默認(rèn)參數(shù)和單位，但是避免部分同學(xué)的默認(rèn)參數(shù)存在問題，找不到原因而苦惱，另外背景內(nèi)容透明和白色均可，無影響。
后面制作的過程中，可以改變畫布的大小。選擇菜單面板的“圖像-畫布大小”。“定位”可選擇擴(kuò)充/裁剪方向。
2. 建立輔助線
快速建立輔助線的方法是：直接從標(biāo)尺上拖出一條輔助線。假如沒看到標(biāo)尺，選擇菜單面板的“視圖-標(biāo)尺”打上勾。
選擇“新建參考線”，精確定義參考線位置：
或者選擇“新建參考線版面”，一鍵分欄：
內(nèi)容寬度為1200px，因此將左右邊距設(shè)置為(1920-1200)/2=360px;導(dǎo)航共9個(gè)欄目，因此將列數(shù)設(shè)置為9。
最好在畫布邊界也拉上輔助線，當(dāng)你沿著輔助線畫圖(矩形、直線等)的時(shí)候它會(huì)自動(dòng)貼齊輔助線，這樣就不會(huì)畫出邊界了。如果輔助線太多，可以按ctrl+h來隱藏輔助線，查看整體效果，再按一次即可顯示回來。
但是拖動(dòng)得到輔助線有時(shí)難以準(zhǔn)確，為了精確的像素調(diào)整，可直接使用菜單面板的“視圖-新建參考線”，直接建立360px，1560px兩條參考線來限定網(wǎng)頁內(nèi)容范圍。
3. 建立布局
根據(jù)需求分析，大概定一下網(wǎng)站的banner、slider、content、copyright的高度(之后可以調(diào)整)，banner及slider的高度不要超過578px。因?yàn)橹髁黠@示器分辨率為1366*768px，減去瀏覽器的高度首屏高度就剩下578px了，為了保證slider在屏幕上顯示完全，必須使banner+slider≤578px。
同時(shí)建立五個(gè)文件夾，每個(gè)區(qū)域的圖層分別放在對(duì)應(yīng)的文件夾里。各文件夾可以用不同顏色標(biāo)記(右鍵單擊文件夾→選擇顏色標(biāo)記)，在含有大量圖層的時(shí)候方便快速找到文件夾，切記各文件夾和圖層命名語義化。以上措施均是為了方便圖層的更改和管理。
4. 置入內(nèi)容
· banner
首頁banner一個(gè)重要的功能是展示網(wǎng)站的名稱和logo。網(wǎng)站名稱和logo直接放在導(dǎo)航左側(cè)空白處，右側(cè)可以通過放置一些與網(wǎng)站相關(guān)的圖片平衡頁面，如化院首頁的分子圖、校友會(huì)網(wǎng)站的紙筆等等，但需注意的是以上內(nèi)容均應(yīng)控制在1200px的參考線內(nèi)。
為使圖片素材融入背景，你可能需要進(jìn)行摳圖、降低不透明度、畫筆調(diào)整等操作。
· navigation
沿著nav區(qū)域畫一個(gè)顏色為#00702a的矩形，如果覺得太扁平，通過改變圖層樣式(雙擊圖層，或者右鍵-混合模式，即可到達(dá)圖層樣式面板)來增加質(zhì)感，最后輔助線建立的各欄內(nèi)置入各欄目名稱(字號(hào)16px，字體為微軟雅黑)。這里選用了斜面和浮雕效果。
接下來增加點(diǎn)細(xì)節(jié)，在兩欄之間加分隔線。
實(shí)現(xiàn)方法：
① 畫一個(gè)寬1px，高30px的矩形，填充白色;
�、� 再畫一個(gè)相同的矩形，填充一種比背景更深的綠色，并把它貼在上面那個(gè)矩形的右側(cè);
�、� 適當(dāng)降低兩個(gè)矩形的不透明度，如30%;
以上就是利用一根淺顏色和一根深顏色的1px的線打造刻線質(zhì)感的方法，到此已經(jīng)基本完成，倘若要做得更細(xì)，可繼續(xù)看第④步，做一點(diǎn)漸變，讓它不那么生硬。
�、� 雙擊白色矩形圖層，打開圖層樣式面板，選擇漸變疊加�！皾u變”左側(cè)選擇白色，右側(cè)選擇背景綠(勾選反向時(shí)要反著選)，“樣式”選擇“對(duì)稱的”，“角度”為90度，適當(dāng)降低“不透明度”和控制“縮放”，直到達(dá)到自己滿意的效果。右邊的“預(yù)覽”可以讓你查看實(shí)時(shí)效果，記得勾選哦。同理，對(duì)于深色矩形，將“漸變”中白色改成改矩形的顏色，其余一致�？焖俚姆椒ㄊ怯益I圖層-復(fù)制圖層樣式，再右鍵另一個(gè)圖層-粘貼圖層樣式，更改漸變中的顏色即可。
· slider
沿著slider參考線畫一個(gè)白色(或任意顏色，但不要描邊)的矩形，把制作好的slide圖片從文件夾直接拉入畫布中，置于“slider_bg”圖層之上。右鍵單擊slider圖片圖層，在彈出的菜單中選擇“創(chuàng)建剪貼蒙版”，讓slider圖片只在“slide_bg”圖層區(qū)域上顯示。于是圖片就被裁剪得只剩slier區(qū)域的部分。此時(shí)該矩形對(duì)該圖片就會(huì)起到蒙版的作用，把矩形以外的部分遮蓋。之后你可以繼續(xù)拖動(dòng)圖片調(diào)整其位置，你會(huì)發(fā)現(xiàn)圖片并沒有被真的裁剪得只剩slider區(qū)域。
剪切蒙版與蒙版有些類似，在網(wǎng)頁制作的過程中會(huì)經(jīng)常使用。使用剪切蒙版可以避免對(duì)素材的裁剪，保證其完整性以便再次調(diào)整。PS是關(guān)于圖層的藝術(shù)，在設(shè)計(jì)過程中部分素材來之不易，一定要避免對(duì)素材進(jìn)行如裁剪、變形等等“暴力”操作，否則當(dāng)發(fā)現(xiàn)效果不理想時(shí)后悔為時(shí)已晚。
5.再在slider添加展示性文字
頁面整體主色調(diào)使用不太明顯，于是在slide下方增加2px的線，以強(qiáng)調(diào)主色調(diào)。
· content
內(nèi)容部分作用是放置欄目展示信息，主要注意排版和細(xì)節(jié)處理，難度是不大的。常見的內(nèi)容部分有幾種形式，例如采用列表式，適用于信息較少，文章展示為主：
這些畫起來應(yīng)該沒啥難度的了，不過要注意幾點(diǎn)：
�、� 文章列表每行用1px虛線間隔，直線工具中把實(shí)線改成虛線即可。
�、� 對(duì)于欄目標(biāo)題，如新聞速遞，建議使用圖標(biāo)加文字的形式。
�、� 文章列表每行開頭建議加一個(gè)小圓點(diǎn)，形成信息層次。
�、� 欄目內(nèi)容字號(hào)為14px，欄目標(biāo)題字號(hào)為16px，導(dǎo)航、標(biāo)題用微軟雅黑，正文用宋體。整個(gè)網(wǎng)站除了slider之類的展示性文字，其余均需遵守這個(gè)原則。
�、� 字體顏色避免純黑，85%-95%的黑色閱讀性更佳，且使網(wǎng)站看起來更精致。
6.content制作。
欄目內(nèi)容分欄，左側(cè)主要是文字為主，右側(cè)以圖片為主。
欄目標(biāo)題采用圖標(biāo)加文字，圖標(biāo)如果不想自己畫可以去圖標(biāo)網(wǎng)站上搜索，最好保持一致。
【網(wǎng)頁設(shè)計(jì)布局方法】相關(guān)文章：
關(guān)于網(wǎng)頁設(shè)計(jì)布局的分析09-26
網(wǎng)頁設(shè)計(jì)中美麗的布局05-13