網頁設計基礎知識

大家在瀏覽網頁時經常可以看優秀的海報設計，這些設計往往可以通過其優秀的顏色處理、場景打造、氛圍渲染、排版佈局、文字處理以及巧妙的創意等方面來抓住瀏覽者的眼球。那麼今天我們就跟大家分享網頁設計基礎知識。

　　一、需求分析

　　(1)網站風格

網站為學院網站的子站點，同時需保持舊版內容大致，具體分為以下幾個方面：

1. 整體格調：學術科研類網站、內容精煉，形式簡潔。

2. 版式佈局：精心編排、層次清晰、美觀實用，方便瀏覽。。

3. 配色應用：主色調採用 #00702a ，背景色採用 #f5f5f5 。

4. 基本功能：文章發佈，圖片展示。

5.基本要求：符合大學視覺形象識別規範、色調與主網站保持一致、網站內容與舊版內容基本一致、便於文章內容更新及實時信息發佈。

　　(2)首頁要求

1. 圖片展示為主，格調文化典雅。

2. 尺寸：內容寬度1200px，slide最大為1920px。首屏高度800-1200px

3. 佈局採用擴展全屏，突出圖片，保證圖片slide在首屏高度內。

佈局：由上至下;

· header/頭部 這部分包括banner和nav(導航)，其中nav採用了下拉菜單

· slider/滑動圖片 圖文並茂的形式展示網站理念或主旨，是首頁是否出彩的決定性因素

· content/內容 內容不多，用文章列表的方式呈現

· footer/腳部 版權信息、作者信息、友情鏈接等

　　(3)網站欄目結構

導航欄：中心概況、組織架構、實驗教學、設備環境、管理制度、開放實驗、創新基金、學生感言。

二級欄目： 無二級欄目。

　　二、確定佈局

1.需求分析時已確定網站首頁以圖片展示為主，尺寸已定，我們需要的網頁內容寬度是1200px，而網頁最大寬度為1920px。如何建立文檔?

在ps中新建寬度為1200px、高度隨意、分辨率為72ppi、RGB顏色模式的文檔，注意文檔規範語義化命名為“網站名稱_index_版本_日期”(如圖1)。

.紅色框的參數和單位需注意，一般默認參數和單位，但是避免部分同學的默認參數存在問題，找不到原因而苦惱，另外背景內容透明和白色均可，無影響。

2.文檔建立後，即拉出兩條縱向輔助線到文檔邊緣(如圖2)。

後面製作的過程中，可以改變畫布的大小。選擇菜單面板的“圖像-畫布大小”，如圖3。“定位”可選擇擴充/裁剪方向。

　　2. 建立輔助線

快速建立輔助線的方法是：直接從標尺上拖出一條輔助線。假如沒看到標尺，選擇菜單面板的“視圖-標尺”打上勾，如圖3。

選擇“新建參考線”，精確定義參考線位置：

或者選擇“新建參考線版面”，一鍵分欄：

內容寬度為1200px，因此將左右邊距設置為(1920-1200)/2=360px;導航共9個欄目，因此將列數設置為9，如圖7。

最好在畫布邊界也拉上輔助線，當你沿着輔助線畫圖(矩形、直線等)的時候它會自動貼齊輔助線，這樣就不會畫出邊界了。如果輔助線太多，可以按ctrl+h來隱藏輔助線，查看整體效果，再按一次即可顯示回來。

但是拖動得到輔助線有時難以準確，為了精確的像素調整，可直接使用菜單面板的“視圖-新建參考線”，直接建立360px，1560px兩條參考線來限定網頁內容範圍。

　　3. 建立佈局

根據需求分析，大概定一下網站的banner、slider、content、copyright的高度(之後可以調整)，banner及slider的高度不要超過578px。因為主流顯示器分辨率為1366*768px，減去瀏覽器的高度首屏高度就剩下578px了，為了保證slider在屏幕上顯示完全，必須使banner+slider≤578px。

同時建立五個文件夾，每個區域的圖層分別放在對應的文件夾裏。各文件夾可以用不同顏色標記(右鍵單擊文件夾→選擇顏色標記)，在含有大量圖層的時候方便快速找到文件夾，切記各文件夾和圖層命名語義化。以上措施均是為了方便圖層的更改和管理。

4. 置入內容

· banner

首頁banner一個重要的功能是展示網站的名稱和logo。網站名稱和logo直接放在導航左側空白處，右側可以通過放置一些與網站相關的圖片平衡頁面，如化院首頁的分子圖、校友會網站的紙筆等等，但需注意的是以上內容均應控制在1200px的參考線內。

為使圖片素材融入背景，你可能需要進行摳圖、降低不透明度、畫筆調整等操作。

　　· navigation

沿着nav區域畫一個顏色為#00702a的矩形，如果覺得太扁平，通過改變圖層樣式(雙擊圖層，或者右鍵-混合模式，即可到達圖層樣式面板)來增加質感，最後輔助線建立的各欄內置入各欄目名稱(字號16px，字體為微軟雅黑)，如圖11。這裏選用了斜面和浮雕效果，參數如圖12所示。

接下來增加點細節，在兩欄之間加分隔線，如圖13。

　　實現方法：

① 畫一個寬1px，高30px的矩形，填充白色;

② 再畫一個相同的矩形，填充一種比背景更深的綠色，並把它貼在上面那個矩形的右側;

③ 適當降低兩個矩形的'不透明度，如30%;

以上就是利用一根淺顏色和一根深顏色的1px的線打造刻線質感的方法，到此已經基本完成，倘若要做得更細，可繼續看第④步，做一點漸變，讓它不那麼生硬。

④ 雙擊白色矩形圖層，打開圖層樣式面板，選擇漸變疊加。如圖14，“漸變”左側選擇白色，右側選擇背景綠(勾選反向時要反着選)，“樣式”選擇“對稱的”，“角度”為90度，適當降低“不透明度”和控制“縮放”，直到達到自己滿意的效果。右邊的“預覽”可以讓你查看實時效果，記得勾選哦。同理，對於深色矩形，將“漸變”中白色改成改矩形的顏色，其餘一致。快速的方法是右鍵圖層-複製圖層樣式，再右鍵另一個圖層-粘貼圖層樣式，更改漸變中的顏色即可。

　　· slider

沿着slider參考線畫一個白色(或任意顏色，但不要描邊)的矩形，把製作好的slide圖片從文件夾直接拉入畫布中，置於“slider_bg”圖層之上。右鍵單擊slider圖片圖層，在彈出的菜單中選擇“創建剪貼蒙版”，讓slider圖片只在“slide_bg”圖層區域上顯示。如圖15，於是圖片就被裁剪得只剩slier區域的部分。此時該矩形對該圖片就會起到蒙版的作用，把矩形以外的部分遮蓋。之後你可以繼續拖動圖片調整其位置，你會發現圖片並沒有被真的裁剪得只剩slider區域。

剪切蒙版與蒙版有些類似，在網頁製作的過程中會經常使用。使用剪切蒙版可以避免對素材的裁剪，保證其完整性以便再次調整。PS是關於圖層的藝術，在設計過程中部分素材來之不易，一定要避免對素材進行如裁剪、變形等等“暴力”操作，否則當發現效果不理想時後悔為時已晚。

　　再在slider添加展示性文字

頁面整體主色調使用不太明顯，於是在slide下方增加2px的線，以強調主色調。(如圖12)

· content

內容部分作用是放置欄目展示信息，主要注意排版和細節處理，難度是不大的。常見的內容部分有幾種形式，例如採用列表式，適用於信息較少，文章展示為主：

這些畫起來應該沒啥難度的了，不過要注意幾點：

① 文章列表每行用1px虛線間隔，直線工具中把實線改成虛線即可。

② 對於欄目標題，如新聞速遞，建議使用圖標加文字的形式。

③ 文章列表每行開頭建議加一個小圓點，形成信息層次。

④ 欄目內容字號為14px，欄目標題字號為16px，導航、標題用微軟雅黑，正文用宋體。整個網站除了slider之類的展示性文字，其餘均需遵守這個原則。

⑤ 字體顏色避免純黑，85%-95%的黑色閲讀性更佳，且使網站看起來更精緻。

完成後如圖17、18、19，學院網首頁展示內容量大，因此設計成滑動門的形式，可以選擇性顯示內容。

　　ent製作。

欄目內容分欄，左側主要是文字為主，右側以圖片為主。

欄目標題採用圖標加文字，圖標如果不想自己畫可以去圖標網站上搜索，最好保持一致。

左側的小圖標是大小合適的綠色矩形。

文章列表每行用1px虛線間隔，直線工具中把實線改成虛線即可。(文章內容可以先用相同文字佔位，找到合適的內容後修改)

可以畫幾條相同虛線，命名xx01、xx02、xx03等，確定最上和最下的虛線位置，採用分佈，使虛線等間距。

文字、圖標利用相同方式快速排列。

也可採用化院網站的滑動門形式，整合多欄目信息

　　footer

添加版權信息、作者信息、功能入口等

footer區域用了一種深一點的灰，在其頂部隔1px增加一條深灰色的線，讓其更有質感

完成這些之後就基本大功告成了，此時檢查是否有些必要功能漏掉，比如搜索框，然後加進去;再看看有哪些細節需要完善，將之完善;最後若畫布高度有剩餘，修改畫布大小或使用左側面板中的裁剪工具(如圖22)，以便最後輸出。

　　5. 輸出效果圖

設計完成後，需要輸出效果圖。直接點擊“儲存”，保存的是PSD文件，這是Photoshop的項目文件，日後還能打開修改。若輸出效果圖，點擊“導出>>輸出為web所用格式(舊版)”，設置輸出格式為jpg，品質為80，如圖23-24。或者選擇“儲存為”/“導出”-“導出為”-選擇jpg保存亦可。