1、Web 程 序 設(shè) 計,(第3版),“十一五”國家級規(guī)劃教材,目 錄,第 1 章 WEB編程基礎(chǔ)知識 第 2 章 WEB應(yīng)用程序開發(fā)環(huán)境 第 3 章 HTML與XML 第 4 章 腳本語言 第 5 章 頁面設(shè)計 第 6 章 ASP程序設(shè)計 第 7 章 ASP.NET程序設(shè)計 第 8 章 WEB數(shù)據(jù)庫程序設(shè)計 第 9 章 綜合應(yīng)用實例,第 2 章 WEB應(yīng)用程序開發(fā)環(huán)境,2.1 服務(wù)器端開發(fā)環(huán)境 2.2 客戶端開發(fā)環(huán)境 2.3 網(wǎng)頁設(shè)計工具Dreamweaver MX 2.4 Visual Studio.NET 開發(fā)工具,2.1 服務(wù)器端開發(fā)環(huán)境,用戶可在本地計算機上構(gòu)建Web服務(wù)器，如安裝Wi

2、ndows系統(tǒng)的IIS（Internet信息服務(wù)）組件，然后通過網(wǎng)絡(luò)連接，為其他用戶提供服務(wù)。 但如果沒有條件和技術(shù)，可以在本地計算機上編寫制作Web網(wǎng)頁后，將其上傳到托管或代理服務(wù)器上，利用專業(yè)服務(wù)器為用戶構(gòu)建的平臺，完成Web網(wǎng)頁的發(fā)布。 現(xiàn)在許多網(wǎng)站可以提供發(fā)布空間服務(wù)，用戶只要按照網(wǎng)站的使用要求，即可輕松完成Web網(wǎng)頁的上傳和發(fā)布。,2.1 服務(wù)器端開發(fā)環(huán)境,服務(wù)器端的編程，常用ASP、Perl和PHP，還有微軟公司近期推出的新一代ASP.NET。 如果僅用Access作為服務(wù)器端數(shù)據(jù)庫，可以先在本地建立數(shù)據(jù)庫，然后上傳到服務(wù)器上，不必設(shè)定ODBC連接，直接用目錄文件方式操作數(shù)據(jù)庫，這

3、樣服務(wù)器上的工作就簡化些。 如果采用SQL Server、Oracle等其他類型的數(shù)據(jù)庫作為服務(wù)器端數(shù)據(jù)庫，就必須在服務(wù)器上創(chuàng)建數(shù)據(jù)庫，還要進行ODBC的連接、設(shè)定等工作。,2.2 客戶器端開發(fā)環(huán)境,HTML語言 相關(guān)的軟件： Web網(wǎng)頁制作工具： Dreamweaver MX及FrontPage 2003等。 Web網(wǎng)頁動畫工具： Flash MX、Cool3D 3.0、3DS MAX R3、ImageReady 3.0和Fireworks MX等。 圖形、圖像設(shè)計及處理的工具：Photoshop 6.0、CorelDRAW 9.0、Fireworks MX、Freehand 9.0、Ill

4、ustrator 8.0、PhotoExpress 3.0等。,2.3 網(wǎng)頁設(shè)計工具Dreamweaver MX,Dreamweaver是Macromedia公司開發(fā)的網(wǎng)頁制作工具，它與Macromedia公司的另外兩項產(chǎn)品Firework和Flash一起組成一套功能強大的網(wǎng)頁創(chuàng)作系統(tǒng)，分別覆蓋了網(wǎng)頁制作，網(wǎng)頁圖形、圖像處理和矢量動畫這三個主要的網(wǎng)絡(luò)創(chuàng)作領(lǐng)域。,2.3.1 Dreamweaver MX概覽,2.3 網(wǎng)頁設(shè)計工具Dreamweaver MX,（1）精確性。DW采用Roundtrip HTML技術(shù)實現(xiàn)對HTML源代碼的精確控制，它能生成簡潔和高效的HTML代碼。 （2）易用性。DW

