不需寫碼，用Webflow 21天快速做好免費的動態響應式網頁
Hi 大家好，我是Chloe，目前是一位UI/UX設計師，過去有5年網頁設計的經驗。我會寫HTML&CSS，所以我對Webflow的表現相當驚豔。
這篇文章會告訴你如何使用Webflow，在短時間之內完成一個看起來很厲害的網站。
前言
過去想要自己建立一個網站或部落格，大部分人的首選是WordPress，他是部落格剛盛行的時候，為了更容易編輯被開發出來用的服務，就算不會程式碼，後台也提供了修改樣板的功能。這樣的功能或許還不能滿足市場的需求，於是誕生了像Wix這種拖曳式的編輯器。不過顯然No Code是一個趨勢，也越來越多開發者加入戰局，包含今天要介紹的Webflow。
Ｗebflow適合以下對象：
- 我是設計師，但是我不會寫code
- 我是工程師，但是我想有漂亮的網頁視覺
- 我是一個小規模創業者，提供產品或服務，我想做一個簡單免費的網站
- 我想要做部落客，我的文章預計不會超過一萬篇
- 我封城在家很無聊，我想找事做 😂
使用Webflow前需要知道什麼?
- 如果你想要使用免費的服務，你可以建立最多兩個網頁專案。 一個網頁專案，Webflow提供兩個靜態頁面(Static pages)，內容自訂頁(CMS collection pages)，還有密碼頁跟404頁。
- 如果你想要有客製化的網址，你需要自行購買Domain，並且成為Webflow付費會員。 依照小型工作室到企業需求，Webflow有Site plans 和 Account plans，收費範圍在12–36美金之間，細節置底會再說明。
為什麼使用Webflow?
首先來了解Webflow是什麼？2013年Webflow成立於加州，他們的服務包含No Code操作直覺的網頁建置，還有主機提供等。
Webflow的優點包含
- 不會做設計，也有免費的套版可以使用
Webflow提供了現成的套版，如果對免費的套版設計不滿意，也有付費的的選項。 除此之外在Menu的選單選擇Showcase，並點選Cloneable可以看到有很多用戶無私分享可以免費複製修改的酷炫套版，我在上面看到很多厲害的作品，得到眾多靈感。
- 不需要用編輯器改寫程式碼，也能做出搶眼的網站
以官方提供的21天教學範例來看，非常直觀操作的介面，左邊工具列目前對應著圖層架構，對照畫面選擇要修改的區塊輕鬆快速。右邊工具列對應著物件的屬性，操作介面近似Photoshop。
上方工具列點選眼睛可以即時預覽，中間可以選擇預覽不同裝置，右側則是復原及回復的功能。
- 不會操作，免費的Webflow University課程，手把手教你網頁架站到上線
Webflow已經準備好網頁素材assets還有現成的套版可以複製，注意目前操作介面跟教學影片都只有英文的。
- 又忘記儲存檔案了，Webflow支援自動備份，還有版本回溯
還記得電腦當機才發現忘記存檔崩潰的感覺嗎？自動備份非常實用，如果版面改到壞掉，還可以回溯之前的修改記錄。
(注意只有付費方案才可以一鍵回溯，但是免費方案可以查看過去備份的設定，如果只有部分微調，可以看著歷史紀錄手動調回來就好)
- 支援靈活flexbox和grid排版，網頁排版在手機終於看起來不會怪怪的
過去網頁排版由table進化到div，很多網頁排版在移動裝置的呈現都看起來不盡理想，甚至會影響SEO排名。原先div排版的限制，在flex排版出現之後，很多困難都迎刃而解。不過flex排版屬性有的是針對父層容器(parent)，有些則是針對子層(child)物件。過去我覺得這很複雜，不過現在可以透過圖像化介面選擇需要的功能，真的是省了很多時間和心力。
Webflow線上課程
你不需要有任何的程式基礎，當然你有的話，你會對於開發過程的飛快感到吃驚。
每一個章節對應到Webflow線上課程 2021 design portfolio course，每一堂課約10–15分鐘，課程最長不超過半小時，總課程約兩個小時。
這系列的所有的單元我都看過了，帶星號(*)的是我覺得收穫比較多的課程。
- 基本介紹
- 製作首頁Homepage
- Day 1 主視覺區域 (Hero section)
- Day 2 Ｍenu導覽 (Navigation)
- Day 3 *作品或服務 (Projects or services)
- Day 4 連絡表單 (Contact form)
- Day 5 頁尾設計 (Footer)
- Day 6 *響應式設計 (Responsiveness) - 產品(包含作品或服務)
- Day 7 *產品主頁+內容管理系統 (Main page + CMS)
- Day 8 產品頁響應式設計 (Responsiveness) - 聯絡我們
- Day 9 連絡表單 (Contact form)
- Day 10 *表單驗證 (reCAPTCHA) - 網頁優化進階設定
- Day 11 *搜尋引擎搜尋優化&Open graph設定 (SEO & Open graph setting)
- Day 12 更改頁面佈局配色 (Dark to light redesign)
- Day 13 *客製化2D和3D效果 (2D & 3D interactions)
- Day 14 客製化404 Error頁 (404 page)
- Day 15 3D視差效果密碼頁 (3D parallax page)
- Day 16 *網頁無障礙評估 (Accessibility audit) - 上線及管理
- Day 17 *設計評估 (Design review)
- Day 18 **發佈及上線 (Publish and launch)
- Day 19 **驗證網頁和追蹤碼 (Verify your site and track analytics)
- Day 20 **進階產品篩選 (Advanced CMS filtering)
- Day 21 最後成果展示 (Final thoughts & portfolio showcase)
很多人在自學HTML和CSS遇到的其中一個難題是，雖然知道各個物件的屬性跟差別，但是一想到要把網頁整合在一起，就不知道怎麼下手了。透過跟著影片的提供的範本，實際操作一遍之後，你會對網頁架構的邏輯及過程有更深入的了解。
有沒有更適合我的課程？
看到這裡你可能會覺得上面介紹的那些東西對新手來說很難消化，有沒有更簡單一點的東西？或者你想的是，我想做的是電子商務，有沒有適合我的線上課程？
Webflow針對不同的階段及網頁的需求提供了許多免費的課程，包含建立網頁最基本的知識、針對電商需求的課程、SEO及無障礙評估、接案設計師的入門，動態設計等等。
價格方案
Webflow針對價格的方案分成網站方案Site plans及帳號方案Account plans
只要你的網站不需要客製化網域，而且你只需要兩個靜態頁面，那麼你可以一輩子享用免費的服務，以下的表格可以直接跳過了。
如果你考慮要訂閱他們的服務，要特別注意的是，不管是哪一種規模的Site plan，靜態頁面最多只能到100頁。這個數目對一般人來說綽綽有餘，不過如果你的網頁有一定的規模，同一頁面有不同語系設定，100頁的限制可能需要多加考量。
內容自訂物件(CMS collection item)可以把它理解為
- 一篇blog文章
- 一個特定類別下的產品(例如：美妝商城的洗面乳)
- 一個特定類別下的服務(例如：廣告公司的行銷服務)
依據不同方案，自訂物件的上限分別在2000頁到10000頁。另外你需要考慮你的網站是否會邀請其他人一起共同編輯，如果你未來想邀請至少3個人協同合作的話，可以參考CMS方案。
正如一開始說過的，每個帳號可以建立兩個免費的專案，一般的情況下，你可能不需要超過兩個不同的獨立網站。如果你是freelancer或者agency，因應業務需求需要製作大量專案，價格依據專案量從16–35美金。
心得總結
相對於其他架站平台，使用Webflow的體驗對我來說相當流暢，它並不是完全沒有學習曲線，透過官方的課程還有用戶在Showcase分享的可複製專案，大幅提升了網站的開發速度。以價格來說，它不是最便宜的平台，不過省去了以下麻煩：你不需要安裝大量外掛去達到理想的效果或功能，也不需要解決不同外掛之間產生的衝突。
以下是我最喜歡的地方：
- Day 20 Advanced CMS filtering 展現了如何進階設定篩選器，我不需要在後台寫if else，就可以讓指定產品顯示在前台頁面指定的位置。
- 線上課程對我幫助很多，除了2021 design portfolio course，我也看了Freelancer web design boot camp。技術層面的教學之外，課程也解釋了設計師遇到的問題應該怎麼解決。(例如：客戶問可不可以做免費的網站，或者問他們自己做網頁可不可以，為什麼要找設計師來做。)
- 網頁動態是我過去想做，但是很難學的部分。複製其他用戶在Showcase的專案，觀察圖層的結構，看到其他用戶下動態的物件，也可以點進去看動態的屬性跟數值，進而學會怎麼在網站做出想要的效果。
此外Webflow提供了相當好的福利，如果你還是學生，便可以享有一年的CMS site plan一折優惠分案，教育工作者則是免費
最後如果你看到這邊對Webflow躍躍欲試的話，可以點擊下方連結開始免費體驗。
