简介：《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 先定布局再动手：把页面变成一张「宽高表」

教程第一个让我印象深刻的点，是它没有直接让你拖组件，而是先花篇幅讲「确定布局」。这一节给的方案是固定宽度单列多行：头部、内容、底部三段，每段都标了精确宽高。我把教程里的数字整理成下面这张表。

为什么要先算宽度和高度？所见即所得工具最容易犯的毛病，就是「鼠标拖到哪算哪」。视觉上看着对齐了，一预览就发现层与层之间互相压住、元素溢出。先把宽高写成数字，后面每一步拖 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 菜单、幻灯片、图片地图和一个 footer

5.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 内容区三件套：幻灯片、图片地图、marquee

main_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 id="header"> <div id="banner"></div> <div id="menu"> <ul> <li><a href="index.html">首页</a></li> <li><a href="about.html">关于我们</a></li> </ul> </div> </div> <!-- 内容主区 --> <div id="main"> <div id="main_top"></div> <div id="main_midlle"></div> <div id="main_bottom"></div> </div> <!-- 底部 --> <div id="footer"></div> </body>

注意看，所有 Layer 都映射成了 div，CSS ID 就是你在属性栏里填的那个名字。这意味着你在 WWB 里花一小时拖出来的布局，本质上就是在生成一套规范的 HTML 结构。如果你懂一点 HTML，后期想给某个容器加自定义脚本，直接在生成的代码里找对应 ID 就能精准定位。这个能力很重要——它让你在视觉工具和真实代码之间建立了一座桥，而不是把生成器当黑匣子。我接过不少「用 WWB 做好了但想要加个自定义功能」的活，靠的就是在生成的代码里按 ID 追加脚本，而不是重新拖一个组件。

插件扩展是 WWB 另一个值得研究的点。官方和第三方社区提供了大量插件，从轮播增强、表单组件到地图嵌入都有。我一般会控制插件数量，只加客户真正需要的，因为每多一个插件的资源体积，都会拖慢首屏加载。另外，两种进阶玩法值得留意：一是配合 PHP CMS 摸版做数据驱动页面；二是用 jQuery Mobile 模式把同样的内容打包成手机 APP 界面的原型。这两个方向都不难，但前提是你已经吃透了 Layer 布局和对象管理器。

做小网站这些年，我最大的教训是：工具越拖拽化，越不能凭直觉乱拖。WYSIWYG Web Builder 给足了你自由度，但也把布局纪律的权重全压到了操作习惯上——先画宽高表，再布 Layer，放一个锁一个，最后才填内容，这四步顺序我每次强制自己走一遍，一次都没翻过车。这份 PDF 里的完整案例步骤和 DEMO 文件路径都写得很清楚，照着拖一遍比看十篇拆解都有用，希望帮到你。

本文还有配套的精品资源，点击获取