網(wǎng)站策劃與Web程序的設(shè)計(jì)實(shí)驗(yàn)指導(dǎo)書

1、 . . . 1 / 60策劃與策劃與WebWeb程序設(shè)計(jì)程序設(shè)計(jì)實(shí)驗(yàn)指導(dǎo)書實(shí)驗(yàn)指導(dǎo)書大學(xué)軟件學(xué)院大學(xué)軟件學(xué)院2010 年 3 月 30 日 . . . 2 / 60目錄目錄實(shí)驗(yàn)一 IIS Web 服務(wù)器的配置。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。1實(shí)驗(yàn)二 Visual Studio2005 開發(fā)環(huán)境與發(fā)布的方法7實(shí)驗(yàn)三 HTML 基礎(chǔ)與層疊樣式單 CSS。 。 。 。 。 。 。 。 。 。 。 。 。 。 。21實(shí)驗(yàn)四 JavaScript 語言上機(jī)練習(xí)。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。26實(shí)驗(yàn)五 HTML DOM 程

2、序設(shè)計(jì)與綜合編程。 。 。 。 。34實(shí)驗(yàn)六 可擴(kuò)展標(biāo)記語言 XML。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。44實(shí)驗(yàn)七 .NET Web 開發(fā)技術(shù)。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。47 . . . 3 / 60實(shí)驗(yàn)一 IIS Web 服務(wù)器的配置實(shí)驗(yàn)容實(shí)驗(yàn)容: : 安裝和啟動 IIS （Internet Information System) ,并配置 IIS WEB 站點(diǎn) 實(shí)驗(yàn)?zāi)康模簩?shí)驗(yàn)?zāi)康模簩W(xué)會 IIS Web 服務(wù)器的安裝，主目錄和虛擬目錄的建立，Web 站點(diǎn)安全性設(shè)置，Web 服務(wù)器性能參數(shù)設(shè)置。實(shí)驗(yàn)步驟

3、：實(shí)驗(yàn)步驟：1 1配置配置 IISIIS 服務(wù)器服務(wù)器1.1 依次按照開始|程序|管理工具|Internet 信息服務(wù)的順序啟動 IIS,如果IIS 沒有添加到“開始”菜單中，則可采用開始|設(shè)置|控制面板|管理工具|Internet 信息服務(wù)的順序啟動 IIS，彈出“Internet 信息服務(wù)”窗口，如 1-1 圖所示。圖 1-1 “IIS”啟動界面如果找不到“Internet 服務(wù)管理器” ，說明你的操作系統(tǒng)還沒有安裝 IIS，你可以進(jìn)入控制面板|添加/刪除程序|添加/刪除 Windows 組件后，勾選“Internet 信息服務(wù)（IIS） ”并進(jìn)行安裝定制后，Windows 將自動完成安裝

4、過程。1.2 右鍵單擊“默認(rèn)”選項(xiàng)，在彈出的快捷菜單中選擇“屬性”項(xiàng)，彈出“默認(rèn) 屬性”對話框，如 1-2 圖所示。 . . . 4 / 60圖 1-2 “默認(rèn) 屬性”對話框1.3 選擇如圖 1-2 所示“”選項(xiàng)卡，在“IP 地址”下拉列表框中輸入本服務(wù)器的真實(shí) IP 地址。若對本 Web 服務(wù)器的配置是作為測試用的，通常情況下可使用默認(rèn)的設(shè)置“全部未分配”或輸入“” 。如果服務(wù)器擁有多個(gè) Web 站點(diǎn)但只有一個(gè) IP 地址，用戶單擊“IP 地址”欄右側(cè)的“高級”按鈕，彈出如圖 1-3 所示的對話框。圖 1-3 “多高級配置”對話框 圖 1-4 “高級標(biāo)識”對話框單擊“添加(

5、A)”按鈕，輸入 IP 地址、TCP、端口號和主機(jī)頭名。假設(shè)用戶在多個(gè)中有一個(gè)的名稱叫 CET, 已經(jīng)注冊的域名是“.CET.” ，則應(yīng)在主機(jī)頭名中輸入 CET.，如圖 1-4 所示。重復(fù)上述步驟，對每個(gè)指定主機(jī)頭名，指定其 IP 地址一樣，端口號都是 80，這臺提供 Web 服務(wù)的計(jì)算機(jī)就稱為“虛擬主機(jī)”了。2.2. 主目錄和虛擬目錄的建立主目錄和虛擬目錄的建立2.12.1 主目錄的建立每個(gè) Web 站點(diǎn)都必須有一個(gè)主目錄。一個(gè)站點(diǎn)所包含的所有網(wǎng)頁和相關(guān)文件都放在主目錄下。在“默認(rèn) 屬性”對話框中選擇“主目錄”選項(xiàng)卡，如圖 1-7 所示 . . . 5 / 60圖 1-7 “主目錄”選項(xiàng)卡系

6、統(tǒng)默認(rèn)的位置為“此計(jì)算機(jī)上的目錄” ，如圖 1-7 所示。如果不是在系統(tǒng)默認(rèn)的本地路徑下，用戶可以單擊“瀏覽”按鈕來更改主目錄的路徑。六個(gè)有關(guān)設(shè)置權(quán)限的勾選項(xiàng)，用戶可以根據(jù)被管理的特點(diǎn)來選擇配置，如圖 1-7 所示?！皯?yīng)用程序配置”選項(xiàng)卡中一般均采用默認(rèn)值。2.2 虛擬目錄的建立建立虛擬目錄的步驟如下：2.2.1 在“Internet 信息服務(wù)”窗口中右鍵單擊“默認(rèn)”選項(xiàng)，在彈出的快捷菜單中選擇“新建| 虛擬目錄” ，彈出“虛擬目錄創(chuàng)建向?qū)А睂υ捒?，如圖 1-8 所示：圖 1-8 “虛擬目錄創(chuàng)建向?qū)А睂υ捒?圖 1-9 “虛擬目錄別名”對話框2.2.2 單擊“下一步” ，彈出“虛擬目錄別名”對

