Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹

8,014 views

Published on

響應式網頁(Responsive Web Design)介紹,
Bootstrap介紹

Published in: Technology
  • You can ask here for a help. They helped me a lot an i`m highly satisfied with quality of work done. I can promise you 100% un-plagiarized text and good experts there. Use with pleasure! ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/369VOVb ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/369VOVb ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

利用HTML5+CSS3打造行動裝置友善網站-響應式網頁技術介紹

  1. 1. 利用HTML5+CSS3打造行動裝置 友善網站-響應式網頁技術介紹 凌網科技 鄭穎駿 jiun.9023510@gmail.com
  2. 2. 大綱 行動化的趨勢 網站行動裝置友善調查 如何使網站行動裝置友善化 響應式網頁(ResponsiveWeb Design) ◦ HTML5+CSS3 ,Viewport, Media Query, Bootstrap 結語 Q&A 1
  3. 3. 課程目標 希望與課者透過此課程能 ◦ 了解行動裝置的流行與多螢幕尺寸為 網站設計帶來的挑戰 ◦ 了解HTML5響應式網頁(RWD)相關技 術與RWD的優缺點 ◦ 實際應用相關技術於適合的專案或產品 中 2
  4. 4. 行動化的趨勢 智慧型手機,平板的普及 3 圖片來源:http://static.businessinsider.com/image/52161ea66bb3f7d61500004f/image.jpg
  5. 5. 行動化的趨勢 行動裝置帶來的便利 4 圖片來源:http://s2.gigacircle.com/media/s2_5413ab02b238b.jpg
  6. 6. 行動化的趨勢 多螢一雲 ◦ 讓多種裝置都可便利存取一樣的雲端服務 5 圖片來源:http://todaymade.com/blog/wp-content/uploads/2013/07/HiRes-890x534.jpg
  7. 7. 網站行動裝置友善調查 Google Chrome裝置模擬器 6
  8. 8. 網站行動裝置友善調查 1. www.google.com.tw PC-HTML5 7
  9. 9. 網站行動裝置友善調查 Smartphone-HTML5 8
  10. 10. 網站行動裝置友善調查 Tablet-HTML5 9
  11. 11. 網站行動裝置友善調查 2. tw.yahoo.com PC-HTML4 10
  12. 12. 網站行動裝置友善調查 自動轉tw.mobi.yahoo.com Smartphone-HTML5 11
  13. 13. 網站行動裝置友善調查 Tablet-HTML4 12
  14. 14. 網站行動裝置友善調查 3. www.usa.gov PC-HTML5 13
  15. 15. 網站行動裝置友善調查 Smartphone-HTML5 14
  16. 16. 網站行動裝置友善調查 Tablet-HTML5 15
  17. 17. 網站行動裝置友善調查 4. www.gov.tw PC-HTML4 16
  18. 18. 網站行動裝置友善調查 切換 mobile.www.gov.tw Smartphone-HTML4 17
  19. 19. 網站行動裝置友善調查 Tablet-HTML4 18
  20. 20. 網站行動裝置友善調查 大部分電腦版網站版面在Tablet上可以正常檢 視與使用 Google等大廠與美國政府網站已開始採用 HTML5技術, 並且版面都已支援對行動裝置友 善化 國內一些大型網站也開始支援對行動裝置友 善化與使用HTML5 國內政府網站大都使用HTML4, 有行動版網頁, 但不一定會依據裝置螢幕大小或類型自動轉 址 19
  21. 21. 如何使網站行動裝置友善化 網站有既有使用HTML4設計的行動版網頁 ◦ 建議透過javascript偵測連線裝置螢幕大小自動提示 轉址行動版網頁, 方便使用者在smartphone上快速 切換到行動版網頁 20
  22. 22. 如何使網站行動裝置友善化 Javascript程式碼參考 21
  23. 23. 如何使網站行動裝置友善化 新開發之網站建議可使用HTML5+CSS3 設計行動版網頁 HTML5是HTML最新的修訂版本,2014 年10月由W3C完成標準制定。目標是 取代1999年所製定的HTML 4.01和 XHTML 1.0標準 Google等大廠網站皆已採用HTML5, HTML5為未來的趨勢 22
  24. 24. 如何使網站行動裝置友善化 行動裝置上各主要瀏覽器HTML5支援情況 23 滿分550分, 資料來源https://html5test.com/results/mobile.html
  25. 25. 如何使網站行動裝置友善化 HTML5支援響應式網頁(Responsive Web Design)使網頁可依據裝置螢幕大小進行 呈現效果最佳化 24 圖片來源:http://www.onbile.com/info/wp-content/uploads/2013/03/responsive-web-design.jpg
  26. 26. 響應式網頁(ResponsiveWeb Design) (What)同一個網頁在不同的解析度下, 會呈現不同的介面達到最好的顯示效果 25
  27. 27. 響應式網頁(RWD) Ethan Marcotte 於2010年在 A List Apart 雜誌的一篇文章中發明了術語 Responsive Web Design .net 雜誌將RWD列為 2012 年頂級網頁 設計趨勢的第二名 (漸進增強是第一名) (Why)各種裝置螢幕大小不一,固定大 小的網頁無法在所有裝置達到最佳呈現 效果 26
  28. 28. 響應式網頁(RWD) (How)如何以HTML5+CSS3進行RWD 1.HTMLViewport meta ◦ 使用中繼檢視區標記控制瀏覽器檢視 區寬度和縮放比例 27
  29. 29. 響應式網頁(RWD) 當網頁沒有指定檢視區時,行動瀏覽器 會以範圍介於 800 到 1024 CSS 像素來 顯示網頁 28 裝置寬度(320) 網頁寬度(955) 附註: 螢幕寬度 ≠ 裝置寬度, 以iPhone5為例,螢幕實際解析度為1136 x 640 像素
  30. 30. 響應式網頁(RWD) 指定viewport為device-width後 網頁檢視區寬度=裝置寬度 29
  31. 31. 響應式網頁(RWD) viewport所有可設置之屬性 30 內容 描述 width [數字]或 device-width 檢視區寬度,單位為像素(px) height [數字]或 device-height 檢視區高度,單位為像素(px) initial-scale 介於0.0到10.0之數字 起始縮放比 maximum-scale 介於0.0到10.0之數字 操作放大上限 minimum-scale 介於0.0到10.0之數字 操作縮小下限 user-scalable 1或0(yes或no) 是否允許使用者操作縮放, 預設yes
  32. 32. 響應式網頁(RWD) 2.CSS Media Query ◦ 可套用到 CSS 樣式的簡易篩選器,透過 Media Query即可輕鬆依據顯示內容的裝置 特性變更樣式(Responsive) 寬度 高度 橫向、直向 解析度 色彩 31
  33. 33. 響應式網頁(RWD) CSS Media Query範例 32 寬度640以下套用 寬度640以上套用 直向套用 橫向套用 寬度500~600套用
  34. 34. 響應式網頁(RWD) CSS Media Query語法 33 屬性 結果 min-width 任何超過查詢中指定寬度的瀏覽器都會套用規則。 max-width 任何未超過查詢中指定寬度的瀏覽器都會套用規則。 min-height 任何超過查詢中指定高度的瀏覽器都會套用規則。 max-height 任何未超過查詢中指定高度的瀏覽器都會套用規則。 orientation=portrait 任何高度大於或等於寬度的瀏覽器都會套用規則。 orientation=landscape 任何寬度大於高度的瀏覽器都會套用規則。 完整屬性參考 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries media_type: | all | handheld | print | projection | screen | tv | …
  35. 35. 響應式網頁(RWD) 使用viewport與Media Query即可達到網頁內 容依裝置類型動態編排的效果 34 圖片來源:http://www.digitalfamily.com/wp/wp-content/uploads/2012/08/Responsive-Design- boxes.jpg
  36. 36. 響應式網頁(RWD) RWD優缺點比較 35 設計各尺寸專屬網站 設計RWD網站 開發成本 中-高 中 N份(HTML+CSS+程式) 1份(HTML+程式)+N份(CSS) 維護成本 高 中-低 各尺寸獨立修改 可統一修改 SEO 弱 強 多網址 單一網址 網站回應速度 快 慢 尺寸專屬HTML 1份HTML 適用複雜網頁 強 弱 尺寸專屬設計 Mobile First 舊瀏覽器支援 強 弱 IE8 hack,IE7以下no
  37. 37. 響應式網頁(RWD) 獨立網站 重效能、規模大 使用RWD 內容簡潔、易維護、富設計感 APP 追求更好的體驗與功能 36 行動版提供為 獨立網站 台灣Yahoo、PChome、博客來、 mobile01、Google 、amazon…等 使用RWD iThome、台灣微軟、華碩、宏碁 、 Mister Donuts、KKBOX…等 APP 台灣Yahoo新聞、中央氣象局…等
  38. 38. 響應式網頁(RWD) Bootstrap - 支援RWD的CSS元件 ◦ 讓非CSS專業的程式設計師也可快速開發RWD網 頁 ◦ 視覺設計師可參考此元件的設計概念或基於此元 件設計RWD網頁 37
  39. 39. 響應式網頁(RWD) Bootstrap ◦ (2014/6)No.1 project on GitHub with over 73,000 stars and more than 27,000 forks ◦ the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web 提供一組標準的HTML與CSS排版框架 供快速開發網頁雛型並支援RWD 38
  40. 40. 響應式網頁(RWD) Bootstrap目標在對常見的網站元素與互 動模式提供簡單與彈性的 HTML、CSS 與 Javascript 基底,以幫助使用者提高 其生產力 39 圖片來源:http://images.payeasy.com.tw/products/6073/2486/2486675.jpg
  41. 41. 響應式網頁(RWD) 40 http://getbootstrap.com/
  42. 42. 響應式網頁(RWD) Grid System(格狀排版系統) Use .container for a responsive container 41
  43. 43. 響應式網頁(RWD) 基本排版範例,row與col ( col-[target device]-[col size] ) 每個row的col size加總需為12,md代表中尺寸螢幕 42 row1 row2 row3 col1 col2 col2 col2 col3 col1 col1
  44. 44. 響應式網頁(RWD) 排版系統target device分四類 ( col-[target device]-[col size] ) ◦ lg (大尺寸螢幕-桌面) ◦ md (中尺寸螢幕-桌面) ◦ sm (小尺寸螢幕-平板) ◦ xs (特小尺寸螢幕-手機) 43
  45. 45. 響應式網頁(RWD) 四類尺寸範圍 ◦ ≧1200 ◦ 1199~992 ◦ 991~768 ◦ ≦767 44 lg md sm xs
  46. 46. 響應式網頁(RWD) xs代表小尺寸螢幕時採用之設定,md代表中尺寸螢 幕時採用之設定 RWD範例(Desktops (≥992px) md設定生效 ) 45
  47. 47. 響應式網頁(RWD) RWD範例 (Phones (<768px) xs設定生效 ) 46
  48. 48. 響應式網頁(RWD) Offsetting columns (偏移) 47
  49. 49. 響應式網頁(RWD) Nesting columns (巢狀) 48
  50. 50. 響應式網頁(RWD) Responsive utilities ◦ 特定尺寸下顯示或隱藏 49 * = block,inline,inline-block
  51. 51. 響應式網頁(RWD) Responsive utilities範例 50
  52. 52. 響應式網頁(RWD) Bootstrap並提供常見的網站元素與互動基底 51 CSS Components JavaScript Typography Glyphicons Transitions Code Dropdowns Modal Tables Button groups Dropdown Forms Button dropdowns Scrollspy Buttons Input groups Tab Images Navs Tooltip Helper classes Navbar Popover Breadcrumbs Alert Pagination Button Labels Collapse Badges Carousel Jumbotron Affix Page header Thumbnails Alerts Progress bars Media object List group Panels Responsive embed Wells
  53. 53. 響應式網頁(RWD) 由bootstrap網站參考各元素用法 52
  54. 54. 響應式網頁(RWD) Bootstrap使用心得 ◦ 非視覺設計人員也可用Bootstrap快速 開發出RWD網頁 ◦ 只用Bootstrap CSS套版畫面偏單調, 仍需視覺設計人員美化 適合雛型開發用 53
  55. 55. 響應式網頁(RWD) Bootstrap在RWD CSS設計方面可參考 的地方 ◦ 分大、中、小、特小四個尺寸 ◦ 每列12欄的排版方式 ◦ 對常見網站元素提供基底樣式 54
  56. 56. 結語 行動裝置的流行與多螢幕尺寸為網站設計帶 來新的挑戰 本課程以行動裝置網站呈現之友善性為出發 點,進而介紹HTML5 RWD相關技術與RWD 技術的優缺點 使用Bootstrap可以快速導入RWD網頁技術 HTML5應為未來趨勢,希望本課程相關知識 對與課者有所助益 55
  57. 57. 結語 目前使用HTML5可能遭遇的問題 ◦ 網頁無障礙標章與檢測問題 HTML5也可達到無障礙,只是目前無障礙標章 條文與檢測工具可能只適用於HTML4內容 ◦ 舊版瀏覽器(IE8)相容問題 基於安全性,舊版瀏覽器應該會逐漸被淘汰 若上兩點為重點考量,則桌面版網站 仍採HTML4,於行動版網站採用HTML5 56
  58. 58. 結語 HTML5與網頁無障礙(Accessibility)技術 ◦ WAI-ARIA(Accessible Rich Internet Applications) W3C制訂之動態網站(使用ajax,javascript)可用性標準 -2104/3/20 W3C Recommendation WAI-ARIA參考資料 ◦ https://developer.mozilla.org/en- US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ ◦ https://blog.othree.net/log/2010/10/10/introduction-to-wai-aria-1/ WAI-ARIA檢測工具 ◦ https://itaccessibility.illinois.edu/web-evaluation-tools 57
  59. 59. Q&A 58

×