Transcript 行動裝置網站開發

1
•
•
•
•
•
•
行動裝置網站開發與
ASP.NET
1-1 Web應用程式與Web服務
1-2 Mobile應用程式與行動裝置網站
1-3 客戶端相關網頁技術
1-4 伺服端ASP.NET網頁技術
1-5 使用WebMatrix整合開發工具
1-6 使用VS Express for Web整合開發工具
1-1 Web應用程式與Web服務
• 1-1-1 Web應用程式
• 1-1-2 Web服務
• 1-1-3 REST與RESTful
1-1 Web應用程式與Web服務
• 對於開發者來說，在建立Internet執行的Web應用
程式或瀏覽的Web網站時，我們需要思考兩種不
同的Web開發方式，如下所示：
– Web應用程式（Web Applications）：Web應用程式是
透過HTTP請求來存取儲存在Web伺服器的網頁，或執
行伺服端網頁技術的程式碼，例如：ASP、ASP.NET、
PHP和JSP等。
– Web服務（Web Services）：透過SOAP通訊協定或
RESTful API提供資料交換和工作分享，事實上，這也
是一種Web應用程式，不過它是透過Web服務來執行
的Web應用程式。
1-1-1 Web應用程式-說明
• Web應用程式（Web Applications）簡單的
說就是一組網頁（包含HTML網頁、圖片和
相關伺服端網頁技術的程式檔案）的集合，
其主要功能是回應使用者的HTTP請求，並
且與使用者進行互動。
• 目前Internet擁有多種不同類型的Web應用
程式，例如：網路銀行、電子商務網站、
搜尋引擎、網路商店、拍賣網站和電子公
共論壇等。
1-1-1 Web應用程式-資訊傳遞模型
• 資訊傳遞模型（Information Delivery Model）就
是傳統Web網站，所有資訊內容都是使用HTML
語言撰寫的靜態HTML網頁，我們可以使用網頁
編輯工具或HTML語言來建立網站內容，如下圖
所示：
1-1-1 Web應用程式-資訊處理模型
• 資訊處理模型（Information Processing Model）
主要的目的是建立互動的Web網站，Web伺服器
的角色不單純只是傳遞資料，它是一個完整資訊
處理系統的執行平台，我們需要使用伺服端網頁
技術（程式碼是在Web伺服器執行的網頁技術），
例如：使用ASP.NET技術建立的Web應用程式，
如下圖所示：
1-1-2 Web服務-說明
• Web服務（Web Services）是一種企業級
的應用程式，可以透過Internet建立自動機
制提供資料交換和工作分享等資源共享能
力。Web服務是使用公開標準的通訊協定，
提供低成本軟體整合和資料分享功能。
1-1-2 Web服務-基礎
• Web服務提供一組通用服務，可以同時提供多個客戶端
（Clients）使用，這是一組以XML標籤作為傳遞訊息的函
數呼叫，客戶端透過HTTP傳送函數呼叫給伺服端，伺服
端以HTTP將結果回傳客戶端，可以提供客戶端更多的彈
性，因為只需傳遞函數呼叫的訊息，就可以取得所需的資
訊。
• Web服務也是使用HTTP進行通訊，換句話說，連線
Internet的應用程式都可以使用這些服務，我們可以在不
同作業系統和不同程式語言開發的應用程式之間，直接與
位在不同位置的其他應用程式進行通訊和資料交換。總之，
Web服務就是提供一組通用的遠端函數呼叫（RPC，
Remote Procedure Calls），讓客戶端使用函數呼叫來執
行所需服務。
1-1-2 Web服務-應用程式架構
• 傳統Web服務的客戶端和伺服端是使用「SOAP」
（Simple Object Access Protocol）通訊協定來進
行通訊，它是一種結合XML標籤訊息和HTTP協
定的通訊協定。Web服務的應用程式架構，如下
圖所示：
1-1-3 REST與RESTful-說明
• REST（REpresentational State Transfer）代表
一種分散式軟體系統架構樣式，目前已經取代
SOAP的Web服務，成為WWW上最常使用的
Web服務模型。REST是使用XML或JSON等簡單
介面的Web服務，而不是使用SOAP的傳統Web
服務，基本上，符合REST原則的系統稱為
RESTful。
• REST最主要的觀念是資源（Resources），即一
種特殊資訊，它是使用HTTP的URI（即網址）來
識別這些資源，以便客戶端可以請求這些資源來
進行處理，REST是使用標準HTTP介面在客戶端
和伺服端之間交換這些資源。
1-1-3 REST與RESTful-架構
• RESTful Web服務也稱為RESTful Web API，它
是使用REST原則和HTTP實作的Web服務，
RESTful對比傳統Web服務來說，屬於一種輕量
級的Web服務，其架構是由客戶端和伺服端組成，
在客戶端使用HTTP請求伺服端的資源，伺服端負
責處理請求且回應資源（Web應用程式是回應
HTML網頁），其基本架構如下圖所示：
1-1-3 REST與RESTful- RESTful Web API
• 目前網路上各大網路公司都提供RESTful
Web API（或稱RESTful API）來存取提供
的服務和資源，例如：Google、Facebook、
Twitter、MySpace、Flickr和Picasa等。在
programmableweb網站可以查詢各種Web
API，其網址為：
– http://www.programmableweb.com/apis/direct
ory
1-2 Mobile應用程式與行動裝置網站
• 1-2-1 原生應用程式
• 1-2-2 Mobile Web應用程式
1-2 Mobile應用程式與行動裝置網站
• Mobile應用程式（Mobile Applications）也稱為
Mobile Apps，它是在智慧型手機或其他行動裝置
上執行的應用程式，這些應用程式可能已經預設
安裝在行動裝置，或需要使用者自行從網路下載
來安裝。
• Mobile應用程式是針對行動使用者執行特定功能
的精簡型應用程式，可以分成兩大類：原生應用
程式和Mobile Web應用程式，事實上，行動裝置
瀏覽的Web網站，就是一種Mobile Web應用程式。
1-2-1 原生應用程式-說明
• 原生應用程式（Native Apps）是預設安裝在行動
裝置，或使用者自行從網路的軟體商店下載安裝
的應用程式，在Android作業系統是Google Play；
iOS是Apple Story等軟體商店；微軟是微軟巿集。
• 一般來說，這些原生應用程式都是使用各平台專
屬的開發工具和程式語言來進行開發，Android是
使用Java語言、Eclipse IDE和Android SDK；
iOS是Objective-C、Xcode IDE和Cocoa等。
1-2-1 原生應用程式-種類
• 原生應用程式可以再細分成兩大類，如下
所示：
– 獨立的Mobile應用程式：這是一些不需要
Internet連線就可以獨立執行的應用程式，例如：
電話簿、撥號、計算機和離線遊戲等。
– Web服務基礎的Mobile應用程式：這是一些需
要Internet連線來存取Web服務的應用程式，例
如：行事曆、電子郵件、Facebook、Twitter和
連線遊戲等。
1-2-2 Mobile Web應用程式-說明
• 如同桌上型電腦的Web應用程式，針對行
動裝置也有Mobile Web應用程式，這是指
行動裝置啟動瀏覽器執行的Web應用程式，
程式是儲存在Web伺服器，使用HTML5、
CSS3和伺服端網頁技術來建立，我們需要
透過Internet才能執行Mobile Web應用程式，
事實上，你也可以說，它就是一個針對行
動裝置建立的Mobile Web網站，即本書主
題的行動裝置網站。
1-2-2 Mobile Web應用程式-差異1
• Mobile Web應用程式和第1-1-1節傳統Web
應用程式的主要差異，如下所示：
– Mobile Web應用程式只是傳統Web應用程式的
核心功能，除了行動裝置的螢幕尺寸比較小，
沒有足夠空間放置選單、工具列和小工具來提
供眾多功能外，智慧型手機和Web應用程式的
使用者在需求上也有很大的不同，智慧型手機
的使用者主要是在行動中使用應用程式，所以
希望能夠在最短時間產生最大的效益，因此只
有最有效益、核心或最常使用的功能才會出現
在Mobile Web應用程式。
1-2-2 Mobile Web應用程式-差異2
– Mobile Web應用程式和傳統Web應用程式採用完全不
同的使用者互動方式，因為行動裝置擁有觸控螢幕，
而且通常都沒有實體鍵盤，以資料輸入來說，Web應
用程式可以使用鍵盤和滑鼠；行動裝置的Mobile Web
應用程式是使用觸控螢幕、虛擬鍵盤、加速感測器和
數位羅盤等，提供完全不同的使用者經驗。
– Mobile Web應用程式因為是在行動裝置上執行，再加
上智慧型手機大都提供GPS功能，可以輕鬆結合
Google地圖（Google Maps）提供精準的定位服務；
反之，Web應用程式就算提供定位服務，也只能粗略
定位，非常大的誤差造成並沒有實際的使用價值。
1-2-2 Mobile Web應用程式-行動裝置網站開
發的挑戰1
• 雖然目前行動裝置使用的作業系統，其內建瀏覽
器都支援HTML5、CSS3和JavaScript，但是在開
發行動裝置網站時，我們仍然需要面對多種挑戰，
如下所示：
– 螢幕尺寸：行動裝置的螢幕尺寸遠小於桌上型電腦，
而且擁有多種不同尺寸和解析度，所以，我們需要針
對不同尺寸和解析度的螢幕建立專屬的版面配置。
– 輸入方式：行動裝置的資料輸入可能是鍵盤、手勢和
觸控等多種方式，在建立網站時，我們需要同時考量
多種資料輸入方式和巡覽機制。
1-2-2 Mobile Web應用程式-行動裝置網站開
發的挑戰2
– 標準規格的相容性：雖然目前行動裝置內建瀏
覽器都支援HTML5、CSS3和JavaScript，但
是在最新規格的支援上仍然有少許差異，換句
話說，對於跨行動裝置的網站來說，我們需要
注意是否支援各種行動裝置的瀏覽器。
– 頻寬：行動裝置的網路頻寬會因位置的訊號而
有所差異，再加上頻寬的穩定性比不上桌上型
電腦，所以，在建立行動裝置網站時，網站檔
案的尺寸也是考量重點。
1-3 客戶端相關網頁技術
•
•
•
•
•
•
•
•
1-3-1 客戶端網頁技術的基礎
1-3-2 HTML5
1-3-3 CSS3
1-3-4 JavaScript
1-3-5 DOM物件模型
1-3-6 Ajax
1-3-7 jQuery
1-3-8 jQuery Mobile
1-3-1 客戶端網頁技術的基礎-說明
• 客戶端網頁技術的程式碼或網頁是在使用者客戶
端電腦的瀏覽器中執行，而不是Web伺服器，因
為瀏覽器本身支援直譯程式，所以可以在瀏覽器
執行客戶端網頁技術，如下圖所示：
1-3-1 客戶端網頁技術的基礎-瀏覽器種類
• 目前巿面上的瀏覽器主要可以分為兩大類，
其簡單說明如下所示：
– 個人電腦瀏覽器：在PC或筆記型電腦上執行的
瀏覽器，目前桌上型電腦的主要瀏覽器有：
Internet Explorer、Firefox、Safair、Opera和
Chrome等。
– 行動網路瀏覽器：在Mobile平台執行的瀏覽器
大部分都是WebKit瀏覽器引擎的行動網路瀏覽
器（Windows Phone除外），在第3章有進一
步的說明。
1-3-2 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-2 HTML5-標籤
• 在標籤部分，HTML5支援全新<video>、
<audio>和<canvas>標籤來建立多媒體網頁，
提供特殊規則來插入和格式化文字、圖形、
視訊和音效，例如：使用<section>、
<article>和<header>語意標籤讓網頁設計
者建立更有結構和人性化的網頁內容，而
且，不需安裝Flash外掛程式，就可以在網
頁原生播放視訊和音效。
1-3-3 CSS3
• 「CSS」（Cascading Style Sheets）層級式樣式表是一
種樣式表語言，可以用來描述標示語言的顯示外觀和格式，
例如：網頁的HTML或XHTML語言，也可以使用在XML文
件的SVG或XUL。
• 對於網頁設計來說，CSS能夠重新定義HTML標籤的顯示
效果，因為HTML標籤擁有預設樣式，例如：<p>標籤是
段落；<ul>為清單，CSS能夠重新定義標籤的顯示樣式，
以便符合網頁設計者的需求。
• CSS是在1996年12月公佈CSS Level 1規格，Internet
Explorer 3.0或以上的版本都支援此規格，接著1998年5月
推出Level 2規格，Level 3早在1999年就已經開始制訂，
直到2011年6月7日才成為W3C的建議規格，在CSS3增加
不少新的選擇器、多欄和特效功能。
1-3-4 JavaScript
• JavaScript是Netscape開發的一種腳本語言，目
前是甲骨文公司的註冊商標，JavaScript使用淺
顯的程式語法，只需初學程式設計者即可運用自
如，輕鬆在網頁上建立互動效果；Jscript為微軟
推出相容JavaScript的腳本語言。
• JavaScript語言的定位是一種簡單的腳本語言，
其目的是讓不懂程式設計的使用者也一樣可以撰
寫JavaScript程式碼來產生互動的網頁內容。
1-3-5 DOM物件模型-物件模型
• 「物件模型」（Object Model）對於HTML網頁來
說，就是一種規範如何存取HTML元素、樣式或
程式碼的機制，可以將HTML元素、樣式和程式
碼視為物件，和定義之間的關係，如下圖所示：
1-3-5 DOM物件模型-說明
• DOM提供HTML網頁一種存取方式，可以將
HTML元素轉換成一棵節點樹，每一個標籤和文
字內容是一個一個節點（Nodes），讓我們可以
走訪節點來存取HTML元素。
• DOM物件模型提供一組標準程式介面，可以讓我
們透過這組介面來存取物件的屬性和方法，換句
話說，程式設計者可以使用此程式介面來瀏覽
HTML網頁或XML文件，也可以新增、刪除和修
改節點資料。對於HTML網頁來說。
1-3-5 DOM物件模型-組成
• DOM主要是由兩大部分組成，如下所示：
– DOM Core：提供HTML網頁或XML文件瀏覽、
處理和維護階層架構，主要提供兩種功能，如
下所示：
• 瀏覽（Navigator）：能夠在網頁的樹狀結構中走訪
節點。
• 參考（Reference）：能夠存取節點的集合物件。
– DOM HTML：HTML網頁專屬的DOM API介面，
其目的是將網頁元素都視為一個個物件，以便
讓JavaScript等程式語言存取元素來建立動態
網頁內容。
1-3-6 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-6 Ajax-相關技術
• Ajax技術是由多種網頁技術所組成，相關技術說
明如下所示：
– HTML/XHTML和CSS：在瀏覽器顯示使用者介面和呈
現相關資料。
– XML（Extensible Markup Language）：伺服端非同
步傳遞的資料。XML可擴展標示語言也是一種標籤語
言，其語法十分類似HTML，也屬於SGML的子集，在
功能上主要是用來描述資料。
– XML DOM：當客戶端非同步取得XML資料後，可以進
一步使用JavaScript程式碼和XML DOM取出所需的資
訊。
– XMLHttpRequest物件：JavaScript程式碼是透過
XMLHttpRequest物件建立非同步HTTP請求。
1-3-7 jQuery
• jQuery是一個JavaScript函數庫，提供網頁設計者另一種
更簡潔方式來撰寫JavaScript程式碼和擴充JavaScript的
功能。jQuery強調JavaScript與HTML之間的交互作用，
可以使用簡潔程式碼來處理DOM，走訪網頁元素來更改
外觀、新增特效、事件處理、動畫和支援Ajax來加速Web
應用程式的開發。
• 當然jQuery的功能不只如此，其基本的設計精神就是以更
彈性方式寫出最少程式碼來建立動態網頁。簡單的說，
jQuery是在JavaScript和HTML之上新增一層程式介面，
可以讓程式開發者使用簡潔程式碼來處理DOM，例如：
事件處理、顯示與隱藏HTML元素、更改元素屬性、新增
CSS樣式、加上動態效果或更改色彩。
1-3-8 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框架，提供眾多最佳化觸控操作的使用介面元素。
• 因為Mobile網頁應用程式最重要的部分是使用介面，
jQuery Mobile是一套用來建立Mobile網頁應用程式的使用
介面框架（Framework），再加上它是使用宣告方式來建
立使用介面，我們不用撰寫任何JavaScript程式碼，單純
使用HTML標籤就可以建立一致外觀佈景的使用介面。
1-4 伺服端ASP.NET網頁技術
•
•
•
•
1-4-1 伺服端網頁技術的基礎
1-4-2 微軟的.NET Framework
1-4-3 ASP.NET技術的三種開發模型
1-4-4 ASP.NET的Mobile Web支援
1-4-1 伺服端網頁技術的基礎-說明
• 伺服端網頁技術簡單的說是在Web伺服器
上執行的應用程式，而不是在客戶端電腦
的瀏覽器執行，如下圖所示：
1-4-1 伺服端網頁技術的基礎-常用技術1
• CGI（Common Gateway Interface）：共通匣道介面提供
Web伺服器執行外部程式的管道，CGI應用程式是一種外
部程式的執行檔，能夠使用各種程式語言來開發，例如：
Visual Basic、C、C++和Perl，程式需要編譯成執行檔案，
以便在伺服端執行。
• ASP（Active Server Pages）：直接從英文字面上解釋是
一種讓網頁在伺服器上動起來的技術，能夠將Script語言
直接內嵌HTML標籤的網頁，在伺服端產生動態的網頁內
容，這是一種在伺服端以直譯方式執行的網頁技術。
• ASP.NET：ASP.NET是繼ASP 3.0後，微軟開發的伺服端
網頁技術，以「CLR」（Common Language Runtime）
架構的.NET程式設計平台，可以讓我們使用CLR語言在
伺服端建立Web應用程式。
1-4-1 伺服端網頁技術的基礎-常用技術2
• PHP（PHP: Hypertext Preprocessor）：一種通
用、開放原始碼（Open Source）的伺服端Script
語言，可以直接內嵌於HTML網頁，特別適用在
Web網站的開發，主要是使用在Linux/Unix作業
系統的伺服端網頁技術，目前也支援Windows作
業系統。
• JSP（Java Server Pages）：Java家族中和ASP
一較長短的網頁技術，以Java語言來說，Java
Applet是下載到客戶端執行的程式檔；Java
Servlet是在伺服端執行；JSP是結合HTML和
Java Servlet的一種伺服端網頁技術。
1-4-2 微軟的.NET Framework-說明
• .NET Framework是微軟下一個世代的程式
開發平台，它是由CLR和.NET Framework
類別函數庫所組成。當使用.NET
Framework支援的程式語言編寫程式碼檔
案後，就可以使用.NET編譯程式進行編譯，
不過，並不是編譯成CPU可執行的機器語
言，而是一種中間程式語言稱為「MSIL」
（Microsoft Intermediate Language）。
1-4-2 微軟的.NET Framework-圖例
• 當需要執行程式時，CLR使用「JIT」
（Just In Time）編譯程式將MSIL轉換成機
器語言的程式碼來執行程式，如下圖所示：
1-4-3 ASP.NET技術的三種開發模型-圖
例
• ASP.NET是架構在.NET Framework的CLR平台
的網頁技術，其主要目的是建立Web應用程式。
目前ASP.NET共有三種開發模型來建立ASP.NET
應用程式，如下圖所示：
1-4-3 ASP.NET技術的三種開發模型ASP.NET Web Forms開發模型
• 傳統ASP.NET開發模型，這是一種事件驅
動和伺服端控制項的開發模型，其目的是
隱藏HTTP 請求，以便讓我們如同建立桌上
型Windows應用程式一般的建立Web應用
程式，不過，因為ASP.NET Web Forms是
使用伺服端控制項來全權處理頁面的顯示，
所以搭配客戶端網頁技術會有很多限制，
除非你不使用伺服端控制項和ViewState。
1-4-3 ASP.NET技術的三種開發模型ASP.NET Web Pages開發模型
• ASP.NET開發模型的最新成員，這是一種
以頁面為中心的開發模型，類似ASP和
PHP技術，可以讓開發者全權控制網頁的
顯示，和整合客戶端網頁技術的各種套件，
並且使用內建範本和幫助者類別來快速建
立Web應用程式。
1-4-3 ASP.NET技術的三種開發模型ASP.NET MVC開發模型
• 使用著名的MVC設計模式來建立Web應用
程式，可以將Web應用程式分割成三大部
分Models、Views和Controllers，分別是資
料、顯示和處理請求，在顯示部分預設是
和Web Pages開發模型使用相同的Razor語
法。
1-4-4 ASP.NET的Mobile Web支援-建立範本
• 對於網站開發者來說，建立跨行動裝置網站可能
需要建立多種不同的版面配置來套用在不同尺寸
的行動裝置螢幕，基本上，我們有兩種方式來建
立不同的範本，如下所示：
– 直接從伺服端傳回正確格式的頁面，我們需要在伺服
端偵測行動裝置的平台和使用的瀏覽器，以便產生所
需尺寸的頁面內容。
– 在客戶端使用CSS樣式格式化不同裝置的網頁內容，
即使用第2章的Media Queries，依據不同螢幕尺寸來
套用不同的CSS樣式。
1-4-4 ASP.NET的Mobile Web支援-說明
• 微軟ASP.NET技術雖然在舊版就已經支援Mobile
Web的開發，不過，當年Mobile Web建立的Web
控制項是輸出成WAP，並不是HTML5，已經不符
合目前巿場上網頁技術的潮流。
• 新版ASP.NET 4.5支援Mobile Web的跨行動裝置
網站開發，並且全面擁抱Open Source的當紅網
頁技術，例如：jQuery函數庫和jQuery Mobile框
架，可以幫助我們建立跨行動裝置平台的網站。
1-4-4 ASP.NET的Mobile Web支援- ASP.NET
Web Forms開發模型
• 因為ASP.NET Web Forms是使用伺服端控制項來
處理頁面顯示，對於客戶端jQuery Mobile元件的
支援並不完整，只有部分伺服端控制項可以加上
data-role屬性轉換成jQuery Mobile元件，例如：
ListView、DataList和Repeater控制項等；
ListBox和DataGrid等控制項的相容性並不佳，再
加上ViewState不建議使用在Mobile網站（因為會
造成檔案尺寸大幅增加），如果希望高度整合
Web Forms和jQuery Mobile框架，建議使用AMF
（ASP.NET Mobile Framework），這是基於
jQuery Mobile建立的伺服端控制項。
1-4-4 ASP.NET的Mobile Web支援- ASP.NET
Web Pages開發模型
• 因為使用與MVC相同的Razor引擎，可以讓
開發者全權控制網頁的顯示來整合jQuery
Mobile框架，對於中小型的跨行動裝置網站，
Web Pages開發模型是ASP.NET技術的最
佳選擇。
1-4-4 ASP.NET的Mobile Web支援- ASP.NET
MVC開發模型
• 從MVC 3開始，Views的預設檢視引擎已經
改為Razor引擎，可以讓使用者全權處理網
頁的顯示，換句話說，我們可以完全整合
jQuery Mobile框架來建立企業級的跨行動
裝置網站，事實上，新版ASP.NET 4.5的
Mobile支援，大部分是針對MVC；並不是
Web Forms開發模型。
1-5 使用WebMatrix整合開發工具
•
•
•
•
•
1-5-1 WebMatrix開發工具的基礎
1-5-2 下載與安裝WebMatrix開發工具
1-5-3 啟動WebMatrix建立新站台
1-5-4 在檔案工作區新增程式檔案
1-5-5 更改預設的站台位置
1-5-1 WebMatrix開發工具的基礎-說明
• WebMatrix是微軟開發的Web開發平台，這是一
組免費的整合開發工具和完整Web開發環境，可
以讓網站開發者快速和容易的建立動態和資料驅
動的Web網站，而不用使用複雜的Visual Studio。
• WebMatrix不只支援ASP.NET技術的網站開發，
也支援其他伺服端網頁技術，例如：PHP，加上
高度的擴充性，可以輕易整合其他廠商提供的功
能，例如：Twitter、Facebook、Amazon、
Windows Azure、Groupon和Paypal等。
1-5-1 WebMatrix開發工具的基礎-元件
• WebMatrix是一套免費和輕量的Web整合開發工
具，提供簡單方式來快速建立和開發Web網站，
其主要組成元件，如下所示：
– IIS Express：簡易版IIS的Web伺服器，可供
WebMatrix建立的網站來測試和部署。
– ASP.NET：ASP.NET Framework的ASP.NET伺服端網
頁技術，WebMatrix支援的是ASP.NET Web Pages開
發模型。
– SQL Server Compact：SQL Server資料庫系統的內嵌
式版本，可以快速建立資料驅動的Web網站。
– 行動瀏覽器模擬器：WebMatrix支援行動裝置的網站開
發，提供iPhone和Windows Phone行動瀏覽器的模擬
器，可以幫助我們測試Mobile Web的執行結果。
1-5-2 下載與安裝WebMatrix開發工具-下載
• WebMatrix 2可以從網路上免費下載，其下
載網址是：
http://www.microsoft.com/web/webmatrix/。
在上方選擇中文語系，按右下角【Free
Download】鈕下載WebMatrix 2。
1-5-2 下載與安裝WebMatrix開發工具-安裝
• WebMatrix的安裝是使用微軟的Web Platform
Installer，這是一個免費的應用程式，可以幫助我
們快速安裝和設定相關的Web開發工具或套件，
目前的最新版本是WebMatrix 2。
1-5-3 啟動WebMatrix建立新站台-步驟
• 筆者準備使用WebMatrix 2建立名為HelloWeb的
站台，WebMatrix預設是使用範本來建立站台，
其建立步驟如下所示：
– Step 1：請在Windows 8開始頁面，按一下【Microsoft
WebMatrix】動態磚，稍等一下，可以啟動WebMatrix
2，看到「快速入門」視窗。
– Step 2：選【範本】，可以看到預設提供的站台範本清
單。
– Step 3：在左邊選【ASP.NET】，可以在右邊看到範
本清單，請選【空白網站】後，在下方【站台名稱】
欄輸入【HelloWeb】，按【下一步】鈕，可以看到正
在安裝HelloWeb，完成後，就可以進入開發工具的使
用介面。
1-5-3 啟動WebMatrix建立新站台-圖例
1-5-4 在檔案工作區新增程式檔案
• 在WebMatrix站台選【檔案】工作區，就可以讓
我們新增程式檔案和資料夾，筆者準備新增名為
Page.cshtml的ASP.NET程式，.cshtml是Web
Pages開發模型使用C#語言的副檔名；Visual
Basic語言是.vbhtml ，如下圖所示：
1-5-5 更改預設的站台位置
• WebMatrix 2預設新增的站
台是位在「C:\Users\<使用
者名稱>\Documents\My
Web Sites\」資料夾，為了
方便管理站台，我們可以更
改預設的站台位置，以便將
站台的檔案儲存在指定的資
料夾，以本書為例是位在
「D:\ASP.NET_Mobile」資
料夾，如右圖所示：
1-6 使用VS Express for Web整合開發工具
• 1-6-1 下載與安裝VS Express for Web
• 1-6-2 啟動與建立ASP.NET網站
• 1-6-3 開啟網站加入ASP.NET程式
1-6 使用VS Express for Web整合開發工具
• 微軟程式語言的整合開發環境稱為Visual Studio，它是微
軟公司開發Windows和Web應用程式的整合開發環境，能
夠在同一套應用程式編輯、編譯、偵錯和測試.NET語言
建立的應用程式。
• Visual Studio Express 2012 for Web（簡稱VS Express
for Web）是一套用來開發ASP.NET網站（即Web應用程
式）的整合開發環境。Express版是Visual Studio產品線
的擴充，微軟Express系列提供實用和最少負擔的程式開
發工具，可以讓學生和初學者輕鬆進入Visual Studio
和.NET Framework開發平台，快速建立所需的.NET應用
程式。
1-6-1 下載與安裝VS Express for Web-下載
• VS Express for Web版可以在網路上免費下載，
其下載網址為：
http://www.microsoft.com/visualstudio/cht/downl
oads。
• 請選【Visual Studio Express 2012 for Web】後，
再選【中文】，就可以點選【立即下載】超連結，
下載正體中文版的ISO檔，然後使用燒錄程式將
ISO檔燒成安裝光碟。
1-6-1 下載與安裝VS Express for Web-安裝
• VS Express for Web中文版可以建立微軟
ASP.NET三種開發模型的開發環境，以下載燒錄
的安裝光碟為例，如下圖所示：
1-6-2 啟動與建立ASP.NET網站-說明
• 對於ASP.NET Web Pages開發模型來說，
我們可以在VS Express for Web建立
ASP.NET網站來新增副檔名為.cshtml
或.vbhtml的ASP.NET程式。
– 步驟一：啟動與註冊VS Express for Web
– 步驟二：新增ASP.NET網站
– 步驟三：預覽ASP.NET網站的首頁
1-6-2 啟動與建立ASP.NET網站-步驟一
• 請在Windows 8開始
頁面，按一下【VS
Express for Web】動
態磚，稍等一下，因
為是第1次啟動，可
以看到產品註冊畫面
（註冊是完全免費，
如果沒有註冊只能使
用30天）。
1-6-2 啟動與建立ASP.NET網站-步驟二
• 在啟動VS Express for Web後，我們可以新增
ASP.NET網站，請執行「檔案>新網站」指令，
可以看到「新網站」對話方塊。
1-6-2 啟動與建立ASP.NET網站-步驟三
• 執行「檔案>在瀏覽器中檢視」指令或在檔案上執
行【右】鍵快顯功能表的【在瀏覽器中檢視】指
令，可以看到瀏覽器顯示的執行結果。
1-6-3 開啟網站加入ASP.NET程式
• VS Express for
Web可以直接開
啟WebMatrix 2建
立的站台來新增
ASP.NET程式，
執行「檔案>開啟
網站」指令，可
以看到「開啟網
站」對話方塊。