1 行動裝置網站開發與ASP.NET 1-1 Web應用程式與Web服務 1-2 Mobile應用程式與行動裝置網站

Presentation on theme: "1 行動裝置網站開發與ASP.NET 1-1 Web應用程式與Web服務 1-2 Mobile應用程式與行動裝置網站"— Presentation transcript:

1

2 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整合開發工具

3 1-1 Web應用程式與Web服務 1-1-1 Web應用程式 1-1-2 Web服務 1-1-3 REST與RESTful

4 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應用程式。

5 1-1-1 Web應用程式-說明 Web應用程式（Web Applications）簡單的說就是一組網頁（包含HTML網頁、圖片和相關伺服端網頁技術的程式檔案）的集合，其主要功能是回應使用者的HTTP請求，並且與使用者進行互動。 目前Internet擁有多種不同類型的Web應用程式，例如：網路銀行、電子商務網站、搜尋引擎、網路商店、拍賣網站和電子公共論壇等。

6 1-1-1 Web應用程式-資訊傳遞模型 資訊傳遞模型（Information Delivery Model）就是傳統Web網站，所有資訊內容都是使用HTML語言撰寫的靜態HTML網頁，我們可以使用網頁編輯工具或HTML語言來建立網站內容，如下圖所示：

7 1-1-1 Web應用程式-資訊處理模型 資訊處理模型（Information Processing Model）主要的目的是建立互動的Web網站，Web伺服器的角色不單純只是傳遞資料，它是一個完整資訊處理系統的執行平台，我們需要使用伺服端網頁技術（程式碼是在Web伺服器執行的網頁技術），例如：使用ASP.NET技術建立的Web應用程式，如下圖所示：

8 1-1-2 Web服務-說明 Web服務（Web Services）是一種企業級的應用程式，可以透過Internet建立自動機制提供資料交換和工作分享等資源共享能力。Web服務是使用公開標準的通訊協定，提供低成本軟體整合和資料分享功能。

9 1-1-2 Web服務-基礎 Web服務提供一組通用服務，可以同時提供多個客戶端（Clients）使用，這是一組以XML標籤作為傳遞訊息的函數呼叫，客戶端透過HTTP傳送函數呼叫給伺服端，伺服端以HTTP將結果回傳客戶端，可以提供客戶端更多的彈性，因為只需傳遞函數呼叫的訊息，就可以取得所需的資訊。 Web服務也是使用HTTP進行通訊，換句話說，連線Internet的應用程式都可以使用這些服務，我們可以在不同作業系統和不同程式語言開發的應用程式之間，直接與位在不同位置的其他應用程式進行通訊和資料交換。總之，Web服務就是提供一組通用的遠端函數呼叫（RPC，Remote Procedure Calls），讓客戶端使用函數呼叫來執行所需服務。

10 1-1-2 Web服務-應用程式架構 傳統Web服務的客戶端和伺服端是使用「SOAP」（Simple Object Access Protocol）通訊協定來進行通訊，它是一種結合XML標籤訊息和HTTP協定的通訊協定。Web服務的應用程式架構，如下圖所示：

11 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介面在客戶端和伺服端之間交換這些資源。

12 1-1-3 REST與RESTful-架構 RESTful Web服務也稱為RESTful Web API，它是使用REST原則和HTTP實作的Web服務，RESTful對比傳統Web服務來說，屬於一種輕量級的Web服務，其架構是由客戶端和伺服端組成，在客戶端使用HTTP請求伺服端的資源，伺服端負責處理請求且回應資源（Web應用程式是回應HTML網頁），其基本架構如下圖所示：

13 1-1-3 REST與RESTful- RESTful Web API
目前網路上各大網路公司都提供RESTful Web API（或稱RESTful API）來存取提供的服務和資源，例如：Google、Facebook、Twitter、MySpace、Flickr和Picasa等。在programmableweb網站可以查詢各種Web API，其網址為：

14 1-2 Mobile應用程式與行動裝置網站 1-2-1 原生應用程式 1-2-2 Mobile Web應用程式

15 1-2 Mobile應用程式與行動裝置網站 Mobile應用程式（Mobile Applications）也稱為Mobile Apps，它是在智慧型手機或其他行動裝置上執行的應用程式，這些應用程式可能已經預設安裝在行動裝置，或需要使用者自行從網路下載來安裝。 Mobile應用程式是針對行動使用者執行特定功能的精簡型應用程式，可以分成兩大類：原生應用程式和Mobile Web應用程式，事實上，行動裝置瀏覽的Web網站，就是一種Mobile Web應用程式。

