Sparkle 是一款专为 macOS 设计的可视化网站构建工具，它允许设计师、开发者和内容创作者无需编写代码即可创建专业、响应式的网站。其核心哲学是将直观的视觉编辑与强大的发布功能相结合，为用户提供从构思到上线的无缝体验。

一、核心界面与工作区详解

Sparkle 的界面设计清晰，主要分为以下几个区域：

顶部工具栏：包含文件操作（新建、打开、保存）、预览、发布、撤销/重做等全局命令。右侧是页面选择器和设备预览模式切换（桌面、平板、手机）。
左侧检查器面板：这是 Sparkle 的控制中心。其选项卡会根据当前选中的元素动态变化，包含：
- 样式检查器：调整文本字体、颜色、大小、对齐方式，以及形状和容器的填充、边框、阴影等。
- 布局检查器：控制元素的定位方式（流式、固定、浮动）、边距、内边距、尺寸和显示顺序。
- 动效检查器：为元素添加滚动或鼠标悬停时的动画效果。
- 表单检查器：配置联系表单等交互组件的字段和行为。
中央画布工作区：这是网站的可视化编辑区域。您可以直接在此拖放、调整、编辑所有页面元素。画布顶部有辅助线和对齐提示，底部有页面层级导航。
右侧组件库面板：提供所有可拖放的元素，如文本、图像、按钮、形状、容器、画廊、菜单、社交图标等。您也可以在此管理全局颜色和文本样式。
底部状态栏：显示当前操作提示、页面缩放比例以及画布尺寸。

二、完整操作流程：从创建到导出

步骤一：启动软件。打开 Sparkle 后，您会看到项目启动窗口。

步骤二：创建项目。点击“创建新文档”或使用快捷键 Command + N。您可以选择从空白画布开始，或使用一个预设的模板。

步骤三：打开项目。若要编辑已有项目，在启动窗口点击“打开现有文档”，或使用 Command + O 从 Finder 中选择 .sparkle 项目文件。

步骤四：添加与管理页面。在顶部工具栏的页面选择器中，点击“+”图标添加新页面。右键点击页面名称可以进行重命名、复制或删除。

步骤五：添加元素。从右侧组件库中，点击并拖动任意元素（如“标题文本”、“图像”）到画布上。释放鼠标即可放置。

步骤六：编辑内容。双击画布上的文本元素直接输入文字。对于图像，双击后从 Finder 中选择替换图片。

步骤七：调整样式。选中一个元素，在左侧“样式检查器”中修改其字体、颜色、背景等属性。

步骤八：设置布局。选中容器或元素，在左侧“布局检查器”中，选择“定位”方式。推荐使用“流式”布局以实现响应式设计，元素会随屏幕宽度自动调整位置。

步骤九：调整间距。在“布局检查器”中，通过调整“边距”和“内边距”的数值来控制元素与其他元素或容器边框的距离。

步骤十：切换设备视图。点击顶部工具栏的平板或手机图标，切换到对应视图。Sparkle 会自动应用响应式规则，但您可以在不同视图下微调元素（如隐藏某些元素、调整字体大小）。这些调整是设备专属的。

提示：在移动视图下，通常需要将导航菜单转换为更易触摸的“汉堡包”菜单。

步骤十一：预览网站。点击顶部工具栏的“预览”按钮（眼睛图标）或按 Command + P，在本地浏览器中全真预览网站效果。

步骤十二：发布设置。点击工具栏的“发布”按钮（云朵图标），首次发布需要配置网站设置：

步骤十三：发布网站。配置好发布目标（如输入 FTP 服务器信息）后，点击“发布”按钮即可将网站上传至网络。发布后，可以复制生成的 URL 进行分享。

全局样式：在右侧面板的“文本样式”和“颜色”中定义全局样式。修改全局样式，所有应用了该样式的元素会同步更新，极大保持设计一致性。
符号功能：将页脚、导航栏等重复使用的部分选中，然后选择“格式”>“创建符号”。之后可在组件库的“符号”选项卡中拖用。编辑一个符号实例，所有实例同步更新。
滚动动画：选中一个元素，在左侧“动效检查器”中，启用“滚动动效”。可以设置元素在滚动进入视口时的淡入、滑动等效果，增加视觉吸引力。
表单高级配置：在“表单检查器”中，可以为表单字段添加验证规则（如必填、电子邮件格式），并自定义提交成功后的跳转页面或提示信息。
使用容器进行分组：将多个相关元素放入一个“容器”中，便于整体移动、应用背景或设置布局，是构建复杂版面的基础。

问题：元素在移动端视图下错位或过大。

解决方案：切换到移动视图，检查该元素的“布局检查器”。通常将宽度设置为“自动”或“100%”，并确保其“定位”方式适合移动端（如使用流式布局）。使用“隐藏在此设备上”选项可隐藏非必要元素。
问题：发布的网站更新后，浏览器中看到的仍是旧内容。

解决方案：这通常是浏览器缓存所致。在发布设置中尝试启用“缓存清除器”（如果发布服务商支持），或通知访问者使用 Command + Shift + R（Mac）强制刷新页面。
问题：自定义字体在预览中正常，但发布后不显示。

解决方案：确保您拥有该字体用于网页的合法授权。在“样式检查器”添加字体后，需要在“发布”设置的“高级”选项中，确认字体文件已被正确打包并上传。
问题：如何让两个元素在水平方向上并排对齐？

解决方案：将两个元素放入一个“容器”中，然后在该容器的“布局检查器”中，将“子元素排列”设置为“水平”。再分别调整两个子元素的宽度百分比。