8.76M 的 WYSIWYG Web Builder：不写代码，拖拽出真实网站

简介《WYSIWYG Web Builder 入门教程》是一份面向零基础网页制作爱好者的 PDF 文档帮助不希望编写代码的用户借助拖拽方式快速完成传统 PC 页面、RWD 自适应网页以及手机 APP 界面设计。资源共 1 个 PDF 文件压缩包约 3.23 MB小巧便携便于随时查阅。教程从工具特性讲起介绍文字、图片、导航菜单、幻灯片、jQuery UI 等内置组件并通过实例演示如何规划页面布局、设置 Layer 容器、插入 CSS 菜单与图片轮换最终完成一个完整幼儿园主题网页。对于想摆脱 Dreamweaver 沉重操作、快速上手可视化建站的初学者这份入门材料能提供清晰的操作路径和可复现的练习步骤。目前已有 603 人学习下载值得网页制作新手收藏参考。1. WYSIWYG Web Builder 到底是什么8.76M 的所见即所得工具能不能撑起一个真实网站接到一个幼儿园官网需求七个页面、图文混排、幻灯片、老师自己维护内容、下周就要上线。用 Dreamweaver 太重手写 HTML 又怕后期客户频繁改文案。最后我选了 WYSIWYG Web Builder——一个安装包只有 8.76M 的拖拽式网页制作工具不写代码所见即所得。这份 PDF 入门教程我完整拆过一遍它用「小猩猩幼儿园」这个案例把从布局设计到组件放置再到发布的全流程讲得很实在适合不想碰代码但需要交付真实网站的人也适合前端熟手用来做原型或给客户做维护端。后面我会把教程里的核心操作、参数和踩坑点逐条展开。2. 动手前先定方案从 DW 到 WWB 的选型逻辑以及那张 1600×1000 的布局宽高表2.1 为什么这个工具值得一试轻量不等于功能砍半很多人一听「网页制作工具」下意识就会想到 Dreamweaver。DW 确实强大但订阅制、启动慢、界面复杂对「只做几个静态页面」的场景来说火力过剩。WYSIWYG Web Builder 的定位正好卡在「专业工具」和「在线网站搭建平台」之间它装完才 8.76M打开不卡拖拽响应快而且组件覆盖面不低。从教程里的组件目录看它至少包含几类网页基本元素文字、图片、视频、表格、链接、表单、导航菜单、幻灯片、jQuery UI 元素、现成的 JavaScript 特效还有 PHP 驱动的 CMS 和用户登录管理模块。也就是说除了做纯静态展示页它还能接数据库做简单的内容管理。教程里的 DEMO 只是静态页但工具本身的能力边界明显更大。选型时我一般会给客户分个类纯展示型官网、活动专题页、内部信息页这类需求用 WWB 效率很高大型商城、强交互 Web 应用、需要深度定制前后端的项目就不要硬套这个工具。8.76M 的体量决定了它适合「快速交付、后期客户自己改」的活而不是「从零搭建一套复杂系统」的活。2.2 先定布局再动手把页面变成一张「宽高表」教程第一个让我印象深刻的点是它没有直接让你拖组件而是先花篇幅讲「确定布局」。这一节给的方案是固定宽度单列多行头部、内容、底部三段每段都标了精确宽高。我把教程里的数字整理成下面这张表。区域宽度高度说明头部整体1600 px120 36 pxbanner 区与导航层叠加导航层1000 px36 px位于 banner 下方菜单横向排布内容区1000 px350 540 260 20 px图片轮换、侧边栏、家育共建、预留空间底部1000 px100 pxfooter 容器为什么要先算宽度和高度所见即所得工具最容易犯的毛病就是「鼠标拖到哪算哪」。视觉上看着对齐了一预览就发现层与层之间互相压住、元素溢出。先把宽高写成数字后面每一步拖 Layer 时都有参照省掉大量返工。这里的 1600 是头部总宽1000 是内容区固定宽度两者不同意味着头部 banner 可以通栏内容主体居中收窄——这是很典型的网站骨架。2.3 一份工具三种输出形态PC、RWD、jQuery Mobile教程开头就点明WYSIWYG Web Builder 不止做传统 PC 网页还能做 RWD 自适应页面以及用 jQuery Mobile 设计手机 APP 界面。这三个方向对应不同的组件和布局策略。小猩猩幼儿园这个 DEMO 是固定宽度的 PC 页所以教程里没有展开 RWD 的断点设置但你要知道这个能力存在接到「手机端也要好看」的需求时别再沿用固定宽度方案切到 RWD 模式做弹性布局。我的建议是第一次接触这个工具先按教程方式老老实实做固定宽度页面理解 Layer、组件、样式这三件事的关系。固定宽度做顺了再去碰 RWD 和 jQuery Mobile否则同时学工具操作和响应式布局容易两头都抓不住。3. Layer 布局实战页面属性、12 个容器层和对象管理器里的层级管理3.1 页面属性先设好标题、宽度、居中、高度留空打开 WYSIWYG Web Builder新建页面后第一件事不是拖组件而是设置页面基本信息。操作入口在工作区空白处右键选择 Page Properties。教程里给的关键参数是标题按实际项目填宽度设 1600 或按设计稿来勾选页面居中显示高度不要手动填让软件自动扩展。这个「高度不设置」很多人不理解觉得设个固定高度更有安全感。实际上WWB 的 Layer 是绝对定位思路内容一层层往下堆页面高度由内容撑开。一旦你手工限高后期加内容就会溢出或出现大片空白排查起来非常费劲。宽度固定、高度自适应是这套布局逻辑里的一个基本原则。3.2 Layer 就是 DIV 容器从 Table 布局到 CSS 布局的关键转变教程里反复出现「Layer 对象」这是理解 WWB 的核心。它的布局原理有两种Table 或 CSS。Table 布局在早期网页里常见但已经被淘汰所以软件默认走 DIV CSS 路线。一个 Layer 对象就是一个网页 DIV 块相当于一个「盒子」你往盒子里放任何元素。实际操作路径是Toolbox → Advanced → Layer把 Layer 拖到工作区。选中这个 Layer在属性面板里设置它的 CSS ID相当于给这个 DIV 一个名字以及宽高然后拖到目标位置。为了确保 Layer 在页面里水平居中右键该 Layer选择 Center in Page → Horizontally。这里要留意居中操作做的是「相对页面水平居中」不是相对父容器所以父容器本身要先对齐否则子层跟着偏。初次接触这套逻辑的读者可以把 Layer 直接理解成「带位置的 DIV 容器」。你不写一行 CSS但生成的代码里它就是一个个 div 标签CSS ID 就是你起的名字。所以命名要规范header、banner、menu、main 这类语义化名字比 layer1、layer2 好排查一百倍。3.3 十二个内容层布局前先把「户口」上齐教程给的内容区结构非常具体一个 main 主容器里面套 main_top图片轮换、main_midlle侧边导航加公告播报混排、main_bottom家园与风采展示然后继续细分 left、right、right_up、right_down、announce、news、video、slider_belt。听起来层数多其实层级关系很清晰。我实际操作时的习惯是先把所有 Layer 按教程列出的名字全部拖到工作区设置好宽高拖到大致位置最后再逐个填充内容。这一步相当于先搭好毛坯房的隔断后面刷墙铺地都方便。教程也提醒了两个细节一是摆放 Layer 时根据情况缩放工作区方便精确对准位置二是放好以后把 Layer 锁定避免后续操作鼠标误碰导致整层移位。锁定 Layer 这个动作很容易被忽略但它是真实项目里的「后悔药」。我在做培训学校官网时就吃过亏一个布局好的页面改文案时误拖了某个层预览才发现整体错位又不敢 Undo 太多次只能逐个检查。从那以后每放好一层就锁定一层几乎成了肌肉记忆。3.4 对象管理器被盖住就「隐身」改层级就靠它头部结构是 header 主容器里套 banner 和 menu。问题来了banner 和 menu 是覆盖在 header 上方的你在工作区想点 header 时实际点到的往往是上面的子层。教程给出的解法很聪明在对象管理器里把 banner 和 menu 的「可视」勾选去掉让它们暂时隐身露出底下的 header操作完再把可视勾回来。对象管理器在这个场景里相当于「图层面板」它列出整个页面所有 Layer 的层级关系你能看到哪个层在哪个层里面也能控制可见性和锁定状态。我的习惯是做任何涉及嵌套结构的操作优先在对象管理器里选中目标而不是在工作区里凭眼睛找。工作区适合粗调位置对象管理器适合精确选中和层级审查两者配合才高效。4. Layer 布局避坑五个高频翻车现场与排查顺序4.1 明明设置了页面居中预览时整站偏左现象Page Properties 里勾了居中Layer 也做了水平居中但浏览器里打开整个页面贴在左边。原因最常见的是页面宽度与内容宽度不一致。比如页面宽度设了 1600但内容主层宽度是 1000中间有 600px 的差额。如果主层没有正确设置水平居中内容就会默认从左侧开始排列另外子层居中时如果父层本身有偏移子层的「相对居中」也会跟着偏。解决先回到 Page Properties 核对页面宽度再检查最外层主容器是否右键执行 Center in Page → Horizontally最后在对象管理器里逐层检查父层坐标不要只看工作区里的视觉效果。4.2 拖一个 Layer结果带着里面的子层一起跑现象想把某个 Layer 微调几个像素结果它里面嵌套的子层全部跟着移动布局直接散架。原因WWB 的 Layer 之间存在父子关系拖拽父层时子层必然跟随。如果工作区缩放比例不合适你本来想点子层实际命中的是父层。解决微调位置前先到对象管理器确认选中的是哪个层。需要单独移动子层时先在对象管理器里点选它再回到工作区拖拽。更稳妥的做法是父层位置确定后立刻锁定只留子层可操作。4.3 banner 背景图不显示预览时图片路径失效现象Layer 的背景图在软件工作区里显示正常一预览或发布到服务器图片没有了只剩一个空块。原因这是典型的相对路径问题。预览时 WWB 会生成临时页面如果背景图片的路径写的是绝对路径或指向素材原目录临时目录里找不到对应文件。发布时如果只上传 HTML 文件、漏掉 images 文件夹同样会丢图。解决素材统一放项目根目录下的 images 文件夹插入时保持相对路径。发布前核对HTML 文件在哪个目录images 目录是否同级上传。我一般会在发布后把图片链接复制到浏览器里单独访问一遍能打开就说明路径没问题。4.4 CSS 菜单添加了菜单项但预览时点了没反应现象菜单文字、样式都对鼠标移上去也有高亮效果但点击后跳不到任何页面。原因菜单项的链接地址没填或者填的链接指向一个尚未生成的网页文件。WWB 的 CSS 菜单是可视化编辑链接但很多人拖完菜单只改了文字忽略了下方的 URL 输入框。解决逐个检查菜单项的 URL 属性。如果链接指向站内其他页面确保目标页面已经存在并且文件名与链接一致。养成习惯建站前先规划页面文件清单比如 index.html、about.html、news.html菜单链接直接对应这些文件名能省很多排查时间。4.5 内容越改越多页面底部出现大片空白现象页面内容加了不少但预览时主体内容下面空了一大段footer 离内容区特别远。原因页面的显式高度或某个主容器的高度被设成了固定值内容超出这个高度后溢出部分被撑到容器外面视觉上就成了「内容在中间空白在下面」。教程里明确说高度可以不设置让软件自动扩展就是防止这个问题。解决检查 Page Properties 里的页面设置和 main 等主容器的尺寸把固定高度删除改为自动。给客户交付前把新闻、公告这类内容量不定的模块提前灌入真实长度文案测试别用一两行短字验证布局。4.6 排查顺序从外到内先层级后样式这五类问题如果同时出现我的排查顺序是固定的先看 Page Properties确认页面级参数再打开对象管理器检查 Layer 层级和锁定状态然后逐个检查容器的宽度、坐标、居中属性最后才看具体组件和图片路径。层级是骨样式是肉骨错位了肉再好看都没用。5. 组件放置与样式定义背景、CSS 菜单、幻灯片、图片地图和一个 footer5.1 页面背景与透明容器先铺底妆再化妆教程把样式设计拆成了「容器背景」和「内部元素」两层来操作。先处理整个页面的背景工作区右键 → Page Properties在这里可以设置背景图片。然后处理 header 容器它的作用只是定位不需要可见样式所以背景设为透明。这里有个容易卡住的操作header 被 banner 和 menu 覆盖直接在工作区点不到它。解法在 3.4 里说过——对象管理器里把 banner 和 menu 的可视勾去掉操作完再勾回来。透明背景的设置方式选中 Layer 后在样式属性里把背景类型设为 None 或 Transparent不填充任何颜色和图片。记住不是每个容器都要有可见样式很多层只是「结构件」透明是常态。5.2 banner 与菜单背景图方案和 CSS 菜单的四级样式banner 容器要放一张大图教程提供了两种方案插入图片对象或者把容器背景设为图片。它选了后者。理由很实用背景图方案在对象管理器里少一个图片子节点以后换图只改背景属性结构更干净。menu 容器则是先放一张纯色图做背景再添加 CSS 菜单对象。操作路径是 Toolbox → Navigation → CSS Menu。菜单对象放进去后设置宽度、拖到 menu 容器里、水平居中、调整高度让菜单在视觉上处于恰当位置。教程把菜单样式的设置拆成了「添加菜单项」和「样式 1 到样式 4」几步这四级样式对应的是菜单的不同状态常规状态、悬停状态、选中状态和子菜单样式。实际配置时建议至少把常规和悬停两类状态做区分否则用户鼠标移上去没有反馈交互感会差很多。5.3 内容区三件套幻灯片、图片地图、marqueemain_top 容器里放的是图片轮换也就是幻灯片。从 Toolbox → Images → Slideshow 插入拖到工作区时软件会弹出图片选择对话框按住 Ctrl 可以多选。插入后还要设置两类样式图片说明文字以及底部分页按钮。分页按钮样式容易被忽略但它直接决定轮播图下方那排小圆点好不好看我一般会把它调得跟整体配色一致。left 容器里的垂直导航教程用的是「图片地图」方案Toolbox → Images → Image Map拖入一张导航图片然后右键添加多边形热点把热点区域对准图片上需要可点击的范围。这个热点工具在早期网站里很常见优点是视觉完全自定义缺点是热点区域全靠手动描点对不齐就很容易点偏。我的经验是描点前把工作区缩放到 100%让图片按真实尺寸显示再逐个把热点端点对齐到图片按钮的四角误差会小很多。right 和 right_up 容器是定位容器保持透明。announce 容器要放一个向上滚动的 marquee 对象Toolbox → Standard → Marquee。这个对象很适合公告列表但要记得控制滚动速度和停顿时间。教程里 news 容器用的是 Table 对象两列多行第一列图片第二列列表标题。注意这里的表格是「内容表格」只用来排版新闻列表不是页面骨架——页面骨架在 WWB 里永远用 Layer表格只是内容区内部的排列工具这两者不要混。right_down 容器是图文混排插入一个 image 组件和两个 text 组件文字围绕图片排布。图文混排的间距调整主要靠 text 组件的宽度和四周留白不要在 text 里用敲空格的方式控制位置那样换浏览器就乱。5.4 video 与 slider_belt视频占位和第二个幻灯片video 容器要放视频播放教程里用的是 Toolbox → Media → Flash 组件。这里必须提醒一句Flash 在今天的浏览器里已经被彻底淘汰这个组件在当年确实好用但现在做新项目要优先看工具里有没有 HTML5 视频组件或者用嵌入式播放器替代。遇到这种「老教程配老组件」的情况思路是把组件当成占位容器再想办法换成现代方案而不是照搬。slider_belt 是「宝宝风采展示」区再放一个幻灯片插入方式和 main_top 里的一样但需要额外设置幻灯片模式——比如切换间隔、过渡效果、是否自动播放。这两个幻灯片区域建议设置不同的切换参数顶部大图用慢速淡入淡出底部展示区用快速切换视觉节奏上有区分。5.5 footer 与发布前检查一个 JavaScript 组件收尾最后是 footer 容器教程放的是 Ready-to-Use JavaScript 组件位置在 Toolbox → Advanced 下。这个组件的作用是嵌入现成的 JS 特效常见用法有版权年份自动更新、返回顶部按钮、统计代码。我的建议是放一个「返回顶部」就够了别堆太多特效footer 是页面的句号不是花丛。全部组件放完先在工作区预览一遍整体效果再生成代码。生成以后不要立刻交付建议在浏览器里做一遍完整点击测试菜单逐项点过去、幻灯片翻几轮、marquee 滚动正常、图文混排在不同宽度的浏览器窗口下不乱。把这一步走完页面才算真正可交付。6. 预览与发布浏览器验收三连、插件扩展和两种进阶玩法预览功能在 WWB 里相当于一键生成临时 HTML 并在浏览器打开但预览只是「看起来正常」发布才是「真正能用」。我会在发布后做三个检查第一把浏览器的窗口宽度拉到不同尺寸看固定宽度页面在窄屏下是否出现横向滚动条——如果客户要求在手机上能看就要考虑换 RWD 模式重做第二检查 images 目录是否完整上传背景图和轮播图逐个在浏览器地址栏访问一遍第三把菜单链接逐项点一遍确认没有死链。生成出来的代码值得扫一眼它可以帮助你理解 WWB 到底把页面做成了什么结构。我可以给你一个最简示意实际生成的代码会复杂很多但骨架长这样body !-- 头部banner 与 CSS 菜单 -- div idheader div idbanner/div div idmenu ul lia hrefindex.html首页/a/li lia hrefabout.html关于我们/a/li /ul /div /div !-- 内容主区 -- div idmain div idmain_top/div div idmain_midlle/div div idmain_bottom/div /div !-- 底部 -- div idfooter/div /body注意看所有 Layer 都映射成了 divCSS ID 就是你在属性栏里填的那个名字。这意味着你在 WWB 里花一小时拖出来的布局本质上就是在生成一套规范的 HTML 结构。如果你懂一点 HTML后期想给某个容器加自定义脚本直接在生成的代码里找对应 ID 就能精准定位。这个能力很重要——它让你在视觉工具和真实代码之间建立了一座桥而不是把生成器当黑匣子。我接过不少「用 WWB 做好了但想要加个自定义功能」的活靠的就是在生成的代码里按 ID 追加脚本而不是重新拖一个组件。插件扩展是 WWB 另一个值得研究的点。官方和第三方社区提供了大量插件从轮播增强、表单组件到地图嵌入都有。我一般会控制插件数量只加客户真正需要的因为每多一个插件的资源体积都会拖慢首屏加载。另外两种进阶玩法值得留意一是配合 PHP CMS 摸版做数据驱动页面二是用 jQuery Mobile 模式把同样的内容打包成手机 APP 界面的原型。这两个方向都不难但前提是你已经吃透了 Layer 布局和对象管理器。做小网站这些年我最大的教训是工具越拖拽化越不能凭直觉乱拖。WYSIWYG Web Builder 给足了你自由度但也把布局纪律的权重全压到了操作习惯上——先画宽高表再布 Layer放一个锁一个最后才填内容这四步顺序我每次强制自己走一遍一次都没翻过车。这份 PDF 里的完整案例步骤和 DEMO 文件路径都写得很清楚照着拖一遍比看十篇拆解都有用希望帮到你。本文还有配套的精品资源点击获取