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