1、VISUAL C#.NET WEB 應(yīng)用程序設(shè)計(jì)第1章 .net框架與ASP.NET概述1.1 .net簡(jiǎn)介.net在微軟內(nèi)部被稱為第二次重要轉(zhuǎn)折，是從MS-DOS向Windows轉(zhuǎn)化后的又一次策略上的大變換1.1.1 .net一方面，.net代表著計(jì)算模式的轉(zhuǎn)變另一方面，.net帶來(lái)了軟件服務(wù)化的商業(yè)模式?？傮w說(shuō)來(lái)，.net就是一個(gè)應(yīng)用基礎(chǔ)平臺(tái)，它包括一組軟件產(chǎn)品、技術(shù)和服務(wù)，用來(lái)連接信息、人、系統(tǒng)和各種設(shè)備，連接的主要方式是Web Service，其最終目的就是讓用戶在任何地方，任何時(shí)間，以及利用任何設(shè)備都能訪問(wèn)所需的信息、文件和程序。用戶不需要知道這些文件放在什么地方，只需要發(fā)出請(qǐng)求后接

2、收即可，而所有后臺(tái)的復(fù)雜性是完全屏蔽起來(lái)的。第1章 .net框架與ASP.NET概述1.1.2 .net框架概述.net框架包含兩個(gè)最基本的部分：公共語(yǔ)言運(yùn)行庫(kù)CLR和.net類庫(kù)CL。公共語(yǔ)言運(yùn)行庫(kù)是.net框架的基礎(chǔ)，可以將它看成一個(gè)程序執(zhí)行時(shí)的容器，提供內(nèi)存管理、線程管理和遠(yuǎn)程處理等核心任務(wù)。用戶編寫(xiě)的程序并不是直接編譯為windows可以執(zhí)行的二進(jìn)制文件，而是編譯為CLR能夠執(zhí)行的中間語(yǔ)言IL，然后由CLR來(lái)執(zhí)行。托管代碼與非托管代碼第1章 .net框架與ASP.NET概述.net類庫(kù)是一組廣泛的、面向?qū)ο蟮?、可重用類的集合，可以為?yīng)用程序提供各種高級(jí)的組件和服務(wù)。它主要包括以下組件和

3、服務(wù)：ADO.NET組件XML組件Windows表單組件ASP.NET Web組件ASP.NET應(yīng)用服務(wù)XMLWeb服務(wù)系統(tǒng)框架服務(wù)第1章 .net框架與ASP.NET概述第1章 .net框架與ASP.NET概述1.2 Web服務(wù)與Web程序設(shè)計(jì)模式Web程序或網(wǎng)站的運(yùn)行方式不同于普通的Windows應(yīng)用程序1.2.1 Web服務(wù)與動(dòng)態(tài)網(wǎng)頁(yè)網(wǎng)頁(yè)的內(nèi)容是存放在服務(wù)器上的，服務(wù)器是網(wǎng)絡(luò)中的一臺(tái)主機(jī)，由于它提供Web、FTP等網(wǎng)絡(luò)服務(wù)，因此稱為服務(wù)器。當(dāng)用戶在地址欄中輸入地址時(shí)，瀏覽器會(huì)向服務(wù)器發(fā)送HTTP請(qǐng)求，這個(gè)請(qǐng)求使用HTTP協(xié)議，其中包括請(qǐng)求的主機(jī)名、HTTP版本號(hào)、端口、虛擬目錄、網(wǎng)頁(yè)名稱

4、等信息。服務(wù)器在收到請(qǐng)求信息后，將回復(fù)的信息準(zhǔn)備好，再通過(guò)網(wǎng)絡(luò)傳遞給客戶端瀏覽器?？蛻舳藶g覽器在接收到服務(wù)器傳遞的信息后，將其解釋并顯示在瀏覽器的窗口中。第1章 .net框架與ASP.NET概述第1章 .net框架與ASP.NET概述在這個(gè)過(guò)程中，如果在服務(wù)器上存放的網(wǎng)頁(yè)為靜態(tài)HTML網(wǎng)頁(yè)文件，服務(wù)器會(huì)原封不動(dòng)地傳遞回網(wǎng)頁(yè)的內(nèi)容，如果存放的是動(dòng)態(tài)網(wǎng)頁(yè)，如ASP,JSP,APS.NET等文件，則服務(wù)器會(huì)執(zhí)行動(dòng)態(tài)網(wǎng)頁(yè)的代碼，執(zhí)行的結(jié)果將生成一個(gè)HTML文件，然后將其傳遞給客戶端瀏覽器。動(dòng)態(tài)網(wǎng)頁(yè)和靜態(tài)網(wǎng)頁(yè)的根本區(qū)別在于服務(wù)器端傳遞給客戶端瀏覽器的HTML文件是事先存儲(chǔ)好的還是由動(dòng)態(tài)網(wǎng)頁(yè)程序生成的。靜

5、態(tài)網(wǎng)頁(yè)文件里只有HTML標(biāo)記，動(dòng)態(tài)網(wǎng)頁(yè)文件里不僅有HTML標(biāo)記，并且還含有程序代碼。第1章 .net框架與ASP.NET概述1.2.2 瀏覽器/服務(wù)器模式及其優(yōu)點(diǎn)這種軟件架構(gòu)主要利用了不斷成熟的WWW瀏覽器技術(shù)，結(jié)合動(dòng)態(tài)網(wǎng)站制作技術(shù)，通過(guò)通用瀏覽器實(shí)現(xiàn)了原來(lái)需要復(fù)雜的專用軟件才能實(shí)現(xiàn)的強(qiáng)大功能，節(jié)約了開(kāi)發(fā)成本，是一種全新的軟件系統(tǒng)構(gòu)造技術(shù)。第1章 .net框架與ASP.NET概述1.2.3 常見(jiàn)動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)目前，使用比較多的動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)有ASP,ASP.NET,JSP,PHP等。ASP：ASP的核心是腳本語(yǔ)言，這決定了它的先天不足，即它無(wú)法進(jìn)行像傳統(tǒng)編程語(yǔ)言那樣的底層操作，ASP通過(guò)解

6、釋執(zhí)行，運(yùn)行效率較低，腳本代碼與HTML代碼混在一起，不利于開(kāi)發(fā)人員進(jìn)行管理與維護(hù)。JSP：是Sun公司推出的一種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)標(biāo)準(zhǔn)，它主要的編程腳本為Java。PHP：ASP：是微軟繼ASP后推出的全新動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)第1章 .net框架與ASP.NET概述1.3 ASP.NET技術(shù)概述ASP.NET采用編譯方式。大規(guī)模地應(yīng)用了緩存技術(shù)，它采用事件機(jī)制，最大限度地實(shí)現(xiàn)了處理邏輯與顯示代碼分離。ASP.NET提供了功能強(qiáng)大的服務(wù)器控件。ASP.NET AJAX內(nèi)建支持，.net中連接數(shù)據(jù)庫(kù)的類庫(kù)由ADO升級(jí)到ADO.NET，ASP.NET是一個(gè)完全面向?qū)ο蟮南到y(tǒng)。ASP.NET支持多語(yǔ)言開(kāi)發(fā)。第

