网页构建器概述

欢迎使用网页构建器！这是一个功能强大的可视化网页设计工具，让您无需编程知识就能创建专业的网页。

主要特性

拖放式设计
实时预览
响应式布局
丰富的组件库

模板系统
用户账户管理
代码导出
团队协作

界面布局

网页构建器采用三栏式布局设计：

左侧面板：组件库、排版工具、模板选择
中央画布：可视化编辑区域，实时预览效果
右侧面板：属性设置、样式调整、代码查看

快速开始

按照以下步骤，快速上手网页构建器。

第一步：注册登录

1点击右上角的"登录"按钮

2如果没有账户，点击"注册新账户"

3填写用户名、邮箱和密码完成注册

提示：登录后您的工作会自动保存，并可以使用模板功能。

第二步：创建第一个页面

1从左侧"模板"标签选择一个基础模板

2或者从"组件"标签拖放组件到画布

3在右侧面板调整组件属性和样式

                    推荐的第一个页面结构：

                    1. 页头组件 (Header)

                    2. 内容区域 (Container)

                    3. 文本组件 (Text)

                    4. 页脚组件 (Footer)

第三步：预览和导出

1点击顶部工具栏的"预览"按钮查看效果

2使用"可视化"/"代码"切换查看模式

3满意后点击"导出"保存HTML文件

组件使用指南

了解如何使用各种组件创建丰富的网页内容。

基础操作

拖放组件

从左侧组件面板选择需要的组件
按住鼠标左键拖拽到画布中央
松开鼠标完成添加

选择和编辑

单击选择：点击画布中的组件进行选择
多选：按住Ctrl键点击多个组件
删除：选中组件后按Delete键或点击删除按钮

快捷键：Ctrl+Z 撤销，Ctrl+Y 重做，Ctrl+C 复制，Ctrl+V 粘贴

组件分类

📝 文本类组件

标题 (Heading)：H1-H6标题，支持不同级别
段落 (Paragraph)：正文内容，支持富文本编辑
列表 (List)：有序/无序列表

🖼️ 媒体类组件

图片 (Image)：支持URL链接或本地上传
视频 (Video)：嵌入视频播放器
音频 (Audio)：音频播放控件

📋 表单类组件

输入框 (Input)：文本、邮箱、密码等输入
按钮 (Button)：各种样式的操作按钮
选择框 (Select)：下拉选择菜单

📐 布局类组件

容器 (Container)：包装其他组件
行列 (Grid)：响应式网格布局
卡片 (Card)：内容展示卡片

属性面板使用

选中任何组件后，右侧会显示该组件的属性面板：

通用属性

ID和类名：用于CSS样式和JavaScript控制
显示/隐藏：控制组件可见性
边距和内边距：调整组件间距

样式属性

颜色和背景：文字颜色、背景色、背景图
字体和排版：字体大小、粗细、对齐方式
边框和阴影：边框样式、圆角、阴影效果

实时预览：所有属性修改都会在画布中实时显示效果。

模板管理

使用模板功能快速创建网页，提高工作效率。

使用系统模板

1点击左侧"模板"标签

2浏览预设的模板列表

3点击模板缩略图查看详情

4点击"加载此模板"应用到画布

注意：加载模板会替换画布中的所有内容，请确认当前工作已保存。

创建自定义模板

将您的设计保存为模板，方便重复使用：

1完成页面设计

2点击顶部"设为模板"按钮

3填写模板信息：

模板名称：便于识别的名称
模板描述：详细说明模板用途
分类标签：便于分类管理
公开性：选择是否公开给其他用户

4点击"保存模板"完成

管理我的模板

登录用户可以管理自己创建的模板：

查看我的模板

点击右上角用户名 → "我的模板"
或在模板列表中查看标记为"自定义"的模板

编辑模板属性

在模板列表中点击自定义模板
在属性面板中修改名称和描述
点击"保存修改"按钮

删除模板

选择要删除的自定义模板
点击属性面板中的"删除模板"按钮
确认删除操作

提示：只能编辑和删除自己创建的模板，系统预设模板无法修改。

导入导出模板

导入HTML模板

1点击顶部"导入模板"按钮

2选择HTML文件上传

3系统会自动解析并加载到画布

导出当前设计

1完成页面设计

2点击右侧面板的"导出"功能

3选择导出格式（HTML、CSS、完整包）

