3 Designer 介面總覽

在 Webflow 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個圖型按鈕非常直觀:桌面電腦(包括筆記本)、平板、手機橫屏、手機豎屏。當你點擊相應的圖標后,就可以預覽相應的尺寸內容。這邊要注意的是,要從桌面電腦(星星)的地方去調整作品,Webflow有一個最棒的功能是他可以自動先幫你調整所需的大小。當然每個尺寸都必須要去調整一次才會更完美!

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

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

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

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

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

底部導航欄

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

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

Last updated