简介WYSIWYG Web Builder入门教程是一份面向零基础网页制作爱好者的PDF电子书旨在帮助读者避开复杂编程仅靠拖拽和所见即所得操作快速搭建网页。教程先介绍这款轻量级工具的特色与能力如文字、图片、表单、导航菜单、幻灯片、jQuery UI组件以及RWD自适应页面和jQuery Mobile手机界面设计。随后以制作一个幼儿园主题网页为例详细演示页面属性设置、Layer对象精确布局、容器层级管理、菜单与幻灯片添加等完整过程并总结缩放工作区、锁定图层、隐藏子容器等实用技巧。通过分步讲解读者能掌握用CSS DIV布局划分头部、内容、底部区域最终独立完成PC端或响应式网页的打造。资源以PDF形式收录共1个文件压缩包大小仅3.23MB篇幅精简便于随时查阅。目前已有604人学习下载适合想快速上手网页设计的新手阅读学习。1. WYSIWYG Web Builder 入门 PDF8.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 里就会有一个 idheader 的 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 px整个画布的固定宽度页面高度留空由内容自动撑高水平居中勾选固定宽度页面在浏览器里左右居中为什么这里把页面宽度设成 1600因为这个案例的头部 banner 是 1600 宽内容区是 1000 宽。页面宽度如果设置成 1000banner 背景就会溢出到页面外预览时出现横向滚动条。高度不填软件会根据你放上去的内容自动扩展不用担心底部被截掉。页面居中和后面 Layer 居中是两回事。Page Properties 里的居中控制整个画布Layer 里的 Center in Page → Horizontally 控制某个盒子。新手常把这两个混在一起后面避坑章节会专门说。2.3 header 区域的三个层容器套容器的典型写法先做头部。按照教程里的尺寸头部区域分成三层容器CSS ID宽度高度用途头部主容器header1600 px156 px定位容器不显示背景Banner 容器banner1600 px120 px放头部大图背景菜单容器menu1000 px36 px放 CSS 菜单对象操作步骤是这样的先从 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 分栏比例补了一个可行值你可以按自己的素材宽度微调。容器CSS ID宽度高度作用主内容容器main1000 px1170 px内容区最大容器顶部轮播容器main_top1000 px350 px放幻灯片中部容器main_midlle1000 px540 px左右分栏的父容器底部容器main_bottom1000 px280 px放视频和宝宝风采左侧导航容器left约 260 px540 px放图片地图热点导航右侧总容器right约 740 px540 px公告、新闻、混排的总容器右上门容器right_up约 740 px270 px公告和新闻的一层右下混排容器right_down约 740 px270 px图片加文字的图文混排公告容器announce约 370 px270 px放向上的 marquee 公告新闻容器news约 370 px270 px放两列表格视频容器video约 500 px260 px放视频播放内容风采轮播容器slider_belt约 500 px260 px放第二个幻灯片千万不要小看这 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 个容器不要急着填内容先打开对象管理器看一遍树形结构。这个案例正确的层级关系大概是mainmain_topmain_midlleleftrightright_upannouncenewsright_downmain_bottomvideoslider_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 或 menuheader 就像被盖住了一样。原因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 × 120menu 背景就用 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第四步打开开发者工具的设备模拟模式逐个点一遍菜单和幻灯片确认移动端操作正常。从那以后我每次做这类固定宽度页面都会强制走一遍这套验证流程绝不只在编辑器里看一眼就交付。路径和布局这两个坑最后省不了。希望帮到你。本文还有配套的精品资源点击获取