1. 前置設定html lang / meta tag
1. html lang 語系與字元編碼設定
在HTML5的中可增加lang=來標註網頁的語系，讓瀏覽器能更正確的解析與編碼。
在台灣的完整的寫法就是
en 英文
zh-Hans 簡體中文
zh-Hant 繁體中文
zh-Hant-TW 臺灣使用的繁體中文
2. 什麼是 meta tag ?
是網頁中的一個標籤，主要是用在 head 的區段，告訴訪問者的瀏覽器關於這個網頁的一些資訊，常見的有：
charset：定義這個網頁的語言，通常繁體中文的網頁是 big5,簡體是 gb2312,但現在常用 UTF-8
description：對這個網頁的敘述，可以寫一段文字來敘述本頁的一些說明。
keywords：關鍵字，與這個網頁相關的關鍵字有哪些。
2. 輪播圖Flexslider / Jumbotron
1. Flexslider－－方便好用的圖片輪播、滑動切換套件
大圖輪播已經是許多網站的常見功能了，除了在剛進入網站的時候能夠立即吸引使用者的目光以外，還可以搭配炫目的動畫達成一定的互動效果。
此套件必須包含flexslider.css、jquery.flexslider.js、jquery.min.js，可以到Flexslider官網下載資料夾。
https://woocommerce.com/flexslider/
廣告大屏幕 (Jumbotron)
一款輕量極的、靈活的元件，可視情況擴張到整個區域以顯示您網站的關鍵行銷資訊。
請依尺寸規格，可以自行增加適當的輪播圖片，修改文字描述等。並可試著修改輪播語法。
Bootstrap 提供了一套響應式、行動裝置優先的網格系統，隨著螢幕（viewport）尺寸的增加，系統會自動分為最多12列。它是一種用於快速創建一致的佈局和有效地使用HTML 和CSS 的方法。
Grid system 其實是一種平面設計方法與風格，它藉由固定的格子切割版面來設計佈局方法。
運用在網頁則是把一定寬度的頁面切割成數欄，並且欄與欄之間留有間隙。grid system 主要是由欄（column）與間隙（ gutter ）所組成，另外為視覺舒適度，不會將元素填滿整個頁面，會在兩旁留白（grid padding），最後所有的欄、間隙與留白的寬度加總起來要等於預計設計頁面的總寬。
超小設備（手機，小於768px） */ Mobile – xs ( < 768px )/* .col-xs-
/* 小型設備（平板電腦，768px 起） */ Tablet – sm ( 768~991px ) .col-sm-
/* 中型設備（筆記型電腦，992px 起） */ Desktop – md ( 992~1200px ) .col-md-
/* 大型設備（大台式電腦，1200px 起） */ Large Desktop - lg ( >= 1200px ) .col-lg-
https://960.gs
PHOTOSHOP
新增【網格】參考線方法 https://tips.zoego.tech/archives/422
ILLUSTRATOR
新增【網格】參考線方法 https://tips.zoego.tech/archives/441
網頁設計的標準（HTML & CSS）是由 W3C 協會所制定的，然而，各大瀏覽器為了展現自身的強大，都自行加入一些有的沒有的設定，造成網頁設計師在排版的時候，就得依每個瀏覽器的不同，而多花好多時間來調整改寫 CSS 語法。
「reset CSS」是世界知名的 CSS 大師「Eric A. Meyer」所整理出來的檔案，該檔案主要是針對各瀏覽器最常發生不一致的樣式進行調整，讓網頁在各瀏覽器的呈現上能有同樣的效果。
下載： http://meyerweb.com/eric/tools/css/reset/reset.css
來源： http://meyerweb.com/eric/tools/css/reset/
只要在寫的 CSS 前掛上這一段「Reset CSS」的語法，就可以輕鬆解決各大瀏覽器的差異了！
請依尺寸規格，可以自行增加適當的輪播圖片，修改文字描述等。並可試著修改輪播語法。
3. Grid system 網格系統
1. Grid system 網格系統概述
Bootstrap 提供了一套響應式、行動裝置優先的網格系統，隨著螢幕（viewport）尺寸的增加，系統會自動分為最多12列。它是一種用於快速創建一致的佈局和有效地使用HTML 和CSS 的方法。
Grid system 其實是一種平面設計方法與風格，它藉由固定的格子切割版面來設計佈局方法。
運用在網頁則是把一定寬度的頁面切割成數欄，並且欄與欄之間留有間隙。grid system 主要是由欄（column）與間隙（ gutter ）所組成，另外為視覺舒適度，不會將元素填滿整個頁面，會在兩旁留白（grid padding），最後所有的欄、間隙與留白的寬度加總起來要等於預計設計頁面的總寬。
超小設備（手機，小於768px） */ Mobile – xs ( < 768px )/* .col-xs-
/* 小型設備（平板電腦，768px 起） */ Tablet – sm ( 768~991px ) .col-sm-
/* 中型設備（筆記型電腦，992px 起） */ Desktop – md ( 992~1200px ) .col-md-
/* 大型設備（大台式電腦，1200px 起） */ Large Desktop - lg ( >= 1200px ) .col-lg-
2. 960 網頁格線排版系統
https://960.gs
PHOTOSHOP
新增【網格】參考線方法 https://tips.zoego.tech/archives/422
ILLUSTRATOR
新增【網格】參考線方法 https://tips.zoego.tech/archives/441
4. Reset CSS – 重置歸零 – 網頁排版在各瀏覽器快速一致化
網頁設計的標準（HTML & CSS）是由 W3C 協會所制定的，然而，各大瀏覽器為了展現自身的強大，都自行加入一些有的沒有的設定，造成網頁設計師在排版的時候，就得依每個瀏覽器的不同，而多花好多時間來調整改寫 CSS 語法。
「reset CSS」是世界知名的 CSS 大師「Eric A. Meyer」所整理出來的檔案，該檔案主要是針對各瀏覽器最常發生不一致的樣式進行調整，讓網頁在各瀏覽器的呈現上能有同樣的效果。
下載： http://meyerweb.com/eric/tools/css/reset/reset.css
來源： http://meyerweb.com/eric/tools/css/reset/
只要在寫的 CSS 前掛上這一段「Reset CSS」的語法，就可以輕鬆解決各大瀏覽器的差異了！