5、的編輯界面友好，且操作簡單。通過各種工具面板，可以非常方便地控制頁面各種元素的屬性。在不用手工輸入一行代碼的情況下，就可以制作出各種特效，比如動畫、動態(tài)按鈕、索引條、分層等。 （3）兼容性。兼容性是DW的一個非常優(yōu)秀的特性，用它制作的頁面能在各種瀏覽器上正確地顯示。,2.3.2 Dreamweaver MX的特性,2.3 網(wǎng)頁設(shè)計工具Dreamweaver MX,2.3.3 Dreamweaver MX界面介紹,創(chuàng)建或調(diào)入文件4個區(qū)域： 單擊中部的創(chuàng)建新項目，建立相應(yīng)類型的新文件； 單擊中部的從范例創(chuàng)建，建立多種形式的新文件； 雙擊右部的文件列表中的文件名，調(diào)入指定目錄中的文件； 單擊左部的打

6、開最近項目，可調(diào)入編輯過的文件。,2.3 網(wǎng)頁設(shè)計工具Dreamweaver MX,2.3.3 Dreamweaver MX界面介紹,Dreamweaver MX文件編輯界面,2.4 Visual Studio.NET 開發(fā)工具,Visual Studio. NET是Microsoft公司于2002年正式推出的一個集成開發(fā)環(huán)境，它集源程序編輯、編譯、鏈接及項目管理和程序發(fā)布于一體，是開發(fā)ASP.NET應(yīng)用程序強大的工具。 用Visual Studio. NET可以創(chuàng)建 Windows 平臺下的 Windows 應(yīng)用程序和Web應(yīng)用程序，或者創(chuàng)建網(wǎng)絡(luò)服務(wù)、智能設(shè)備應(yīng)用程序和Office 插件。

7、Microsoft公司先后推出過2002、2003、2005等多個版本，目前的最新版是Visual Studio 2010。,2.4 Visual Studio.NET 開發(fā)工具,系統(tǒng)配置要求 （1）操作系統(tǒng) ：Microsoft Windows XP ；Microsoft Windows Server 2003 ；Windows Vista。 （2）硬件配置 最低要求：1.6 GHz CPU、384 MB RAM、1024768 顯示器、5400 rpm 硬盤。 建議配置：2.2 GHz 或速度更快的 CPU、1024 MB 或更大容量的 RAM、12801024顯示器、7200 rpm 或

8、更高轉(zhuǎn)速的硬盤。 另外，還需準備足夠的磁盤空間。因為將Visual Studio 2008完全安裝在系統(tǒng)分區(qū)（推薦），至少需要占用4GB的空間，包括MSDN的安裝。如果用戶安裝在非系統(tǒng)分區(qū)，安裝工作要求系統(tǒng)分區(qū)達到1.5 GB左右的空間，目標分區(qū) 2 GB左右的空間。,2.4.1 Visual Studio 2008的安裝,2.4 Visual Studio.NET 開發(fā)工具,安裝步驟 （1）將Visual Studio 2008安裝光盤放入光盤驅(qū)動器。光盤運行后自動進入安裝程序界面。如果光盤不能自動運行，雙擊setup.exe可執(zhí)行文件即可。,2.4.1 Visual Studio 2008

9、的安裝,2.4 Visual Studio.NET 開發(fā)工具,安裝步驟 （2）單擊“安裝Visual Studio 2008”之后，安裝向?qū)?zhí)行收集所需文件、驗證安裝包的完整性等操作。完成之后，單擊“下一步”按鈕繼續(xù)安裝。在安裝界面中，設(shè)置安裝功能和安裝路徑等參數(shù)，推薦采用默認設(shè)置。設(shè)置好以后，單擊“安裝”按鈕。一段時間后，系統(tǒng)顯示安裝成功。,2.4.1 Visual Studio 2008的安裝,2.4 Visual Studio.NET 開發(fā)工具,Visual Studio 2008集成開發(fā)環(huán)境 （IDE）與Microsoft公司的其他應(yīng)用程序界面類似，它由以下若干界面元素組成：標題欄、

