WYSIWYGWebBuilde入门教程.docx
《WYSIWYGWebBuilde入门教程.docx》由会员分享，可在线阅读，更多相关《WYSIWYGWebBuilde入门教程.docx（16页珍藏版）》请在冰豆网上搜索。
WYSIWYGWebBuilde入门教程
WYSIWYG_Web_Builde入门教程
WYSIWYGWebBuilder是一个网页制作工具，不用编程，通过拖拽式操作,以所见即所得的方式快速制作网页。
相对于DW等专业工具，它更加轻量级，整个安装文件大小仅为8.76M。
你既可以制作传统PC端网页，也可以制作RWD自适应网页，还可以使用jquerymobile设计手机APP。
它包含丰富的网页组件以及智能的一个网页布局系统：
1.网页基本元素：
文字，图片，视频，表格，链接，表单
2.样式多样的导航菜单，幻灯片，jqueryui元素，现成的javascript特效
3.以php驱动的CMS以及用户登录管理模块，和数据库紧密结合。
4.适应多种设备的页面设计
5.jquerymobile界面设计
6................
它还具有强大的扩展特性，通过海量插件实现更多酷炫功能。
用WYSIWYGWebBuilder制作属于自己的第一个网页
1.我们要清楚希望制作的网页的效果是怎样的。
在这里我们需要的效果如下：
DEMO演示：
小猩猩幼儿园
2.制作这个网页，我们需要额外的一些素材：
背景图片，视频文件之类的
本教程素材下载:
images
3.确定我们这个网页的布局。
我们现在的布局采用整体上为固定宽度的单列多行布局：
头部---内容--底部。
每一部分所占据的宽度、高度我们都要做到心里有数，比我我们现在各个部分的宽高准备如下：
头部：
宽：
1600px高120+36px（banner+导航层，导航层中包含了菜单高度36px?
宽度1000px）
内容：
宽度1000px高度：
图片轮换高度350px+侧边栏导航高度540px+家育共建高度260px+20px（预留空间）
底部：
宽度1000px?
高度100px
制作属于自己的第一个网页之二页面布局
首先我们要对当前页面的基本信息进行设置：
标题，宽度，页面居中显示，高度可以不设置，软件会自动扩展高度。
工作区--右键--pageproperties
?
然后，我们放置layer对象进行布局：
wysiwyg布局的原理有两种：
table或者CSS，由于table布局已经几乎被淘汰，所以软件默认采用divcss布局，实现方式是一个wysiwygwebbuilder的layer对象，一个layer对象就是一个网页DIV块（也称为DIV容器），就像是一个可以装东西的盒子那样，我们在里面放置网页元素。
操作layer对象：
toolbox---advanced--layer，我们将它拖到工作区--选中该layer，根据之前的布局以及容器宽高设置它的属性：
cssid（块的名字）以及宽高，然后拖到对应位置。
另外，为了确保这个层（layer对象）在页面居中，右键该layer--centerinpage--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对象以及层级关系都可以在对象管理器中查看
最终布局效果图如下：
制作属于自己的第一个网页之三放置元素以及定义样式
首先，设置这个网页整体的背景，它是一张图片
工作区--右键--pageproperties
header容器：
在该网页中仅仅是定位的作用，所以不需要样式的定义，我们只需设置一下它的背景，让它透明
注意：
由于header容器被banner容器以及menu容器所覆盖，所以为了方便对header操作，我们在对象管理器中设置banner容器以及menu容器为不可见：
把对应对象的可视的勾去掉，我们看到只露出header层了。
设置完了，我们再把子容器;banner容器以及menu容器勾选为可视。
banner容器：
我们看到里面是一张图片，实现这个效果，我们既可以添加一个图片对象，又可以将该容器的背景设置为图片，我们选择了设置背景图片这个方法。
menu容器：
首先我们设置一个纯色图片作为它的背景，然后添加一个导航菜单组件：
现在我们添加一个CSS菜单对象：
toolbox--navigation--CSSmenu，设置它的宽度，并且拖放到menu容器中，让菜单对象居中显示，调整高度，使得导航菜单在恰当的位置,如图：
1.添加菜单项
?
?
2.设置菜单样式1
?
3.设置菜单样式2
?
4.设置菜单样式3
?
5.设置菜单样式4
至此，菜单制作完毕。
main容器：
设置这个它的背景为一张图片
main_top容器：
在该网页中显示的是一个幻灯片，而它自己本身仅仅是一个定位容器，只是包含了一个幻灯片对象，对于main_top我们只需设置一下它的背景，让它透明,然后加入幻灯片：
toolbox--images--slidershow
slideshow拖到工作区时，会弹出对话框提示你添加图片，按住ctrl+多选就可以了
现在我们设置一下该幻灯片样式：
一个是幻灯片的图片说明，还有一个是幻灯片的分页按钮
main_midlle容器：
在该网页中仅仅是一个定位容器，我们只需设置一下它的背景，让它透明
left容器：
在该网页中仅仅是一个定位容器，我们只需设置一下它的背景，让它透明，它里面有一个元素：
垂直的导航：
这个我们用图片地图来实现：
toolbox--images--imagemap
对该图设置热点（热点，就是可以连接到其他的网页的区域）：
右键---addpolygonhotspot--选择链接--确定，就看到一个可以伸缩的区域，点击这个区域，然后将这个伸缩区域的每个角，对应你想要设置热点的地方的四个角。
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，slideshow拖到工作区时，会弹出对话框提示你添加图片，按住ctrl+多选就可以了
，这里我们需要设置幻灯片模式：
最后有个footer容器：
我们只需在里面放置一个javascript组件：
toolbox--advanced--ready-to-use-javascript
设置完了样式，然后我们预览一下效果，就可以生成代码了
最终效果：
DEMO
项目文件下载：
project
升级会员 