第 1 章 asp.net、vwd與html的基礎

第第 11 章章 ASP.NETASP.NET、、 VWDVWD與與

HTMLHTML的基礎的基礎

第第 11 章章 ASP.NETASP.NET、、 VWDVWD與與HTMLHTML的基礎的基礎

1-1 Web1-1 Web 應用程式的基礎應用程式的基礎 1-2 1-2 網頁設計技術網頁設計技術 1-3 ASP.NET1-3 ASP.NET與與 .NET Framework.NET Framework 1-4 1-4 建立建立 ASP.NETASP.NET 開發環境開發環境 1-5 Visual Web Developer1-5 Visual Web Developer的基本使用的基本使用 1-6 1-6 建立建立 HTMLHTML網頁和網頁和 XMLXML檔檔

1-1 Web1-1 Web 應用程式的基礎應用程式的基礎 1-1-1 WWW1-1-1 WWW 的基礎的基礎 1-1-2 WWW1-1-2 WWW 架構與架構與 HTTPHTTP 通訊協定通訊協定 1-1-3 Web1-1-3 Web 應用程式應用程式

1-1-1 WWW1-1-1 WWW 的基礎的基礎 -- 說明說明「「 WWWWWW 」（」（ World Wide WebWorld Wide Web ，簡稱，簡稱 WebWeb ））

全球資訊網是全球資訊網是 19891989 年歐洲高能粒子協會一個研年歐洲高能粒子協會一個研究小組所開發的究小組所開發的 InternetInternet 服務，服務， WebWeb 能夠在網路能夠在網路上傳送圖片、文字、影像和聲音等多媒體資料，上傳送圖片、文字、影像和聲音等多媒體資料，這是由這是由 Tim Berners LeeTim Berners Lee 領導的小組開發的主從領導的小組開發的主從架構和分散式網路服務系統。架構和分散式網路服務系統。

WWWWWW 服務是目前服務是目前 InternetInternet 的熱門服務之一，它的熱門服務之一，它之所以熱門的原因，就是因為它打破了距離的障之所以熱門的原因，就是因為它打破了距離的障礙，使用者只需待在家中，就可以透過瀏覽程式礙，使用者只需待在家中，就可以透過瀏覽程式和和 InternetInternet ，輕鬆存取位在全世界各個角落的資，輕鬆存取位在全世界各個角落的資源。源。

1-1-1 WWW1-1-1 WWW 的基礎的基礎 -- 相關名詞相關名詞常見名詞說明首頁英文為 Homepage，指的是連線Web伺服器後下載的第 1頁文件、網

頁或稱為Web畫面、HTML文件或 HTML網頁埠號英文是 Port，我們可以將它視同電視頻道，不同頻道提供不同的 Internet

服務，例如：WWW是 80；FTP是 21；SMTP是 25和 POP3是 110

URLs 全名 Uniform Resource Locations的萬用資源定位器，可以指名連線網站和其他 Internet資源的位址，其格式為【http://www.hinet.net】以「://」

符號分隔，符號前為通訊協定，之後為伺服器的網域名稱HTTP 全名 Hypertext Transfer Protocol，這是WWW使用的通訊協定，Web

伺服器和瀏覽程式間就是透過 HTTP通訊協定來進行資料交換HTML 全名 Hypertext Markup Language標示語言，一種編排文件的語言，其

主要目的是編排文件內容，在瀏覽程式顯示的內容就是使用 HTML

語言所製作的文件XML 全名 Extensible Markup Language可擴展標示語言，一種類似 HTML

的標籤語言，不過，XML並不是用來編排內容，而是用來描述資料XHTML 全名 Extensible Hypertext Markup Language，XHTML的目的是為了

取代 HTML，它是一種結合 XML語法的下一世代 HTML

1-1-2 WWW1-1-2 WWW 架構與架構與 HTTPHTTP 通訊協通訊協定定 - HTTP- HTTP 通訊協定通訊協定

HTTPHTTP 通訊協定（通訊協定（ Hypertext Transfer Hypertext Transfer ProtocolProtocol ）是一種在伺服端（）是一種在伺服端（ ServerServer ）和）和客戶端（客戶端（ ClientClient ）之間傳送資料的通訊協）之間傳送資料的通訊協定，如下圖所示：定，如下圖所示：

1-1-2 WWW1-1-2 WWW 架構與架構與 HTTPHTTP 通訊協通訊協定定 - HTTP- HTTP 通訊協定的特性通訊協定的特性

HTTPHTTP 通訊協定並不會持續保持連線：只有當瀏通訊協定並不會持續保持連線：只有當瀏覽程式提出請求時才建立連線，在請求後就斷線覽程式提出請求時才建立連線，在請求後就斷線等待回應，每一次請求和回應都需要事先建立連等待回應，每一次請求和回應都需要事先建立連線。線。

HTTPHTTP 通訊協定並不會保留狀態：因為通訊協定並不會保留狀態：因為 HTTPHTTP 通通訊協定並不會保持連線，所以在連線時，伺服端訊協定並不會保持連線，所以在連線時，伺服端和客戶端互相知道對方，一旦請求結束，就互不和客戶端互相知道對方，一旦請求結束，就互不相干，所以使用者狀態並不會保留，每一次連線相干，所以使用者狀態並不會保留，每一次連線都如同是一位新使用者。都如同是一位新使用者。

1-1-2 WWW1-1-2 WWW 架構與架構與 HTTPHTTP 通訊協通訊協定定 - WWW- WWW 架構架構

