街街街街街街街街

Size: px

Start display at page:

Download "街街街街街街街街"

炜甄
5 years ago
Views:

1 1 響應式設計 (Responsive Web Design) 本章大綱 1.1 本章目的 1.2 什麼是響應式網頁設計 (Responsive Web Design) 1.3 什麼是 Bootstrap 1.4 網頁格系統 (Grid system) 1.5 針對不同 Device 的網頁設計

1.1 本章目的隨著行動裝置普及, 使用手機或平板上網的比率在 2016 年開始超越使用傳統桌機或筆電 ( 圖一 ) 所以用手機查看一些舊網站時, 由於網站是以傳統桌機流覽設計的, 所以經常只能顯示部份的內容較早前的解決方案是另設一個針對手機檢視的網站如蘋果日報的網站 (http://wwwpledaily.com.tw), 行動版的蘋果日報網站是 (http://m.appledaily.

2 1.1 本章目的隨著行動裝置普及, 使用手機或平板上網的比率在 2016 年開始超越使用傳統桌機或筆電 ( 圖一 ) 所以用手機查看一些舊網站時, 由於網站是以傳統桌機流覽設計的, 所以經常只能顯示部份的內容較早前的解決方案是另設一個針對手機檢視的網站如蘋果日報的網站 ( 行動版的蘋果日報網站是 ( 後來, 隨著技術的進步, 業界大都覺得維護二個版本的網站是太耗成本的作法因此, 如何讓同一個網站在不同的裝置 ( 如桌機筆電平板手機 ) 都可以流覽變成主流的思惟這就是響應式網頁設計 (Responsive web design, 縮寫為 RWD), 或稱自適應網頁設計回應式網頁設計對應式網頁設計響應式網頁設計使網站在不同的裝置 ( 從桌面電腦顯示器到行動電話或其他行動產品裝置 ) 上瀏覽時對應不同解析度皆有適合的呈現, 減少使用者進行縮放平移和捲動等操作行為此概念於 2010 年 5 月由國外著名網頁設計師 Ethan Marcotte 所提出這幾年, 幾乎所有新的網站都會導入響應式網頁設計圖一 : 全世界用桌機及行動裝置上網的比率資料來源 :

3 1.4 網頁格系統 (Grid system) 什麼是響應式網頁設計 (Responsive Web Design) 響應式網頁設計 (Responsive Web Design) 被公認為是目前網頁設計開發技術的趨勢, 網站使用 CSS3, 以百分比的方式以及彈性的畫面設計, 在不同解析度下改變網頁頁面的佈局排版, 讓不同的設備都可以正常瀏覽同一網站, 提供最佳的視覺體驗, 是個因移動平台的用戶大量增加而想出的一個對應方法 ( 圖二 ) 圖二 : 使用不同裝置流覽相同 RWD 網站 1.3 什麼是 Bootstrap Bootstrap 是一組用於網站和網路應用程式開發的前端響應式設計框架, 包括 HTML CSS 及 JavaScript 的框架, 提供字體排印表單按鈕導航及其他各種元件及 Javascript 擴充套件, 旨在使動態網頁和 Web 應用的開發更加容易所謂前端, 指的是展現給終端使用者的介面與之對應的後端是在伺服器上面執行的代碼

4 Bootstrap 與最新版的 Google Chrome Firefox Internet Explorer Opera 和 Safari 瀏覽器相容, 儘管有些瀏覽器並不是支援所有作業系統 Bootstrap 支援回應式網頁設計 (RWD) 的整體設計頁面布局可以根據顯示網頁的裝置 ( 桌面平板電腦手機 ) 來進行動態調整 Bootstrap 是開源軟體, 可以從 GitHub 上面找到開發者被鼓勵參與專案, 並且對專案做出自己的貢獻 Bootstrap CSS Bootstrap 對一系列 HTML 元件的基本樣式進行了定義, 並且為文字表格和表單元素設計了一套獨特的現代化的樣式例如 Bootstrap 定義了 HTML 的表格標箋 <table> 對應的 CSS 樣式 (.Table), 只要在 HTML 檔案中宣告使用 Bootstrap CSS, 這樣做出來的表格, 就會有不錯的外觀及響應式設計表一 :Bootstrap CSS 表格標箋範例  <link rel="stylesheet" href=" > <table class="table">... </table> <table class="table table-striped">... </table> <table class="table table-bordered">... </table> <table class="table table-hover">... </table>

5 1.4 網頁格系統 (Grid system) 5 條列式表格行 (Striped rows) 在表格 table 樣式後面加上 table-striped 後綴, 就可以呈現條列式圖三 : 條列式表格行 (Striped rows) 表格外框 (Bordered table) 在表格 table 樣式後面加上 table-bordered 後綴, 就可以呈現表格外框圖四 : 表格外框 (Bordered table) 浮標表格列 (Hover rows) 在表格 table 樣式後面加上 table-hover 後綴, 就可以呈現條列式表格圖五 : 浮標表格列 (Hover rows) 反白的那列是滑鼠滑過的所在 Bootstrap 元件除了基本 HTML 元素,Bootstrap 還包括了其他常用的介面元素, 例如帶有高階功能的按鈕 ( 例如按鈕組合帶有下拉式選單選項的按鈕導航欄水平和垂直標籤組導航分頁等等 ) 標籤高階排版

6 縮圖警告資訊進度條等這些元件都使用 CSS 的類實現在頁面中需要將其對應到特定的 HTML 元素上面 Glyphicons 小圖示 Bootstrap 內建一些小圖示 : 圖六 :Bootstrap 內建小圖示在按鍵可以加上 glyphicon 樣式如下, 就會出現靠左及星號的小圖示表二 :Bootstrap 內建一些小圖示範例 <button type="button" class="btn btn-default" aria-label="left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button>

7 1.4 網頁格系統 (Grid system) 7 圖七 :Bootstrap 內建小圖示按鍵 Dropdown( 下拉式選單 ) 在 div 標箋後加上 dropdown 樣式, 就可以呈現下拉式選單 : 表三 :Bootstrap 下拉式選單範例 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownmenu1" data-toggle="dropdown" aria-haspopup="true" ariaexpanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownmenu1"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">separated link</a></li> </ul> </div>

圖八 :Bootstrap 下拉式選單 JavaScript 元件通過 jquery,bootstrap 加入了一些 JavaScript 元件它們提供了例如對話方塊工具提示輪播等功能此外還增強了一些使用者介面元素的功能, 例如輸入框的自動完成 Bootstrap 2.

8 圖八 :Bootstrap 下拉式選單 JavaScript 元件通過 jquery,bootstrap 加入了一些 JavaScript 元件它們提供了例如對話方塊工具提示輪播等功能此外還增強了一些使用者介面元素的功能, 例如輸入框的自動完成 Bootstrap 2.0 支援以下 JavaScript 外掛模組 :Modal( 模態對話方塊 ) Scrollspy( 捲動監聽 ) Tab( 分頁 ) Tooltip( 工具提示 ) Popover( 浮動提示 ) Alert( 警告 ) Button( 按鈕 ) Collapse ( 摺疊 ) Carousel ( 輪播 ) Typeahead ( 輸入提示 ) Affix( 附加導航 ) 圖九 : 亞大服學組網站的 Carousel( 輪播 )

9 1.4 網頁格系統 (Grid system) 網頁格系統 (Grid system) 響應式設計是同一個網頁可以根據查詢顯示的頁面大小來決定顯示的畫面格式 Bootstrap 要達到這個目的, 有兩個步驟 : 第一個步驟是透過 jquery 的函數查詢網頁畫面的大小 Queries 的分段點 : Mobile xs ( < 768px ) Tablet sm ( 768~991px ) Desktop md ( 992~1200px ) Large Desktop - lg ( >= 1200px ) 第二個步驟是將網頁根據網頁格系統 (Grid System) 來決定呈現方式網頁格系統 (Grid System) 是經由 Row( 列 ) 和 Column( 行 ) 來建立頁面的架構的, 然後再將內容裝在這些由 Row( 列 ) 和 Column( 行 ) 組成的框框裡面簡述規則如下 : class 的結構依序為 :.container( 固定寬度 ) 或.containerfluid( 滿版, 看範例 ) ->.row -> Column.container 或.container-fluid 讓版面有適當的對齊方式(alignment) 和間格 (padding) 使用水平方向的.row 來群組 Column 內容放在 Column 之內, 且 Column 一定緊接在.row 之下, 是為 Immediate Children 使用 class.row 或.col-xs-4 來建立頁面的架構 Column 為最小單位的方格, 且有間格將彼此格開, 並由.row 使用負的 margin 值校正因 Column 而多出來的左右 padding 指定 Column 的格數 ( 最多到 12), 例如一列希望有 3 個相等的 Column, 可指定 3 個.col-xs-4 基本上一個 Row 放置 12 個 Column, 若有一個 Row 超過 12 個 Column, 則會斷行放置多出來的 Column

10 使用 Grid Class 會影響到大於 / 等於設定分段點的 Device, 例如 : 使用.col-md-* 不僅會影響到 Desktop, 若沒有設定.col-lg-*, 還會影響到 Large Desktop 圖十二 : 網頁格系統 (Grid system) 針對不同 Device 的網頁設計混合不同的 Grid Class 就可以達到響應式設計每一種 class 單獨控制一種裝置, 例如 :col-xs-* 控制 Mobile,col-sm-6-* 控制 Tablet, col-md-* 控制 Desktop 如下圖

1.4 網頁格系統 (Grid system) 11 圖十三 : 響應式設計在不同畫面大小呈現的效果 1.3.

11 1.4 網頁格系統 (Grid system) 11 圖十三 : 響應式設計在不同畫面大小呈現的效果 Bootstrap 網頁練習練習導入響應式設計的學習履歷, 如圖十所示請由下列網址下載

hl=zh-tw 表四 :Bootstrap RWD 選單範本 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div

12 圖十 : 學習履歷範例, 左邊是電腦呈現畫面, 右邊是手機畫面手機畫面可以由 Chrome 流覽器的 Responsive Web Design Tester 查看圖十一 :Responsive Web Design Tester 表四 :Bootstrap RWD 選單範本 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" datatoggle="collapse" data-target="#navbar" aria-expanded="false" aria-

13 1.4 網頁格系統 (Grid system) 13 controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> 亞大學生學習履歷 </a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a class="scroll" href="#about"> 學習歷程 </a></li> <li><a class="scroll" href="#skills"> 專長技能 </a></li> <li><a class="scroll" href="#contact"> 連絡資訊 </a></li> </ul> </div> </div> </nav> 單元專題參考 0. 單元教學目標 : A. 了解何謂響應式設計 B. 如何使用 Bootstrap 在網頁設計中 i. BS 環境安裝設定 ii. Layout (Grid system) iii. BS 內建資源的使用 ( 導覽列表格 ) 1. 基本概論到 Github 網站下載 RWD 履歷範例, 並利用該網頁所提供的 example, 透過複製與貼上的方式編輯一頁式的 RWD 履歷網頁

14 2. 本單元 Project 簡介 : 模擬 RWD 備審資料 ( 履歷自傳與其它加分證明 ) 3. 操作步驟 ( 要完成上述小專題範例, 請以 Step by Step 操作步驟 ) A. 建議使用 picpick 截取操作畫面, 以畫面來減少大量文字的敘述 B. 修改範例 (index.html) 成為自己的履歷 ( 請找到以下內文 ) (1) <div class="bannerhead"> <h2> 我是朱小弟 </h2> <h3> 亞洲大學 XXX 系 (2017~)</h3> <p> 大家好,2017 遠見雜誌未來十年 10 所最具潛力大學, 亞洲大學入榜所有公私立大學第 7 名, 私立學校第 2 名 </p> <a class="downarrow scroll" href="#about"><span></span></a> </div> (2) <div class="header-section text-center"> <h2><span> </span> 學習歷程 <span> </span></h2> </div> <span><p>2017 年從喬太中學資訊科畢業, 進入亞大資訊工程系就讀希望學習最新的資訊科技...</p></span> 4. 單元習題 (10 題選擇題 ) (1) 響應式網頁設計不包括以下哪一元素 : (a) html (b) javascript (c) css (d) flash (2) 網頁格系統 (Grid system) col-md 是用在多大螢幕寛度 : (a) < 768px (b) 768~991px (c) 992~1200px (d) >= 1200px (3) 網頁格系統 (Grid system) col-xs 是用在多大螢幕寛度 : (a) < 768px (b) 768~991px (c) 992~1200px (d) >= 1200px

15 1.5 針對不同 Device 的網頁設計 15 (4) 網頁格系統 (Grid system) col-sm 是用在多大螢幕寛度 : (a) < 768px (b) 768~991px (c) 992~1200px (d) >= 1200px (5) 網頁格系統 (Grid system) col-lg 是用在多大螢幕寛度 : (a) < 768px (b) 768~991px (c) 992~1200px (d) >= 1200px (6) 在 <div class="col-xs-6 col-sm-4 col-md-2"> 標箋中, 如果是畫面寛度小於 768 的流覽器, 此 <div> 會佔流覽寛度的幾分之幾? (a) 1/2 (b) 1/3 (c) 1/5 (d) 1/6 (7) 在 <div class="col-xs-6 col-sm-4 col-md-2"> 標箋中, 如果是畫面寛度 1024 的流覽器, 此 <div> 會佔流覽寛度的幾分之幾? (a) 1/2 (b) 1/3 (c) 1/5 (d) 1/6 (8) 在 <div class="col-xs-6 col-sm-4 col-md-2"> 標箋中, 如果是畫面寛度 720 的流覽器, 此 <div> 會佔流覽寛度的幾分之幾? (a) 1/2 (b) 1/3 (c) 1/5 (d) 1/6 (9) <div type="button" class="btn btn-default" aria-label="left Align" > 是建立何種網頁元件 : (a) 表格 (table) (b) 圖示 (glyphs) (c) 按鍵 (button) (d) 表單 (form) (10) <span class="glyphicon glyphicon-align-left" ariahidden="true"></span> 是建立何種網頁元件 : (a) 表格 (table) (b) 圖示 (glyphs) (c) 按鍵 (button) (d) 表單 (form) 5. 本單元專題作業參考本校課程查詢網站 ( 選一門課, 設計一個簡單的響應式課程說明網頁

CH15.indd

CH15.indd Chapter 15 Bootstrap 15-1 (RWD) 15-2 Bootstrap 15-3 15-4 15-5 CSS 15-6 15-1 (RWD) (RWD Responsive Web Design) ( ) PC W3C ( ) ( ) ( ) ( ) ( ) ( ) 15-2 15 15-2 Bootstrap Bootstrap Twitter Blueprint Twitter