简介：WYSIWYG Web Builder入门教程是一份面向零基础网页制作爱好者的PDF电子书，旨在帮助读者避开复杂编程，仅靠拖拽和所见即所得操作快速搭建网页。教程先介绍这款轻量级工具的特色与能力，如文字、图片、表单、导航菜单、幻灯片、jQuery UI组件，以及RWD自适应页面和jQuery Mobile手机界面设计。随后以制作一个幼儿园主题网页为例，详细演示页面属性设置、Layer对象精确布局、容器层级管理、菜单与幻灯片添加等完整过程，并总结缩放工作区、锁定图层、隐藏子容器等实用技巧。通过分步讲解，读者能掌握用CSS DIV布局划分头部、内容、底部区域，最终独立完成PC端或响应式网页的打造。资源以PDF形式收录，共1个文件，压缩包大小仅3.23MB，篇幅精简便于随时查阅。目前已有604人学习下载，适合想快速上手网页设计的新手阅读学习。

1. WYSIWYG Web Builder 入门 PDF：8.76M 的建站工具，先看懂它能做什么

如果你接了一个“帮幼儿园做个官网”的活，又不想为这事去啃 HTML、CSS，这份 WYSIWYG Web Builder 入门 PDF 是我见过比较能落地的选择。它不要求写代码，核心是拖拽式操作：文字、图片、视频、表格、菜单、幻灯片都以组件形式放进一个叫 Layer 的容器里，所见即所得，做完就能生成网页代码。整个安装文件只有 8.76M，比传统专业网页编辑器轻不少，做传统 PC 端页面、RWD 自适应页面、jQuery Mobile 手机界面都能覆盖；如果有 PHP 环境，还能接 CMS、用户登录模块和数据库。新手重点学两件事就够用：一是 Layer 容器布局，二是组件的参数设置。把这两个点摸透，剩下的就是不断地拖组件、调样式。

2. 用 Layer 对象搭骨架：为什么默认用 DIV，而不是 Table

先把最核心的布局概念说清楚，否则后面每一步都是盲拖。WYSIWYG Web Builder 里的布局方式有两种底层逻辑：Table 和 CSS。因为 Table 布局在响应式时代已经很难维护，软件默认采用 CSS 布局，具体落地对象就是 Layer。

2.1 Layer 对象到底是个什么东西

Layer 在工具里就是一个网页 DIV 块，你可以把它理解成一个有名字、有宽高、有坐标的盒子。工具箱路径是 Toolbox → Advanced → Layer，拖到工作区后就是一个容器。所有区块元素，包括导航、幻灯片、表格、文字，最后都会被放进这些盒子里。

一个 Layer 的关键属性有三个：CSS ID、宽度、高度。CSS ID 是它在生成代码中的身份证，后面写的样式、脚本都靠它来定位。举个例子，你建一个 header 层的 CSS ID 叫 header，软件生成的 HTML 里就会有一个 id="header" 的 div，对应的 CSS 大致是：

/* 一个 Layer 最终生成的典型 CSS 结构 */ #header { width: 1600px; /* 在 Layer 属性里填写的宽度 */ height: 156px; /* 在 Layer 属性里填写的高度 */ margin: 0 auto; /* 来自 Center in Page -> Horizontally */ }

工具不是把所有代码写死，它只是把你在 Layer 属性面板里看到的数值翻译成 CSS。理解这一点之后，你才会明白为什么改宽度要进 Layer 属性，为什么水平居中是这样一条命令。这些不是花活，是直接对应到浏览器渲染效果的。

2.2 页面属性：标题、宽度、居中三件套

开始拖 Layer 之前，先设置页面基本信息。操作位置在工作区空白处右键，选择 Page Properties，这是整个页面的大脑。

为什么这里把页面宽度设成 1600？因为这个案例的头部 banner 是 1600 宽，内容区是 1000 宽。页面宽度如果设置成 1000，banner 背景就会溢出到页面外，预览时出现横向滚动条。高度不填，软件会根据你放上去的内容自动扩展，不用担心底部被截掉。