WWWWWW 全球資訊網是一種主從架構系統，主端是全球資訊網是一種主從架構系統，主端是指伺服端（指伺服端（ ServerServer ）的）的 WebWeb 伺服器，儲存伺服器，儲存HTMLHTML 網頁、圖片和相關檔案，從端是客戶端網頁、圖片和相關檔案，從端是客戶端（（ ClientClient ），使用者執行瀏覽程式負責和伺服器），使用者執行瀏覽程式負責和伺服器溝通和讀取伺服器的資料，其傳送的是溝通和讀取伺服器的資料，其傳送的是 HTMLHTML 網網頁、圖檔和相關檔案，如下圖所示：頁、圖檔和相關檔案，如下圖所示：

1-1-3 Web1-1-3 Web 應用程式應用程式 -- 說明說明 WebWeb 應用程式（應用程式（ Web ApplicationWeb Application ）簡單的說是）簡單的說是

一組網頁（包含一組網頁（包含 HTMLHTML 網頁、圖片和相關伺服端網頁、圖片和相關伺服端網頁技術的程式檔案）的集合，請注意！網頁技術的程式檔案）的集合，請注意！ WebWeb 應應用程式是在用程式是在 WebWeb 伺服器執行，並不是在客戶端電伺服器執行，並不是在客戶端電腦的瀏覽程式執行。腦的瀏覽程式執行。

WebWeb 應用程式主要的功能是回應使用者的請求，應用程式主要的功能是回應使用者的請求，並且與使用者進行互動，以並且與使用者進行互動，以 ASP.NETASP.NET 技術來說，技術來說，就是建立就是建立 ASP.NETASP.NET 網站的網站的 WebWeb 應用程式。目前應用程式。目前InternetInternet 擁有多種不同類型的擁有多種不同類型的 WebWeb 應用程式，例應用程式，例如：網路銀行、電子商務網站、搜尋引擎、網路如：網路銀行、電子商務網站、搜尋引擎、網路商店、拍賣網站和電子公共論壇等。商店、拍賣網站和電子公共論壇等。

1-1-3 Web1-1-3 Web 應用程式應用程式 -- 資訊傳遞模型資訊傳遞模型資訊傳遞模型（資訊傳遞模型（ Information Delivery ModelInformation Delivery Model ）就）就

是傳統的是傳統的 WebWeb 網站，其所有的資訊內容都是使用網站，其所有的資訊內容都是使用HTMLHTML 語言撰寫的靜態語言撰寫的靜態 HTMLHTML 網頁，我們可以直網頁，我們可以直接使用網頁編輯工具或接使用網頁編輯工具或 HTMLHTML 語言來建立網站的語言來建立網站的內容，如下圖所示：內容，如下圖所示：

1-1-3 Web1-1-3 Web 應用程式應用程式 -- 資訊處理模型資訊處理模型資訊處理模型（資訊處理模型（ Information Processing ModeInformation Processing Mode

ll ）主要的目的是建立互動的）主要的目的是建立互動的 WebWeb 網站內容，此網站內容，此時時 WebWeb 伺服器角色不單純只是傳遞資料，它是一伺服器角色不單純只是傳遞資料，它是一個完整資訊處理系統的執行平台，我們需要使用個完整資訊處理系統的執行平台，我們需要使用伺服端網頁技術，例如：使用伺服端網頁技術，例如：使用 ASP.NETASP.NET 技術建技術建立的立的 WebWeb 應用程式，如下圖所示：應用程式，如下圖所示：

1-2 1-2 網頁設計技術網頁設計技術 1-2-1 1-2-1 客戶端網頁技術客戶端網頁技術 1-2-2 1-2-2 伺服端網頁技術伺服端網頁技術

1-2-1 1-2-1 客戶端網頁技術客戶端網頁技術 -- 說明說明客戶端網頁技術是指程式碼或程式是在使用者客客戶端網頁技術是指程式碼或程式是在使用者客

戶端電腦的瀏覽程式中執行，因為瀏覽程式本身戶端電腦的瀏覽程式中執行，因為瀏覽程式本身即支援直譯程式，所以可以執行客戶端網頁技術，即支援直譯程式，所以可以執行客戶端網頁技術，如下圖所示：如下圖所示：

1-2-1 1-2-1 客戶端網頁技術客戶端網頁技術 -Java -Java AppletApplet

JavaJava 語言是語言是 SunSun 公司開發的程式語言，這種語言開公司開發的程式語言，這種語言開發的應用程式不受硬體限制，可以在不同平台的硬發的應用程式不受硬體限制，可以在不同平台的硬體設備上執行。體設備上執行。

當我們使用當我們使用 JavaJava 語言撰寫語言撰寫 Java AppletJava Applet 程式後，就程式後，就可以使用編譯程式將原始程式碼編譯成位元組碼後，可以使用編譯程式將原始程式碼編譯成位元組碼後，即「即「 Java AppletJava Applet 」（一種」（一種 JavaJava 應用程式），在瀏應用程式），在瀏覽程式需要使用覽程式需要使用 JavaJava 直譯程式「直譯程式「 JVMJVM 」（」（ Java Java Virtual MachineVirtual Machine ）來執行，目前）來執行，目前 Internet Explorer Internet Explorer 3.03.0版以上都可以執行版以上都可以執行 Java AppletJava Applet ，不，不過，過， Internet Explorer 6.xInternet Explorer 6.x 以上的版本需自行安裝以上的版本需自行安裝JVMJVM 。。

1-2-1 1-2-1 客戶端網頁技術客戶端網頁技術 -JavaScript-JavaScript（（ JscriptJscript ））

JavaScriptJavaScript是是 NetscapeNetscape 開發的一種開發的一種 ScriptScript 腳本語腳本語言，使用淺顯的程式語法，只需初學程式設計者言，使用淺顯的程式語法，只需初學程式設計者即可運用自如，輕鬆在網頁上建立互動效果；即可運用自如，輕鬆在網頁上建立互動效果；JscriptJscript 為微軟推出相容為微軟推出相容 JavaScriptJavaScript的的 ScriptScript 語言，語言，簡單的說，簡單的說， NetscapeNetscape或或 Mozilla FirefoxMozilla Firefox 支援支援JavaScriptJavaScript；； Internet ExplorerInternet Explorer 支援支援 JscriptJscript 。。