7、話框，在別名處輸入相應(yīng)的別名，如圖 1-9 所示。別名不要隨意取定，因?yàn)樵L問虛擬目錄中的網(wǎng)頁時(shí)要通過別名來訪問。2.2.3 繼續(xù)單擊“下一步” ，彈出“容目錄”對話框，輸入容所在的目錄路徑，或單擊“瀏覽”按鈕來選擇，如圖 1-10 所示。 . . . 6 / 60圖 1-10 “容目錄”對話框 圖 1-11 “訪問權(quán)限”對話框(4)單擊“下一步” ，彈出“訪問權(quán)限”窗口，如圖 1-11 所示。這里所設(shè)置的“訪問權(quán)限”與建立主目錄中所說的“權(quán)限”一樣，讀者可根據(jù)前面的介紹和將要管理的類型來選擇設(shè)置“訪問權(quán)限” ，以確保能夠順利、安全地運(yùn)行。(5)“訪問權(quán)限”設(shè)置完畢后，單擊“下一步” ，彈出“完

8、成”窗口，如圖 1-12 所示。圖 1-12 “虛擬目錄創(chuàng)建完成”對話框 圖 1-13 創(chuàng)建虛擬目錄選項(xiàng)卡單擊“完成”按鈕，則整個(gè)創(chuàng)建虛擬目錄的過程全部完成。3 3WebWeb 站點(diǎn)安全性設(shè)置站點(diǎn)安全性設(shè)置在“默認(rèn) 屬性”對話框選擇“目錄安全性”選項(xiàng)卡，出現(xiàn)如圖 1-14 所示界面。圖 1-14 “目錄安全性”選項(xiàng)卡 . . . 7 / 603.1 匿名訪問和身份驗(yàn)證控制用戶在該安全性設(shè)置下單擊“編輯”按鈕，在如圖 1-15 中所示的“身份驗(yàn)證方法”對話框中將“匿名訪問”選項(xiàng)框勾去即可。圖 1-15 “身份驗(yàn)證方法”對話框 圖 1-16 “IP 地址和域名限制”對話框3.2 IP 地址和域名限

9、制在圖 1-14 中的“IP 地址和域名限制”選項(xiàng)組中單擊“編輯”按鈕，彈出如圖 1-16 所示的對話框。在列表框中可以輸入允許來訪用戶的 IP 地址或域名也可以輸入被拒絕訪問用戶的 IP 地址或域名。4 4WebWeb 服務(wù)性能參數(shù)設(shè)置服務(wù)性能參數(shù)設(shè)置用戶可在如圖 1-17 所示的“性能”選項(xiàng)卡上進(jìn)行相關(guān)的設(shè)置。圖 1-17 “性能”選項(xiàng)卡另外一種提高 Web 服務(wù)性能的方法就是使用 壓縮優(yōu)化功能。在開啟 IIS 管理器后，在服務(wù)器條目上右鍵單擊并選擇“屬性” ，然后選擇主屬性為“WWW 服務(wù)” ，單擊“編輯(E)”,切換到“服務(wù)”選項(xiàng)卡，如圖 1-18 所示。 . . . 8 / 60圖

10、1-18 壓縮“服務(wù)”選項(xiàng)卡5.5. 實(shí)驗(yàn)作業(yè)實(shí)驗(yàn)作業(yè)安裝配置 IIS Web 服務(wù)器。 . . . 9 / 60實(shí)驗(yàn)二實(shí)驗(yàn)二 VisualVisual Studio2005Studio2005 開發(fā)環(huán)境與發(fā)開發(fā)環(huán)境與發(fā)布的方法布的方法實(shí)驗(yàn)容：實(shí)驗(yàn)容：VS2005 操作界面，Visual SourceSafe 服務(wù)端與客戶端的配置與 Web 應(yīng)用系統(tǒng)的三種發(fā)布方式。實(shí)驗(yàn)?zāi)康模簩?shí)驗(yàn)?zāi)康模菏煜?VS2005 開發(fā)環(huán)境，熟悉和掌握 Visual SourceSafe 的常用功能，掌握發(fā)布的三種主要方法。實(shí)驗(yàn)步驟：實(shí)驗(yàn)步驟：1.1. VSVS 20052005 開發(fā)環(huán)境主要操作界面開發(fā)環(huán)境主要操作界面

11、1.1 起始頁：執(zhí)行 VS 2005 時(shí)會顯示起始頁，如圖 2-1 所示。此頁左側(cè)“最近的項(xiàng)目”顯示了用戶在最近時(shí)間利用 VS 2005 創(chuàng)建和修改的項(xiàng)目，單擊則打開該項(xiàng)目。 “打開”有兩個(gè)可選項(xiàng)，單擊“打開”位置的“項(xiàng)目”可在出現(xiàn)的對話框中選擇需要在 VS2005 中打開的項(xiàng)目文件。單擊“打開”位置的“”可在圖 2-2 所示的“打開”對話框中，選擇相應(yīng)欄目即可打開一個(gè)已經(jīng)存在的。在圖 2-2 所示對話框的左側(cè)顯示的是欲打開的位置。其中， “文件系統(tǒng)”表示該在用戶電腦上存放的目錄路徑；“本地 IIS”表示該已經(jīng)完成了 IIS 的相關(guān)配置，不需要具體知道在用戶電腦的存放位置，只需單擊在 IIS

12、中配置的即可打開該；“FTP 站點(diǎn)”則表示用戶欲打開的是存放在某個(gè) FTP 服務(wù)器上的；“遠(yuǎn)程站點(diǎn)”則表示用戶欲打開的是已經(jīng)發(fā)布在 Internet 上的。圖 2-1 起始頁界面 圖 2-2 “打開”對話框1.21.2 創(chuàng)建一個(gè)新的開發(fā)環(huán)境創(chuàng)建一個(gè)新的開發(fā)環(huán)境。單擊 “創(chuàng)建”位置的“” ，然后選擇“ASP.NET” ，選擇一種開發(fā)語言如 C#，輸入存放的位置，即可的存放位置有三種選項(xiàng)，分別是“文件系統(tǒng)” 、 “”和“FTP” 。對于文件系統(tǒng)，新建的可以放在本地或共享文件夾下；對于“”選項(xiàng)，如圖 2-3 所示，表示新建的將直接放在某個(gè) Web 服務(wù)器上，此時(shí)需要你先在 Web 服務(wù)器上新建一個(gè)空

