用Divbrush 软件辅助切图、输出制作DIV+CSS布局的html网页

　经常在网上看到有帖子，问有没有类似这样的切图软件：一要可以切图，二能输出成（非PS里面提供的table表格的那种）ｄｉｖ（而且要相对定位，如果是绝对定位输出，ｐｓ里面也有，但输出后，是浮动的图层）＋ｃｓｓ的ｈｔｍｌ、ｘｈｔｍｌ静态网页源码。
　我找了n年。欣喜的是：Divbrush v1.0是新开发出来的一套可以切图并输出DIV+CSS布局的源码软件，用后发现，的确对不愿意写代码的美术人员有用。而本人也是编程菜鸟，学了几年美术，再叫我写代码，疯了！
　我想花几页，把作的过程整理一下，并且，也请ｇｇｍｍ们赐教。
　言归正题。
　先简要介绍下软件。Web2.0网页美工助手―――网页Div切片布局设计系统，简称Divbrush ；版本v1.0，是一款专业制作DIV+CSS的切图与样式布局的网页前期设计软件。Divbrush基本实现了可视化DIV容器布局的画板辅助功能，通过图纸定位操作和白板定位操作，可实现HTML/css（DIV流与相对定位）代码输出。同时，它面向网页基础美工群体，是基于PS与DW等专业网页设计软件的理想中间件产品。
软件2009年2月发布测试版，国产，由图像软件开发商南京图圣数据（TOPSUNS CO.LTD）研发出品。
软件免费下载的地址：www.divbrush.cn （官方站点）
请记住：一定要先安装JDK1.5以上环境，然后再安装这个软件！
这里，先介绍通过图纸定位操作来实现HTML/css的代码输出。
第一节 定位、切割布局
（第一步）导入一张网页设计图
单击面板左侧“操作”标签下的“打开”按钮，如图。

导入的设计图稿分辨率，决定着网页输出后html的实际大小。众所周知，现时主流的页面横向尺寸大多数在800~1024PX之间或左右。所以，建议设计的图稿也在这个像素范围之间。
注意：软件目前支持的导入的格式有jpg,gif等；另外，设计图稿超过1024*1024px的话，需注册购买商业版本。
（第二步）确定主容器范围
(2－1) 单击“页面”按钮，如上图。在面板以矩形选定网页主容器范围。

如上图所示，这里说的主容器，可以理解为一张网页的前景部分、同时，是显示文字图片等主要信息内容的范围区域。主容器外部（主要是左右部分）姑且称作背景部分。有的网页顶上和左，而有的网页顶上和右，这个范例则居中排列，即主容器居中,两边为背景部分。软件也提供了背景的切图工具，后面有介绍。

(2－2) 下图表示通过定位第一点和第二点，所形成的主容器矩形范围。主容器由黄色矩形显示。在定位第一点时，可以打开“贴边”按钮，这样，在可以保证黄色区域顶到上边沿。

如下图，即设计图中主容器（网页前景）的设定范围。

（第三步）切割框架
（3－1）单击“框架”按钮，如图。从众多符合Web2.0规范的案例中，我们不难发现，所谓的DIV框架应当被主容器所包围，而框架也分为形形色色的若干样式，但无非是上中下、左右或者综合的框架结构。例子的框架是“上中（1、2）下”结构，“中2”分为左右2列Div。输出的Html，是符合标准的流，以Div标签显示。

需要指出的是，软件左右最多可分为三列，而上下则不限定。如需左右需要设计更多的布局Div列，可以使用软件提供的“布局”工具，后述。
（3－2）下图告诉了你如何切割一行中包括两列的Div（中2）和一行（上）Div的方法。

注意：在切割框架的操作中，可以打开“贴边”按钮以使在5px范围内新操作自动贴紧上次操作的边线。如上框架的第一点需打开“贴边”。
（第四步）“布局”切割
（4－1）单击“布局”。这里的“布局”指的是被框架包围嵌套着的内容范围，可以是文字区域，也可以是图片部分或者其它“内容块”。这些“内容块”中可以嵌套小的“内容块”，依设计图稿中表示的区域为准。在输出Html时，这些“内容块”以Div id 或者class为主要标签，当然，根据网页内容需要，也可以修改成其它标签。这些“内容块”以“相对定位”显示在网页中。


（4－2）布局“内容块”以绿色的矩形在面板显示，如下图。图中深色部分代表Div布局块，其中，#Div、#Div－2、#Div－3代表了父、子、孙关系的嵌套关系。

注意：web2.0不建议多层嵌套。另外，免费的试用版软件也限制了超过三层Div嵌套的应用。