> For the complete documentation index, see [llms.txt](https://docs.tenten.co/awesome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tenten.co/awesome/design/awesome-webflow/webflow-masterclass.md). # webflow-masterclass ### Webflow MasterClass。通過免費影片課程學習網頁設計 ## 用Webflow簡單地建立自定義網站 #### 完整的網站開發過程 通過12個小時的分步影片內容，了解如何從頭到尾建構像素完美的網站。 #### 開始你的Webflow組合 作為課程的一部分，建立一個功能齊全的網站，並獲得Tenten學院專家的個性化回饋。 #### 不需要編碼即可以製作網站 (No-Code) 掌握一個視覺化的開發工具，快速建立令人難以置信的網站，而無需學習如何編碼。 #### 掌握一個視覺化的開發流程，將你最好的創作付諸實踐 學習一個簡化的流程，使用Webflow為客戶建立定製的、完全互動的網站。在本課程結束時，你將能夠。 * 使用一個強大的視覺化開發工具，快速建立像素完美的網站。 * 實現令人驚嘆的動畫和互動。 * 在您的工作中重新獲得創意自由，不受模板的限制。 * 展示一個以你的第一個Webflow網站為特色的作品集。 ### 課程中你將會學到什麼 ### 第一章 #### Webflow簡介 * 歡迎 * 如何更好地利用本課程和社區 * 你需要什麼樣的Webflow計劃？ ### 第二章 #### Webflow基礎知識 * Webflow有什麼不同 * 基本的HTML/CSS概念 * 基本網站Demo * 掌握布局。顯示設置 * 掌握布局。網格 * 掌握布局。Flex * 解決的Flexbox遊戲 * 掌握版式設計。位置 * 布局工具使用的真實案例 * 使用圖片和背景 * 如何建構網站 * 如何有效地設置樣式 * 使用自定義字體 * 使網站具有響應性 * 響應性的挑戰 * 響應性挑戰--已解決 * 基本互動 * Webflow的本地組件 * 符號 * 出錯時的修復 ### 第三章 #### 項目實施一 * 建立一個真實世界的客戶單頁網站 * 自定義布局的挑戰 * 自定義布局的挑戰 - 解決了 ### 第四章 **動態網站** * 了解CMS * 使用CMS * 高級CMS過濾 * 導入CMS數據 * 創建電子商務網站 * 使用表格並與其他系統整合 * 內容管理系統的挑戰 * 內容管理系統的挑戰 - 已解決 ### 第五章 #### 動畫與互動 * 了解觸發器和動畫 * 創建彈出式窗口 * 滑入效果 * 懸停時的三維旋轉 * 視差效果 * 水平滾動部分 * 小樂蒂動畫 * 創建一個預載入器 ### 第六章 #### 項目實施 ii * 最終挑戰--單頁組合項目 ### 第七章 #### 高級用例 * 整合一個預訂系統（或任何其他第三方工具） * 導出到WordPress或Shopify * 雙語言網站 * 用（複製-粘貼）自定義程式碼創建令人敬畏的效果 ### 第八章 #### 網站開發流程 * 完整的Webflow網站流程概述 * 如何正確地導出和導入圖片 * 使用風格指南工作 * 隱私和可訪問性的考慮 * QA - 測試您的網站 * 客戶是否應該使用Webflow主機？ * 啟動前的檢查表。搜索引擎和最終設置 * 上線 ### 第九章 #### 項目管理 * 如何向客戶推銷Webflow * 當客戶不願意購買時 * 如何將網站交付給客戶 * 客戶CMS培訓 * Webflow網站的定價 * 完美的Webflow網站提案 * 維護Webflow網站 ### 第10章 #### 案例分析--客戶網站 * 項目計劃 * 項目設置與字體 * 創建風格指南 * 設置內容管理系統和虛擬內容 * 建立主頁 * 移動響應 * 內容管理系統項目頁面 * 生物收集頁面 * 公司簡介 * 體驗頁面 * 產品頁面 * 搜索結果頁面 * 互動 * 最後設置 ### 第11章 #### 案例研究 - CyberTruck網站 * 特斯拉Cybertruck網站在100分鐘內完成 ### 第12章 #### 將這一切結合起來 * 成為一個真正的大師 * 結論 - 下一步是什麼？ ## 12個月的我們的社區訪問權 加入專業網頁設計師社群，交流與分享提昇彼此的能力! #### 每周的現場辦公時間 從Tenten Academy的專家那裡獲得個性化的、無障礙的支持和回饋。 #### 建立你的網路 建立聯繫，發現商業機會，並與世界各地的網頁設計師進行合作。 #### 現實生活中的教訓 從現實生活中活躍的專業人士的社區中學習經驗和教訓。 從志同道合的設計師那裡獲得回饋、工作機會和技巧。 #### 投資於你的未來 **三個月的付款計劃(278美元/月)** * 分三期付清你的課程費用。你將獲得終身使用權，以及所有未來的更新。 **單次付款695美元** * 預先支付，節省139美元! 享受終身使用該課程和所有未來的更新。 * 每個課程都包括一個無問題的30天退款保證。 *** #### 常問問題 **為什麼Webflow比其他網站建設 程式更好？** Webflow是一個非常強大的視覺開發工具，它允許您創建高度定製的、真正優質的作品--當然，也可以相應地調整您的價格。Webflow還能為您處理網站開發的所有技術重任，因此您可以專注於您最擅長的工作：為您的客戶創造令人驚嘆的高價值作品。 **我已經知道如何編碼，為什麼還要學習Webflow？** Webflow提供了一種超快速的網站建設方式--我們所說的是幾個小時，而不是幾天或幾周。如果您是一名設計師，您也會喜歡在Webflow中工作的視覺效果，看到您所建構的網站即時成型。 **Webflow是免費的嗎？** Webflow提供了一個免費的計劃，許多學生在學習這個課程時都會使用。然而，對於您未來的客戶項目，我們建議投資於他們的付費層級。 **在本課程結束時，我是否能夠為我的客戶建立網站？** 是的，你會學到一個逐步的過程，你可以在任何未來的項目中使用。除此之外，在本課程結束時，您將擁有您的第一個Webflow網站，我們的團隊將給您提供個性化的回饋。我們希望您有充分的信心在您的投資組合中展示您的Webflow技能。 **我的付款方式有哪些？** 您可以分三個月付款，也可以一次性付款，以節省更多費用。我們通過PayPal和Stripe安全地處理所有付款，購買后您將立即收到電子信箱收據。如果你需要一張更詳細的發票作為記錄，請告訴我們，我們將很樂意幫助你。 **我可以使用該課程多長時間？** 您可以終身使用該課程，並可在12個月內進入 Tenten 社區。不僅如此，今後所有未來的內容更新都可以瀏覽。 **我可以使用Webflow建立一個電子商務網站嗎？** 可以的。Webflow最酷的地方之一就是它的靈活性。你的工作不受模板內置功能的約束，所以你可以真正創造出你的客戶所需要的東西。在Webflow大師班的第四章中，您將了解到所有關於電子商務和其他動態網站建設的功能。 **我需要知道如何編碼嗎？** 不需要。這就是使用Webflow這種強大的視覺化開發工具的神奇之處。你不需要知道如何編碼，就可以創建一個像素完美的、高度定製的網站。視覺介面將引導你完成這一切。 **Webflow大師班和Webflow大學之間有什麼區別？** Webflow大學有一些很好的教程和快速課程，但並不是要帶你完成作為自由職業者建立和銷售Webflow項目的整個過程--就像我們在Webflow大師班中所做的那樣。不僅如此，大師班是唯一一門讓你建立整個網站，並作為課程的一部分接受個性化的教師回饋的課程。 **本課程與《網頁設計》有什麼不同？成為專業人士課程的差異再哪？** MasterClass 課程是關於設計過程的。我們確實涵蓋了你在開發方面的選擇，但不包括實際實施中的細枝末節--這就是 Webflow 大師班的意義所在 你將學習到一個循序漸進的過程，使用 Webflow 將你的設計變成功能齊全、像素完美的網站。 ![Webflow MasterClass 教學大師班 by tenten](https://i.imgur.com/7qpmZNO.jpg) #### 更多資源 * [No-Code FB 社群 (中文)](https://www.facebook.com/groups/380840573814340) * 想要找尋 [Webflow 的接案](https://tenten.co/contact) 或是 [Webflow 設計師工作](https://www.cakeresume.com/companies/tenten)? * [Jasmine from NTU 於 Tenten 設計實習心得分享](https://tenten.co/insight/article/4month-intern-tenten/) * Discord (規劃中) * [Webflow MasterClass 線上教學](https://www.youtube.com/channel/UCOi68ITxdtM5wvEUaSG_XvQ) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.tenten.co/awesome/design/awesome-webflow/webflow-masterclass.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.