探讨网页高效制作流程01

笔者是从fontpage流行的时代学会做网页的，深刻感到那个时代用软件直接拖拽表格设计页面的方便性。但时过境迁，如今已是讲究html与CSS分离的时代，取而代之的是比较原始的手工输入代码的工作。虽然有很多改进效率的方法，譬如使用现成的CSS框架，使用Zen coding(写少量代码,程序自动补全)，使用less css(用编程的方式写css)，但这些制作方法总是在一定程度上限制了设计的发挥。

如果一个页面是以特定需求的设计稿主导，那么这些方法可能都用不上，必须回归到手工敲代码（幸好现在的编辑器都带有自动提示补全功能），这种活对于一个工作范围囊括“设计、切图、编写页面代码”的美工来说，是一种折磨。明明是用软件设计的效果图为什么不能通过软件直接转化为页面？又或者是哪里做的不对？

带着种种疑问，我开始在浩瀚的网络上寻找解决方法。从离我最近的软件开始探索，photoshop、fireworks都有导出html页面的功能，但这个功能视乎有些过时了，因为导出的页面都是table表格编排的页面，这种格式已经过时了。fireworks cs6也许是最赶时髦的一个能做到html与css分离导出，而且控制的好的话能把画面上的矩形矢量框当成div框导出到页面中，并且自动把该矩形上设定好的切片设定为该div的background属性，有时候还能导出全局浮动带DIV分层的页面，而不是绝对定位无分层的页面，但这个功能不好拿捏，一但有一些矩形的边框没有叠加到位，就会导出为绝对定位型的页面，拿来做临时展示还不错但不能直接拿去上系统（如果能稳定导出浮动页面，那么只要一个小的处理脚本就能把这种页面的代码提升到与手工代码相差无几的程度，感觉FW这个功能设计的非常可惜）。

之后我开始在软件工程方向搜索，发现了IDE（集成开发环境）这种东西，visual studio用起来真是方便，窗口界面直接拖拽出来，之后在旁边写入属性和程式，这不是很好么？为什么html做不到？虽然有dreamweaver这种类似的软件，但web页面毕竟不是软件程式，做起来还是很不方便。但这样想的话，不如整站用flash做，因为flash的确很方便，但得在装上flash player的浏览器上才能浏览页面，视乎决定了这这种方式的页面不能被广泛传播。

一个关于SVG矢量图的现象，SVG矢量图格式是一个很有趣的矢量图格式，它可以用记事本和adobe illustrator(或者其他矢量图形编辑软件)打开编辑！在adobe illustrator中能用矢量图层+编组功能模拟出html的div的嵌套关系！在其导出的SVG中能看到，只要写一个转化程式就能转为html代码，但这么做却会造成CSS样式混乱或者根本没用(程序思路太复杂，我猜大概会发生这些情况)，而且在AI中写ID名字效率也不高啊；这个灵感是来自于photoshop切图中可以对图片附加一些信息，达到导出后能用脚本使之转化为目标码的想法（算是一种钩子吧，用程式解析钩子还原为html代码，如果能实现的话那就好了）。

要不自己弄个软件出来专门处理这种问题，开始想起来还是蛮简单的，但细分到程序面时却感觉到非常复杂，不是一个人能在短时间能搞定的事，因为涉及到矢量绘图和编码转化生成的问题，实在搞不定。依我目前的水平也就能在熟悉的软件上加些脚本插件做处理。

很羡慕adobe muse这款专门给不懂代码的设计师用的软件，但仅仅是把人家的破解版拿来用就完事了么，今后怎么办毕竟拿破解版做商用是很不道德的事而且不光彩。（以前仅仅是因为学习才在用破解版软件，后来到商业环境看到了破解版软件的危害非常可怕。）

探讨网页高效制作流程01 结束。