網(wǎng)頁(yè)設計基礎知識
大家在瀏覽網(wǎng)頁(yè)時(shí)經(jīng)�？梢钥磧�(yōu)秀的海報設計，這些設計往往可以通過(guò)其優(yōu)秀的顏色處理、場(chǎng)景打造、氛圍渲染、排版布局、文字處理以及巧妙的創(chuàng )意等方面來(lái)抓住瀏覽者的眼球。那么今天我們就跟大家分享網(wǎng)頁(yè)設計基礎知識。
一、需求分析
(1)網(wǎng)站風(fēng)格
網(wǎng)站為學(xué)院網(wǎng)站的子站點(diǎn)，同時(shí)需保持舊版內容大致，具體分為以下幾個(gè)方面：
1. 整體格調：學(xué)術(shù)科研類(lèi)網(wǎng)站、內容精煉，形式簡(jiǎn)潔。
2. 版式布局：精心編排、層次清晰、美觀(guān)實(shí)用，方便瀏覽。。
3. 配色應用：主色調采用 #00702a ，背景色采用 #f5f5f5 。
4. 基本功能：文章發(fā)布，圖片展示。
5.基本要求：符合大學(xué)視覺(jué)形象識別規范、色調與主網(wǎng)站保持一致、網(wǎng)站內容與舊版內容基本一致、便于文章內容更新及實(shí)時(shí)信息發(fā)布。
(2)首頁(yè)要求
1. 圖片展示為主，格調文化典雅。
2. 尺寸：內容寬度1200px，slide最大為1920px。首屏高度800-1200px
3. 布局采用擴展全屏，突出圖片，保證圖片slide在首屏高度內。
布局：由上至下;
· header/頭部 這部分包括banner和nav(導航)，其中nav采用了下拉菜單
· slider/滑動(dòng)圖片 圖文并茂的形式展示網(wǎng)站理念或主旨，是首頁(yè)是否出彩的決定性因素
· content/內容 內容不多，用文章列表的方式呈現
· footer/腳部 版權信息、作者信息、友情鏈接等
(3)網(wǎng)站欄目結構
導航欄：中心概況、組織架構、實(shí)驗教學(xué)、設備環(huán)境、管理制度、開(kāi)放實(shí)驗、創(chuàng )新基金、學(xué)生感言。
二級欄目： 無(wú)二級欄目。
二、確定布局
1.需求分析時(shí)已確定網(wǎng)站首頁(yè)以圖片展示為主，尺寸已定，我們需要的網(wǎng)頁(yè)內容寬度是1200px，而網(wǎng)頁(yè)最大寬度為1920px。如何建立文檔?
在ps中新建寬度為1200px、高度隨意、分辨率為72ppi、RGB顏色模式的文檔，注意文檔規范語(yǔ)義化命名為“網(wǎng)站名稱(chēng)_index_版本_日期”(如圖1)。
.紅色框的參數和單位需注意，一般默認參數和單位，但是避免部分同學(xué)的默認參數存在問(wèn)題，找不到原因而苦惱，另外背景內容透明和白色均可，無(wú)影響。
2.文檔建立后，即拉出兩條縱向輔助線(xiàn)到文檔邊緣(如圖2)。
后面制作的過(guò)程中，可以改變畫(huà)布的大小。選擇菜單面板的“圖像-畫(huà)布大小”，如圖3�！岸ㄎ弧笨蛇x擇擴充/裁剪方向。
2. 建立輔助線(xiàn)
快速建立輔助線(xiàn)的方法是：直接從標尺上拖出一條輔助線(xiàn)。假如沒(méi)看到標尺，選擇菜單面板的“視圖-標尺”打上勾，如圖3。
選擇“新建參考線(xiàn)”，精確定義參考線(xiàn)位置：
或者選擇“新建參考線(xiàn)版面”，一鍵分欄：
內容寬度為1200px，因此將左右邊距設置為(1920-1200)/2=360px;導航共9個(gè)欄目，因此將列數設置為9，如圖7。
最好在畫(huà)布邊界也拉上輔助線(xiàn)，當你沿著(zhù)輔助線(xiàn)畫(huà)圖(矩形、直線(xiàn)等)的時(shí)候它會(huì )自動(dòng)貼齊輔助線(xiàn)，這樣就不會(huì )畫(huà)出邊界了。如果輔助線(xiàn)太多，可以按ctrl+h來(lái)隱藏輔助線(xiàn)，查看整體效果，再按一次即可顯示回來(lái)。
但是拖動(dòng)得到輔助線(xiàn)有時(shí)難以準確，為了精確的像素調整，可直接使用菜單面板的“視圖-新建參考線(xiàn)”，直接建立360px，1560px兩條參考線(xiàn)來(lái)限定網(wǎng)頁(yè)內容范圍。
3. 建立布局
根據需求分析，大概定一下網(wǎng)站的banner、slider、content、copyright的高度(之后可以調整)，banner及slider的高度不要超過(guò)578px。因為主流顯示器分辨率為1366*768px，減去瀏覽器的高度首屏高度就剩下578px了，為了保證slider在屏幕上顯示完全，必須使banner+slider≤578px。
同時(shí)建立五個(gè)文件夾，每個(gè)區域的圖層分別放在對應的文件夾里。各文件夾可以用不同顏色標記(右鍵單擊文件夾→選擇顏色標記)，在含有大量圖層的時(shí)候方便快速找到文件夾，切記各文件夾和圖層命名語(yǔ)義化。以上措施均是為了方便圖層的更改和管理。
4. 置入內容
· banner
首頁(yè)banner一個(gè)重要的功能是展示網(wǎng)站的名稱(chēng)和logo。網(wǎng)站名稱(chēng)和logo直接放在導航左側空白處，右側可以通過(guò)放置一些與網(wǎng)站相關(guān)的圖片平衡頁(yè)面，如化院首頁(yè)的分子圖、校友會(huì )網(wǎng)站的紙筆等等，但需注意的是以上內容均應控制在1200px的參考線(xiàn)內。
為使圖片素材融入背景，你可能需要進(jìn)行摳圖、降低不透明度、畫(huà)筆調整等操作。
· navigation
沿著(zhù)nav區域畫(huà)一個(gè)顏色為#00702a的矩形，如果覺(jué)得太扁平，通過(guò)改變圖層樣式(雙擊圖層，或者右鍵-混合模式，即可到達圖層樣式面板)來(lái)增加質(zhì)感，最后輔助線(xiàn)建立的各欄內置入各欄目名稱(chēng)(字號16px，字體為微軟雅黑)，如圖11。這里選用了斜面和浮雕效果，參數如圖12所示。
接下來(lái)增加點(diǎn)細節，在兩欄之間加分隔線(xiàn)，如圖13。
實(shí)現方法：
�、� 畫(huà)一個(gè)寬1px，高30px的矩形，填充白色;
�、� 再畫(huà)一個(gè)相同的矩形，填充一種比背景更深的綠色，并把它貼在上面那個(gè)矩形的右側;
�、� 適當降低兩個(gè)矩形的不透明度，如30%;
以上就是利用一根淺顏色和一根深顏色的1px的線(xiàn)打造刻線(xiàn)質(zhì)感的方法，到此已經(jīng)基本完成，倘若要做得更細，可繼續看第④步，做一點(diǎn)漸變，讓它不那么生硬。
�、� 雙擊白色矩形圖層，打開(kāi)圖層樣式面板，選擇漸變疊加。如圖14，“漸變”左側選擇白色，右側選擇背景綠(勾選反向時(shí)要反著(zhù)選)，“樣式”選擇“對稱(chēng)的”，“角度”為90度，適當降低“不透明度”和控制“縮放”，直到達到自己滿(mǎn)意的效果。右邊的“預覽”可以讓你查看實(shí)時(shí)效果，記得勾選哦。同理，對于深色矩形，將“漸變”中白色改成改矩形的顏色，其余一致�？焖俚姆椒ㄊ怯益I圖層-復制圖層樣式，再右鍵另一個(gè)圖層-粘貼圖層樣式，更改漸變中的顏色即可。
· slider
沿著(zhù)slider參考線(xiàn)畫(huà)一個(gè)白色(或任意顏色，但不要描邊)的矩形，把制作好的slide圖片從文件夾直接拉入畫(huà)布中，置于“slider_bg”圖層之上。右鍵單擊slider圖片圖層，在彈出的菜單中選擇“創(chuàng )建剪貼蒙版”，讓slider圖片只在“slide_bg”圖層區域上顯示。如圖15，于是圖片就被裁剪得只剩slier區域的部分。此時(shí)該矩形對該圖片就會(huì )起到蒙版的作用，把矩形以外的部分遮蓋。之后你可以繼續拖動(dòng)圖片調整其位置，你會(huì )發(fā)現圖片并沒(méi)有被真的裁剪得只剩slider區域。
剪切蒙版與蒙版有些類(lèi)似，在網(wǎng)頁(yè)制作的過(guò)程中會(huì )經(jīng)常使用。使用剪切蒙版可以避免對素材的裁剪，保證其完整性以便再次調整。PS是關(guān)于圖層的藝術(shù)，在設計過(guò)程中部分素材來(lái)之不易，一定要避免對素材進(jìn)行如裁剪、變形等等“暴力”操作，否則當發(fā)現效果不理想時(shí)后悔為時(shí)已晚。
再在slider添加展示性文字
頁(yè)面整體主色調使用不太明顯，于是在slide下方增加2px的線(xiàn)，以強調主色調。(如圖12)
· content
內容部分作用是放置欄目展示信息，主要注意排版和細節處理，難度是不大的。常見(jiàn)的內容部分有幾種形式，例如采用列表式，適用于信息較少，文章展示為主：
這些畫(huà)起來(lái)應該沒(méi)啥難度的了，不過(guò)要注意幾點(diǎn)：
�、� 文章列表每行用1px虛線(xiàn)間隔，直線(xiàn)工具中把實(shí)線(xiàn)改成虛線(xiàn)即可。
�、� 對于欄目標題，如新聞速遞，建議使用圖標加文字的形式。
�、� 文章列表每行開(kāi)頭建議加一個(gè)小圓點(diǎn)，形成信息層次。
�、� 欄目?jì)热葑痔枮?4px，欄目標題字號為16px，導航、標題用微軟雅黑，正文用宋體。整個(gè)網(wǎng)站除了slider之類(lèi)的展示性文字，其余均需遵守這個(gè)原則。
�、� 字體顏色避免純黑，85%-95%的黑色閱讀性更佳，且使網(wǎng)站看起來(lái)更精致。
完成后如圖17、18、19，學(xué)院網(wǎng)首頁(yè)展示內容量大，因此設計成滑動(dòng)門(mén)的形式，可以選擇性顯示內容。
6.content制作。
欄目?jì)热莘謾�，左側主要是文字為主，右側以圖片為主。
欄目標題采用圖標加文字，圖標如果不想自己畫(huà)可以去圖標網(wǎng)站上搜索，最好保持一致。
左側的小圖標是大小合適的綠色矩形。
文章列表每行用1px虛線(xiàn)間隔，直線(xiàn)工具中把實(shí)線(xiàn)改成虛線(xiàn)即可。(文章內容可以先用相同文字占位，找到合適的內容后修改)
可以畫(huà)幾條相同虛線(xiàn)，命名xx01、xx02、xx03等，確定最上和最下的虛線(xiàn)位置，采用分布，使虛線(xiàn)等間距。
文字、圖標利用相同方式快速排列。
也可采用化院網(wǎng)站的滑動(dòng)門(mén)形式，整合多欄目信息
footer
添加版權信息、作者信息、功能入口等
footer區域用了一種深一點(diǎn)的灰，在其頂部隔1px增加一條深灰色的線(xiàn)，讓其更有質(zhì)感
完成這些之后就基本大功告成了，此時(shí)檢查是否有些必要功能漏掉，比如搜索框，然后加進(jìn)去;再看看有哪些細節需要完善，將之完善;最后若畫(huà)布高度有剩余，修改畫(huà)布大小或使用左側面板中的裁剪工具(如圖22)，以便最后輸出。
5. 輸出效果圖
設計完成后，需要輸出效果圖。直接點(diǎn)擊“儲存”，保存的是PSD文件，這是Photoshop的項目文件，日后還能打開(kāi)修改。若輸出效果圖，點(diǎn)擊“導出>>輸出為web所用格式(舊版)”，設置輸出格式為jpg，品質(zhì)為80，如圖23-24�；蛘哌x擇“儲存為”/“導出”-“導出為”-選擇jpg保存亦可。
【網(wǎng)頁(yè)設計基礎知識】相關(guān)文章：
網(wǎng)頁(yè)設計的基礎知識08-18
關(guān)于網(wǎng)頁(yè)的基礎知識10-14
網(wǎng)頁(yè)設計的設計技巧08-27
網(wǎng)頁(yè)設計的設計要點(diǎn)08-26
網(wǎng)頁(yè)設計的設計要素07-10
網(wǎng)頁(yè)設計中的設計09-21