推薦：網(wǎng)站用戶體驗(yàn)的五大分類
每個人對網(wǎng)站的使用習(xí)慣不一樣，功能要求也不一樣，要做到最好的用戶體驗(yàn)只能是照顧最主要目標(biāo)受眾的需求，因此要實(shí)現(xiàn)用戶體驗(yàn)的優(yōu)化，前提之 一是必須對自己的目標(biāo)受眾了如指掌。因此，要有一個詳細(xì)的背景調(diào)查，分析目標(biāo)受眾的屬性，分析他們的需求和行為特征，這樣才

模板無憂上有大量的PSD網(wǎng)頁模板,很多朋友都不知道如何使用PSD網(wǎng)頁模板,本教程就來教大家PSD網(wǎng)頁模板怎么用.

首先說明一下:如果想讓您導(dǎo)出的html文件符合標(biāo)準(zhǔn),兼容各個瀏覽器,那您就需要有一定的美工基礎(chǔ),熟悉photoshop軟件,了解基本的html和divcss知識.
如果您對html,和divcss不了解請到 http://www.hl5o.cn/divcssjiaocheng/ 學(xué)習(xí).
如果您對photoshop軟件不熟悉,請到 http://www.hl5o.cn/ps/ 學(xué)習(xí).

PSD是PHOTO SHOP的圖形格式，保存了制作時的各個圖層，網(wǎng)絡(luò)上下載的模板大多都為這樣的格式，目的是為了讓下載到的人能夠進(jìn)行二次修改。
如果你沒有安裝PHOTO SHOP的話，你就無法對該文件做任務(wù)的修改了，想瀏覽圖片效果，可以用ACD SEE來查看。
如果您還沒有安裝PHOTO SHOP和ACD SEE,可以在無憂的 站長常用軟件欄目下載 網(wǎng)址: http://www.hl5o.cn/x/ .

下面說一下PSD網(wǎng)頁模板具體的使用方法.

其實(shí)標(biāo)準(zhǔn)的網(wǎng)制作完成的工作實(shí)際是：psd to html，一般情況下，我們會拿到美工的psd,這時候不同的人會有不同的做法：

1.打開fireworks將圖片切割導(dǎo)出為html。

2.直接在dreamweaver之類的工具去拖拉布局，導(dǎo)入相關(guān)的圖片,flash資源。

3.先在ps中完成切圖后，在文本編輯器中看著效果圖一步步的制作。

以上是大多被采用的方法，但都不好：

第一種方法最為不好，這樣的代碼根本不具維護(hù)性和可讀性。

第二種方法也不好，代碼難免會有冗余，做出來的東西基本需要排查一遍。

第三種方法也不好，因?yàn)槟阈枰�看效果圖一點(diǎn)點(diǎn)的拼，也就是說寫html標(biāo)簽的時候，你在不斷的假設(shè)這塊要怎么去顯示。

正確的做法是：

1.拿到psd后，先不要做別的，直接在文本編輯器中將網(wǎng)頁的框架寫出來，不要假設(shè)這塊將來css要去怎么渲染，完全自然化的標(biāo)簽，不加任何的css。

2.寫完之后在各個瀏覽器運(yùn)行之后確保大體定位都沒有問題。

3.書寫總體css,這里的css只負(fù)責(zé)大塊的定位及樣式。

4.切出需要的圖片資源，在寫好的框架中一點(diǎn)點(diǎn)的去構(gòu)造，不斷的調(diào)試，最終為成品。

5.最后，為自己的代碼添加注釋，在css，html中都要合適的為自己的代碼添加注釋。

要想做出能靈活切換皮膚，讓css主導(dǎo)表現(xiàn)，還有很多要注意的地方，但大體的流程就是這樣的，當(dāng)然我們一開始不能直接就做到先寫html，但起碼要有這個意識，循序漸進(jìn)。。。

PSD出網(wǎng)站從兩個大點(diǎn)考慮

一、一個獨(dú)立的頁面
1、分析這個頁面，先在腦袋中或者草稿紙上描繪大概的結(jié)構(gòu)
2、根據(jù)設(shè)計(jì)稿的的情況，分析背景圖的分布、ICO圖的分布等
3、切割相應(yīng)的圖片，導(dǎo)出、合并圖片
4、在編輯器中寫整體結(jié)構(gòu)XHTML代碼，包括頁面中出現(xiàn)的所有元素的結(jié)構(gòu)
5、編寫CSS樣式中的整體以及模塊代碼
6、細(xì)節(jié)調(diào)整
7、收工，瀏覽器驗(yàn)證是否正確

二、由多個頁面組成的小站點(diǎn)或者大站點(diǎn)
1、瀏覽所有設(shè)計(jì)稿，統(tǒng)一規(guī)劃站點(diǎn)模塊、圖片、文件分布
2、開始第一點(diǎn)的操作，但規(guī)劃站點(diǎn)的內(nèi)容分布很重要

整體考慮點(diǎn)：
圖片的合并，減少請求量
結(jié)構(gòu)的合理性，語義化
樣式的簡潔，便于后期維護(hù)
多為后期的維護(hù)以及程序開發(fā)著想，如何簡單實(shí)現(xiàn)效果。

一個將PSD網(wǎng)頁模板切片后制作成網(wǎng)頁的視頻教程,網(wǎng)址http://www.56.com/u93/v_NTQyNzEzNTQ.html
使用的是直接psd切圖導(dǎo)出的方式.
 

分享：專業(yè)網(wǎng)頁設(shè)計(jì)教程
最近在網(wǎng)上看到這篇文章，覺得不錯，通俗而實(shí)際，有利于新手理解和快速上手。轉(zhuǎn)載過來讓更多的人看到。 看過很多網(wǎng)頁設(shè)計(jì)教程文章，但不是說的太高深，對我們實(shí)際設(shè)計(jì)工作并無什么用處，就是東