--- tags: 網頁切版直播班 - 2021 夏季班 --- # 第一週 1 px 也不差的版型控制術 ## 開課提醒 1. 錄影 2. 點名[報到](https://rpg.hexschool.com/training/21/calendar)，報到 Code：`QyOxgnPVlmoA`，20:00 才可報到 4. 將[書籤](https://rpg.hexschool.com/training/21/show)加入最愛 5. 覆述本課宗旨 6. **學習進度安排**、[第二屆學長姐心得](https://rpg.hexschool.com/task/162/show) 8. 主線、小組任務獎品(達四關)，[每日任務](https://hackmd.io/ZhFhLGj_SSKJbkh3Nk0YLg?both)安排 9. 徵召 7 位志工(新老手皆可)，每週可提供 1.5 hr 協助切版社群，請私訊洧杰老師(gonsakon)申請加入，週日前截止。 11. 中場休息，訂出小組討論時間 ## 校長語錄 > 你不需要一開始就很厲害，但必須開始才有辦法很厲害 ## 本週重點 * 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/1389454)後，再來嘗試作第一週主線任務 1. 2020 VS Code 網頁編輯器、HTML 基礎教學 2. 2020 CSS 常用語法 3. 2020 使用 CSS 變更 HTML 標籤特性 4. Flex 網頁排版技巧 5. Flex 精神時光屋 2. 可跳過課前[最終作業一](https://courses.hexschool.com/courses/2020112/lectures/31938398)、二，如果想花時間多練習也可以。 ## 第一週主線任務 總計兩個作業： 1. <a href="https://rpg.hexschool.com/training/21/task?type=detail&id=202" target="_top">第一週 - 個人履歷</a> 2. [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF) 備註一：可觀看 [作業設計稿 - 線上預覽操作教學](https://hackmd.io/J7ajdobzTlyideAARTLz5Q?view) 備註二：線上網址圖片，這裡六角已經上傳到[圖片空間](https://github.com/hexschool/webLayoutTraining1st)，本次作業圖片都放在 **week1 資料夾**，網址如下，其他以此類推： * https://hexschool.github.io/webLayoutTraining1st/week1/photo.png * https://hexschool.github.io/webLayoutTraining1st/week1/line.svg >補充：[如果不知道怎麼找到圖片路徑請點我](https://i.imgur.com/O7nQcFm.gif)