是否有工具可以绘制布局并将其直接渲染到CSS中?

时间:2011-06-23 14:23:03

标签: html css

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

自从CSS盒子模型的使用变得越来越流行以来,我也开始使用CSS来创建我的网站布局。但是,我总是发现通过CSS创建布局要慢得多。这个过程非常文本化,我觉得这对我来说是个问题,因为布局不是逻辑编程,我觉得很困难。当我输入CSS样式时,Dreamweaver可能具有可以动态渲染CSS视觉效果的功能,但是,创建布局的过程仍然是文本的,因为我必须输入CSS,试验和错误以及像素大小数字,这个过程很慢。

我对CSS很好,用CSS创建了很多网站,但我发现这个过程既繁琐又费时。感觉就像我在Photoshop中设置的只是一个草稿参考,因为在那之后,我必须再次用CSS重写整个布局来模仿我在Photoshop中的那个。

我正常进行的是什么?是否有更快,更有效的方法将设计概念融入CSS布局,而不必总是从头开始编写CSS?如果我要为我开始的每个网站做这件事,那就太耗费时间和效率太低了。

4 个答案:

答案 0 :(得分:0)

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

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

有用的模式/工具:

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

答案 1 :(得分:0)

我有一些建议:

一个,更直接地回答你的问题:你有没有看过CSS框架?像Grid960系统这样的东西可以很快地为您的网站提供结构。您会惊讶地发现使用预先构建的布局文件可以快速获得合理的内容。你甚至不必使用别人的;你可以自己制作一次并重新使用并根据需要进行调整。

第二,为什么不尝试从头脑中的设计开始使用CSS?当你直接进入造型时,它会感觉不那么多余。如果你加入建议一,这就变得更容易了。并不是说你不能同时使用Photoshop ......但是如果你让网站长出CSS,那么使用它会感觉更自然。

第三,有些工具(对我来说似乎很可疑)像PSD2HTML那样声称可以为你做这项工作。

答案 2 :(得分:0)

  

我正常经历了什么?

  

是否更快,更有效率   将设计概念融入CSS的方法   布局,而不必总是写   CSS从头开始?

有更快的方法,但我不会称它们有效。事情很快就会开始变得无法控制,代码丑陋,带着许多可怕的不必要的东西。也迟早你的布局很可能会破裂。

  

这太费时间了   如果我要这样做,效果不佳   我开始的每个网站。

您可以做的最好的事情就是学会使用html和CSS作为最佳选择,使代码尽可能干净清晰。 您还应该开始制作一些代码片段(片段)并将它们存储在一个安全的地方,准备将它们用作您制作的每个站点的基本布局结构。

你会意识到,你只需要在大多数情况下只需很少的调整来适应布局。

答案 3 :(得分:0)

作为一名获得付费以担心盒子模型和IE不兼容性的UI开发人员,我将始终回答“什么可以自动生成布局?”的问题。一个简单的答案:没有。对于一个优秀的UI开发人员来说,没有任何替代品,尤其是当微软出现在那里组成游戏时...... IE就是像我这样的人可以保持有酬就业的原因。

话虽这么说,我能想到的最接近汽车设计工具的是网格生成器。这是我的首选武器:http://www.gridsystemgenerator.com/

有一些工具可以生成相当可接受的代码.... Apple的网页设计工具浮现在脑海中。但是,在我的办公室里完成的所有主要项目,如Apple的设计软件,Adobe的新Web Catalyst,Dreamweaver(专有的编码工具)都会重做。为什么?因为我没有发现任何一个都支持盒子模型问题并且生成完全符合w3标准的HTML .....毕竟,这是我们所有人都在这里生活的标准。