13、的（也即主目錄下無任何文件） ，并配置服務(wù)器擴(kuò)展，此時(shí)再在“位置”處輸入“IP 地址” ，新建生成的文件就會 . . . 10 / 60直接放在服務(wù)器上。對于“FTP”選項(xiàng)，用戶新建的可以通過 FTP 協(xié)議放到 FTP 服務(wù)器上。圖 2-3 “新建”對話框1.31.3 菜單欄和工具條菜單欄和工具條(Menu(Menu BarBar andand ToolTool Strip)Strip)圖 2-4 所示是 VS 2005 在新建一個(gè)后顯示的主菜單和工具條。主菜單由“文件” 、 “編輯” 、 “視圖”等子菜單組成。工具條是菜單項(xiàng)的圖標(biāo)顯示，方便用戶的使用。用戶可根據(jù)需要來動態(tài)顯示或隱藏工具條。在

14、右鍵單擊主菜單出現(xiàn)的右鍵菜單中，里面包括了所有的工具條，可以選擇其顯示或隱藏。一般工具條會根據(jù)用戶使用的場合動態(tài)顯示或隱藏。如果用戶不知道某個(gè)圖標(biāo)的具體含義，可將鼠標(biāo)指針放在該圖標(biāo)上，以便動態(tài)顯示圖標(biāo)的用途。主菜單里包含了用于管理 IDE（Integrated Development Environment，集成開發(fā)環(huán)境） 、編譯和執(zhí)行程序的所有命令，并隨著項(xiàng)目的不同而有所區(qū)別。圖 2-26 展示了 VS 2005 在新建一個(gè)后所顯示的主菜單。圖 2-4 主菜單和工具條1.41.4 解決方案資源管理器解決方案資源管理器(Solution(Solution ExplorerExplorer)解決

15、方案資源管理器窗口列出了解決方案中的所有項(xiàng)目與項(xiàng)目所包含的文件，如圖 2-5 所示。圖 2-5 “解決方案資源管理器” . . . 11 / 601.51.5 工具箱工具箱(Tool(Tool Box)Box)要想展開一個(gè)組的成員，只需單擊組名即可，如圖 2-6 所示。圖 2-6 “工具箱”的組件構(gòu)成1.61.6 屬性窗口屬性窗口(Properties(Properties Windows)Windows)每個(gè)控件都有自己的一套屬性。在屬性窗口底部包含了對所選屬性的說明，如圖 2-7所示。圖 2-7 “屬性”窗口2.2.源代碼的版本控制源代碼的版本控制 2.12.1 VSS 在服務(wù)端的安裝和配

16、置.1 創(chuàng)建共享文件夾創(chuàng)建共享文件夾在服務(wù)端要先創(chuàng)建一個(gè)進(jìn)行源代碼管理的數(shù)據(jù)庫，以便在服務(wù)器端存儲開發(fā)團(tuán)隊(duì)中需要進(jìn)行控制的源代碼。創(chuàng)建共享網(wǎng)絡(luò)文件夾的過程為：1. 在 VSS 服務(wù)器端，打開 Windows 資源管理器，在 D 盤新建一個(gè)名為 “MyCode”的文件夾；2. 右擊“MyCode” ，然后單擊“屬性” ；3. 在“MyCode 屬性”對話框中，單擊“共享”選項(xiàng)卡，共享名為“MyCode”保持不變，然后單擊“共享該文件夾” 。該共享的“D:MyCode”文件夾就將用來存放開發(fā)團(tuán)隊(duì)中需要進(jìn)行控制的源代碼了，也即源代碼管理數(shù)據(jù)庫了將放在此文件夾中。.2

17、創(chuàng)建源代碼管理數(shù)據(jù)庫創(chuàng)建源代碼管理數(shù)據(jù)庫1. 在服務(wù)器端，打開“開始”菜單，指向程序|Microsoft Visual SourceSafe|Visual SourceSafe 6.0 Admin，出現(xiàn)“Visual SourceSafe Login”對話框。如圖 2-8所示。在安裝 VSS 服務(wù)端后，VSS 自動建了 Admin 登錄賬號（無密碼）和 Common 數(shù)據(jù)庫。單擊“OK”后，進(jìn)入 VSS 數(shù)據(jù)庫登錄賬號管理界面，如圖 2-9 所示。 . . . 12 / 60圖 2-8 VSS 登錄對話框 圖 2-9 VSS 數(shù)據(jù)庫登錄賬號管理界面2. 在圖 2-9 所示“Visual Sou

18、rceSafe Administrator”對話框的“Tools”菜單中，選擇“Create Database” ；3. 在“Create new VSS Database in”框中，輸入“WclNoteMyCode” ，其中“WclNote”為 VSS 服務(wù)器名稱，也可通過瀏覽找到共享文件夾“MyCode” 。單擊“OK”后將自動創(chuàng)建源代碼管理數(shù)據(jù)庫“MyCode” 。 4. 下面打開這個(gè)數(shù)據(jù)庫，進(jìn)行訪問用戶的賬號設(shè)置。在圖 2-9 中選擇“User”菜單下的“Open SourceSafe Database”,出現(xiàn)“Open SourceSafe Database”對話框，單擊“Brow

19、se”按鈕，出現(xiàn)“Find Database”對話框，在文件名處直接輸入“WclNoteMyCodesrcsafe.ini” ，單擊“打開”后，新建數(shù)據(jù)庫的名稱和路徑就出現(xiàn)在“Open SourceSafe Database”對話框的列表框中，雙擊之，在隨后的對話框中單擊“OK” ，然后出現(xiàn)一個(gè)提示信息框，意思是給 MyCode 數(shù)據(jù)庫建了一個(gè) Admin 管理賬號，密碼為空，出于安全考慮，應(yīng)更改管理賬號 Admin 的登錄密碼。單擊“OK”后，將出現(xiàn)和圖 2-9 相似的 MyCode 數(shù)據(jù)庫登錄賬號管理界面。5根據(jù)開發(fā)團(tuán)隊(duì)中成員分工情況，為開發(fā)團(tuán)隊(duì)中的每個(gè)人員都分配一個(gè) VSS 服務(wù)器的用戶

20、賬號，以后要打開 Mycode 這個(gè)數(shù)據(jù)庫時(shí)需要進(jìn)行身份認(rèn)證。圖 2-10 MyCode 數(shù)據(jù)庫登錄賬號管理界面添加用戶：選擇圖 2-10 中Users|Add User菜單，輸入用戶名和密碼，建立“Wcl”用戶，密碼也為“wcl” 。建立的賬號對源代碼數(shù)據(jù)庫只有兩種操作權(quán)限，要么只讀要么讀寫。設(shè)置“wcl”賬號具有讀寫權(quán)限。為安全起見，需更改 Admin 的登錄密碼。先在列表框中選中 Admin 賬號，選擇Users|Change Password菜單后，可完成密碼的修改操作。至此 VSS 服務(wù)器端的 Mycode 數(shù)據(jù)庫已設(shè)置完畢。3.VSS3.VSS 在客戶端的安裝和配置在客戶端的安裝和

21、配置3.1 將源程序添加到 VSS 中進(jìn)行代碼管理1進(jìn)入 VS 2005 并打開項(xiàng)目文件（源程序） ，選擇“工具|選項(xiàng)”菜單后，出現(xiàn)如圖 2-11 所示對話框。在“當(dāng)前源代碼管理插件”下拉列表框中選擇源代碼管理插件“Microsoft Visual SourceSafe”后，就可在圖 2-12 中進(jìn)行源代碼管理環(huán)境設(shè)置了。 . . . 13 / 60圖 2-11 “選項(xiàng)”屬性對話框圖 2-12 “工具配置”對話框簽入與簽出：將源代碼放到 VSS 數(shù)據(jù)庫中進(jìn)行管理，我們稱此過程為“簽入” （Check-in） ；從 VSS 數(shù)據(jù)庫中調(diào)出源代碼進(jìn)行修改，我們稱此過程為“簽出” （Check-out

22、） 。2當(dāng)前述源代碼管理插件 VSS 選定后，就會在 VS 2005 的“文件”菜單中出現(xiàn)“源代碼管理”子菜單，如圖 2-13 所示。單擊選擇“將解決方案添加到源代碼管理” ，出現(xiàn)“Visual SourceSafe Login”登錄窗口，輸入前面建立的用戶名“wcl”和密碼“wcl” ，數(shù)據(jù)庫輸入或選擇“wclnotemycode” ，單擊“OK”后，出現(xiàn)圖 2-14 所示的 “將 VS 2005 解決方案添加到 VSS 管理”對話框，單擊“create”和“OK”后，則整個(gè)解決方案將由 VSS 管理。 . . . 14 / 60圖 2-13 “源代碼管理”子菜單圖 2-14 將 VS 20

23、05 解決方案添加到 VSS 管理3編輯、比較、獲取文件，查看文件歷史記錄：鼠標(biāo)右鍵單擊此文件，出現(xiàn)圖 2-15所示編輯修改前后的右鍵菜單。 . . . 15 / 60圖 2-15 “加鎖”狀態(tài)、文件編輯修改前右鍵菜單、文件編輯修改后右鍵菜單4撤消 VSS 管理：首先打開“文件”菜單下的“源代碼管理”中的“更改源代碼管理”子菜單，如圖 2-16 所示。圖 2-16 “更改源代碼管理”菜單然后，在如圖 2-17 對話框中單擊“取消綁定”按鈕即可。 . . . 16 / 60圖 2-17 “取消綁定”對話框3.23.2 客戶端獲取服務(wù)器端的源代碼客戶端獲取服務(wù)器端的源代碼3.2.1 在客戶端直接用

24、 VSS 6.0 獲取服務(wù)器端的源代碼1在開始菜單中選擇程序(P)|Microsoft Visual SourceSafe| Microsoft Visual SourceSafe 6.0出現(xiàn)如圖 2-18 的界面。2-18“VSS Login”對話框2在圖 2-18 中的對話框中輸入 VSS 管理賬號 Admin 和密碼，在“Database”處輸入VSS 數(shù)據(jù)庫名稱“wclnotemycode”后，也可單擊“Browse”按鈕選擇 VSS 數(shù)據(jù)庫“MyCode” ，單擊“OK”后進(jìn)入如圖 2-19 所示的界面。圖 2-19 VSS Explorer3在圖 2-19 中，用鼠標(biāo)右擊“$/”

25、，在出現(xiàn)的右鍵菜單中選擇“Set Working Folder” ，即設(shè)置存放解決方案或項(xiàng)目源代碼的本地工作文件夾。在出現(xiàn)的對話框中可直接輸入本地工作目錄名稱，設(shè)定工作目錄為“D:MyAppCode” ，單擊“OK”退出工作目錄設(shè)定對話框，然后再次用鼠標(biāo)右擊“$/” ，在出現(xiàn)的右鍵菜單中選擇“Get The Latest Version” ，出現(xiàn)圖 2-20 “Get Multiple”對話框，選擇“Recursive” ，遞歸獲取各文件夾中的文件，然后單擊“OK” ，此時(shí) VSS 服務(wù)端數(shù)據(jù)庫中的所有源程序都放到文件夾“D:MyAppCode”中。4在 VS 2005 中打開項(xiàng)目對話框中，在

26、文件名處輸入“D:MyAppCode” ，然后一直找到“Projects”子文件夾，再在其下面找到擴(kuò)展名為“sln”的文件，打開它即完成了成員B 從 VSS 數(shù)據(jù)庫獲取源代碼的過程。 . . . 17 / 60圖 2-20 “Get Multiple”對話框3.2.2 直接在 VS 2005 中獲取服務(wù)器端源代碼在需要獲取源代碼的機(jī)器上啟動 VS 2005，在“起始頁”中選擇打開“” ，在彈出的對話框中選擇“源代碼管理”后，出現(xiàn)如圖 2-18 所示的“VSS Login”對話框，登錄后出現(xiàn)如圖 2-21 所示對話框，在“Create New Project in”輸入“D:MyAppCode”

27、 ，作為存放源代碼的目錄，單擊“OK” ，則源代碼自動從 VSS 服務(wù)器存放到本地，并在 VS 2005 中打開了對應(yīng)的“項(xiàng)目” 。圖 2-21 獲取源代碼對話框3.Web3.Web 應(yīng)用系統(tǒng)的發(fā)布應(yīng)用系統(tǒng)的發(fā)布3.1 Web 應(yīng)用系統(tǒng)的手工發(fā)布步驟如下：（1）在 VS 2005 中打開開發(fā)的 Web 項(xiàng)目；（2）單擊“生成”菜單中的“發(fā)布”命令，彈出如圖 2-22 所示的“發(fā)布”對話框。 . . . 18 / 60圖 2-22“發(fā)布”對話框在“目標(biāo)位置”處輸入站點(diǎn)編譯后的存放位置，設(shè)為“c:MyWebsite” ，選擇“允許更新此預(yù)編譯站點(diǎn)”選項(xiàng)，指定將所有程序代碼編譯為程序集，htm、as

28、px 等頁面文件將按原樣復(fù)制到目標(biāo)文件夾。如果不選擇此項(xiàng)則在發(fā)布的中，apsx 文件也將編譯，將無法看到 aspx 源代碼。單擊“確定”按鈕后，系統(tǒng)自動編譯站點(diǎn)。（3）將“c:MyWebsite”中的容拷貝到 IIS 服務(wù)器中的某個(gè)目錄下，假設(shè)為“D:工資管理系統(tǒng)” 。然后進(jìn)入控制面板|管理工具，運(yùn)行“Internet 信息服務(wù)” ，進(jìn)入 IIS服務(wù)管理器。（4）在打開的 IIS 管理器中選擇“新建”菜單，如圖 2-23 所示。圖 2-23“新建”單擊“”后進(jìn)入創(chuàng)建向?qū)?，單擊“下一步”按鈕，進(jìn)入 “描述”窗口。描述實(shí)際上就是的名稱，可以輸入“工資管理系統(tǒng)” 。輸入描述后，單擊“下一步”按鈕，進(jìn)

