Peppubuild 用例：建立你的第一个网站（1）

# Web 开发# JavaScript# 初学者

Peppubuild 是一个无代码平台，让您无需编写任何代码即可创建网站。创建网站可能很困难，尤其是如果您不熟悉编码或网站设计。Peppubuild 简化了这一过程，提供了一个用户友好的平台，让您在掌握基础 Web 开发概念的同时开发网站。您可以将其视为创造力与技术的融合，教育与创新在此交融。

为什么要使用 Peppubuild 建立网站？

Peppubuild 为 Web 开发提供了低门槛。其功能包括：

  • 预制模板：通过可定制的网站布局快速开始。
  • 可视化编辑：无需深入研究代码即可实时查看您的更改。
  • 代码视图：对于那些想要学习 HTML、CSS 和 JavaScript 的人来说，集成了一个代码编辑器来促进实践学习。
  • 交互式教程：循序渐进的指南确保您不会遇到任何问题。

    • 开始创建你的第一个网站

    要启动项目，您首先需要进行身份验证。如果您尚未进行身份验证，请点击上面的链接。接下来，点击“新建项目”按钮，如下所示。

    Create project

    单击“空项目”并按照说明命名您的项目。接下来，您将被重定向到项目的工作区。

    Peppubuild 的工具栏

    首先，我们将探索 Peppubuild 的界面。您的编辑器应该是这样的。我从左到右对工具栏的图标进行了编号。

    toolbar

    **图标 1：**这是块图标。**块**是预先构建的组件，您可以将其拖入编辑器以构成网站的一部分。例如，您可以将文本和链接块拖入编辑器。单击按钮时，可用的不同块将在右侧面板中打开。

    **图标 2：**此图标已处于活动状态，它是 **样式管理器**。由于编辑器为空，因此您只有一个文本指示您先选择一个元素。从样式管理器中，您可以添加颜色、放大文本并执行其他操作。

    **图标 3：**标尺**图标对于不关心 Web 响应能力的“专家”很有用，因为他们可以将块拖到编辑器中的任何位置。这会影响元素和页面对齐。因此，只有当您是技术开发人员并且可以重新对齐页面时，才应使用它。

    **图标 4：**删除**图标允许您删除页面上的所有内容。如果您只想删除页面上的个别组件，请单击它并使用组件周围弹出的删除按钮。

    delete.png

    **图标 5：**这是 **撤消图标**，虽然您可以使用 `CTRL+Z` 撤消更改，但您也可以使用撤消按钮。由于我们没有重做按钮，您可以使用 `CTRL+Y`。

    **图标 6：**这是 **代码块** 图标，它允许您以 `HTML` 和 `CSS` 格式查看页面代码。当您导航到新页面时，每个页面的代码都会根据页面内容发生变化。

    **图标 7：**这是**全屏**图标，可让您将编辑器扩展到整个页面。

    **图标 8**：**预览**图标允许您查看编辑器的内容，而无需侧面板。

    **图标 9：**这是 **查看组件** 图标。激活后，它会显示每个组件周围的引导虚线。

    **图标 10：**右侧边栏中打开了 **页面** 图标。它包含用于管理页面和发布项目的各种按钮。从“添加页面”到“添加网页标题”，再到“发布项目”。

    pages

    每个项目都有一个 `index` 页面，即主页。请不要删除或编辑此页面的名称。您可以使用 `Add Page` 按钮添加新页面。

    **图标 11**：**设备**图标可用于在从桌面到移动设备的不同设备中检查您的项目。

    **图标 12**：**图层**图标显示编辑器中所有组件及其包含的元素的树。

    **图标 13**：**徽标**导航到仪表板，而不是使用浏览器中的后退按钮。

    **图标 14：**“属性”选项卡显示每个元素的属性。将块拖入编辑器时，您可以在“属性”选项卡中检查和设置属性。例如，链接有一个“Href”属性，它接受并设置链接的“URL”。

    **图标 15：**“添加数据”按钮用于 Web 应用程序。这允许您添加外部数据。

    Peppubuild 的区块

    Peppubuild 有很多有用的块可用于构建您的页面，并分为不同的类别。

  • 导航栏：包含顶部和底部导航以及侧边栏。
  • 页面：包含现成页面模板的块。如果您需要帮助设置网站，则应从此块开始。
  • 方向：改变页面方向和布局的块，例如用于在页面中心排列内容的弹性中心。
  • 部分：包含像英雄部分一样占据页面整个部分的块。
  • 元素：构成网站的元素位于元素部分。
  • 表单：创建完整表单的块可在此处找到。如果您是 Web 开发新手，那么 Bootstrap 表单是您的最佳选择。
  • 动画：您可以在动画部分找到适用于您网站的轮播和其他动画。
  • 基本：基本块包含您网站的基本元素，如图像、链接和文本。

    • 结论：下一步是什么？

    在本系列的下一部分中，我们将深入探讨如何设计您的网站样式、如何将基本交互与 JavaScript 集成以及如何发布您的网站供全世界查看！

    有了 Peppubuild，建立您的第一个网站不再是一项挑战 - 这是进入数字世界的一次激动人心的旅程。立即开始构建！