第1章 ASP.NET、VWD與HTML的基礎

Presentation on theme: "第1章 ASP.NET、VWD與HTML的基礎"— Presentation transcript:

1 第1章 ASP.NET、VWD與HTML的基礎

2 第1章 ASP.NET、VWD與HTML的基礎
1-1 Web應用程式的基礎 1-2 網頁設計技術 1-3 ASP.NET與.NET Framework 1-4 建立ASP.NET開發環境 1-5 Visual Web Developer的基本使用 1-6 建立HTML網頁和XML檔

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

4 1-1-1 WWW的基礎-說明 「WWW」（World Wide Web，簡稱Web）全球資訊網是1989年歐洲高能粒子協會一個研究小組所開發的Internet服務，Web能夠在網路上傳送圖片、文字、影像和聲音等多媒體資料，這是由Tim Berners Lee領導的小組開發的主從架構和分散式網路服務系統。 WWW服務是目前Internet的熱門服務之一，它之所以熱門的原因，就是因為它打破了距離的障礙，使用者只需待在家中，就可以透過瀏覽程式和Internet，輕鬆存取位在全世界各個角落的資源。

5 1-1-1 WWW的基礎-相關名詞

6 1-1-2 WWW架構與HTTP通訊協定- HTTP通訊協定
HTTP通訊協定（Hypertext Transfer Protocol）是一種在伺服端（Server）和客戶端（Client）之間傳送資料的通訊協定，如下圖所示：

7 1-1-2 WWW架構與HTTP通訊協定- HTTP通訊協定的特性
HTTP通訊協定並不會持續保持連線：只有當瀏覽程式提出請求時才建立連線，在請求後就斷線等待回應，每一次請求和回應都需要事先建立連線。 HTTP通訊協定並不會保留狀態：因為HTTP通訊協定並不會保持連線，所以在連線時，伺服端和客戶端互相知道對方，一旦請求結束，就互不相干，所以使用者狀態並不會保留，每一次連線都如同是一位新使用者。

8 1-1-2 WWW架構與HTTP通訊協定- WWW架構
WWW全球資訊網是一種主從架構系統，主端是指伺服端（Server）的Web伺服器，儲存HTML網頁、圖片和相關檔案，從端是客戶端（Client），使用者執行瀏覽程式負責和伺服器溝通和讀取伺服器的資料，其傳送的是HTML網頁、圖檔和相關檔案，如下圖所示：

9 1-1-3 Web應用程式-說明 Web應用程式（Web Application）簡單的說是一組網頁（包含HTML網頁、圖片和相關伺服端網頁技術的程式檔案）的集合，請注意！Web應用程式是在Web伺服器執行，並不是在客戶端電腦的瀏覽程式執行。 Web應用程式主要的功能是回應使用者的請求，並且與使用者進行互動，以ASP.NET技術來說，就是建立ASP.NET網站的Web應用程式。目前Internet擁有多種不同類型的Web應用程式，例如：網路銀行、電子商務網站、搜尋引擎、網路商店、拍賣網站和電子公共論壇等。

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

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

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

13 1-2-1 客戶端網頁技術-說明 客戶端網頁技術是指程式碼或程式是在使用者客戶端電腦的瀏覽程式中執行，因為瀏覽程式本身即支援直譯程式，所以可以執行客戶端網頁技術，如下圖所示：

14 1-2-1 客戶端網頁技術-Java Applet
Java語言是Sun公司開發的程式語言，這種語言開發的應用程式不受硬體限制，可以在不同平台的硬體設備上執行。 當我們使用Java語言撰寫Java Applet程式後，就可以使用編譯程式將原始程式碼編譯成位元組碼後，即「Java Applet」（一種Java應用程式），在瀏覽程式需要使用Java直譯程式「JVM」（Java Virtual Machine）來執行，目前Internet Explorer 3.0版以上都可以執行Java Applet，不過，Internet Explorer 6.x以上的版本需自行安裝JVM。

15 1-2-1 客戶端網頁技術-JavaScript（Jscript）
JavaScript是Netscape開發的一種Script腳本語言，使用淺顯的程式語法，只需初學程式設計者即可運用自如，輕鬆在網頁上建立互動效果；Jscript為微軟推出相容JavaScript的Script語言，簡單的說，Netscape或Mozilla Firefox支援JavaScript；Internet Explorer支援Jscript。 JavaScript定位在簡單的Script語言，其目的是讓不懂程式設計的使用者也一樣可以撰寫JavaScript程式碼來產生互動的網頁內容。

