如何用photoshop輸出html網(wǎng)頁(yè)

《如何用photoshop輸出html網(wǎng)頁(yè)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、如何用photoshop輸出html網(wǎng)頁(yè)psd網(wǎng)頁(yè)模板下載后解壓，打開(kāi)PSD文件。在修改好相應(yīng)的文字與圖象之后，我們就將PSD文件輸出(X)HTML文件。首先得先對(duì)PSD文件做切片，有兩種方法：①使用工具欄上的“切片工具”，然后在圖象上劃出一塊一塊的區(qū)域。②使用基于參考線的切片，按ctrl+R調(diào)出標(biāo)尺欄，把鼠標(biāo)移動(dòng)到標(biāo)尺上，按住鼠標(biāo)左鍵，移動(dòng)到圖象上，將會(huì)看到一條綠色的參考線，如圖將參考線；排好，然后點(diǎn)一下工具欄上的切片工具圖表，然后點(diǎn)上面選項(xiàng)欄里的“基于參考線的切片”。于是在原來(lái)的參考線上就變成了一塊一塊的切片了。接下來(lái)就可以輸出了:①依次選擇菜單欄上的“文件”→“存儲(chǔ)為Web所

2、用格式”→“存儲(chǔ)”。②接下來(lái)就會(huì)彈出一個(gè)“將優(yōu)化結(jié)果存儲(chǔ)為”的窗口，如圖在“保存類(lèi)型”處有個(gè)下拉列框可以選擇，因?yàn)槲覀円鎯?chǔ)為網(wǎng)頁(yè)的格式，所以選擇“HTML和圖象(*html)”，再選擇“保存”就可以輸出一個(gè)網(wǎng)頁(yè)格式的HTML文件與一個(gè)包含圖象的名為“images”的文件夾。③如果我們需要輸出“div+css的網(wǎng)頁(yè)”我們還可以這么做：在“設(shè)置”處的下拉列框，選擇“其他”就會(huì)彈出一個(gè)“輸出設(shè)置”的窗口在第2個(gè)下拉列框處選擇“切片”選擇“生成CSS”單擊“好”→“保存”就可以輸出一個(gè)目前流行的“div+css”的HTML網(wǎng)頁(yè)。其實(shí)標(biāo)準(zhǔn)的網(wǎng)制作完成的工作實(shí)際是：psdtohtml，一般情

3、況下，我們會(huì)拿到美工的psd,這時(shí)候不同的人會(huì)有不同的做法：1.打開(kāi)fireworks將圖片切割導(dǎo)出為html。2.直接在dreamweaver之類(lèi)的工具去拖拉布局，導(dǎo)入相關(guān)的圖片,flash資源。3.先在ps中完成切圖后，在文本編輯器中看著效果圖一步步的制作。以上是大多被采用的方法，但都不好：第一種方法最為不好，這樣的代碼根本不具維護(hù)性和可讀性。第二種方法也不好，代碼難免會(huì)有冗余，做出來(lái)的東西基本需要排查一遍。第三種方法也不好，因?yàn)槟阈枰葱Ч麍D一點(diǎn)點(diǎn)的拼，也就是說(shuō)寫(xiě)html標(biāo)簽的時(shí)候，你在不斷的假設(shè)這塊要怎么去顯示。正確的做法是：1.拿到psd后，先不要做別的，直接在文本編輯器

4、中將網(wǎng)頁(yè)的框架寫(xiě)出來(lái)，不要假設(shè)這塊將來(lái)css要去怎么渲染，完全自然化的標(biāo)簽，不加任何的css。2.寫(xiě)完之后在各個(gè)瀏覽器運(yùn)行之后確保大體定位都沒(méi)有問(wèn)題。3.書(shū)寫(xiě)總體css,這里的css只負(fù)責(zé)大塊的定位及樣式。4.切出需要的圖片資源，在寫(xiě)好的框架中一點(diǎn)點(diǎn)的去構(gòu)造，不斷的調(diào)試，最終為成品。5.最后，為自己的代碼添加注釋?zhuān)赾ss，html中都要合適的為自己的代碼添加注釋。要想做出能靈活切換皮膚，讓css主導(dǎo)表現(xiàn)，還有很多要注意的地方，但大體的流程就是這樣的，當(dāng)然我們一開(kāi)始不能直接就做到先寫(xiě)html，但起碼要有這個(gè)意識(shí)，循序漸進(jìn)。。。PSD出網(wǎng)站從兩個(gè)大點(diǎn)考慮一、一個(gè)獨(dú)立的頁(yè)面1、分析這個(gè)

5、頁(yè)面，先在腦袋中或者草稿紙上描繪大概的結(jié)構(gòu)2、根據(jù)設(shè)計(jì)稿的的情況，分析背景圖的分布、ICO圖的分布等3、切割相應(yīng)的圖片，導(dǎo)出、合并圖片4、在編輯器中寫(xiě)整體結(jié)構(gòu)XHTML代碼，包括頁(yè)面中出現(xiàn)的所有元素的結(jié)構(gòu)5、編寫(xiě)CSS樣式中的整體以及模塊代碼6、細(xì)節(jié)調(diào)整7、收工，瀏覽器驗(yàn)證是否正確二、由多個(gè)頁(yè)面組成的小站點(diǎn)或者大站點(diǎn)1、瀏覽所有設(shè)計(jì)稿，統(tǒng)一規(guī)劃站點(diǎn)模塊、圖片、文件分布2、開(kāi)始第一點(diǎn)的操作，但規(guī)劃站點(diǎn)的內(nèi)容分布很重要整體考慮點(diǎn)：圖片的合并，減少請(qǐng)求量結(jié)構(gòu)的合理性，語(yǔ)義化樣式的簡(jiǎn)潔，便于后期維護(hù)多為后期的維護(hù)以及程序開(kāi)發(fā)著想，如何簡(jiǎn)單實(shí)現(xiàn)效果。