回應式網頁設計-朝陽科技大學數位教學平台.PDF

回應式網頁設計 回應式網頁設計 第1章 HTML5 、CSS3 、與回應式網頁設計 第1章 HTML5 、CSS3 、與回應式網頁設計 - 網頁設計 * 早期 # 使用者利用桌上或筆記電腦瀏覽網頁 # 網頁寬度設為固定，使所有螢幕呈現相同風格 # 寬螢幕左右會有空白邊界 * 近期 # 使用者利用手機與平板電腦瀏覽網頁 # 針對桌上型電腦所設計的網頁在手機上瀏覽會有許多問題 * 解決方案： # 利用 HTML5 與 CSS3 做回應式網頁設計(Responsive web design) # 網頁依據不同的視域(Viewport)尺寸自行調整結構 - 視域：瀏覽器中可以呈現內容的區域，不包括標題、工具列、頁籤、及其他 - 視域尺寸與螢幕尺寸不同 # 伺服器後端不需要做任何處理 (1) 回應式網頁設計 (1) 回應式網頁設計 - 為何手機重要( 而舊IE 不重要了) → 依據 StatCounter 2013 年 1 月至2014 年 1 月的瀏覽器市佔統計 * 手機瀏覽器從 8.92%成長到 13.16% * IE 瀏覽器從30.71%滑落到22.85% * 早期：IE 呈現有問題？網頁設計師趕快另寫程式滿足IE ！ * 近期：IE 呈現有問題？叫使用者換瀏覽器吧！ - 手機瀏覽傳統網頁的問題 * 需要放大或縮小頁面才能看清楚相關訊息 * 需要滑動頁面才能看到目標訊息(一行文字經常太長) * 按鈕或連結太小難以操作，導致常常點錯 - 解決方案之一：設計手機專用網頁 * 優點： # 可依據不同手機的特性、地點、或連接速度等提供不 同的內容、設計、或互動網頁 # 網頁建置速度快 * 缺點： # 網頁修改不易 # 網頁搜尋引擎最佳化較差 # 需要維護多個網頁，成本及錯誤率均提高 - 較佳解決方案 * 相同的網頁內容，但依據視域的特性做頁面結構的調 1-1 整，例如： # 在小視域中，將較不重要的元素移到主要項目之下 # 或許在更糟的狀況下：乾脆將元素隱藏，變成另一個連結 # 將導覽按鈕大小調整為適合手指點選的尺寸，而非固定尺寸 # 網頁佈局依據可讀性來縮放 # 一段文字的長度彈性調整，不需左右滑動螢幕 - 回應式網頁定義 * Ethan Marcotte 於 2010 年的Responsive Web Design 文章中提出此名詞 * 將以下 3 種技術整合為統一的方法，稱為回應式網頁(Responsive web design) # 彈性網格布局(Flexible grid layout) # 彈性影像(Flexible image) # 媒體及媒體查詢(Media and media queries) * 其他名稱：fluid design, elastic layout, rubber layout, liquid design, adaptive layout, cross-device design, and flexible design * 原始網頁設計概念 ：從適用桌上型電腦的固定網頁寬度開始設計 然後針對手機 螢幕開始縮小頁面並且重新流動(Re-flow)網頁內容 * 回應式網頁設計概念 ：從適用最小視域的網頁開始設計 然後針對較大視域漸進 強化網頁設計及內容 - HTML5 與 CSS3 進一步提昇回應式設計 * HTML5 比HTML4 功能強大許多 # HTML5 尚在發展中 # 瀏覽器支援HTML5 的比較( 因HTML5 尚未成熟，此份資料不應作為瀏覽器品質 的比較) * CSS3 的許多進階功能可以提供更多的彈性 因此大 的背景影像及複雜的 JavaScript 都可以丟掉了 取而代之的是輕量