金魚都能懂的網頁設計-雜記

筆記 30 天影片教學重點

Photo by Trevor Cleveland on Unsplash

基礎常常最容易被忽略，趁著剛看完 Amos 的鐵人賽 - 金魚都能懂的網頁設計入門 教學影片，寫個重點整理，補充自己忽略掉的小細節。

CSS 可以放在 head 內，外部或是行內，行內主要是給 JavaScript去做控制，而且權限最高，平常撰寫盡量不要寫在行內。

figure 和 figcaption —

html5 用於 <img>上的新標籤

figcaption可以當作是圖片的標題或是敘述，建議放在figure標籤內的第一行或是最後一行，如果有需要，一個figure標籤內圖片可以放多張，figcaption也可以加入標題(h1..h6)和段落(p)標籤做詳細說明。

用 xmind心智圖去建立筆記，更清楚架構

• 先建立子主題再使用滑鼠拖拉來做分類
• 使用 Enter 鍵 建立主題
• 使用 Tab 鍵 建立子主題
• 分類不用吝嗇盡量建立，後面再歸納跟增減
• 不用拼命的一次筆記完所有的項目，持續筆記才是重點
• 問題可以做一個獨立分類
• 看到不認識的 CSS 屬性可以先記錄到心智圖，後面再找時間研究跟修改筆記
• 英文網站看不懂可以用瀏覽器內建的翻譯功能試著翻譯看看，多少有點幫助

區塊尺寸 (box module)計算

整體寬度指的是內容的寬度 width 加上 padding、border 和 margin 的寬度 ，其中 margin 是看不到尺寸，其他三個是可視尺寸。

CSS margin、padding等撰寫位置依順序分別代表了什麼？

舉例來說：
margin : 20px (上下左右)
margin : 0px 20px (上下 左右)
margin : 0px 20px 30px (上 左右 下)
margin : 0px 20px 30px 15px(上 右 下 左)

製作版面時，想先有個簡易的畫面呈現，卻又沒有圖片怎麼辦？

可用假圖產生圖片，尺寸大小或是隨機出圖都可以在網址上設定。
假圖產生網址 1：https://fakeimg.pl/
假圖產生網址 2：https://picsum.photos/
比較推薦這個，sublime 或 vscode 都可以安裝套件直接使用。

用 float 呈現的版塊，下方一定要用 clear 做清除浮動，常用的命名為 clearfix

網頁兩大主角 block, inline 特性分別是什麼？

• block 是有面積的，可以設定寬跟高
• inline 設定寬高無效，可以設定 padding 的左右值，上下值無效，無法被撐開。
• inline-block 同時擁有兩種 display 的特性，可以設定寬高，但也可以與其他元素並排

** 重要小細節 — inline-block 會產生空白字元

當編排版面時，如果使用 inline-block(像是 a 或 li 設定)，標籤之間會有空白字元約 4~5px，清除空白字元的方法如下方說明：

box-sizing 屬性是什麼？

box-sizing 把寬度這個屬性指定給哪一個範圍

box-sizing:content-box;  // 把寬度範圍指定給內容物的空間
box-sizing:border-box;  // 把寬度範圍指定給邊框到邊框之間的空間

所以在 block 元素中只要設定 box-sizing:border-box; 就不用另外再計算padding、border 的寬度造成 width 賦予的值不直覺。
假設 width:300px, padding 就算加了 20px, border 加了4px，寬度依舊是300px。

css reset 與 normalize

不同瀏覽器顯示的畫面與預設的樣式皆不盡相同，為了要讓 css 樣式統一看起來一樣，有兩種做法，一個是將 css 預設樣式全部重置，也就是reset，另一個常用的是 normalize，將一些設定做修正，沒有全部拿掉，可以依專案需求或是自己習慣去選擇使用。
** 補充說明兩者差異之好文：小事之 CSS Reset 與 CSS normalize

排版聖品 flex :

參考 flex直播教學影片

