動(dòng)態(tài)網(wǎng)站設(shè)計(jì)教程 ch1.ppt

1、教材：ASP.NET 2.0動(dòng)態(tài)網(wǎng)站設(shè)計(jì)教程 作者：李春葆 清華大學(xué)出版社2009,第 1 章,ASP.NET應(yīng)用程序開發(fā)基礎(chǔ),1.1 Internet和Web 1.2 .NET框架 1.3 ASP.NET概述 1.4配置ASP.NET運(yùn)行環(huán)境 1.5 創(chuàng)建ASP.NET應(yīng)用程序,1.1 Internet和Web,1.1.1 什么是Internet 1.1.2 什么是Web 1.1.3 Web的特點(diǎn),1.1.4 Web網(wǎng)頁(yè),1. 靜態(tài)網(wǎng)頁(yè) 指那些不能夠接收用戶輸入信息的Web網(wǎng)頁(yè)，其內(nèi)容是靜態(tài)的，唯一的響應(yīng)就是接收鼠標(biāo)點(diǎn)擊超級(jí)連接后顯示所連接的網(wǎng)頁(yè)。 當(dāng)用戶用鼠標(biāo)點(diǎn)擊其中一個(gè)超級(jí)連接后，就會(huì)在

2、瀏覽器中顯示所連接的網(wǎng)頁(yè)信息。,2. 動(dòng)態(tài)網(wǎng)頁(yè) 動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)不同，在動(dòng)態(tài)網(wǎng)頁(yè)，用戶可以輸入動(dòng)態(tài)網(wǎng)頁(yè)所允許的各種信息，以實(shí)現(xiàn)人機(jī)交互。,1.1.5 Web應(yīng)用程序的開發(fā)技術(shù),1. Web開發(fā)技術(shù),ASP PHP JSP ASP.NET,2. 兩種重要的企業(yè)開發(fā)平臺(tái),J2EE。 .NET框架。,1.2 .NET框架,1.2.1 .NET框架體系結(jié)構(gòu),1.2.2 .NET框架下應(yīng)用程序的開發(fā)和執(zhí)行,.NET框架中的CLR實(shí)際上是一種語(yǔ)言規(guī)范，它大致可以再分為以下幾部分：,通用類型系統(tǒng)（Common Type Syatem，簡(jiǎn)稱為CTS）。 存儲(chǔ)管理和資源回收機(jī)制。 中間語(yǔ)言與實(shí)時(shí)編譯器。,使用

3、Visual Studio.NET環(huán)境開發(fā)的應(yīng)用程序支持CLR。 對(duì)于這樣的源程序，經(jīng)過(guò).NET編譯后并不直接產(chǎn)生本機(jī)CPU可執(zhí)行代碼，而是先轉(zhuǎn)換為中間語(yǔ)言代碼。程序執(zhí)行時(shí)再由CLR載入內(nèi)存，通過(guò)實(shí)時(shí)解釋將其轉(zhuǎn)換為本機(jī)CPU可執(zhí)行代碼后再執(zhí)行，如下圖所示。,應(yīng)用程序的開發(fā)需要安裝Visual Studio.NET環(huán)境，而應(yīng)用程序的執(zhí)行只需要安裝.NET框架即可。,1.3 ASP.NET概述,1.3.1 ASP.NET應(yīng)用程序的執(zhí)行過(guò)程,1.3.2 ASP與ASP.NET的區(qū)別,新的運(yùn)行環(huán)境：新的運(yùn)行環(huán)境引入托管代碼，其運(yùn)行在CLR下面，使程序設(shè)計(jì)更為簡(jiǎn)便。 效率：ASP.NET應(yīng)用程序是在服務(wù)

4、器上運(yùn)行的編譯好的通用語(yǔ)言運(yùn)行環(huán)境（CLR）代碼。而不是像ASP那樣解釋執(zhí)行，而且ASPNET可利用早期綁定、實(shí)時(shí)編譯、本機(jī)優(yōu)化和緩存服務(wù)來(lái)提高程序執(zhí)行的性能，與ASP相比，ASP.NET大大提高了程序執(zhí)行的速度。 Visual Studio.NET開發(fā)工具的支持：ASP.NET應(yīng)用程序可利用微軟公司的Visual Studio.NET進(jìn)行產(chǎn)品開發(fā)。Visual Studio.NET比以前的Visual Studio集成開發(fā)環(huán)境增加了大量工具箱和設(shè)計(jì)器、來(lái)支持ASP.NET應(yīng)用程序的可視化開發(fā)，使程序的開發(fā)效率大大提高，并且簡(jiǎn)化程序的部署和維護(hù)工作。 多語(yǔ)言支持：ASP.NET支持多種語(yǔ)言，無(wú)

