---
tags: 2021程式體驗營
---

# 體驗營直播-第一堂個人履歷切版
* [設計稿-個人履歷切版adobe xd文件](https://xd.adobe.com/view/0f1c0abb-4063-4ed0-96b1-452f520f878b-5a4f/specs/)
* 圖片
[個人照](https://hexschool.github.io/webLayoutTraining1st/week1/photo.png)、[六腳](https://hexschool.github.io/webLayoutTraining1st/week1/Group%201.svg)、[simtree](https://hexschool.github.io/webLayoutTraining1st/week1/simtree.png)、[facebook](https://hexschool.github.io/webLayoutTraining1st/week1/facebook.svg)、[instagram](https://hexschool.github.io/webLayoutTraining1st/week1/instagram-alt.svg)、[line](https://hexschool.github.io/webLayoutTraining1st/week1/line.svg)
* 文件
* [切版等級表](https://hackmd.io/GY_Tigk3RvKqGoYvy9XLuQ?fbclid=IwAR1C1vsRjeYzOGOgjxV5VEr-mNKdXQnY3ImskWMaZOrwYAI4HnoCH8MwsUU)
* 提升作業熟練度，[練功菜單](https://hackmd.io/Xg617MeYSSisP69T_DLoiA)
* [新手切版任務示範影片](https://www.youtube.com/watch?v=yHLFbaUbyF4)
* 邊界重疊、[失控的 margin-top](https://wcc723.github.io/css/2016/06/08/css-margin-collapsing/)
* [第一週小組任務連結](https://hackmd.io/wL3OKgdzQZuy64EYEOMuqQ)
* [個人履歷切版codepen](https://codepen.io/tinchen/pen/WNOeELg)

--emmet支援副檔名為css、html，開新頁要先存檔
--建議做到LV3
--新手任務切版切30分鐘才能就職（很多同學是5-8小時）
--提升熟練度，刻意練習是練習自己不熟悉的地方
--emmet必練 不需載一堆套件XDD 練好提早下班
-xd按alt可看跟其他物件距離
老師會把container以外的設定，另外寫在其他class名稱，例如container work
-img 的alt文字是播報器唸是給視障人士用的，也就是無障礙設計

## 切版實作 -- 先看設計稿樣式細節
* 範例：個人履歷
先找出整個網頁的規律 例如推8的倍數 線跟線之間padding:8px
文字24行距36，24/16 =1.5rem，1rem16px
標題80px Joanne Chen line-height:106

* 觀察設計稿，將不同區塊相同版型的元素設定同一個class，EX: subTitle
如有相同版型但細節稍有不同的可再加上另一個class做覆蓋，EX:subTitle-white
(國家隊4組)

### 全站設定
在body全站設定

body{
font-size: 24px;
line-height: 36px;
}
.container{
  width: 1200px;
  margin: 0 auto;
}

### 設計稿 寬度禁忌1920px
設計稿滿版為1920px，主要是示意表示滿版的意思，而不是寫死寬度width:1920
中間線條1200

### margin 單位概念
可以8px為單位設定mb-1、mb-2、mb-3等

mb-1{
margin-bottom:8px;
}
mb-2{
margin-bottom:16px; 
}

## 1. joanne Chen h1區塊

1. h1和個人大頭照”不需”用div包起來 (上50:29)
2. 設定css，h1和img設定mb-6推擠，img圖片需加上block效果，才能做向下推擠 (下3:00)
3. title下方線條要設定向下內距padding-bottom和border-bottom

.title{
  font-size: 80px;
  line-height: 106px;
  padding-bottom: 16px;
  border-bottom: 2px solid #000;
}

.block{
  display: block;
}

## 2. skill區塊
(上52:30) (下9:26)
這區塊較容易搞混，可多練習
1. darkBlue為滿版底色用，再用container做內容置中
2. 技能文字和學歷差在文字顏色，所以可以沿用設定再另外擴充子模組subTitle-white，在原有樣式的基礎下， 再新增一個樣式標籤客製化 subTitle-white (20組)
3. skills 寬996px
4. skills-content 也設定寬度和m0-auto

## 3. work區塊
1. (上55:46)(上58:20)每個工作經驗是同類型的東西建議用ul選單，每個li裡再使用h3標題
(下15:07)

## 4. 聯絡方式區塊

1. darkBlue為滿版底色用，再包一層container做區塊置中，內層在包footer做內容排版
2. (上59:35) FB、IG、LINE等圖示也是聯絡方式之一 ，標籤使用li在包img邏輯語意較適當，不太適合再用div包起來

<img src="https://hexschool.github.io/webLayoutTraining1st/week1/facebook.svg" alt="facebook" class="mt-1 mb-1 mr-3">
<img src="https://hexschool.github.io/webLayoutTraining1st/week1/instagram-alt.svg" alt="instagram" class="mt-1 mb-1 mr-3">
<img src="https://hexschool.github.io/webLayoutTraining1st/week1/line.svg" alt="line" class="mt-1 mb-1 mr-3">

## 小組任務：極速切版-個人網頁
觀察影片那些熱鍵、編輯器操作、程式碼語法是你原本不會，被你偷學到的知識點

### 1. vscode

(1) 註解
ctrl+/ 單行註解
shift+alt+a 區塊註解
ctrl + k + c 註解
ctrl + k + u 取消註解

(2) 畫面
alt+a 看vscode畫面自動換行
alt+shift+f 格式化文件

(3) 搜尋
ctrl+f 搜尋文件關鍵字
ctrl+h 搜尋+取代
ctrl+g 移動到數字輸入的那一行
ctrl+shift+f 搜尋資料夾內關鍵字

(4) 移動
alt+↑ 移動處在位置的那一行
shift+alt+↑ 複製處在位置的那一行
ctrl+→ 單行區塊移動
shift+→ 單個字反白
ctrl+shift+→ 區塊反白
ctrl+alt+↑ 向上同時編輯
ctrl+d 區塊反白&同時編輯
alt+shift選取行數 一次改多列

### 2. Emmet使用快捷鍵：以抓重音的方式來做縮寫。

>建立子類別>
. 建立class，可利用重複宣告達到多重class效果
{} 內容

ex.個人資料PROFILE區塊的Emmet可以寫成如下：
`h2.subTitle.mb-2{個人資料}+span{PROFILE}`

h2.subTitle>{個人資料｝+span{PROFILE}
=<h2 class="subTitle">個人資料<span>PROFILE</span></h2>

.subTitle.subTitle-white
= <div class="subTitle subTitle-white"></div>

ul.skills-content>li*7
=<ul class="skills-content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

h2.subTitle{工作經驗｝>span{WORK EXPERIENCE ｝
=<h2 class="subTitle">工作經驗<span>WORK EXPERIENCE</span></h2>

ta-c
= text-align: center;

bb=border-bottom: 1px solid #000

（老師寫法好像不太一樣，一個把span包進h2，一個沒有）

## 小組回覆補充
### 1. link,:visited,:hover,:active
這四個屬性是有先後順序的喔～順序不同的話可能會起不了作用。
[這個寫得滿清楚的～](https://kknews.cc/zh-tw/code/v9ebpa.html)

### 2. [BEM模式](https://ithelp.ithome.com.tw/articles/10160545)
是css的命名規則其中之一，可能會對命名比較有想法

### 3. [margin重疊概念](https://note.charlestw.com/margin-collapsing/)
(29:31) margin重疊概念，若有重複會以最深的為主，例mb-3、mb-9，若沒有另外處理，會以mb-9為主，可以估狗[margin重疊邊界](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)

### 4. [Wrapping individual lines](https://www.notion.so/Emmet-Live-Demo-83e1adcd6d0c496780b86e2c8a26ba80)
先輸入文字列表，最後再上 HTML 標籤，是用Wrapping individual lines技巧，相當適合拿來多行上稿使用}