16 1-2-1 客戶端網頁技術-ActionScript與Flash
ActionScript是Macromedia公司開發的一種Script腳本語言，它可以讓Flash動畫電影檔產生互動效果，這是一種類似JavaScript語法的腳本語言。 Flash是Macromedia公司的軟體名稱，可以用來建立動畫效果，瀏覽程式只需安裝Flash播放程式，就可以在網頁顯示Flash檔案建立的動畫效果。換句話說，Flash加上ActionScript，就可以輕鬆建立動畫效果的網頁應用程式。

17 1-2-1 客戶端網頁技術-VBScript VBScript屬於Visual Basic語言家族的成員，全名Microsoft Visual Basic Scripting Edition，簡稱VBScript。 VBScript是一種完全免費的直譯程式語言，也是一種在瀏覽程式執行的網頁語言，能夠讓網頁設計者開發互動多媒體的網頁內容，目前只有微軟Internet Explorer瀏覽程式支援VBScript。

18 1-2-1 客戶端網頁技術-DHTML 「DHTML」（Dynamic HTML）是一種在瀏覽程式建立HTML動態效果的技術。DHTML技術主要是由三種元素所組成：HTML、CSS和Script語言，如下所示： HTML：HTML 4.0x版的HTML標籤，DHTML只是使用CSS和Script語言來擴充HTML標籤。 CSS：「Cascading Style Sheets」簡稱CSS，中文稱為層級式樣式表，CSS能夠重新定義HTML標籤，讓HTML標籤顯示不同的編排格式。 Script語言：主要是指VBScript或JavaScript，Internet Explorer瀏覽程式就是VBScript和Jscript。

19 1-2-1 客戶端網頁技術-Ajax Ajax是Asynchronous JavaScript And XML的縮寫，譯成中文就是非同步JavaScript和XML技術。Ajax技術是由多種網頁技術所組成，相關技術的說明如下所示： HTML和CSS：在瀏覽程式顯示使用者介面和呈現相關資料。 XML：伺服端使用XML文件來非同步傳遞資料。 XML DOM：當瀏覽端非同步取得XML資料後，可以進一步使用JavaScript程式碼和XML DOM取出所需的資訊。 XMLHttpRequest物件：JavaScript程式碼是透過XMLHttpRequest物件來建立非同步的HTTP請求。

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

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

22 1-2-2 伺服端網頁技術-ASP 「ASP」（Active Server Pages）直接從英文字面上解釋是一種讓網頁在伺服器上動起來的技術，能夠將Script語言直接內嵌HTML標籤的網頁，在伺服端產生動態的網頁內容。 ASP技術也可以使用多種語言來建立，例如：JavaScript和VBScript。ASP技術建立的網頁程式並不是執行檔，而是一種在伺服端以直譯方式執行的網頁技術。

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

24 1-2-2 伺服端網頁技術-PHP PHP是「PHP: Hypertext Preprocessor」的簡稱，它是一種通用、開放原始碼（Open Source）的伺服端Script語言，可以直接內嵌於HTML網頁，特別適用在Web網站的開發，主要是使用在Linux/Unix作業系統的伺服端網頁技術，目前Windows作業系統一樣也可以執行PHP，而且支援微軟的IIS伺服器。

25 1-2-2 伺服端網頁技術-JSP 「JSP」（Java Server Pages）是昇陽的伺服端技術，它是Java家族中和ASP一較長短的網頁技術，以Java語言來說，Java Applet是下載到客戶端執行的程式檔；Java Servlet是在伺服端執行；JSP是結合HTML和Java Servlet的一種伺服端網頁技術。

26 1-3 ASP.NET與.NET Framework

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

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

29 NET Framework-圖例 當需要執行程式時，CLR是使用「JIT」（Just In Time）編譯程式將MSIL轉換成機器語言來執行程式，如下圖所示：

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

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

32 1-4-1 微軟的Visual Studio-說明
微軟程式語言的整合開發環境稱為Visual Studio，它是微軟公司開發的應用程式整合開發環境，能夠在同一套應用程式編輯、編譯、除錯和測試.NET語言所建立的應用程式，在其產品線的Visual Web Developer是一套用來開發ASP.NET網站（即Web應用程式）的整合開發環境。 Visual Studio是一套支援.NET Framework的整合開發環境，可以使用C#、Visual Basic、C++和J#等語言來建立Windows、ASP.NET、主控台和Web Services等各種不同的應用程式。

33 1-4-1 微軟的Visual Studio-圖例
在Visual Studio整合開發環境建立的應用程式是在.NET Framework的CLR平台上執行，如下圖所示：

34 1-4-1 微軟的Visual Studio-功能
多種程式語言的整合開發環境。 強大的方案與專案管理。 提供現成的專案或網站範本。 視覺化表單設計介面。 IntelliSense智慧程式碼輸入。 完整除錯功能。