16 1-2-1 原生應用程式-說明 原生應用程式（Native Apps）是預設安裝在行動裝置，或使用者自行從網路的軟體商店下載安裝的應用程式，在Android作業系統是Google Play；iOS是Apple Story等軟體商店；微軟是微軟巿集。 一般來說，這些原生應用程式都是使用各平台專屬的開發工具和程式語言來進行開發，Android是使用Java語言、Eclipse IDE和Android SDK；iOS是Objective-C、Xcode IDE和Cocoa等。

17 1-2-1 原生應用程式-種類 原生應用程式可以再細分成兩大類，如下所示：
獨立的Mobile應用程式：這是一些不需要Internet連線就可以獨立執行的應用程式，例如：電話簿、撥號、計算機和離線遊戲等。 Web服務基礎的Mobile應用程式：這是一些需要Internet連線來存取Web服務的應用程式，例如：行事曆、電子郵件、Facebook、Twitter和連線遊戲等。

18 1-2-2 Mobile Web應用程式-說明 如同桌上型電腦的Web應用程式，針對行動裝置也有Mobile Web應用程式，這是指行動裝置啟動瀏覽器執行的Web應用程式，程式是儲存在Web伺服器，使用HTML5、CSS3和伺服端網頁技術來建立，我們需要透過Internet才能執行Mobile Web應用程式，事實上，你也可以說，它就是一個針對行動裝置建立的Mobile Web網站，即本書主題的行動裝置網站。

19 1-2-2 Mobile Web應用程式-差異1 Mobile Web應用程式和第1-1-1節傳統Web應用程式的主要差異，如下所示：
Mobile Web應用程式只是傳統Web應用程式的核心功能，除了行動裝置的螢幕尺寸比較小，沒有足夠空間放置選單、工具列和小工具來提供眾多功能外，智慧型手機和Web應用程式的使用者在需求上也有很大的不同，智慧型手機的使用者主要是在行動中使用應用程式，所以希望能夠在最短時間產生最大的效益，因此只有最有效益、核心或最常使用的功能才會出現在Mobile Web應用程式。

20 1-2-2 Mobile Web應用程式-差異2 Mobile Web應用程式和傳統Web應用程式採用完全不同的使用者互動方式，因為行動裝置擁有觸控螢幕，而且通常都沒有實體鍵盤，以資料輸入來說，Web應用程式可以使用鍵盤和滑鼠；行動裝置的Mobile Web應用程式是使用觸控螢幕、虛擬鍵盤、加速感測器和數位羅盤等，提供完全不同的使用者經驗。 Mobile Web應用程式因為是在行動裝置上執行，再加上智慧型手機大都提供GPS功能，可以輕鬆結合Google地圖（Google Maps）提供精準的定位服務；反之，Web應用程式就算提供定位服務，也只能粗略定位，非常大的誤差造成並沒有實際的使用價值。

21 1-2-2 Mobile Web應用程式-行動裝置網站開發的挑戰1
雖然目前行動裝置使用的作業系統，其內建瀏覽器都支援HTML5、CSS3和JavaScript，但是在開發行動裝置網站時，我們仍然需要面對多種挑戰，如下所示： 螢幕尺寸：行動裝置的螢幕尺寸遠小於桌上型電腦，而且擁有多種不同尺寸和解析度，所以，我們需要針對不同尺寸和解析度的螢幕建立專屬的版面配置。 輸入方式：行動裝置的資料輸入可能是鍵盤、手勢和觸控等多種方式，在建立網站時，我們需要同時考量多種資料輸入方式和巡覽機制。

22 1-2-2 Mobile Web應用程式-行動裝置網站開發的挑戰2
標準規格的相容性：雖然目前行動裝置內建瀏覽器都支援HTML5、CSS3和JavaScript，但是在最新規格的支援上仍然有少許差異，換句話說，對於跨行動裝置的網站來說，我們需要注意是否支援各種行動裝置的瀏覽器。 頻寬：行動裝置的網路頻寬會因位置的訊號而有所差異，再加上頻寬的穩定性比不上桌上型電腦，所以，在建立行動裝置網站時，網站檔案的尺寸也是考量重點。

