WYSIWYG_Web_Builde入门教程.docVIP

WYSIWYG Web Builder是一个网页制作工具，不用编程，通过拖拽式操作, 以所见即所得的方式快速制作网页。 相对于DW等专业工具，它更加轻量级，整个安装文件大小仅为8.76M。 你既可以制作传统PC端网页，也可以制作RWD自适应网页 ，还可以使用jquery mobile设计手机APP。 它包含丰富的网页组件以及智能的一个网页布局系统： 网页基本元素：文字，图片，视频，表格，链接 ，表单 样式多样的导航菜单，幻灯片，jquery ui元素，现成的javascript特效 以php驱动的CMS以及用户登录管理模块，和数据库紧密结合。 适应多种设备的页面设计 jquery mobile 界面设计 它还具有强大的扩展特性，通过海量插件实现更多酷炫功能。 用WYSIWYG Web Builder制作属于自己的第一个网页 1.我们要清楚希望制作的网页的效果是怎样的。 DEMO演示：小猩猩幼儿园2.制作这个网页，我们需要额外的一些素材：背景图片，视频文件之类的images 3.确定我们这个网页的布局。 制作属于自己的第一个网页之二页面布局 首先我们要对当前页面的基本信息进行设置：标题，宽度，页面居中显示，高度可以不设置，软件会自动扩展高度。 工作区--右键properties ? 然后，我们放置layer对象进行布局： wysiwyg 布局的原理有两种：table 或者 CSS，由于table布局已经几乎被淘汰，所以软件默认采用div css 布局，实现方式是一个wysiwyg web builder 的layer对象，一个layer对象就是一个网页DIV块(也称为DIV容器)，就像是一个可以装东西的盒子那样，我们在里面放置网页元素。操作layer对象：toolboxadvanced--layer，我们将它拖到工作区--选中该layer ，根据之前的布局以及容器宽高设置它的属性：css id（块的名字）以及宽高，然后拖到对应位置。另外，为了确保这个层（layer对象）在页面居中，右键该layer--center in horizontally。 注意1：在layer对象进行布局过程中，为了对layer对象进行更加精确的定位摆放，最好根据情况，缩放工作区. 注意2：放置好了layer位置以后，最好将layer对象锁定，这样可以避免一些误操作让layer移位。 ? 熟悉了layer的操作，我们就可以将我们需要的layer添加并且布局，如下所示： 头部容器中：内容容器中：底部容器中： 制作属于自己的第一个网页之三放置元素以及定义样式 首先，设置这个网页整体的背景，它是一张图片 工作区--右键properties header容器： 注意：不可见 banner容器：menu容器： ? ? 2.设置菜单样式1 ? 3.设置菜单样式2 ? 4.设置菜单样式3 ? 5.设置菜单样式4 至此，菜单制作完毕。 main 容器：main_top容器： 现在我们设置一下该幻灯片样式：一个是幻灯片的图片说明，还有一个是幻灯片的分页按钮main_midlle容器：left容器： right以及right_up容器：announce容器：news容器：它是一个以图片为背景的容器，并且在该容器中，我们放置一个table对象：toolboxstandard--Table，这个Table两列多个行，第一列是一列图片，第二列是列表标题 ? ? right_down容器：main_bottom容器：video 容器： slider_belt 容器： 最后有个 footer容器：我们只需在里面放置一个 javascript组件：toolbox--advanced--ready-to-use-javascript 设置完了样式，然后我们预览一下效果，就可以生成代码了 最终效果：DEMO 项目文件下载：project