Arduino網路遠端遙控家電開關(一)

本文旨在補充《超圖解Arduino互動設計入門》第十六章「網路家電控制」單元,增加另一個網頁控制範例。

下圖是本單元的預期成果,使用者透過點選頁面上的文字,即可控制遠端家電的開關:

在說明Arduino端的網路和控制程式碼之前,先在電腦上撰寫此網頁所需要的HTML碼:

以上的HTML將在瀏覽器呈現如下的結果:

每個項目清單元素都包含一個超連結,用來連結到Arduino的sw程式,並傳遞控制腳位的參數,例如:

設定手機瀏覽器的viewport(視界)參數

iOS和Android裝置的瀏覽器預設會以980和800像素的虛擬顯示寬(viewport,視界)來呈現網頁,假設Android手機螢幕實際是480像素寬,瀏覽器用800像素寬來呈現,網頁將整個被縮小顯示:

為了讓iOS與Android裝置的瀏覽器,以實際的螢幕解析度來呈現網頁,請在網頁的檔頭區加入底下的<meta>標籤設定:

建立網頁的CSS樣式表

HTML的用途是制定網頁的結構和內文,頁面的外觀樣式則是由CSS決定。

為了方便在小螢幕上觀看並點選超連結,我們將使用CSS樣式調整項目清單文字的大小,並加大字行的高度(擴大字行之間的間距),以及其他美化樣式。

在檔頭區插入底下的CSS樣式:

最後呈現的外觀如下:

讀者可按此連結下載本單元的網頁原始碼(ZIP格式壓縮)。

延伸閱讀

基於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說明文件

運用CSS樣式表編排版面(定寬雙欄)

運用CSS編排版面(定寬雙欄)
文∕趙英傑

假若要讓”content”和”navbar”固定水平排列在一起,可以在這兩個區域之外,另設一道圍牆,如下圖中的綠色(”main”)部分:

CSS草圖

按照這張草圖的規劃,”content”和”main”都被包含在”main”區域當中,因此,此範例網頁的<div>標籤結構如下:

為了避免「圍牆」外頭的其他內容,會排列在它的左邊或右邊,可以透過”clear:both“(「清除兩邊」之意)設定, 確保不會有其他內容被編排在「圍牆」的兩側:

這個範例網頁,把content區域設定成向右浮動(float:right),navbar區域向左浮動(float:left),因此「導覽列」將呈現在「內文」區域的左邊。請在此下載本文的原始檔(此壓縮檔包含三篇文章的範例)。

運用CSS樣式表編排版面(浮動雙欄)

運用CSS編排版面(浮動雙欄)
文∕趙英傑

延續上一篇文章,本文將在原有的「房屋」(content區域)旁邊,再蓋一個小車庫(用來放置「導覽列」),並且讓這兩個建築物都向瀏覽器的左邊對齊,如下圖所示:

CSS樣式草圖

請在原有的”content”區域底下,新增一個”navbar”區域

讀者可以先瞧瞧本文的編排效果。在CSS中,控制版面區域靠左或靠右浮動的屬性稱為”float”,請在原有的”content”區域CSS設定中,加入”float:left”敘述:

底下是新增的navbar樣式設定,同樣是設定成向左浮動靠齊:

把兩個版面區域都設定成「向左邊浮動」,只要瀏覽器的顯示寬度空間足夠,這兩個空間就會並排在一起(亦即,content區域往左靠向瀏覽器邊緣,navbar則往左邊靠向content區域的邊框);但如果您縮減瀏覽器的寬度,navbar區域的顯示空間將被擠壓,浮動到”content”底下,但仍舊向左邊靠齊。

如果要讓兩個區間向瀏覽器視窗右邊靠齊,只需把float的參數值,從left改成right即可,如這個範例所示。請在此下載本文的原始檔(此壓縮檔包含三篇文章的範例)。

運用CSS樣式表編排版面(單欄)

運用CSS編排版面(單欄)
文∕趙英傑

本文將說明使用CSS樣式表編排多欄式網頁的方法。著手編排網頁之前,請先把網頁的外觀格式畫下來,並且替每個分隔空間(例如,放置標題圖片和導覽列的區域、以及內文和註解等區域)設定唯一的名稱。

各區的唯一名稱叫做「類別名稱(class name)」,請使用英文字母開頭,第二個字開始可以是英文或數字,名稱裡面不要加入空格和其他特殊符號。下圖是本文的範例網頁草圖,其中的“titleTxt”(標題文字)包含在”header”區域;”dateTxt”(日期欄位)包含在”middle”區域。 請先預覽本文的完成品(註:本文的範例檔,僅在IE 6.x以及FireFox 1.5.x版瀏覽器上做過測試)。