23 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

24 1-3-1 客戶端網頁技術的基礎-說明 客戶端網頁技術的程式碼或網頁是在使用者客戶端電腦的瀏覽器中執行，而不是Web伺服器，因為瀏覽器本身支援直譯程式，所以可以在瀏覽器執行客戶端網頁技術，如下圖所示：

25 目前巿面上的瀏覽器主要可以分為兩大類，其簡單說明如下所示：
1-3-1 客戶端網頁技術的基礎-瀏覽器種類 目前巿面上的瀏覽器主要可以分為兩大類，其簡單說明如下所示： 個人電腦瀏覽器：在PC或筆記型電腦上執行的瀏覽器，目前桌上型電腦的主要瀏覽器有：Internet Explorer、Firefox、Safair、Opera和Chrome等。 行動網路瀏覽器：在Mobile平台執行的瀏覽器大部分都是WebKit瀏覽器引擎的行動網路瀏覽器（Windows Phone除外），在第3章有進一步的說明。

26 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。.

27 1-3-2 HTML5-標籤 在標籤部分，HTML5支援全新<video>、<audio>和<canvas>標籤來建立多媒體網頁，提供特殊規則來插入和格式化文字、圖形、視訊和音效，例如：使用<section>、<article>和<header>語意標籤讓網頁設計者建立更有結構和人性化的網頁內容，而且，不需安裝Flash外掛程式，就可以在網頁原生播放視訊和音效。

28 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增加不少新的選擇器、多欄和特效功能。

29 1-3-4 JavaScript JavaScript是Netscape開發的一種腳本語言，目前是甲骨文公司的註冊商標，JavaScript使用淺顯的程式語法，只需初學程式設計者即可運用自如，輕鬆在網頁上建立互動效果；Jscript為微軟推出相容JavaScript的腳本語言。 JavaScript語言的定位是一種簡單的腳本語言，其目的是讓不懂程式設計的使用者也一樣可以撰寫JavaScript程式碼來產生互動的網頁內容。

30 1-3-5 DOM物件模型-物件模型 「物件模型」（Object Model）對於HTML網頁來說，就是一種規範如何存取HTML元素、樣式或程式碼的機制，可以將HTML元素、樣式和程式碼視為物件，和定義之間的關係，如下圖所示：

31 1-3-5 DOM物件模型-說明 DOM提供HTML網頁一種存取方式，可以將HTML元素轉換成一棵節點樹，每一個標籤和文字內容是一個一個節點（Nodes），讓我們可以走訪節點來存取HTML元素。 DOM物件模型提供一組標準程式介面，可以讓我們透過這組介面來存取物件的屬性和方法，換句話說，程式設計者可以使用此程式介面來瀏覽HTML網頁或XML文件，也可以新增、刪除和修改節點資料。對於HTML網頁來說。

32 1-3-5 DOM物件模型-組成 DOM主要是由兩大部分組成，如下所示：
DOM Core：提供HTML網頁或XML文件瀏覽、處理和維護階層架構，主要提供兩種功能，如下所示： 瀏覽（Navigator）：能夠在網頁的樹狀結構中走訪節點。 參考（Reference）：能夠存取節點的集合物件。 DOM HTML：HTML網頁專屬的DOM API介面，其目的是將網頁元素都視為一個個物件，以便讓JavaScript等程式語言存取元素來建立動態網頁內容。

33 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技術才受到大家的重視，並且快速成為目前網頁設計技術上的一顆耀眼明星。

34 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請求。

35 1-3-7 jQuery jQuery是一個JavaScript函數庫，提供網頁設計者另一種更簡潔方式來撰寫JavaScript程式碼和擴充JavaScript的功能。jQuery強調JavaScript與HTML之間的交互作用，可以使用簡潔程式碼來處理DOM，走訪網頁元素來更改外觀、新增特效、事件處理、動畫和支援Ajax來加速Web應用程式的開發。 當然jQuery的功能不只如此，其基本的設計精神就是以更彈性方式寫出最少程式碼來建立動態網頁。簡單的說，jQuery是在JavaScript和HTML之上新增一層程式介面，可以讓程式開發者使用簡潔程式碼來處理DOM，例如：事件處理、顯示與隱藏HTML元素、更改元素屬性、新增CSS樣式、加上動態效果或更改色彩。

36 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標籤就可以建立一致外觀佈景的使用介面。

