西安網(wǎng)站建設(shè)礎(chǔ)教程分享——學(xué)術(shù)類(lèi)網(wǎng)站建設(shè)詳細(xì)步驟！

　　西安網(wǎng)站建設(shè)礎(chǔ)教程分享!

　　一、需求分析

　　(1)網(wǎng)站風(fēng)格

　　1. 整體格調(diào)：學(xué)術(shù)類(lèi)網(wǎng)站、內(nèi)容精煉，形式簡(jiǎn)潔。

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

　　3. 配色應(yīng)用：主色調(diào)采用 #00702a ，背景色采用 #f5f5f5 。

　　4. 基本功能：文章發(fā)布，圖片展示。

　　5.基本要求：符合大學(xué)視覺(jué)形象識(shí)別規(guī)范、色調(diào)與主網(wǎng)站保持一致、網(wǎng)站內(nèi)容與舊版內(nèi)容基本一致、便于文章內(nèi)容更新及實(shí)時(shí)信息發(fā)布。

　　(2)首頁(yè)要求

　　1. 圖片展示為主，格調(diào)文化典雅。

　　2. 尺寸：內(nèi)容寬度1200px，slide**為1920px。首屏高度800-1200px

　　3. 布局采用擴(kuò)展全屏，突出圖片，保證圖片slide在首屏高度內(nèi)。

　　布局：由上至下;

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

　　· slider/滑動(dòng)圖片 圖文并茂的形式展示網(wǎng)站理念或主旨，是首頁(yè)是否出彩的決定性因素

　　· content/內(nèi)容 內(nèi)容不多，用文章列表的方式呈現(xiàn)

　　· footer/腳部 版權(quán)信息、作者信息、友情鏈接等

　　(3)網(wǎng)站欄目結(jié)構(gòu)

　　導(dǎo)航欄：中心概況、組織架構(gòu)、實(shí)驗(yàn)教學(xué)、設(shè)備環(huán)境、管理制度、開(kāi)放實(shí)驗(yàn)、創(chuàng)新基金、學(xué)生感言。

　　二級(jí)欄目： 無(wú)二級(jí)欄目。

　　二、確定布局

　　1.需求分析時(shí)已確定網(wǎng)站首頁(yè)以圖片展示為主，尺寸已定，我們需要的網(wǎng)頁(yè)內(nèi)容寬度是1200px，而網(wǎng)頁(yè)**寬度為1920px。如何建立文檔?

　　在ps中新建寬度為1200px、高度隨意、分辨率為72ppi、RGB顏色模式的文檔，注意文檔規(guī)范語(yǔ)義化命名為“網(wǎng)站名稱(chēng)_index_版本_日期”。

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

　　2.文檔建立后，即拉出兩條縱向輔助線到文檔邊緣。

　　后面制作的過(guò)程中，可以改變畫(huà)布的大小。選擇菜單面板的“圖像-畫(huà)布大小”。“定位”可選擇擴(kuò)充/裁剪方向。

　　2. 建立輔助線

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

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

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

　　內(nèi)容寬度為1200px，因此將左右邊距設(shè)置為(1920-1200)/2=360px;導(dǎo)航共9個(gè)欄目，因此將列數(shù)設(shè)置為9。

　　**在畫(huà)布邊界也拉上輔助線，當(dāng)你沿著輔助線畫(huà)圖(矩形、直線等)的時(shí)候它會(huì)自動(dòng)貼齊輔助線，這樣就不會(huì)畫(huà)出邊界了。如果輔助線太多，可以按ctrl+h來(lái)隱藏輔助線，查看整體效果，再按一次即可顯示回來(lái)。

　　但是拖動(dòng)得到輔助線有時(shí)難以準(zhǔn)確，為了精確的像素調(diào)整，可直接使用菜單面板的“視圖-新建參考線”，直接建立360px，1560px兩條參考線來(lái)限定網(wǎng)頁(yè)內(nèi)容范圍。