7、1章 .net框架與ASP.NET概述1.3.1 搭建ASP.NET的運(yùn)行環(huán)境ASP.NET Web應(yīng)用程序是由多個(gè)ASP.NET頁(yè)面、相關(guān)配置文件及其他成分組成的。頁(yè)面的擴(kuò)展名為aspx，頁(yè)面程序運(yùn)行在服務(wù)器端，需要一系列的運(yùn)行環(huán)境支持。如圖所示。ASP.NET應(yīng)用程序IIS6.0網(wǎng)站服務(wù)器.NET Framework操作系統(tǒng)IE6.0瀏覽器第1章 .net框架與ASP.NET概述1 操作系統(tǒng)ASP.NET被推薦運(yùn)行在Windows操作系統(tǒng)上。ASP.NET可以運(yùn)行的操作系統(tǒng)如下：Windows2000Windows XP ProfessionalWindows Server 2003Win

8、dows VistaWindows Server 2008Windows 7第1章 .net框架與ASP.NET概述2 Web服務(wù)器運(yùn)行ASP.NET應(yīng)用程序需要 IIS6.0以上版本的Web服務(wù)器。3 .NET環(huán)境要正常運(yùn)行ASP.NET需要在計(jì)算機(jī)上安裝.NET運(yùn)行環(huán)境，即.NET Framework。ADO.NET需要安裝微軟數(shù)據(jù)訪問(wèn)組件MDAC2.7以上的版本。第1章 .net框架與ASP.NET概述1.3.2 網(wǎng)站根目錄、虛擬目錄與ASP.NET頁(yè)面1、Web應(yīng)用程序Web應(yīng)用程序和一般的Windows程序一樣，由許多的文件組成，只不過(guò)Web應(yīng)用程序的文件由Web頁(yè)面及其他相關(guān)配置文

9、件組成，并且需要在Web服務(wù)器上才能正常運(yùn)行。在一個(gè)Web服務(wù)器上可以運(yùn)行多個(gè)網(wǎng)站，但每一個(gè)網(wǎng)站端口或者IP地址都應(yīng)該不相同。每個(gè)網(wǎng)站只有一個(gè)根目錄，可以有多個(gè)虛擬目錄，每個(gè)虛擬目錄可以運(yùn)行一個(gè)Web應(yīng)用程序。通常情況下，IIS中一個(gè)虛擬目錄下的所有文件組成一個(gè)Web應(yīng)用程序，不同的虛擬目錄代表著不同的Web應(yīng)用程序。第1章 .net框架與ASP.NET概述2、創(chuàng)建C#Web程序設(shè)計(jì)網(wǎng)站3、創(chuàng)建虛擬目錄4、創(chuàng)建一個(gè)ASP.NET頁(yè)面1.3.3 安裝ASP.NET的開(kāi)發(fā)環(huán)境1、安裝Visual Studio2、安裝MSDN幫助3、啟動(dòng)Visual Studio第1章 .net框架與ASP.NET

10、概述1.3.4 使用Visual Studio創(chuàng)建Web應(yīng)用程序1、創(chuàng)建Web應(yīng)用程序2、編輯、編譯應(yīng)用程序3、發(fā)布應(yīng)用程序復(fù)制網(wǎng)站發(fā)布網(wǎng)站第1章 .net框架與ASP.NET概述IIS6.0網(wǎng)站的目錄管理在較小的Web網(wǎng)站上，Web內(nèi)容文件通常包含在一個(gè)目錄樹(shù)下，管理起來(lái)并不復(fù)雜。較大的Web網(wǎng)站通常將HTML內(nèi)容文件、Web應(yīng)用程序及數(shù)據(jù)庫(kù)存儲(chǔ)在同一計(jì)算機(jī)的若干個(gè)目錄中，或者網(wǎng)絡(luò)中多個(gè)計(jì)算機(jī)上的多個(gè)目錄中，目錄管理就不那么簡(jiǎn)單了，為使其他目錄中的內(nèi)容和信息也能夠通過(guò)Web網(wǎng)站發(fā)布，應(yīng)創(chuàng)建虛擬目錄，當(dāng)然也可在主目錄或虛擬目錄的物理目錄下直接創(chuàng)建目錄來(lái)管理內(nèi)容第1章 .net框架與ASP.NE

11、T概述1、虛擬目錄與物理目錄虛擬目錄實(shí)際上并不包含在主目錄中，但在顯示給客戶瀏覽器時(shí)就像是位于主目錄中一樣。虛擬目錄有一個(gè)別名，供Web瀏覽器訪問(wèn)此目錄，別名通常比目錄的路徑短，更便于用戶輸入。使用別名更安全，因?yàn)橛脩舨恢牢募欠裾娴拇嬖谟诜?wù)器上，所以無(wú)法使用這些信息來(lái)修改文件。使用別名可以更方便地移動(dòng)和修改網(wǎng)站中的目錄結(jié)構(gòu)，一旦要更改目錄，只需更改別名與目錄實(shí)際位置的映射即可。可將主目錄看成網(wǎng)站的“根”虛擬目錄。第1章 .net框架與ASP.NET概述與虛擬目錄不同，物理目錄就是直接在文件系統(tǒng)中創(chuàng)建的真實(shí)目錄，它可映射為不同的主目錄或虛擬目錄。用戶可以直接在Windows系統(tǒng)中創(chuàng)建和刪除

12、物理目錄，也可在IIS管理器中管理物理目錄。在IIS管理器中展開(kāi)某個(gè)主目錄或虛擬目錄時(shí)，其對(duì)應(yīng)的物理目錄中的內(nèi)容也將顯示出來(lái)。第2章 Web開(kāi)發(fā)基礎(chǔ)本章重點(diǎn)HTML標(biāo)記的使用DIV+CSS頁(yè)面布局HTML/XHTML是網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言，CSS是描述頁(yè)面外觀的層疊樣式表，DIV+CSS模式是當(dāng)面頁(yè)面布局的主流技術(shù)第2章 Web開(kāi)發(fā)基礎(chǔ)2.1 HTML簡(jiǎn)介2.1.1 HTMLHTML（Hyper Text Markup Language，超文本標(biāo)記語(yǔ)言）是描述網(wǎng)頁(yè)的標(biāo)記語(yǔ)言。XHTML是更嚴(yán)格、更純凈的HTML版本，符合W3C標(biāo)準(zhǔn)，HTML4.1與XHTML幾乎是相同的。HTML大約有一百多個(gè)標(biāo)記，這

13、些標(biāo)記用于描述HTML文檔中數(shù)據(jù)的顯示格式。HTML網(wǎng)頁(yè)是HTML標(biāo)記語(yǔ)言描述的文本文件。HTML文件由Web服務(wù)器發(fā)送給客戶端瀏覽器，客戶端瀏覽器按HTML描述的格式將其顯示在瀏覽器窗口內(nèi)，HTML文件通過(guò)HTTP協(xié)議，使HTML文件可以在因特網(wǎng)上進(jìn)行文件交換和訪問(wèn)。HTML文件是純文本文件。第2章 Web開(kāi)發(fā)基礎(chǔ)2.1.2 URLURL（Uniform Resource Locators，統(tǒng)一資源定位器）是Internet中資源的簡(jiǎn)單命名機(jī)制。它由三部分組成：協(xié)議、主機(jī)DNS名或IP地址、文件名。URL的優(yōu)點(diǎn)在于，可明確指定使用Internet服務(wù)的協(xié)議，每個(gè)文檔、程序、其他文件都有各自的

