将PSD转换为网站

Question

我正在学习网络开发，我已经陷入某种困境了。

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

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

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

Answer 1

1. 虽然某些应用程序宣传/提供从复合图形到网页布局的“转换”过程的自动化，但您希望避免使用这些功能。他们会给你带来比他们更值得的麻烦。特别是如果你要使用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或模板中。 / p>

Answer 4

This可能对您有所帮助，它会引导您完成整个过程。

Answer 5

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

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

但是，您可能还想考虑基于服务的方法。那里有一个蓬勃发展的专业切片社区（只是google＆＃34; psd to html＆＃34;你会看到我的意思）。

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

• 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

这实际上取决于您的预算，时间表和技能。

在尝试自动化之前，我是一个非常了解事物的重要支持者。因此，就像其他海报所说的那样，通过划片（手动编码）切片是非常有价值的，特别是如果你不能很好地理解它。但是，您可能根本不在乎投入所需的时间来充分了解该主题。而且，这也完全没问题。

我认为广告在一天结束时，没有＆＃34;正确＆＃34;解。不同的人有不同的要求会改变选择。