EP02. “编辑功能全解析”
🔒 登录后可标记已读- 接着 EP01，深入讲 Google Sites 的编辑功能——做 Header、选主题、加文字和媒体元素、嵌入 Google 应用、排版栏位与区块、管理页面、跟人协作
- 附上几个常见问题（自定义域名、横幅图片尺寸、有没有 widget）
- 前置知识：先看过 EP01，已经建好第一个网站并知道怎么发布
重点内容
做 Header（页首）
Header 是大多数网页顶部的菜单横幅——公司 logo 和 About/Services/Contact us 这类导览分页通常放在这里。
📌 从 Blank site 建的网站，Header 区块能改网站名称、加页面标题、自定义 Header 呈现方式；用现成模板的话，能改的通常只有文字栏位和加 logo，范围比较受限。
- 在 "Enter site name" 栏位输入网站名称——这个名字也会显示在网站上
- 点 Header type，选呈现方式：Cover、Large banner、Banner、Title only。前三种用不同尺寸展示背景图，最后一种只显示 Header 文字
[截图：Header type 选择面板，Cover/Large banner/Banner/Title only 四种样式的缩略图预览]
- Header 类型带图片的话，点 Image 上传背景图——横幅图片尺寸和长宽比都不限，经验上 1600×1068 像素效果不错
- 想调整横幅图片位置，点 Anchor 图标；编辑器会自动调整图片让文字更易读，建议保留这个效果，想还原原图就点"移除易读性调整"图标（一串星星的图案）
- 想加 logo，鼠标悬停在网站名称上，点 "Add logo"——Google 建议上传高度至少 112 像素的图片
- 点 Header 文字能输入标题、调整样式/大小/字体/对齐方式，不需要文字的话直接删掉文字框；想移动文字框位置，鼠标悬停到文字框任一角落，出现四向箭头后拖拉
选主题（Theme）
新建的 Google Sites 页面默认主题就叫 "Simple"，名副其实。
- 侧栏点 Themes
- 选其他主题选项——每个主题自带几套预设的配色方案和字体
- 六款现成主题都不满意的话，点加号（+）图标的 Create theme，自己做一套主题——Google Sites 会把这些设计存起来供以后使用
[截图：侧栏 Themes 面板，六款现成主题配色缩略图并排]
加文字和媒体元素
侧栏点 Insert 打开全部可插入的元素选项：
[截图：侧栏 Insert 面板展开的全部元素选项列表]
| 元素类型 | 说明 |
|---|---|
| 基本元素 | 插文字框、图片、嵌入 HTML 代码、从 Google Drive 上传文件（也能直接双击编辑器任意位置访问这些选项） |
| 内容区块（Content blocks） | 把预先排好的文字+图片区块直接拖拉到页面上，之后再编辑 |
| 可折叠群组（Collapsible group） | 加一个标题，底下的文字行可以折叠收起；不想让它可折叠的话，编辑器里关掉 Collapsible 旁的开关 |
| 目录（Table of contents） | 自动把页面各区块的标题变成带链接的目录，点击能跳到对应区块；没办法手动加其他标题进目录，但可以把不想显示的标题隐藏（鼠标悬停在标题上，点眼睛图标的 Hide） |
| 图片轮播（Image carousels） | 上传两张以上图片做轮播展示；默认要手动点击切换图片，想自动播放的话在 Edit carousel 窗口点 Settings 图标，勾选 Auto-start 并选择切换速度，再点 Update |
| 按钮（Buttons） | 建一个链接按钮，字体和颜色默认会套用当前设计主题 |
| 分隔线（Dividers） | 插入一条简单的水平线，样式没办法编辑 |
| 间隔块（Spacer） | 插入一个厚的矩形区块，颜色只能从主题预设的三个选项里选，点旁边的调色盘图标（Section colors）调整，或上传图片 |
| 社交链接（Social links） | 跟按钮类似，但专门用来加社交媒体页面链接——比如加 Instagram 主页链接，会自动套用 Instagram 图标当按钮；想换设计就点 Link 栏位旁的 Add image 图标 |
💡 手滑删错元素或多加了一个？按 Mac 的 Command+Z 或 Windows 的 Ctrl+Z 撤销。
嵌入 Google 应用
Insert 侧栏往下滚，能加这些互动元素：
- YouTube：嵌入可播放的 YouTube 影片
- Calendar：以周/月/议程视图分享你的日历
- Map：插入指定地址的互动 Google Map
- Docs、Slides、Sheets、Charts：以查看模式加入 Google 文件
- Forms：显示访客能填写的 Google Form——想加联系表单的话这是个不错的选项
📌 想用别的表单/预约工具做联系表单？先检查那个工具有没有提供嵌入代码（embed code），有的话从 Insert 侧栏点 Embed 加进页面（Google Sites 的嵌入功能只支持 HTML 代码）。
💡 进阶自动化想法：如果网站上嵌入了 Google Form 收集客户询问，可以搭配 Zapier 这类自动化工具，把每笔回复自动加进 Google Sheet、用 AI 按类型和紧急程度分类、再透过 Gmail 自动发送个人化跟进邮件——这类工作流属于第三方自动化服务，是否要用看个人需求，不是 Google Sites 本身的功能。
排版栏位与区块
新加的元素默认会出现在页面最下方，想调整顺序直接拖拉到想要的位置——甚至可以把元素拖到既有元素旁边做出栏位排版。
调整元素大小：选取元素，拖拉边框上的蓝色圆点。⚠️ 有些元素（比如可折叠群组）只能调整宽度、不能调整高度。
💡 保持图片原始长宽比：按住 Shift 键再拖拉角落调整大小——调整时页面会出现垂直参考线，方便对齐元素。
鼠标悬停在任一区块上，会出现浮动工具栏，能改区块背景色、复制、或删除。💡 建议适度切换背景色，能强调重点、打断单调的视觉效果。
加与管理页面
- 侧栏点 Pages
- 点加号（+）图标，选 "New page"——加号图标也能加新链接、全页嵌入、或在 Header 加新菜单
- 新页面默认是独立分页，想改成子页面，直接拖拉到父页面上方——例如把两个页面移到某个页面底下变成子页
- 或者点父页面旁的三点竖排菜单（⋮），选 "Add subpage"，这个菜单也能设为首页、复制、从菜单隐藏、或删除页面
[截图：侧栏 Pages 面板，父子页面层级结构和三点菜单展开的选项]
📌 加或改页面时，编辑器里的改动会即时显示。
跟他人协作
- 点编辑器上方、像人形的 "Share with others" 图标
- 加协作者、设定权限（查看或编辑），或调整一般访问权限
⚠️ 跟其他 Google 应用不一样，网站的版本历史入口不太直观——但这功能很重要，尤其有多个编辑者、需要还原到旧版本时。点编辑器上方竖排三点的 More 图标，选 "Version history"。
常见问题（FAQ）
能用自定义域名吗？ 可以。点编辑器上方的 Settings 图标，选 Custom Domains。如果打算把 Google Site 用在正式/商业场合，自定义域名会让网站更显专业，而且 .com 或 .ca 域名一年大约只要 RM40～80（不同注册商价格不一，首年常有促销价，续费通常比首年贵）。
横幅图片该用多大尺寸？ 尺寸和长宽比不限，经验上 1600×1068 像素效果不错。
有 widget 吗？ 除了 Google 应用整合选项，Google Sites 本身没有 widget，但可以用嵌入代码加外部的功能——找该工具有没有提供 Embed 或 < > 选项。⚠️ Google Sites 的嵌入功能只支持 HTML 代码。
常见错误
- ❌ 目录里想手动加没有对应标题的条目——Table of contents 只能自动抓页面既有的标题生成，加不了手动条目，只能选择隐藏不想显示的标题
- ❌ 找不到版本历史入口——不像其他 Google 应用那么直观，要点编辑器上方竖排三点的 More 图标才能找到 Version history
- ❌ 调整图片大小时图片变形——按住 Shift 再拖拉角落调整，才能保持原始长宽比
- ❌ 用了跟 Google Sites 嵌入功能不兼容的代码格式——嵌入功能只支持 HTML 代码，其他格式的嵌入码可能没办法正常显示
- 💡 想强调某个区块或打断单调的版面，鼠标悬停在区块上用浮动工具栏改背景色，是最快能提升视觉层次的方法
Sources
Blog / Website：
- What is Google Sites — https://zapier.com/blog/google-sites-tutorial/