14、地址。第2章 Web開(kāi)發(fā)基礎(chǔ)URL支持的協(xié)議file 資源是本地計(jì)算機(jī)上的文件。格式file:/ ftp 通過(guò) FTP訪問(wèn)資源。格式 FTP:/ gopher 通過(guò)Gopher協(xié)議訪問(wèn)該資源。 http 通過(guò)HTTP訪問(wèn)該資源。 格式 HTTP:/ https 通過(guò)安全的HTTPS訪問(wèn)該資源。 格式 HTTPS:/ mailto 資源為電子郵件地址，通過(guò) SMTP 訪問(wèn)。 格式 mailto: mms 通過(guò)支持MMS（流媒體）協(xié)議的播放該資源。（代表軟件：Windows Media Player）格式 MMS:/ ed2k 通過(guò)支持ed2k（專用下載鏈接）協(xié)議的P2P軟件訪問(wèn)該資源。（代表軟件

15、：電驢） 格式 ed2k:/flashget 通過(guò)支持Flashget:（專用下載鏈接）協(xié)議的P2P軟件訪問(wèn)該資源。（代表軟件：快車） 格式 Flashget:/ thunder 通過(guò)支持thunder（專用下載鏈接）協(xié)議的P2P軟件訪問(wèn)該資源。（代表軟件：迅雷） 格式 thunder:/ news 通過(guò) NNTP 訪問(wèn)該資源。 tencent 通過(guò)支持tencent(專用聊天連接) 協(xié)議和用戶對(duì)話。(代表軟件：QQ、TM)格式 tencent:/message/?uin=號(hào)碼&Site=&Menu=yes msnim 通過(guò)支持msnim(專用聊天連接) 協(xié)議和用戶對(duì)話。(代表軟件：MSN、W

16、LM) 格式 msnim:chat?contact=郵箱地址第2章 Web開(kāi)發(fā)基礎(chǔ)2.1.3 HTML文件結(jié)構(gòu)1、HTML的標(biāo)記與屬性HTML標(biāo)記又稱標(biāo)簽，是用”括起來(lái)的標(biāo)識(shí)符，括號(hào)中間的標(biāo)識(shí)符為標(biāo)記名稱。HTML標(biāo)記通過(guò)指定某塊信息為段落或標(biāo)題等來(lái)標(biāo)識(shí)文檔的某個(gè)部分。HTML標(biāo)記分為單標(biāo)記和成對(duì)標(biāo)記兩種。成對(duì)標(biāo)記有開(kāi)始標(biāo)記和結(jié)束標(biāo)記,并配套使用，成對(duì)標(biāo)記只作用于開(kāi)始標(biāo)記和結(jié)束標(biāo)記之間的文檔。單標(biāo)記只有開(kāi)始標(biāo)記。屬性是標(biāo)記中的參數(shù)選項(xiàng)，大多數(shù)標(biāo)記有一些自己的屬性，有些標(biāo)記有一些共用的屬性，各屬性之間無(wú)先后順序，如果省略屬性則采用默認(rèn)值。屬性的一般使用格式如下：第2章 Web開(kāi)發(fā)基礎(chǔ)一個(gè)標(biāo)記可以

17、有多個(gè)屬性，它們都被放置在起始標(biāo)記內(nèi)一個(gè)屬性一般只在定義它的標(biāo)記范圍內(nèi)起作用，但對(duì)于嵌套的標(biāo)記結(jié)構(gòu)，外層樣式表單的某些屬性可能被內(nèi)層標(biāo)記繼承不同的標(biāo)記所擁有的屬性是不同的，有些屬性為某一標(biāo)記所獨(dú)有，有些屬性為某幾個(gè)標(biāo)記所共有，有些屬性是絕大多數(shù)標(biāo)記都有的，它們稱為通用屬性，HTML定義了6個(gè)通用屬性，它們是：ID:文檔范圍內(nèi)的標(biāo)識(shí)符CLASS：給一個(gè)標(biāo)記指定一個(gè)或多個(gè)類名LANG：文檔的語(yǔ)言信息DIR：文檔文字的走向信息TITLE：關(guān)于標(biāo)記的簡(jiǎn)短說(shuō)明STYLE：給出標(biāo)記的樣式第2章 Web開(kāi)發(fā)基礎(chǔ)2、文檔頭與文檔體HTML文件必須由標(biāo)記開(kāi)頭，標(biāo)記結(jié)束。一個(gè)完整的HTML文檔分為文檔頭和文檔體兩

18、部分。文檔頭信息包含在之間，包括有關(guān)此網(wǎng)頁(yè)的標(biāo)題、導(dǎo)入樣式表等信息。文檔體包含在之間，是網(wǎng)頁(yè)的主體部分。第2章 Web開(kāi)發(fā)基礎(chǔ)3、標(biāo)記與顏色設(shè)定文檔體標(biāo)記有影響整個(gè)網(wǎng)頁(yè)顯示方式的屬性，顏色設(shè)置通常有兩種形式，一種是直接表示法，另一種是RGB三色表示法，用三組十六進(jìn)制數(shù)的RGB值表示，如#FF0000，#00FF00，#0000FF。第2章 Web開(kāi)發(fā)基礎(chǔ)2.2 常用的HTML標(biāo)記2.2.1 HTML的文字標(biāo)記1、標(biāo)記該標(biāo)記在之間，標(biāo)記之間的內(nèi)容將顯示在瀏覽器的標(biāo)題欄中。2、標(biāo)記是一個(gè)段落的開(kāi)始標(biāo)記段落文字是換行標(biāo)記用于插入一條水平線第2章 Web開(kāi)發(fā)基礎(chǔ)3、標(biāo)記用來(lái)設(shè)置網(wǎng)頁(yè)中標(biāo)題的文字，標(biāo)題分

19、為6級(jí)，用hn標(biāo)記中的n：16表示。標(biāo)題內(nèi)容4、標(biāo)記用來(lái)控制文字的字體、大小和顏色5、標(biāo)記分別表示文字的粗體、斜體、下劃線標(biāo)記，可以組合使用。第2章 Web開(kāi)發(fā)基礎(chǔ)6、標(biāo)記分別是文本的下標(biāo)和上標(biāo)標(biāo)記2.2.2 特殊標(biāo)記和圖形標(biāo)記1、 和" 表示空格， "表示雙引號(hào)2、標(biāo)記注釋標(biāo)記第2章 Web開(kāi)發(fā)基礎(chǔ)3、標(biāo)記用來(lái)在網(wǎng)頁(yè)中顯示圖形。圖形文件與網(wǎng)頁(yè)文件是分別存儲(chǔ)的，可以通過(guò)標(biāo)記將圖形顯示在網(wǎng)頁(yè)中。4、標(biāo)記對(duì)象居中標(biāo)記，凡在此標(biāo)記中間的對(duì)象都會(huì)被居中輸出。第2章 Web開(kāi)發(fā)基礎(chǔ)2.2.3 超鏈接標(biāo)記標(biāo)記為超鏈接標(biāo)記，一般使用格式如下:超鏈接顯示名稱Href屬性

20、取值為鏈接的目標(biāo)地址，可以是絕對(duì)路徑，也可以是相對(duì)路徑。Target屬性取值為鏈接的目標(biāo)窗口，可以是_parent、_blank、_self、_top等值，也可以是窗口名稱或idTitle屬性取值為指向鏈接時(shí)所顯示的標(biāo)題文字第2章 Web開(kāi)發(fā)基礎(chǔ)2.3表格2.3.1 定義表格的基本語(yǔ)法在HTML中表格是通過(guò)表格標(biāo)記、行標(biāo)記、列標(biāo)題標(biāo)記和列內(nèi)容標(biāo)記等配合使用來(lái)定義的。第2章 Web開(kāi)發(fā)基礎(chǔ)2.3.2 表格標(biāo)記的屬性Align屬性為表格在頁(yè)面上水平擺放的位置Border屬性取值單位為像素，值為表格邊框的寬度Cellpadding屬性取值單位為像素，值為單元格內(nèi)容與單元格邊界之間的空白距離Cells

