---
# System prepended metadata

title: 第一週 1 px 也不差的版型控制術
tags: [網頁切版直播班 - 2023 夏季班]

---


## 開課提醒
1. 錄影
2. 點名
3. 將[書籤](https://rpg.hexschool.com/training/36/show)加入最愛
4. 覆述本課宗旨
5. **學習進度安排，觀看[開學典禮](https://courses.hexschool.com/courses/202011221/lectures/47249820)影片**、[第三屆學長姐心得](https://rpg.hexschool.com/task/211/show)
8. 主線獎品(達四關)、小組任務、[每日任務](https://rpg.hexschool.com/training/36/show?embedhm=mIUWWxBjR_Ge9pGWC2zfxA)安排
9. 中場休息，訂出小組討論時間
10. 第二週釋出第三、四週設計稿

## 校長語錄
> 你不需要一開始就很厲害，但必須開始才有辦法很厲害

## 本週重點
* HTML 標籤元素屬性
* 常見實務觀念分享

## 宗旨
秉持六角學院熱於分享的精神，秉持熱心、耐心、同理心為根基，不僅帶領學員掌握前端技術，並提供以學員職涯發展為中心的教學環境。


## 願景
**成為全世界最優質的網頁切版教學教育單位**

## 義務與責任

1. 六角團隊有責任帶領每位學員，掌握網頁切版技能
2. 六角團隊有義務帶領整體班級，凝聚班級向心力，藉由同濟效應提升學習意願
3. 六角團隊必須考量每位學員的背景，由淺入深地規劃課程內容
4. 六角團隊需為學員設計階段性目標，讓學員能一步步完成任務，進以掌握本門課程技能


## 環境建立

1. 載入與新增 HTML、CSS
2. 運用 Emmet([字典](https://docs.emmet.io/cheat-sheet/)與[影片](https://www.youtube.com/watch?v=6VUFO6sLS5M))、[學姐操作示範](https://youtu.be/tFvFMncRYYM?t=62)
3. [練功菜單](https://hackmd.io/iE6mxohOS-ujKU398Ewk1w)
4. 插件安裝
    1. Preview on Web Server 或 [Live Server](https://hackmd.io/QpfYS3cwTl2NMU7bUqFNxw?view)


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

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

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

* display: block、inline 概念複習
* margin、padding 用法
* **小問題**：哪些 HTML 標籤是區塊元素？
    * h1、ul、a、li、p、span、div

## 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)

## 本週重點
* 教學怎麼提交任務，提交您的第一週主線任務
* 各組約時間進行小組任務


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


## 學習建議
1. 新手請觀看影片課程[前五個章節](https://courses.hexschool.com/courses/enrolled/2099237)後，再來嘗試作第一週主線任務
    1. 2020 VS Code 網頁編輯器、HTML 基礎教學
    2. 2020 CSS 常用語法
    3. 2020 使用 CSS 變更 HTML 標籤特性


2. 可跳過課前[最終作業一](https://courses.hexschool.com/courses/202011221/lectures/47249891)，如果想花時間多練習也可以。




## 第一週主線任務

1. <a href="https://rpg.hexschool.com/training/36/task?type=detail&id=344" target="_top">第一週 - 個人履歷</a>


備註：

- [figma 設計稿觀看教學](https://hackmd.io/MHtEdMRuT_G1A3yogcvLtw)
- 線上網址圖片，這裡六角已經上傳到 [圖片空間](https://github.com/hexschool/2022-web-layout-training/tree/main/2023week1)，本次作業圖片都放在 2023week1 資料夾，網址如下，其他以此類推：
- [https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/2023week1/vito.png](https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/2023week1/vito.png)
- [https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/2023week1/line.png](https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/2023week1/line.png)

> 補充：[如果不知道怎麼找到圖片路徑請點我](https://i.imgur.com/O7nQcFm.gif)
> 補充2：[div 區塊靠右作法](https://codepen.io/hexschool/pen/YzRrNZj)

## 週末任務(贈書)

1. [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF)
    * 10 分內可提交
    * 可先將 HTML、CSS(也加入 CSS Reset) 檔案建立好，
2. 到此 [Discord](https://discord.com/channels/801807326054055996/1113642862920335420/1126477469931819088) 討論串回報戰果，YT 設為不公開
2. 提供範例給學員參考


## 各週需要的知識點

* 第一週 7/7 前：[連結](https://courses.hexschool.com/courses/202011221/lectures/47249890)
* 第二週 7/14 前：[連結](https://courses.hexschool.com/courses/202011221/lectures/47249790)
* 開始學 Git，學到 [Git 分支](https://w3c.hexschool.com/git/3ff77cba)
* 第三週 7/21 前： [上半部、與下半部連結](https://courses.hexschool.com/courses/202011221/lectures/47249846)，
* 第四週[GGV 任務回報區](https://courses.hexschool.com/courses/202011221/lectures/47249925)，透過 discord 完成回報區來回報有部署到 GitHub Pages 上~
* 第五週[Bootstrap 環境](https://courses.hexschool.com/courses/202011221/lectures/47384033)
* 第六週[Bootstrap 5 - Flex 與網格系統介紹](https://courses.hexschool.com/courses/202011221/lectures/47384033)

<!-- 補個豆知識

通常 border 在設計軟體上是不佔據高度，但這會跟網頁上會有差異，因為 border 確實是有高度的

所以如果你要跟設計稿一模一樣的高度，可能就是在 margin 元素間少 1px

但通常來說都是會和設計師協調，為了讓推擠都能保持 4 與 8 的倍數間距

1.還是會讓實際推擠出 border 的高度，讓它從到上下來排列
2.用偽元素絕對定位來做 (但相對麻煩
3.告知設計師網頁 border 不可逆特性，請設計師改設計稿 (誤 
 -->