JavaScriptJavaScript 定位在簡單的定位在簡單的 ScriptScript 語言，其目的是語言，其目的是讓不懂程式設計的使用者也一樣可以撰寫讓不懂程式設計的使用者也一樣可以撰寫JavaScriptJavaScript 程式碼來產生互動的網頁內容。程式碼來產生互動的網頁內容。

1-2-1 1-2-1 客戶端網頁技術客戶端網頁技術 -ActionScript-ActionScript與與 FlashFlash

ActionScriptActionScript是是 MacromediaMacromedia 公司開發的一公司開發的一種種 ScriptScript 腳本語言，它可以讓腳本語言，它可以讓 FlashFlash 動畫動畫電影檔產生互動效果，這是一種類似電影檔產生互動效果，這是一種類似JavaScriptJavaScript 語法的腳本語言。語法的腳本語言。

FlashFlash是是 MacromediaMacromedia 公司的軟體名稱，可公司的軟體名稱，可以用來建立動畫效果，瀏覽程式只需安裝以用來建立動畫效果，瀏覽程式只需安裝FlashFlash 播放程式，就可以在網頁顯示播放程式，就可以在網頁顯示 FlashFlash檔案建立的動畫效果。換句話說，檔案建立的動畫效果。換句話說， FlashFlash 加加上上 ActionScriptActionScript ，就可以輕鬆建立動畫效果，就可以輕鬆建立動畫效果的網頁應用程式。的網頁應用程式。

1-2-1 1-2-1 客戶端網頁技術客戶端網頁技術 -VBScript-VBScript

VBScriptVBScript 屬於屬於 Visual BasicVisual Basic 語言家族的成語言家族的成員，全名員，全名 Microsoft Visual Basic Scripting Microsoft Visual Basic Scripting EditionEdition ，簡稱，簡稱 VBScriptVBScript 。。

VBScriptVBScript 是一種完全免費的直譯程式語言，是一種完全免費的直譯程式語言，也是一種在瀏覽程式執行的網頁語言，能也是一種在瀏覽程式執行的網頁語言，能夠讓網頁設計者開發互動多媒體的網頁內夠讓網頁設計者開發互動多媒體的網頁內容，目前只有微軟容，目前只有微軟 Internet ExplorerInternet Explorer 瀏覽程瀏覽程式支援式支援 VBScriptVBScript 。。

1-2-1 1-2-1 客戶端網頁技術客戶端網頁技術 -DHTML-DHTML

「「 DHTMLDHTML 」（」（ Dynamic HTMLDynamic HTML ）是一種在瀏覽）是一種在瀏覽程式建立程式建立 HTMLHTML 動態效果的技術。動態效果的技術。 DHTMLDHTML 技術技術主要是由三種元素所組成：主要是由三種元素所組成： HTMLHTML、、 CSSCSS和和ScriptScript 語言，如下所示：語言，如下所示： HTMLHTML：： HTML 4.0xHTML 4.0x版的版的 HTMLHTML標籤，標籤， DHTMLDHTML 只是只是

使用使用 CSSCSS和和 ScriptScript 語言來擴充語言來擴充 HTMLHTML標籤。標籤。 CSSCSS ：「：「 Cascading Style SheetsCascading Style Sheets 」簡稱」簡稱 CSSCSS ，中文，中文

稱為層級式樣式表，稱為層級式樣式表， CSSCSS 能夠重新定義能夠重新定義 HTMLHTML標籤，標籤，讓讓 HTMLHTML標籤顯示不同的編排格式。標籤顯示不同的編排格式。

ScriptScript 語言：主要是指語言：主要是指 VBScriptVBScript或或JavaScriptJavaScript，， Internet ExplorerInternet Explorer 瀏覽程式就是瀏覽程式就是 VBScriptVBScript和和 JscriptJscript 。。

1-2-1 1-2-1 客戶端網頁技術客戶端網頁技術 -Ajax-Ajax

AjaxAjax是是 Asynchronous JavaScript And XMLAsynchronous JavaScript And XML 的縮的縮寫，譯成中文就是非同步寫，譯成中文就是非同步 JavaScriptJavaScript和和 XMLXML 技術。技術。AjaxAjax 技術是由多種網頁技術所組成，相關技術的技術是由多種網頁技術所組成，相關技術的說明如下所示：說明如下所示： HTMLHTML和和 CSSCSS ：在瀏覽程式顯示使用者介面和呈現相：在瀏覽程式顯示使用者介面和呈現相

關資料。關資料。 XMLXML ：伺服端使用：伺服端使用 XMLXML 文件來非同步傳遞資料。文件來非同步傳遞資料。 XML DOMXML DOM ：當瀏覽端非同步取得：當瀏覽端非同步取得 XMLXML 資料後，可以資料後，可以

進一步使用進一步使用 JavaScriptJavaScript 程式碼和程式碼和 XML DOMXML DOM 取出所需取出所需的資訊。的資訊。

XMLHttpRequestXMLHttpRequest 物件：物件： JavaScriptJavaScript 程式碼是透過程式碼是透過XMLHttpRequestXMLHttpRequest 物件來建立非同步的物件來建立非同步的 HTTPHTTP 請求。請求。

1-2-2 1-2-2 伺服端網頁技術伺服端網頁技術 -- 說明說明伺服端網頁技術簡單的說是在伺服端網頁技術簡單的說是在 WebWeb 伺服器伺服器

上執行的應用程式，而不是在客戶端電腦上執行的應用程式，而不是在客戶端電腦的瀏覽程式執行，如下圖所示：的瀏覽程式執行，如下圖所示：