页面居中和后面 Layer 居中是两回事。Page Properties 里的居中控制整个画布；Layer 里的 Center in Page → Horizontally 控制某个盒子。新手常把这两个混在一起，后面避坑章节会专门说。

2.3 header 区域的三个层：容器套容器的典型写法

先做头部。按照教程里的尺寸，头部区域分成三层：

操作步骤是这样的：先从 Toolbox → Advanced → Layer 拖一个 Layer 到工作区，选中它，右键打开属性面板，把 CSS ID 改成 header，宽度填 1600，高度填 156，拖动到页面顶部。然后右键这个层，选择 Center in Page → Horizontally，让它水平居中。最后右键 Lock，把层锁住，防止后面拖其他对象时误移动它。

banner 和 menu 是 header 内部的子层，视觉上是重叠在 header 上的。添加方式一样，改 CSS ID、宽高，然后放到对应位置。菜单位置在 banner 下方，所以 menu 的高度 36 是导航条本身的高度，宽度跟随内容区 1000。这里有个细节：header 是 1600 宽，menu 是 1000 宽，两者并不矛盾。header 管的是通栏背景，menu 只负责导航内容区域。内容区窄一点，视觉上更集中，这也是很多企业站的通用做法。

3. 把内容区拆成 12 个 Layer：布局靠树，不靠记坐标

头部只是开胃菜，真正复杂的是内容区。这个案例里，内容区总计高度是 350 + 540 + 260 + 20，也就是 1170 像素左右。它被拆成了 12 个 Layer，每一个都有明确的职责。先拆清楚再动手，比边拖边改名靠谱得多。

3.1 12 个 Layer 的分工和尺寸

参考教程的效果图，我整理了下面这张表。要注意，右侧栏内部的几个子容器尺寸没有在原文里写死，我按常见的 260/740 分栏比例补了一个可行值，你可以按自己的素材宽度微调。

千万不要小看这 12 层的命名。CSS ID 一旦确定，后面调整样式、写媒体查询、查看生成代码，全部靠这些 ID 来区分。命名乱写，比如 layer1、layer2，后期自己都会认不出来。我的习惯是英文语义名，main_top 里的 top 表示顶部，left 表示左栏，announce 表示公告，这样对象管理器里一眼就知道这是什么区域。

3.2 添加和摆放 12 个 Layer 的正确顺序

顺序不对，嵌套关系就会乱。建议从父容器开始搭，一层一层往里加。先拖 main，设置 1000 × 1170，再拖 main_top、main_midlle、main_bottom，把它们放到 main 上方，并在对象管理器里拖到 main 节点下面，形成父子关系。

随后处理 main_midlle 内部：拖 left 和 right，将 left 放到 main_midlle 下，right 也放到 main_midlle 下。再将 right_up、right_down 拖到 right 节点下。最后把 announce、news 放到 right_up 下，把 video、slider_belt 放到 main_bottom 下。

这里有一个关键动作：不是所有 Layer 都要点 Center in Page → Horizontally。这条命令是相对整个页面画布居中的，不是相对父容器居中。所以我一般只对 header、main、footer 这些最外层容器做水平居中；内部的 left、right 子层，直接用拖动或属性面板里的 Left、Top 坐标来定位。如果给所有子层都点一遍居中，预览时它们会各自跑到页面中心附近，互相叠在一起，非常难收拾。

定位时还有一个实用技巧：按住 Ctrl 加鼠标滚轮缩放工作区。Layer 在放大状态下拖起来明显更精确，特别是嵌套子层边缘要对齐的时候。不要嫌麻烦，这一步省不了。

3.3 用对象管理器核对层级

放完 12 个容器，不要急着填内容，先打开对象管理器看一遍树形结构。这个案例正确的层级关系大概是：

• main
  • main_top
  • main_midlle
    • left
    • right
      • right_up
        • announce
        • news
      • right_down
  • main_bottom
    • video
    • slider_belt

对象管理器里可以查每一层对应的 CSS ID、宽高、坐标以及是否锁定。如果发现某个层放错了父级，直接拖到正确节点下即可。为什么这么看重层级？因为生成代码时，父子关系会直接对应到嵌套的 DIV 结构。left 如果不在 main_midlle 下面，就只是一个漂在页面中央的独立盒子，视觉上可能勉强叠上了，但后续做 RWD 自适应时根本无法控制它跟随右栏一起折行。