21、pacing屬性取值單位為像素，值為單元格之間的距離Width屬性為表格寬度，取值單位為像素或頁(yè)面寬度的百分比Heigth屬性為表格高度，取值單位為像素或頁(yè)面高度的百分比Frame屬性為表格四周邊框的顯示狀態(tài)，取值為box、void、hsides、vsides、alove、below、rhs、lhsRules屬性為表格內(nèi)分隔線的顯示方式，取值為all、groups、rows、cols、none。第2章 Web開(kāi)發(fā)基礎(chǔ)2.3.3行標(biāo)記的屬性Align屬性Valign屬性：行內(nèi)容的垂直對(duì)齊方式Bgcolor屬性取值為行的背景色Bordercolorlight屬性取值為行的亮邊框顏色Borderco

22、lordark屬性取值為行的暗邊框顏色Height屬性2.3.4單元格和標(biāo)記的屬性第2章 Web開(kāi)發(fā)基礎(chǔ)補(bǔ)充：有序表與無(wú)序表創(chuàng)建一個(gè)有序列表，創(chuàng)建一個(gè)無(wú)序列表。對(duì)于有序列表和無(wú)序列表，表中的每一項(xiàng)由元素定義。瀏覽器自動(dòng)給有序表中的項(xiàng)目冠以序號(hào)，給無(wú)序表中的項(xiàng)目冠以黑點(diǎn)，并且縮進(jìn)編排。常見(jiàn)屬性Type屬性：適用于，用以給出表項(xiàng)的樣式信息Start屬性：適用于元素，用以給出有序表中首項(xiàng)的起始編號(hào)第2章 Web開(kāi)發(fā)基礎(chǔ)補(bǔ)充：表單表單是一個(gè)包含表單元素的區(qū)域。表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等等）輸入信息的元素。表單使用表單標(biāo)簽（）定義。第2章 Web開(kāi)發(fā)基礎(chǔ)輸入輸入

23、多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（）。輸入類型是由類型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類型如下文本域（文本域（Text Fields）當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域。第2章 Web開(kāi)發(fā)基礎(chǔ)單選按鈕（單選按鈕（Radio Buttons）當(dāng)用戶從若干給定的的選擇中選取其一時(shí)，就會(huì)用到單選框。第2章 Web開(kāi)發(fā)基礎(chǔ)復(fù)選框（復(fù)選框（Checkboxes）當(dāng)用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)時(shí)，就會(huì)用到復(fù)選框。第2章 Web開(kāi)發(fā)基礎(chǔ)表單的動(dòng)作屬性（表單的動(dòng)作屬性（Action）和確認(rèn)按鈕）和確認(rèn)按鈕當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件

24、。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。假如您在下面的文本框內(nèi)鍵入幾個(gè)字母，然后點(diǎn)擊確認(rèn)按鈕，那么輸入數(shù)據(jù)會(huì)傳送到 html_form_action.asp 的頁(yè)面。該頁(yè)面將顯示出輸入的結(jié)果。第2章 Web開(kāi)發(fā)基礎(chǔ)第2章 Web開(kāi)發(fā)基礎(chǔ)第2章 Web開(kāi)發(fā)基礎(chǔ)第2章 Web開(kāi)發(fā)基礎(chǔ)2.4 頁(yè)面布局頁(yè)面布局技術(shù)是Web應(yīng)用程序開(kāi)發(fā)的關(guān)鍵技術(shù)之一，DIV+CSS頁(yè)面布局模式是w3c標(biāo)準(zhǔn)的一個(gè)典型應(yīng)用，具有許多功能上的優(yōu)勢(shì)。2.4.1CSS簡(jiǎn)介CSS 指層疊樣式表 (Cascading Style Sheets) 樣式定義如何顯示 HTM

25、L 元素 樣式通常存儲(chǔ)在樣式表中 把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題 外部樣式表可以極大提高工作效率 外部樣式表通常存儲(chǔ)在 CSS 文件中 多個(gè)樣式定義可層疊為一個(gè)樣式表第2章 Web開(kāi)發(fā)基礎(chǔ)樣式解決了一個(gè)普遍的問(wèn)題樣式解決了一個(gè)普遍的問(wèn)題HTML 標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。通過(guò)使用 、 這樣的標(biāo)簽，HTML 的初衷是表達(dá)“這是標(biāo)題”、“這是段落”、“這是表格”之類的信息。同時(shí)文檔布局由瀏覽器來(lái)完成，而不使用任何的格式化標(biāo)簽。由于兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標(biāo)簽和屬性（比如字體標(biāo)簽和

26、顏色屬性）添加到 HTML 規(guī)范中，創(chuàng)建文檔內(nèi)容清晰地獨(dú)立于文檔表現(xiàn)層的站點(diǎn)變得越來(lái)越困難。為了解決這個(gè)問(wèn)題，萬(wàn)維網(wǎng)聯(lián)盟（W3C），這個(gè)非營(yíng)利的標(biāo)準(zhǔn)化聯(lián)盟，肩負(fù)起了 HTML 標(biāo)準(zhǔn)化的使命，并在 HTML 4.0 之外創(chuàng)造出樣式（Style）。所有的主流瀏覽器均支持層疊樣式表。第2章 Web開(kāi)發(fā)基礎(chǔ)樣式表極大地提高了工作效率樣式表極大地提高了工作效率樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標(biāo)簽和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過(guò)僅僅編輯一個(gè)簡(jiǎn)單的 CSS 文檔，外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁(yè)面的布局和外觀。由于允許同時(shí)控制多

27、重頁(yè)面的樣式和布局，CSS 可以稱得上 WEB 設(shè)計(jì)領(lǐng)域的一個(gè)突破。作為網(wǎng)站開(kāi)發(fā)者，你能夠?yàn)槊總€(gè) HTML 元素定義樣式，并將之應(yīng)用于你希望的任意多的頁(yè)面中。如需進(jìn)行全局的更新，只需簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。第2章 Web開(kāi)發(fā)基礎(chǔ)多重樣式將層疊為一個(gè)多重樣式將層疊為一個(gè)樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個(gè)的 HTML 元素中，在 HTML 頁(yè)的頭元素中，或在一個(gè)外部的 CSS 文件中。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表。層疊次序?qū)盈B次序當(dāng)同一個(gè)當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？元素被不止一個(gè)樣式定義時(shí)，

28、會(huì)使用哪個(gè)樣式呢？一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。1瀏覽器缺省設(shè)置 2外部樣式表 3內(nèi)部樣式表（位于 標(biāo)簽內(nèi)部） 4內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部） 因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明： 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。第2章 Web開(kāi)發(fā)基礎(chǔ)CSS 語(yǔ)法語(yǔ)法CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。選擇器通常是您需要改變樣式的 HTML 元素。每條聲明由一個(gè)屬性和一個(gè)值組成屬性（property）是您希望設(shè)置的

29、樣式屬性（style attribute）。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開(kāi)。第2章 Web開(kāi)發(fā)基礎(chǔ)第2章 Web開(kāi)發(fā)基礎(chǔ)多重聲明：多重聲明：提示：如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開(kāi)。下面的例子展示出如何定義一個(gè)紅色文字的居中段落。最后一條規(guī)則是不需要加分號(hào)的，因?yàn)榉痔?hào)在英語(yǔ)中是一個(gè)分隔符號(hào)，不是結(jié)束符號(hào)。然而，大多數(shù)有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)在每條聲明的末尾都加上分號(hào)，這么的好處是，當(dāng)你從現(xiàn)有的規(guī)則中增減聲明時(shí)，會(huì)盡可能的減少出錯(cuò)的可能性。就像這樣：第2章 Web開(kāi)發(fā)基礎(chǔ)空格和大小寫(xiě)空格和大小寫(xiě)大多數(shù)樣式表包含不止一條規(guī)則，而大多數(shù)規(guī)則包含不止一個(gè)聲明。多重聲明和空格的使用使得樣式

