tags: 互動程式設計,2-1,CodePen，教師版,動畫互動網頁特效入門（JS/CANVAS）
---

# 2-1 - Codepen 平台介紹與基礎設定


---

## 第一個 key bindings 快捷鍵

我們改成 sublime text
這讓我們在編輯的時候
有很多很方便的快捷鍵可以用

---

### Key Bindings

---

## 第二個 preprocessor

### Preprocessor & Library Defaults
可以跨瀏覽器的解決一些問題

---

我們把 CSS Reset 下面的這個 Prefixing
改成 Autoprefixer
這讓我們可以跨瀏覽器的解決
一些 CSS 的問題，
因為瀏覽器不同，不用分別的做設定
把 firefox safari 還有 chrome 等等

---
### Emmet

---

再來第三個 Emmet
把它勾起來 active
這讓我們可以用一些縮寫的語法
快速的產生很長的程式碼

---

## 第四個 Editor Options

Editor Options


---

這邊我們可以使用 Autocomplete
把它勾起來
那當瀏覽器 CodePen 知道
你在寫什麼的時候
它就會建議一些
很常用 但是很長的命令給你
這邊可以很方便讓我們不用記那麼多東西
還有一些其他的設定
包括了字體 你可以改字體
更改大小
那以及程式在編寫的時候
你的顏色設定都可以做更動


---

更新一下自己的 Profile
可以更新自己的帳戶名稱
然後自己的地點 寫一些 about
讓大家認識你
因為 CodePen 是一個公開的平台
你的帳戶就等於你的作品集

---


---
加上<br>後

---
## 標題<h1>

<h1>
....
</h1>

Head line 1 最大的標題
但是就像螢光筆一樣
你要告訴它結束在哪裡
所以 ＜/h1 ＞

---

---
tags: 互動程式設計,2-2,CodePen，學生版,動畫互動網頁特效入門（JS/CANVAS）
---

# 2-2 - html中結構與元素_學生版

---

[參考網站w3big](http://www.w3big.com/zh-TW/)

---

## 在HTML，CSS註解

**Ctrl+斜線**就可以了
這樣子就會是註解
<!-- -->

### HTML的註解
使用<!--與 -->將要註解的文字包起來。
例如:
<!--我是註解 -->

---

### 多行CSS註解的寫法
多行註解是用/* 和 */ 將註解的文字包起來，可以一次將多行的CSS註解掉。

一樣可以使用**ctrl+斜線**即可產出

---

單行CSS註解的寫法(此方式必須在PostCSS內才可以使用)
使用的是兩條斜線//，在//之後的文字皆為註解，不可換行


---

### 多重選擇
ctrl加上游標選定

### 如果想要選相同的字串

使用ctrl+d

在 sublime 裡面常用的快速鍵
在Mac上使用 command d
Windows 是 ctrl d

---
#### 顯反白選定字串，按下ctrl+d，就可以自動選擇想同字串

---

alt+左鍵==>會移到第一個字

alt+右鍵==>會移到最後一個字

---
### 多數選項(ctrl與滑鼠)


可以打字同時一起顯示

---

利用wiki的咖啡豆
製作一個簡易網頁

[wiki的咖啡豆](https://zh.wikipedia.org/wiki/%E5%92%96%E5%95%A1%E8%B1%86#%E7%B5%84%E6%88%90)

---

文字內容

動態互動網頁特效入門-html中結構與元素
咖啡豆

更多資訊(wiki)
咖啡豆是咖啡屬植物的種子，咖啡屬植物的果實大小類似櫻桃，咖啡豆即為其中的核果。
將咖啡豆烘焙加工後再磨碎成咖啡粉，即可烹製咖啡。

咖啡兩大主要經濟品種
阿拉比卡種（75-80％)
羅布斯塔種（20％）
組成
外果皮 (介紹)

內果皮 (介紹)
銀膜
果肉和種子

---

### 項目

操作ol (order list)與ul (unordered list)

內部要有li (list item)

<ol>
<li></li>
<li></li>
<li></li>
</ol>

---

### 顯示圖片
img

---
### 超連結
a

---


## 最後HTML碼

<h5>動態互動網頁特效入門-html中結構與元素</h5>
<h1>咖啡豆</h1>
<img src="https://img.ltn.com.tw/Upload/food/page/2018/06/28/180628-7760-0-jYh8n.jpg" width="200px">
<hr>
<a href="https://zh.wikipedia.org/wiki/%E5%92%96%E5%95%A1%E8%B1%86" trgert="_blank">更多資訊(wiki)</a><vr>
<hr>
咖啡豆是咖啡屬植物的種子，咖啡屬植物的果實大小類似櫻桃，咖啡豆即為其中的核果。
將咖啡豆烘焙加工後再磨碎成<b>咖啡粉</b>，即可烹製咖啡。

<h2><p>咖啡兩大主要經濟品種</p></h2>
<ol>
<li>阿拉比卡種（75-80％)</li>
<li>羅布斯塔種（20％）</li>
</ol>
<h2><p>組成</p></h2>
<ol>
<li>外果皮 <a>(介紹)</a></li>
<li>內果皮 (介紹)</li>
<li>銀膜</li>
<li>果肉和種子</li>

---


---