在工作中我看到一位同事在Photoshop / Fireworks中设计一个网站，我看到另一位同事收集这些数据，将其整理并使用Dreamweaver从头开始重建。
看起来好像太乱了！
我知道Photoshop可以输出基于HTML的表格，而Fireworks将创建具有绝对定位的div;似乎都没有帮助。
不可否认，自从成为一名程序员以来，我没有尝试过很多（DW / FW）（CS4 / CS3），所以我不知道新版本是否正在解决这个工作流程问题，但我们是否还在处理事情？
我们可以附加某种布局元数据（这是翻转按钮，这将是一个SWF，这将是文本，此徽标将隐藏“xyz”＆lt; h1＆gt;文本等）切片以帮助布局生成？是否有一些秘密工具有助于此转换过程？或者我们仍然只限于手工做事？
当手工制作的页面需要重新再次以适合Smarty模板/ Wordpress /通用CMS时，沮丧感仍在继续。
我承认设计师需要摆脱系统才能做任何事情，但大多数传统网站都有：
鉴于许多组件的相似性，不应该有更系统的方法从切片设计转向功能性HTML吗？
或者我过度简化了事情？
CNC中 嗯....我想我会接受一个答案，但他们并不是我想要的。
看起来设计DOM有点像圣杯（“它只是一个模型！”），也许你可以用HTML和Javascript做的所有“groovy”事情，这将是一项艰苦的工作，但是有一套约束（960件东西看起来很有趣），一些精心设计的重置样式表和一点......仙尘？我们应该能够改善工作流程。
Photoshop的表格本身几乎没用，我同意，但我们肯定可以获取这些数据，然后选择一组单元格并说“正确，这是文本div，溢出：自动”或“这些单元格是图像块，使其具有与所选区域相同的高度/宽度的样式“。不可否认的是，在工作室里还有其他大象需要对管理进行正式介绍，但设计＆页面工作流程的某些部分似乎......没有受过良好教育。
答案 0 :(得分：15)
对我而言，手工操作是一个优势。你只需要做好一次，如果你专注于视觉吸引力，那么你可能需要做很多工作才能使它跨浏览器友好...
很想听到其他答案。这只是我对它的看法，因为我制作的数据比视觉上吸引人的网站更多。
答案 1 :(得分：9)
完全跳过Photoshop，让你的设计师直接在视图HTML中进行模拟。你不仅会消除你感觉到的复杂，尴尬的感觉，而且你会得到更好，更有弹性的设计，因为100％的设计将基于HTML / CSS中的可能性，而不是Photoshop中的可能性。
更多阅读：
答案 2 :(得分：6)
现在很多人都在使用（X）HTML / CSS直接设计浏览器，因为确实存在这个问题 - 所有这些都是用Photoshop搞砸了然后在让客户端注销静态后转到代码设计。
好读是Andy Clarke的Walls Come Tumbling Down演讲。
答案 3 :(得分：5)
Omega触及它，但我认为最大的问题是跨浏览器兼容性。如果所有这些浏览器怪癖都不存在（coughInternetExplorercough），那么你建议的内容就会简单得多。但是，通常需要大量的手动编码才能使其在每个浏览器中看起来都像素完美。
另一件事是精细控制。当然，你可以将你的PSD模板弹出到Dreamweaver或诸如此类的东西，并拥有一个有效的网站，但是它会使用黑客和丑陋的东西，比如桌子来使它工作。即便如此，它可能不会完全像你想要的那样工作。你必须记住诸如辅助功能和搜索引擎优化之类的东西，Dreamweaver就是不能给你那个。
答案 4 :(得分：2)
我的观点是HTML / CSS足够简单，一个称职的网页设计师应该适度流利。 Photoshop具有快速外观实验的地位，但我认为这是一个重要的步骤：用户体验设计。
就个人而言，我一直在用HTML直接设计和原型设计。这是CSS提供的内容和布局的清晰分离真正闪耀的地方。我使用无格式div来将页面组织到区域中，这允许我在概念上组织页面（即在代码中保持相关项目彼此靠近）并推迟考虑外观。这具有制作非常彻底的网站库存的副作用。
接下来我将使用CSS来布局div，它们也可以生成线框（对于评论和纸张原型设计很有用。）
最后一步是应用视觉元素：颜色，文本样式，图形。我将使用我需要的任何图形程序来烹饪漂亮的。
注意这种方法固有的正交性：开发概念，然后是布局，然后是外观和感觉。这使得硬思考（概念模型）在最前面，最不稳定的思维（颜色/样式）。因此，当艺术总监更改调色板时，您只需编辑一个CSS文件。如果您需要更改概念模型，大部分布局和外观都可以重复使用。
如果您需要此方法的牵引力，您可以使用标准的css网格，如960（http://960.gs/）。它处理了许多算术和浮动业务，使布局变得如此繁琐。
除了上面的Rahul链接，我还建议：http://www.37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss
答案 5 :(得分：1)
这是一个很好的天空梦想，但我认为只要网站是用（X）HTML / CSS编写的，那么在一天结束时，你总是要做一些，大多数或者手动完成所有工作。
某些'购物软件中的静态像素与动态，变化，扩展，以内容为中心的基于文本的网站之间存在着根本性的裂痕。弥合这一差距的最佳工具仍然是......人类专业人士。
像iWeb（完全所见即所得）或DW / Fireworks（中间的某个地方）这样的工具只能让你到目前为止或有严重的限制。在iWeb的情况下，您只获得预先制作的模板，在DW / Fireworks的情况下通常是次优的代码。您必须决定可以使用哪些限制以及何时最好手动执行。
答案 6 :(得分：1)
有一些工具，例如Sitegrinder就可以做到这一点。
Adobe自己在实验室中有一个名为Catalyst的项目，它可以完成您所描述的内容以及Flash的更多内容：
它从Photoshop获取切片，允许您更改其属性并将其导出到正常工作的Flash文件。 （右键单击框，添加文本属性，它将成为文本字段...）
如果你观看他们的视频（你应该 - 它太神奇了），你会发现他们被认为很快会以这种方式构建网站。
在Zimbra被雅虎收购之前，看起来他们正朝着这样一个输出跨平台HTML的工具前进，类似于催化剂对闪存的作用。不再。但随着雅虎的重组，这些软件仍可能从Zimbra灰烬中崛起。
答案 7 :(得分：1)
在我看来，如果有必要，应该在Photoshop中模拟一个网站，部分被剪切出来用于实际网站，但是要在Photoshop中完全设计网站，然后想让它在网络上工作只是向后走。真的，两者应该并行完成。
简而言之，图形设计师设计网站的外观，但您需要程序员来编程。
答案 8 :(得分：1)
你应该去做的是训练设计师在一个完善的网格系统中为他们的网站设计工作。如果他们能够将布局理解为网格/块系统，那么可以在这些约束内完成许多有趣的设计。但它不是从PSD到HTML的直接转换，因为它们是表示视觉数据的两种完全不同的方式。
有许多框架可以使css更容易工作。一个是Blueprint CSS
有许多模板用于表示photoshop中的网格系统。
http://konigi.com/tools/photoshop-template-blueprint-css-comps
将网格视为视觉约束层，然后可以在photoshop comp和特定的HTML / CSS实现之间映射设计。视觉元素必须在干净的网格框内。网格中的SOme元素或单元可以映射到背景图像。其他纯色或白色空间，带有容纳内容的div容器。
通过良好的理解和网格框架，您可以非常接近像素完美布局。
此外，优秀的设计师将了解如何在设计模型中有效地使用空白区域。如果视觉设计中存在许多奇怪的交叉线和交叉元素，那么这对实现提出了真正的挑战。仅仅因为你可以在视觉上想象它并不意味着它很容易在浏览器中实现，而不会对HTML和CSS的工作方式进行某些权衡。将网格系统视为约束条件，并将其作为判断布局要求的有效方法。
答案 9 :(得分：1)
就个人而言，我首先使用边框和背景颜色在html / css中进行设计。然后我拿PSD并插入图像作为背景图像或html图像。这是非常快的，代码是你的，所以你知道每个css规则意味着什么加快了开发过程（而不是PS的笨拙的切片图像名称和css选择器名称）