ViewDiv下载-ViewDiv v1.1

软件介绍

ViewDiv是一款可视化网页创建工具，具有高效的网页布局功能，通过它用户可以很轻松而又直观的创建精美的网页；用户可以使用软件提供的各种工具直接在画布中绘制需要的元素，并且可以自动创建一些基本的CSS样式，让用户能够在短时间内完成网页的创建和布局；ViewDiv的功能组件可以像模块一样自由的添加或者删减，输出的网页也可以轻松支持电脑和移动设备的屏幕尺寸，这提高了网页开发者的效率，并降低了用户开发网页的难度；这款软件非常适合刚入门的新手小白，不过对于经验丰富的网页设计师，通过这款软件，也可以为其节约不少的时间。

软件功能

1、通过鼠标选择各种工具在画布上画出元素，可自动创建基本的CSS样式，可非常快速的完成对网页的布局创建。

2、其组件可模块化添加，输出的网页支持移动设备，兼容多种屏幕尺寸，极大的提升了开发者的工作效率，同时显著降低了网页布局的难度。

3、提供了创建各种元素的基本工具，可进行增加、修改、删除、创建新分组等操作，可通过组件中心动态添加模块化组件。

4、通过在工具栏选择所要创建元素的类型，在绘图窗口绘制元素的宽高和显示的位置，预览窗口时时显示绘制的内容。

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

6、显示正在编辑的CSS类名和常用的快捷功能：“微调工具（快捷键F1）”、“自动创建CSS（快捷键F2）”、“着色开关（快捷键F3）”

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

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

软件特色

所见即所得

布局可视化，CSS参数化，代码生成自动化；

实时着色

多种元素同时着色，清晰分辨各种元素；

可扩展工具栏

轻松添加各种模板，键应用轻松完成；

多种项目模式

电脑页面，移动设备页面，支持栅格布局库；

使用方法

创建项目

1、默认模式：

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

2、弹性布局：

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

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

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

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

创建元素

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

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

工具栏

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

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

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

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

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

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

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

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

工具栏管理

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

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

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

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

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

元素多选

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

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

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

创建参考线

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

锁定元素

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

元素位置与尺寸

1、选中元素使用“选择工具”通过鼠标拖动到指定位置

2、选中元素使用属性面板中的参数来设置元素的位置

3、使用“微调工具”可以对元素进行微量调整

4、选中键盘按下方向键可以对元素位置进行微调。

5、选中元素通过工具菜单-元素全屏显示功能，可将元素宽高与画布宽高相等。

6、选中元素通过右键菜单-上层等宽，可将元素尺寸宽度与上层元素的宽度相同。

7、选中元素通过右键菜单-画布等宽，可将元素尺寸宽度与画布的宽度相同。

元素跟随

1、选中元素拖动改变元素尺寸与位置，在元素跟随功能开启的情况下，外层元素的尺寸改变会同时影响子元素的尺寸与位置，反之仅影响当前选中的元素。开启与关闭的方法选中元素右键“开启跟随/关闭跟随”。

着色功能

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

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

微调工具选项

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

自动CSS选项

1、位于工具栏的底部，快捷键F2，开启此选项在创建元素时则可以自动创建CSS样式，用于控制宽度与位置。反之则不创建。

修改CSS名称

1、选中元素按F5即可调出CSS名称修改窗口

通过此方法修改的CSS类名，会同时修改HTML元素引用处的名称。

如果选中“在CSS文档中将含有原名称的类替换成新名称”选项，那么含有此类名的其它类的名称都会被修改，

如：要修改的类名为.css1,将其修改成.news,CSS文件中.css1ul{,这种多个定义的类名称也会被同时修改，此时将会修改成.newsul{

下面这种情况不会被修改，.css11111,虽然名称中也含有.css1，但仅仅是字符相同，并非相同类名。

2、ViewDiv提供另一种修改方法，在CSS编辑器选中要修改的类，右键选中“改名”，即可修改CSS名称，在此处修改的CSS类名，并不会修改HTMLCLASS引用的名称，其修改仅针对CSS当前文件。

或者在底部CSS面板选中要修改的CSS类名，使用“修”按钮也可以达到同样的效果。

CSS的创建

1、在CSS面板“新建”输入CSS名称，点击“创建”，或按回车即可创建新的CSS，在新建输入框中双击可添加当前引用的CSS名称。

应用CSS样式到元素

1、选中一个元素，在类名下拉框选择CSS类，点击应用即可。

2、在CSS编辑器右键，选择“应用”，可将CSS应用到当前选择的元素

添加引用一个新的CSS文件

1、在文件面板创建新的CSS名称，在使用CSS面板“增”功能引用一个新的CSS名件，添加的文件可以通过文件编辑

2、通过编辑面板编辑HTMLhead区域添加远程文件，或引用的CSS文件，或使用右则“插入CSS”功能也可以。此方法添加的CSS文件不支持快速编辑，仅可以通过编辑器编辑。

编辑CSS样式

1、在文件名称的右侧点击“编”按钮即可使用快速编辑功能

2、选中CSS内容使用文本编辑模式即可弹出CSS编辑窗口

3、在CSS编辑器右键，选择“编辑”，可编辑当前位置的CSS类

CSS类添加自定义内容

1、程序目前提供的CSS快速编辑功能，仅支持部分常用的CSS样式，对于那些不常用的样式可以使用如下方法添加

创建样式后将面板拖动到最后，可以在自定义内容添加样式，或使用“文本编辑模式”。

给元素添加一个超链接

1、选中要操作的元素，在底部功能面板选择“属性”、“链接设置”可以在元素外部添加超链接。

2、在内容面板中输入A标签，则可以在元素内部创建超链接。

修改元素属性

1、选中要操作的元素，在底部功能面板选择属性、HTML属性即可以快速设置，点击“+”号可添加自定义属性“-”删除属性或属性内容为空也可以删除设置。

为当前项目添加文件

在文件管理面板右键调出功能菜单，选择添加功能还可以对文件进行新建、复制、剪切、删除、重命名等操作。

查看文件的编码

在文件管理面板右键，显示属性即可

给HTML添加一段注释

选中要操作的元素，在底部功能面板选择属性、注释设置即可以快速设置

放大编辑器模式

1、在ViewDiv提供了编辑器的代码放大编辑功能，点击右上角的图标即可弹出放大图标。

项目设置

1、设置-项目设置可以对当前画面进行设置，显示/关闭设计图，设置画布的尺寸。

2、HTML输出、资源输出目录的设置，配合文件菜单“输出文件”，可将资源输出的指定位置。

27、查找与替换

27.1、工具-查找替换窗口，可对文档、项目、指定文件夹、进行查找与替换操作

27.2、在文档编辑器中按ctrl+f会在底部显示精简版的搜索框，第一个输入框为搜索的内容，在输入状态按下回车会循环搜索，第二个输入框为替换内容，按下回事会替换下一个内容，弹出功能会显示完整的搜索框，按esc或x可关闭。

28、取色

28.1、工具-取色窗口，可对桌面进行取色，按方向“下键可”放大选择点“F6”、“F7”、“F8”可复制当前取色结果。

29、代码格化

29.1、代码格式化请使用工具-CSS代码格式化、HTML代码表格化。

30、颜色面板

30.1、工具-颜色面板窗口，可获取颜色值。

Tags:ViewDiv下载,网页设计,网页制作