用户账户管理

管理您的账户信息和个人设置。

注册新账户

1点击右上角"登录"按钮

2点击"注册新账户"链接

3填写注册信息：

用户名：3-20个字符，支持字母、数字、下划线
邮箱：有效的电子邮箱地址
密码：至少6个字符，建议包含字母和数字
确认密码：再次输入相同密码

4点击"注册"按钮完成

登录账户

1点击右上角"登录"按钮

2输入用户名或邮箱

3输入密码

4点击"登录"按钮

自动登录：系统会保持您的登录状态1小时，期间无需重复登录。

个人设置

登录后点击用户名下拉菜单中的"个人设置"：

可查看信息

用户名：当前登录的用户名
邮箱：注册时填写的邮箱
显示名称：用于显示的昵称
用户角色：账户权限级别

提示：当前版本暂不支持修改个人信息，此功能将在后续版本中提供。

账户安全

安全特性

密码加密：使用bcrypt算法加密存储
会话管理：安全的会话令牌机制
自动登出：1小时无操作自动登出

安全建议

使用复杂密码，包含字母、数字和特殊字符
不要在公共设备上保持登录状态
定期更换密码（功能开发中）
及时登出账户

高级功能

探索网页构建器的高级特性，提升设计效率。

代码视图

切换到代码模式查看和编辑生成的HTML/CSS：

1点击右侧面板的"代码"标签

2可以查看实时生成的HTML结构

3查看对应的CSS样式代码

                    <!DOCTYPE html>

                    <html lang="zh-CN">

                    <head>

                      <meta charset="UTF-8">

                      <title>我的网页</title>

                    </head>

                    <body>

                      ...页面内容...

                    </body>

                    </html>

响应式设计

创建适配不同设备的响应式网页：

视口预览

桌面：1200px及以上宽度
平板：768px - 1199px宽度
手机：767px及以下宽度

响应式组件

使用网格布局组件创建响应式列
设置不同屏幕尺寸下的显示/隐藏
调整字体大小和间距的响应式设置

主题和样式

全局样式

颜色主题：设置网站主色调
字体方案：选择合适的字体组合
间距系统：统一的间距规范

自定义CSS

高级用户可以添加自定义CSS样式：

切换到代码视图
在CSS区域添加自定义样式
使用类名和ID选择器
实时预览样式效果

协作功能

分享设计

公开模板：将模板设为公开供他人使用
导出链接：生成可分享的预览链接
下载文件：导出完整的网页文件包

即将推出：实时协作编辑、评论系统、版本历史等功能正在开发中。

常见问题解答

遇到问题？查看以下常见问题的解决方案。

登录和账户问题

Q: 忘记密码怎么办？

A: 当前版本暂不支持密码重置功能，请联系管理员协助重置密码。

Q: 登录后刷新页面就退出了？

A: 系统已升级支持自动登录保持功能，登录状态会维持1小时。如果仍有问题，请检查浏览器是否启用了Cookie。

Q: 可以修改用户名吗？

A: 目前不支持修改用户名，此功能将在后续版本中提供。

组件和编辑问题

Q: 为什么组件拖不到画布上？

A: 请检查：

确保鼠标拖拽到了画布中央区域
尝试刷新页面重新加载
检查浏览器控制台是否有错误信息

Q: 组件属性修改后没有效果？

A: 可能的解决方案：

确保组件处于选中状态
检查是否有CSS冲突
尝试切换到代码视图查看生成的样式

Q: 怎么复制组件？

A: 选中组件后使用Ctrl+C复制，Ctrl+V粘贴，或右键选择复制选项。

模板相关问题

Q: 为什么看不到"保存模板"和"删除模板"按钮？

A: 这些按钮只对已登录用户的自定义模板显示。请确保：

已经登录账户
选择的是您自己创建的模板
系统预设模板不显示这些按钮

Q: 模板加载后原来的内容丢失了？

A: 这是正常行为，加载模板会替换画布中的所有内容。建议：

加载模板前先保存当前工作
将重要设计保存为自定义模板
使用导出功能备份HTML文件

Q: 可以编辑系统预设模板吗？

A: 不能直接编辑系统模板，但您可以：

加载系统模板到画布
进行修改和调整
另存为您的自定义模板

导入导出问题

Q: 导出的HTML文件无法正常显示？