Peppubuild 用例：建立您的第一個網站 (1)

Peppubuild 是一個無程式碼平台，讓您無需編寫任何程式碼即可建立網站。建立網站可能會讓人望而生畏，特別是如果您是編碼或網站設計的新手。 Peppubuild 簡化了這個過程，提供了一個用戶友好的平台，讓您可以在開發網站的同時掌握基本的 Web 開發概念。將其視為創造力與科技的融合，教育與創新的結合。

為什麼要使用 Peppubuild 建立網站？

Peppubuild 提供了進入 Web 開發的低門檻。其特點包括：

• 預製模板：使用可自訂的網站佈局快速開始。
• 視覺化編輯：即時查看您的更改，無需深入研究程式碼。
• 程式碼視圖：對於想要學習 HTML、CSS 和 JavaScript 的人，整合了程式碼編輯器以促進實作學習。
• 互動式教學：逐步指南確保您永遠不會陷入困境。

開始創建您的第一個網站

要啟動項目，您首先需要獲得身份驗證。如果您尚未通過身份驗證，請點擊上面的連結。接下來，點擊“新建項目”按鈕，如下所示。

點擊「空項目」並按照說明命名您的項目。接下來，您將被重新導向到專案的工作區。

Peppubuild 的工具列

首先，我們將探索 Peppubuild 的介面。這就是你的編輯該的樣子。我已經從左到右對工具列的圖示進行了編號。

圖示 1： 這是區塊圖示。 區塊是預先建立的元件，您可以將其拖曳到編輯器中以形成網站的一部分。例如，您可以將文字和連結區塊拖曳到編輯器中。當您單擊按鈕時，右側面板中會開啟不同的可用區塊。

圖示 2： 此圖示已處於活動狀態，它是 樣式管理器。由於編輯器是空的，因此只有一個文字指示您先選擇一個元素。在樣式管理器中，您可以新增顏色、放大文字以及執行其他操作。

圖示 3： 標尺 圖示對於不關心網路回應能力的專家很有用，因為他們可以將區塊拖曳到編輯器中的任何位置。這會影響元素和頁面對齊。因此，只有當您是技術開發人員並且可以重新對齊頁面時才應該使用此功能。

圖示 4： 刪除 圖示可讓您刪除頁面上的所有內容。如果您只想刪除頁面上的單個元件，請按一下它並使用元件周圍彈出的刪除按鈕。

圖示 5： 這是撤銷圖示，雖然您可以使用 CTRL Z 撤銷更改，但也可以使用撤銷按鈕。由於我們沒有重做按鈕，您可以使用 CTRL Y。

圖標 6： 這是 程式碼區塊 圖標，它允許您以 HTML 和 CSS 格式查看頁面中的程式碼。當您導航到新頁面時，每個頁面的程式碼都會變更以對應於頁面的內容。

圖標 7：這是全螢幕圖標，它允許您將編輯器擴展到整個頁面。

圖示 8： 預覽 圖示可讓您查看編輯器的內容，無需側邊面板。

圖示 9： 這是 檢視元件 圖示。啟動時，它會顯示每個組件周圍的引導虛線。

圖示 10： 頁 圖示將在右側邊欄中開啟。它包含用於管理頁面和發布項目的各種按鈕。從新增頁面，到新增網頁標題，到發布項目。

每個項目都有索引頁，也就是主頁。請不要刪除或編輯此頁面的名稱。您可以使用「新增頁面」按鈕新增頁面。

圖示 11： 裝置 圖示對於跨不同裝置（從桌上型裝置到行動裝置）檢查您的專案非常有用。

圖示 12： 圖層 圖示顯示編輯器中所有元件及其包含的元素的樹。

圖示 13：標誌導覽至儀表板，而不是使用瀏覽器中的後退按鈕。

圖示 14： 屬性標籤顯示每個元素的屬性。當您將區塊拖曳到編輯器中時，您可以在屬性標籤中檢查和設定屬性。例如，連結有一個 Href 屬性，它接受並設定連結的 URL。

圖示 15： 新增資料按鈕適用於 Web 應用程式。這允許您添加外部資料。

Peppubuild 的街區

Peppubuild 有許多用於建立頁面的有用區塊，分為不同的類別。

• 導覽列：包含頂部和底部導覽以及側邊欄。

• 頁： 這包含現成頁面範本的區塊。如果您需要協助設定您的網站，您應該從此區塊開始。

• 方向： 更改頁面方向和佈局的區塊，例如用於在頁面中心排列內容的彈性中心。

• 部分： 包含像英雄部分這樣的區塊，佔據頁面的整個部分。

• 元素：組成網站的元素可以在元素部分找到。

• 表單：用於建立完整表單的區塊可以在此處找到。如果您是 Web 開發新手，那麼引導程式表單是您的最佳選擇。

• 動畫：您網站的輪播和其他動畫可在動畫部分找到。

• 基本：基本區塊包含您網站的基本元素，如圖像、連結和文字。

結論：下一步是什麼？

在本系列的下一部分中，我們將更深入地設計您的網站，將基本互動性與 JavaScript 集成，以及發布您的網站以供全世界查看！

使用 Peppubuild，建立您的第一個網站不再是一個挑戰 - 這是進入數位世界的激動人心的旅程。今天開始建造！

如果您喜歡我們的工作，請在 Github 上給我們一顆星。另外，如果您想為您的機構設定 Peppubuild，請發送訊息至 contact@peppubuild.com。我們很樂意聽取您的意見。

以上是Peppubuild 用例：建立您的第一個網站 (1)的詳細內容。更多資訊請關注PHP中文網其他相關文章！