# 快速制作网站 | Creght 可视化文档

> 创建项目 您可以选择模板创建或者创建新的空白项目。 如果您是第一次使用 Creght，我们建议您从模板开始创建项目，模板基本会使用上 Creght 的全部功能，您通过在还不太熟悉 Creght 的情况下，通过简单的更改就能完成一个功能丰富的…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)帮助文档](/help.md)

[更新历史](/blogs.md)

[AI](/docs/ai/quick-create-first-website.md) [可视化](/docs/get-start.md)

入门

- [两分钟了解 Creght](/docs/get-start.md)
- [如何注册 Creght](/docs/signup.md)
- [快速制作网站](/docs/create-site.md)
- [模板](/docs/tpls.md)

设计

- [编辑器](/docs/editor.md)
- [基本操作](/docs/operating.md)
- [什么是布局](/docs/layout.md)
- [什么是定位](/docs/position.md)
- [什么是尺寸](/docs/size.md)
- [断点](/docs/breakpoint.md)
- [弹窗](/docs/popover.md)
- [组件](/docs/components.md)
- [添加第三方字体](/docs/tp-font.md)
- [副本与深拷贝](/docs/deep-copy.md)

CMS

- [内容管理 \- CMS](/docs/cms.md)
- [CMS 导入微信公众号文章](/docs/wxmp.md)

网站设置

- [页面设置](/docs/page-setting.md)
- [如何升级套餐](/docs/manage-plan.md)
- [SEO 设置](/docs/seo-setting.md)
- [小文件](/docs/verification-file.md)
- [绑定自定义域名](/docs/custom-domain.md)
- [如何进行网站备案](/docs/beian.md)
- [服务器节点说明](/docs/website-node.md)
- [如何切换站点](/docs/pxrp79jqtnyq.md)
- [多语言本地化](/docs/localization.md)

AI

- [关于 Creght AI](/docs/creght-ai.md)

工具

- [从 Figma 设计稿到可交互网站](/docs/figma-to-creght.md)
- [Figma 转响应式布局的 3 大核心指南](/docs/figma-autolayout.md)
- [Figma 设计稿一键转响应式网站](/docs/response-site.md)
- [Figma 转响应式网站-交互篇](/docs/figma03.md)
- [使用 FFmpeg 压缩视频](/docs/ffmpeg.md)
- [如何将 Clarity 添加到您的网站](/docs/clarity.md)
- [按钮 Hover 动效制作教程](/docs/button.md)
- [响应式导航栏制作教程](/docs/nav.md)
- [折叠面板](/docs/collapse.md)

入门/

# 快速制作网站

## 创建项目

您可以选择模板创建或者创建新的空白项目。

如果您是第一次使用 Creght，我们建议您从模板开始创建项目，模板基本会使用上 Creght 的全部功能，您通过在还不太熟悉 Creght 的情况下，通过简单的更改就能完成一个功能丰富的网站。

### 从模板开始

进入工作台首页，在上方就能看到我们精选的模板，点击「使用模板」即可：