1-2-2 1-2-2 伺服端網頁技術伺服端網頁技術 -CGI-CGI

「「 CGICGI 」（」（ Common Gateway InterfaceCommon Gateway Interface ）共通）共通匣道介面提供匣道介面提供 WebWeb 伺服器執行外部程式的管伺服器執行外部程式的管道，道， CGICGI 應用程式是一種外部程式的執行檔，能應用程式是一種外部程式的執行檔，能夠使用各種程式語言來開發，例如：夠使用各種程式語言來開發，例如： Visual BasicVisual Basic、、CC、、 C++C++和和 PerlPerl ，程式需要編譯成執行檔案，以，程式需要編譯成執行檔案，以便在伺服端執行。其應用程式架構，如下圖所示：便在伺服端執行。其應用程式架構，如下圖所示：

1-2-2 1-2-2 伺服端網頁技術伺服端網頁技術 -ASP-ASP

「「 ASPASP 」（」（ Active Server PagesActive Server Pages ）直接）直接從英文字面上解釋是一種讓網頁在伺服器從英文字面上解釋是一種讓網頁在伺服器上動起來的技術，能夠將上動起來的技術，能夠將 ScriptScript 語言直接語言直接內嵌內嵌 HTMLHTML標籤的網頁，在伺服端產生動標籤的網頁，在伺服端產生動態的網頁內容。態的網頁內容。

ASPASP 技術也可以使用多種語言來建立，例技術也可以使用多種語言來建立，例如：如： JavaScriptJavaScript和和 VBScriptVBScript。。 ASPASP 技術技術建立的網頁程式並不是執行檔，而是一種建立的網頁程式並不是執行檔，而是一種在伺服端以直譯方式執行的網頁技術。在伺服端以直譯方式執行的網頁技術。

1-2-2 1-2-2 伺服端網頁技術伺服端網頁技術 --ASP.NETASP.NET

ASP.NETASP.NET 是繼是繼 ASP 3.0ASP 3.0 後，微軟所開發的後，微軟所開發的伺服端網頁技術，使用「伺服端網頁技術，使用「 CLRCLR 」」（（ Common Language RuntimeCommon Language Runtime ）架構）架構的的 .NET.NET 程式設計平台，只需支援程式設計平台，只需支援 CLRCLR 的的語言就可以在伺服端建立語言就可以在伺服端建立 WebWeb 應用程式，應用程式，目前最新版是目前最新版是 3.53.5版。版。

1-2-2 1-2-2 伺服端網頁技術伺服端網頁技術 -PHP-PHP

PHPPHP 是「是「 PHP: Hypertext PreprocessorPHP: Hypertext Preprocessor 」」的簡稱，它是一種通用、開放原始碼的簡稱，它是一種通用、開放原始碼（（ Open SourceOpen Source ）的伺服端）的伺服端 ScriptScript 語言，語言，可以直接內嵌於可以直接內嵌於 HTMLHTML 網頁，特別適用在網頁，特別適用在WebWeb 網站的開發，主要是使用在網站的開發，主要是使用在 Linux/UniLinux/Unixx 作業系統的伺服端網頁技術，目前作業系統的伺服端網頁技術，目前WindowsWindows 作業系統一樣也可以執行作業系統一樣也可以執行 PHPPHP ，，而且支援微軟的而且支援微軟的 IISIIS 伺服器。伺服器。

1-2-2 1-2-2 伺服端網頁技術伺服端網頁技術 -JSP-JSP

「「 JSPJSP 」（」（ Java Server PagesJava Server Pages ）是昇陽）是昇陽的伺服端技術，它是的伺服端技術，它是 JavaJava 家族中和家族中和 ASPASP一較長短的網頁技術，以一較長短的網頁技術，以 JavaJava 語言來語言來說，說， Java AppletJava Applet 是下載到客戶端執行的程是下載到客戶端執行的程式檔；式檔； Java ServletJava Servlet 是在伺服端執行；是在伺服端執行；JSPJSP 是結合是結合 HTMLHTML和和 Java ServletJava Servlet 的一種的一種伺服端網頁技術。伺服端網頁技術。

1-3 ASP.NET1-3 ASP.NET與與 .NET .NET FrameworkFramework

1-3-1 ASP.NET1-3-1 ASP.NET 的基礎的基礎 1-3-2 .NET Framework1-3-2 .NET Framework

1-3-1 ASP.NET1-3-1 ASP.NET 的基礎的基礎 ASP.NETASP.NET 是架構在是架構在 .NET Framework.NET Framework 的「的「 CLCL

RR 」（」（ Common Language RuntimeCommon Language Runtime ）平台的網）平台的網頁技術，主要目的是用來建立頁技術，主要目的是用來建立 WebWeb 應用程式。其應用程式。其特點如下所示：特點如下所示：執行效能的改進。執行效能的改進。事件驅動程式設計模型。事件驅動程式設計模型。強大的功能和擴充性。強大的功能和擴充性。程式語言無關。程式語言無關。更強大的伺服端功能。更強大的伺服端功能。網站的一致化設計。網站的一致化設計。網站的會員管理。網站的會員管理。網站的個人化程序。網站的個人化程序。資料處理控制項。資料處理控制項。更多的網站設定和管理工具。更多的網站設定和管理工具。

1-3-2 .NET Framework-1-3-2 .NET Framework- 說明說明 .NET Framework.NET Framework 是微軟下一個世代的程式是微軟下一個世代的程式

開發平台，它是由開發平台，它是由 CLRCLR和和 .NET .NET FrameworkFramework 類別函式庫所組成。當我們使類別函式庫所組成。當我們使用用 .NET Framework.NET Framework 支援的程式語言編寫支援的程式語言編寫程式碼檔案後，就可以使用程式碼檔案後，就可以使用 .NET.NET 編譯程式編譯程式進行編譯，不過，進行編譯，不過， .NET Framework.NET Framework 並不並不是編譯成是編譯成 CPUCPU 可執行的機器語言，而是一可執行的機器語言，而是一種中間程式語言稱為「種中間程式語言稱為「 MSILMSIL 」」（（ Microsoft Intermediate LanguageMicrosoft Intermediate Language ）。）。

