1. 在HTML5的＜html＞中可增加lang=來標註網頁的語系，讓瀏覽器能更正確的解析與編碼。
2. 在台灣的完整的寫法就是 ＜html lang="zh-Hant-TW"＞
3. 其他語言的標示法
• en 英文
• zh-Hans 簡體中文
• zh-Hant 繁體中文
• zh-Hant-TW 臺灣使用的繁體中文

什麼是 meta tag ?｜

是網頁中的一個標籤，主要是用在 head 的區段，告訴訪問者的瀏覽器關於這個網頁的一些資訊，常見的有：
1. charset：定義這個網頁的語言，通常繁體中文的網頁是 big5,簡體是 gb2312,但現在常用 UTF-8。
2. description：對這個網頁的敘述，可以寫一段文字來敘述本頁的一些說明。
3. keywords：關鍵字，與這個網頁相關的關鍵字有哪些。
• ＜meta charset=“utf-8"> 語言編碼
• ＜meta name="viewport" content="width=device-width, initial-scale=1”> 螢幕解析度寬度
• ＜meta name="description" content=“"> 網站描述
• ＜meta name="author" content=“"> 作者

作業範例說明

• 範例下載
• 範例示範

• 請先規劃與設定該網站的選單項目，並加以修改。
• 請將導覽列替換成自己網站的選單標題，並分別對應到不同的section id（#） 。

大圖輪播已經是許多網站的常見功能了，除了在剛進入網站的時候能夠立即吸引使用者的目光以外，還可以搭配炫目的動畫達成一定的互動效果。

Flexslider官網

此套件必須包含flexslider.css、jquery.flexslider.js、jquery.min.js，可以到 Flexslider官網下載資料夾。

---

作業範例說明

• 範例網址
• 廣告大屏幕 (Jumbotron) ＜div class="jumbotron">，一款輕量極的、靈活的元件，可視情況擴張到整個區域以顯示您網站的關鍵行銷資訊。
• 請依尺寸規格，可以自行增加適當的輪播圖片，修改文字描述等。並可試著修改輪播語法。
• 範例輪播圖｜Flexslider語法圖解


---

Carousel｜旋轉木馬

旋轉木馬：用於循環瀏覽元素（圖像或文本幻燈片）的幻燈片組件，例如旋轉木馬。

可參考官方範例替換或修改。

Carousel

Bootstrap 提供了一套響應式、行動裝置優先的網格系統，隨著螢幕（viewport）尺寸的增加，系統會自動分為最多12列。它是一種用於快速創建一致的佈局和有效地使用HTML 和CSS 的方法。

雙欄示意，數字可自行調整，總和為12即可

---

多欄示意，數字可自行調整，總和為12即可

Bootstrap官網

Grid system 網格系統

Grid system 其實是一種平面設計方法與風格，它藉由固定的格子切割版面來設計佈局方法。運用在網頁則是把一定寬度的頁面切割成數欄，並且欄與欄之間留有間隙。grid system 主要是由欄（column）與間隙（ gutter ）所組成，另外為視覺舒適度，不會將元素填滿整個頁面，會在兩旁留白（grid padding），最後所有的欄、間隙與留白的寬度加總起來要等於預計設計頁面的總寬。

---

Bootstrap 代碼從小屏幕設備（比如行動裝置、平板電腦）開始，然後擴展到大屏幕設備（比如筆記型電腦、桌上型電腦）上的組件和網格。優先設計更小的寬度。Grid System是經由Row(列)和Column(行)來建立頁面的架構的，然後再將內容裝在這些由Row(列)和Column(行)組成的框框裡面。簡述規則如下：
1. class的結構依序為：.container(固定寬度) 或 .container-fluid(滿版) -> .row -> Column。「.container」或「.container-fluid」讓版面有適當的對齊方式(alignment)和間格(padding)。
2. 使用水平方向的「.row」來群組Column。
3. 內容放在Column之內，且Column一定緊接在「.row」之下，是為Immediate Children。
4. 使用class「.row」或「.col-xs-4」來建立頁面的架構，也可以使用Less mixins and variables來做設定或調整。
5. Column為最小單位的方格，且有間格將彼此格開，並由「.row」使用負的margin值校正因Column而多出來的左右padding。
6. 指定Column的格數(最多到12)，例如一列希望有3個相等的Column，可指定3個「.col-xs-4」。
7. 基本上一個Row放置12個Column，若有一個Row超過12個Column，則會斷行放置多出來的Column。
8. 使用Grid Class會影響到大於/等於設定分段點的Device，例如：使用「.col-md-*」不僅會影響到Desktop，若沒有設定「.col-lg-*」，還會影響到Large Desktop。

Media Queries的分段點

1. /* 超小設備（手機，小於768px） */
   Mobile – xs ( < 768px )/*
   .col-xs-
2. /* 小型設備（平板電腦，768px 起） */
   Tablet – sm ( 768~991px )
   .col-sm-
3. /* 中型設備（筆記型電腦，992px 起） */
   Desktop – md ( 992~1200px )
   .col-md-
4. /* 大型設備（大台式電腦，1200px 起） */
   Large Desktop - lg ( >= 1200px )
   .col-lg-

960 網頁格線排版系統

參考文章｜ Bootstrap 是什麼？給網頁設計新手的 Bootstrap 4入門教學

參考文章｜ 利用 Bootstrap Grid System 排版的學習筆記

---

1. 在網頁中，選擇網頁主色，按右鍵，選擇『檢查』，在右側CSS中，找出主色檔案、行數、色碼。

---

在標題上選擇主色字體，按右鍵，選擇『檢查』



---

在style.css看到目前主色標示 #48C6CD



---

在輪播圖下方輪播符號，按右鍵，選擇『檢查』



---

在flexslider.css第61行，也出現目前主色 #48C6CD



---

2. style.css及flexslider.css檔案中，按下Ctrl+F 搜尋，貼上網頁主色 #48C6CD。


---

3. 選擇好新網頁的主色彩，可透過色彩網站 Muzli Colors，或Dreamweaver測試選擇。


---

---

4. 以替代的方式，換成新的主色


---

換成新配色示意

FAVICON｜網頁圖示｜介紹

collapse 折疊

圖片自適應語法