用WYSIWYG Web Builder制作网页实例.docx

用WYSIWYG Web Builder制作网页实例.docx

《用WYSIWYG Web Builder制作网页实例.docx》由会员分享，可在线阅读，更多相关《用WYSIWYG Web Builder制作网页实例.docx（16页珍藏版）》请在冰豆网上搜索。

用WYSIWYGWebBuilder制作网页实例

制作属于自己的第一个网页之一前期准备

欢迎来到WYSIWYGWebBuilder中文教程网

本站将通过一个个实战案例教会你如何使用WYSIWYGWebBuilder。

你只需了解基本的网页制作知识，无需编程，就可以快速制作属于自己的网页。

WYSIWYGWebBuilder是网页制作工具，如果想达到更好的制作效果，本站建议学习并且理解以下相关基础知识：

1.网站以及网页的构成 

2.网页元素以及样式 

3.DIVCSS布局 

4.JS&JQUERY 

如果您对服务器端编程以及数据库系统有所了解，也可以使用WYSIWYGWebBuilder制作交互性很强的网页应用，如php动态网页。

用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