我是一名普通的网页设计师(充其量!),编写复杂的 HTML 和 CSS 对我来说很痛苦。我对样式和布局所做的很多事情都是反复试验,并且涉及很多调整。我也经常改变主意,我想要什么颜色的东西。基本上,我和你在同一条船上。
很久以前,我放弃了调整-部署-测试迭代周期的想法(mvn clean tomcat:deploy
在我当前的项目中需要 2 分钟),因为到第 10 次迭代试图对一个简单的布局问题进行排序并等待部署将驱使我绕过弯道。我现在使用两种策略;
获取我要使用的 HTML 的静态副本。这通常意味着部署应用程序,导航到页面并将其保存到某处的工作目录中。这会保存静态 HTML 以及任何图像。接下来,我将工作空间中的 CSS 文件复制到工作目录中,并手动编辑保存的 HTML 文件以指向这些 CSS 文件。
在 Firefox 中打开静态 HTML 页面。现在我可以调整 CSS 或 HTML 并简单地刷新 Firefox 以显示更改。迭代时间现在减少到大约 1 秒。我可以使用 Firebug 插件进一步改进我的调整。这允许您在 Firefox 中操作 CSS 和 HTML。这对于获得正确的边距和填充大小特别有用。一旦我在 Firebug 中对其进行了调整,我就会手动编辑保存的 HTML 和 CSS,然后刷新 Firefox 以确保我对结果感到满意。
然后在某些关键阶段,我对我的工作区进行更改以反映我对静态文件的调整。然后我重新部署并测试以确保我做对了。当我使用 Firefox 进行所有开发时,我必须特别注意浏览器的兼容性,尤其是与 IE 的兼容性,但这通常会在后期进行。
编辑:我没有提到 Javascript,但这个过程也适用于 JS!