• 屬性中，只要看到 content 就是多個，item 就是單一個，align 就是指次軸 (相對於主軸的另一個軸)
• order 預設值每個 item 都是 0，當其中一個變成 item 變成 1，那個 1 就會跑到最右邊 (其他都是 0)，如果設定是 -1 就會到最左邊 (因為其他都是 0)。
• flex-basis 控制 flex items 的主軸長度(如果主軸是橫的 那就是等同寬度 width，如果主軸是縱向的，那就等於高度 height)，但 flex-basis 權重比width 和 height 大。
• flex-grow 伸展 — 把剩下的空間作分配，預設是 0。
  bs4 裡，在 flex item中設定 flex-basis:0; (預設寬度0)，然後每個個別 item 的 flex-grow:1(假設是要一行三個區塊，寫成 flex:grow:4;也可以，因為 12 等份，每塊均分 4 分) 用伸展的方式給每個內容寬度…用在單列可以，用在多列可能有問題。
• flex-shrink 收縮比，預設是 1，可以用在類似像 選單固定 內容依照螢幕剩餘寬度時，總比值 — 各個子項目寬度*收縮值，並加總這所有子項目計算結果
  ** 補充: flex-shirnk 設為 0，寬度就以 basis & grow 來算了。
• flex-shrink 的計算公式：(很複雜 XD)
  (子項目寬*收縮比/總比值) * 超出值 = 扣除值
• flex 如果搭配 float, float 就 gg 惹。
• align-content 針對多行，align-items 針對一行,align-self 針對單一個。

** 補充網頁色彩概念。

** 從學生問題補充 flex 觀念：

現有兩個物件 logo 和 nav，父層是 flex，所以預設子層是不換列的，也就表示 logo 跟 nav 都會被強迫待在同一列，這時候因為兩個物件的寬度加起來超過父層寬度了，所以 flex-item 的 flex-shrink 屬性會產生作用，讓 logo 跟 nav 都自動縮減寬度至符合父層的寬度。 雖然 flex-item 屬性是屬於 block 的特性，但是我們還是要看一下他跟其他屬性之間的搭配。

** 重要小細節 — img 的 vertical-align要設定，只要不是 baseline就可以 (圖片下方會有白邊)，詳情看這裡。

常用的三種定位：fixed、relative、absolute

fixed：

1. 依據瀏覽器視窗做定位，永遠固定在視窗範圍內
2. top,left,right,left 都設定為 0,margin 設定auto, 會在瀏覽器正中間。
3. 像是 fixed、Absolute、float 還有 flex 底下的 element 都是預設不會自動抓取空間寬的特性，因為這時不知道空間有多寬，所以設定了寬度之後他就會去取得空間寬度並與空間等寬。

relative：
偏移顯示，保留本來的空間，但位置與本來的位置做偏移。
有定位的物件的 z-index 會優先於沒有定位的物件，如果兩個都有定位，原始碼後方的物件會蓋住前方的，z-index 預設都是 0。

absolute：
與 fiexd 相似，都自己獨立一層。
當一個物件設定為絕對定位，會去父層找定位，只有父層有 relative 或是 absolute 或是 fiexd，有定位的設定，上方第一個有定位的就會成為物件絕對定位位置的依據，但如果父層都沒有，預設會是在瀏覽器視窗上(注意，不是body 也不是 html)，但不像 fixed，預設只會定位一次，拉動捲軸會跟著捲軸跑，不會固定在視窗上。

** 補充 — 在選取多個標籤外新增一個標籤包覆的快捷鍵：

• sublime -
  先選取你想包裹的內容 接著使用快速鍵 MAC: control + W， PC: Ctrl + shift + G 後 輸入你要的標籤，接著按下enter就完成了。
• vscode -
  使用 ctrl + shift + p 開啟命令面板之後，輸入 wrap 關鍵字，接著在列表中找到『Wrap with Abbreviation』，使用這個指令就可以做到跟 Sublime 一樣的功能了。

** 補充 -- 麵包屑 常用命名 breadcrumb 也可以命名成 path

** 補充 -- 圖片不放背景也可以占滿寬的寫法

transition 轉場

transition: 屬性 轉換時間 延遲執行動畫的時間 速度;

Animation 動畫

@keyframes 類似 flash 的關鍵影格，自行命名，影格可以設定很多個，css 裡要呼叫這個影格的腳本必須要用 animation: 影格名；

animation:動畫名稱 播放時間 延遲執行的時間 速度 次數 方向 填充模式 播放狀態(要播放還是暫停)

** 補充 -- 完整解析 CSS 動畫 ( CSS Animation )

媒體查詢 media query

@media 以便為不同媒體類型/設備應用不同的樣式

