Try   HackMD

金魚都能懂 網頁設計入門

Amos 的金魚都能懂系列，
自己整理的一些筆記，希望學習的人一定要完整的看完 Amos 的影片

Amos Youtube 播放清單
Amos 鐵人賽發文

第二天 - 網頁入門第一步
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

HTML

Hyper Text Markup Language 超文本標記語言

推薦網站

第三天 - 用甚麼工具寫網頁?
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

工具介紹

  • Dreamweaver
  • Brackets
  • Atom
  • Sublime
    • 免安裝版本：程式有問題方便重灌
      安裝套件

      Tools > Command Palette > 輸入 Install Package Control 以及 Package Control: Install Package

      • emmet
  • Visual Studio Code
    • 更新速度快
    • Base on 瀏覽器
    • 免費
    • 社群活躍
    • 外掛多
      安裝套件
      • Live Server
      • VS Live Share
  • Codepen

emmet

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

第四天 - 再談 HTML
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Html 標籤

  • 主標題：h1
  • 副標題：h2
  • 小標題：h3

h4 - h6 因爲等級太低，不常用到，還是可以使用

  • 內文：p
  • 粗體：strong
  • 斜體：em

粗體斜體以前會分別以 b 及 i 表示，但只是描述視覺，strong 以及 em 則是描述強調這件事情，在搜尋引擎中，語意較為恰當

  • 清單：ul > li
  • 步驟：ol > li
  • 導覽列：nav
  • 連結：a
    屬性
    • href：指定這個連結要去的網址
  • 圖片：img（沒有 closing tag）
    屬性
    • 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
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

CSS

Cascading Style Sheet 階層式樣式表

  • inline-style：比較少使用，維護性、彈性都不方便
  • style 標籤：較方便、維護性較高，大部分寫在 head 中

寫法：

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

選擇 class 寫法

 .special{
   color: #f00;
  }

第六天 - CSS 撰寫位置
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

CSS 撰寫位置

寫在 head 中，在 title 後方

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

第七天 - 怎麼學 CSS
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

工具介紹

  • CSS 大全
    （買得到第四版）
  • XMind
    • Enter鍵：新增主題
    • Tab鍵：新增子主題
    • 插入備註：添加長文字筆記
  • MDN

最喜歡的一句話

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

第八天 - 區塊尺寸介紹
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

佔據空間的計算

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

可見尺寸的計算

包含 width、 padding 以及 border

第九天 - Float 浮動
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Float 使用時機

  • 舊有系統的維護可能會使用到
  • 文饒圖
  • 多欄版面編排

假圖服務

Float

  • 只有 float: left 跟 float: right
  • 子層浮動時，父層會抓不到浮動的子層物件的高度
  • 浮動多搭配clear來讓父層抓到子層高度
  • 常見使用 clear: both 的 class 名稱是 clearfix，父層等於被這個物件撐開，會跑到浮動物件的後方

margin/ padding

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

第十天 - 網頁兩大主角
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

inline

會跟大家排在一起
不能設定寬跟高

block

不管內容多寡，都會佔掉一整列的空間
可以設定寬高

inline-block

繼承 inline 可以跟別人排在一起，block 可以調整寬高的特性

補充

製作 menu 時，a 標籤彼此間會有一個空白，4-5 不等px，此時透過設定 a 的外層 font-size 為 0，來消除這個空白，再在 a 標籤中補上需使用的 font-size

codepen 練習

第十一天 - 換個新盒子
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

box-sizing

控制盒模型的計算方式
簡單來說，控制寬度值要指定給誰

  • border-box：把寬度值設定給邊框到邊框之間
  • content-box：把寬度值指定給內容物

第十二天 - CSS Reset
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

為什麼需要 CSS Reset

各家瀏覽器中，有自己定義的 CSS 樣式，網頁的外觀基本上會倚賴內建的樣式，為避免不清楚各家設定的樣式為何，所以一般設計前會進行 Reset

大部分會先建構出一個 css 的檔案，要使用時再 link 過去

網站

第十三天 - 排版的聖（ㄉㄨˊ）品
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Flex

  • 在父層設定 display: flex，子層會變為 flex item，有點像是 block，但是會橫排，而且中間不會有任何空白字元的問題
  • 預設不折行，會自動調整內容寬度（等寬等高）
  • 要折行，設定 flex-wrap: wrap

Amos Flex 教學影片

第十四天 - Fixed 定位
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

定位

物件在畫面中，要依據誰來做對齊
或者說，要依據誰，來做位置的排列

position: fixed

  • 設定 position: fixed，物件會像是被獨立抽出一層，蓋在畫面上，但會停留在原本資料的位置
  • 依據視窗做定位，永遠固定在視窗範圍內

codepen 練習

第十五天 - Relative 定位
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

position: relative

  • 相對自己在資料中的位置去做偏移
  • 區塊佔據的空間不會改變
  • 沒有設定訂位時，top、bottom、left、right 是沒有作用的
  • 具有設定定位的物件，會蓋在沒有定位設定的物件上
  • 當物件都有設定定位時，原始碼後方物件會蓋在前方上面
  • 想要改變蓋住順序，使用 z-index（預設 0）

第十六天 - Absolute 定位
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

position: absolute

  • 跟 fixed 一樣，物件會像是被獨立抽出一層，蓋在畫面上，但會停留在原本資料的位置
  • 會向父層找有定位 fixed、relative 或 absolute 的物件，定在他們身上，不會再往上找

codepen 練習

第十七天 - 排個稀飯版
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

codepen 練習

Last changed by 
 
Edenhsia
0
1074
Published on HackMD