![image.png](https://fsb.huglight.cn/51f743a5973e3537ca62c6482d8964ed/image.png)

在「模板市场」中可以找到所有的模板：

![](https://fsb.huglight.cn/project/mtdDqMgsnYi/mfsVrJDPEqn__image.png)

我们正在持续更新网站模板，如果您没有找到合适自己的模板，您可以提供参考、需求给我们，我们会优先构建您的模板。如果您有比较高的设计需求，我们也提供专业设计师代建服务，敬请与我们联系。

### 从空白项目开始

如果您已经会用 Creght，您也可以创建空白项目，从头构建您心中的网页。

空白项目并不意味着需要一个板块一个板块来搭建，我们也提供几个办法来帮助您快速搭建网站：

- 利用网页模板来提升效率：您可以使用模板创建另一个项目，进入编辑器找到自己需要的板块复制，然后粘贴到您自己的项目里。
- 我们除了提供网站模板，也提供了板块模板来快速构建网站，同样复制粘贴即可使用， [点击这里查看所有的板块模板和使用方法](https://creghtlib.site.creght.com/)。

## 编辑网页

在项目列表中，点击 “设计” 按钮即可进入网站编辑器：

![](https://fsb.huglight.cn/project/mtdDqMgsnYi/mfsVsttMBsJ__image.png)

如果您是新建的空白项目，那第一步就是添加元素。

### 添加容器元素

点击顶部的 ”操作栏“ 的 ” 口“ 图标可以进入快速插入容器元素模式，然后按下鼠标就可以在画布绘制容器。

![image.png](https://fsb.huglight.cn/a2ca8623e0228f7e1d10fb82f2c3e990/image.png)

同时你可以看到菜单项旁边会提示快捷键，可以通过键盘快捷键提升效率，如按 `F` 进入创建 容器 模式，按 `T` 进入创建文本模式。

> 小技巧：在制作一个板块时，我们可以在断点外的画布上创建一个容器，在制作完成之后再移动到断点之中。这样能让你更专注于正在制作的板块。

### 添加文字元素

点击 “T” 图标可以进入插入文字元素模式，然后再画布任意位置按下鼠标并键入文字即可添加文字元素。

![image.png](https://fsb.huglight.cn/df19d92dd1e87a74bb8f263b9870df9a/image.png)

### 添加板块

虽然容器和文字元素就能构建整个网页，但一个一个添加并不高效，所以我们在插入面板中内置了一些常用板块。

点击 ” \+ “ 图标可以展开 插入面板，有两种方式将元素添加到画布中：

- 按住元素并拖动到画布任意位置，就可以在指定位置添加元素。
- 点按元素，元素会自动添加到主容器里。

![](https://fsb.huglight.cn/project/mtdDqMgsnYi/mfsVteltJwX__image.png)

### 编辑元素

选择不同类型的元素在右侧会出现不同的设置项。我们先粗略的看一下，建立初步概念，在后面的 ”页面元素” 章节会详细讲解每个配置项的功能。

以下是最常用的两种元素，即文字与容器的设置项：

**文字设置项：**

![image.png](https://fsb.huglight.cn/7acb8a65f1bbed8bcd1957b0c1a327a8/image.png)

从上到下的栏目分别是：位置，尺寸，动效，光标，样式，文字，变换，无障碍。

其中只有 ”文字“ 栏目专属于文字元素，而其他栏目的配置项，比如尺寸，位置，是所有元素类型共有的设置。

**容器设置项：**

![image.png](https://fsb.huglight.cn/b705d562b0bc3f598b0af7a2d192ab0b/image.png)

每个栏目的简单介绍：

- 位置：控制元素在父级中的定位方式，与 [CSS 定位方式](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position) 一致，有绝对定位，相对定位，固定定位，粘性定位。关于定位，我们有单独的文章来介绍： [什么是布局](https://www.notion.so/14b32aefbb5a80139525de63ce45c067) 。
- 尺寸：控制元素大小，比如固定的宽高、包裹子级、填充满父级。
- 动效：可以为元素设置出场动画，丰富视觉效果。
- 光标：设置鼠标放入元素时的光标样式。
- 样式：对元素进行透明度、显示隐藏、填充背景图片等操作
- 无障碍：可以给容器或者文本设置一个更有语义化的 html tag，更有利于搜索引擎和用户理解。更多资料可参考： [HTML标签语义化：提升网站SEO与用户体验的双重利器](https://segmentfault.com/a/1190000045465892?utm_source=sf-similar-article)
- 布局：容器组件特有的设置项，布局用于控制其子级的排列方式，这是一个复杂且重要的属性，我们有单独的文章介绍： [什么是布局](https://www.notion.so/14b32aefbb5a80139525de63ce45c067) 。
- 文字：文字组件特有的设置项，用于设置文字的字体、大小、颜色等。


> 小贴士: 理解配置项最好的方式就是直接去更改试试，不用担心回不到之前的状态，按 Ctrl + Z (⌘ + Z) 可以撤销更改。


## 发布网站

点击右上角的发布弹窗中的“更新”，一键将你的网站部署上线。

在发布成功之后，Creght 会为您的网站分配一个可以公开访问的默认域名，可以在发布弹窗中找到这个域名。

![](https://fsb.huglight.cn/project/mtdDqMgsnYi/mfsVtYJHppH__image.png)

在正式上线网站之前，我们建议您做以下几个事情：

- 完成 SEO 设置有助于搜索引擎准确的收录您的网站，详情参考这篇文章： [SEO 设置](https://www.creght.com/docs/seo-setting)
- 绑定您自己的域名来提高权威性，详情参考： [绑定自定义域名](https://www.creght.com/docs/custom-domain)

现在您的网站已经正式上线啦，接下来的文章将进一步介绍 Creght 的高级使用技巧。

本文目录

- [创建项目](#创建项目)
- [从模板开始](#从模板开始)
- [从空白项目开始](#从空白项目开始)
- [编辑网页](#编辑网页)
- [添加容器元素](#添加容器元素)
- [添加文字元素](#添加文字元素)
- [添加板块](#添加板块)
- [编辑元素](#编辑元素)
- [发布网站](#发布网站)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png)

微信客服

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/design/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)