30、表更容易被編輯：是否包含空格不會(huì)影響 CSS 在瀏覽器的工作效果，同樣，與 XHTML 不同，CSS 對(duì)大小寫(xiě)不敏感。不過(guò)存在一個(gè)例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對(duì)大小寫(xiě)是敏感的。第2章 Web開(kāi)發(fā)基礎(chǔ)選擇器的分組選擇器的分組你可以對(duì)選擇器進(jìn)行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號(hào)將需要分組的選擇器分開(kāi)。在下面的例子中，我們對(duì)所有的標(biāo)題元素進(jìn)行了分組。所有的標(biāo)題元素都是綠色的。第2章 Web開(kāi)發(fā)基礎(chǔ)id 選擇器選擇器id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 # 來(lái)定義。第2章 Web開(kāi)發(fā)基礎(chǔ)CS

31、S 類選擇器類選擇器在 CSS 中，類選擇器以一個(gè)點(diǎn)號(hào)顯示第2章 Web開(kāi)發(fā)基礎(chǔ)如何插入樣式表如何插入樣式表當(dāng)讀到一個(gè)樣式表時(shí)，瀏覽器會(huì)根據(jù)它來(lái)格式化 HTML 文檔。插入樣式表的方法有三種外部樣式表內(nèi)部樣式表內(nèi)聯(lián)樣式第2章 Web開(kāi)發(fā)基礎(chǔ)外部樣式表外部樣式表當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過(guò)改變一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀。每個(gè)頁(yè)面使用 標(biāo)簽鏈接到樣式表。 標(biāo)簽在（文檔的）頭部。外部樣式表可以在任何文本編輯器中進(jìn)行編輯。文件不能包含任何的 html 標(biāo)簽。樣式表應(yīng)該以 .css 擴(kuò)展名進(jìn)行保存。第2章 Web開(kāi)發(fā)基礎(chǔ)內(nèi)部樣式表內(nèi)部樣式表

32、當(dāng)單個(gè)文檔需要特殊的樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。你可以使用 標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣:第2章 Web開(kāi)發(fā)基礎(chǔ)內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會(huì)損失掉樣式表的許多優(yōu)勢(shì)。請(qǐng)慎用這種方法，例如當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)。要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。第2章 Web開(kāi)發(fā)基礎(chǔ)偽類偽類用來(lái)表示動(dòng)態(tài)事件、狀態(tài)改變或在文檔中以其他方法不能輕易實(shí)現(xiàn)的情況。偽類對(duì)目標(biāo)元素中出現(xiàn)的某種特殊狀態(tài)應(yīng)用樣式，例如超鏈接等。偽類允許設(shè)計(jì)人員自由指定元素在一種狀態(tài)下的外觀。與普通類不同，偽類屬性的前面只

33、能有一個(gè)冒號(hào)。偽類語(yǔ)法第2章 Web開(kāi)發(fā)基礎(chǔ)錨偽類錨偽類在支持 CSS 的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動(dòng)狀態(tài)，已被訪問(wèn)狀態(tài)，未被訪問(wèn)狀態(tài)，和鼠標(biāo)懸停狀態(tài)。a:link color: #FF0000 /* 未訪問(wèn)的鏈接 */ a:visited color: #00FF00 /* 已訪問(wèn)的鏈接 */ a:hover color: #FF00FF /* 鼠標(biāo)移動(dòng)到鏈接上 */ a:active color: #0000FF /* 選定的鏈接 */ 提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。提示：在

34、 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。提示：偽類名稱對(duì)大小寫(xiě)不敏感。第2章 Web開(kāi)發(fā)基礎(chǔ)第2章 Web開(kāi)發(fā)基礎(chǔ)應(yīng)用字體外觀第2章 Web開(kāi)發(fā)基礎(chǔ)操作文本顯示第2章 Web開(kāi)發(fā)基礎(chǔ)背景色和背景圖像第2章 Web開(kāi)發(fā)基礎(chǔ)盒模型：控制外邊距、邊框、內(nèi)邊距、寬度和高度CSS中的盒模型是基于CSS的Web設(shè)計(jì)中取重要的概念之一。盒模型是針對(duì)HTML元素的一組規(guī)則，指定了元素的高度、寬度、內(nèi)邊距、邊框和外邊距是如何度量的。CSS盒模型是定義元素周圍的間隔、尺寸、外邊距、邊框以及元素內(nèi)容和邊框之間內(nèi)邊距的一組屬性的集合。第2章 Web開(kāi)發(fā)基礎(chǔ)第2章 Web開(kāi)發(fā)基

35、礎(chǔ)元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素。提示：背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域。在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。第2章 Web開(kāi)發(fā)基礎(chǔ)假設(shè)框的每個(gè)邊上有 10 個(gè)像素的外邊距和 5 個(gè)像素的內(nèi)邊距。如果希望這個(gè)元素框達(dá)到 100 個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素，請(qǐng)看下圖：第2章 Web開(kāi)發(fā)基礎(chǔ)使用margin屬性使頁(yè)面居中第2章 We

36、b開(kāi)發(fā)基礎(chǔ)CSS浮動(dòng)浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。第2章 Web開(kāi)發(fā)基礎(chǔ)當(dāng)把框 1 向右浮動(dòng)時(shí)，它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣：第2章 Web開(kāi)發(fā)基礎(chǔ)當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失。如果把所有三個(gè)框都向左移動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。第2章 Web開(kāi)發(fā)

37、基礎(chǔ)如果包含框太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間。如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”：第2章 Web開(kāi)發(fā)基礎(chǔ)CSS float 屬性屬性在 CSS 中，我們通過(guò) float 屬性實(shí)現(xiàn)元素的浮動(dòng)。float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過(guò)在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過(guò)程會(huì)持續(xù)到某一行擁有足夠的空間為止。第2章 Web開(kāi)發(fā)基礎(chǔ)行框和清理行框和

38、清理浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間，行框圍繞浮動(dòng)框第2章 Web開(kāi)發(fā)基礎(chǔ)CSS 定位定位 (Positioning)CSS 為定位和浮動(dòng)提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來(lái)通常需要使用多個(gè)表格才能完成的任務(wù)。定位的基本思想很簡(jiǎn)單，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。第2章 Web開(kāi)發(fā)基礎(chǔ)一切皆為框一切皆為框div、h1 或 p 元素常常被稱為塊級(jí)元素。這意味著這些元素顯示為一塊內(nèi)容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內(nèi)元素”，

39、這是因?yàn)樗鼈兊膬?nèi)容顯示在行中，即“行內(nèi)框”。您可以使用 display 屬性改變生成的框的類型。這意味著，通過(guò)將 display 屬性設(shè)置為 block，可以讓行內(nèi)元素（比如 元素）表現(xiàn)得像塊級(jí)元素一樣。還可以通過(guò)把 display 設(shè)置為 none，讓生成的元素根本沒(méi)有框。這樣的話，該框及其所有內(nèi)容就不再顯示，不占用文檔中的空間。第2章 Web開(kāi)發(fā)基礎(chǔ)CSS 定位機(jī)制定位機(jī)制CSS 有三種基本的定位機(jī)制：普通流、浮動(dòng)和絕對(duì)定位。除非專門(mén)指定，否則所有框都在普通流中定位。也就是說(shuō)，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。塊級(jí)框從上到下一個(gè)接一個(gè)地排列，框之間的垂直距離是由框

