---
tags: 金魚都能懂的網頁設計入門, web, note, html, css
---
金魚都能懂 網頁設計入門
===
Amos 的金魚都能懂系列，
自己整理的一些筆記，希望學習的人一定要完整的看完 Amos 的影片

[Amos Youtube 播放清單](https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre)
[Amos 鐵人賽發文](https://ithelp.ithome.com.tw/users/20112550/ironman/2072)

## 第二天 - 網頁入門第一步 [:clapper:](https://youtu.be/ZavL9y4Adrk)

### HTML
>Hyper Text Markup Language 超文本標記語言
>
### 推薦網站
- [W3School](https://www.w3schools.com)
- [W3C](https://www.w3.org)
- [MDN](https://developer.mozilla.org/en-US/)

---

## 第三天 - 用甚麼工具寫網頁? [:clapper:](https://youtu.be/0XhNnLOJO_0)

### 工具介紹
- Dreamweaver
- Brackets
- Atom
- Sublime
- 免安裝版本：程式有問題方便重灌
:::spoiler 安裝套件
> Tools > Command Palette > 輸入 Install Package Control 以及 Package Control: Install Package
- emmet
:::
- Visual Studio Code
- 更新速度快
- Base on 瀏覽器
- 免費
- 社群活躍
- 外掛多
:::spoiler 安裝套件
- Live Server
- VS Live Share
:::
- Codepen

**emmet**

輸入 tag 名稱後，按 tab 鍵可自動完成前後 tag 輸入
假文：輸入 lorem 後按 tab 鍵

---

## 第四天 - 再談 HTML [:clapper:](https://youtu.be/88qmvi4snuo)

### Html 標籤
- 主標題：h1
- 副標題：h2
- 小標題：h3
:::info
h4 - h6 因爲等級太低，不常用到，還是可以使用
:::
- 內文：p
- 粗體：strong
- 斜體：em
:::info
粗體斜體以前會分別以 b 及 i 表示，但只是描述視覺，strong 以及 em 則是描述強調這件事情，在搜尋引擎中，語意較為恰當
:::
- 清單：ul > li
- 步驟：ol > li
- 導覽列：nav
- 連結：a
:::spoiler {state="open"}屬性
- href：指定這個連結要去的網址
:::
- 圖片：img（沒有 closing tag）
:::spoiler {state="open"}屬性
- src：圖片網址
- alt：圖片顯示不出來時的替代文字
:::
- Html5 新增圖片標籤：figure
- img
- figcaption：與圖片有關描述
- 表格 : table
- 表格橫列：tr
- 表格內資料：td

<table>
 <tr>
  <td>data</td> 
  <td>data</td> 
  <td>data</td> 
 </tr>
 <tr>
  <td>data</td> 
  <td>data</td> 
  <td>data</td>
 </tr>
</table>

#### html 中註解

<!-- 這些字不會顯示在網頁上面 -->

#### 路徑

- 絕對路徑：絕對路徑指的是這個檔案在本機端或是網路上的絕對位置
- 相對路徑：相對路徑指的是相對於這個檔案的位置

---

## 第五天 - 網頁裝潢師 CSS [:clapper:](https://youtu.be/PN6pV_ZLHqc)
### CSS
> Cascading Style Sheet 階層式樣式表
>
- inline-style：比較少使用，維護性、彈性都不方便
- style 標籤：較方便、維護性較高，大部分寫在 head 中
### 寫法：

選取器（selector）{
  屬性（property）: 屬性的值（value）;
}

### 選擇 class 寫法

 .special{
   color: #f00;
  }

---

## 第六天 - CSS 撰寫位置 [:clapper:](https://youtu.be/z3A_3LmgC6Q)

### CSS 撰寫位置
寫在 head 中，在 title 後方

<title></title>
<link href="style.css", rel="stylesheet">
</head>

---

## 第七天 - 怎麼學 CSS [:clapper:](https://youtu.be/h7wJ2YZarFc)

### 工具介紹
- CSS 大全
（買得到第四版）
- [XMind](https://www.xmind.net)
- Enter鍵：新增主題
- Tab鍵：新增子主題
- 插入備註：添加長文字筆記
- [MDN](https://developer.mozilla.org/en-US/)

最喜歡的一句話

不要把別人的努力，講得好像是他天資聰穎一樣

---

## 第八天 - 區塊尺寸介紹 [:clapper:](https://youtu.be/MV9_P6klL-Q)

### 佔據空間的計算
> 預設情況下，一個物件在畫面上所佔據的空間，包含 margin（外距）、width（寬度）、 padding（內距）以及 border（邊框）
>
### 可見尺寸的計算
>包含 width、 padding 以及 border
>

---

## 第九天 - Float 浮動 [:clapper:](https://youtu.be/-AO1IdBTY5c)

### Float 使用時機
- 舊有系統的維護可能會使用到
- 文饒圖
- 多欄版面編排
### 假圖服務
- [Fake image please](https://fakeimg.pl)
- [Lorem Picsum](https://picsum.photos)
### Float
- 只有 float: left 跟 float: right
- 子層浮動時，父層會抓不到浮動的子層物件的高度
- 浮動多搭配clear來讓父層抓到子層高度
- 常見使用 clear: both 的 class 名稱是 clearfix，父層等於被這個物件撐開，會跑到浮動物件的後方

**margin/ padding**

margin: 上下左右
margin: 上下 左右
margin: 上 左右 下
margin: 上 右 下 左

---

## 第十天 - 網頁兩大主角 [:clapper:](https://youtu.be/TtvQsVjt9t8)

### inline
>會跟大家排在一起
>不能設定寬跟高
### block
>不管內容多寡，都會佔掉一整列的空間
>可以設定寬高
### inline-block
>繼承 inline 可以跟別人排在一起，block 可以調整寬高的特性
>
#### 補充
製作 menu 時，a 標籤彼此間會有一個空白，4-5 不等px，此時透過設定 a 的外層 font-size 為 0，來消除這個空白，再在 a 標籤中補上需使用的 font-size

[codepen 練習](https://codepen.io/edenhsia/pen/GRRGEyr)

---

## 第十一天 - 換個新盒子 [:clapper:](https://youtu.be/O8EOgg-hhvI)

### box-sizing
>控制盒模型的計算方式
>簡單來說，控制寬度值要指定給誰
>
- border-box：把寬度值設定給邊框到邊框之間
- content-box：把寬度值指定給內容物

---

## 第十二天 - CSS Reset [:clapper:](https://youtu.be/WtjXBIyxhw8)
### 為什麼需要 CSS Reset
>各家瀏覽器中，有自己定義的 CSS 樣式，網頁的外觀基本上會倚賴內建的樣式，為避免不清楚各家設定的樣式為何，所以一般設計前會進行 Reset
>
:::info
大部分會先建構出一個 css 的檔案，要使用時再 link 過去
:::
### 網站
- [CSS Tools: Reset CSS](https://meyerweb.com/eric/tools/css/reset/)
- [Normalize.css](https://necolas.github.io/normalize.css/)

---

## 第十三天 - 排版的聖（ㄉㄨˊ）品 [:clapper:](https://youtu.be/fqSHx7pRqLk)
### Flex
- 在父層設定 display: flex，子層會變為 flex item，有點像是 block，但是會橫排，而且中間不會有任何空白字元的問題
- 預設不折行，會自動調整內容寬度（等寬等高）
- 要折行，設定 flex-wrap: wrap

[Amos Flex 教學影片](https://www.youtube.com/watch?v=_nCBQ6AIzDU&feature=youtu.be)

---

## 第十四天 - Fixed 定位 [:clapper:](https://youtu.be/6jwl-XEpXLk)
### 定位
>物件在畫面中，要依據誰來做對齊
>或者說，要依據誰，來做位置的排列
>
### position: fixed
- 設定 position: fixed，物件會像是被獨立抽出一層，蓋在畫面上，但會停留在原本資料的位置
- 依據視窗做定位，永遠固定在視窗範圍內

[codepen 練習](https://codepen.io/edenhsia/pen/ZEbwwwd)

---

## 第十五天 - Relative 定位 [:clapper:](https://youtu.be/Rukgrh1HlZg)
### position: relative
- 相對自己在資料中的位置去做偏移
- 區塊佔據的空間不會改變
- 沒有設定訂位時，top、bottom、left、right 是沒有作用的
- 具有設定定位的物件，會蓋在沒有定位設定的物件上
- 當物件都有設定定位時，原始碼後方物件會蓋在前方上面
- 想要改變蓋住順序，使用 z-index（預設 0）

---

## 第十六天 - Absolute 定位 [:clapper:](https://youtu.be/JOdZdHnuGmM)
### position: absolute
- 跟 fixed 一樣，物件會像是被獨立抽出一層，蓋在畫面上，但會停留在原本資料的位置
- 會向父層找有定位 fixed、relative 或 absolute 的物件，定在他們身上，不會再往上找

[codepen 練習](https://codepen.io/edenhsia/pen/jObddLK?editors=1100)

---

## 第十七天 - 排個稀飯版 [:clapper:](https://youtu.be/bxnZArACzuU)

[codepen 練習](https://codepen.io/edenhsia/pen/OJyGyyz)