日期：107年7月5、6日
地點：新北市教研中心
主題：HTML5+CSS網頁設計-基礎篇
講師：Amos Lee
課程使用軟體：
- Sublime Text
- ColorCop (吸取螢幕色彩)
- Screen Ruler (螢幕尺規)
- ZoomIt (自由縮放螢幕)
- Prepros
- XMind (心智圖軟體)
網頁開發工具簡介：
網頁開發工具
- Sublime Text
- Visual Studio Code
- Atom
- Brackets
- JSBIN線上編輯器網站：http://jsbin.com/
網頁開發相關教學資源：
- Emmet：
- Sublime Text 網頁設計：
- sublime Text免費線上教學影片(約半小時)：https://course.cool3c.com/p/sublime
- sublime Text線上免費簡報：https://www.slideshare.net/banPrint/sublime-text-51689543
- Sublime Text 3推薦安裝的套件 – 網頁設計
- Sublime Text 網頁勞工常用擴充套件
- 教學：淺談Sublime Text 的安裝設定及入門操作- [ 上篇]
- 教學：淺談Sublime Text 的安裝設定及入門操作– [ 下篇]
Brackets 網頁設計 練習教學影片
主課程：HTML 5
- HTML 5 維基百科，自由的百科全書
- W3Schools Online Web Tutorials
- HTML5 教程| 菜鸟教程
- Sublime Text 網頁設計：
- Ctrl + Shift + G：在選取文字前後標示HTML標記
- !<Tab>
- lorem<Tab>
- lorem200<Tab>
主課程：CSS
- CSS – 維基百科 – Wikipedia
- CSS Tutorial – W3Schools
- CSS 教程| 菜鸟教程
- CSS – MDN – Mozilla
- CSS 基本- 學習該如何開發Web | MDN
- 學習CSS 版面配置
- CSS可樂: CSS Coke
- 網頁色彩輕鬆學
- 使用XMind (心智圖軟體)歸納整理
安裝中文Lorem外掛：
- 按下Ctrl+Shift+P
- 輸入「Install Package」
- 選 ChineseLoremIpsum
- 在網頁文件中，打 CTlorem，再按 Alt + C
CSS Box Model
名稱翻譯：
- margin: 外距
- padding：內距/留白/墊充
可見尺寸：width + padding + border
佔據空間尺寸：width + padding + border + margin
例如：
.amos{
width: 200px;
padding: 15px;
border: 10px solid #f00;
margin: 20px;
}
可見尺寸：200 + 15*2 + 10*2 = 250
佔據空間尺寸：200 + 15*2 + 10*2 + 20*2 = 290
設定 box-sizing: border-box; 後：
可見尺寸：width
佔據空間尺寸：width + margin
例如：
.box{
width: 400px;
background-color: #ccc;
border: 25px solid #f00;
padding: 25px;
box-sizing: border-box;
}
可見尺寸：400
CSS Tools: Reset CSS：
- https://meyerweb.com/eric/tools/css/reset/
- 存成 reset.css
- 在網頁 <head> 中引入：
- <link rel="stylesheet" href="reset.css">
Reset CSS 過度Over的作法：
<style type="text/css">
*{
margin:0;
padding: 0;
line-height: 1;
list-style-type: none;
}
</style>
版面配置：
- TemplateMonster (Website Templates | Web Templates)
- 深入解析CSS Flexbox – OXXO.STUDIO
- flexbox – 學習CSS 版面配置
- CSS Flexbox 介紹與解析« MUKI space
- 學習Flexbox 版面配置· Rhadow’s Tech Note
RWD 網頁設計
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