單欄CSS樣式編排草圖

根據這張草圖,先使用<div>標籤訂出網頁內容的各個區域,整個版型規劃被包含在名叫”content”的區域裡面,如果用蓋房子來比喻,”content”相當於建築物的外牆,”header”, “middle”和”footer”則是裡面的隔間,「樣式類別」名稱要用id屬性標示

接著撰寫CSS樣式。首先設定網頁的背景色和留白樣式(亦即,設定<body>標籤的樣式,修改既有的HTML標籤時,名稱前面不用添加任何符號):

再設定各個「樣式類別」的CSS樣式,名稱前面要加上#號:

上面的設定”content”區域設定,會讓”content”區域對齊瀏覽器視窗的左上角,距離左邊和上方留白5像素的位置。若要讓”content”位於瀏覽器中央(就像這個範例一樣),請將左、右留白設定成auto,如下:

最後設定「標題文字」和「日期」欄位:

按此連結下載本文範例檔(此壓縮檔包含三篇文章的範例)。

使用階層式樣式表(CSS)格式化 Flash 文字

本文摘錄自「Flash MX 2004《中文版》動畫網頁設計寶典」一書第十章,內容涵蓋:

  • Flash 支援的 CSS 屬性介紹
  • ActionScript 的 CSS 樣式類別說明
  • 建立 ActionScript 的樣式表物件
  • 載入外部 CSS 樣式檔

CSS樣式

按此連結下載 PDF 格式的文件。

CSS入門(二):建立導覽列

CSS入門(二):建立導覽列
文∕趙英傑

本文將說明如何透過CSS樣式,把清單(list)文字調整成底下的顯示外觀,當成導覽列使用。

使用CSS樣式設定的清單文字

清單文字採用<ul>標籤定義清單的範圍,並使用<li>標籤定義個別項目,例如:

將產生如下的清單文字:

清單文字

底下是替每個清單文字加上超連結(<a>標籤)的HTML原始碼:

設定網頁內容的CSS樣式之前,我們通常會採用 <div> 標籤定義網頁版面的區塊範圍,例如,把上述的清單元素定義成名叫“navi”區塊,其HTML語法如下:

如此,該清單文字區域將能被稱做“navi”。首先把 navi 區域的寬度(width)設定成 650 像素(如果導覽列的項目不多,可以設定成窄一點的數值):

然後指定 navi 區域中,ul 區域裡的 li 元素的樣式。請注意底下的寫法,只有符合這種階層架構的 li 元素(navi > ul > li )會套用此樣式,網頁其他部分的<li>標籤樣式將維持不變:

接著定義 navi 區域中,ul 區域裡的 li 元素後面的超連結文字(<a>標籤)的一般連結(link)已查閱(visited)滑入(hover)作用中(active)的樣式,將它們全都設定成白色、沒有底線:

到此,navi 區域的清單文字將呈現下圖的外觀,如您所見,滑入超連結時產生的背景色變換效果,僅限於超連結文字本身:

清單文字

