格格_可视化编辑器中英版 · V1.3

使用说明书：创建与编辑 HTML

面向初次使用者的完整操作指南。无需编程基础，也可以通过模板、拖拽、双击编辑和属性面板，完成可直接保存的 HTML5 网页。

5 分钟快速上手查看完整示例

1. 启动与界面认识

双击打开 格格_可视化编辑器中英版.html。编辑器会在浏览器中运行，不需要安装，也不需要联网。

重要：编辑器本身和你制作的网页是两个不同文件。完成设计后，请点击“另存为”导出你的网页。
顶部主菜单新建、打开、另存为、模板、源码、PDF/打印和指南。
顶部格式栏字体、字号、标题级别、颜色、对齐、圆角、阴影等。
左侧元素区插入标题、段落、按钮、图片、表格、导航和表单。
中间画布网页的实时预览和编辑区域；内容增加或减少时，画布高度会自动伸缩。
左侧统一工具栏元素、图层、区块、样式、HTML 属性和页面设置都集中在左侧。
中文 / EN一键切换编辑器语言，不会翻译或破坏你的网页内容。

2. 5 分钟快速创建一个 HTML 网页

1

新建空白网页

点击顶部 ＋ 新建，确认后进入空白模板。

2

插入页面结构

左侧选择 区块 → 产品首屏，系统会加入大标题、说明和按钮。

3

修改文字

在中间画布双击标题，输入你的内容；按 Esc 或点击空白处完成。

4

调整样式

单击元素后，使用顶部格式栏或左侧“样式”页签调整颜色、字号和间距。

5

检查手机显示

点击画布上方的桌面、平板、手机按钮，确认不同宽度下的页面效果。

6

导出 HTML

点击顶部 ↓ 另存为，得到可以独立打开和发布的 HTML 文件。

3. 三种创建方式

方式 A：空白模板

适合完全自定义页面。点击“新建”，再从左侧添加区块和元素。

方式 B：页面模板

点击“模板”，选择企业产品主页、个人作品集、精致文章页或空白画布。

方式 C：打开现有 HTML

点击“打开”，选择电脑中的 .html 或 .htm 文件，在画布中继续编辑。

方式 D：粘贴源码

点击“源码”，在 HTML 页签粘贴完整代码，点击“应用更改”。

注意：切换模板或新建页面会替换当前画布。重要内容请先点击“另存为”备份。

4. 编辑 HTML 内容

4.1 修改文字

  1. 确认顶部处于 编辑模式。
  2. 双击画布中的标题、段落或按钮。
  3. 直接输入新文字。
  4. 按 Esc 或点击空白处结束编辑。

4.2 修改字体、颜色和对齐

  1. 单击选中元素，蓝色边框表示已选中。
  2. 在顶部选择字体、字号、H1/H2/H3、加粗、颜色或对齐。
  3. 更精确的尺寸、行高、边距和阴影，可在左侧 样式 中设置。

4.3 移动、复制和删除

选中元素后，可使用顶部的上移、下移、复制、组合、锁定和删除按钮；也可以右键元素打开快捷菜单。

4.4 修改按钮链接或图片地址

  1. 选中按钮、链接或图片。
  2. 打开左侧 属性。
  3. 在“链接 / 图片地址”输入网址或图片地址。
  4. 图片建议同时填写“替代文字 / 提示”。

5. 插入元素与预制区块

基础内容

标题、段落、按钮、链接、图片、视频。

布局结构

区块、双栏、卡片、间距、分隔线、容器。

高级组件

列表、表格、引用、导航、表单、图标。

预制区块

产品首屏、三栏功能、价格方案、联系表单、网站页脚。

使用方法：先选中画布中希望插入的位置，再点击左侧元素；也可以把元素拖入画布。若未选择位置，新元素通常会加入页面底部。

5.1 创建自定义空白表格

  1. 点击左侧 高级组件 → 表格。
  2. 设置总行数和列数，范围分别为 1–50 行、1–20 列。
  3. 按需选择“首行作为表头”；“填入示例文字”默认不勾选，因此创建的是空白格子。
  4. 设置边框颜色和单元格高度，然后点击“插入表格”。
  5. 双击任意格子即可输入文字；如果只需要空白表格，无需填写内容。

6. 页面属性、CSS 与源码

页面设置

左侧切换到 页面，可以修改网页标题、页面背景、最大宽度和自定义 CSS。

