# 3 Designer 介面總覽 {% embed url="" %} WebFlow 註冊後，即可以進入 WebFlow 的控制台。 點擊下方的「 New Site 」按鈕，就可以創建項目了。免費帳號可以創建 2 個 Project。 ![](https://i.imgur.com/E1rUdRz.png) #### Webflow Designer 介面介紹 整體來說 WebFlow 的介面上，可以修改HTML，更新CSS，做交互，甚至動畫。其 WebFlow 介面包括了三大部分：介面控制台（左側）、細節調整（右側）、畫布（中央）。 ![](https://i.imgur.com/67E46v4.png) #### 介面控制台 ![](https://i.imgur.com/zIae4mO.png) #### 自動儲存 顯示您的工作何時被保存 - 用灰色省略號 (...) 表示。Webflow 會自己自動儲存專案，當自動儲存時，用綠色複選標記表示。若使用 Mac 中按 CMD+S 或在 Windows 中按 CTRL+S 來手動保存項目。單擊此圖標不會保存您的專案。 ![](https://i.imgur.com/74Cj6CT.png) #### RWD管理 最上面的4個圖型按鈕非常直觀：桌面電腦（包括筆記本）、平板、手機橫屏、手機豎屏。當你點擊相應的圖標后，就可以預覽相應的尺寸內容。這邊要注意的是，要從桌面電腦（星星）的地方去調整作品，Ｗebflow有一個最棒的功能是他可以自動先幫你調整所需的大小。當然每個尺寸都必須要去調整一次才會更完美！ ![](https://i.imgur.com/Toprvxj.png) ![](https://i.imgur.com/WTTZned.png) ![](https://i.imgur.com/8wn1PrI.png) 設計介面中主要有 4 個主要面板： 1. CSS面板設置 — 快捷鍵：S 使您可以訪問可用於選擇元素的所有 CSS 屬性。您只需在相應的字段中輸 入這些值，即可立即在畫布上查看應用於您的元素的樣式。 2. HTML元素管理 (D) — 快捷鍵：D 使您可以訪問可用於選擇HTML元素的各種設置。 3. CSS管理 — 快捷鍵：G 顯示您在項目中創建或編輯的類、組合類和標籤的完整列表。這是重命名甚 至清理任何不再使用的樣式的快速方法。了解更多。 4. 動畫管理 — 快捷鍵：H 允許您創建動畫並將它們應用於所選元素。 #### 底部導航欄 按鈕欄顯示所選元素的層次結構。您可以看到它的位置，在哪些其他父元素中，您甚至可以通過單擊此麵包屑欄中的標籤來選擇任何父元素。 ![](https://i.imgur.com/PoOwJdE.png) 以上這些都會是你最常使用的幾個板塊。 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.tenten.co/docs-webflow/webflow-101/03-designer-jie-mian-zong-lan.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.