1-3-2 .NET Framework-1-3-2 .NET Framework- 圖例圖例當需要執行程式時，當需要執行程式時， CLRCLR 是使用「是使用「 JITJIT 」（」（ Just Just

In TimeIn Time ）編譯程式將）編譯程式將 MSILMSIL轉換成機器語言來執轉換成機器語言來執行程式，如下圖所示：行程式，如下圖所示：

1-3-2 .NET Framework-1-3-2 .NET Framework- 類別函式庫類別函式庫 .NET Framework.NET Framework類別函式庫提供龐大的類類別函式庫提供龐大的類別物件，可以幫助我們建立各種不同的應別物件，可以幫助我們建立各種不同的應用程式，只需支援用程式，只需支援 .NET Framework.NET Framework的程的程式語言都可以使用類別函式庫的物件和方式語言都可以使用類別函式庫的物件和方法。法。

1-4 1-4 建立建立 ASP.NETASP.NET 開發環境開發環境 1-4-1 1-4-1 微軟的微軟的 Visual StudioVisual Studio 1-4-2 1-4-2 安裝安裝 Visual Web Developer ExpressVisual Web Developer Express版版

1-4-1 1-4-1 微軟的微軟的 Visual Studio-Visual Studio- 說說明明

微軟程式語言的整合開發環境稱為微軟程式語言的整合開發環境稱為 Visual StudioVisual Studio ，，它是微軟公司開發的應用程式整合開發環境，能它是微軟公司開發的應用程式整合開發環境，能夠在同一套應用程式編輯、編譯、除錯和測夠在同一套應用程式編輯、編譯、除錯和測試試 .NET.NET 語言所建立的應用程式，在其產品線的語言所建立的應用程式，在其產品線的Visual Web DeveloperVisual Web Developer 是一套用來開發是一套用來開發 ASP.NETASP.NET網站（即網站（即 WebWeb 應用程式）的整合開發環境。應用程式）的整合開發環境。

Visual StudioVisual Studio 是一套支援是一套支援 .NET Framework.NET Framework 的整的整合開發環境，可以使用合開發環境，可以使用 C#C#、、 Visual BasicVisual Basic、、 C+C+++和和 J#J# 等語言來建立等語言來建立 WindowsWindows、、 ASP.NETASP.NET 、主、主控台和控台和 Web ServicesWeb Services 等各種不同的應用程式。等各種不同的應用程式。

1-4-1 1-4-1 微軟的微軟的 Visual Studio-Visual Studio- 圖圖例例

在在 Visual StudioVisual Studio 整合開發環境建立的應用整合開發環境建立的應用程式是在程式是在 .NET Framework.NET Framework的的 CLRCLR 平台上平台上執行，如下圖所示：執行，如下圖所示：

1-4-1 1-4-1 微軟的微軟的 Visual Studio-Visual Studio- 功功能能

Visual StudioVisual Studio 是一套功能強大的整合開發是一套功能強大的整合開發工具，其主要功能的說明，如下所示：工具，其主要功能的說明，如下所示：多種程式語言的整合開發環境。多種程式語言的整合開發環境。強大的方案與專案管理。強大的方案與專案管理。提供現成的專案或網站範本。提供現成的專案或網站範本。視覺化表單設計介面。視覺化表單設計介面。 IntelliSenseIntelliSense 智慧程式碼輸入。智慧程式碼輸入。完整除錯功能。完整除錯功能。

1-4-2 1-4-2 安裝安裝 Visual Web Developer Visual Web Developer ExpressExpress版版 -- 說明說明

雖然不是只有雖然不是只有 Visual Web DeveloperVisual Web Developer 才能建立才能建立ASP.NETASP.NET 網站，因為所有網頁和設定檔都是一般網站，因為所有網頁和設定檔都是一般文字檔案，我們只需在文字檔案，我們只需在 WindowsWindows作業系統安作業系統安裝裝 .NET Framework.NET Framework 後，即可直接使用後，即可直接使用 WindowsWindows作業系統的記事本來建立作業系統的記事本來建立 ASP.NETASP.NET 網站。網站。

但是在實務上，但是在實務上， Visual Web DeveloperVisual Web Developer 開發工具開發工具是一套視覺化的網站開發工具，可以幫助我們快是一套視覺化的網站開發工具，可以幫助我們快速建立速建立 ASP.NETASP.NET 網頁，自動產生標籤的程式碼，網頁，自動產生標籤的程式碼，而不用自行重複輸入各種控制項的難記標籤名稱而不用自行重複輸入各種控制項的難記標籤名稱和屬性，而且功能強大網站管理介面，可以讓我和屬性，而且功能強大網站管理介面，可以讓我們輕鬆維護與部署們輕鬆維護與部署 ASP.NETASP.NET 網站。網站。

1-4-2 1-4-2 安裝安裝 Visual Web Developer Visual Web Developer ExpressExpress版版 -- 說明說明

Visual Web Developer 2008 ExpressVisual Web Developer 2008 Express 中文版支援中文版支援Windows VistaWindows Vista 作業系統；如果使用作業系統；如果使用 Windows Windows XPXP作業系統，需要作業系統，需要 SP2SP2 以上版本才能安裝；以上版本才能安裝；Windows Server 2003Windows Server 2003 需要需要 SP1SP1 。。

請進入請進入 ExpressExpress版版 WebWeb安裝的安裝的 URLURL 網址：網址：http://www.microsoft.com/express/download/http://www.microsoft.com/express/download/ ，，如下圖所示：如下圖所示：