40、的垂直外邊距計(jì)算出來(lái)。行內(nèi)框在一行中水平布置?？梢允褂盟絻?nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過(guò)，設(shè)置行高可以增加這個(gè)框的高度。第2章 Web開(kāi)發(fā)基礎(chǔ)CSS position 屬性屬性通過(guò)使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會(huì)影響元素框生成的方式。position 屬性值的含義：static 元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。 relative 元素

41、框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。 absolute 元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類型的框。 Fixed 元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過(guò)其包含塊是視窗本身。第3章 Web窗體本章內(nèi)容了解Web窗體的概念與技術(shù)優(yōu)點(diǎn)理解Web窗體的代碼分離技術(shù)，掌握代碼內(nèi)聯(lián)與后臺(tái)編碼理解Web窗體的事件驅(qū)動(dòng)編程了解Web窗體的處理過(guò)程及窗體事件掌握Web窗

42、體的常用事件編程本章重點(diǎn)Web窗體的概念及代碼分離Web窗體的事件驅(qū)動(dòng)編程及窗體處理過(guò)程第3章 Web窗體3.1 Web窗體概述3.1.1 Web窗體的創(chuàng)建Web窗體（Web Form，Web表單）及其架構(gòu)是基于.net通用運(yùn)行環(huán)境的可擴(kuò)展編程模型，類似于C#程序設(shè)計(jì)中的Windows窗體，主要是用來(lái)生成與用戶交互的界面，并實(shí)現(xiàn)頁(yè)面內(nèi)容與代碼的完全分離。第3章 Web窗體3.1.2 Web窗體的概念與技術(shù)優(yōu)點(diǎn)1、Web窗體的概念開(kāi)發(fā)工具為用戶提供了一個(gè)ASP.NET頁(yè)面編輯界面，一個(gè)名稱為Default.aspx的頁(yè)面，可以將這個(gè)可視化的編程界面理解為Web窗體，它是一個(gè)ASP.NETWeb窗

43、體在編程階段的呈現(xiàn)。ASP.NET提供的Web窗體是一個(gè)容器對(duì)象，它不僅有自己的屬性、方法和事件，而且能容納HTML服務(wù)器控件、Web服務(wù)器控件等對(duì)象。開(kāi)發(fā)工具通過(guò)Web窗體架構(gòu)，實(shí)現(xiàn)了Web頁(yè)面設(shè)計(jì)中“所見(jiàn)即所得”。第3章 Web窗體ASP.NET的Web窗體模型由兩部分組成，即用戶界面UI和實(shí)現(xiàn)邏輯。用戶界面中含有頁(yè)面布局信息和ASP.NET服務(wù)器控件的HTML模板，它負(fù)責(zé)對(duì)瀏覽器上的Web窗體進(jìn)行顯示。實(shí)現(xiàn)邏輯部分是對(duì)Web窗體進(jìn)行邏輯處理的ASP.NET代碼，它負(fù)責(zé)生成Web窗體上動(dòng)態(tài)顯示的內(nèi)容，這些內(nèi)容通常由用戶界面部分定義的服務(wù)器控件顯示。實(shí)現(xiàn)邏輯和用戶界面生成的HTML協(xié)同工作，

44、可以實(shí)現(xiàn)完全動(dòng)態(tài)的Web頁(yè)面。第3章 Web窗體2、Web窗體的技術(shù)優(yōu)點(diǎn)Web窗體可以使用公共語(yǔ)言運(yùn)行庫(kù)所支持的程序語(yǔ)言來(lái)編寫(xiě)Visual Studio集成開(kāi)發(fā)環(huán)境提供了豐富的服務(wù)器控件，為頁(yè)面設(shè)計(jì)提供了所見(jiàn)即所得的設(shè)計(jì)支持，極大地提高了開(kāi)發(fā)效率豐富的服務(wù)器控件使開(kāi)發(fā)者能夠順利地將頁(yè)面邏輯封裝至一個(gè)可重復(fù)使用的組件中，減少了開(kāi)發(fā)人員必須編寫(xiě)的代碼量Web窗體模型將頁(yè)面的顯示代碼和邏輯處理代碼分離，從而解決了頁(yè)面代碼難以維護(hù)的問(wèn)題Web窗體模型包含了多狀態(tài)管理的特性，可以方便地保存頁(yè)面的狀態(tài)Web窗體具有可擴(kuò)展性，能夠很好地使用第三方控件第3章 Web窗體3.1.3 Web窗體的組成文件一個(gè)We

45、b窗體由兩個(gè)文件構(gòu)成，即包含HTML內(nèi)容的用戶界面（.aspx或ascx文件）和后臺(tái)代碼文件（.aspx.cs）。第3章 Web窗體3.2 代碼內(nèi)聯(lián)與后臺(tái)編碼ASP.NET是通過(guò)代碼內(nèi)聯(lián)和后臺(tái)編碼這兩種形式來(lái)實(shí)現(xiàn)用戶界面和實(shí)現(xiàn)邏輯的聯(lián)系的。代碼內(nèi)聯(lián)就是將用戶界面和實(shí)現(xiàn)邏輯放在同一個(gè)文件中后臺(tái)編碼就是將實(shí)現(xiàn)邏輯和用戶界面分別存在兩個(gè)不同的文件中。ASP.NET默認(rèn)創(chuàng)建的頁(yè)面是頁(yè)面顯示代碼和邏輯處理代碼相分離的，在添加新頁(yè)面時(shí)，可以選擇采用代碼內(nèi)聯(lián)或后臺(tái)編碼模式。第3章 Web窗體3.2.1 后臺(tái)編碼當(dāng)執(zhí)行ASP.NET頁(yè)面時(shí)，.aspx文件和.aspx.cs文件會(huì)編譯生成一個(gè)可執(zhí)行的page對(duì)象

46、。每個(gè).aspx文件都有一個(gè)Page指令，Page指令的常用屬性如下：Language：指定了該頁(yè)面所使用的語(yǔ)言AutoEventWireup：指示控件的事件是否自動(dòng)匹配。如果啟用事件自動(dòng)匹配，則為 true；否則為 false。默認(rèn)值為 true。CodeFile：指定了該頁(yè)面所關(guān)聯(lián)的后臺(tái)處理代碼文件Inherits：定義供頁(yè)繼承的隱藏代碼類，可以是從Page類派生的任意類。第3章 Web窗體2、代碼內(nèi)聯(lián)代碼內(nèi)聯(lián)是將用戶界面與邏輯實(shí)現(xiàn)部分的代碼放在一個(gè)文件中，但是邏輯部分和頁(yè)面部分還是明顯地區(qū)分為兩個(gè)部分。其中邏輯部分包含在標(biāo)記之間，并為標(biāo)記添加了runat=“server”屬性。用戶界面部