29、入“IP 地址和端口設(shè)置”對話框。選擇 IP 地址后，保持 TCP 端口不變，輸入的主機(jī)頭名即域名（如果沒有，可以不輸） ，完成后單擊“下一步”按鈕，進(jìn)入“主目錄”對話框進(jìn)行主目錄設(shè)置，輸入“D:工資管理系統(tǒng)” 。設(shè)置完主目錄后，單擊“下一步”按鈕，進(jìn)入“訪問權(quán)限”對話框。根據(jù)的性質(zhì)設(shè)置的訪問權(quán)限后，單擊“下一步”按鈕，進(jìn)入“完成”窗口。整個(gè)創(chuàng)建的過程就結(jié)束了。創(chuàng)建后，用戶就可以在瀏覽器 URL 地址欄輸入“IP 地址”或域名就可訪問了。另外也可將需手工發(fā)布的創(chuàng)建為虛擬目錄來發(fā)布，具體過程參照教材本章第一節(jié) . . . 19 / 60“主目錄和虛擬目錄的建立” 。3.2 Web 應(yīng)用系統(tǒng)的聯(lián)機(jī)

30、發(fā)布Web 應(yīng)用系統(tǒng)的聯(lián)機(jī)發(fā)布過程如下：（1）在圖 2-22“發(fā)布”對話框中的“目標(biāo)位置”輸入項(xiàng)右側(cè)單擊小按鈕，出現(xiàn)如圖 2-24 所示對話框。 。（2） 在圖 2-24 中，單擊“FTP 站點(diǎn)”可以按照 FTP 方式進(jìn)行站點(diǎn)發(fā)布；單擊“選擇站點(diǎn)”則按照 方式進(jìn)行站點(diǎn)發(fā)布。 “本地 IIS”實(shí)際上也是按照 方式進(jìn)行站點(diǎn)發(fā)布，只不過無需遠(yuǎn)程連接。 “文件系統(tǒng)”即是前面介紹的手工發(fā)布方式。（3）對于以“遠(yuǎn)程站點(diǎn)”方式發(fā)布的前提條件是在 IIS 服務(wù)器上安裝 FrontPage 服務(wù)器擴(kuò)展。單擊“遠(yuǎn)程站點(diǎn)”后輸入實(shí)際位置。對于“FTP 站點(diǎn)”發(fā)布方式，需要輸入 FTP服務(wù)器的 IP 地址和存放路徑。

