将PSD转换为网站

Question

我正在学习网络开发,我已经陷入了某些困境......

如何将PSD模板转换为html/css网站？

我已经裁剪了图像的所有部分并将它们分别保存在.gif中,但是呢？我是否必须手动将它们放在Dreamweaver空模板中？我认为有一种自动化方式可以做到这一点.

此外,我尝试过"保存为网络和设备..",但在保存时,它会创建一个.html文件和一个包含每个元素的图像？!我期待几张图片,以便我可以在Dreamweaver中重新排列它们.

Answer 1

1. 虽然某些应用程序宣传/提供从复合图形到Web布局的"转换"过程的自动化,但您希望避免使用这些功能.他们会给你带来比他们更值得的麻烦.特别是如果你要使用CSS进行布局(我强烈鼓励).这并不是说这些功能没有一些有限的有效用法(更多关于这一点在第2点)它只是他们不会从图形神奇地生成你的网站.
2. 要使用"Save for Web ...",您需要使用"切片"工具将图像切割为布局所需的不同图像.然后,当您使用html保存web和deices时,它将导出html/css和图像.再次,这不是魔术,你可能需要完全重做它为你所完成的大部分工作 - 除了切片布局的某个区域(比如单个菜单)之外,它没有任何用处.

没有一种完全自动化的方法来做到这一点,一般来说,因为根据你需要的布局,你必须以不同的方式进行布局,而理论上可以在一个不错的小方法中考虑所有可能的潜在需求.导出GUI它不太可行.

最重要的是要做到这一点,你必须学习HTML/CSS.你学的越多,你就越讨厌Dreamweaver(至少在"布局视图"中).Garaunteed.

Answer 2

是的,网页设计无法通过魔术工作.正确的方法是手动编写定位元素的实际代码,而不仅仅是在Dreamweaver中将它们放到适当的位置.那里有很多很好的教程,例如检查这些:

• http://net.tutsplus.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/
• http://www.devwebpro.com/creating-css-layouts-the-best-tutorials-on-converting-psd-to-xhtml/

Answer 3

欢迎来到现实.

你必须自己切片和切块(好吧,自己切片和切块,但不管你想要多少都不要切片),然后将每个部分放在你的HTML或模板中.

Answer 4

这可能对您有所帮助,它会引导您完成整个过程.

Answer 5

有许多自动转换PSD的自动服务:

• http://converxy.com
• http://psd2htmlconverter.com/en/
• http://www.psdtoweb.de/
• http://csshat.com/

但是,您可能还需要考虑基于服务的方法.那里有一个蓬勃发展的专业切片社区(只是google"psd to html",你会看到我的意思).

您也可以尝试从程序或框架重新设计,例如:

• http://html.adobe.com/edge/reflow/
• https://webflow.com/
• http://www.ekomobi.com/en/home.html
• http://macaw.co/
• http://foundation.zurb.com/
• http://getbootstrap.com/
• http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html

这取决于您的预算,时间表和技能组合.

在尝试自动化之前,我非常支持理解某些东西.所以,就像其他海报所说的那样,通过划片(手动编码)切片是非常有价值的,特别是如果你还没有很好地理解它.但是,您可能根本不在乎投入所需的时间来充分了解该主题.而且,这也完全没问题.

我认为广告在一天结束时,没有"正确"的解决方案.不同的人有不同的要求会改变选择.