ViewDiv可视化网页制作软件的官方教程

ViewDiv是一款功能强大、专业的网页制作软件，该软件具有布局可视化，CSS样式参数化和代码生成自动化的特点。通过选择各种工具在画布上绘制元素，您可以自动创建基本的CSS样式，这可以非常快。完成了网页的布局。今天小编为大家介绍一下ViewDiv可视化网页制作软件的官方教程，希望大家会喜欢。

ViewDiv可视化网页制作软件的官方教程

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选择模板。

以上介绍的内容就是关于ViewDiv可视化网页制作软件的官方教程，不知道大家学会了没有，如果你也遇到了这样的问题的话可以按照小编的方法自己尝试一下，希望可以帮助大家解决问题，谢谢！！！想要了解更多的软件教程请关注Win10下载之家~~~~