ViewDiv(可视化网页制作软件)

　　ViewDiv是一款可以帮助用户制作网页的软件，可以快速创建新的CSS样式、可以应用CSS样式、引用新CSS文件、编辑CSS样式、CSS自定义、添加超链接、修改元素属性、添加项目文件、查看编码、HTML注释，所有可以操作的功能都可以在主界面的菜单工具找到，让用户在编辑网页样式的时候可以获得更方便的操作方案，这款软件功能还是很多的，无论是调整网页样式还是设计元素都很方便，对于需要设计CSS网页的朋友很适合，需要的朋友就下载吧！

软件功能

　　所见即所得

　　布局可视化

　　CSS参数化

　　代码生成自动化

　　实时着色

　　多种元素同时着色

　　清晰分辨各种元素

　　可扩展工具栏

　　轻松添加各种模板

　　键应用轻松完成

　　多种项目模式

　　电脑页面

　　移动设备页面

　　支持栅格布局库

软件特色

　　工具栏管理

　　1、在工具栏右键，点击“组件管理”窗口即可对管件进行管理。

　　2、此窗口下修改内容的保存方式为，按回车键二次即保存。

　　3、例如修改分组名称，将“基本组件”的名称修改为“我的组件”

　　4、输入完成后按下回来确认输入的内容，在次按下回来则为保存，然后点击“完成”。

　　5、此窗口还可以对组件进行批量的收藏，使用方法选中“收藏” 复选框 ，在点击 “完成” 即可。

　　元素多选

　　1、按住CTRL键盘，鼠标单击，可实现对元素的多选，也可以通过浏览面板的结构窗口对元素实现多选操作。

　　2、取消多选状态，在结构浏览窗口选中任意元素即可退出多选，或单击画布空白处。或点击任意一结构元素。

　　3、在元素多选的状态下可进行参数设置，如批量设置元素内容，多选元素切换到底部内容面板，设置内容，此时点击应用，当前选中的所有元素都有相同的内容。

　　创建参考线

　　1在画布“顶部标尺”上按下鼠标向下拖动，可以创建出水平的参考线，在垂直标尺按下拖动可创建垂直方向的参考线。 删除参考线，可以将参考线拖回标尺，或在参考线上右键选择删除参考线。通过工具菜单可锁定参考线。

　　锁定元素

　　1、选择要操作的元素，点击底部的第一个图标，即可锁定元素，反之则解除锁定。通过结构浏览面板也可以实现同样操作。

　　着色功能

　　1、开启着色功能可更直观的看到元素的实现大小与位置，着色功能仅在预览窗口中显示，并不会保存到实际文件。

　　2、通过底部工具栏开启，可快捷键F3。

　　微调工具选项

　　1、微调工具可对选中元素进行像素级别的调整，开启此工具将会在选中元素下部显示工具栏每点击一次增加/减小1像素，使用底部工具栏或F3开启/关闭

安装方法

　　1、打开ViewDiv_1.0_试用版_Setup.exe就可以直接安装，可以在软件选择自定义安装

　　2、软件安装地址是D:Program FilesViewDiv，等待安装结束吧

　　3、软件已经安装到你的电脑，如果你会使用软件就立即打开

使用说明

　　1、打开ViewDiv就可以新建项目，如果你有案例文件就可以在这里打开，也可以加载上传没有设计完毕的项目

　　2、如图所示，这里是新建项目的界面，支持文档模式、项目名称、设计图、画布尺寸、文档名称、CSS名称、文件编码

　　3、软件设计界面如图所示，如果你会设计就在软件界面编辑CSS相关的内容，可以在左边选择功能

　　4、这里是软件提供的工具，有几十种工具可以使用，每种工具使用都非常简单，可以替换新的内容

　　5、如图所示，这里是新的内容设置界面，输入需要查询的内容，随后输入新的内容替换

　　6、取色功能，可以在软件选择需要的颜色，可以在桌面选择需要的颜色

　　7、也支持调色板功能，如果你知道颜色参数就可以在这里立即设置，从而为自己的网页添加颜色

　　8、编码转换功能，在软件界面将输入的文字内容转换为新的编码，打开文件就可以立即转换

　　9、ViewDiv设置功能，固定标尺到顶部、预览窗口自动着色、退出程序删除登陆信息、每五分钟自动备份设计文档

　　10、自动创建CSS类、自动显示微调工具、编辑器文档字体加粗、保存文件自动输出标签

　　11、选中元素颜色、参考线颜色、选中文本颜色、默认文本颜色、文档缩放设置、文档字号设置、默认编码设置

官方教程

　　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、搜索面板

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

　　2 、创建项目

　　2.1、默认模式：

　　创建窗口启动时的默认创建模式 ，常用于创建电脑上显示的网页，CSS单位px。

　　2.2、弹性布局：

　　选中弹性布局 ，在此模式下创建的网页可兼容多种移动设备的屏幕尺寸，CSS单位必需使用rem，在设置CSS单位时可以在输入px值，按下回车将会转换为rem，如在CSS设置面板，设置字号大小，输入16,按下回车键，将会自动转换为0.16，在此模式下自定义CSS样式也需要遵循此转换公式 100px=1rem。

　　2.3、在创建项目窗口中可选添加设计图，也可以创建完后通过“设置”菜单 “项目管理”进行修改。

　　2.4、选中“创建基类”将会为新创建的 CSS 添加基本的 CSS 设置。

　　2.5、在有设计图的情况下，画布尺寸跟随设计图的尺寸，反之则可自定义尺寸，文件编码支持UTF-8 和 GBK 。

　　3 、创建元素

　　3.1、项目创建完成后即可在画布上创建所需要的元素，如选中“区块 div 工具”在画布上画出需要的尺寸，整个的创建流程如同书写 HTML 代码相同。

　　布局顺序：从左到右，从外到内的布局方式。

　　4 、工具栏

　　4.1、 选择工具、可在选中元素后对元素进行移动、改变大小等操作，也可结合对齐工具对元素进行上下左右宽高的对齐操作，按键盘S 键、或菜单右键，可快速切换至此工具。对元素的属性设置都要遵循先选中后操作的顺序。

　　4.2、 对齐工具、可对操作的元素进行“顶部对齐” “底部对齐” “左边对齐” “右边对齐” “宽度相同” “高度相同” “宽高相同” 的对齐操作。

　　使用方法，按住键盘CTRL键，并使用 “选择工具”先中第一个元素，然后在选中第二个要对齐的元素，在选择工具栏的 对齐工具，此时第二个元素将和第一个元素对齐。选择更多元素也是同样操作，第一个选中的为对齐的参照物，后续选中的元素都将和第一个对齐。

　　4.3、 批量创建、可同时创建多个子元素，支持横排、竖排、平均、比例等方式创建，如选中“创建样式”选项则会为每个创建出来的子元素添加一个CSS样式，控制其位置和尺寸。反之则不创建。

　　4.4、 放大/缩小工具，可实现对画布的缩小与放大，快捷键 Z 可在放大与缩小之间切换。

　　4.5、 创建tab工具，可以在画布上创建多页面的TAB集合，从而很方便的创建HTML多页面滑动门效果。结合底部的Tab工具面板，可以很方便的设置Tab标签的数量、宽度、高度、设计图等信息，通过设置Tab的模板可以做出更多效果。

　　4.6、 选中tab元素在底部tab面板点击“设置”，在窗口中即可为每个tab页添加设计图。

　　点击“模板”可为tab选择模板。