47、分包含在之間。在標(biāo)記中添加了runat=“server”屬性。runat=server表示在服務(wù)器端運(yùn)行，然后生成相應(yīng)的客戶端代碼。普通的HTML控件，如果不加runat=server，直接在客戶端運(yùn)行。第3章 Web窗體3.3 ASP.NET的執(zhí)行過(guò)程當(dāng)用戶請(qǐng)求Default.aspx頁(yè)面時(shí)，IIS是如何將Default.aspx與Default.aspx.cs進(jìn)行組合編譯生成HTML代碼響應(yīng)用戶的請(qǐng)求呢。ASP.NET頁(yè)面的執(zhí)行過(guò)程是一個(gè)較復(fù)雜的過(guò)程，涉及到IIS、CLR、Framework等。1、IIS將請(qǐng)求轉(zhuǎn)交給aspnet_isapi.dll。IIS會(huì)根據(jù)訪問(wèn)者請(qǐng)求的IP、端口、虛擬

48、目錄和文件名查找對(duì)應(yīng)站點(diǎn)，找到站點(diǎn)后依據(jù)所要求的文件擴(kuò)展來(lái)啟動(dòng)對(duì)應(yīng)的IIS Extension程序處理此要求，aspx這個(gè)文件擴(kuò)展名與aspnet_isapi.dll對(duì)應(yīng)，控制權(quán)交給aspnet_isapi.dll。第3章 Web窗體2、aspnet_isapi.dll轉(zhuǎn)交給ASP.NET Worker Process.aspnet_isapi.dll只是一個(gè)入口，真正處理工作的是其轉(zhuǎn)交的ASP.NET WP，WP首先解析訪問(wèn)者請(qǐng)求中的虛擬目錄信息，決定創(chuàng)建或使用先前已建好的AppDomain對(duì)象來(lái)處理此請(qǐng)求。3、WP將請(qǐng)求轉(zhuǎn)交給ISAPIRuntime對(duì)象。WP將要求轉(zhuǎn)送至虛擬目錄對(duì)應(yīng)的Ap

49、plication Domain中的ISAPIRuntime對(duì)象。此對(duì)象的主要功能是由ISAPI封包中解析出信息后轉(zhuǎn)交給HttpRuntime對(duì)象。4、ISAPIRuntime對(duì)象將請(qǐng)求轉(zhuǎn)交給HttpRuntime對(duì)象。5、HttpRuntime對(duì)象將請(qǐng)求轉(zhuǎn)交給HttpApplication對(duì)象。6、 HttpApplication對(duì)象將請(qǐng)求轉(zhuǎn)交給Httphandler對(duì)象7、 Httphandler對(duì)象轉(zhuǎn)交給Page對(duì)象8、Page對(duì)象創(chuàng)建過(guò)程。第3章 Web窗體3.4 Web窗體的事件驅(qū)動(dòng)編程3.4.1事件驅(qū)動(dòng)編程的概念在DOS時(shí)代的編程模型中，程序是按順序執(zhí)行的，這類程序稱為面向過(guò)程的程

50、序設(shè)計(jì)。面向過(guò)程的應(yīng)用程序一般有一個(gè)明顯的開(kāi)始，一個(gè)明顯的過(guò)程和一個(gè)明顯的結(jié)束。事件驅(qū)動(dòng)程序的最大特點(diǎn)就是：程序的執(zhí)行不是由程序的順序來(lái)控制的，而是由事件的發(fā)生順序來(lái)控制的。第3章 Web窗體啟動(dòng)輸入姓名查詢成績(jī)打印成績(jī)結(jié)束消息處理啟動(dòng)結(jié)束輸入姓名查詢成績(jī)打印成績(jī)第3章 Web窗體基于過(guò)程驅(qū)動(dòng)的程序，只能讓用戶按照程序規(guī)定好的步驟進(jìn)行操作，用戶不能以任何順序跳躍性地輸入數(shù)據(jù)和使用功能。基于事件驅(qū)動(dòng)的程序，是圍繞著消息的產(chǎn)生與處理而展開(kāi)的，而消息不會(huì)以任何預(yù)定的順序出現(xiàn)，因此，Windows程序設(shè)計(jì)主要是編寫(xiě)消息的接收與發(fā)送的響應(yīng)代碼。第3章 Web窗體Web窗體實(shí)現(xiàn)事件驅(qū)動(dòng)的編程模型和Wind

51、ows窗體中實(shí)現(xiàn)事件驅(qū)動(dòng)編程模型的機(jī)理是不一樣的。C/S結(jié)構(gòu)的Windows窗體應(yīng)用程序與服務(wù)器之實(shí)現(xiàn)的是有狀態(tài)持續(xù)連接。Web應(yīng)用程序與服務(wù)器之間是通過(guò)HTTP協(xié)議來(lái)實(shí)現(xiàn)通信的，是無(wú)狀態(tài)的斷續(xù)連接。ASP.NET的Web窗體提供了一種標(biāo)準(zhǔn)的保持狀態(tài)的方式，并隱藏了實(shí)際執(zhí)行的細(xì)節(jié)。其原理是，Web頁(yè)面會(huì)在兩次請(qǐng)求之間存儲(chǔ)自己的ViewState（視圖狀態(tài)），ViewState保存了頁(yè)面及頁(yè)面上所有控件的狀態(tài)值。ViewState由System.Web.UI.StateBag對(duì)象負(fù)責(zé)存儲(chǔ)。在服務(wù)器端，將ViewState存儲(chǔ)為一個(gè)字符串變量，返回客戶端。在客戶端，將ViewState存儲(chǔ)為一個(gè)隱

52、藏的窗體字段第3章 Web窗體Web窗體和服務(wù)器控件都默認(rèn)支持ViewState，可以通過(guò)指令實(shí)現(xiàn)對(duì)頁(yè)面級(jí)的ViewState狀態(tài)的打開(kāi)或關(guān)閉。第3章 Web窗體3.4.2 Web窗體的處理過(guò)程及窗體事件要學(xué)習(xí)Web窗體的事件驅(qū)動(dòng)編程，必須要掌握Web窗體的處理過(guò)程及階段發(fā)生的事件。Web Form的擴(kuò)展名是.aspx，當(dāng)一個(gè)瀏覽器第一次請(qǐng)求一個(gè)aspx文件時(shí)，Web窗體將被CLR編譯器編譯成一個(gè)Page類并實(shí)例化，當(dāng)每次請(qǐng)求這個(gè)頁(yè)面時(shí)，這個(gè)動(dòng)態(tài)創(chuàng)建的Page類就會(huì)實(shí)例化，從而得到一個(gè)可輸出HTML頁(yè)面的Page對(duì)象。這樣，ASP.NET就做了一次編譯多次執(zhí)行。第3章 Web窗體一個(gè)Web窗體

53、頁(yè)面（Page對(duì)象）從實(shí)例化分配內(nèi)存空間到處理結(jié)束釋放內(nèi)存，一般要經(jīng)歷10個(gè)階段，其中有一些階段會(huì)觸發(fā)Page對(duì)象的事件，這些事件各自有不同的事件處理程序。1、頁(yè)面初始化：此階段是初始化頁(yè)面生命周期內(nèi)所需的設(shè)置，并生成控件樹(shù)。初始化會(huì)觸發(fā)Page對(duì)象的第一個(gè)事件Page_Init，可以利用這個(gè)事件處理過(guò)程重置控件的屬性。Page_Iint事件只是在第一次調(diào)入頁(yè)面時(shí)被調(diào)用，重新載入頁(yè)面時(shí)并不觸發(fā)該事件。實(shí)際應(yīng)用時(shí)，一般都跳過(guò)Page_Iint，直接使用Page_OnLoad事件。第3章 Web窗體2、視圖狀態(tài)加載：在此階段讀取隱藏窗體字段的值，恢復(fù)控件的ViewState屬性。3、回傳數(shù)據(jù)處理：