5、論使用哪種語(yǔ)言編寫程序，都將被編譯為中間代碼，目前ASPNET支持的語(yǔ)言有C#.NET、VB.NET、J#.NET和C+.NET，設(shè)計(jì)者可以選擇最適合自己的語(yǔ)言來(lái)編寫程序。,高效的管理能力：ASP.NET使用基于文本的、分級(jí)的配置系統(tǒng)，使服務(wù)器環(huán)境和應(yīng)用程序的設(shè)置更加簡(jiǎn)單。由于配置信息都保存在簡(jiǎn)單文本中，不需要啟動(dòng)本地的管理員工具就可以實(shí)現(xiàn)新的設(shè)置。一個(gè)ASP.NET應(yīng)用程序在一臺(tái)服務(wù)器系統(tǒng)的安裝只需要簡(jiǎn)單地復(fù)制一些必須的文件，而不需要系統(tǒng)的重新啟動(dòng)。 清晰的程序結(jié)構(gòu)：ASP.NET使用事件驅(qū)動(dòng)和數(shù)據(jù)綁定的方式開發(fā)程序，將程序代碼和用戶界面徹底分離，具有清晰的結(jié)構(gòu)。另外，使用代碼綁定方式將程序

6、代碼和用戶界面標(biāo)記分離在不同的文件中，使程序的可讀性更強(qiáng)。,1.4配置ASP.NET運(yùn)行環(huán)境,1.4.1 IIS的安裝,在Windows XP操作系統(tǒng)下安裝IIS的步驟如下： （1）選擇“開始”|“控制面板”|“添加或刪除程序”命令，打開“添加或刪除程序”對(duì)話框。如下圖所示。,（2）單擊左側(cè)的“添加/刪除Windows組件”按鈕，打開“Windows組件”對(duì)話框，如下圖所示。,（3）勾選組件列表中的“Internet信息服務(wù)（IIS）”選項(xiàng)，然后單擊“下一步”按鈕，出現(xiàn)安裝界面，如下圖所示。,（4）安裝完成后出現(xiàn)如下圖所示的安裝完成對(duì)話框，單擊“完成”按鈕完成整個(gè)安裝過(guò)程。,（5）再回到“Wi

7、ndows組件”對(duì)話框，如下圖所示，從組件列表框中看到“Internet信息服務(wù)（IIS）”選項(xiàng)被勾選，說(shuō)明已安裝好IIS。,在安裝IIS之后，可以用兩種方法之一測(cè)試是否安裝成功： 方法1：?jiǎn)⒌絀E瀏覽器，輸入http:/localhost/localstart.asp。 方法2：?jiǎn)⒌絀E瀏覽器，輸入http:/計(jì)算機(jī)名稱。 若這兩種操作后出現(xiàn)計(jì)算機(jī)的登錄界面，輸入正確的用戶名和密碼后轉(zhuǎn)向“歡迎使用Windows XP Server Internet服務(wù)”頁(yè)面，表示IIS成功安裝，否則安裝存在問(wèn)題。 IIS安裝好之后，會(huì)自動(dòng)創(chuàng)建一個(gè)默認(rèn)的Web網(wǎng)站（默認(rèn)主目錄為C:Inetpubwwwroot

8、），供用戶快速發(fā)布內(nèi)容。用戶也可自行創(chuàng)建Web網(wǎng)站，以擴(kuò)大和豐富Web服務(wù)器上的信息。對(duì)于Web服務(wù)器來(lái)說(shuō)，還可利用服務(wù)器擴(kuò)展功能來(lái)增強(qiáng)Web站點(diǎn)的功能。,1.4.2 Web網(wǎng)站屬性設(shè)置,IIS安裝成功后，會(huì)自動(dòng)創(chuàng)建一個(gè)默認(rèn)的Web網(wǎng)站，可以對(duì)其進(jìn)行管理和配置，其操作步驟如下： （1）選擇“開始”|“控制面板”|“管理工具”命令，可以看到“Internet信息服務(wù)”圖標(biāo)。雙擊該圖標(biāo)，出現(xiàn)“Internet信息服務(wù)”對(duì)話框，如下圖所示。,（2）用鼠標(biāo)右鍵單擊“默認(rèn)網(wǎng)站”，選擇“屬性”菜單項(xiàng)，出現(xiàn)如下圖所示的“默認(rèn)網(wǎng)站屬性”對(duì)話框的“網(wǎng)站”選項(xiàng)卡，其中可以設(shè)置站點(diǎn)的IP地址和TCP端口，端口號(hào)默認(rèn)

