WYSIWYG_Web_Builde入门教程

WYSIWYG Web Builder是一个网页制作工具，不用编程，通过拖拽式操作, 以所见即所得的方式快速制作网页。

相对于DW等专业工具，它更加轻量级，整个安装文件大小仅为8.76M。

你既可以制作传统PC端网页，也可以制作RWD自适应网页，还可以使用jquery mobile设计手机APP。

它包含丰富的网页组件以及智能的一个网页布局系统：
1.网页基本元素：文字，图片，视频，表格，，表单
2.样式多样的导航菜单，幻灯片，jquery ui元素，现成的javascript特效
3.以php驱动的CMS以及用户登录管理模块，和数据库紧密结合。

4.适应多种设备的页面设计
5.jquery mobile 界面设计
6................
它还具有强大的扩展特性，通过海量插件实现更多酷炫功能。

用WYSIWYG Web Builder制作属于自己的第一个网页
1.我们要清楚希望制作的网页的效果是怎样的。

在这里我们需要的效果如下：
DEMO演示：小猩猩幼儿园
2.制作这个网页，我们需要额外的一些素材：背景图片，视频文件之类的
本教程素材下载:images
3.确定我们这个网页的布局。

我们现在的布局采用整体上为固定宽度的单列多行布局：头部---容--底部。

每一部分所占据的宽度、高度我们都要做到心里有数，比我我们现在各个部分的宽高准备如下：
头部：宽：1600 px 高120+36px （banner+导航层，导航层中包含了菜单高度36px 宽度1000px）
容：宽度1000px 高度：图片轮换高度350px+侧边栏导航高度540px+家育共建高度
260px+20px（预留空间）
底部：宽度1000px 高度100px
制作属于自己的第一个网页之二页面布局
首先我们要对当前页面的基本信息进行设置：标题，宽度，页面居中显示，高度可以不设置，软件会自动扩展高度。

工作区--右键--page properties
然后，我们放置layer对象进行布局：
wysiwyg 布局的原理有两种：table 或者CSS，由于table布局已经几乎被淘汰，所以软件默认采用div css 布局，实现方式是一个wysiwyg web builder 的layer对象，一个layer 对象就是一个网页DIV块(也称为DIV容器)，就像是一个可以装东西的盒子那样，我们在里面放置网页元素。

操作layer对象：toolbox---advanced--layer，我们将它拖到工作区--选中该layer ，根据之前的布局以及容器宽高设置它的属性：css id（块的名字）以及宽高，然后拖到对应位置。

另外，为了确保这个层（layer对象）在页面居中，右键该layer--center in
page--horizontally。

注意1：在layer对象进行布局过程中，为了对layer对象进行更加精确的定位摆放，最好根据情况，缩放工作区.
注意2：放置好了layer位置以后，最好将layer对象锁定，这样可以避免一些误操作让layer 移位。

熟悉了layer的操作，我们就可以将我们需要的layer添加并且布局，如下所示：
头部容器中：我们需要三个layer对象：分别命名为header（头部主容器），banner，menu(导航层），尺寸大小参考上面的素材准备。

容容器中：我们需要12个layer对象：分别命名为
main（容主容器），main_top（图片轮换容器）,
main_midlle（侧边导航以及公告、播报、混排的容器）,
main_bottom（家园和风采的容器）,left（侧边栏导航）,
right（公告、播报、混排的容器）,
right_up（公告、播报）,right_down（混排的容器）,
announce（公告）,news(播报）,video（家园容器）,slider_belt(宝宝风采展示的容器)
底部容器中：我们需要一个layer对象：命名为footer
整个布局所用的layer对象以及层级关系都可以在对象管理器中查看
最终布局效果图如下：
制作属于自己的第一个网页之三放置元素以及定义样式
首先，设置这个网页整体的背景，它是一图片
工作区--右键--page properties
header容器：在该网页中仅仅是定位的作用，所以不需要样式的定义，我们只需设置一下它的背景，让它透明
注意：由于header容器被banner容器以及menu容器所覆盖，所以为了方便对header操作，我们在对象管理器中设置banner容器以及menu容器为不可见：把对应对象的可视的勾去掉，我们看到只露出header层了。

设置完了，我们再把子容器;banner容器以及menu 容器勾选为可视。

banner容器：我们看到里面是一图片，实现这个效果，我们既可以添加一个图片对象，又可以将该容器的背景设置为图片，我们选择了设置背景图片这个方法。

menu容器：首先我们设置一个纯色图片作为它的背景，然后添加一个导航菜单组件：
现在我们添加一个CSS菜单对象：toolbox--navigation--CSS menu，设置它的宽度，并且拖放到menu容器中，让菜单对象居中显示，调整高度，使得导航菜单在恰当的位置,如图：1.添加菜单项
2.设置菜单样式1
3.设置菜单样式2
4.设置菜单样式3
5.设置菜单样式4
至此，菜单制作完毕。

main 容器：设置这个它的背景为一图片
main_top容器：
在该网页中显示的是一个幻灯片，而它自己本身仅仅是一个定位容器，只是包含了一个幻灯片对象，对于main_top我们只需设置一下它的背景，让它透明,然后加入幻灯片：toolbox--images--slidershow
slide show 拖到工作区时，会弹出对话框提示你添加图片，按住ctrl+多选就可以了
现在我们设置一下该幻灯片样式：一个是幻灯片的图片说明，还有一个是幻灯片的分页按钮main_midlle容器：在该网页中仅仅是一个定位容器，我们只需设置一下它的背景，让它透明
left容器：在该网页中仅仅是一个定位容器，我们只需设置一下它的背景，让它透明，它里面有一个元素：垂直的导航：这个我们用图片地图来实现：toolbox--images--imagemap
对该图设置热点（热点，就是可以连接到其他的网页的区域）：右键---add polygon hotspot--选择--确定，就看到一个可以伸缩的区域，点击这个区域，然后将这个伸缩区域的每个角，对应你想要设置热点的地方的四个角。

right以及right_up容器：在该网页中仅仅是一个定位容器，我们只需设置一下它的背景，让它透明。

announce容器：它是一个以图片为背景的容器，并且在该容器中，我们放置一个向上滚动的marquee对象：toolbox---standard--marquee。

news容器：它是一个以图片为背景的容器，并且在该容器中，我们放置一个table对象：toolbox---standard--Table，这个Table两列多个行，第一列是一列图片，第二列是列表标题
right_down容器：它的背景是一图片，里面包含的是一个图文混排，首先我们可以直接插入一个image 组件：toolbox--images--image，然后再放入两个text组件：
toolbox---standard--text，在每个text里放入一些文字。

main_bottom容器：在该网页中仅仅是一个定位容器，我们只需设置一下它的背景，让它透明，其中包含的video,slider_belt 容器，根据效果图分别设置背景图片。

video 容器：包含一个视频播放，我们插入一个image 组件：toolbox--media--flash，slider_belt 容器：
加入幻灯片：toolbox--images--slidershow，slide show 拖到工作区时，会弹出对话框提示你添加图片，按住ctrl+多选就可以了
，这里我们需要设置幻灯片模式：
最后有个footer容器：我们只需在里面放置一个javascript组件：
toolbox--advanced--ready-to-use-javascript
设置完了样式，然后我们预览一下效果，就可以生成代码了
最终效果：DEMO
项目文件下载：project。