35 1-4-2 安裝Visual Web Developer Express版-說明
雖然不是只有Visual Web Developer才能建立ASP.NET網站，因為所有網頁和設定檔都是一般文字檔案，我們只需在Windows作業系統安裝.NET Framework後，即可直接使用Windows作業系統的記事本來建立ASP.NET網站。 但是在實務上，Visual Web Developer開發工具是一套視覺化的網站開發工具，可以幫助我們快速建立ASP.NET網頁，自動產生標籤的程式碼，而不用自行重複輸入各種控制項的難記標籤名稱和屬性，而且功能強大網站管理介面，可以讓我們輕鬆維護與部署ASP.NET網站。

36 1-4-2 安裝Visual Web Developer Express版-說明
Visual Web Developer 2008 Express中文版支援Windows Vista作業系統；如果使用Windows XP作業系統，需要SP2以上版本才能安裝；Windows Server 2003需要SP1。 請進入Express版Web安裝的URL網址：

37 1-5 Visual Web Developer的基本使用
1-5-2 建立ASP.NET網站 1-5-3 開啟ASP.NET網站

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

39 1-5-1 啟動與關閉Visual Web Developer-關閉
離開Visual Web Developer Express，請執行「檔案/結束」指令。

40 1-5-2 建立ASP.NET網站-說明 VWD支援建立的ASP.NET網站有三種，其說明如下所示：
HTTP網站：建立位在Web伺服器上的網站，我們需要在Internet擁有Web伺服器、支援ASP.NET的網頁空間，或在Windows作業系統安裝IIS，才能建立HTTP網站。 FTP網站：建立位在FTP伺服器的網站，也就是透過FTP伺服器來存取ASP.NET網站的內容。 檔案系統網站：這是儲存在硬碟資料夾的ASP.NET網站。

41 1-5-2 建立ASP.NET網站-建立 請啟動VWD看到起始頁後，執行「檔案/新網站」指令，可以看到「新網站」對話方塊。
「範本」框選【ASP.NET網站】，【位置】欄選【檔案系統】，【語言】選【Visual C#】，輸入路徑「C:\範例網站\Ch01\Ch1-5-2」，按【確定】鈕新增網站

42 1-5-2 建立ASP.NET網站-介面說明 編輯視窗 方案總管 工具箱視窗 屬性視窗

43 1-5-2 建立ASP.NET網站-編輯視窗 VWD開發環境的最主要部分就是中間的編輯視窗，選取視窗下方的三個標籤，可以切換三種不同的檢視方式，如下所示： 設計檢視：VWD視覺化設計工具，只需從「工具箱」視窗選取控制項，就可以拖拉來建立ASP.NET網頁的內容。 原始檔檢視：ASP.NET網頁的程式碼編輯視窗，可以顯示Visual C#和控制項標籤的程式碼。 分割檢視：在2008版新增的檢視，可以將編輯視窗分割成上下兩部分，上方是原始程式碼；下方是設計檢視，在下方選取控制項，就可以在上方顯示對應的標籤程式碼。

44 1-5-2 建立ASP.NET網站-方案總管視窗 VWD的「方案總管」視窗是ASP.NET網站檔案和資料夾的管理視窗，可以顯示目前開啟ASP.NET網站的檔案和資料夾清單，其說明如下所示： App_Data資料夾：在此資料夾是ASP.NET網站使用到的資料庫或XML文件。 Default.aspx：ASP.NET網站預設的首頁名稱，.aspx是ASP.NET網頁的副檔名，因為VWD建立的首頁預設使用隱藏程式碼模型（Code Behind Model），它是將程式碼和網頁內容的使用介面分割成兩個檔案，以此例Default.aspx是網頁內容，在前方按一下+號可以看到Default.aspx.cs則是程式碼。 web.config：ASP.NET網站組態設定的XML文件。

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

46 開啟「C:\範例網站\Ch01\Ch1-5-3」路徑的檔案系統網站
1-5-3 開啟ASP.NET網站 在建立好ASP.NET網站後，我們可以在VWD開啟存在的ASP.NET網站來新增、編輯或測試ASP.NET網頁。請啟動VWD執行「檔案/開啟網站」指令，可以看到「開啟網站」對話方塊。 開啟「C:\範例網站\Ch01\Ch1-5-3」路徑的檔案系統網站

47 1-6 建立HTML網頁和XML檔 1-6-1 建立HTML網頁 1-6-2 建立XML文件

48 1-6-1 建立HTML網頁-說明 「XHTML」（Extensible HyperText Markup Language）是HTML 4.0x版以XML 1.0語法重新制定的標籤語法，屬於一份標準的XML文件。不過XHTML仍然採用HTML 4.0版的標籤，它是W3C制定取代HTML 4.0版的下一個世代的HTML。 XHTML網頁的架構和HTML網頁相似，只是在網頁開頭使DOCTYPE指定驗證的DTD（Document Type Declarations），如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