31、（4）設(shè)置完成后，單擊圖 2-22 中 “確定”按鈕后，系統(tǒng)自動編譯站點(diǎn)，并且將發(fā)送到指定位置。圖 2-24 “發(fā)布”對話框3.3 Web 應(yīng)用系統(tǒng)的打包發(fā)布在 VS 2005 中制作 Web 應(yīng)用系統(tǒng)安裝程序的步驟描述如下： （1）首先在 VS 2005 中打開需要制作安裝程序的、已經(jīng)完成的 Web 項(xiàng)目； （2）在“文件”菜單上選擇添加|新建項(xiàng)目菜單，如圖 2-25 所示。 . . . 20 / 60圖 2-25 “新建項(xiàng)目”（3）在如圖 2-26 所示的“添加新項(xiàng)目”對話框中選擇“其它項(xiàng)目類型”中的“安裝和部署” ，在右邊列表框中選擇“Web 安裝項(xiàng)目” ，輸入安裝項(xiàng)目名稱和安裝程序的存

32、放地址后單擊“確定”按鈕。不妨將項(xiàng)目名稱輸為“myWebSetup” 。圖 2-26 “新建項(xiàng)目”對話框（4）在“解決方案資源管理器”中選擇“myWebSetup”項(xiàng)目，單擊打開屬性窗口，輸入“輸出文件名” ，如圖 2-27 所示。單擊“系統(tǒng)必備”按鈕可選擇系統(tǒng)運(yùn)行所必備的組件，包括 .net framework 2.0 等。 . . . 21 / 60圖 2-27 “屬性”窗口（5）在“解決方案資源管理器”中選擇“myWebSetup”項(xiàng)目，單擊右鍵，在彈出的快捷菜單中選擇“添加” ，然后選擇“項(xiàng)目輸出” ，出現(xiàn)“添加項(xiàng)目輸出組”對話框，如圖 2-28 所示。選擇需要生成安裝程序的項(xiàng)目后，單