** 補充 -- 用手機查看網頁字級與螢幕解析度

RWD- Responsive web design 響應式網站設計

以手機頁面呈現為優先設計，先在手機頁面中將圖片設定為 100%; 平板或桌機尺寸再用 display: flex 或其他方式做排版。如果先寫桌機版再用複寫的設定到手機版，對手機耗電量大，效能比較不好，所以都建議先從手機尺寸設計版面。

** 設計時盡量讓 css 模組化，不同區塊的架構一樣，有一定的規則也方便修改跟套用樣式

css3 新增了 :checked 的偽元素，搭配 label 標籤的 for 屬性，對應 input 的id，可以不用 js 就可以做到簡易點擊觸發事件。

** 觀念補充 —
如果 label 的 for 屬性沒有寫，checkbox 或是 radio 要點到 input 上才會有反應，如果 for 屬性有對應到 input 的 ID，不管點到 input 還是 label 都會有連動反應。

手機 nav 設計步驟

Step 1：製作漢堡包

老師製作漢堡包選單的寫法：

Step 2：將選單先移出視窗外

e.g.
方法 1：
left: -100%; (已設定絕對定位) ..老師先用這種做法做示範
方法 2：
用 transform 的位移去設定位置
方法 3：
高度 height 先設定為 0，點擊漢堡包之後再將高設定
** 方法 3 一定要加上 overflow:hidden; 不然內元素無法隱藏。

Step 3：搭配 :checked 偽元素去設定

#menu_check : checked ~ header nav { 出現選單 }
// 指漢堡包點擊到之後，後面的nav標籤裡要做什麼

自己完成的 rwd 漢堡包選單練習

** 補充 -- checkbox 的妙用
** 補充 -- css垂直置中的 23 種方法
** 補充 -- 文字直排的寫法 wirting-mode
** 補充 -- box-shadow 的語法
** 補充 -- 參考別人 用 css 製作的漢堡選單
** 補充 — sublime 中文假字套件 — ChineseLoremIpsum
快捷鍵： clorem 再 alt+c (簡體)、ctlorem 再 alt+c (繁體)
vscode 目前只看到有簡體中文的，外掛名稱是 「Chinese Lorem Ipsum」

Bootstrap

官網中的 css 檔案、js 檔案都要複製進 html 裡

container 固定寬度
container-fluid 滿版
row 一個橫排
col 表 column

bootstrap 分五個尺寸，預設是將版面切分 12 個等分(欄)，佔欄數：佔據幾個等分

• 預設 .col-佔欄數
• 手機 橫向 .col-sm-佔欄數 (small)
• 平板 直向 .col-md-佔欄數 (median)
• 平板 橫向 .col-lg-佔欄數 (large)
• 桌機 .col-xl-佔欄數 (extra large)

rwd 圖片滿版的設定 img-fluid
max-width:100%; 意思是 圖片最大不超過自己本身的尺寸

組件入門：( 官網中左邊 components 可以找到很多組件)

• Navbar 導覽列
• Jumbotron 大的 banner
• Breadcrumb 麵包屑
• Listgroup 一些ol ul列表(有的有包含連結)
• Pagination 分頁
• Card 卡片式版面
• Carousel 幻燈片
• Modal e.g. 按鈕(可以改成連結樣式)點下，alert登入的頁面

** 補充 — background 縮寫的說明
background-size:cover可以直接縮寫到background後方，前面要加( / )分開。

background: url( ) no-repeat center center / cover

** 有些常用預設好的 class可以記起來，像是 text-center, justify-content-center…

JQuery

JQuery 就是對 DOM 的操控

老師建議可以從 google 提供的 cnd 抓取 JQuery 的連結，取來的連結建議放在</body>上，比放在 head 裡可以再多省一點點效能。也可以直接將JQuery 連結點開 ctrl+s 另存到本地端使用。

JQuery 起手式

** 補充 - - attribute 和 property 的差異
attribute 指的是HTML的屬性，property 是JavaScript物件中的屬性

JQuery 事件

以 toggle 作範例

JQuery CSS控制

用 toggle 的寫法hide 或 show，可以改成用 css 控制的寫法

JQuery 動畫

像是 slide 滑入滑出 slideDown( ) slideUp( )…
或是 fade 淡入淡出 fadeIn( ) fadeOut()…