將PSD轉換爲網站

我正在學習web dev，並且我已經在某些時候被刪除了..將PSD轉換爲網站

如何將PSD模板轉換爲html/css網站？

我裁剪了圖像的所有部分，並分別保存在.gif中，但是呢？我必須手動將它們放在Dreamweaver空模板中嗎？我以爲有一種自動的方式來做到這一點..

另外，我試過「保存爲網絡和設備..」但保存時，它會創建一個.html文件和包含每個元素的單個圖像？！我期待幾張圖片，以便我可以在Dreamweaver中重新排列它們。

來源

2010-01-28 user251356

Photoshop不是創建網頁設計的合適工具。它假定有關打印的內容不再適用於Web。 – 2010-01-28 21:10:38

哦，順便說一句：現在使用'gif'只是一個非常糟糕的主意。改用'png'。（有些限制適用 - 但在大多數情況下，'png'是要走的路。） – 2010-01-28 21:11:50

根據Stack Overflow FAQ（http://stackoverflow.com/faq），你應該在Doctype（http：///doctype.com/）。 – Tae 2010-01-28 21:12:14

雖然某些應用廣告/從複合圖形提供的「轉換」過程的自動化您想要避免使用這些功能的網頁佈局。他們會給你帶來比他們更有價值的麻煩。特別是如果你打算使用CSS佈局（我強烈鼓勵）。那並不是說這些功能沒有一些有限的有效用法（更多關於第2點），只是他們不會從圖形中奇蹟般地生成您的網站。
爲了使用「Save for Web ...」，您需要使用Slice工具將圖像分成不同的佈局需要的圖像。然後，當你用html保存網頁和設備時，它會導出html/css和圖像。再次，這不是魔術，你將不得不完全重做它爲你完成的大部分工作 - 除了切割佈局的某個區域（比如單個菜單）之外，它無用。

心不是一個完全自動化的方式來做到這一點，一般來說因爲這取決於你所需要的佈局，你有沒有去用不同的方式鋪設的東西出來，而其theoretcially可能考慮到所有可能的潛在的需求在一個不錯的小導出GUI中並不真正可行。

底線是要做到這一點，你必須學習HTML/CSS。而且越多學習越多，你會討厭Dreamweaver（至少在「佈局視圖」中）。 Garaunteed。

來源

2010-01-28 21:00:54 prodigitalson

是的，網頁設計不起作用的魔法。正確的做法是手動編寫定位元素的實際代碼，而不是在Dreamweaver中將它們放在適當的位置。有很多很好的教程在那裏，檢查這些了，例如：

來源

2010-01-28 21:00:34

謝謝，我要看這些鏈接。 – user251356 2010-01-28 21:11:06

+1：謝謝;我打算髮佈一個關於「我怎樣才能將PSD，切片或其他方式轉換爲不是以桌子聞聞爲中心的慣用網頁，並且不使用例如」display：table-cell「來模擬表格與DIV的，我可能仍然會問一個問題，但我認爲第二個鏈接提供了一個頂部的鏈接，回答我的問題。 – JonathanHayward 2012-09-25 20:39:50

歡迎來到現實。

你必須自己切片和骰子（好，自己切片和切塊圖像，但不要切片自己，無論你想要多少），然後將每個單獨的部分放在HTML或模板中。

來源

2010-01-28 21:01:18 SuperMagic

+1爲該職業的勉強的愛情:-) – prodigitalson 2010-01-28 21:09:51

This可能會幫助你，它會引導你完成整個過程。

來源

2010-01-28 21:04:32

有許多是轉換月臺幕門爲你自動服務：

但是，你也可能要考慮基於服務的方法也是如此。有一個繁榮的專業切片社區（只是谷歌「PSD到HTML」，你會明白我的意思）。

您也可以嘗試從程序或框架，如重新設計：

這真的取決於你的預算，時間表和你的技能。

在嘗試將其自動化之前，我非常支持理解某些東西。所以，就像其他海報所說，從頭開始切片（手寫）非常有價值，特別是如果你還沒有很好地理解它。但是，您可能只是不在意投入所需的時間來實現對該主題的良好理解。而且，這也非常好。

我認爲廣告在一天結束時，沒有「正確的」解決方案。不同的人有不同的要求，這將改變選擇。

來源

2014-03-12 22:15:36 Homer6

謝謝@ Homer6，http://converxy.com爲我工作 – 2015-05-19 11:04:39

將PSD轉換爲網站

回答

相關問題