33、擊“確定” 。 圖 2-28 “項(xiàng)目輸出”菜單和“添加項(xiàng)目輸出組”對話框（6）在“解決方案資源管理器”中選擇“myWebSetup”項(xiàng)目，單擊右鍵，在彈出的快捷菜單中選擇“視圖” ，然后選擇“用戶界面”后，就會出現(xiàn)“用戶界面”樹形菜單，如圖 2-29 所示。用鼠標(biāo)單擊樹形菜單各項(xiàng)，進(jìn)行屬性設(shè)置（若沒有出現(xiàn)屬性窗口，則按下F4 功能鍵） 。例如“歡迎使用” 中可指定安裝程序的背景圖片、警告文本和歡迎文本。 . . . 22 / 60圖 2-29 安裝程序“用戶界面” 設(shè)置（7）設(shè)置 Web 安裝項(xiàng)目的虛擬目錄等重要屬性。ASP.NET 打包項(xiàng)目中可以設(shè)置虛擬目錄、默認(rèn)首頁等屬性，方法是選擇圖 2

34、-58 中的視圖|文件系統(tǒng)菜單后，選擇“Web 應(yīng)用程序文件夾” ，然后按下 F4 功能鍵在屬性窗口中，設(shè)定相應(yīng)的 VirtualDirecoty 和DefaultDocument 屬性。ASP.NET 安裝項(xiàng)目還提供“注冊表”等設(shè)置，可以在安裝過程中自動添加注冊表鍵名和鍵值，方法是選擇圖 2-58 中的視圖|注冊表菜單后，右鍵單擊某個(gè)注冊表分支后選擇“新建鍵” ，然后在屬性窗口輸入相關(guān)鍵值等。（8）在“解決方案資源管理器”中選擇“myWebSetup”項(xiàng)目，單擊右鍵，在彈出的快捷菜單中選擇“生成”或者“重新生成” ，生成安裝文件。生成完成后，在第 4 步所指定的路徑下，即可發(fā)現(xiàn)有一個(gè) set

35、up.exe 和一個(gè) myWebSetup.msi 文件。（9）將這兩個(gè)安裝文件拷貝至需要部署 Web 應(yīng)用的服務(wù)器上，雙擊 setup.exe 文件，即進(jìn)行自動安裝和配置。安裝程序會將 Web 應(yīng)用系統(tǒng)默認(rèn)放在“C:Inetpubwwwroot”文件夾下，也可放在你指定的其它地方，可在 IIS 中進(jìn)一步對之進(jìn)行配置。4 4 實(shí)驗(yàn)作業(yè)實(shí)驗(yàn)作業(yè)新建一個(gè)空，試著用三種方式發(fā)布。 . . . 23 / 60實(shí)驗(yàn)三實(shí)驗(yàn)三 HTMLHTML 基礎(chǔ)與層疊樣式單基礎(chǔ)與層疊樣式單 CSSCSS實(shí)驗(yàn)容實(shí)驗(yàn)容: : HTML 文檔的基本結(jié)構(gòu)。HTML 文檔的各種常用標(biāo)記。HTML 控件標(biāo)記以與幀標(biāo)記、浮動幀標(biāo)記。

36、CSS 中各種選擇符的定義與其使用方法、常用的屬性例如字體屬性、顏色和背景屬性、文本屬性、邊框?qū)傩缘?。?shí)驗(yàn)?zāi)康模簩?shí)驗(yàn)?zāi)康模?、熟悉 HTML 文件的基本結(jié)構(gòu)，掌握各種 HTML 常用標(biāo)記的用法，熟練使用各種 HTML控件標(biāo)記以與幀標(biāo)記、浮動幀標(biāo)記。2、理解疊層樣式單 CSS 的基本原理，掌握 CSS 中各種選擇符的定義與其使用方法。掌握層樣式單 CSS 的基本用法實(shí)驗(yàn)步驟：實(shí)驗(yàn)步驟：1 1瀏覽器中顯示下面的 HTML 文檔。2、HTML 文檔格式標(biāo)記和 HTML 文檔常用文本標(biāo)記的應(yīng)用，實(shí)現(xiàn)下面的例子，對照實(shí)現(xiàn)結(jié)果，體會 HTML 格式文檔標(biāo)記和文本標(biāo)記的應(yīng)用：（1）HTML 文檔格式標(biāo)記HT

37、ML文檔格式標(biāo)記的演示效果組成一個(gè)計(jì)算機(jī)系統(tǒng)的各種設(shè)備稱為硬件?？蓪⒁慌_計(jì)算機(jī)劃分為六個(gè)邏輯部件或部分。具體劃分如下：輸入部件。輸出部件。存儲器。算術(shù)邏輯部件(ALU)。 . . . 24 / 60輔助存儲器。中央處理器(CPU)。輔助存儲器。此處是文本塊標(biāo)記,該文本塊起始和結(jié)束自動加了軟回車功能，起始和結(jié)束都換行此處也是文本塊標(biāo)記，該文本塊起始和結(jié)束不換行（2）HTML 文檔常用文本標(biāo)記。HTML文檔格式標(biāo)記的演示效果這是一本專業(yè)的Dreamweaver MX 2004的書籍What we are doing is just what you need. 3、利用表實(shí)現(xiàn)下面例子4、按照下面的

38、例子實(shí)現(xiàn)標(biāo)記和幀標(biāo)記的綜合應(yīng)用。主文件 framemain.html：HTML文檔標(biāo)記、幀標(biāo)記的演示效果 Please use a Web browser such as IE3.0 orNetscape Navigator to view this page in frames! . . . 25 / 60文件 frame1.html:實(shí)例實(shí)例該 HTML 文檔的顯示效果如圖所示。5、CSS 的一個(gè)應(yīng)用實(shí)例，通過設(shè)計(jì)個(gè)人主頁來體會 CSS 的用法。該主頁使用表格作為主要結(jié)構(gòu)，一個(gè)表的單元格中又嵌入另一個(gè)表，通過使用 CSS，在頭部標(biāo)記集中定義了頁面的顯示樣式，又通過聯(lián)樣式定義了頁面中按鈕風(fēng)格

39、的欄目“團(tuán)結(jié)”、“進(jìn)取”等單元格，使得頁面顯示風(fēng)格靈活多樣。注意塊級元素 div 和 span 用于定義容塊或區(qū)域，它們本身并不顯示任何容，但通過給 div 定義樣式，則可以將樣式應(yīng)用到所有包含在和之間的不同標(biāo)記符上，而不需要為其中的每個(gè)元素指定樣式規(guī)則。源代碼如下：a:linkfont-size:9pt;text-decoration:nonea:visitedfont-size:9pt;text-decoration:nonea:activefont-size:9pt;text-decoration:nonea:hoverfont-size:9pt;text-decoration:none

