很多美工，还是习惯用Photoshop设计页面然后Slice，这样的设计方式对他们来说比较直观，不需要在脑袋里想着效果然后写HTML和CSS然后再看实现得如何。能够脑袋里想着结果然后闭上眼睛写代码的，估计主要还是程序员，美工需要能够看得到摸得着一步一步去fit的东西。虽然现在也有些美工人员在尝试摆脱HTML table排版改用CSS，但是用Photoshop输出的table改div和CSS既不方便结果也不一定是最优的（相对能够闭上眼睛写HTML+CSS的人来说）。于是，我就想如果能够开发一个有点类似Photoshop那样的绘图见面，但又能够直接用于设计CSS的设计器，应该会很多人喜欢。
其实Frontpage和Dreamweaver已经很“所见即所得”，专门的CSS编辑器如TopStyle也是能够编辑CSS的同时显示效果，为什么还要像Photoshop那样？因为我觉得美工是靠feel工作的，例如导航栏的高度和文字定位，你要求美工修改一下height然后又调整一下padding和margin，尝试一下px做单位，又换用一下%做单位，这应该是比较痛苦的事情。人家在Photoshop里面，导航栏高度喜欢拉多高就拉多高，文字定文也是用鼠标放，这完全是靠看着整个页面的构图感觉来做的，对着一堆CSS改一下代码再看一下结果就很不爽。所以，这个类似Photoshop的CSS设计器一定要完全实现在可视化界面上实现所有操作，也就是说用户也是直接通过拖动就能够实现字体定位的，至于margin和padding就让设计器自己去管理，没必要让用户操心，用户最多选一下按px计算还是按%计算然后看看不同情况下变化的效果。
要说明的是，因为美工面对的往往不是一个fixed的页面，而是随浏览器可视区域变化而变化的页面，所以设计器本身应该支持不同可视区域大小的preview。例如我当前在1024*768可视区域的模式下设计，但是旁边有缩略图显示这个CSS在800*600中的显示效果，通过鼠标放置字体位置后，改变按px计算和按%计算不会影响1024*768模式下的效果（因为这是当前设计模式），但是800*600模式下的preview就会跟随改变，因为当前的设计效果按照不同的单位来定位的话在其它模式下的显示结果是不同的。
这个设计器的重点，应该就是div和ul的放置了，因为这两个东西现在用得最多。div的放置应该支持dock(停靠)的效果，或者是现在WinForm所支持的anchor效果（比dock更好）。在说这个之前，大家可以来看看一个在线的CSS Creator的效果：
http://www.csscreator.com/version2/pagelayout.php
这个东西允许你设置常见的排版模式，例如有没有Header和Footer，它们的高度多少，按px还是按%算，body部分分为几个column（最多3个），宽度又如何算，页面的最大最小高度如何。我所谓的div支持dock，就是类似现在主流所做的那样啦，3栏结构的话，左栏dock左边、右栏dock右边、中栏占满剩余空间（这不废话），如果超过3栏也能dock/anchor的话就更好了。anchor是一个比dock更好用的东西，dock只能依赖于4页面边缘，anchor则是任何一个控件的4边缘都可以依赖于仁和另外4个附近控件的边缘，如果CSS能够实现anchor效果就好了。另外就是要有一个preview显示无CSS时的效果，能够看到完全无CSS时出来的样子如何。
没有评论:
发表评论