9、為80。一般來(lái)說(shuō)不需要對(duì)其內(nèi)容進(jìn)行修改。,（3）每個(gè)Web站點(diǎn)必須有一個(gè)主目錄，對(duì)Web站點(diǎn)的訪問(wèn)實(shí)際上是對(duì)站點(diǎn)主目錄的訪問(wèn)。主目錄之所以能被其他訪問(wèn)者訪問(wèn)，是因?yàn)樗挥成涞秸军c(diǎn)的域名。 這里選擇“主目錄”選項(xiàng)卡，出現(xiàn)如下圖所示的對(duì)話框，其中可以設(shè)置Web站點(diǎn)的主目錄等。,（4）除非有必要，否則并不建議直接修改默認(rèn)網(wǎng)站的主目錄，這并沒(méi)有必要。如果不希望把ASP文件存放到C:inetpubwwwroot目錄下，可以通過(guò)設(shè)置虛擬目錄來(lái)達(dá)到目的。這里單擊“確定”按鈕返回。,1.4.3 創(chuàng)建IIS虛擬目錄,虛擬目錄是指除了主目錄以外的其他站點(diǎn)發(fā)布目錄。在客戶瀏覽器中，虛擬目錄就像位于主目錄中一樣，但在

10、物理上可能并不包含在主目錄中。 創(chuàng)建IIS的虛擬目錄的一般操作步驟如下： （1）在“Internet信息服務(wù)”對(duì)話框中，用鼠標(biāo)右擊“默認(rèn)網(wǎng)站”，在出現(xiàn)的快捷菜單中選擇“新建”|“虛擬目錄”命令，出現(xiàn)創(chuàng)建虛擬目錄向?qū)В缦聢D所示，單擊“下一步”按鈕。,（2）出現(xiàn)如下圖所示的對(duì)話框，在其中“別名”框中輸入要建立虛擬目錄的名稱，這里輸入Myaspnet，單擊“下一步”按鈕。,（3）出現(xiàn)如下圖所示的對(duì)話框，單擊“瀏覽”按鈕，在出現(xiàn)的“打開”對(duì)話框中選擇“H:ASPNET”作為建立虛擬目錄的物理文件夾。單擊“下一步”按鈕。,（4）出現(xiàn)如下圖所示的對(duì)話框，用于設(shè)置虛擬目錄的訪問(wèn)權(quán)限。,（5）出現(xiàn)如下圖所示

11、的完成界面，單擊“完成”按鈕則虛擬目錄創(chuàng)建完畢。,1.5 創(chuàng)建ASP.NET應(yīng)用程序,1.5.1 Visual Studio.NET 2005,Visual Studio.NET 2005是一套完整的開發(fā)工具，用于生成ASP.NET Web應(yīng)用程序等。 將Visual Studio.NET 2005默認(rèn)環(huán)境配置成C#開發(fā)語(yǔ)言 。,1.5.2 ASP.NET應(yīng)用程序示例,【例1.1】在Myaspnet虛擬目錄中建立一個(gè)網(wǎng)站，并在ch1文件夾中創(chuàng)建立一個(gè)WebForm1-1網(wǎng)頁(yè)，在用戶單擊其中的按鈕時(shí)提示相應(yīng)的信息。 操作步驟如下： （1）啟動(dòng)Visual Studio.NET 2005。 （2）

