1 / 66

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

第 1 章 ASP.NET、VWD與HTML的基礎. 第 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 檔. 1-1 Web 應用程式的基礎. 1-1-1 WWW與HTTP通訊協定的基礎 1-1-2 Web 應用程式. 1-1-1 WWW與HTTP通訊協定的基礎- 說明.

wayne-norman
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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與HTTP通訊協定的基礎 • 1-1-2 Web應用程式

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

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

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

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

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

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

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

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

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

  13. 1-2-1 客戶端網頁技術-Java Applet • 當我們使用Java語言撰寫Java Applet程式後，就可以使用編譯程式將原始程式碼編譯成位元組碼，即「Java Applet」（一種Java應用程式），在瀏覽程式需要使用Java直譯程式「JVM」（Java Virtual Machine）來執行，目前Internet Explorer 3.0版以上都可以執行Java Applet，不過，Internet Explorer 6.x以上的版本需自行安裝JVM。

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

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

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

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

  18. 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請求。

  19. 1-2-1 客戶端網頁技術-Silverlight • Silverlight是一套用來開發豐富網際網路應用程式（Rich Internet Application，RIAs）的工具程式，其定位和Macromedia公司的Flash相同，這是微軟開發的RIA工具，提供網頁設計師另一種建立豐富網頁內容的選擇。 • Silverlight也是使用.NET技術，支援.NET CLR子集，使用XML語言建立客戶端的豐富網頁內容，稱為XAML （Extensible Application Markup Language）。

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

  21. 1-2-2 伺服端網頁技術-CGI • 「CGI」（Common Gateway Interface）共通匣道介面提供Web伺服器執行外部程式的管道，CGI應用程式是一種外部程式的執行檔，能夠使用各種程式語言來開發，例如：Visual Basic 6、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應用程式，目前最新版是4.0版。

  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 • 1-3-1 ASP.NET的基礎 • 1-3-2 .NET Framework

  27. 1-3-1 ASP.NET的基礎-說明 • 在2000年微軟推出ASP.NET 1.0 版時，伺服端控制項表現模型（Server-side Control Rendering Model）被認為是伺服端網頁技術的革命，可以讓網頁程式設計者使用相同的事件驅動程式設計來建立桌上型和Web應用程式。 • ASP.NET 2.0版直接在 .NET Framework 實作常用的網站功能。約在2年多後推出ASP.NET 3.5版時，導入Ajax技術和支援微軟WCF應用程式。 • 最新ASP.NET 4 .0版替網頁程式設計者建立能夠快速開發Web應用程式的環境，除了增強Ajax技術外，更支援微軟客戶端網頁技術Silverlight。

  28. 1-3-1 ASP.NET的基礎-重要特點 • 網站的一致化設計 • 網站的會員管理 • 網站的個人化程序 • 資料處理控制項 • 更多的網站設定和管理工具

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

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

  31. 1-3-2 .NET Framework-類別函式庫 • .NET Framework類別函式庫提供龐大的類別物件，可以幫助我們建立各種不同的應用程式，只需支援.NET Framework的程式語言都可以使用類別函式庫的物件和方法。 • 在附錄A將說明如何在ASP.NET程式碼使用.NET Framework類別函式庫的物件。

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

  33. 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等各種不同的應用程式。

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

  35. 1-4-1 微軟的Visual Studio-功能 • 新版2010支援多螢幕顯示、Silverlight、WPF編輯工具和最新.NET Framework 4.0版，這是一套功能強大的網站與應用程式的整合開發工具，其主要功能如下所示： • 多種程式語言和多目標（Multi-Targeting）的整合開發環境 • 強大的方案與專案管理 • 提供現成的專案或網站範本 • 視覺化表單設計介面 • IntelliSense智慧程式碼輸入 • 完整偵錯功能

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

  37. 1-4-2 安裝Visual Web Developer Express版-下載 • Visual Web Developer Express版可以在網路上免費下載，其下載網址為： http://www.microsoft.com/express/Downloads/ • Visual Web Developer Express版支援線上和離線安裝，線上安裝需先安裝WebPI；離線安裝是下載ISO檔自行燒錄光碟，在本節是以離線安裝為例，請選【All - Offline Install ISO image file】，選【Chinese (Traditional)】下載繁體中文版的ISO檔，然後使用燒錄程式將ISO檔燒成DVD安裝光碟。

  38. 1-4-2 安裝Visual Web Developer Express版-安裝 • Visual Web Developer 2010 Express中文版可以建立微軟Web平台，包含：Visual Web Developer、SQL Server Express、Silverlight工具和IIS的ASP.NET擴充程式。

  39. 1-5 Visual Web Developer的基本使用 • 1-5-1 啟動與關閉Visual Web Developer • 1-5-2 建立ASP.NET網站 • 1-5-3 加入ASP.NET網頁

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

  41. 1-5-1 啟動與關閉Visual Web Developer-註冊VWD • Visual Web Developer 2010 Express版在安裝30天內需要線上註冊來取得免費金鑰，在輸入金鑰後，就可以完全免費使用VWD。在啟動VWD後，請執行「說明/註冊產品」指令，可以看到產品註冊的對話方塊。

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

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

  44. 1-5-2 建立ASP.NET網站-建立 • 請啟動VWD看到起始頁後，執行「檔案/新網站」指令，可以看到「新網站」對話方塊。 選【ASP.NET空網站】，在下方【Web位置】欄選【檔案系統】，按【瀏覽】鈕建立「D:\範例網站\Ch01\Ch1-5-2」路徑，按【確定】鈕

  45. 1-5-3 加入ASP.NET網頁-說明 • 在建立空白ASP.NET網站後，我們就可以在網站加入ASP.NET網頁來編輯網頁內容。基本上，在ASP.NET網站加入的網頁主要有兩種，其說明如下所示： • Web Forms表單：包含HTML標籤和伺服端控制項的網頁，即ASP.NET網頁，其副檔名為.aspx，詳見第2章的說明。 • HTML網頁：內含HTML標籤的網頁，並不含任何ASP.NET控制項，其副檔名是.htm，詳見第1-6-1節的說明。

  46. 1-5-3 加入ASP.NET網頁-開啟ASP.NET網站 • 例如：開啟「C:\範例網站\Ch01\Ch1-5-3」路徑的檔案系統網站來加入ASP.NET網頁，請啟動VWD執行「檔案/開啟網站」指令，可以看到「開啟網站」對話方塊。 開啟「範例網站\Ch01\Ch1-5-3」路徑的檔案系統網站

  47. 1-5-3 加入ASP.NET網頁-加入網頁 • 在「方案總管」視窗的網站根目錄上，執行右鍵快顯功能表的【加入新項目】指令，可以看到「加入新項目」對話方塊。 選【Web Form】，【名稱】欄的預設檔案名稱是Default.aspx，不用更改，取消勾選【將程式碼置於個別檔案中】，按【新增】鈕

  48. 1-5-3 加入ASP.NET網頁-介面說明 方案總管 編輯視窗 工具箱標籤 屬性視窗

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

  50. 1-5-3 加入ASP.NET網頁-方案總管視窗 • VWD的「方案總管」視窗是ASP.NET網站檔案和資料夾的管理視窗，可以顯示目前開啟ASP.NET網站的檔案和資料夾清單，按二下檔案名稱就可以開啟指定檔案。

More Related