高效可视化网页布局(ViewDiv)

ViewDiv是一款可视化的网页布局软件，软件具有布局可视化、CSS样式参数化、代码生成自动化的特点，通过鼠标选择各种工具在画布上画出元素，并且可自动创建基本的CSS样式，可非常快速的完成对网页的布局创建。其组件可模块化添加，编译出的网页支持移动设备兼容多种屏幕尺寸，极大的提升了开发者的工作效率，同时显著降低了网页布局的难度。有需要的小伙伴欢迎来西西下载体验。

软件简介：

ViewDiv 是一款可视化的网页布局软件，软件具有布局可视化、 CSS 样式参数化、代码生成自动化的特点，通过鼠标选择各种工具在画布上画出元素，可自动创建基本的 CSS 样式，可非常快速的完成对网页的布局创建。其组件可模块化添加，输出的网页支持移动设备，兼容多种屏幕尺寸，极大的提升了开发者的工作效率，同时显著降低了网页布局的难度。

软件特色：

所见即所得

布局可视化

CSS参数化

代码生成自动化

实时着色

多种元素同时着色

清晰分辨各种元素

可扩展工具栏

轻松添加各种模板

键应用轻松完成

多种项目模式

电脑页面

移动设备页面

支持栅格布局库

使用说明：

1、窗口介绍

1.1、工具栏

工具栏提供了创建各种元素的基本工具。并且工具栏可进行增加、修改、删除、创建新分组等操作，可通过组件中心动态添加模块化组件。添加方式“设置”菜单 --> “添加组件”功能。

1.2、菜单栏

菜单栏提供了具体功能的使用入口。

1.3、信息栏

信息栏用于显示当前选中元素以及项目的基本信息

1.4、布局窗口

布局窗口为程序的核心窗口，元素布局的绘制都在此工作区域内完成，通过在工具栏选择所要创建元素的类型，在绘图窗口绘制元素的宽高和显示的位置，预览窗口时时显示绘制的内容。

1.5、预览窗口

预览窗口可分为 HTML 效果预览、HTML 代码预览、 CSS 代码预览

1.6、快捷操作栏

显示正在编辑的CSS 类名和常用的快捷功能

“微调工具（快捷键 F1 ）”、“自动创建 CSS （快捷键 F2 ）”、“着色开关（快捷键 F3 ）”

1.7、浏览面板

左侧区域显示当前项目的文件目录  右侧显示当前项目的布局结构

1.8、属性设置面板

设置元素的坐标位置、超链接设置、HTML元素属性、注释设置

1.9、CSS 样式面板

CSS 样式的创建、删除、修改、查看、引用、注释、快速编辑都通过此面板操作。

2.0、内容设置面板

设置选中元素的内容与CSS样式模板，任何类型的自定义内容均通过此添加。  
(注意！在编辑器内添加JS脚本时，请勿使用 "//注释内容" 格式的注释，请使用 "/*注释内容*/" 格式的JS注释)

2.1、TAB 设置面板

设置TAB 元素的模板与 CSS 样式、标签数量、宽度、高度、等参数。

2.2、标签设置面板

设置元素内使用的标签，如CMS 的模板标签语句 此处内容不参与 HTML 的渲染显示，仅在保存输出标签时保存到文件。
(注意！在编辑器内添加JS脚本时，请勿使用 "//注释内容" 格式的注释，请使用 "/*注释内容*/" 格式的JS注释)

2.3、编辑面板 

编辑窗口可编辑HTML 文件的 head 区域内容与底部内容，  

如在页面顶部引用一个新CSS 文件，在底部插入一个 JS 内容，都通过此面板操作。  
(注意！在编辑器内添加JS脚本时，请勿使用 "//注释内容" 格式的注释，请使用 "/*注释内容*/" 格式的JS注释)

2.4、搜索面板

通过查找窗口进行全局内容搜索的结果显示在此面板中