快速入门指南
欢迎使用 HTMLPAGE 在线网页编辑器！本指南将帮助你在 5 分钟内掌握基本操作，快速创建出专业的网页。
第一步：了解界面布局
HTMLPAGE 采用直观的可视化界面设计：
顶部工具栏
- 撤销/重做：操作历史管理
- 设备预览：桌面/平板/手机视图切换
- 框架切换：TailwindCSS/Bootstrap 切换
- 导入/导出：HTML/Vue/React 代码导入导出
- AI 生成：智能页面生成功能
左侧面板 (5个Tab)
- 模块：拖拽式组件库 (Headers, Features, CTAs 等)
- 模板：完整页面模板库
- 资源：图片资源管理器
- 页面：多页面项目管理
- 图层：页面元素层级管理
中央画布
- 可视化编辑区域：直接在页面上编辑内容
- 响应式预览：实时查看不同设备效果
- 拖拽操作：从左侧拖拽模块到画布
右侧面板
- 属性设置：选中元素的属性配置
- 样式设置：CSS 样式可视化编辑
- SEO 设置：页面标题、描述、关键词设置
第二步：三种创建方式
方式一：使用 AI 智能生成 ⚡
这是最快速的方式，适合快速原型和创意验证：
- 点击顶部工具栏的 "AI 生成页面" 按钮
- 在弹窗中输入你的需求：
- 行业类型：如 "SaaS 数据分析工具"
- 页面目标：如 "展示产品功能，引导用户注册"
- 点击 "开始生成"，观看四个步骤实时进行：
- 需求分析 → UI 设计 → 代码生成 → 优化完善
- 生成完成后，页面自动加载到编辑器
- 可以继续使用拖拽功能进行个性化调整
方式二：选择现成模板 🎨
适合有明确设计需求和风格偏好的用户：
- 点击左侧面板的 "模板" 标签
- 浏览不同分类的模板：
- 企业官网、电商展示、SaaS 产品、作品集等
- 使用顶部的搜索和分类筛选找到合适模板
- 点击模板预览，查看完整效果
- 点击 "使用模板" 加载到编辑器
- 替换模板中的文字和图片为你的内容
方式三：从空白页面开始 🔧
适合有设计经验，希望完全自定义的用户：
- 默认进入编辑器就是空白画布
- 从左侧 "模块" 面板拖拽组件：
- Headers：顶部导航和品牌区域
- Heroes：首屏大图和主要信息
- Features：功能特色展示区块
- CTAs：行动号召和按钮组件
- Footers：底部信息和链接
- 将模块拖拽到画布上，自动吸附对齐
- 双击文本进行编辑，点击图片进行替换
第三步：内容编辑技巧
文本编辑
- 双击文本：直接进入编辑模式
- 工具栏：出现文本格式化选项（粗体、斜体、颜色等）
- 快捷键：支持 Ctrl+B(加粗)、Ctrl+I(斜体) 等常用快捷键
图片替换
- 双击图片：打开图片选择器
- 资源库：选择预置的高质量图片
- 上传图片：支持拖拽上传自己的图片
- 外部链接：输入图片 URL 直接使用
样式调整
- 选中元素：点击任意元素查看右侧属性面板
- 颜色修改：使用颜色选择器调整背景色、文字色
- 尺寸调整：拖拽边角调整元素大小
- 间距设置：调整 margin、padding 数值
第四步：响应式预览
确保你的页面在所有设备上都有完美显示：
- 使用顶部工具栏的设备切换按钮
- 预览三种视图：
- 桌面：1200px+ 宽屏显示效果
- 平板：768px-1200px 中等屏幕
- 手机：<768px 移动设备效果
- 在不同视图下调整元素位置和大小
- 确保文字可读性和按钮可点击性
第五步：SEO 优化设置
让搜索引擎更容易发现你的页面：
- 点击右侧面板的 "SEO 设置" 标签
- 填写关键信息：
- 页面标题：60字以内，包含核心关键词
- 页面描述：120-160字，概括页面内容
- 关键词：用逗号分隔的相关关键词
- 预览 Google 搜索结果样式
- 检查标题和描述的吸引力
第六步：保存与导出
本地保存
- 编辑过程自动保存到浏览器本地存储
- 下次访问自动恢复上次编辑状态
- 支持多个页面项目管理
导出代码
- 点击顶部工具栏的 "导出" 按钮
- 选择导出格式：
- HTML：完整的 HTML 文件，包含 CSS
- Vue 3：Vue 组件格式，适合 Vue 项目集成
- React：JSX 组件格式，适合 React 项目集成
- 复制代码或下载文件
- 部署到你的服务器或托管平台
云端同步（需要登录）
- 注册账号后可将项目保存到云端
- 支持跨设备访问和团队协作
- 提供版本历史和备份功能
常见问题解答
Q: 编辑器支持哪些浏览器？
A: 推荐使用 Chrome、Firefox、Safari、Edge 等现代浏览器的最新版本。
Q: 可以导入现有的 HTML 代码吗？
A: 可以，点击导入按钮粘贴 HTML 代码，编辑器会自动解析加载。
Q: 模板是否可以商用？
A: 是的，所有模板都可以用于商业项目，无需额外授权。
Q: 如何添加自定义 JavaScript？
A: 在导出的 HTML 中可以添加自定义脚本，编辑器内主要专注于结构和样式。
Q: 是否支持多语言页面？
A: 支持创建多个页面版本，可以制作不同语言的页面内容。
进阶功能
掌握基础操作后，可以探索更多高级功能：
立即开始
准备好创建你的第一个页面了吗？