# 網頁切版直播班-2020秋季

https://rpg.hexschool.com/login

## 第一週：1 px 也不差的版型控制術
在排版時，常常為了幾 px 的位移或跑版而傷透腦筋嗎？其實只要掌握幾個關鍵知識，你也能切出精準到位的版型！

作品主題：履歷設計

教學關鍵字：
盒模型、line-height 行距計算、vertical rhythm (垂直韻律)、display 狀態、CSS 實務選擇器技巧、圖文排版技巧

## 第二週：Flexbox 網頁排版術
李小龍說過：「我不害怕曾經練過一萬種踢法的人，但我害怕一種踢法練過一萬次的人」，網頁排版擁有 float、inline-block、flexbox、grid 流派，但是你真的有認真將一個流派專精到讓人會怕嗎？本週題目我們將會詳細講解 Flexbox，並藉由後面幾週的反覆練習，讓您成為 Flexbox 的切版專家！

作品主題：個人網站

教學關鍵字：
Flexbox 排版技巧、水平與垂直置中、常見版型教學

## 第三週：伸縮自如的 RWD 手機網頁排版術
行動裝置這麼多，你的網頁在 全部螢幕解析度都支援嗎？還是你只會下 一個 手機版 media query，而 中間的 size 都忽略了？其實 RWD 沒你想像中的複雜，讓我們來教會你！

作品主題：RWD 形象官網

教學關鍵字：
media query、SCSS 、使用者體驗、表單設計

## 第四週：多頁式網頁設計
去面試時準備的作品，永遠只有一頁個人介紹網站嗎？頁面一多就不知道該怎麼管理你的 CSS 了？這堂課我們將會分享心法與工具，讓你頁面再多也不怕！

作品主題：多頁式 RWD 形象官網

教學關鍵字：
gulp、多頁設計、SCSS 管理、layout 版型規劃

第五週：後台表單設計
一個完美的前台，一定會有個維護方便的管理後台方便上稿，也同時會是你與後端工程師協作時，必須要會的版型設計！

作品主題：後台頁面設計

教學關鍵字：
Bootstrap 元件運用、表單使用者體驗、jQuery 動畫設計

## 第六週：導入網頁規範設計流程
當你頁面數量不是 3~5 頁，而是 30~50 頁以上，該如何制訂規範，讓產出的網頁都能模組化輸出，進以提升效率，也是網頁設計師需考量的一環！

作品主題：電商網站

教學關鍵字：
SCSS 自訂 Bootstrap、格線系統、版型管理術

## 第七週：視差滾動
在 2020 年，網頁已經擺脫中規中矩排版，我們能藉由簡易的 JS 套件，讓自己的網頁具有動感，設計出具備視差滾動技巧的優美網站！

作品主題：產品介紹網站

教學關鍵字：
熱門視差滾動套件、JS 瀏覽器控制

## 第八週：CSS 模組化管理
一個成熟的前端介面，不論是版型管理、語法支援度、元件應用都得顧及到位，本週將會詳細介紹各角度的技術詮釋，以做為完美的收尾。

作品主題：大型訂房網站

教學關鍵字：
SMACSS、OOCSS、Template 元件設計