40、bodyfont-size:9pt;line-height:13pttablefont-size:9pt;line-height:13pttrfont-size:9pt;tdfont-size:9pt; text-align:center;td.border border-right:1pxridge;border-top:1pxridge;border-left:1pxridge;borer-bottom:1pxridge;.efont-size:9pt;font-family:MS Sans Serif;text-decoration:nonediv.mycenter text-align

41、:centerbody scrollbar-face-color:#3165B5;scrollbar-highlight-color:#93bc9c;/*設(shè)置滾動條的外觀*/scrollbar-3dlight-color:#8AB8DC;scrollbar-darkshadow-color:#C0C0C0;scrollbar-shadow-color:#FFFFFF;scrollbar-arrow-color:#FFFFFF;scrollbar-track-color:#E5EEF7;backgroud-image:url(desert.jpg);background-position:0%0

42、% . . . 26 / 60團(tuán)結(jié)進(jìn)取友誼開朗奮斗成功主頁精彩人生學(xué)生時(shí)代多次被評為三好學(xué)生工作歷程先進(jìn)員工在瀏覽器中顯示結(jié)果如圖所示。在 VS2005 中，通過添加新項(xiàng)，選擇樣式表，生成一個(gè)空的樣式表，在 CSS 大綱中，通過鼠標(biāo)右鍵菜單中的“添加樣式規(guī)則”選擇施加樣式的元素或者指定類名和元素 ID 后，新建的元素或者輸入的類名和元素 ID 就會出現(xiàn)在 CSS 大綱中，然后鼠標(biāo)右鍵單擊新建的元素、類名或者元素 ID，單擊“生成樣式” ，就會出現(xiàn)如下圖所示的樣式生成器界面。通過樣式生成器就可自動生成你需要的樣式，而不需要你死記硬背樣式名稱。然后將生成的樣式粘 . . . 27 / 60貼到上述

43、源代碼中。VS2005 中的樣式生成器可生成大部分樣式，仍有部分樣式需要參閱相關(guān)資料，手工處理，例如上例中的滾動條的樣式設(shè)置。實(shí)驗(yàn)四實(shí)驗(yàn)四 JavaScriptJavaScript 語言上機(jī)練習(xí)語言上機(jī)練習(xí)實(shí)驗(yàn)容：實(shí)驗(yàn)容：JavaScript 語言的語法結(jié)構(gòu)和流程控制，JavaScript 語言的事件和對象編程方法。實(shí)驗(yàn)?zāi)康模簩?shí)驗(yàn)?zāi)康模壕毩?xí)并掌握 JavaScript 編程基礎(chǔ)，對象編程技術(shù)。JavaScript ActiveX 編程技術(shù)。實(shí)驗(yàn)步驟：實(shí)驗(yàn)步驟：上機(jī)運(yùn)行以下代碼，查看并保存運(yùn)行結(jié)果。1 1 .JavaScript.JavaScript 編程基礎(chǔ)編程基礎(chǔ)1.11.1 將將 Java