层级确认没问题后，把已经固定好的层全部 Lock。锁定不是一步封死，它只防止在工作区里被鼠标误拖，属性面板里的数值仍然可以改。这一点后面避坑章节会讲。

4. 往容器里填内容：背景、CSS 菜单、幻灯片和图文混排的放置顺序

布局大框架完整之后，进入元素填充阶段。填充顺序有讲究，建议按“背景 → 导航 → 主视觉 → 信息模块”的顺序走，因为背景是最底层，导航决定了整个站的主视觉，而信息模块按从上往下、从左往右的阅读顺序放。

4.1 页面背景和容器背景要分开处理

先做整个页面背景。右键工作区，选择 Page Properties，在背景设置里选择 images 文件夹里的背景图片。这一步把页面底色调好，后续各容器如果是透明背景，就会自然露出一张大图。

header 容器在这个案例中只负责定位，不需要视觉样式，所以背景设成透明即可。banner 容器要实现头部大图，有两种做法：放一个 Image 对象，或者直接把容器背景设置为图片。这里推荐用容器背景图，理由很简单：背景图不会占用 Layer 内部的对象层级，也不会因为误拖 Image 对象而错位，它完全贴着容器边。

menu 容器需要一块纯色背景来衬托导航文字，做法是准备一张 1000 × 36 的纯色图片，或者直接在容器背景里填颜色。如果素材是图片，注意图片尺寸尽量和容器一致。比如 banner 容器是 1600 × 120，那就准备 1600 × 120 的 banner 图，不要用一张 800 宽的小图去拉伸，拉伸出来的效果在浏览器里会发虚。

4.2 CSS 菜单：添加菜单项和四组样式

菜单是头部最重要的元素。从 Toolbox → Navigation → CSS Menu 拖一个 CSS 菜单对象到 menu 容器里，先设置它的宽度，菜单对象宽度填 1000，高度默认 36，然后让它在容器中居中。如果菜单项比较多，可以先改宽度再调整菜单项间距。

接下来添加菜单项。右键菜单对象，进入编辑菜单项的面板，逐条添加：“首页”“走进幼儿园”“班级风采”“家育共建”“招生报名”。每个菜单项都可以设置链接，可以先指向一个空页面，后续再补。菜单层级如果有多级，可以在菜单项面板里缩进，形成下拉子菜单。

菜单样式是大多数新手最容易漏掉的部分。CSS 菜单在工具里通常提供四组样式状态：普通状态、悬停状态、点击状态、当前页面状态。对应就是样式 1、样式 2、样式 3、样式 4 这四组配置。普通状态设置默认背景色和字体颜色；悬停状态设置鼠标放上去之后的变化；点击状态是鼠标按下去的瞬间反馈；当前页面状态是当前所在栏目高亮。

很多教程只告诉你有四组样式，但实际用途这里说得比较明确。如果你只改了样式 1，其他三个状态保持默认，预览时会发现菜单颜色单调且没有交互反馈，看起来像坏掉了。在设置面板里，把四个状态的背景色、文字色、边框和下划线都统一过一遍，再点预览，效果会完整很多。

4.3 几个高频组件：幻灯片、marquee、表格、图片地图、视频

main_top 容器里面放幻灯片对象。路径是 Toolbox → Images → Slidershow，拖到 main_top 后，会弹出一个图片选择框，按住 Ctrl 键可以多选图片。图片选完后，还要设置图片说明和分页按钮。图片说明通常显示在幻灯片底部，分页按钮就是左下角或右下角的小圆点样式。这个幻灯片会自动播放，默认切换速度如果不合适，可以在属性面板里调整。

announce 容器里放的是 marquee 对象。路径是 Toolbox → Standard → Marquee，拖进去后输入公告文字。属性面板里可以设置滚动方向和滚动速度，教程要求向上滚动，那就把方向调成 Up。这里要说一句，marquee 在 HTML 里是相对老旧的标签，但作为幼儿园官网这类演示项目来说，它的好处是配置简单、立刻生效、不需要额外 JavaScript；如果以后做正式商业站，可以考虑用 CSS 动画或 JS 滚动组件替代。