1-5 Visual Web Developer1-5 Visual Web Developer 的基的基本使用本使用

1-5-1 1-5-1 啟動與關閉啟動與關閉 Visual Web DeveloperVisual Web Developer 1-5-2 1-5-2 建立建立 ASP.NETASP.NET 網站網站 1-5-3 1-5-3 開啟開啟 ASP.NETASP.NET 網站網站

1-5-1 1-5-1 啟動與關閉啟動與關閉 Visual Web Visual Web Developer-Developer- 啟動啟動

請執行「開始請執行「開始 // 所有程式所有程式 /Microsoft Visual Web /Microsoft Visual Web Developer 2008 Express EditionDeveloper 2008 Express Edition 」指令，如果是」指令，如果是第一次啟動，需要執行數分鐘的環境設定，請稍第一次啟動，需要執行數分鐘的環境設定，請稍等一下，等到完成設定，就可以看到等一下，等到完成設定，就可以看到 VWDVWD 的執的執行畫面。行畫面。

1-5-1 1-5-1 啟動與關閉啟動與關閉 Visual Web Visual Web Developer-Developer- 關閉關閉

離開離開 Visual Web Developer ExpressVisual Web Developer Express ，請，請執行「檔案執行「檔案 // 結束」指令。結束」指令。

1-5-2 1-5-2 建立建立 ASP.NETASP.NET 網站網站 -- 說說明明

VWDVWD支援建立的支援建立的 ASP.NETASP.NET 網站有三種，其網站有三種，其說明如下所示：說明如下所示： HTTPHTTP 網站：建立位在網站：建立位在 WebWeb 伺服器上的網站，伺服器上的網站，

我們需要在我們需要在 InternetInternet 擁有擁有 WebWeb 伺服器、支援伺服器、支援ASP.NETASP.NET 的網頁空間，或在的網頁空間，或在 WindowsWindows作業系統作業系統安裝安裝 IISIIS ，才能建立，才能建立 HTTPHTTP 網站。網站。

FTPFTP 網站：建立位在網站：建立位在 FTPFTP 伺服器的網站，也就伺服器的網站，也就是透過是透過 FTPFTP 伺服器來存取伺服器來存取 ASP.NETASP.NET 網站的內容。網站的內容。

檔案系統網站：這是儲存在硬碟資料夾的檔案系統網站：這是儲存在硬碟資料夾的ASP.NETASP.NET 網站。網站。

1-5-2 1-5-2 建立建立 ASP.NETASP.NET 網站網站 -- 建建立立

請啟動請啟動 VWDVWD看到起始頁後，執行「檔案看到起始頁後，執行「檔案 // 新網新網站」指令，可以看到「新網站」對話方塊。站」指令，可以看到「新網站」對話方塊。

「範本」框選【 ASP.NET網站】，【位置】欄選【檔案系統】，【語言】選【 Visual

C#】，輸入路徑「 C:\範例網站 \Ch01\Ch1-5-

2」，按【確定】鈕新增網站

1-5-2 1-5-2 建立建立 ASP.NETASP.NET 網站網站 --介面說介面說明明

方案總管

屬性視窗

編輯視窗

工具箱視窗

1-5-2 1-5-2 建立建立 ASP.NETASP.NET 網站網站 -- 編輯視編輯視窗窗

VWDVWD 開發環境的最主要部分就是中間的編輯視窗，開發環境的最主要部分就是中間的編輯視窗，選取視窗下方的三個標籤，可以切換三種不同的選取視窗下方的三個標籤，可以切換三種不同的檢視方式，如下所示：檢視方式，如下所示：設計檢視：設計檢視： VWDVWD視覺化設計工具，只需從「工具箱」視覺化設計工具，只需從「工具箱」視窗選取控制項，就可以拖拉來建立視窗選取控制項，就可以拖拉來建立 ASP.NETASP.NET 網頁的網頁的內容。內容。

原始檔檢視：原始檔檢視： ASP.NETASP.NET 網頁的程式碼編輯視窗，可以網頁的程式碼編輯視窗，可以顯示顯示 Visual C#Visual C# 和控制項標籤的程式碼。和控制項標籤的程式碼。

分割檢視：在分割檢視：在 20082008版新增的檢視，可以將編輯視窗分版新增的檢視，可以將編輯視窗分割成上下兩部分，上方是原始程式碼；下方是設計檢割成上下兩部分，上方是原始程式碼；下方是設計檢視，在下方選取控制項，就可以在上方顯示對應的標視，在下方選取控制項，就可以在上方顯示對應的標籤程式碼。籤程式碼。

1-5-2 1-5-2 建立建立 ASP.NETASP.NET 網站網站 -- 方案總方案總管視窗管視窗

VWDVWD 的「方案總管」視窗是的「方案總管」視窗是 ASP.NETASP.NET 網站檔案和網站檔案和資料夾的管理視窗，可以顯示目前開啟資料夾的管理視窗，可以顯示目前開啟 ASP.NETASP.NET網站的檔案和資料夾清單，其說明如下所示：網站的檔案和資料夾清單，其說明如下所示： App_DataApp_Data 資料夾：在此資料夾是資料夾：在此資料夾是 ASP.NETASP.NET 網站使用到網站使用到

的資料庫或的資料庫或 XMLXML 文件。文件。 Default.aspxDefault.aspx：： ASP.NETASP.NET 網站預設的首頁名稱，網站預設的首頁名稱， .aspx.aspx是是 ASP.NETASP.NET 網頁的副檔名，因為網頁的副檔名，因為 VWDVWD 建立的首頁預設建立的首頁預設使用隱藏程式碼模型（使用隱藏程式碼模型（ Code Behind ModelCode Behind Model ），它是將），它是將程式碼和網頁內容的使用介面分割成兩個檔案，以此例程式碼和網頁內容的使用介面分割成兩個檔案，以此例Default.aspxDefault.aspx 是網頁內容，在前方按一下是網頁內容，在前方按一下 ++號可以看到號可以看到Default.aspx.csDefault.aspx.cs則是程式碼。則是程式碼。