37 1-4 伺服端ASP.NET網頁技術 1-4-1 伺服端網頁技術的基礎 1-4-2 微軟的.NET Framework
1-4-4 ASP.NET的Mobile Web支援

38 1-4-1 伺服端網頁技術的基礎-說明 伺服端網頁技術簡單的說是在Web伺服器上執行的應用程式，而不是在客戶端電腦的瀏覽器執行，如下圖所示：

39 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應用程式。

40 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的一種伺服端網頁技術。

41 1-4-2 微軟的.NET Framework-說明
.NET Framework是微軟下一個世代的程式開發平台，它是由CLR和.NET Framework類別函數庫所組成。當使用.NET Framework支援的程式語言編寫程式碼檔案後，就可以使用.NET編譯程式進行編譯，不過，並不是編譯成CPU可執行的機器語言，而是一種中間程式語言稱為「MSIL」（Microsoft Intermediate Language）。

42 1-4-2 微軟的.NET Framework-圖例
當需要執行程式時，CLR使用「JIT」（Just In Time）編譯程式將MSIL轉換成機器語言的程式碼來執行程式，如下圖所示：

43 1-4-3 ASP.NET技術的三種開發模型-圖例
ASP.NET是架構在.NET Framework的CLR平台的網頁技術，其主要目的是建立Web應用程式。目前ASP.NET共有三種開發模型來建立ASP.NET應用程式，如下圖所示：

44 1-4-3 ASP.NET技術的三種開發模型- ASP.NET Web Forms開發模型
傳統ASP.NET開發模型，這是一種事件驅動和伺服端控制項的開發模型，其目的是隱藏HTTP 請求，以便讓我們如同建立桌上型Windows應用程式一般的建立Web應用程式，不過，因為ASP.NET Web Forms是使用伺服端控制項來全權處理頁面的顯示，所以搭配客戶端網頁技術會有很多限制，除非你不使用伺服端控制項和ViewState。

45 1-4-3 ASP.NET技術的三種開發模型- ASP.NET Web Pages開發模型
ASP.NET開發模型的最新成員，這是一種以頁面為中心的開發模型，類似ASP和PHP技術，可以讓開發者全權控制網頁的顯示，和整合客戶端網頁技術的各種套件，並且使用內建範本和幫助者類別來快速建立Web應用程式。

46 1-4-3 ASP.NET技術的三種開發模型- ASP.NET MVC開發模型
使用著名的MVC設計模式來建立Web應用程式，可以將Web應用程式分割成三大部分Models、Views和Controllers，分別是資料、顯示和處理請求，在顯示部分預設是和Web Pages開發模型使用相同的Razor語法。

47 1-4-4 ASP.NET的Mobile Web支援-建立範本
對於網站開發者來說，建立跨行動裝置網站可能需要建立多種不同的版面配置來套用在不同尺寸的行動裝置螢幕，基本上，我們有兩種方式來建立不同的範本，如下所示： 直接從伺服端傳回正確格式的頁面，我們需要在伺服端偵測行動裝置的平台和使用的瀏覽器，以便產生所需尺寸的頁面內容。 在客戶端使用CSS樣式格式化不同裝置的網頁內容，即使用第2章的Media Queries，依據不同螢幕尺寸來套用不同的CSS樣式。

48 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框架，可以幫助我們建立跨行動裝置平台的網站。

49 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建立的伺服端控制項。

50 1-4-4 ASP.NET的Mobile Web支援- ASP.NET Web Pages開發模型
因為使用與MVC相同的Razor引擎，可以讓開發者全權控制網頁的顯示來整合jQuery Mobile框架，對於中小型的跨行動裝置網站，Web Pages開發模型是ASP.NET技術的最佳選擇。

51 1-4-4 ASP.NET的Mobile Web支援- ASP.NET MVC開發模型
從MVC 3開始，Views的預設檢視引擎已經改為Razor引擎，可以讓使用者全權處理網頁的顯示，換句話說，我們可以完全整合jQuery Mobile框架來建立企業級的跨行動裝置網站，事實上，新版ASP.NET 4.5的Mobile支援，大部分是針對MVC；並不是Web Forms開發模型。

52 1-5 使用WebMatrix整合開發工具 1-5-1 WebMatrix開發工具的基礎 1-5-2 下載與安裝WebMatrix開發工具
1-5-4 在檔案工作區新增程式檔案 1-5-5 更改預設的站台位置