12、選擇“文件”|“新建”|“網(wǎng)站”菜單命令，出現(xiàn)如下圖所示的“新建網(wǎng)站”對(duì)話框，,其中“位置”選項(xiàng)有3種： 文件系統(tǒng)：如果主機(jī)沒(méi)有安裝IIS，也不想設(shè)置服務(wù)器的位置等信息，可以使用這個(gè)設(shè)置。Visual Studio.NET 2005會(huì)把你所指定的路徑視為該網(wǎng)站的根目錄，并在預(yù)覽時(shí)啟動(dòng)內(nèi)置的網(wǎng)頁(yè)服務(wù)器，根據(jù)這個(gè)位置來(lái)模擬執(zhí)行，十分方便。 HTTP：如果主機(jī)已經(jīng)安裝了IIS，便可以使用這個(gè)設(shè)置。這個(gè)設(shè)置與IIS的設(shè)置相關(guān)，還必須設(shè)置網(wǎng)頁(yè)服務(wù)器的預(yù)覽網(wǎng)址，所設(shè)計(jì)的文件也會(huì)放置在IIS所設(shè)置網(wǎng)站的根目錄中。 FTP：如果測(cè)試主機(jī)并不在本機(jī)上，可以使用這個(gè)設(shè)置。Visual Studio.NET 200

13、5通過(guò)文件傳輸協(xié)議FTP訪問(wèn)網(wǎng)站，這樣更容易訪問(wèn)其他服務(wù)器上的網(wǎng)站。,（3）單擊“瀏覽”按鈕，出現(xiàn) “選擇位置”對(duì)話框，選中Myaspnet選項(xiàng)，單擊“打開”按鈕，自動(dòng)返回。 （4）保持語(yǔ)言為Visual C#不變，單擊“確定”按鈕。這樣就創(chuàng)建了一個(gè)空網(wǎng)站，Visual Studio.NET 2005的Web應(yīng)用程序集成開發(fā)環(huán)境如下圖所示。,其組成部分如下。 菜單欄 標(biāo)準(zhǔn)工具欄 控件工具箱 解決方案資源管理器 代碼編輯窗口 窗體設(shè)計(jì)器 “屬性”窗口,（5）在“解決方案資源管理器”中，右擊“http:/localhost/Myaspnet/”項(xiàng)，在出現(xiàn)的快捷菜單中選擇“新建文件夾”選項(xiàng)，添加一個(gè)

14、文件夾，將其更名為ch1。再選擇“網(wǎng)站”|“添加新項(xiàng)”菜單命令，出現(xiàn) “添加新項(xiàng)”對(duì)話框，從模板列表中選擇“Web窗體”（默認(rèn)值）選項(xiàng)，將名稱改為“WebForm1-1.aspx”，表示在當(dāng)前網(wǎng)站Myaspnet的ch1文件夾中添加一個(gè)WebForm1-1網(wǎng)頁(yè)，右下方有兩個(gè)復(fù)選項(xiàng)： 將代碼放在單獨(dú)的文件中：選中（默認(rèn)選中）時(shí)，表示將網(wǎng)頁(yè)的邏輯部分和顯示部分分離，達(dá)到代碼隱藏的目的。否則，將兩者放在一個(gè)文件中，就像ASP文件一樣。 選擇母版頁(yè)：選中時(shí)，需指定一個(gè)母版（先要設(shè)計(jì)好母版），當(dāng)前網(wǎng)頁(yè)在指定的母版上設(shè)計(jì)。,（6）出現(xiàn)WebForm1-1網(wǎng)頁(yè)的源視圖，單擊“設(shè)計(jì)”選項(xiàng)卡，出現(xiàn)空的設(shè)計(jì)視圖，

15、在其中第一行輸入“我的第一個(gè)ASP.NET網(wǎng)頁(yè)”文字，在第2行從工具箱拖放一個(gè)Button控件（名稱默認(rèn)為Button1，通過(guò)右下方的屬性窗口將其Text改為“單擊”），在其后拖放一個(gè)Label控件（名稱默認(rèn)為L(zhǎng)abel1，將其Text屬性改為空白的），如下圖所示。,（7）雙擊Button1控件，出現(xiàn)代碼編輯窗口，在Button1_Click事件過(guò)程中輸入以下行： Label1.Text=您單擊了按鈕; 注意其他代碼都是系統(tǒng)自動(dòng)生成的，不需要改動(dòng)。如下圖所示。,（8）這樣WebForm1-1網(wǎng)頁(yè)設(shè)計(jì)完畢，可以在瀏覽器中預(yù)覽網(wǎng)頁(yè)，如使用F5鍵或單擊按鈕 。 執(zhí)行如下：,WebForm1-1.aspx文件包含顯示代碼部分，其源視圖代碼如下(P34) 無(wú)標(biāo)題頁(yè) 我的第一個(gè)ASP.NET網(wǎng)頁(yè) ,WebForm1.aspx.cs文件包含邏輯代碼（也稱后臺(tái)代碼）部分，其代碼如下： using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using S