基於HTML5與CSS3的Responsive Web(自適應網頁)設計:使用Foundation Framework

Responsive Web Design(中文譯名「自適應網頁設計」或「響應式網頁設計」)是由Ethan Marcotte於2010所發表的網頁技術概念(請參閱A List Apart的Responsive Web Design文章)。"Responsive"代表網頁的版型和內容元素,可適應用戶端的螢幕解析度,自動調整成最佳的呈現方式;操作網頁的方式也不應限於鍵盤和滑鼠,要能適應觸控式操作。

早期的網頁設計,大多先預設一個目標用戶的螢幕解析度(如:1024×768),並據此設計網頁的版型,而頁面的寬度也大多採用像素(px)單位。

固定式版型和可變式版型的單位

但畢竟網頁不是印刷設計品,沒有固定的尺寸,而且上網的設備種類繁多,從智慧型手錶(如:Motorola的MOTOACTV)、遊戲機、手機、平板到智慧型電視…等。為了適應不同螢幕,自適應網頁設計頁面的寬度採用百分比(%)或者字高(em)單位。

em和%都是相對單位,1em大小的字體,就是100%字體大小;多數瀏覽器預設的字體大小都是16px,因此,1em = 16px

有些網站的頁面設計,乾脆分成桌上型版本和行動裝置兩種版本,像英國的BBC新聞台,以及美國的Wired(連線雜誌)

彈性格線(flexible grid)

「自適應網頁設計」由三大元素構成:

  • 彈性格線(flexible grid)
  • 彈性影像(flexible image):影像可隨著瀏覽器視窗尺寸縮放。
  • 採用CSS的媒體查詢(media query)語法:根據不同的裝置,如:電腦顯示器或印表機,套用對應的CSS樣式設定。

編排雜誌、書籍時,設計師經常用欄位格線(column grid)來劃分圖文內容的編排區域。以格線為藍本,網頁圖文元素規律性地沿著格線編排,可以避免版面雜亂無章。

彈性格線代表網頁內容能隨著瀏覽器的顯示空間,自動調適。假設在寬大的桌上型顯示器上,標題橫跨整個水平畫面,內文則以三欄方式呈現;在狹長的手機螢幕上,則以單欄方式呈現每個內文區塊。這就是彈性格線,也有人則它為折疊式格線(folding grid)

彈性格線示意圖

自適應網頁的Foundation框架簡介

所謂的CSS框架(framework),指的是包含一組預先定義的編排形式、字體樣式和重設瀏覽器等規則的CSS檔案,能大幅縮短建置網站原型的時間。

Adobe Dreamweaver CS6網頁編輯軟體,也具備建立自適應網頁的功能,稱為「流變格線(fluid grid)版面」,它採用的是開放原始碼的HTML5 Boilerplate樣板

Dreamweaver軟體的流變格線版面設定畫面

本文介紹的是位於美國加州Campbell,一家名叫"Zurb"的設計公司所製作的Foundation框架。Pixar(皮克斯動畫公司)和National Geographic(國家地理頻道)都有採用此框架製作網頁。

Foundation框架的首頁畫面

根據Zurb的說法,Foundation凝聚了該公司十多年來基於Web應用程式和服務的開發經驗成果。透過此一框架,你的網站將在電腦、平板和智慧型手機上獲得一致的可及性(accessibility)和體驗。

Foundation框架不單只是網頁版型∕樣板,它將常見的網頁元素(如:幻燈片式圖像展示模組、導覽列、表單、按鈕…)劃分成個別的組件和樣式,每個CSS樣式的類別定義都清楚易懂,互動程式採用jQuery程式庫,以及Zurb自行開發的jQuery外掛。無論你要在網頁上設置水平還是垂直導覽列,或者製作分類標籤式版面,都易如反掌。也因此,有些人將Foundation歸類為使用者介面(User Interface, UI)框架

從Foundation專案的Features(特色介紹頁),可得知Foundation的三大特色是Grid(格線系統)Rapid Prototyping(快速原型開發)Mobility(支援行動裝置)

底下是Foundation的預設欄位格線,在62.5em(相當於1000px)顯示寬度內,劃分成12個欄位格線,這些參數我們都可以自行修改:

Foundation的預設欄位格線示意圖

下載Foundation框架和HTML版型

Foundation的下載頁面提供預設的CSS樣式,以及自訂CSS樣式和組件的功能。

自訂Foundation框架的設定畫面

下載頁當中的自訂選項,有一個"Top Bar Breakpoint"(轉換點)設定欄位,它的作用是設定當瀏覽器寬度縮小到多少的時候,頁面頂部的導覽列(Top Bar)元件,就要轉變成符合行動裝置顯示的形式。

例如,在桌上型顯示器上,導覽列的各個選項連結以水平方式排列:

在個人電腦上呈現的水平導覽列

當頁面的寬度縮小到低於"Breakpoint"(轉換點)值時,導覽列就自動變成了下拉式選單的樣式,而且選項按鈕的尺寸也方便觸控操作:

在手機上呈現的水平導覽列

點擊選單之後,呈現出子選單的模樣:

點選導覽列出現的下拉式選單

Foundation框架的核心CSS樣式檔,就叫做"Foundation.css",位於styles資料夾。此外,舊版的Foundation採用名叫"Vanilla"的CSS框架,來修正(hack)不同瀏覽器品牌與版本所產生的顯示差異,新版本則改用Normalize.css

使用Foundation的HTML樣板建立幻燈片展示效果網頁

Foundation專案的HTML樣板網頁,也列舉了十多種版型和範例供使用者預覽和下載。例如,orbithome.html範例網頁展示了「幻燈片」圖像展示外掛模組”Orbit”的使用方法。

直接觀看範例網頁的HTML原始碼,即可知道Foundation有多麼簡單好用,但請注意,Foundation 3.x和4.x版本的某些CSS類別命名不太一樣,因此兩者並不相容。如果你目前採用的是3.x版,請參閱Foundation的升級說明文件,裡面詳述了各項新舊語法的變更。

每一個Foundation版面元素,都是一個div元素。假設我們要在網頁上放置橫跨整個水平顯示空間(亦即,佔滿12欄位格線)的「幻燈片」展示,請先定義一個類別名稱為"row"(橫列)的div元素,代表另起一個新列。

底下是Foundation 3的HTML語法:

Foundation 3的HTML語法示範

幻燈片的自動換頁和互動導覽功能,透過jQuery程式庫完成。Foundation 3需要在網頁加入底下的JavaScript (jQuery)程式碼,代表在id名稱為"silder"的元素,啟用幻燈片功能:

jQuery程式片段

底下是採用Foundation 4建立類似的幻燈片展示區域的HTML語法:

Foundation 4的HTML語法示範

在項目清單元素裡面加入"data-orbit"屬性之後,Orbit組件(foundation.orbit.js)將會自動加入左、右導覽圖示、分頁圓標(bullets)和計時器等元素。4.0.7版之後,更加入了調整計時器速度(毫秒)及顯示∕隱藏分頁圓標設定功能:

調整幻燈片計時器的參數設定

其他詳細解說請參閱Foundation 4的Orbit說明文件

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *