Transcript ASP.NET 2.0網頁設計範例教本

第1章 Mobile網頁程式設計的基礎
 1-1 Mobile應用程式
 1-2 跨平台Mobile應用程式開發
 1-3 相關網頁技術
 1-4 相關網頁技術框架與函數庫
 1-5 HTML編輯工具與瀏覽器
1-1 Mobile應用程式
 1-1-1 原生應用程式
 1-1-2 Mobile Web應用程式
 1-1-3 整合式應用程式
1-1-1 原生應用程式
 原生應用程式（Native Apps）是預設安裝在行動
裝置，或使用者從網路上的軟體商店自行下載安
裝的應用程式。原生應用程式可以細分成兩大類
，如下所示：
• 獨立的Mobile應用程式：這是一些不需要Internet連線
就可以獨立執行的應用程式，例如：電話簿、撥號、
計算機和離線遊戲等。
• Web服務基礎的Mobile應用程式：這是一些需要
Internet連線來存取Web服務的應用程式，例如：行事
曆、電子郵件、Facebook、Twitter和連線遊戲等。
1-1-2 Mobile Web應用程式-說明
 如同桌上型電腦的Web應用程式，針對行動裝置
也有Mobile Web應用程式，它是在行動裝置啟動
瀏覽器執行的Web應用程式，程式是儲存在Web
伺服器，使用HTML5和CSS3網頁技術來建立，我
們需要透過Internet才能執行Mobile Web應用程式
，事實上，你也可以說，它就是一個針對行動裝
置建立的Mobile Web網站。
1-1-2 Mobile Web應用程式-差異1
 Mobile Web應用程式和傳統Web應用程式的差異
，如下：
• Mobile Web應用程式只是傳統Web應用程式的
核心功能，除了行動裝置的螢幕尺寸比較小，
沒有足夠空間放置選單、工具列和小工具來提
供眾多功能外，智慧型手機和Web應用程式的
使用者在需求上也有很大的不同，智慧型手機
的使用者主要是在行動中使用應用程式，所以
希望能夠在最短的時間產生最大的效益，因此
只有最有效益、核心或最常使用的功能才會出
現在Mobile Web應用程式。
1-1-2 Mobile Web應用程式-差異2
• Mobile Web應用程式和傳統Web應用程式採用
完全不同的使用者互動方式，因為行動裝置擁
有觸控螢幕，而且通常都沒有實體鍵盤，以資
料輸入來說，Web應用程式可以使用鍵盤和滑
鼠；行動裝置的Mobile Web應用程式可以使用
觸控螢幕、虛擬鍵盤、加速感測器和數位羅盤
等，提供完全不同的使用者經驗。
1-1-2 Mobile Web應用程式-差異3
• Mobile Web應用程式因為是在行動裝置上執行
，再加上智慧型手機大都提供GPS功能，可以
輕鬆結合Google地圖（Google Maps）提供精準
的定位服務；反之，Web應用程式就算提供定
位服務，也只能粗略定位，非常大的誤差造成
它並沒有實際的使用價值。
1-1-3 整合式應用程式
 在本書說明的PhoneGap框架則是融合上述兩種應
用程式的作法, 它可以將使用jQuery Mobile建立的
Mobile Web應用程式包裝成原生應用程式，並且
提供存取行動裝置硬體介面的能力，例如：GPS、
相機、加速感測器和數位羅盤等。
 事實上，PhoneGap也非常適合用來開發Web服務
基礎的Mobile應用程式，因為，我們可以很容易
使用JavaScript程式碼和jQuery函數庫來存取
RESTful API，在第13章有進一步的說明。
1-2 跨平台Mobile應用程式開發-說明
 Mobile應用程式開發是開發低耗電行動裝置應用
程式的過程和程序，例如：在智慧型手機、平板
電腦或PDA等裝置上開發應用程式。
 雖然Mobile應用程式開發是目前應用程式開發的
熱門領域，但是隨著各家廠商眾多行動作業系統
快速的進入巿場，五花八門的行動裝置各自運行
著Android、iOS、BlackBerry、Symbian和Windows
Phone等不同的作業系統平台，讓跨平台Mobile應
用程式開發成為程式開發者的一項重大課題。
1-2 跨平台Mobile應用程式開發-問題
 跨平台Mobile應用程式開發的主要問題，筆者整
理如下所示：
• 眾多的行動作業系統
• 不同平台需要建立不同的開發小組
• 維持一致的使用經驗
• 行動裝置不同的硬體支援
• 各平台不同的開發環境
1-2 跨平台Mobile應用程式開發-共同平台
 在本書說明的PhoneGap技術從前述問題之中找出了各平台
之間的共通點，因為大部分平台使用的行動網路瀏覽器都
是WebKit瀏覽器引擎，而且目前主要的瀏覽器也都會遵循
W3C的標準規格，支援HTML5和CSS3，換句話說，瀏覽器
成為各行動作業系統之間的共同平台。
 PhoneGap就是以瀏覽器為執行的共同平台，使用HTML5和
CSS3開發Mobile網頁應用程式，事實上，PhoneGap應用程
式就是一個內建瀏覽器元件的應用程式，稱為Web檢視（
Webviews），我們建立的Mobile網頁應用程式就是在內建
的瀏覽器執行，可以將它包裝成各平台的原生應用程式。
1-2 跨平台Mobile應用程式開發Mobile網頁程式設計
 Mobile網頁程式設計的基礎是HTML5、CSS3和
JavaScript語言，為了簡化Ajax和JavaScript程式碼
，在本書是使用jQuery函數庫搭配JavaScript語言
來開發Mobile網頁應用程式。
 對於Mobile網頁應用程式的介面部分，為了建立
最佳化觸控操作的使用介面，我們是使用jQuery
Mobile框架來建立Mobile網頁應用程式的使用介
面，因為jQuery Mobile可以讓我們不用撰寫一行
JavaScript程式碼，就可以輕鬆建立出一致外觀和
使用經驗的操作介面。
1-3 相關網頁技術
 1-3-1 HTML5
 1-3-2 CSS3
 1-3-3 JavaScript
 1-3-4 DOM物件模型
 1-3-5 Ajax
1-3-1 HTML5-說明
 HTML5不只是一種編排內容的標記語言，它更支
援語意標籤和最新多媒體技術的語言，可以讓我
們建立更適合人類閱讀和電腦處理的文件。
 HTML5仍然遵循HTML4標籤的語法，只是擴充、
改進HTML標籤和API（Application Programming
Interfaces）來建立複雜的Web應用程式，和處理
DOM（Document Object Model）。不只如此，
HTML5支援手機和平板電腦等低耗電的行動裝置
，可以建立跨平台的Mobile應用程式。目前
Internet Explorer、Firefox、Safari、Chrome和Opera
等瀏覽器都已經支援HTML5。
1-3-1 HTML5-特點1
 全新的剖析規則：支援更彈性的剖析和相容性，
不只SGML，更可以使用SVG和MathML。
 全新的元素：新增全新語意、結構和多媒體等元
素，可以建立多煤體和行動裝置的Web網頁。
 增強的表單控制：支援日期/時間、電子郵件、網
址、搜尋、電話、色彩和範圍等資料和基本的表
單驗證功能。
 全新的屬性：支援meta標籤的charset屬性和script
標籤的async屬性，和使用在所有元素的全域屬性
id、tabindex、hidden和data-*等。
1-3-1 HTML5-特點2
 繪圖與多媒體的支援：HTML5支援向量繪圖、視
訊與多媒體播放，我們不再需要在瀏覽器安裝外
掛程式，就可以擁有多媒體的支援，在網頁播放
多媒體檔案。
 更佳的字型使用：HTML5網頁可以如同PDF一般的
內嵌字型，讓瀏覽器可以使用正確的字型來顯示
網頁內容。
 不再支援舊版元素：HTML5不再支援舊版的
aronym、applet、basefont、big、center、dir、
font、frame、frameset、isindex、noframes、strike
和tt元素。
1-3-2 CSS3-說明
 「CSS」（Cascading Style Sheets）層級式樣式表是
一種樣式表語言，可以用來描述標示語言的顯示
外觀和格式，例如：網頁的HTML或XHTML語言，
也可以使用在XML文件的SVG或XUL。
 對於網頁設計來說，CSS能夠重新定義HTML標籤
的顯示效果，因為HTML標籤擁有預設樣式，例如
：<p>標籤是段落；<ul>為清單，CSS能夠重新定
義標籤的顯示樣式，以便符合網頁設計者的需求
。
1-3-2 CSS3-功能
 更多的選擇器：CSS3新增更多的選擇器來幫助我們選擇網
頁元素。
 新增特殊效果：CSS3新增多種特效屬性，例如︰borderradius（圓角框線）、box-shadow（3D效果的方框陰影）
和text-shadow（文字陰影）等，如下所示：
text-shadow: 2px 2px 5px #333;
box-shadow: 4px 4px 5px #333;
border-radius: 6px;
 多欄版面配置：CSS3支援報紙和雜誌的多欄版面配置顯示
，可以將網頁內容使用多欄方式來顯示，如下所示：
column-count: 3;
1-3-3 JavaScript-說明
 JavaScript是Netscape開發的一種腳本語言，目前
是甲骨文公司的註冊商標，JavaScript使用淺顯的
程式語法，只需初學程式設計者即可運用自如，
輕鬆在網頁上建立互動效果；Jscript為微軟推出相
容JavaScript的腳本語言。
 JavaScript語言的主要定位是一種簡單的腳本語言
，其目的是讓不懂程式設計的使用者也一樣可以
撰寫JavaScript程式碼來產生互動的網頁內容。
1-3-3 JavaScript-特點
 JavaScript雖然使用類似Java語言的語法，但它並
不是Java程式語言，而是一種腳本語言。
 JavaScript是一列一列可執行的腳本程式碼。
 JavaScript程式碼可以直接內嵌HTML網頁，屬於
HTML網頁的一部分。
 JavaScript語言的核心觀念是物件，它是一種物件
導向程式語言，但是和我們所知的C++、Java和C#
語言不同，因為它是源自Lisp語言的一種原型基礎
的物件導向程式語言。
1-3-4 DOM物件模型-關係
 「物件模型」（Object Model）對於HTML網頁來
說，就是一種規範如何存取HTML元素、樣式或程
式碼的機制，可以將HTML元素、樣式和程式碼視
為物件，和定義之間的關係，如下圖所示：
1-3-4 DOM物件模型-說明
 DOM提供HTML網頁一種存取方式，可以將HTML
元素轉換成一棵節點樹，每一個標籤和文字內容
是一個一個節點（Nodes），讓我們可以走訪節點
來存取HTML元素。
 DOM物件模型提供一組標準程式介面，可以讓我
們透過這組介面來存取物件的屬性和方法，換句
話說，程式設計者可以使用此程式介面來瀏覽
HTML網頁或XML文件，也可以新增、刪除和修改
節點資料。對於HTML網頁來說。
1-3-4 DOM物件模型-組成
 DOM主要是由兩大部分組成，如下所示：
• DOM Core：提供HTML網頁或XML文件瀏覽、處理和維
護階層架構，主要提供兩種功能，如下所示：
• 瀏覽（Navigator）：能夠在網頁的樹狀結構中走訪
節點。
• 參考（Reference）：能夠存取節點的集合物件。
• DOM HTML：HTML網頁專屬的DOM API介面，其目的是
將網頁元素都視為是一個個物件，以便讓JavaScript等
程式語言存取元素來建立動態網頁內容。
1-3-4 DOM物件模型-優點
 DOM可以將HTML網頁轉換成內部樹狀結構的節點
，以便讓程式設計者可以更容易處理網頁內容，
其優點如下所示：
• 提供跨平台和程式語言的程式介面：DOM提供應用程
式標準的程式處理介面，這是一種HTML和XML文件的
標準API。
• 支援多種文件：DOM支援HTML網頁和XML文件，其中
DOM Core可以使用在HTML網頁和XML文件；DOM
HTML是針對HTML網頁。
• 支援多種程式語言：DOM支援多種程式語言和腳本語
言，例如：Java、PHP、.NET語言和ECMAScript（即
JavaScript）等。
1-3-5 Ajax-說明
 Ajax是Asynchronous JavaScript And XML的縮寫，即
非同步JavaScript和XML技術。Ajax可以讓Web應用
程式在瀏覽器建立出如同桌上型Windows應用程
式一般的使用介面。
 Ajax是由Jesse James Garrett最早提出的名稱，事
實上，Ajax並不是全新的網頁技術，它是一種新
方法來整合現存的多種網頁技術。不過，直到
Ajax被大量使用在Google網頁設計，例如：Gmail
、Google Suggest和Google Maps後，Ajax技術才受
到大家的重視，並且快速成為目前網頁設計技術
上的一顆耀眼明星。
1-3-5 Ajax-範例
 Ajax技術是使用非同步
HTTP請求，在瀏覽器和
Web伺服器之間傳遞XML
或JSON資料，當與使用
者互動後，Ajax技術可
以只更新部分網頁內容
，而不用重新載入整頁
網頁。例如：Google首
頁，如右圖所示：
1-3-5 Ajax-相關技術
 HTML/XHTML和CSS：在瀏覽器顯示使用者介面和呈現相關
資料。
 XML（Extensible Markup Language）：伺服端非同步傳遞
的資料。XML可擴展標示語言也是一種標籤語言，其語法
十分類似HTML，也屬於SGML的子集，在功能上主要是用
來描述資料。
 XML DOM：當客戶端非同步取得XML資料後，可以進一步
使用JavaScript程式碼和XML DOM取出所需的資訊。
 XMLHttpRequest物件：JavaScript程式碼是透過
XMLHttpRequest物件建立非同步HTTP請求。
1-4 相關網頁技術框架與函數庫
 1-4-1 jQuery
 1-4-2 jQuery Mobile
 1-4-3 PhoneGap
1-4-1 jQuery-說明
 jQuery是一個JavaScript函數庫，提供網頁設計者
另一種更簡潔的方式來撰寫JavaScript程式碼和擴
充JavaScript的功能。
 jQuery是在2006年1月由John Resig在BarCamp NYC
發表的網頁技術，這是一種高效率和簡潔的
JavaScript函數庫，目前是MIT和GPL授權的免費軟
體，可供個人或商業專案使用。
 jQuery強調JavaScript與HTML之間的交互作用，可
以使用簡潔程式碼來處理DOM，走訪網頁元素來
更改外觀、新增特效、事件處理、動畫和支援
Ajax來加速Web應用程式的開發。
1-4-1 jQuery-特點與功能1
 jQuery支援顯示、隱藏、滑動、漸層和自訂特效
。
 jQuery支援滑鼠、鍵盤、表單和使用者互動等事
件。
 jQuery可以使用CSS或原生特效來建立移動效果的
動畫。
 jQuery支援AJAX技術，可以使用XML或JSON與伺服
端交換資料。
 jQuery支援功能強大的DOM處理功能，可以搜尋
、走訪DOM物件，新增、刪除和複製DOM物件。
1-4-1 jQuery-特點與功能2
 jQuery支援CSS處理，可以取得和指定元素的CSS來
重新更改元素的外觀。
 jQuery提供擴充功能，可以建立外掛程式來自行
擴充jQuery。
 jQuery提供跨瀏覽器和簡單介面的常用JavaScript
函數。
1-4-2 jQuery Mobile
 jQuery Mobile是基於jQuery建立的框架（
Framework），在2010年10月推出1.0a1的初期版
本，可以幫助我們建立跨行動裝置的Mobile網頁
應用程式（Mobile HTML Applications）。
 jQuery Mobile是由jQuery專案小組開發，在2011年
11月推出1.0正式版，它是一套建立在jQuery之上
的使用介面系統（User Interface System，UI），
一個觸控最佳化的Web框架，提供眾多最佳化觸
控操作的使用介面元素。
1-4-3 PhoneGap
 PhoneGap是網頁製作技術和手機應用程式之間的橋樑，可
以讓我們將Mobile Web應用程式建立成原生手機應用程式
，讓沒有C++、Java和C#技術背景的程式設計者，也一樣可
以輕鬆建立Android、iPhone、BlackBerry和Windows Phone
等Mobile應用程式。
 PhoneGap也稱為Apache Cordova，它是一個開放原始碼專
案，其目的是建立一個跨平台Mobile應用程式框架的解決
方案，使用最新HTML5技術和JavaScript建立的框架，整合
iPhone、Android、Palm、Symbian和BlackBerry智慧型手機
的核心特點，包含：定位、加速感測器、聯絡人、音效和
振動，可以讓使用者使用HTML、CSS和JavaScript建立
Mobile應用程式。
1-5 HTML編輯工具與瀏覽器
 1-5-1 瀏覽器
 1-5-2 編輯工具
 1-5-3 IE開發者工具列
1-5-1 瀏覽器-說明
 瀏覽器可以讀取HTML網頁，在直譯HTML標籤的
同時也會直譯JavaScript程式碼，並且馬上執行程
式碼或進行事件處理。
 瀏覽器（Browser）是一個顯示Web伺服器或檔案
系統內文件的工具程式，可以讓使用者與這些文
件產生互動。不只如此，瀏覽器可以顯示儲存在
WWW全球資訊網或區域網路的文字、影像和其
他資訊，這是一些連接其他網址的超連結，可以
輕鬆讓我們連接全世界的文字或影像內容。
1-5-1 瀏覽器-客戶端網頁技術
 在本書使用的網頁技術主要是客戶端網頁技術，程式碼或
網頁是在使用者客戶端電腦的瀏覽器中執行，而不是Web
伺服器，因為瀏覽器本身支援直譯程式，所以可以在瀏覽
器執行客戶端網頁技術，如下圖所示：
1-5-1 瀏覽器HTML、CSS3和JavaScript的執行環境
 瀏覽器就是HTML、CSS3和JavaScript程式碼的執行環境，
因為目前各大瀏覽器都已經支援HTML5+CSS3，而且，
JavaScript是目前巿面上各大瀏覽器最普遍支援的腳本語言
，例如：Internet Explorer、Firefox、Safari、Chrome和
Opera等。
 在本書第一篇是說明各種網頁技術的基礎，為了方便測試
執行結果，這些程式範例主要是在Windows 7作業系統的
Internet Explorer 9測試執行。讀者可以直接啟動瀏覽器按
二下檔案來載入HTML網頁，或是擁有JavaScript程式碼的
HTML網頁，就可以馬上顯示網頁內容，和執行JavaScript
程式。
1-5-2 編輯工具
 JavaScript程式碼是直接內嵌HTML網頁，或建立成
獨立副檔名.js的程式碼檔案，因為它是一份標準
文字檔案，所以，我們可以使用任何文字、程式
碼或HTML編輯工具，在本書是使用PSPad編輯工
具來編輯JavaScript程式碼。
1-5-3 IE開發者工具列-說明
 從IE 8開始，微軟提供「IE開發者工具列」（
Microsoft IE Developer Toolbar），可以進行CSS、
HTML、DOM與JavaScript程式碼的除錯。
1-5-3 IE開發者工具列-切換顯示
 在啟動Internet Explorer後，請執行「工具/F12開
發者工具」指令，或按F12鍵，可以在瀏覽器下方
切換顯示IE開發者工具列，如下圖所示：
1-5-3 IE開發者工具列-瀏覽器與文件模式
 因為Internet Explorer提供多種網頁生成引擎，可
以讓我們切換瀏覽器是使用哪一種生成引擎來產
生網頁內容，如下圖所示：