WYSIWYGWebBuilde入门教程.docx
- 文档编号:25433115
- 上传时间:2023-06-08
- 格式:DOCX
- 页数:16
- 大小:508.66KB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WYSIWYGWebBuilde 入门教程
![提示](https://static.bdocx.com/images/bang_tan.gif)