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