免费工具,加快Web开发速度

是否有任何工具 - 更简单,更快,更好 - 您建议我可以使用它来加速网站的设计部分,以便我可以专注于真正的工作？

我不需要任何花哨的东西,只是一个漂亮的布局和设计,我可以调整一点,以便网站看起来很漂亮.

我是Brandon的第二个使用CSS框架的建议.它不会让你100%自由地设计任何你喜欢的东西,但它可以大大加快你的设计过程,并腾出你的手去做你真正想要的编码.

建议2013年7月更新:

Twitter Bootstrap http://twitter.github.io/bootstrap/ - 完整的网格,错字,UI小部件原型框架

ZURB基金会 http://foundation.zurb.com/ - 响应式网格,类型,UI小部件原型框架(类似于Twitter Bootstrap的范围,但在某些方面感觉'更干净')

960 http://960.gs/ - 网格布局系统

的黎波里 http://devkick.com/lab/tripoli/ - 非常好的排版,但没有网格系统

YUI网格 http://developer.yahoo.com/yui/grids/ - 非常可定制(到过度杀伤)网格系统

蓝图 http://www.blueprintcss.org/ - 网格系统和基本排版

BlueTrip http://www.bluetrip.org - 一个混合系统,将最好的蓝图网格与最好的的黎波里排版混合

我不会骗你.如果您正在寻找可靠的网页设计建议,这个网站不是最好的去处.Stack Overflow是一个编程社区,程序员很少对设计有所了解.如果您想获得一些真正的建议,那么我强烈推荐Internet上的主要Web设计/开发论坛,尤其是SitePoint.

话虽这么说,作为一名前自由职业网页设计师/开发人员,我将就此问题提供我的意见.当然,并不是说你应该重视它.毕竟,这是一个编程网站.

从来没有说过CSS布局发生器再次!如果您打算认真设计网页,那么首先需要学习语义XHTML和CSS.虽然很多人都认为W3Schools是最权威的资源,但我认为它是程序员的回答(也就是说不是很好),并且希望你能用... Google阅读这个主题.有很多很棒的网站可以提供网页设计/开发的基础知识,谷歌可能是最好的网站.此外,由于有大量新网站提供此信息,您知道它将比W3Schools更加完善.你真的很想弄清楚你的设计,因为以后在项目中解决问题要困难得多.

如果您要设计网页,那么了解实际设计好的设计是个好主意.查看CSS Vault以获得一些设计最好的网页的精彩资源,当然所有源代码都完好无损,这样您就可以玩他们的代码,看看他们如何管理一些精彩的效果他们已经产生了.我从CSS Vault上的网站上学到的不仅仅是一两件事.最重要的是,您应该从大型Web设计/开发站点上阅读Web Design.我最喜欢的两个是SitePoint和A List Apart,当你听到人们谈论资源时,你会一次又一次地接近两个名字.浏览这些网站,查看他们的论坛,看看真实 网页设计师/开发人员正在使用,而不是程序员正在使用的.

关于CSS框架的主题; 他们帮了!使用它们的问题在于,您经常花费大量时间寻找一个有价值的框架,您可以自己完成网站的大部分CSS.你要么爱他们要么恨他们,但很多人会说他们没有必要.

一旦你了解了一个好的设计是什么样的,你就拥有了创造价值所需的资源,我建议你开始工作!实际上,当您设计网页时,您真正需要的是具有保存功能的文本编辑器,图像处理程序,浏览器窗口和FireBug.IDE可以帮助很多人,但是如果你确实使用了IDE,那么你肯定希望以文本模式工作.我只使用NotePad ++或Emacs,但很多人喜欢使用Aptana Studio,所以值得一看.

当你真正构建网站背后的代码时,你真的要比你喜欢的IDE /文本编辑器和源代码控制工具更糟糕.作为一名Java程序员,你更适合谈论编程,所以我不会讲你已经知道的主题.

最后,网页设计需要时间,我们选择使用的许多工具,我们声称"节省时间",实际上节省很少.如果你不是设计大师,那么你需要花费大量的时间来创建一个外观漂亮的网站.这是生活中的事实.叫我老式(来自21岁的一个有趣的词)但我仍然认为最快的方法是在一张纸上绘制一个设计(如果真的有必要的图像程序)并且只是走出去做该死的东西!再一次,我将不得不把这种狩猎作为程序员特征的银弹心态,在设计时真的无济于事,因为设计一个网页与编写Java程序有很大的不同.

简而言之,忽略你在这里阅读的所有内容,阅读真正的设计师正在做的事情,然后做出该死的事!

在CSS样式网站的快速开发方面,有一条建议可以节省比其他任何时间更多的时间,并且保持简单易用

使用一个有吸引力的简单布局,不需要像素完美,并且可以在不太兼容的浏览器(IE6)中"优雅地"降级.最大限度地减少CSS的数量并修复上面提到的基本错误.然后专注于内容和功能...... 真正的工作

在我之前的工作中,我为网站创建了数十个模板.
我发现的最有用的是Firefox Web Developer Toolbar.
它有很多小的有用工具.我最喜欢的功能是能够编辑CSS并实时查看结果.这节省了整个编辑 - 上传 - 刷新周期.请注意,即CSS不一致!在我的头顶,这些是最重要的陷阱.

双边缘错误[谷歌:双边距错误]
不正确(但更直观)框模型[谷歌:框模型]
不正确(但更直观)浮动清除[谷歌:clearfix]

FireBug是另一个非常有用的Firefox插件,可以进行更深入的分析.