經過一段時間艱苦的準備和錄制，終于把前陣子公告講的免費網頁課程完全錄完了。觀看入口：B站搜索
整套課程最終包含13節課，8個不同類型的網頁設計案例，全方面了解網頁設計中的不同方向和目標，以及柵格系統在網頁設計中的正確應用方式。
基于 和 Figma 的安裝不穩定性，整套課程均使用即時設計演示（零基礎可以無成本直接在網頁中啟用）。
下面，我們做一下課程的導覽：
幫助大家正確認識網頁設計是什么如何學好網頁設計，網頁常見的類型有哪些，如何學習。
解釋響應式與柵格的基本原理，糾正新手的錯誤認識。以及如何應用它們完成項目網頁畫布的創建，以及實際設計中的應用方式。
講解網頁設計中必須掌握的規范內容，包含字體、色彩、圖標等細節的使用規則，為后續具體設計實踐做好準備。
通過創建對應畫布和柵格系統，來完成一個簡單的幻燈片式網頁設計。這是所有網頁中最簡單也最方便練習的類型，可以很好的鍛煉新手的排版布局和對配圖的使用意識。
在上一節課的基礎上進階，完成一個更復雜，排版更多樣化的案例，來引入進一步探索此類頁面設計的方式，同時為后續的動效設計做準備。
通過即時設計的 “關鍵幀動畫” 效果來制作網頁動效，快速掌握網頁交互動效的制作思路和方法。
講解當前主流的多屏展示類頁面設計的思路，如何在前期運用柵格系統和原型來構建頁面框架。
在原型基礎上完成頁面的視覺設計，并進行簡單的包裝和輸出。
通過一個實例來解釋響應式網頁設計的思路，以及如何創建真實項目中需要的界面，理解響應式的適配邏輯。
解釋外貿電商和國內電商的差異，以及設計外貿電商網站的注意事項，如何輸出完整的項目內容。
通過線上品牌官網案例，分享主流的官網設計注意事項和難點，如何在項目開始前通過合理的分析找出問題，提升網站整體質量。
在原型基礎上完成嚴肅的官方網站視覺界面要點分享，輸出遠超市面平均水平的官網設計成果。
講解國內網頁設計中無法回避的電商詳情頁面設計思路，通過最簡單的前期規劃和布局，快速輸出符合主流審美需求的頁面。
如果有一定基礎使用自己熟悉的軟件進行練習臨摹也可以，下面是這套課程的學習建議：
只要跟著建議的步驟展開，很快就可以入門網頁設計的技能。
那么未來我們會優化和豐富最后幾課的案例與知識點，以及添加新的網站類型和風格教學。
B站號：如何學好網頁設計，直接觀看