其實(shí)標(biāo)準(zhǔn)的網(wǎng)制作完成的工作實(shí)際是：psd to html，一般情況下，我們會拿到美工的psd,這時(shí)候不同的人會有不同的做法： 1.打開fireworks將圖片切割導(dǎo)出為html。 2.直接在dreamweaver之類的工具去拖拉布局，導(dǎo)入相關(guān)的圖片,flash資源。 3.先在ps中完成切圖后，在文本編輯器中看著效果圖一步步的制作。 以上是大多被采用的方法，但都不好： 第一種方法最為不好，這樣的代碼根本不具維護(hù)性和可讀性。 第二種方法也不好，代碼難免會有冗余，做出來的東西基本需要排查一遍。 第三種方法也不好，因?yàn)槟阈枰葱Ч麍D一點(diǎn)點(diǎn)的拼，也就是說寫html標(biāo)簽的時(shí)候，你在不斷的假設(shè)這塊要怎么去顯示。 正確的做法是： 1.拿到psd后，先不要做別的，直接在文本編輯器中將網(wǎng)頁的框架寫出來，不要假設(shè)這塊將來css要去怎么渲染，完全自然化的標(biāo)簽，不加任何的css。 2.寫完之后在各個(gè)瀏覽器運(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，但起碼要有這個(gè)意識，循序漸進(jìn)。。。謝謝熱心會員"linxz"提供實(shí)際經(jīng)驗(yàn)，我貼上來供大家參考：PSD出網(wǎng)站從兩個(gè)大點(diǎn)考慮一、一個(gè)獨(dú)立的頁面1、分析這個(gè)頁面，先在腦袋中或者草稿紙上描繪大概的結(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)證是否正確二、由多個(gè)頁面組成的小站點(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)效果 參考資料： http://www.wzsky.net/html/Website/Experience/107671.html

你這個(gè)是畢業(yè)設(shè)計(jì)的作業(yè)吧，呵呵?？梢栽囍约鹤雠?。很簡單的，可以參考這些模板站上的頁面。首先你先搜下這網(wǎng)站里面的模板風(fēng)格，下載一套你中意的模板，不需要太復(fù)雜的，簡單一些。www.mobangwang.com，www.drame.cn然后要開始修改PSD的圖，再進(jìn)行切圖，然后用DW開始DIV或者TABLE表格制作，最后生成HTML的靜態(tài)網(wǎng)頁，就完工了。FLASH的話，用FLASH MX制作。很簡單，就是背景圖導(dǎo)入，然后添加文字。

你這個(gè)是畢業(yè)設(shè)計(jì)的作業(yè)吧，呵呵。可以試著自己做哦。很簡單的，可以參考這些模板站上的頁面。首先你先搜下這網(wǎng)站里面的模板風(fēng)格，下載一套你中意的模板，不需要太復(fù)雜的，簡單一些。www.mobangwang.com，www.drame.cn然后要開始修改PSD的圖，再進(jìn)行切圖，然后用DW開始DIV或者TABLE表格制作，最后生成HTML的靜態(tài)網(wǎng)頁，就完工了。FLASH的話，用FLASH MX制作。很簡單，就是背景圖導(dǎo)入，然后添加文字。

網(wǎng)頁模板就是已經(jīng)做好的網(wǎng)頁框架，使用網(wǎng)頁編輯軟件輸入自己需要的內(nèi)容，再發(fā)布到自己的網(wǎng)站。每個(gè)網(wǎng)頁模板壓縮包內(nèi)包含：PSD圖片文件(可用Photoshop、ImageReady或Fireworks修改)，按鈕圖片PSD文件、Flash源文件和字體文件，推薦使用Dreamweaver軟件向網(wǎng)頁模板添加內(nèi)容。1）模板的概念：作為創(chuàng)建其它文檔的樣板的文檔。創(chuàng)建模板時(shí)，可以說明哪些網(wǎng)頁元素不可編輯，哪些元素可以編輯。其擴(kuò)展名為.dwt。2）模板的作用：有利于保持網(wǎng)頁風(fēng)格的一致；提高工作效率。1．創(chuàng)建模板1）創(chuàng)建一個(gè)全新的模板：在模板面板中，使用快捷菜單按鈕或單擊面板上的新建按鈕模板面板的打開：Window菜單--Templates2）創(chuàng)建基于文檔的模板：File菜單-Save As Template2．設(shè)置模板頁面屬性1）用模板創(chuàng)建的文檔繼承模板的頁面屬性，頁標(biāo)題除外。2）設(shè)置：Modify菜單-Page Properties3．定義模板的可編輯區(qū)1）定義模板的可編輯區(qū)在模板文檔中選定對象、Modify菜單、Templates、New Editable Region2）取消可編輯區(qū)標(biāo)記Modify菜單-Templates-Remove Editable Region

PSD是給你的網(wǎng)站圖版,你可以通過修改各層來更改成你想要的網(wǎng)站外觀=html格式的是已有的PSD用切片功能切出來的頁面,你如果不想改網(wǎng)站外觀就直接用他的HTML格式的源碼就行了,CSS是HTML中對字體,圖片,鏈接,整體布局的樣式頁面

設(shè)計(jì)素材網(wǎng)站大全 經(jīng)典素材，是設(shè)計(jì)師創(chuàng)意的利劍。收集整理了幾大素材門戶網(wǎng)站。 一、站酷（ZCOOL） ： http://www.zcool.com.cn/ 專業(yè)完美的素材下載與設(shè)計(jì)分享網(wǎng)站，提供矢量素材、PSD分層素材、圖標(biāo)素材、高清圖片、原創(chuàng)作品等內(nèi)容。前沿時(shí)尚的設(shè)計(jì)風(fēng)格，日韓歐美設(shè)計(jì)素材應(yīng)有盡有。站酷網(wǎng)站簡潔美觀，視覺沖擊力強(qiáng)。 二、素材中國 ： http://www.sccnn.com/ 提供各類設(shè)計(jì)素材的收集下載，包括：圖片、素材、壁紙、網(wǎng)頁素材、動畫素材、矢量圖、PSD分層素材、3D、字體、教材、圖標(biāo)，等等。 三、站長素材： http://sc.chinaz.com/ 提供各類設(shè)計(jì)素材的收集下載，包括：圖片下載、網(wǎng)頁模板、圖標(biāo)下載、酷站欣賞、QQ表情、矢量素材、PSD分層素材、音效下載、桌面壁紙、網(wǎng)頁素材，等等。資源豐富，更新及時(shí)，專題素材下載也是它的特色。 四、昵圖網(wǎng)： http://www.nipic.com/ 提供各類素材，包括：圖庫、圖片、攝影、設(shè)計(jì)、矢量、PSD、AI、CDR、EPS、圖片下載、共享圖庫，等等。 五、中國素材網(wǎng)： http://www.sucai.com/ 提供高精圖、矢量圖、桌面背景、LOGO、PNG圖、網(wǎng)頁模板、QQ表情、字體下載、音效、網(wǎng)頁特效、論文、范文等內(nèi)容。 六、素材資源庫： http://sc.52design.com/ 資源豐富，分類繁多，就是沒有提供資源搜索功能，使用起來不太方便。提供網(wǎng)頁模板、Flash源碼、矢量素材、PSD素材、透明Flash資源、字體下載、PS筆刷、網(wǎng)頁背景、音效素材、腳本特效，等等。 七、聯(lián)盟素材： http://sc.68design.net/ 網(wǎng)站簡潔清爽，廣告很少，這里的網(wǎng)頁設(shè)計(jì)素材是很不錯(cuò)的。當(dāng)然，還提供網(wǎng)頁模板、圖庫壁紙、特色圖標(biāo)、矢量素材、代碼素材、Flash素材、其它素材，等等。 八、沃格斯克網(wǎng)： http://www.orgsc.com/ 內(nèi)容非常豐富，廣告也是。專于網(wǎng)頁設(shè)計(jì)素材，提供設(shè)計(jì)素材、Flash源文件、PSD源文件，等等素材下載，非常適合網(wǎng)頁設(shè)計(jì)師。 九、懶人圖庫： http://www.lanrentuku.com/ 網(wǎng)站介紹：懶人圖庫自建站以來，一直致力于網(wǎng)頁素材的提供，目標(biāo)是做成國內(nèi)最大的網(wǎng)頁素材下載站。懶人圖庫口號：學(xué)會偷懶，并懶出境界是提高工作效率最有效的方法！ 專注于提供網(wǎng)頁素材下載，其內(nèi)容涵蓋網(wǎng)頁素材、矢量素材、JS廣告代碼、小圖片、網(wǎng)頁背景、導(dǎo)航菜單、PNG圖標(biāo)，等等。懶人圖庫深入人心，做到了“讓任何一個(gè)網(wǎng)頁設(shè)計(jì)師都能輕松找到自己想要的素材”。 十、維奇素材網(wǎng)： http://www.veeqi.com/ 收集的素材資源豐富，但下載資源（大部分）需要收取一定維奇幣。提供免費(fèi)矢量素材、PSD分層、圖標(biāo)素材、網(wǎng)頁素材、中文字體、網(wǎng)頁模板與壁紙、PS教程等平面設(shè)計(jì)素材。維奇素材網(wǎng)頁面清爽明快，廣告也少。 十一、視覺中國下吧： http://down.chinavisual.com/ 由視覺中國資深編輯精心挑選的國內(nèi)外優(yōu)秀設(shè)計(jì)素材，網(wǎng)羅矢量、icon、壁紙、PSD、電子刊物、圖案、字體、三維場景、材質(zhì)貼圖、主題等多個(gè)素材門類，為用戶提供高質(zhì)量的素材資料。 十二、豬八戒學(xué)院： http://xy.zhubajie.com/ 資源豐富，其它素材站所沒有的，這里都有，值得收藏。提供矢量、欣賞、酷站、圖片、圖標(biāo)、桌面、PSD、代碼、Flash、背景、字體、 顏色，等等。 十三、紅動圖爸： http://sucai.redocn.com/ 設(shè)計(jì)素材網(wǎng)站大全(2): 提供PSD分層素材、 設(shè)計(jì) 圖片、攝影圖片、 設(shè)計(jì) 字體、原創(chuàng) 設(shè)計(jì) 作品欣賞，等等。共享資源不是很多，需要資源幣才能下載。 十四、素材世界： http://www.sssccc.com/ 以高精度圖庫、PSD分層圖庫素材為主打，PSD素材 提供PSD分層素材、設(shè)計(jì)圖片、攝影圖片、設(shè)計(jì)字體、原創(chuàng)設(shè)計(jì)作品欣賞，等等。共享資源不是很多，需要資源幣才能下載。 十四、素材世界： http://www.sssccc.com/ 以高精度圖庫、PSD分層圖庫素材為主打，PSD素材資源絕對比任何素材網(wǎng)站豐富。只是網(wǎng)站過于簡潔，首頁幾乎沒什么圖片，全是文字，也不支持資源搜索，廣告太多，谷歌聯(lián)盟的廣告有意與導(dǎo)航菜單混淆，有誘惑用戶點(diǎn)擊廣告的嫌疑，美工有待改進(jìn)，用戶體驗(yàn)很非常不好。 十五、圖酷： http://www.tucoo.com/ 設(shè)計(jì)師的隨身圖庫：設(shè)計(jì)素材、插畫、卡通、CG、矢量、時(shí)尚、圖案、網(wǎng)頁素材全方位素材圖片庫。 十六、3lian素材： http://www.3lian.com/ 3lian素材網(wǎng)（ www.3lian.com ）創(chuàng)建于2004年10月，是一個(gè)以提供經(jīng)典設(shè)計(jì)素材為主的資源網(wǎng)，站點(diǎn)包括矢量圖、PSD分層素材、高清圖片、Flash源文件、PNG圖標(biāo)、3D模型、模板、酷站、壁紙、字體、教程等。 十七、E庫素材： http://www.iecool.com/ E庫素材網(wǎng)是為廣大網(wǎng)頁設(shè)計(jì)制作愛好者、平面設(shè)計(jì)制作愛好者及其他人員提供各種素材的資源庫。網(wǎng)站共分圖片素材、矢量圖庫、高精圖庫、網(wǎng)頁素材、網(wǎng)頁模板、壁紙、明星、下載中心、技術(shù)教程、E庫論壇、IT資訊等11個(gè)欄目。擁有素材圖片、高精度圖片、PSD源文件、FLASH源文件、網(wǎng)頁圖標(biāo)、網(wǎng)頁模板、源碼下載、技術(shù)教程、軟件下載、字體下載等豐富資源。圖片素材欄目具有數(shù)量多、分類細(xì)、質(zhì)量高等特點(diǎn)，高精圖庫是06年E庫與素材站合力推出的平面設(shè)計(jì)專用高精度圖片欄目，具有高像素（高清晰）、高分辨率、免費(fèi)和大容量等特點(diǎn)。 十八、素材精品屋： http://www.sucaiw.com/ 提供各類圖片、壁紙、矢量圖、分層圖、模板、圖標(biāo)、動畫、字體等素材收集下載。 十九、素材天下網(wǎng)： http://www.sucaitianxia.com/ 素材豐富，但網(wǎng)站美工一般，且廣告太多，連搜索也掛著百度聯(lián)盟的，嚴(yán)重影響用戶體驗(yàn)。 二十、素材藝庫： http://www.ekoooo.com/ 內(nèi)容涉及設(shè)計(jì)類、辦公類、美術(shù)類等基于計(jì)算機(jī)數(shù)字影像和數(shù)字藝術(shù)領(lǐng)域方面。頁面簡潔美觀，需要金幣才能下載資源。 二一、素材酷： http://www.sccooo.com/ 頁面非常簡潔，素材精美，但更新較慢，需要登錄后才能下載。提供矢量素材、PSD分層素材、圖標(biāo)（GIF/ICON/PNG）、PS筆刷、節(jié)日主題素材源文件，等等。 二二、中國設(shè)計(jì)秀設(shè)計(jì)資源站： http://sc.cnwebshow.com/ 網(wǎng)站布局過于緊湊，下載頁面廣告較多，沒有開發(fā)專業(yè)的欄目搜索功能（使用DEDECMS程序構(gòu)建）。提供矢量素材、網(wǎng)頁平面設(shè)計(jì)素材，等等。 希望這些設(shè)計(jì)素材門戶網(wǎng)站能夠給大家的設(shè)計(jì)帶來方便，有所幫助！采納哦

psd圖片是指經(jīng)過Photoshop處理過保存后的圖片，其格式為psd。psd格式的文件是一種圖形文件格式，因此，使用看圖軟件如ACDSee 或圖形處理軟件如我形我速、PhotoShop等都可以打開的。PSD--Photoshop Document（PSD），是著名的Adobe公司的圖像處理軟件Photoshop的專用格式。這種格式可以存儲Photoshop中所有的圖層，通道、參考線、注解和顏色模式等信息。在保存圖像時(shí)，若圖像中包含有層，則一般都用Photoshop（PSD）格式保存。PSD格式在保存時(shí)會將文件壓縮，以減少占用磁盤空間，但PSD格式所包含圖像數(shù)據(jù)信息較多（如圖層、通道、剪輯路徑、參考線等），因此比其他格式的圖像文件還是要大得多。由于PSD文件保留所有原圖像數(shù)據(jù)信息，因而修改起來較為方便，大多數(shù)排版軟件不支持PSD格式的文件。

1.使用工具欄上的“切片工具”。2.然后在圖象上劃出一塊一塊的區(qū)域。3.使用基于參考線的切片，按ctrl+R調(diào)出標(biāo)尺欄。4.把鼠標(biāo)移動到標(biāo)尺上，按住鼠標(biāo)左鍵，移動到圖象上，將會看到一條綠色的參考線，如圖。5.將參考線；排好，然后點(diǎn)一下工具欄上的切片工具圖表，然后點(diǎn)上面。選項(xiàng)欄里的“基于參考線的切片”。于是在原來的參考線上就變成了一塊一塊的切片了。6.接下來就可以輸出了:①依次選擇菜單欄上的“文件”→“存儲為Web所用格式”→“存儲”。②接下來就會彈出一個(gè)“將優(yōu)化結(jié)果存儲為”的窗口，如圖。7.在“保存類型”處有個(gè)下拉列框可以選擇，因?yàn)橐鎯榫W(wǎng)頁的格式，所以選擇“HTML和圖象(* html)”，再選擇“保存”就可以輸出一個(gè)網(wǎng)頁格式的HTML文件與一個(gè)包含圖象的名為“images”的文件夾。8.如果需要輸出“div+css的網(wǎng)頁”還可以這么做：在“設(shè)置”處的下拉列框，選擇“其他”。9.就會彈出一個(gè)“輸出設(shè)置”的窗口。10.在第2個(gè)下拉列框處選擇“切片”。11.選擇“生成CSS”。12.單擊“好”→“保存”就可以輸出一個(gè)目前流行的“div+css”的HTML網(wǎng)頁。

www.zcool.com.cn 站酷設(shè)計(jì)師互動平臺，里面有很多PSD素材都是免費(fèi)的www.68design.net 網(wǎng)頁設(shè)計(jì)師聯(lián)盟，里面素材都是免費(fèi)的，你可以去下載。http://down.chinavisual.com/app/down/stuff/index/ 視覺中國下吧，很不錯(cuò)的下載站都是免費(fèi)的。希望對你有所幫助