49 1-6-1 建立HTML網頁-標籤與屬性 XHTML本身的指令則是由標籤和屬性所組成，如下所示：
標籤（Tags）：XHTML標籤是使用「<」和「>」符號括起的指令，分為開始和結尾標籤，例如：<b>..</b>標籤，在結尾標籤需要加上「/」符號，標籤內的文字內容就會套用預設樣式來進行編排，以此例<b>標籤就是粗體字。 屬性（Attributes）：每一個標籤可以擁有一些屬性來定義細部編排。

50 1-6-1 建立HTML網頁-注意事項 XHTML比HTML標籤寫法要求的更加嚴格，必須完全遵循XML文件的撰寫規則，其注意事項如下所示：
不可省略結尾標籤，如果是沒有結尾標籤的單獨標籤，標籤寫法在結束「>」符號前需要加上「/」符號，例如：<br/>、<hr/>等。 標籤和屬性都是使用小寫的英文字，例如：<p>、<body>等。 屬性值需要使用引號括起來。 name屬性使用id屬性取代。

51 選【HTML網頁】範本，在【名稱】欄輸入網頁名稱Ch1-6-1.htm，按【加入】鈕新增HTML網頁
請啟動VWD開啟「範例網站\Ch01\Ch1-6-1」資料夾的ASP.NET網站。執行「檔案/新增檔案」指令，可以看到「加入新項目」對話方塊。 選【HTML網頁】範本，在【名稱】欄輸入網頁名稱Ch1-6-1.htm，按【加入】鈕新增HTML網頁

52 1-6-1 建立HTML網頁-範例 01: <!-- HTML網頁：Ch1-6-1.htm -->
02: <!DOCTYPE html 03: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 04: " 05: <html xmlns=" 06: <head><title>這是一個測試網頁</title></head> 07: <body> 08: <p>歡迎進入我的網頁</p> 09: </body> 10: </html> DOCTYPE XHTML網頁

53 1-6-1 建立HTML網頁-區塊說明 XHTML網頁分成三個區塊，如下表所示：

54 1-6-2 建立XML文件-說明 「XML」（Extensible Markup Language）可擴展標示語言也屬於一種標籤語言，XML 1.0版規格是在1998年2月正式推出，目前XML的相關技術仍在持續發展和制定中，這只是一個開始，並不是結束。 XML語法十分類似HTML，也屬於SGML的子集，繼承SGML自訂標籤的優點，並且刪除一些SGML複雜的部分，在功能上能夠補足HTML標籤的不足，但是，擁有更多的擴充性。 不過，XML的目的並不是編排內容，而是用來描述資料，它並沒有如同HTML語言的預設標籤，事實上，使用者需要自己定義描述資料所需的各種標籤。

55 選【XML檔】範本，在【名稱】欄輸入文件名稱Ch1-6-2.xml，按【加入】鈕新增XML文件
請啟動VWD開啟「範例網站\Ch01\Ch1-6-2」資料夾的ASP.NET網站。執行「檔案/新增檔案」指令，可以看到「加入新項目」對話方塊。 選【XML檔】範本，在【名稱】欄輸入文件名稱Ch1-6-2.xml，按【加入】鈕新增XML文件

56 1-6-2 建立XML文件-範例1 01: <?xml version="1.0" encoding="Big5"?>
02: <!--網頁製作徹底研究系列--> 03: <booklist> 04: <book> 05: <id>F8920</id> 06: <title>ASP.NET網頁製作徹底研究</title> 07: <authorlist> 08: <author>陳會安</author> 09: </authorlist> 10: <price>650</price> 11: </book>

57 1-6-2 建立XML文件-範例2 12: <book> 13: <id>F8934A</id>
14: <title>XML網頁製作徹底研究</title> 15: <authorlist> 16: <author>陳會安</author> 17: </authorlist> 18: <price>650</price> 19: </book> 20: </booklist>

58 1-6-2 建立XML文件-範例說明 XML文件的基本架構，主要可以分為幾個部分，如下所示：
文件宣告：第1列是XML文件宣告，定義XML文件的版本和使用的子碼集（即編碼），以此例為1.0版，使用中文Big5字碼。 根標籤：第3列和第20列是XML文件的根標籤<booklist>和結尾標籤</booklist>，這是樹狀結構的根元素。 子元素：在第4~19列是根元素的子元素book，第5~10列和第13~18列為book元素的子元素id、title、authorlist和price。

59 1-6-2 建立XML文件-範例圖例

60 End