news 容器里放 Table 对象。路径是 Toolbox → Standard → Table，拖入后设置两列多行。第一列放缩略图，第二列放新闻标题。表格的好处是排版整齐，每一行的图片和文字都能对齐。如果后面要加行，直接在表格属性里增加行数即可。

left 容器的垂直导航比较特殊，用的是图片地图。路径是 Toolbox → Images → ImageMap。先拖入一张导航底图，再右键选择 Add Polygon Hotspot，也就是多边形热点。添加热点会出现一个可拖动的区域，把区域四周的角点对应到图片上每个菜单文字的范围，然后设置链接。做第二个热点时继续右键添加，重复操作。热点区域建议比文字范围稍微大一点，点击体验会更好。这个功能本质上是在一张图上划分超链接区域，不需要额外切图。

main_bottom 里的 video 容器，教程里用的是 Media 分类下的 Flash 对象。如果你用的软件版本较新，也可以换成 HTML5 视频对象，播放兼容性会更好。slider_belt 容器里再放一个幻灯片，因为里面的图片是宝宝风采展示，适合做成切换效果比较明显的轮播，可以在属性里把幻灯片模式从淡入淡出改成滑动或翻页。footer 容器比较简单，放一个 Toolbox → Advanced → Ready-to-Use JavaScript 的现成组件即可，比如文本内容或版权信息。

全部元素放完之后，点预览看整体效果。如果各容器背景和页面背景配合正确，应该能看到一个完整的企业站首页。预览没问题后，再生成 HTML 代码。

5. 避坑指南：第一个网页最容易翻车的 5 个点

这个环节不是理论，是我实际拆这个入门项目时反复遇到的真实问题。前面布局阶段看着挺顺，一到预览和生成阶段就翻车。下面把五个最容易踩的坑按“现象 → 原因 → 解决”写清楚。

5.1 选不中底下的 header 容器

现象：banner 和 menu 放上去之后，想回去调整 header 的背景，结果鼠标点击选中的永远是上面的 banner 或 menu，header 就像被盖住了一样。

原因：Layer 是有层级叠放顺序的，后来添加的子层默认叠在上面。工作区点击时，软件优先选中最上层的对象，所以下层的 header 选不中。

解决：不要硬在工作区里点，直接打开对象管理器，用树形列表选中 header。如果连对象管理器里都要调背景，临时把 banner 和 menu 的“可视”勾选去掉，让它们在工作区隐藏，露出 header 后再操作。操作完后把可视再勾回来。这个“可视”开关不删除对象，只是暂时隐藏，是处理层叠关系的后悔药。

5.2 图层锁定了，又要改宽高，拖不动

现象：为了防止误操作，把某个 Layer Lock 之后，发现还需要调整宽度或高度，结果鼠标拖不动任何边缘。

原因：Lock 锁定的是工作区内的鼠标拖拽，不是锁定全部属性。

解决：先在对象管理器中选中该层，打开属性面板，直接修改宽度和高度的数值。数值改完，工作区里会立即刷新。如果某个版本里属性面板也置灰，就先右键选择 Unlock，改完再重新 Lock。对我个人来说，Lock 更像一道防线，不是上锁后就不能碰了。

5.3 所有 Layer 都点了一遍“水平居中”，页面全乱了

现象：为了让每个容器居中，把所有 Layer 都执行了一遍 Center in Page → Horizontally，预览时子层没有待在父容器里，而是全部散落在页面中间。

原因：Center in Page 这个命令是相对整个页面画布居中，不是相对父容器居中。内容区的子层宽度不同，居中后的左侧坐标也不一样，结果互相错位。

解决：只对 header、main、footer 这类最外层容器使用 Center in Page → Horizontally。内部子层用拖动定位，或者在属性面板直接填 Left 和 Top 坐标。如果已经手误点了，先撤销，或手动修改 Left/Top 坐标把它们拉回父容器区域内。

