Webflow 初學者入門指南

你是 Webflow 的新手嗎？若你是設計師，且第一次接觸 Webflow，甚至了解一點基礎代碼，我們保證你絕對能夠很快速的掌握它，甚至最後可能會學習到如何編碼。若你是因為有興趣而接觸 Webflow且無編碼基礎也沒關係，相信你看完這些基礎文章也可以很快掌握它。

什麼是 Webflow？

Webflow 是一個設計和網頁開發工具，具有電子商務、CMS 和託管平台。而 webflow 平台的每個方面都由特定的產品/功能可以掌握。Webflow 允許用戶進行可視化編碼，避免了冗長的手寫編碼過程，但它也不會取代傳統的編碼形式。（編碼是一門藝術，如果你想創造偉大的東西，它仍是非常重要要的工具。）

Webflow 的內容管理系統 (CMS) 針對網站設計人員和開發人員進行了微調。它迎合了我們的確切需求，提供了簡單的功能，讓用戶坐在一個完全控制的版位上。

1. Designer 設計師面板

Webflow 的設計師面板絕對是近期我們遇過最好的 CMS平台，就像大部分的低代碼、無代碼工具一樣，透過拖拉的方式，Designer 面板可以將你的設計決策轉換為乾淨且可用於生產的 HTML、CSS 和 JavaScript。

tenten 利用 Webflow 來構建網站也是為了讓設計師能夠用更視覺方式化的方式來開發網站，而不會犧牲質量。但要將 Webflow 發揮到最大效益，你需要將 Designer 與 CMS 和託管功能互相結合。

2. CMS

與 Designer 一樣，CMS 也是一種無代碼 Web 開發工具，它既有設計器內元素（ 設計師工作的地方），也有一般元素（客戶或內容管理員工作的地方）。我們將後一個元素稱為編輯器，但稍後會詳細介紹。

在 Designer 中，CMS 允許你通過組合模塊化“字段”來構建您將一遍又一遍發布的內容類型，例如 Blog 文章、產品頁面等。一旦你創建了你的內容類型，我們稱之為集合 (collection)，你就可以使用設計器來確定集合項目在網站上的外觀。

3. 電子商務
Webflow Ecommerce 讓你可以利用 Designer 和 CMS 的強大功能來創建完全自定義的電子商務體驗。任何 Webflow 項目都可以轉換為電子商務網站，但託管價格與常規網站略有不同。

這邊要注意的是，Webflow 目前只有支援 Stripe、Paypal 這兩個來跑金流，來處理電商收款、退款的服務。但很可惜的是台灣目前沒有辦法與 Webflow 串金流，原因可以看下面這篇文章來了解：

Webflow 金流串接 | Webflow 中文教學

Webflow 目前有支援以下金流付款，而一般來說我們最常用的就是 Stripe、Paypal 這兩個來為你的金流提供平台，你需要擁有 Stripe 或 PayPal 帳戶並將其連接到 Webflow 以收取付款、處理退款。

tenten 設計週報Tenten PR

4. 網頁託管
Webflow 最後最吸引人的部分是，它還提供網頁託管服務，且是由 Amazon Web Services (AWS) 和 Fastly 提供支持，速度極快、超級可靠，並且具有企業級安全性。詳細的 Webflow託管方案請參考下面這個連結了解：

Webflow 台灣 | Webflow 建站 | Webflow 開發

讓我們 Weblfow 提高10x 倍網頁的建構速度來協助您建構產品，我們之所以選擇 Webflow，是因為能完全掌控應用程式的設計、功能及可擴展性。Webflow 已成為我們最喜歡的網站開發平臺。Tenten 同時也是台灣第一個Webflow 的專家合作夥伴。

Webflow 開發

好的！我們已經了解了 Webflow 的四大基礎服務，讓我們來看看更細節的部分吧。

設計和構建主頁

在我們創建我們的第一個空白項目之前，我們需要了解網站是如何從根本上構建在網絡上的—— 使用 HTML 和 CSS。

• 基礎：盒子模型 （Div Blocks)
  網站使用盒子模型，這種設計原則讓我們了解網頁上的所有內容基本上都是盒子中的盒子。這些框是稱為“div”的 HTML 組件。

在上圖中，我們有一個 Section（黑色框）、一個container（紅色框）以保持該部分內的所有響應，以及充當容器內內容的各種 div（藍色框）。

Section、Container 和 div blocks 的命名歸結為你如何使用所謂的 CSS 類來設置 div 的樣式和標籤。

我們使用 CSS 來設置這些 HTML 框及其內容的間距、定位、對齊方式、字體和样式。我們將所謂的 CSS 類添加到每​​個框，就像你為樣式設置創建的預設一樣。 style 可在整個站點中重複使用，並允許你在構建網站的過程中保持乾淨整潔。

總結來說:

• HTML 是頁面上的組件
• CSS 是該組件的設計

恭喜！你現在對網站的構建方式有了大致的了解。現在可以做的一個有趣的練習是訪問你最喜歡的網站，例如 apple.com，然後打開網頁瀏覽器來檢查元素( alt + command + i )。

可以看到代碼（右側）一切都是 div blocks 組成，而這些 div 中有時還有其他 div，其內容包括標題、段落和按鈕。這都是 HTML。你可以看到 apple.com 的設計者如何為每個組件/元素和 div 標記他們的類，同時還能夠在樣式部分查看 CSS。

如何用 Webflow 來建站

請大家要先了解下面這三個 Webflow 的基礎影片，相信了解後你會對 Webflow 的建站方式越來越清楚。

另外也歡迎到我們的 Webflow 資料庫來找答案，裡面有包含 Webflow 建站你需要了解的一切，簡單版的 Webflow 中文線上資料庫。

Welcome! - Webflow 學習文件 (Official)

Tenten | We help companies move faster without code.

Webflow 學習文件 (Official)

學習 Webflow 權威指南 - 來自 Tendmy

Tendemy 學院旨在協助設計師創造一個成功而充實的職涯，我們將教會您實現目標所需的熱門設計技能與思考。