HTML 属性

左侧切换到 属性，可以设置元素 ID、CSS 类名、链接、图片地址和 HTML 内容。

源码编辑器

点击顶部 </> 源码。HTML 页签用于修改完整网页，CSS 页签用于修改页面样式。修改后点击“应用更改”。

建议：不熟悉代码时，优先使用可视化编辑。使用源码前先另存一份备份，避免标签缺失造成页面结构异常。
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>我的第一个网页</title>
  <style>
    body{margin:0;padding:60px;font-family:system-ui;background:#f5f7fb}
    h1{color:#315fce;font-size:48px}
    .btn{padding:12px 20px;color:white;background:#315fce;border:0;border-radius:8px}
  </style>
</head>
<body>
  <h1>你好，欢迎访问我的网页</h1>
  <p>这是使用格格_可视化编辑器创建的 HTML 页面。</p>
  <button class="btn">了解更多</button>
</body>
</html>

7. 完整操作示例

示例一：创建“格格设计工作室”企业主页从模板开始
  1. 点击 模板 → 企业产品主页。
  2. 双击品牌名称，改成“格格设计工作室”。
  3. 双击主标题，改成“让好设计，推动业务增长”。
  4. 把说明文字改成“专注品牌网站、产品页面和视觉设计服务”。
  5. 把三个功能卡片改成“品牌设计”“网页设计”“长期维护”。
  6. 选中行动按钮，在左侧“属性”中把链接改为联系页面地址。
  7. 切换手机视图，检查标题是否过大、卡片是否单列显示。
  8. 点击“另存为”，文件名填写“格格设计工作室.html”。
完成结果：得到一个包含导航、首屏、三项服务和行动按钮的企业主页 HTML。
示例二：编辑电脑中已有的 HTML从文件开始
  1. 点击 打开，选择“旧版公司介绍.html”。
  2. 双击旧标题，输入新的公司名称。
  3. 选中旧图片，在左侧“属性”中替换图片地址，并填写替代文字。
  4. 选择正文，通过左侧“样式”把行高设为 1.8，提高可读性。
  5. 从左侧加入“联系表单”和“网站页脚”。
  6. 切换桌面、平板、手机视图检查排版。
  7. 点击“另存为”，使用新文件名保存，保留原文件作为备份。
完成结果：旧网页不会被直接覆盖；新版本可以单独打开和继续修改。

8. 保存、导出与发布

自动保存

编辑器会把当前画布临时保存在本机浏览器中，刷新后可继续。

另存为 HTML

点击“另存为”下载完整 HTML，这是最重要的正式保存方式。

PDF / 打印

点击“PDF/打印”，在系统打印窗口中选择“另存为 PDF”。

发布网站

把导出的 HTML 上传到网站空间、服务器或静态托管平台。

不要只依赖自动保存：清理浏览器数据、换电脑或换浏览器后，自动保存可能不可用。重要作品必须导出 HTML 文件。

交付前检查清单

9. 常用快捷键

操作快捷键说明
保存 HTMLCtrl + S导出当前网页文件
撤销Ctrl + Z撤销最近修改
恢复Ctrl + Y恢复被撤销的修改
复制元素Ctrl + D复制当前选中元素
组合元素Ctrl + G把多个选中元素组合
锁定元素Ctrl + L防止误编辑
删除元素Delete删除当前选中元素
多选Ctrl + 单击同时选择多个元素
结束文字编辑Esc退出直接文字编辑状态

10. 常见问题

刷新后为什么还是旧内容？

编辑器可能恢复了浏览器中的自动保存内容。若想重新开始，请点击“新建”或重新选择模板；重要旧内容先另存为备份。

双击文字后不能输入怎么办？

确认顶部显示“编辑模式”，并检查元素是否被锁定。点击锁定按钮解除后再试。

新元素插入到错误位置怎么办？

先选中目标容器或区块，再点击左侧元素；也可以使用上移、下移按钮调整顺序。

图片为什么显示不出来？

检查图片地址是否有效。本地图片若只使用电脑路径，移动 HTML 后可能失效；发布网页建议使用网站上的图片地址或可公开访问的 URL。

保存后如何继续编辑？

再次打开编辑器，点击“打开”，选择之前导出的 HTML 文件即可。

如何切换英文界面？

点击顶部“中文 / EN”按钮。语言选择会在本机保存，但不会自动翻译画布里的网页内容。