web.configweb.config：： ASP.NETASP.NET 網站組態設定的網站組態設定的 XMLXML 文件。文件。

1-5-2 1-5-2 建立建立 ASP.NTASP.NT 網站網站 --屬性視窗屬性視窗在「屬性」視窗可以檢視在「屬性」視窗可以檢視 ASP.NETASP.NET 網頁或網頁或控制項等物件的相關屬性，在上方欄位顯控制項等物件的相關屬性，在上方欄位顯示的是選取物件，下方可以顯示此物件的示的是選取物件，下方可以顯示此物件的屬性清單。屬性清單。

1-5-3 1-5-3 開啟開啟 ASP.NETASP.NET 網站網站在建立好在建立好 ASP.NETASP.NET 網站後，我們可以在網站後，我們可以在 VWDVWD 開開啟存在的啟存在的 ASP.NETASP.NET 網站來新增、編輯或測試網站來新增、編輯或測試ASP.NETASP.NET 網頁。請啟動網頁。請啟動 VWDVWD 執行「檔案執行「檔案 // 開啟開啟網站」指令，可以看到「開啟網站」對話方塊。網站」指令，可以看到「開啟網站」對話方塊。

開啟「 C:\範例網站 \Ch01\Ch1-5-3」路徑的檔案

系統網站

1-6 1-6 建立建立 HTMLHTML 網頁和網頁和 XMLXML 檔檔 1-6-1 1-6-1 建立建立 HTMLHTML 網頁網頁 1-6-2 1-6-2 建立建立 XMLXML 文件文件

1-6-1 1-6-1 建立建立 HTMLHTML 網頁網頁 -- 說明說明「「 XHTMLXHTML 」（」（ Extensible HyperText Markup Extensible HyperText Markup

LanguageLanguage ）是）是 HTML 4.0xHTML 4.0x 版以版以 XML 1.0XML 1.0 語法重語法重新制定的標籤語法，屬於一份標準的新制定的標籤語法，屬於一份標準的 XMLXML 文件。文件。不過不過 XHTMLXHTML仍然採用仍然採用 HTML 4.0HTML 4.0 版的標籤，它版的標籤，它是是 W3CW3C制定取代制定取代 HTML 4.0HTML 4.0 版的下一個世代的版的下一個世代的HTMLHTML 。。

XHTMLXHTML 網頁的架構和網頁的架構和 HTMLHTML 網頁相似，只是在網頁相似，只是在網頁開頭使網頁開頭使 DOCTYPEDOCTYPE 指定驗證的指定驗證的DTDDTD（（ Document Type DeclarationsDocument Type Declarations ），如下所），如下所示：示：<!DOCTYPE html PUBLIC "-//W3C//DTD <!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Transitional//EN" XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">transitional.dtd">

1-6-1 1-6-1 建立建立 HTMLHTML 網頁網頁 --標籤與屬標籤與屬性性

XHTMLXHTML 本身的指令則是由標籤和屬性所組本身的指令則是由標籤和屬性所組成，如下所示：成，如下所示：標籤（標籤（ TagsTags ）：）： XHTMLXHTML標籤是使用「標籤是使用「 << 」」

和「和「 >> 」符號括起的指令，分為開始和結尾標」符號括起的指令，分為開始和結尾標籤，例如：籤，例如： .... 標籤，在結尾標籤需要標籤，在結尾標籤需要加上「加上「 // 」符號，標籤內的文字內容就會套用」符號，標籤內的文字內容就會套用預設樣式來進行編排，以此例預設樣式來進行編排，以此例 標籤就是粗標籤就是粗體字。體字。

屬性（屬性（ AttributesAttributes ）：每一個標籤可以擁有一）：每一個標籤可以擁有一些屬性來定義細部編排。些屬性來定義細部編排。

1-6-1 1-6-1 建立建立 HTMLHTML 網頁網頁 -- 注意事注意事項項

XHTMLXHTML比比 HTMLHTML標籤寫法要求的更加嚴格，標籤寫法要求的更加嚴格，必須完全遵循必須完全遵循 XMLXML 文件的撰寫規則，其注文件的撰寫規則，其注意事項如下所示：意事項如下所示：不可省略結尾標籤，如果是沒有結尾標籤的單不可省略結尾標籤，如果是沒有結尾標籤的單獨標籤，標籤寫法在結束「獨標籤，標籤寫法在結束「 >> 」符號前需要加」符號前需要加上「上「 // 」符號，例如：」符號，例如： 、、 <hr/><hr/> 等。等。

標籤和屬性都是使用小寫的英文字，例如：標籤和屬性都是使用小寫的英文字，例如：、、 <body><body> 等。等。

屬性值需要使用引號括起來。屬性值需要使用引號括起來。 namename屬性使用屬性使用 idid屬性取代。屬性取代。

1-6-1 1-6-1 建立建立 HTMLHTML 網頁網頁 -- 建立建立請啟動請啟動 VWDVWD 開啟「範例網站開啟「範例網站 \Ch01\Ch1-6-1\Ch01\Ch1-6-1 」」

資料夾的資料夾的 ASP.NETASP.NET 網站。執行「檔案網站。執行「檔案 // 新增檔新增檔案」指令，可以看到「加入新項目」對話方塊。案」指令，可以看到「加入新項目」對話方塊。

選【HTML網頁】範本，在【名稱】欄輸入網頁名稱 Ch1-6-

1.htm，按【加入】鈕新增HTML

網頁