5.4 背景图片不显示或拉伸变形

现象：banner 容器设置了背景图片，但浏览器预览时图片没有出现，或者出现后被拉扯得比例不对。

原因：常见两种。一种是图片路径不对，素材和 HTML 文件没有保持同一目录结构；另一种是图片尺寸和容器尺寸不一致，软件默认拉伸填充背景，导致变形。

解决：格式上建议用 jpg、png 这类通用格式；尺寸上尽量按容器宽高准备图片，banner 就用 1600 × 120，menu 背景就用 1000 × 36，不要用小图强行放大。路径问题上，把 images 文件夹和生成的 HTML 放在同一级目录下，不要从桌面或其他盘符引用绝对路径。这样在本地预览和上传服务器时都不容易出问题。

5.5 生成代码后图片和导航链接全部 404

现象：在工具里点预览一切正常，但把生成的 HTML 文件单独拷给别人，或者传到服务器，图片没了，菜单点不动。

原因：WYSIWYG Web Builder 生成的是静态 HTML，图片、视频、链接都要靠外部文件。如果只拷贝单个 HTML 文件，没有带上 images 文件夹和项目资源目录，浏览器自然找不到资源。菜单链接如果使用了绝对路径，换一台电脑也会失效。

解决：每次生成网站代码时，输出整个项目目录，至少包括 HTML 文件和 images 文件夹。菜单链接尽量使用相对路径，比如 pages/about.html，不要写 file:///C:/xxx/xxx 这种本机绝对路径。生成后用浏览器开发者工具看一下 Console 和 Network，有红色 404 就说明路径还没理顺。这一步能帮你筛掉九成发布后的显示问题。

6. 最后一公里：RWD 与 jQuery Mobile 的验证技巧

基础页面做完只是第一步。现在打开页面的人，一半以上用的是手机或平板，所以 RWD 自适应和移动端界面就必须考虑了。

网上教学常把 RWD 说得玄乎，其实思路很简单：固定宽度布局在窄屏上需要把容器的固定宽度改成百分比，或者用媒体查询重新排列区块。WYSIWYG Web Builder 里可以切换到响应式页面模式，并在断点处调整容器宽度。常见做法是保留桌面 1600 宽度版式，在 1024 以下让内容区从 1000 变成自适应宽度，在 768 以下让左右分栏变成上下单列。

如果你懂 CSS，可以直接在样式编辑器里追加媒体查询：

/* 窄屏时强制内容区由固定宽度转为单列 */ @media only screen and (max-width: 768px) { #main_midlle { width: 100%; } /* 中部不再固定 1000px */ #left, #right { width: 100%; } /* 左右分栏改为上下排列 */ #main_top, #main_bottom { width: 100%; } }

这个查询块不复杂，它做的事情是把原来固定的 Layer 宽度在窄屏下改成 100%。如果你不熟 CSS，就依赖工具里的 RWD 设计模式，选中容器后在属性面板选择响应式尺寸，把左右分栏的排列方式在断点设置里改成堆叠。

jQuery Mobile 的用法则是另一个思路：给手机端单独做一个轻量页面。工具里提供了 jQuery Mobile 分类组件，可以拖入 Header、ListView、Button 等移动端元素，生成的是独立于 PC 版的移动页面。这样做的好处是移动端不需要继承 PC 端的复杂布局，加载更快，菜单也更大更好点。适合把报名入口、联系电话、位置导航这几个高频功能单独放在移动页上。

页面做完，我一般会强制走完这组验证：第一步，在工具里预览 PC 版本，确认 1600 宽度下没有横向滚动条；第二步，用浏览器缩放到 1024、768、480 三档，看内容区是否折行，导航是否还在；第三步，生成 HTML 后把整个项目目录拷贝到一个新文件夹里再预览一次，专门检查图片路径和 404；第四步，打开开发者工具的设备模拟模式，逐个点一遍菜单和幻灯片，确认移动端操作正常。从那以后，我每次做这类固定宽度页面，都会强制走一遍这套验证流程，绝不只在编辑器里看一眼就交付。路径和布局这两个坑，最后省不了。希望帮到你。

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