10、菜單欄、工具欄、工具箱、文檔窗口、解決方案資源管理器窗口和屬性窗口等。,2.4.2 Visual Studio 2008集成開發(fā)環(huán)境,2.4 Visual Studio.NET 開發(fā)工具,用Visual Studio2008創(chuàng)建ASP .NET應(yīng)用程序，可以分為以下5個主要步驟： 創(chuàng)建一個網(wǎng)站。 在網(wǎng)站中添加一個空白的ASP .NET應(yīng)用程序頁面文件。 設(shè)計應(yīng)用程序界面。 編寫應(yīng)用程序控件的事件代碼。 調(diào)試和運行應(yīng)用程序。,2.4.3 Visual Studio 2008集成開發(fā)環(huán)境的使用,2.4 Visual Studio.NET 開發(fā)工具,【例2-1】設(shè)計一個如圖2-12所示的登錄界面程序

11、。單擊“登錄”按鈕，若輸入密碼為“123”，顯示“你已成功登錄！”，如圖2-13所示；否則，顯示“登錄失?。　?。,2.4.3 Visual Studio 2008集成開發(fā)環(huán)境的使用,圖2-12 程序登錄界面 圖2-13 程序運行結(jié)果,2.4 Visual Studio.NET 開發(fā)工具,（1）新建網(wǎng)站 選擇“文件”菜單的“新建”命令，在下級菜單中，單擊“網(wǎng)站”命令，出現(xiàn) “新建網(wǎng)站”對話框。選中“ASP.NET網(wǎng)站”模板，在“位置”框中選擇“文件系統(tǒng)”。單擊“瀏覽”按鈕，輸入要保存網(wǎng)站的網(wǎng)頁文件夾名（如D:我的文檔Visual Studio 2008WebSitesexample）。單擊“語言

12、”列表中 “Visual Basic”項，最后單擊“確定”按鈕。VS .NET將創(chuàng)建一個名為example的新網(wǎng)站，同時自動創(chuàng)建一個名為“default.aspx” 的主頁面文件。默認以“源”視圖方式顯示該頁，在該視圖下可以查看到頁面的 HTML 元素。,2.4.3 Visual Studio 2008集成開發(fā)環(huán)境的使用,2.4 Visual Studio.NET 開發(fā)工具,（2）利用工具箱中的相關(guān)控件設(shè)計應(yīng)用程序界面 單擊“視圖”選項卡切換到“設(shè)計”視圖。在工具箱中單擊“標準”類別。根據(jù)圖2-12所示的界面，在“文檔”窗口合適的位置放置兩個label控件（label1和label12）、兩個

13、Textbox控件（Textbox1和Textbox2）和一個Button控件（Button1）。 單擊label1控件，此時該控件四周出現(xiàn)一個有選中標志的框，在“屬性”窗口選中“Text”屬性，將其值修改為“用戶名”。選定label2控件，修改“Text”屬性值為“密碼”。選定Button1控件，修改“Text”屬性值為“登錄”。,2.4.3 Visual Studio 2008集成開發(fā)環(huán)境的使用,2.4 Visual Studio.NET 開發(fā)工具,（3）編寫程序代碼 在“設(shè)計”視圖中，雙擊 Button1 控件，自動切換到“源”視圖。在過程體 Protected Sub 中添加以下程序代碼：,2.4.3 Visual Studio 2008集成開發(fā)環(huán)境的使用,if textbox2.text=123 then response.write(你已成功登錄！) else response.write(登錄失??！) end if,2.4 Visual Studio.NET 開發(fā)工具,（4）運行程序 首先，在“解決方案管理器”窗口選中待執(zhí)行的程序example1，單擊鼠標右鍵，在快捷菜單中單擊“設(shè)為起始