网页布局工具

不少美工的工作是:用PHOTOshop工具制作效果图给产品经理过目,再照效果图制作HTML页,最后交给工程师做成动态模板。

但是在当今的敏捷开发却认为应该尽量使用可重用组件来搭建系统,界面这块可以根据bootstrap的进行定制。首先确定文档结构,界面上的元素&要素等,其次才是考虑布局,页面的展示。

判断结构是否合理有个简单方法就是去掉页面的样式表,看页面结构逻辑是否清晰。而美工交给工程师的HTML,大多只有不断嵌套的DIV,看不到清晰的结构。而现在HTML5规范也更加注重文档结构的重要性,不只是花哨的外表。所以我认为可以省略效果图制作直接进行HTML编写,或者省略美工从效果图制作HTML这步,而交由系统前端开发人员直接制作成模板,这样就能制作语义清晰的页面,更可以站在组件重用的角度来简化后续开发过程。

所以前端开发人员也需要很精通样式表&页面布局等知识。“Firefox”插件里就有简单的工具来帮助工程师设计而不用借助PHOTOshop。并且PHOTOshop有个显著问题,那就是没有linux版本的这对我来说是不能忍受的。下面介绍两个工具。

  1. Color Picker 这是用来在网页上取色的。比FireBug里的工具要更快捷。
  2. MeasureIt On 这是用来测量网页元素尺寸的,FireBug只能测盒子的宽高,但是盒子之间的距离就得这个工具搞定啦。
  3. FireShot 这是用来网页截图的工具

另外,GIMP也在努力学习中。

标签: none

添加新评论

www.000webhost.com