1-6-1 1-6-1 建立建立 HTMLHTML 網頁網頁 --範例範例01: Ch1-6-1.htm -->02: <!DOCTYPE html 02: <!DOCTYPE html 03: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"03: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"04: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-04: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">transitional.dtd">05: <html xmlns="http://www.w3.org/1999/xhtml">05: <html xmlns="http://www.w3.org/1999/xhtml">06: <head><title>06: <head><title> 這是一個測試網頁這是一個測試網頁 </title></head></title></head>07: <body>07: <body>08: 08: 歡迎進入我的網頁歡迎進入我的網頁 09: </body>09: </body>10: </html>10: </html>

DOCTYPE

XHTML網頁

1-6-1 1-6-1 建立建立 HTMLHTML 網頁網頁 --區塊說區塊說明明

XHTMLXHTML 網頁分成三個區塊，如下表所示：網頁分成三個區塊，如下表所示：網頁區塊說明

<html> …. </html> XHTML網頁使用<html>標籤包圍，告訴瀏覽程式是一份 XHTML網頁，內含<head>和<body>區塊

<head> …. </head> XHTML網頁的標題區塊，定義網頁標題、網址和網頁本身的相關定義，例如：<title>標籤定義瀏覽程式

上方標題文字內容<body> … </body> XHTML網頁實際的內容是置於此區塊

1-6-2 1-6-2 建立建立 XMLXML 文件文件 -- 說明說明「「 XMLXML 」（」（ Extensible Markup LanguageExtensible Markup Language ）可）可擴展標示語言也屬於一種標籤語言，擴展標示語言也屬於一種標籤語言， XML 1.0XML 1.0 版版規格是在規格是在 19981998年年 22月正式推出，目前月正式推出，目前 XMLXML 的相的相關技術仍在持續發展和制定中，這只是一個開始，關技術仍在持續發展和制定中，這只是一個開始，並不是結束。並不是結束。

XMLXML 語法十分類似語法十分類似 HTMLHTML ，也屬於，也屬於 SGMLSGML 的子的子集，繼承集，繼承 SGMLSGML自訂標籤的優點，並且刪除一些自訂標籤的優點，並且刪除一些SGMLSGML複雜的部分，在功能上能夠補足複雜的部分，在功能上能夠補足 HTMLHTML標標籤的不足，但是，擁有更多的擴充性。籤的不足，但是，擁有更多的擴充性。

不過，不過， XMLXML 的目的並不是編排內容，而是用來描的目的並不是編排內容，而是用來描述資料，它並沒有如同述資料，它並沒有如同 HTMLHTML 語言的預設標籤，語言的預設標籤，事實上，使用者需要自己定義描述資料所需的各事實上，使用者需要自己定義描述資料所需的各種標籤。種標籤。

1-6-2 1-6-2 建立建立 XMLXML 文件文件 -- 建立建立請啟動請啟動 VWDVWD 開啟「範例網站開啟「範例網站 \Ch01\Ch1-6-2\Ch01\Ch1-6-2 」」

資料夾的資料夾的 ASP.NETASP.NET 網站。執行「檔案網站。執行「檔案 // 新增檔新增檔案」指令，可以看到「加入新項目」對話方塊。案」指令，可以看到「加入新項目」對話方塊。

選【 XML檔】範本，在【名稱】欄輸入文件名稱

Ch1-6-2.xml，按【加入】鈕新增

XML文件

1-6-2 1-6-2 建立建立 XMLXML 文件文件 --範例範例 11

01: <?xml version="1.0" encoding="Big5"?>01: <?xml version="1.0" encoding="Big5"?>02: -->03: <booklist>03: <booklist>04: <book>04: <book>05: <id>F8920</id>05: <id>F8920</id>06: <title>ASP.NET06: <title>ASP.NET 網頁製作徹底研究網頁製作徹底研究 </title></title>07: <authorlist>07: <authorlist>08: <author>08: <author> 陳會安陳會安 </author></author>09: </authorlist>09: </authorlist>10: <price>650</price>10: <price>650</price>11: </book>11: </book>

1-6-2 1-6-2 建立建立 XMLXML 文件文件 --範例範例 22

12: <book>12: <book>13: <id>F8934A</id>13: <id>F8934A</id>14: <title>XML14: <title>XML 網頁製作徹底研究網頁製作徹底研究 </title></title>15: <authorlist>15: <authorlist>16: <author>16: <author> 陳會安陳會安 </author></author>17: </authorlist>17: </authorlist>18: <price>650</price>18: <price>650</price>19: </book>19: </book>20: </booklist>20: </booklist>

1-6-2 1-6-2 建立建立 XMLXML 文件文件 --範例說明範例說明 XMLXML 文件的基本架構，主要可以分為幾個文件的基本架構，主要可以分為幾個部分，如下所示：部分，如下所示：文件宣告：第文件宣告：第 11列是列是 XMLXML 文件宣告，定義文件宣告，定義

XMLXML 文件的版本和使用的子碼集（即編碼），文件的版本和使用的子碼集（即編碼），以此例為以此例為 1.01.0版，使用中文版，使用中文 Big5Big5 字碼。字碼。

根標籤：第根標籤：第 33列和第列和第 2020列是列是 XMLXML 文件的根標文件的根標籤籤 <booklist><booklist> 和結尾標籤和結尾標籤 </booklist></booklist> ，這是樹，這是樹狀結構的根元素。狀結構的根元素。

子元素：在第子元素：在第 4~194~19列是根元素的子元素列是根元素的子元素 bookbook ，，第第 5~105~10列和第列和第 13~1813~18列為列為 bookbook元素的子元元素的子元素素 idid、、 titletitle、、 authorlistauthorlist和和 priceprice 。。

1-6-2 1-6-2 建立建立 XMLXML 文件文件 --範例圖例範例圖例

第 1 章 asp.net、vwd與html的基礎

Documents