使用VTEditor软件快速开发网站系列教程六 框架篇

呵呵，很多在做自助建站系统、免费做网站、低价格做网站的朋友看到这篇文章很兴奋了吧，因为只要是美工朋友都知道，当你们画张效果图N简单，但是要将这个效果图切割出来，然后使用DIV+CSS进行布局，太头痛了吧。现在看看使用VTEditor软件如何快速的布局一个网页，最主要的是你不需要接触代码。大大降低了网站开发的周期和成本。

下面我给大家具体举个例子，如何快速布局一个页面结构，最终要实现的效果是这样的：



这样的一个布局应该比较复杂了吧，如果使用DiV+CSS布局，没有一定功底，是得花费一些时间了。下面开始用VTEditor软件做吧！

首先我们点工具栏上的“

”，然后将弹出窗口中的所有代码删除，再保存，这样就得到了一个空的框架页面如下图：



然后，分析下上面最终要实现的框架页面结构，我们可以按照下面几个步骤完成：

A．先拆分 6 行

B．然后对第二行进行拆分成左右2列

C．然后左侧再拆分3行

D．右侧部分拆分4行

E．对拆分的4行中第一行和第三行，再拆分成2列。

这样就能把框架搭好了。

接下去，一步一步我们在软件里实现：

首先，我们看到空框架页面，默认就有一行了，我们在这一行上右键，弹出菜单，如下图：



A步骤：点“添加框架行（下）”。这样就多了一行，我们依样操作5次，就可以得到6行了。

如下图：



B步骤：在第二行上双击左键。弹出如下窗口：



然后，点“父级”-> “操作” -> “拆分列”

输入2列后，点“确定”。



C步骤：点刚刚拆分好的左侧部分，同样，进行双击，弹出窗口中，点“父级”-> “操作” -> “拆分行”。因为我们要拆分成3行，输入3后，保存。将得到如下界面：



D步骤：将右边部分，进行上述操作，点“父级”-> “操作” -> “拆分行”，输入4行，保存，得到如下界面：



E步骤：将第一行和第三行，进行拆分列，拆分成2列，如下图：



好了，用了1分钟左右的时间，上面效果的框架页面结构已经全部搭建好了。而且是div+CSs的，最重要的是，你可以通过双击某个区域，任意修改宽度，高度，间距，背景，边框，等等，根本不需要接触任何代码。简单吗？

是的，做网站，就是这么简单！你不懂代码没有关系，不懂网络没有关系，如果你学会了这套软件，我们公司长期招收模板开发兼职，欢迎您的加盟！携购网络科技有限公司旗下，VTEditor网站模板可视化编辑系统。

欢迎大家与我交流。QQ：8814730 Email：wkb@xiegoo.com