　　3. 建立布局

　　根據(jù)需求分析，大概定一下網(wǎng)站的banner、slider、content、copyright的高度(之后可以調(diào)整)，banner及slider的高度不要超過(guò)578px。因?yàn)橹髁黠@示器分辨率為1366*768px，減去瀏覽器的高度首屏高度就剩下578px了，為了保證slider在屏幕上顯示完全，必須使banner+slider≤578px。

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

　　4. 置入內(nèi)容

　　· banner

　　首頁(yè)banner一個(gè)重要的功能是展示網(wǎng)站的名稱(chēng)和logo。網(wǎng)站名稱(chēng)和logo直接放在導(dǎo)航左側(cè)空白處，右側(cè)可以通過(guò)放置一些與網(wǎng)站相關(guān)的圖片平衡頁(yè)面，如化院首頁(yè)的分子圖、校友會(huì)網(wǎng)站的紙筆等等，但需注意的是以上內(nèi)容均應(yīng)控制在1200px的參考線內(nèi)。

　　為使圖片素材融入背景，你可能需要進(jìn)行摳圖、降低不透明度、畫(huà)筆調(diào)整等操作。

　　· navigation

　　沿著nav區(qū)域畫(huà)一個(gè)顏色為#00702a的矩形，如果覺(jué)得太扁平，通過(guò)改變圖層樣式(雙擊圖層，或者右鍵-混合模式，即可到達(dá)圖層樣式面板)來(lái)增加質(zhì)感，最后輔助線建立的各欄內(nèi)置入各欄目名稱(chēng)(字號(hào)16px，字體為微軟雅黑)。選用斜面和浮雕效果。

　　接下來(lái)增加點(diǎn)細(xì)節(jié)，在兩欄之間加分隔線。

　　實(shí)現(xiàn)方法：

　　① 畫(huà)一個(gè)寬1px，高30px的矩形，填充白色;

　　② 再畫(huà)一個(gè)相同的矩形，填充一種比背景更深的綠色，并把它貼在上面那個(gè)矩形的右側(cè);

　　③ 適當(dāng)降低兩個(gè)矩形的不透明度，如30%;

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

　　④ 雙擊白色矩形圖層，打開(kāi)圖層樣式面板，選擇漸變疊加。“漸變”左側(cè)選擇白色，右側(cè)選擇背景綠(勾選反向時(shí)要反著選)，“樣式”選擇“對(duì)稱(chēng)的”，“角度”為90度，適當(dāng)降低“不透明度”和控制“縮放”，直到達(dá)到自己滿意的效果。右邊的“預(yù)覽”可以讓你查看實(shí)時(shí)效果，記得勾選哦。同理，對(duì)于深色矩形，將“漸變”中白色改成改矩形的顏色，其余一致。快速的方法是右鍵圖層-復(fù)制圖層樣式，再右鍵另一個(gè)圖層-粘貼圖層樣式，更改漸變中的顏色即可。

　　· slider

　　沿著slider參考線畫(huà)一個(gè)白色(或任意顏色，但不要描邊)的矩形，把制作好的slide圖片從文件夾直接拉入畫(huà)布中，置于“slider_bg”圖層之上。右鍵單擊slider圖片圖層，在彈出的菜單中選擇“創(chuàng)建剪貼蒙版”，讓slider圖片只在“slide_bg”圖層區(qū)域上顯示。于是圖片就被裁剪得只剩slier區(qū)域的部分。此時(shí)該矩形對(duì)該圖片就會(huì)起到蒙版的作用，把矩形以外的部分遮蓋。之后你可以繼續(xù)拖動(dòng)圖片調(diào)整其位置，你會(huì)發(fā)現(xiàn)圖片并沒(méi)有被真的裁剪得只剩slider區(qū)域。

