是否有工具可以让您绘制布局并将其直接呈现到 CSS 中？

Question

过去，使用表格来创建网站布局非常直观和快捷。很容易“敲出”一个布局，然后从 Photoshop 中放入切片图像，然后它的内容和网站就启动了。至少，在 Dreamweaver 中，有一种非常直观的方式来创建表格布局。但这种方法最终会过时。

自从使用 CSS 盒子模型越来越流行之后，我也开始使用 CSS 来创建我的网站布局。但是，我总是发现通过 CSS 创建布局要慢得多。这个过程非常文本化，我认为这对我来说是个问题，因为布局不是逻辑编程，我只是觉得它很困难。 Dreamweaver 可能具有可以在我输入 CSS 样式时即时呈现 CSS 视觉效果的功能，但是，创建布局的过程仍然是文本的，因为我必须输入 CSS，对像素大小数字进行反复试验，等等。这个过程很慢。

我对 CSS 很满意，并且用 CSS 创建了很多网站，但我发现这个过程既乏味又耗时。感觉我在 Photoshop 中布置的任何内容都只是一个草稿参考，因为在那之后，我必须再次用 CSS 重写整个布局以模仿我在 Photoshop 中的布局。

我所经历的一切正常吗？有没有一种更快、更有效的方法将设计概念融入 CSS 布局，而不必总是从头开始编写 CSS？如果我必须为我开始的每个网站都这样做，那就太耗时且效率低下。

Answer 1

您可以在项目之间使用某些模式和工具来帮助将 Photoshop 文档转换为符合标准的网站。

最好的建议是像手背一样学习 CSS。这将允许您正确分割 psd 文件 - 仅使用必要的图像。它还将帮助您了解在 Photoshop 或任何其他图像工具中创建网站所必须遵守的限制。你的 CSS 知识越强，限制就越高...

有用的模式/工具：

• CSS 网格系统
  • http://960.gs/
  • http://www.1kbgrid.com/
  • http://www.blueprintcss.org/
• CSS 重置定义
  • http://meyerweb.com/eric/tools/css/reset/

一旦您成功使用了某些工具集和模式，您就可以重复使用它们来提高效率...

Answer 2

我有几点建议：

第一，更直接地回答您的问题：您研究过 CSS 框架吗？像 Grid960 系统这样的东西可以为您的网站快速提供结构大有帮助。您会惊讶于使用预先构建的布局文件可以多快得到合理的结果。你甚至不必使用别人的；您可以自己制作一次，然后根据需要重复使用和调整。

其次，您为什么不尝试从您脑海中的设计开始使用 CSS？当您直接进行造型时，它会感觉不那么多余。如果您合并建议一，这将变得更加容易。并不是说您不能同时使用 Photoshop...但是如果您让网站脱离 CSS，使用它会感觉更自然。

第三，有某些工具（对我来说似乎相当可疑），例如 PSD2HTML，声称可以为您工作。

Answer 3

我正在经历的一切正常吗？

是的。

有没有更快更高效的 将设计概念融入 CSS 的方法 布局，不必总是写 从头开始 CSS？

有更快的方法，但我不会称它们为有效的。事情很快就会开始变得无法控制，并且代码丑陋，带有许多可怕的不必要的位。此外，您的布局迟早很可能会中断。

这太费时了，而且 如果我必须这样做是无效的 我开始的每个网站。

你能做的最好的事情就是学会使用 html 和 CSS，尽可能地让代码简洁明了。 您还应该开始制作一些小代码（sn-ps）并将它们存储在安全的地方，准备将它们用作您制作的每个网站的基本布局结构。

您会意识到，大多数时候您只需要调整布局即可。

Answer 4

作为一名因担心盒子模型和 IE 不兼容而获得报酬的 UI 开发人员，我总是会回答“什么可以自动生成布局？”的问题。一个简单的答案：什么都没有。优秀的 UI 开发人员是无可替代的，尤其是在微软不断开发游戏的情况下……IE 是像我这样的人可以继续获得高薪工作的原因。

话虽如此，我能想到的最接近自动设计工具的是网格生成器。这是我选择的武器：http://www.gridsystemgenerator.com/

有一些工具可以生成相当可接受的代码……我想到了 Apple 的网页设计工具。但是每一个最​​终在我办公室完成的重大项目，使用 Apple 的设计软件、Adobe 的新 Web Catalyst、Dreamweaver（无论如何都是专有编码工具）等工具完成的，最终都会重做。为什么？因为我还没有找到一个既支持盒子模型问题又能生成完全符合 w3 标准的 HTML ......毕竟，这是我们所有人都赖以生存的标准。