44、ScriptJavaScript 程序嵌入程序嵌入 HTMLHTML 文件的方法文件的方法HTML 文件中使用腳本語言示例 1。HTML中如何使用script語言-設(shè)置收藏夾實(shí)例收藏本站 . . . 28 / 60查看運(yùn)行結(jié)果。查看運(yùn)行結(jié)果。HTML 文件中使用腳本語言示例 2。HTML中如何使用script語言-設(shè)置主頁實(shí)例設(shè)為主頁sethomepage.js文件容：function Set_HomePage() myAlink.style.behavior=url(#default#homepage); myAlink.setHomePage( return false; 直接在 HTML

45、 標(biāo)記添加腳本。將上例改成：HTML中如何使用script語言-設(shè)置主頁實(shí)例設(shè)為主頁查看運(yùn)行結(jié)果。查看運(yùn)行結(jié)果。1.21.2 函數(shù)函數(shù)一個(gè)使用部函數(shù) eval()的示例。var iNumber=100;var anExpression = (16 * 9 % 7);var total = eval(anExpression + / + iNumber); /等同于求(16 * 9 % 7)/100的值alert(total);/ 將變量total 賦值為0.04。設(shè)計(jì)一個(gè)顯示指定數(shù)的階乘值的程序。函數(shù)示例function factor(num) var i,fact=1;for (i=1;in

46、um+1;i+) fact=i*fact; return fact; /調(diào)用factor函數(shù) alert(5的階乘=+ factor(5); /顯示“的階乘=120” . . . 29 / 60默認(rèn)求 1+2+1000，否則按指定開始值、結(jié)束值求和。function sum(StartVal,EndVal)var ArgNum=sum.arguments.length;var i,s=0;if (ArgNum=0) StartVal=1;EndVal=1000;elseif (ArgNum=1) EndVal=1000;for (i=StartVal;i=EndVal;i+) s+=i;ret

47、urn s;/ document.write 表示在瀏覽器中輸出文本document.write(不給出參數(shù)調(diào)用函數(shù)sum:,sum(),);document.write(給出一個(gè)參數(shù)調(diào)用函數(shù)sum:,sum(500),);document.write(給出兩個(gè)參數(shù)調(diào)用函數(shù)sum:,sum(1,50),);在瀏覽器中應(yīng)該顯示結(jié)果如圖 3-1 所示。圖 3-1 創(chuàng)建 JavaScript 函數(shù)1.31.3 事件驅(qū)動與事件處理事件驅(qū)動與事件處理鼠標(biāo)單擊事件鼠標(biāo)單擊(函數(shù)名)。檢查輸入的字符串是否全由數(shù)字組成function checkNum(str) var TestResult = !/D/.t

48、est(str); /使用正則表達(dá)式測試字符串是否全由數(shù)字組成alert(TestResult); . . . 30 / 60鼠標(biāo)單擊(處理語句)。檢查輸入的字符串是否全由數(shù)字組成鼠標(biāo)單擊(函數(shù))。檢查輸入的字符串是否全由數(shù)字組成mybut.onmousedown=function() /* mybut 為按鈕的ID */var TestResult = !/D/.test(mytext.value); /*使用正則表達(dá)式測試字符串是否全是數(shù)字*/ alert(TestResult);Onchange、onselect、onfocus 事件例子。2 2JavaScriptJavaScript

49、對象編程技術(shù)對象編程技術(shù)2.1JavaScript2.1JavaScript 常用的置對象常用的置對象使用 JavaScript 建對象 Array 生成一個(gè)新的數(shù)組。var theMonths = new Array(6); /創(chuàng)建數(shù)組對象theMonths，具有6個(gè)數(shù)組元素theMonths0 = Jan;theMonths1 = Feb;theMonths2 = Mar;theMonths3 = Apr;theMonths4 = May;theMonths5 = Jun;下面的示例與上一個(gè)示例是等價(jià)的。var theMonths = new Array(Jan, Feb, Mar, Ap

50、r, May, Jun);使用自定義對象的方式創(chuàng)建數(shù)組對象。 . . . 31 / 60function arrayName(size)this.length=size;for(var i=0; i=size;i+) thisi=0;returnthis;var MyArray = new arrayName(10);MyArray0=1; MyArray1=2;MyArray2=3;MyArray3=4;MyArray4=5;MyArray5=6;MyArray6=7;MyArray7=8;MyArray8=9;MyArray9=10;alert(MyArray7); /輸出8string

51、對象的建立和使用/ 設(shè)置變量howLong 為11。var howLong = Hello World.length; /錨點(diǎn)方法anchor()。使用anchor作用與Html中(A Name=)一樣。/格式為：string.anchor(anchorName)。/創(chuàng)建一個(gè)名為start的錨點(diǎn)，該處顯示文字開始。var astr=開始;var aname=astr.anchor(start);document.write(aname);/超方法link()。用于創(chuàng)建一個(gè)超, 與Html中(A href=)作用一樣。/格式為:string.link(URL)。var hstr=大學(xué);var h

52、name=hstr.link();document.write(hname);/ substring()方法: substring(start,end)。它返回字符串的一部分，該字符串包含從start 直到/end（不包含end）的子字符串。/substring 方法使用start 和end 兩者中的較小值作為子字符串的起始點(diǎn)。例如，/strvar.substring(0, 3) 和strvar.substring(3, 0) 將返回一樣的子字符串。/如果start 或end 為NaN 或負(fù)數(shù)，那么它將被替換為0。/子字符串的長度等于start 和end 之差的絕對值。例如，在strvar.s

53、ubstring(0, 3) 和/strvar.substring(3, 0) 中，返回的子字符串的長度為3。/字符搜索：indexOfstr,fromIndex。Str1=0123456789;/創(chuàng)建一個(gè)string 對象Str1Str2=2345;/創(chuàng)建一個(gè)string 對象Str2var aChunk = Str1.substring(4, 7); /將aChunk 設(shè)為456。document.write(aChunk=+aChunk);found= Str1.indexOf(Str2);/返回Str2在Str1中的起始位置，found值為。/創(chuàng)建字符串對象的另外一種方法是用newva

54、r mystr= new String(大學(xué));document.write(mystr.link();Math 對象的使用var radius = 5;/ 聲明一個(gè)半徑變量并賦數(shù)值。var circleArea = Math.PI * radius * radius; / 注意Math和PI需大寫。/ 本公式計(jì)算給定半徑的球體的體積。volume = (4/3)*(Math.PI*Math.pow(radius,3);alert(volume); /輸出.5987 . . . 32 / 60/也可用With保留字來簡化程序的寫法with (Math)var circleArea = PI *

55、 radius * radius; / 注意Math和PI需大寫。/ 本公式計(jì)算給定半徑的球體的體積。volume = (4/3)*(PI* pow(radius,3);alert(volume); /輸出.5987Date 對象的使用/*本示例使用前面定義的月份名稱數(shù)組。第一條語句以“Day Month Date 00:00:00 Year”格式對Today 變量賦值。 */var Today = new Date(); /獲取今天的日期。/ 提取年，月，日。thisYear = Today.getFullYear(); thisMonth = Today.getMonth(); thisD

56、ay = Today.getDate();/ 提取時(shí)，分，秒。thisHour=Today.getHours(); thisMinutes=Today.getMinutes();thisSeconds=Today.getSeconds(); /提取星期幾thisWeek=Today.getDay();var x = new Array(日, 一, 二); x = x.concat(三,四, 五, 六);thisWeek=xthisWeek;nowDateTime=現(xiàn)在是+thisYear+年+thisMonth +月+thisDay+日;nowDateTime+=thisHour+時(shí)+this

57、Minutes+分+thisSeconds+秒;nowDateTime+=星期+thisWeek;document.write(nowDateTime+); /輸出：現(xiàn)在是年月日時(shí)分秒/計(jì)算兩個(gè)日期相差的天數(shù)var datestring1 = November 1, 1997 10:15 AM;var datestring2 = December 1, 2007 10:15 AM;var DayMilliseconds= 24*60*60*1000; /1天的毫秒數(shù)var t1 = Date.parse(datestring1) ; /換算成自年月日到年月日的毫秒數(shù)var t2 = Date.

58、parse(datestring2) ; /換算成自年月日到年月日的毫秒數(shù) s = There are s += Math.round(Math.abs(t2-t1)/DayMilliseconds) + days s += between + datestring1 + and + datestring2 ;document.write(s); /輸出：There are 3682 days between November 1, 1997 10:15 AM and December 1, 2007 10:15 AM2.22.2 用戶自定義對象用戶自定義對象創(chuàng)建對象 pasta/定義past

59、a對象function pasta(grain, width, shape, hasEgg) this.grain = grain; this.width = width; this.shape = shape; this.hasEgg = hasEgg; . . . 33 / 60/使用對象的時(shí)候，用new進(jìn)行實(shí)例化，下面建立了兩個(gè)對象實(shí)例。var spaghetti = new pasta(wheat, 0.2, circle, true);var linguine = new pasta(wheat, 0.3, oval, true);document.write(spaghetti.s

60、hape) /輸出circledocument.write(linguine.shape) /輸出oval擴(kuò)充上例中定義的 pasta 構(gòu)造函數(shù)以包含 toString 方法/定義pasta對象function pasta(grain, width, shape, hasEgg) this.grain = grain; this.width = width; this.shape = shape; this.hasEgg = hasEgg; this.toString = pastaToString;function pastaToString() returnGrain: + this.gr