您的位置: 首页 > 技术文档 > 网页制作 > 你是一个职业的页面重构工作者吗?
flash wmode参数详解 回到列表 提升JavaScript运行速度之递归篇
 你是一个职业的页面重构工作者吗?

作者:bias 时间: 2009-02-26 文档类型:原创 来自:css森林

原文:http://www.cssforest.org/blog/index.php?id=121

做为一个专职的页面重构者,我们从事的工作简单的说就是“将设计稿转换成WEB页面”,这一过程可以很简单到直接把PSD从PS里导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来,但随着工种的细分,加上页面重构本身的专业性,独立为一个职业也不是不可能,至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿,可以不理会下面的内容。

单纯的页面重构,所涉及到的工作内容一般是“分析设计稿=>切图=>写HTMLCSS”,虽然看起来很少,但要做好这份工作,绝非所想的那么容易。原因很简单:工作内容单一,在时间和工作量上必会很苛刻,往往跟设计师的工作时间是3:1,即设计师给三天的时间,制作只给一天的时间完成;在这种工作强度下,很多人都是靠着对这份工作的喜爱在维持着,一旦工作热情消失,很容易就会变得枯燥,保持热情也成了重构工作者(也许是所有参加工作的人)应该具备的能力。

跟“前端工程师”所要求的有所不同,“页面重构”虽然也是“前端工程师”的一个范畴,在职业化中,对专职的页面重构者,要求当然也更高。不单是做出页面,而是做出好页面。又引出另一个话题,“何为好页面?”,一般包括下面几点:

  1. 结构完整,可通过标准验证
  2. 标签语义化,结构合理
  3. 充分考虑到页面在站点中的“作用和重要性”,并对其进行有针对性的优化

很多同学多少都遇到过方向不明,不知道自己应该提高些什么,我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容,针对每一点提出一些要求,以方便我们分析自己的能力水平,为继续提高确定个方向:

一、设计稿的分析

设计稿的分析是指对设计稿如何制作成页面的分析,即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段:

  1. 能分清设计稿中的公共与私有的部分
  2. 在1的基础上对各部分的实现方式有一个初步的方案(包括如何切图、写结构、写样式)
  3. 在1的基础上,准确的给出各部分的实现方案(包括如何切图、写结构、写样式)
  4. 在3的基础上,能同时考虑方案的扩展性、复用性及页面性能(包括如何切图、写结构、写样式)
  5. 在4的基础上,考虑整站的结构分布(包括文件分布、目录结构)

上面这些都是在还没开始动手制作之前所要做的。

二、切图

切图是指将设计稿切成便于制作成页面的图片。都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,还包括把切出来的图片合并到一起,怎么切、从哪切才能将性能最大化,说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段:

  1. 切成所需要的图片(如何将需要的部分切出来)
  2. 在1的基础上,对切出来的图片进行一些优化(包括压缩文件大小、选择图片类型)
  3. 在2的基础上,规划切出来的图片(包括文件分布)
  4. 在3的基础上,考虑整体的性能(包括合并图片、压缩文件大小)

HTML和CSS的编写

HTML和CSS的编写是指将上面完成的内容,通过HTML和CSS的编写,将设计稿转换成WEB页面最重要的一块,也是我们所要重点掌握的内容,把它们放在一起,是因为它们相互的关联性太强,HTML的写法会影响到CSS的写法,它又可以划分成下面几个阶段:

  1. 还原设计稿视觉效果,并通过标准验证(HTML)
  2. 在1的基础上,实现多浏览器的兼容(HTML)
  3. 在2的基础上,标签语义化(HTML)
  4. 在3的基础上,选择较优的实现方式(包括模块化结构,方便程序脚本使用,HTML和CSS)
  5. 在4的基础上,考虑到扩展性、复用性和可维护性(HTML和CSS)
  6. 在5的基础上,考虑到整站的样式分布(包括如何实现分布)
  7. 在6的基础上,样式写法的优化(包括技巧的应用)

是对所遇到问题的解决能力,这一点在不同的阶段都可能会遇到,所以没有写到上面。

如果你已经达到或超过3、4、5,恭喜你,你已经是一个职业的“页面重构工作者”了。为了我们自身的发展,关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等,也是十分必要的。大家一起进步吧。

本文链接:http://www.blueidea.com/tech/web/2009/6466.asp 

出处:css森林
责任编辑:bluehearts

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
通过shtml实现重构页面模块化构建
页面重构应注意的repaint和reflow
5 个简单实用的 CSS 属性
用CSS 3将我们带入下一个高度
悟道web标准:前端性能优化
作者文章
在腾讯的又一个两年
重新认识CSS的权重
重构中的模块化设计:样式的作用域
关于文件命名
[css]IE5/IE5.5/IE6/FF兼容性
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2