3 Designer 介面總覽

WebFlow https://webflow.com/ 註冊後，即可以進入 WebFlow 的控制台。

點擊下方的「 New Site 」按鈕，就可以創建項目了。免費帳號可以創建 2 個 Project。

Webflow Designer 介面介紹

整體來說 WebFlow 的介面上，可以修改HTML，更新CSS，做交互，甚至動畫。其 WebFlow 介面包括了三大部分：介面控制台（左側）、細節調整（右側）、畫布（中央）。

介面控制台

自動儲存

顯示您的工作何時被保存 - 用灰色省略號 (...) 表示。Webflow 會自己自動儲存專案，當自動儲存時，用綠色複選標記表示。若使用 Mac 中按 CMD+S 或在 Windows 中按 CTRL+S 來手動保存項目。單擊此圖標不會保存您的專案。

RWD管理

最上面的4個圖型按鈕非常直觀：桌面電腦（包括筆記本）、平板、手機橫屏、手機豎屏。當你點擊相應的圖標后，就可以預覽相應的尺寸內容。這邊要注意的是，要從桌面電腦（星星）的地方去調整作品，Ｗebflow有一個最棒的功能是他可以自動先幫你調整所需的大小。當然每個尺寸都必須要去調整一次才會更完美！

設計介面中主要有 4 個主要面板：

1. CSS面板設置 — 快捷鍵：S 使您可以訪問可用於選擇元素的所有 CSS 屬性。您只需在相應的字段中輸 入這些值，即可立即在畫布上查看應用於您的元素的樣式。

2. HTML元素管理 (D) — 快捷鍵：D 使您可以訪問可用於選擇HTML元素的各種設置。

3. CSS管理 — 快捷鍵：G 顯示您在項目中創建或編輯的類、組合類和標籤的完整列表。這是重命名甚 至清理任何不再使用的樣式的快速方法。了解更多。

4. 動畫管理 — 快捷鍵：H 允許您創建動畫並將它們應用於所選元素。

底部導航欄

按鈕欄顯示所選元素的層次結構。您可以看到它的位置，在哪些其他父元素中，您甚至可以通過單擊此麵包屑欄中的標籤來選擇任何父元素。

以上這些都會是你最常使用的幾個板塊。