# 第一週 1 px 也不差的版型控制術 (4/10 20:00)

## 申請直播細節
當天參加直播方法，請依照[任務四：上課直播 ZOOM 註冊](/4LFcWmOXRSGt-fL9rqJ6lg)進行申請。

# 第一週 1 px 也不差的版型控制術

* 點名
* 覆述本課宗旨
* 快速複習前三章，全部導入 Emmet 進行開發
* 常見實務觀念分享

## 環境建立

1. 載入與新增 HTML、CSS
2. 運用 Emmet 與介紹練習菜單
3. 插件安裝
1. Preview on Web Server 或 [Live Server](https://hackmd.io/QpfYS3cwTl2NMU7bUqFNxw?view)
2. TabNine

## 1 px 也不差的容器觀念

* 網頁可以切分為容器與元素
* 範例網站：[Yahoo 首頁](ht2tps://tw.yahoo.com/)、[Yahoo 新聞](https://tw.yahoo.com/)

## 1 px 也不差的區塊與行內元素概念

* display: block、inline 概念複習
* 元素間 margin 與 padding 的運用方式介紹

## 1 px 也不差的 box-model 與行距設定

* margin 與 padding 推擠
* line-height 的高度影響

## 1px 也不差的常見誤區

* 常看到寫死高度與寬度
* 上下 margin、padding 推擠用 %

## 心得分享

* 推擠方向請盡量一致，以方便維護，例如 margin-bottom
* 透過父層 padding 留白，統一設定
* 圖片距離分享

## 滿版式網頁與 CSS 選擇器設計

* [蝦皮](https://shopee.tw/)
* [IT 鐵人邦](https://ithelp.ithome.com.tw/)
* [T 客邦](https://www.techbang.com/)
* [IT HOME](https://www.ithome.com.tw/)
* [範例程式碼](https://codepen.io/liao/pen/yLYyYaZ)

## 練習版型 - 履歷設計

* [版型下載(僅供授權付費同學)](https://xd.adobe.com/view/3b004539-6382-47f6-51e9-f3b73ea5063e-4d31/)

## 本週重點
* 提交您自己的個人版型
* 各組約時間進行小組任務

## 常見問題
- 網頁不能出現 x 軸
- 要給每個區塊自訂的 class 名稱
- class 名稱順序，共用的 class 性質放自訂的 class 名稱後面，例如：`<div class="profile container">`
- 不可以寫死容器寬高
- 圖片要設定 `display: block;`

## 繳交作業流程

* [版型下載(僅供授權付費同學)](https://xd.adobe.com/view/3b004539-6382-47f6-51e9-f3b73ea5063e-4d31/)

### 階段一：環境準備

1. 新增資料夾，準備好圖片、HTML 與 CSS

### 階段二：想好本次[練習菜單](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/HJpJk8ABU/%2FiE6mxohOS-ujKU398Ewk1w)，2 點以上尤佳

### 階段三：進入開發流程，一次以一個 Section 當作一個階段

### 階段四：回程式勇者村 - 任務系統回報[版型任務](https://rpg.hexschool.com/task/77/show)

## 補充資源

* [學員筆記](https://hackmd.io/@koihsun/Byu0SM0PU)