54、頁(yè)面加載在Request對(duì)象中緩存的窗體數(shù)據(jù)，然后更新頁(yè)面和控件屬性。Request對(duì)象中緩存的窗體數(shù)據(jù)是由于用戶在客戶端操作控件而回傳的數(shù)據(jù)。4、頁(yè)面加載：在此階段創(chuàng)建控件樹(shù)中的服務(wù)器控件，初始化這些控件并恢復(fù)狀態(tài)，會(huì)觸發(fā)Page對(duì)象的Load事件。5、回傳數(shù)據(jù)變化檢查：在此階段檢查當(dāng)前回傳和前一次回傳之間的狀態(tài)改變，并發(fā)送通知，引發(fā)更改事件第3章 Web窗體6、回傳事件處理：執(zhí)行與導(dǎo)致回傳的客戶端相關(guān)聯(lián)的.aspx服務(wù)器代碼。7、頁(yè)面預(yù)返回：在頁(yè)面輸出之前，執(zhí)行任意更新處理。與這個(gè)階段相關(guān)聯(lián)的Page對(duì)象事件是PreRender事件。8、保存視圖狀態(tài)：頁(yè)面將ViewState屬性的內(nèi)容序列

55、化為一個(gè)字符串，這個(gè)字符串將作為一個(gè)隱藏域被附加到HTML頁(yè)面。9、頁(yè)面返回：在此階段創(chuàng)建呈現(xiàn)在客戶端的HTML輸出10、頁(yè)面卸載：這個(gè)階段發(fā)生于一個(gè)窗體完成了它的任務(wù)并且準(zhǔn)備卸載的時(shí)候，這個(gè)時(shí)候引發(fā)頁(yè)面的Unload事件。第3章 Web窗體3.5 Web窗體的程序?qū)嵗?章 Web窗體補(bǔ)充內(nèi)容ASP.NET網(wǎng)頁(yè)擴(kuò)展名ASP.NET網(wǎng)站應(yīng)用程序中可以包含很多種文件類型，下表列出了文件類型及其擴(kuò)展名。第3章 Web窗體常用頁(yè)面指令A(yù)SP.NET窗體的源視圖，代碼的前幾行包含%.%這樣的代碼，叫做頁(yè)面指令。頁(yè)面指令用來(lái)定義ASP.NET頁(yè)分析器和編譯器使用的特定于該頁(yè)的一些定義。在.aspx文件中

56、常用的頁(yè)面指令一般有以下幾種。1、指令Page指令可以指定頁(yè)面中代碼的服務(wù)器編程語(yǔ)言；指定頁(yè)面是將服務(wù)器代碼直接包含在其中，還是將代碼包含在單獨(dú)的文件中；調(diào)試和跟蹤選項(xiàng)，以及頁(yè)面是否為某母版頁(yè)的內(nèi)容頁(yè)。語(yǔ)法：第3章 Web窗體第3章 Web窗體2、指令I(lǐng)mport指令用于將命名空間顯式導(dǎo)入到ASP.NET應(yīng)用程序文件中，并且導(dǎo)入該命名空間的所有類和接口。導(dǎo)入的命名空間可以是.NET Framework類庫(kù)的一部分，也可以是用戶定義的命名空間的一部分。語(yǔ)法：第3章 Web窗體3、指令Register指令創(chuàng)建標(biāo)記前綴和自定義控件之間的關(guān)聯(lián)，這為開(kāi)發(fā)人員提供了一種在ASP.NET應(yīng)用程序文件中引用自

57、定義控件的簡(jiǎn)單方法。語(yǔ)法：第3章 Web窗體Register指令語(yǔ)法中各屬性的說(shuō)明如下表：第3章 Web窗體4、指令Control指令與Page指令基本相似，在.aspx文件中包含了Page指令，而在.ascx文件中則不包含Page指令，該文件中包含Control指令。該指令只能用于用戶控件（.ascx）中。每個(gè).ascx文件只能包含一條Control指令。此外，對(duì)于每個(gè)Control指令，只允許定義一個(gè)Language屬性，因?yàn)槊總€(gè)控件只能使用一種語(yǔ)言。語(yǔ)法：第3章 Web窗體5、指令Master指令只能在母版頁(yè)（.master文件）中使用，用于標(biāo)識(shí)ASP.NET母版頁(yè)。每個(gè).master文

58、件只能包含一條Master指令。語(yǔ)法：第3章 Web窗體第3章 Web窗體6、指令MasterType指令為ASP.NET頁(yè)的Master屬性分配類名，使得該頁(yè)可以獲取對(duì)母版頁(yè)成員的強(qiáng)類型引用。語(yǔ)法：第3章 Web窗體ASPX文件內(nèi)容注釋服務(wù)器端注釋（）允許開(kāi)發(fā)人員在ASP.NET應(yīng)用程序文件的任何部分（除了代碼塊內(nèi)部）嵌入代碼注釋。服務(wù)器端注釋元素的開(kāi)始標(biāo)記和結(jié)束標(biāo)記之間的任何內(nèi)容，不管是APS.NET代碼還是文本，都不會(huì)在服務(wù)器上進(jìn)行處理或呈現(xiàn)在結(jié)果頁(yè)上。如果代碼塊中的代碼需要注釋，則使用HTML代碼中的注釋（）。此標(biāo)記用于告知瀏覽器忽略該標(biāo)記中的語(yǔ)句。第3章 Web窗體第3章 Web窗體

59、服務(wù)器端注釋用于頁(yè)面的主體，但不在服務(wù)器端代碼塊中使用。當(dāng)在代碼聲明塊（包含在標(biāo)記中的代碼）或代碼呈現(xiàn)塊（包含在標(biāo)記中的代碼）中使用特定語(yǔ)言是，應(yīng)使用用于編碼的語(yǔ)言的注釋語(yǔ)法。如果在塊中使用服務(wù)器端注釋塊，則會(huì)出現(xiàn)編譯錯(cuò)誤。開(kāi)始和結(jié)束注釋標(biāo)記可以出現(xiàn)在同一行代碼中，也可以由許多被注釋掉的行隔開(kāi)。服務(wù)器端注釋塊不能被嵌套。第3章 Web窗體ASP.NET 服務(wù)器控件標(biāo)記語(yǔ)法ASP.NET服務(wù)器控件比HTML控件具有更多內(nèi)置功能。Web服務(wù)器控件不僅包括窗體控件，而且包括特殊用途的控件。Web服務(wù)器控件與HTML控件相比更為抽象，因?yàn)槠鋵?duì)象模型不一定反映HTML語(yǔ)法。ASP.NET服務(wù)器控件標(biāo)記語(yǔ)

60、法如下：代碼中主要標(biāo)記是runat=“server”，標(biāo)記這服務(wù)器控件，如果將HTML控件升級(jí)為服務(wù)器控件，將runat=“server”標(biāo)記添加到HTML控件中即可。第3章 Web窗體創(chuàng)建ASP.NET網(wǎng)站并熟悉開(kāi)發(fā)環(huán)境設(shè)計(jì)Web頁(yè)面布局頁(yè)面：通過(guò)兩種方法可以實(shí)現(xiàn)布局Web頁(yè)面，一個(gè)是Table表格布局Web窗體，另一個(gè)是CSS+DIV布局Web窗體。添加服務(wù)器控件：添加服務(wù)器控件既可以通過(guò)拖動(dòng)的方式添加，也可以通過(guò)ASP.NET網(wǎng)頁(yè)代碼添加。添加ASP.NET文件夾ASP.NET應(yīng)用程序包含7個(gè)默認(rèn)文件夾，分別為Bin,App_code,App_GlobalResources,App_Lo