53 1-5-1 WebMatrix開發工具的基礎-說明
WebMatrix是微軟開發的Web開發平台，這是一組免費的整合開發工具和完整Web開發環境，可以讓網站開發者快速和容易的建立動態和資料驅動的Web網站，而不用使用複雜的Visual Studio。 WebMatrix不只支援ASP.NET技術的網站開發，也支援其他伺服端網頁技術，例如：PHP，加上高度的擴充性，可以輕易整合其他廠商提供的功能，例如：Twitter、Facebook、Amazon、Windows Azure、Groupon和Paypal等。

54 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的執行結果。

55 1-5-2 下載與安裝WebMatrix開發工具-下載
WebMatrix 2可以從網路上免費下載，其下載網址是： Download】鈕下載WebMatrix 2。

56 1-5-2 下載與安裝WebMatrix開發工具-安裝
WebMatrix的安裝是使用微軟的Web Platform Installer，這是一個免費的應用程式，可以幫助我們快速安裝和設定相關的Web開發工具或套件，目前的最新版本是WebMatrix 2。

57 1-5-3 啟動WebMatrix建立新站台-步驟
筆者準備使用WebMatrix 2建立名為HelloWeb的站台，WebMatrix預設是使用範本來建立站台，其建立步驟如下所示： Step 1：請在Windows 8開始頁面，按一下【Microsoft WebMatrix】動態磚，稍等一下，可以啟動WebMatrix 2，看到「快速入門」視窗。 Step 2：選【範本】，可以看到預設提供的站台範本清單。 Step 3：在左邊選【ASP.NET】，可以在右邊看到範本清單，請選【空白網站】後，在下方【站台名稱】欄輸入【HelloWeb】，按【下一步】鈕，可以看到正在安裝HelloWeb，完成後，就可以進入開發工具的使用介面。

58 1-5-3 啟動WebMatrix建立新站台-圖例

59 1-5-4 在檔案工作區新增程式檔案 在WebMatrix站台選【檔案】工作區，就可以讓我們新增程式檔案和資料夾，筆者準備新增名為Page.cshtml的ASP.NET程式，.cshtml是Web Pages開發模型使用C#語言的副檔名；Visual Basic語言是.vbhtml ，如下圖所示：

60 1-5-5 更改預設的站台位置 WebMatrix 2預設新增的站台是位在「C:\Users\<使用者名稱>\Documents\My Web Sites\」資料夾，為了方便管理站台，我們可以更改預設的站台位置，以便將站台的檔案儲存在指定的資料夾，以本書為例是位在「D:\ASP.NET_Mobile」資料夾，如右圖所示：

61 1-6 使用VS Express for Web整合開發工具
1-6-2 啟動與建立ASP.NET網站 1-6-3 開啟網站加入ASP.NET程式

62 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應用程式。

63 1-6-1 下載與安裝VS Express for Web-下載
請選【Visual Studio Express 2012 for Web】後，再選【中文】，就可以點選【立即下載】超連結，下載正體中文版的ISO檔，然後使用燒錄程式將ISO檔燒成安裝光碟。

64 1-6-1 下載與安裝VS Express for Web-安裝
VS Express for Web中文版可以建立微軟ASP.NET三種開發模型的開發環境，以下載燒錄的安裝光碟為例，如下圖所示：

65 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網站的首頁

66 1-6-2 啟動與建立ASP.NET網站-步驟一 請在Windows 8開始頁面，按一下【VS Express for Web】動態磚，稍等一下，因為是第1次啟動，可以看到產品註冊畫面（註冊是完全免費，如果沒有註冊只能使用30天）。

67 1-6-2 啟動與建立ASP.NET網站-步驟二 在啟動VS Express for Web後，我們可以新增ASP.NET網站，請執行「檔案>新網站」指令，可以看到「新網站」對話方塊。

68 1-6-2 啟動與建立ASP.NET網站-步驟三 執行「檔案>在瀏覽器中檢視」指令或在檔案上執行【右】鍵快顯功能表的【在瀏覽器中檢視】指令，可以看到瀏覽器顯示的執行結果。

69 1-6-3 開啟網站加入ASP.NET程式 VS Express for Web可以直接開啟WebMatrix 2建立的站台來新增ASP.NET程式，執行「檔案>開啟網站」指令，可以看到「開啟網站」對話方塊。