RWD網頁設計實務 李欣螢 以誠研發有限公司
大綱 介紹與工具準備 CSS 概念以及應用 RWD 設計流程與開發程序 RWD 樣板製作
介紹與工具準備
介紹與工具準備 什麼是響應式網頁設計 HTML5 與 HTML4 的差異 文件編輯工具
什麼是響應式網頁設計 RWD - 響應式網頁設計(Responsive Web Design) 一種網頁設計方式，讓網頁在電腦與手機上有同樣的 閱讀體驗 電腦與手機的差異？ 設備寬度
不同寬度 1366x768 1024x768 800x600 480x800
HTML5 與 HTML4 的差異 簡化宣告標籤與 <head> 寫法 新增許多元素 分類標籤 表單欄位 表單屬性
HTML5 網頁
HTML4 網頁
簡化標籤 HTML5 HTML4 參考範例 index_html4.html 與 index.html <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html></html> <html xmlns="http://www.w3.org/1999/ xhtml"></html> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="icon" href="images/favicon.png"> <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png"> <link rel="stylesheet" href="stylesheets/main.css"> <link rel="stylesheet" href="stylesheets/main.css" type="text/css"> <script src="javascripts/jquery-2.2.2.min.js"></script> <script type="text/javascript" src="javascripts/jquery-2.2.2.min.js"></script> 參考範例 index_html4.html 與 index.html
新增標籤 HTML5 增加許多新的標籤，能夠更清楚的標示各區 塊及功能 <header>：網站開始區塊 <footer>：網站結束區塊 <nav>：網站結束區塊 <article>：一段完整的文章 <section>：大綱 <aside>：文章附加區域，常用在側邊攔 <figure>：圖-文區塊 來源：http://www.w3schools.com/html/html5_new_elements.asp
header nav footer arcticle aside section
延伸-更靈活的大綱
新增表單欄位 純數字欄位：number 範圍(拉桿)：range 顏色選擇器：color <input type="number" name="sum" min="1" max="10"> 範圍(拉桿)：range <input type="range" name="voice" min="0" max="15"> 顏色選擇器：color <input type="color" name="color"> ie、Safari 不支援 來源：http://www.w3schools.com/html/html_form_input_types.asp 參考範例 new_form_field.html
新增表單欄位 信箱欄位：email <input type="email" name="useremail"> 送出表單時自動驗證格式 手機會跳出 email 專用鍵盤 (含有「@」按鍵) 手機瀏覽器大多不支援自動驗證功能 http://www.wufoo.com/html5/types/1-email.html 參考範例 new_form_field.html
新增表單欄位 網址欄位：url <input type="url" name="link"> 送出表單時自動驗證格式 手機會跳出 url 專用鍵盤 (含有「.com」按鍵) 手機瀏覽器大多不支援自動驗證功能 http://www.wufoo.com/html5/types/1-email.html 參考範例 new_form_field.html
新增表單欄位 電話欄位：tel <input type="tel" name="phone"> 手機會跳出數字鍵盤 建議使用，若不支援瀏覽器會改用 type="text" http://www.wufoo.com/html5/types/2-tel.html 參考範例 new_form_field.html
新增表單欄位 電腦瀏覽 手機瀏覽 時間相關欄位：date、 time、week、 month、 datetime-local <input type="date" name="date"> firefox 不支援 來源：http://www.w3schools.com/html/html_form_input_types.asp 電腦瀏覽 手機瀏覽 參考範例 new_form_field.html
新增表單屬性 placeholder autocomplete list <input type="text" name="inp1" placeholder="請填寫資 料"> 填寫提示 autocomplete <input type="text" name="inp2" autocomplete="on"> 設定要不要做 autocomplete list 提供選單供使用者參考 來源：http://www.w3schools.com/html/html_form_input_types.asp 參考範例 new_form_field.html
附註 需使用手機測試可連至 https://miketaylr.com/pres/html5/forms2.html
編輯工具 記事本 Notepad++、Sublime Text Brackets windows 內建 進階文本編輯器 功能完整 http://brackets.io/ adobe 提供的免費編輯器 專門用來設計網站
基本網站架構 根目錄 index.html stylesheets main.css images logo.png favicon.png (.ico也可以) javascripts main.js jquery-2.2.2.min.js 範例 index.html
index.html
除錯工具 - Chrome
除錯工具 - Firefox
CSS 概念以及應用
CSS概念與應用 選擇器 生效順序(基本) 基本單位 文字樣式 display float 間距與置中 位置 生效順序(進階) 範例練習 層疊樣式表 (Cascading Style Sheets)，為 HTML 添加樣式 (字型、顏色、排版...) 選擇器 生效順序(基本) 基本單位 文字樣式 display float 間距與置中 位置 生效順序(進階) 範例練習 簡介
如何指定樣式 * class id(唯一) 直接使用 html 元素 表示所有元素 *{color:blue;} .style1{color:red;} id(唯一) #searchbar{border:#aaa 1px solid;} 直接使用 html 元素 p{color:gray;} 參考範例 css_sample/css_selector.html
實作 CSS 執行結果 HTML
生效順序 css 檔案內 style 屬性 優先規則：id > class > 元素名稱 同層級，後寫的優先 多層的優先 <p style="color:#333;">內容</p> 優先順序最高 謹慎使用，因為不易於維護 有算法，有興趣可參考 http://andyyou.logdown.com/posts/93784-css-write-rules 參考範例 css_sample/css_selector.html
實作 CSS 執行結果 HTML
生效順序 特殊寫法：!important .nocover{color:red !important;} 設定 !important的 css 不會被覆蓋 慎用，沒寫好結構會變得很亂 真的需要覆蓋時 !important 還是可用 !important 覆蓋 參考範例 css_sample/css_selector.html
實作 CSS 執行結果 HTML
單位 px em rem % 像素，電腦顯示單位 瀏覽器無法調整以px為單位的字體大小 值不固定，以「M」來計算 (一般瀏覽器預設16px，所以可以視預設值為16px) 會依據外層(目前字體大小)來計算大小 rem 與 em 一樣，以「M」來計算 只使用<html>的字體大小來計算 % 百分比 http://jas9.blogspot.com/2011/09/pxemrem.html 有趣實驗，推薦閱讀 http://zellwk.com/blog/media-query-units/ 讓他們調整瀏覽器字體看看 參考範例 css_sample/font_unit.html
實作-尺寸設定 CSS 執行結果 HTML
實作-em 與 rem 差別 HTML 執行結果 HTML 執行結果
實作-整頁縮放 縮放 75% 縮放 125%
實作-調整字體大小縮放 設定為小字體 執行結果 執行結果 設定為大字體
字體大小與樣式 文字大小 font-size 設定字體 font-family 字體粗細(粗體) 瀏覽器預設字體大小為 16px 建議使用 em 與 rem 設定字體 font-family web safe CSS font(網路安全字體) http://www.cssfontstack.com/ 字體粗細(粗體) lighter 、normal 、bold、bolder 100~900 http://www.cssfontstack.com/
如何選擇字體 web safe CSS font 考慮使用對象使用的系統 包含率越高(安全)的寫在越後面 選擇風格類似的字體 網路安全字體 http://www.cssfontstack.com/ 考慮使用對象使用的系統 包含率越高(安全)的寫在越後面 選擇風格類似的字體 http://www.cssfontstack.com/
字體顏色與透明度 顏色 color 顏色名稱：blue、red RGB：rgb(0, 0, 255) RGBA：rgba(0, 0, 255, .5) 十六進制：#0000ff、#00f 顏色選擇器 示範使用顏色選擇器 參考範例 css_sample/color_and _opacity.html
字體顏色與透明度 透明度 opacity 所有元素都可以用這調整透明度，不限定只有字體 HTML 執行結果 示範使用顏色選擇器 參考範例 css_sample/color_and _opacity.html
display 區塊： block 段落： inline inline-block div、p、h1~6、form、header、footer 預設 寬度 100% 高度由內容撐開 段落： inline span、a、strong、b、I 預設 無法設定寬、高 inline-block img 預設 外部 inline：可多個元素在同一行 內部 block：可設定寬、高 重要觀念 http://zh-tw.learnlayout.com/display.html https://developer.mozilla.org/en-US/docs/Web/CSS/display 參考範例 css_sample/display.html
display 表格：table 隱藏元素：none 寬、高都由內容撐開 取消隱藏：設回原本的 display 執行結果 HTML 重要觀念 http://zh-tw.learnlayout.com/display.html https://developer.mozilla.org/en-US/docs/Web/CSS/display 參考範例 css_sample/display.html
float 寬、高由內容撐開 float 無法撐開父容器，需要加 clearfix 不管 display 是什麼都能起作用 重要觀念 http://zh-tw.learnlayout.com/display.html https://developer.mozilla.org/en-US/docs/Web/CSS/display 參考範例 css_sample/display.html
間距 外邊距 margin 單邊個別設定 簡寫，上、右、下、左 簡寫，上下、左右 簡寫，上下左右 margin 垂直相鄰時會重疊 間距 外邊距 margin 單邊個別設定 top、right、bottom、left margin-left: 1rem; 簡寫，上、右、下、左 margin: 1rem 2rem 3rem 4rem; 簡寫，上下、左右 margin: 3rem 2rem; 簡寫，上下左右 margin: 2rem; margin 垂直相鄰時會重疊 外邊距 重疊部分 參考範例 css_sample/display.html
間距 內邊距 padding 單邊、簡寫寫法都與 margin 相同 不會有重疊現象，因為不可能相鄰 padding-left: 1rem; 間距 內邊距 padding 單邊、簡寫寫法都與 margin 相同 padding-left: 1rem; padding: 1rem 2rem 3rem 4rem; padding: 3rem 2rem; padding: 2rem; 不會有重疊現象，因為不可能相鄰 內邊距 參考範例 css_sample/display.html
水平置中 block：在要置中的元素上設定左右外邊距為 auto inline：在要置中元素的外層設定內文置中 margin-left: auto; margin-right: auto; margin: 0 auto; 記得要設寬度，否則看不出效果 inline：在要置中元素的外層設定內文置中 text-align:center; 注意設置後裡面所有 inline 元素都會置中 參考範例 css_sample/typesetting.html
水平置中 HTML 執行結果 HTML 執行結果
垂直置中 響應式網頁高度變化大，不建議使用太多垂直置中的 樣式 block inline、表格 設定行高 line-height 確定高度時可使用 inline、表格 使用 vertical-align:middle; 置中 http://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html http://caniuse.com/#feat=calc 參考範例 css_sample/typesetting.html
隱藏超過部分 overflow 可分 x,y 設定： overflow-x、 overflow-y、 overflow 隱藏：overflow: hidden; 出現卷軸：overflow: scroll; https://developer.mozilla.org/zh-TW/docs/Web/CSS/text-overflow 預設 隱藏 卷軸
隱藏超過部分 text-overflow 必須配合將 overflow 設成隱藏 預設： text-overflow: clip; 變為「...」： text-overflow: ellipsis; https://developer.mozilla.org/zh-TW/docs/Web/CSS/text-overflow
位置 position 預設 相對定位 position: static; 未生效 預設 position: static; top、bottom、left、right、z-index 不會生效 相對定位 position: relative; 可使用 top、bottom、left、right、z-index 左邊起始點由 20px 後開始算 參考範例 css_sample/position.html
位置 position 絕對定位 固定位置 position: absulote; 會使用第一個 relative 的父容器做定位，沒有就使用瀏 覽器窗口定位 固定位置 position: fixed; 使用瀏覽器窗口做定位 參考範例 css_sample/position.html
absulote 絕對定位 40px 40px 40px 40px
fixed 固定位置 40px 40px 40px 40px
進階選擇器 增加限制條件：element.class、.class.class 一次設定多個條件：element1, element2 div.style1{...} 表示選取 class 是 style1 的 div 元素 <div class="style1"></div> .style1.styleplus{...} 表示選取 calss 是 style1 以及 styleplus 的元素 <div class="style1 styleplus"></div> <p class="style1 styleplus"></p> 一次設定多個條件：element1, element2 div, p{...} 表示選取 div 以及 p 元素 <div></div> 跟 <p></p> http://www.w3school.com.cn/cssref/css_selectors.asp 參考範例 css_sample/css_selector.html
進階選擇器 選擇多層內元素：element element 選擇下一層元素：element > element div p{...} 表示所有在 div 裡面的 p 元素 選擇下一層元素：element > element div > p{...} 表示只選 div 下一層的 p 元素 http://www.w3school.com.cn/cssref/css_selectors.asp 參考範例 css_sample/css_selector.html
進階選擇器 選擇緊鄰後方元素(一個)：element + element 選擇後方所有的元素(多個)：element ~ element div + p{...} 表示 div 後方的 p 元素(同一層，一個) li + li{...}：一串 li 中，只有第一個不符合此規則 選擇後方所有的元素(多個)：element ~ element div ~ p{...} 表示 div 後方所有的 p 元素(同一層，多個) http://www.w3school.com.cn/cssref/css_selectors.asp 參考範例 css_sample/css_selector.html
進階選擇器-偽類(Pseudo-classes) CSS 執行結果 <a> :link – 未被點擊過的狀態 :visited – 已被點擊過的狀態 :active – 點擊中的狀態 通用 :hover – 滑鼠停在該元素上 :focus – 焦點 :first-child 選取第一個元素 :last-child 選取最後一個元素 參考範例 css_sample/css_selector.html
進階選擇器-偽元素(Pseudo-element) ::after、::before 搭配 .contnet 可做許多特別樣式 ::selection 調整反白(被選取)狀態 CSS HTML 執行結果 CSS 執行結果 參考範例 css_sample/css_selector.html
css 檔案分區 略分成三大區塊 覆蓋引用的css 自訂樣式(組) 工具類 覆寫額外元件的樣式(若有使用) 選單、書櫃、自訂區塊 覆蓋區 略分成三大區塊 覆蓋引用的css 覆寫額外元件的樣式(若有使用) 自訂樣式(組) 選單、書櫃、自訂區塊 工具類 width100、bdr-gray、bk-red 自訂樣式 自訂工具類 考慮到 css 生效順序(後寫的優先)，注意寫的層次以及順序不可逆 ※參考範例 stylesheets/main_sample.css
css 寫法 自訂樣式組 自訂工具類 主體相同，部分樣式不同 將常用樣式獨立訂為一個 class 儘量一次只設定一個屬性 名字清楚明確 相同風格標題、不同顏色按鈕 自訂工具類 將常用樣式獨立訂為一個 class 顏色、字體、寬度、間距、置中、display.... 儘量一次只設定一個屬性 名字清楚明確 ※參考範例 stylesheets/main_sample.css
樣式撰寫 btn 組 – 定義不同顏色的 btn 簡易 header 圖片做整塊 hover 學會定義基本樣式 使用 float inline-block position before 參考範例 css_sample/sample.html 參考範例 special_sample/img_hover.html
樣式撰寫 定義一組樣式 共用部分拉出成為樣式主體 善用工具類 有彈性的寫法 個別定義 參考範例 special_sample/title_style.html
網站推薦 練習使用選擇器 http://flukeout.github.io/