　　剪切蒙版與蒙版有些類(lèi)似，在網(wǎng)頁(yè)制作的過(guò)程中會(huì)經(jīng)常使用。使用剪切蒙版可以避免對(duì)素材的裁剪，保證其完整性以便再次調(diào)整。PS是關(guān)于圖層的藝術(shù)，在設(shè)計(jì)過(guò)程中部分素材來(lái)之不易，一定要避免對(duì)素材進(jìn)行如裁剪、變形等等“暴力”操作，否則當(dāng)發(fā)現(xiàn)效果不理想時(shí)后悔為時(shí)已晚。

　　再在slider添加展示性文字

　　頁(yè)面整體主色調(diào)使用不太明顯，于是在slide下方增加2px的線，以強(qiáng)調(diào)主色調(diào)。

　　· content

　　內(nèi)容部分作用是放置欄目展示信息，主要注意排版和細(xì)節(jié)處理，難度是不大的。常見(jiàn)的內(nèi)容部分有幾種形式，例如采用列表式，適用于信息較少，文章展示為主：

　　這些畫(huà)起來(lái)應(yīng)該沒(méi)啥難度的了，不過(guò)要注意幾點(diǎn)：

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

　　② 對(duì)于欄目標(biāo)題，如新聞速遞，建議使用圖標(biāo)加文字的形式。

　　③ 文章列表每行開(kāi)頭建議加一個(gè)小圓點(diǎn)，形成信息層次。

　　④ 欄目?jī)?nèi)容字號(hào)為14px，欄目標(biāo)題字號(hào)為16px，導(dǎo)航、標(biāo)題用微軟雅黑，正文用宋體。整個(gè)網(wǎng)站除了slider之類(lèi)的展示性文字，其余均需遵守這個(gè)原則。

　　⑤ 字體顏色避免純黑，85%-95%的黑色閱讀性更佳，且使網(wǎng)站看起來(lái)更精致。

　　完成后學(xué)院網(wǎng)首頁(yè)展示內(nèi)容量大，因此設(shè)計(jì)成滑動(dòng)門(mén)的形式，可以選擇性顯示內(nèi)容。

　　6.content制作。

　　欄目?jī)?nèi)容分欄，左側(cè)主要是文字為主，右側(cè)以圖片為主。

　　欄目標(biāo)題采用圖標(biāo)加文字，圖標(biāo)如果不想自己畫(huà)可以去圖標(biāo)網(wǎng)站上搜索，**保持一致。

　　左側(cè)的小圖標(biāo)是大小合適的綠色矩形。

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

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

　　文字、圖標(biāo)利用相同方式快速排列。

　　也可采用化院網(wǎng)站的滑動(dòng)門(mén)形式，整合多欄目信息

　　footer

　　添加版權(quán)信息、作者信息、功能入口等

　　footer區(qū)域用了一種深一點(diǎn)的灰，在其頂部隔1px增加一條深灰色的線，讓其更有質(zhì)感

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

　　5. 輸出效果圖

　　設(shè)計(jì)完成后，需要輸出效果圖。直接點(diǎn)擊“儲(chǔ)存”，保存的是PSD文件，這是Photoshop的項(xiàng)目文件，日后還能打開(kāi)修改。若輸出效果圖，點(diǎn)擊“導(dǎo)出>>輸出為web所用格式(舊版)”，設(shè)置輸出格式為jpg，品質(zhì)為80。或者選擇“儲(chǔ)存為”/“導(dǎo)出”-“導(dǎo)出為”-選擇jpg保存亦可。

　　六、FAQ

　　1. kuler怎么使用?

　　對(duì)于初學(xué)者，不建議自己創(chuàng)建配色。建議點(diǎn)擊導(dǎo)航條中的“探索”，再在搜索框中根據(jù)自己的需求搜索配色。如輸入“blue”搜索(注意關(guān)鍵詞為英語(yǔ))，可得到一系列藍(lán)色的配色，選擇自己合適的一系列配色，點(diǎn)擊下載。(下載是需要登陸Adobe ID的)