為了讓navi > ul > ui > a超連結元素的背景色的顯示(display模式能充滿整個區域,並且增加超連結文字與邊框的間隔(padding,請加入底下的CSS定義:

目前所設定的清單樣式將在 IE 6.0 瀏覽器顯示成:

清單文字

最後透過float(浮動,請參閱《Dreamweaver 2004中文版網頁設計寶典》書本 9-29 頁「文字的環繞排式效果」)樣式,讓各個清單元素靠左對齊,並且使用border-bottom(邊框底部)樣式在每個清單元素底下加上灰色的裝飾線條,以及採用margin-right(右邊留白)樣式,讓每個清單元素的右邊都餘留1個像素寬。

最後的結果如下:

使用CSS樣式設定的清單文字

下載完成的範例檔

CSS入門(一)

CSS入門(一)
文∕趙英傑

本文旨在提供《Dreamweaver MX 2004中文版網頁設計寶典》一書第九章「使用CSS樣式表」補充說明。

HTML語言是描述網頁文件內容的標籤語言,網頁的版型編排原本不是它的職責,但是為了呈現美美的網頁,表格(<table>標籤)經常被當成控制留白、切割版面的元素使用。使用HTML標籤編排網頁的缺點是,網頁內容將被一堆和內文無關的標籤指令糾結在一起,而且一旦定下版型就不易修改和更換。

CSS最偉大的貢獻就是把網頁外觀樣式的「表現層」與「內文」分隔開來,而且CSS樣式表可以單獨地儲存成一個文件讓多個網頁共用,令它們呈現一致的外觀與感覺。

Dreamweaver的「圖層」工具是CSS的具體應用(亦即,「圖層」工具是一種以「視覺」方式建立 CSS 的方法),能讓設計人員把網頁元素定位在任意座標位置。

CSS樣式語法之一
CSS可重新定義指定HTML標籤的外觀(將影響到網頁中的所有相同標籤元素),或者針對個別標籤元素做設定,後者即是Dreamweaver軟體「新增CSS樣式」面版的「類別」選項。

新增 CSS 規則

重新定義指定HTML標籤外觀的CSS語法如下:

選取器(selector)」指的是HTML標籤。例如,書本9-3頁(簡體版221頁)定義的 h1 標籤,將產生如下的CSS原始碼:

樣式定義裡的 /* 和 */ 之間的文字是「註解」,不會被瀏覽器處理。內嵌於HTML網頁的CSS樣式,通常寫在網頁的檔頭區(<head>與</head>之間),並且放在<style>與</style>標籤之間,如下:

如此,網頁內文裡的所有<h1>標籤元素都將以「標楷體」、24像素、#FF6600的色彩呈現。

設定一組標籤的樣式
您也可以一次把相同的CSS樣式設定給一組「選取器」(標籤),例如,替 h1, h2 和 h3 設定相同的字體和顏色樣式(選取器之間用逗號分隔):

CSS樣式語法之二
若要個別設定標籤元素,可以使用底下的「類別選取器(class selector)」語法建立新的樣式類別。類別選取器的名稱請自行定義,名稱的第一個字不可以是數字,否則將無法在Firefox(火狐)瀏覽器中運作

「類別選取器」的名字以句點(.)起始。例如,書本 9-10 頁(簡體:226頁)定義的 paragraph 樣式類別的原始碼如下:

網頁內文的任何標籤都可以透過class屬性套用自訂樣式類別。例如,在某個<p>標籤套用 paragraph 樣式的語法如下:

請留意,設定 class 屬性值時不需要在樣式類別名稱前面加上句點(.)

CSS樣式語法之三
還有一種替相同標籤元素設定不同樣式的方法。假設你想要讓大多數的<p>標籤內容呈現藍色,少部分的強調文字<p>段落用紅色表示,可以這樣定義樣式:

應用上述CSS樣式的範例如下:

CSS樣式語法之四
另一種個別設定標籤樣式的語法,稱為「id選取器(id selector)」。id 選取器的名稱同樣需要自行定義,而且名稱前面要加上 # 號,例如,底下的敘述將定義一個稱為 paragraph 的 id 選取器:

id選取器將套用到使用 id 屬性定義的同名標籤元素上。例如,在某個<p>標籤套用 paragraph 樣式的語法如下:

請注意,CSS樣式的類別和id選取器名稱會區分大小寫,因此,底下的<p>標籤將不會套用 paragraph 樣式:

如同「JavaScript程式基本範例」這篇文章談到的,HTML標籤的 id 屬性用於替該標籤設定一個唯一的識別名稱。實際上,以該文章設定<img>(影像)標籤的“icon”名稱為例,假若有一個以上的<img>都命名為“icon”,那麼,調換影像的JavaScript程式將無法運作。因此,定義 id 選取器樣式,就形同定義了一個僅用於單一元素的樣式。

然而,CSS樣式和JavaScript程式不同,即使網頁包含相同 id 名稱的元素,這些元素仍能將引用相同的樣式,只是這樣的寫法很奇怪:

在一個標籤上設定多個樣式
同一個標籤可以被指定多個樣式,例如底下設定了兩個類別樣式:

接著在同一個<span>標籤(繁體書本9-28頁;簡體239頁)上套用相同的樣式(在 style 屬性值中,用空格區分不同的樣式):

CSS樣式的放置地點
除了把CSS樣式定義擺在上述的檔頭區之外,還可以直接在特定標籤內,藉由 style 屬性定義CSS。這種樣式定義稱為「內文樣式(inline style)」,例如,指定某個<p>元素之縮排與字距樣式的語法如下:

如果要讓不同網頁套用一致的CSS樣式,樣式表就得單獨寫成一個檔案(副檔名是.css)。例如,某個CSS樣式檔可能命名成 myStyle.css,存放在相對於HTML網頁檔的 styles/myStyle.css 路徑底下,其內容如下(不需要寫<style>和</style>標籤):

引用外部.css檔的方法是在HTML網頁的檔頭區透過<link>標籤設定檔案連結,如下:

有關採用Dreamweaver的「新增 CSS 樣式」設定面版建立共用 CSS 檔的方式,請參閱書本9-39頁(簡體:248頁)。