這是一份為初學者準備的 Webflow 教學指南，將帶你從入門到建立第一個網站的基本流程。
🌐 Webflow 是什麼？
Webflow 是一個視覺化網頁設計工具，結合了設計、前端開發與 CMS 系統，不需要寫程式碼也能建立專業網站，但它仍保留了 HTML、CSS、JS 的概念。
🧭 初學者導覽流程
1. 📝 建立帳號與開始新專案
- 前往 webflow.com
- 註冊免費帳號
- 登入後 → 點選「New Site」→ 選擇一個模板或從空白開始
2. 🏗️ 認識 Webflow 介面
| 功能區 | 介紹 |
|---|---|
| 左側工具列 | 包含元素面板（添加標題、圖片、區塊等）、頁面結構與 CMS |
| 中間畫布區 | 你設計網站的主畫面 |
| 右側樣式面板 | 控制元素的 CSS 樣式，如寬度、顏色、邊距 |
| Navigator（結構樹） | 顯示頁面 DOM 結構 |
| Pages | 網站的每一個頁面管理 |
3. 🔤 添加元素（Elements）
- 點選左側的「+」（Add panel）
- 拖曳
Container到畫布上 - 再拖曳
Heading、Paragraph、Image等進入 Container - 點擊每個元素後可在右邊設定樣式（Style）
✅ 小技巧：可使用
Section → Container → Div Block → Elements的結構層級，利於排版。
4. 🎨 設定樣式（Style）
- 點選元素 → 右側 Style panel
- 可設定：
- Width / Height（寬高）
- Margin / Padding（外距、內距）
- Font / Color（字型與顏色）
- Background（背景圖或色）
- 使用
Class命名樣式，可重複套用到其他元素
5. 📱 響應式設計（RWD）
Webflow 支援自動響應式，但你也可以針對不同裝置進行微調：
- 點選上方裝置圖示（Desktop、Tablet、Mobile Landscape、Mobile Portrait）
- 為每個裝置單獨設定樣式（不會影響上層）
6. 💾 儲存與預覽
- 點選上方眼睛圖示可即時預覽
- 自動儲存（但可使用版本控制）
- 點選「Publish」→ 即可發布到 Webflow 子網域（例如：
yourname.webflow.io）
7. 🌍 自訂網域（可選）
若你有自己的網域（如 mysite.com），可：
- 到「Site Settings」→「Publishing」→ 添加自訂網域
- 根據 Webflow 指示設定 DNS
✅ 小專案練習建議
- 建立一個個人履歷/作品集頁面
- 模仿一個你喜歡的網站（練習 layout 與樣式）
- 嘗試用 CMS 做一個部落格清單頁
廣告