　　下載完成后，在PS中的色板中點(diǎn)擊右上角的小圖標(biāo)，彈出菜單，選擇“載入色板”。

　　選擇剛剛下載保存的文件，點(diǎn)擊“載入”，顏色即可載入到ps的色板中。

　　2. ps里面如何畫(huà)出固定大小的矩形?畫(huà)好矩形之后如何查看各個(gè)矩形大小?

　　選擇矩形工具，在畫(huà)布上右擊，此時(shí)會(huì)出現(xiàn)一個(gè)對(duì)話框，輸入你想要的矩形的長(zhǎng)寬大小，即可得到準(zhǔn)確的矩形。

　　至于查看矩形大小，可點(diǎn)擊“窗口>>信息”，打開(kāi)信息面板，選擇想要查看的矩形，按一下“ctrl+t”，即可看到矩形的大小。(信息面板可查看矩形的色彩信息、位置信息及大小信息)

　　3. 畫(huà)矩形框時(shí)出現(xiàn)的單位為厘米，而不是像素，怎么辦?

　　Ctrl+R打開(kāi)ps中的標(biāo)尺，在標(biāo)尺上右擊，會(huì)出現(xiàn)一個(gè)菜單，在菜單中選擇“像素”，即可把ps中的單位改為像素。

　　4. banner和nav的背景紋理怎么增加?

　　將所給素材中名為"紋理"的圖片在ps中單獨(dú)打開(kāi)，點(diǎn)擊“編輯>>定義圖案”，給新圖案命名，確定。此時(shí)我們的新紋理就進(jìn)入了ps的圖案面板了。

　　然后回到我們的網(wǎng)頁(yè)文檔，右擊banner的背景圖層，即右擊“banner bg”圖層，彈出菜單中選擇“混合選項(xiàng)”，打開(kāi)圖層混合選項(xiàng)對(duì)話框。勾選右邊欄中的“圖案疊加”，在切換到圖案疊加的詳細(xì)選項(xiàng)，點(diǎn)擊下拉圖案處。

　　在下拉圖案的最下方，找到剛剛定義的圖案，選擇，面板中的其他選項(xiàng)如圖設(shè)置，然后點(diǎn)擊確定。紋理添加完成。)

　　5. ps里面如何畫(huà)虛線?

　　使用PS CS6 及以上版本時(shí)：使用直線工具，畫(huà)出直線，在菜單欄下方的屬性欄修改直線的屬性。設(shè)置填充為無(wú)，自定描邊顏色，描邊大小為1。描邊右方下拉框，選擇描邊形式為虛線。即可得到1px的虛線。

　　使用PS CS5及以下版本時(shí)：使用鉛筆工具，點(diǎn)擊畫(huà)筆預(yù)設(shè)按鈕

　　彈出畫(huà)筆預(yù)設(shè)面板，調(diào)整畫(huà)筆的各個(gè)參數(shù)，最重要的是把畫(huà)筆間距調(diào)成300%。

　　新建圖層，在其上按著shift鍵，同時(shí)畫(huà)出直線。按shift鍵是為了保證所畫(huà)線條是直線。虛線完成。

　　對(duì)比以上兩種方法，**種方法更佳，因?yàn)?*種方法畫(huà)出的虛線是矢量，后期可隨時(shí)修改顏色和大小，而第二種方法所畫(huà)虛線不是矢量，后期不可修改。所以建議使用**種方法，第二種方法僅提供給沒(méi)有安裝CS6以上版本的同學(xué)，還是強(qiáng)烈建議升級(jí)軟件。

　　6. 設(shè)計(jì)時(shí)，各部分的字體樣式是怎樣的?

　　導(dǎo)航：微軟雅黑/宋體，16px-18px。

　　標(biāo)題：微軟雅黑/宋體，16px。

　　正文/文章列表：宋體，14px，#000，行間距21px。