ASPNET程序設(shè)計(jì)第1-2章

1、ASP.NET程序設(shè)計(jì)嚴(yán)健武柳青第第1章章 初步認(rèn)識(shí)初步認(rèn)識(shí)WEB應(yīng)用程序應(yīng)用程序本章導(dǎo)讀本章導(dǎo)讀本章介紹動(dòng)態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁的基本概念和執(zhí)行過程，以及當(dāng)前流行的動(dòng)態(tài)網(wǎng)頁開發(fā)技術(shù)，還對(duì)Asp.Net開發(fā)環(huán)境的安裝和配置作了詳細(xì)介紹。最后，分別用記事本和Microsoft Visual Studio創(chuàng)建和運(yùn)行第一個(gè)Asp.Net網(wǎng)頁。 1.1 動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)概述動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)概述 1.1.1 靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁HTML（Hypertext Markup Language 超文本鏈接語言）是網(wǎng)頁的基礎(chǔ)語言，由一系列特定的標(biāo)記所組成，這些標(biāo)記用于說明如何在瀏覽器（如IE、FireFox等）中呈現(xiàn)文字格式、

2、圖片、聲音以及文件之間的鏈接關(guān)系。完全由HTML標(biāo)記元素構(gòu)成的文件，不會(huì)因時(shí)因地發(fā)生變化，任何人在任何時(shí)候請(qǐng)求讀取該文件時(shí)，在瀏覽器中看到的內(nèi)容都完全一致。因此，完全由HTML標(biāo)記構(gòu)成、沒有程序代碼的HTML網(wǎng)頁文件，又稱為“靜態(tài)網(wǎng)頁”文件。要使網(wǎng)頁內(nèi)容產(chǎn)生動(dòng)態(tài)變化，必須通過編寫程序代碼來實(shí)現(xiàn)。在HTML中嵌入程序代碼，實(shí)現(xiàn)網(wǎng)頁動(dòng)態(tài)變化的網(wǎng)頁，稱之為“動(dòng)態(tài)網(wǎng)頁”。動(dòng)態(tài)網(wǎng)頁仍然以HTML語言為基礎(chǔ)，由服務(wù)器端執(zhí)行代碼并將執(zhí)行結(jié)果轉(zhuǎn)換為靜態(tài)網(wǎng)頁形式，傳輸?shù)娇蛻舳?，由客戶端瀏覽器解釋執(zhí)行。1.1.2 流行的動(dòng)態(tài)網(wǎng)頁技術(shù)ASPASP (Active Server Pages) 是Microsfot公司

3、1996年11月推出的動(dòng)態(tài)網(wǎng)頁開發(fā)技術(shù)，使用VBScript 或 JScript 作為腳本語言嵌入到HTML中，并以.asp 為后綴名保存的動(dòng)態(tài)網(wǎng)頁文件。常用的可視化開發(fā)工具有FrontPage、Dreamweaver等。一般在Windows操作系統(tǒng)下，使用 IIS （Internet Information Server 互聯(lián)網(wǎng)信息服務(wù)器） 作為WEB服務(wù)器，結(jié)合ACCESS或SQL SERVER 數(shù)據(jù)庫進(jìn)行動(dòng)態(tài)網(wǎng)頁的開發(fā)。JSPJSP (Java Server Pages) 是Sun Microsystems 公司倡導(dǎo)、許多公司參與一起建立的一種動(dòng)態(tài)網(wǎng)頁技術(shù)標(biāo)準(zhǔn)。JSP技術(shù)使用Java程序

4、片段(Scriptlet)和JSP標(biāo)記(tag)，嵌入到HTML中，并以 .jsp為后綴名保存的動(dòng)態(tài)網(wǎng)頁文件。JSP代碼首次被被請(qǐng)求時(shí)編譯成Servlet并由Java虛擬機(jī)執(zhí)行。當(dāng)前流行的JSP可視化開發(fā)工具主要有：IBM VisualAge、Borland Jbuilder、Allaire Jrun、NetBeans、Eclipse等。一般在Linux或Unix操作系統(tǒng)下，大中型網(wǎng)站通過搭建Apache Tomcat或IBM WebSphere Application Server作為WEB服務(wù)器，采用Oracle、MySQL、Sybase、DB2等數(shù)據(jù)庫方式進(jìn)行動(dòng)態(tài)網(wǎng)頁開發(fā)。PHPPHP（

5、Hypertext Pre-processor ）中文譯為“超文本預(yù)處理器”，是一種開放源代碼的腳本編程語言，最初只是一套簡(jiǎn)單的Perl腳本，后來用C語言重新進(jìn)行了設(shè)計(jì)。PHP3之后形成了自己的語法結(jié)構(gòu)，其語法結(jié)構(gòu)與C語言相似。目前最新發(fā)布版本PHP4，常用的開發(fā)工具有：Zend Studio，ActiveState Komodo，PHPEclipse及在Windows下面使用的PhpED、PHP designer等。一般在Linux或Unix操作系統(tǒng)下，通過搭建Apache WEB服務(wù)器，采用Oracle、MySQL、Sybase等數(shù)據(jù)庫方式進(jìn)行動(dòng)態(tài)網(wǎng)頁開發(fā)。ASP.NET ASP.NET是

6、Microsfot推出的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)技術(shù)，具備JSP、PHP完全面向?qū)ο?、基于組件、事件驅(qū)動(dòng)和編譯執(zhí)行的特點(diǎn)，具有頁面顯示與代碼分離的易于維護(hù)的優(yōu)點(diǎn)，完全可以利用.Net架構(gòu)的強(qiáng)大、安全、高效的平臺(tái)特性?；谶\(yùn)行時(shí)代碼托管與驗(yàn)證的安全機(jī)制等，為ASP.Net帶來卓越的性能。對(duì)XML、SOAP、WSDL等Internet標(biāo)準(zhǔn)的強(qiáng)健支持，為ASP.NET在異構(gòu)網(wǎng)絡(luò)里提供了強(qiáng)大的擴(kuò)展性。ASP.NET不是ASP簡(jiǎn)單的升級(jí)，可以認(rèn)為是ASP與.NET技術(shù)的組合體?？梢允褂弥С?Net Framework的任何一種語言進(jìn)行ASP.NET動(dòng)態(tài)網(wǎng)頁開發(fā)，如C#、VB.NET等。目前，可以進(jìn)行ASP.NET

7、WEB應(yīng)用程序開發(fā)的、最方便的可視化開發(fā)工具是 Microsoft Visual Studio .Net。當(dāng)然，也可以使用簡(jiǎn)單如記事本進(jìn)行程序編寫1.3 安裝和配置ASP.NET開發(fā)和運(yùn)行環(huán)境要運(yùn)行aspx網(wǎng)頁，必須先安裝.Net Framework ，本書使用的版本為2.0版，這也是Microsoft Visual Studio 2005 默認(rèn)安裝的版本；此外，還必須通過控制面板添加Windows組件中的 Internet 信息服務(wù)組件（IIS），即安裝和配置WEB服務(wù)器。如果系統(tǒng)中已經(jīng)安裝了Microsoft Visual Studio 2005，由于Microsoft Visual St

8、udio 2005內(nèi)置了一個(gè)小型的WEB服務(wù)器，已經(jīng)具備了開發(fā)和調(diào)試運(yùn)行ASP.NET網(wǎng)頁的條件。1.3.1 安裝Microsoft Visual Studio 20051. 安裝Microsoft Visual Studio 2005的環(huán)境需求2. 安裝Microsoft Visual Studio 2005的操作步驟1.3.2 用記事本編寫用記事本編寫Asp.Net頁面頁面 安裝Microsoft Visual Studio 2005后，可以在Microsoft Visual Studio 2005的可視化環(huán)境下創(chuàng)建Asp.Net網(wǎng)頁和調(diào)試運(yùn)行。若通過第三章學(xué)習(xí)ASP.NET基本語法后，還

9、可以用記事本編寫Asp.Net網(wǎng)頁，并通過IIS執(zhí)行，以便理解Asp.Net基本語法。 在Microsoft Visual Studio 2005中開發(fā)完成的一個(gè)A 網(wǎng)站后，最終必須發(fā)布到IIS主目錄中，即通過IIS提供WEB請(qǐng)求服務(wù)。IIS也是網(wǎng)站的真實(shí)運(yùn)行環(huán)境。因此，有必要掌握IIS的安裝和配置。 假設(shè)已經(jīng)安裝了Microsoft Visual Studio 2005。以下在Windows XP SP2環(huán)境下進(jìn)行IIS的安裝和配置；如果沒有安裝Microsoft Visual Studio 2005，則需要先下載并安裝 .Net FrameWork 2.0。 第2章 靜態(tài)網(wǎng)頁設(shè)計(jì)基礎(chǔ) 本章

10、導(dǎo)讀 本章介紹了靜態(tài)網(wǎng)頁的基本結(jié)構(gòu)、靜態(tài)網(wǎng)頁中常見的標(biāo)記和屬性，為WEB程序設(shè)計(jì)初學(xué)者學(xué)習(xí)ASP.NET 動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)打下堅(jiān)實(shí)基礎(chǔ) 靜態(tài)網(wǎng)頁文件由HTML標(biāo)記標(biāo)記組成，以htm或html 為文件后綴名，又稱HTML文件。如果在靜態(tài)網(wǎng)頁中嵌入程序代碼，并保存后綴名為asp或aspx的文件，則構(gòu)成了動(dòng)態(tài)網(wǎng)頁文件。 動(dòng)態(tài)網(wǎng)頁文件內(nèi)容通過Web服務(wù)器執(zhí)行后，將執(zhí)行結(jié)果轉(zhuǎn)換為HTML標(biāo)記組成的內(nèi)容，輸出到瀏覽器。因此，HTML標(biāo)記是網(wǎng)頁的基本構(gòu)成。靜態(tài)網(wǎng)頁可以用記事本編輯，也可以用可視化開發(fā)工具自動(dòng)生成，如FrontPage 、Dreamweaver等。靜態(tài)網(wǎng)頁不需要IIS支持，建立靜態(tài)網(wǎng)頁文件后，直接

11、雙擊即可在瀏覽器打開。為了熟悉HTML標(biāo)記，建議初學(xué)者用記事本演練本章所有范例，以到達(dá)熟悉HTML標(biāo)記的目的。 2.1 Html文件基本結(jié)構(gòu) 例例2-1 通過一個(gè)簡(jiǎn)單的動(dòng)態(tài)網(wǎng)頁文件，理解HTML文件的基本結(jié)構(gòu)。代碼代碼 HTML標(biāo)題標(biāo)題 這是網(wǎng)頁內(nèi)容這是網(wǎng)頁內(nèi)容 代碼說明代碼說明靜態(tài)網(wǎng)頁是由標(biāo)記所組成，標(biāo)記都是成對(duì)出現(xiàn)的。如：、 等。標(biāo)記中可以包含其它的標(biāo)記或內(nèi)容，但不可以交叉引用。成對(duì)標(biāo)記中，首先出現(xiàn)的標(biāo)記稱為“首標(biāo)記”，如：；后出現(xiàn)的標(biāo)記稱為“尾標(biāo)記”，如：。尾標(biāo)記是在首標(biāo)記前帶 / 號(hào)。標(biāo)記表明是一個(gè)網(wǎng)頁文件，每個(gè)靜態(tài)網(wǎng)頁文件都以開始，以標(biāo)記結(jié)束。表示這是網(wǎng)頁文件格式首部，一般包含網(wǎng)頁標(biāo)

12、題標(biāo)記，如： 。與標(biāo)記之間的內(nèi)容出現(xiàn)在頁面的標(biāo)題欄。之間的內(nèi)容，是出現(xiàn)在瀏覽器窗口中的內(nèi)容。靜態(tài)網(wǎng)頁可以使用記事本進(jìn)行編輯。保存時(shí)，后綴名為 htm 或 html。保存后，雙擊即可直接運(yùn)行。程序運(yùn)行結(jié)果程序運(yùn)行結(jié)果程序運(yùn)行結(jié)果如圖2-1所示。 圖2-1 顯示效果 任意一個(gè)文本文件，將后綴名改為 html 或html后，都可以作為靜態(tài)網(wǎng)頁文件在瀏覽器中打開。這也說明，靜態(tài)網(wǎng)頁的標(biāo)記很多是可以省略的。如果省略所有標(biāo)記，則文本內(nèi)容默認(rèn)為Body標(biāo)記中的內(nèi)容。 2.2 標(biāo)記的使用 為了在瀏覽器中呈現(xiàn)各種不同的顯示頁面內(nèi)容效果，可以對(duì)文字、段落加以修飾，或在頁面中添加聲音和圖像，或從一個(gè)頁面轉(zhuǎn)向另外的頁

13、面等。靜態(tài)網(wǎng)頁由大量標(biāo)記組成，這些標(biāo)記代表著一定的含義，由瀏覽器下載到本地并進(jìn)行解釋后，呈現(xiàn)各種絢麗的效果，從而實(shí)現(xiàn)超越文本文件的功能。標(biāo)記可以包含屬性，不同的標(biāo)記有著不同的含義。 2.2.1 Body 標(biāo)記及其常用屬性 例例2-2 產(chǎn)生一個(gè)灰色背景和紅色字體的頁面。代碼代碼 灰色頁面背景，紅色字體 這是網(wǎng)頁內(nèi)容 代碼說明代碼說明bgcolor和text稱為body標(biāo)記的屬性名，分別用于設(shè)置頁面背景色和字體顏色；gray 和red 分別為其屬性值，可以是英文顏色常數(shù)，也可以是16進(jìn)制的顏色值，例如，#000000代表黑色，#FFFFFF代表白色等。用于修飾頁面的背景顏色和頁面上字體的顏色。屬性

14、包含在首標(biāo)記中，多個(gè)屬性以空格隔開。一般，屬性值帶雙引號(hào)（也可以不帶）。對(duì)于body標(biāo)記而言，還可以有其他的標(biāo)記。例如，在body中添加background 屬性：background =p1.jpg，可以指定頁面背景為網(wǎng)站中的圖片，這里指定為與該靜態(tài)網(wǎng)頁文件同一文件夾中的P1.jpg文件，該文件在測(cè)試時(shí)必須存在。 在以下的例子中，為了說明重點(diǎn)，將省略HTML文件中基本結(jié)構(gòu)的標(biāo)記。除非特別說明，所有的標(biāo)記都放置在與之間2.2.2 H1H6標(biāo)記 例例2-3 顯示H1H6標(biāo)記中文字知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備 標(biāo)記可以快速設(shè)置標(biāo)題文字的大小。首尾標(biāo)記之間包含文字內(nèi)容，尾標(biāo)記之后的內(nèi)容將自動(dòng)換行。 代碼代碼這是

15、H1大小這是H2大小這是H3大小這是H4大小這是H5大小這是H6大小運(yùn)行結(jié)果運(yùn)行結(jié)果運(yùn)行結(jié)果如圖運(yùn)行結(jié)果如圖2-2所示。所示。圖2-2 h1h6標(biāo)記效果2.2.3 單標(biāo)記 例例2-4 單標(biāo)記的使用。知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備單標(biāo)記是指并非成對(duì)出現(xiàn)的標(biāo)記。為了滿足HTML 4.0的格式，一般單標(biāo)記在符號(hào)前，加上 / 符號(hào)表示標(biāo)記的結(jié)束。1. 常用單標(biāo)記換行標(biāo)記換行標(biāo)記與段落標(biāo)記與段落標(biāo)記如果要控制文字換行，直接按回車鍵是不會(huì)換行的。在需要換行的內(nèi)容前加上標(biāo)記，可以控制文字的換行。標(biāo)記是段落標(biāo)記，也可以實(shí)現(xiàn)內(nèi)容的換行。與標(biāo)記不同，標(biāo)記換行的間隔比換行要大。 水平線標(biāo)記水平線標(biāo)記 用于在頁面上顯示一條與頁面窗

16、口等寬的直線，起到裝飾作用。圖片顯示標(biāo)記圖片顯示標(biāo)記標(biāo)記也是單標(biāo)記，用于在頁面中顯示指定的圖片文件。該標(biāo)記必須設(shè)置圖片文件位置和圖片文件名，同時(shí)可以設(shè)置圖片顯示的大小。例如：2. 標(biāo)記的屬性值2. 標(biāo)記的屬性值Src屬性屬性指定圖片的來源，即文件位置和文件名，可以是bmp 文件（由于占用空間大，很少使用該格式），也可以是Gif 、Png、Jpg或其他圖形格式文件。其中，文件位置有相對(duì)位置和絕對(duì)位置。絕對(duì)位置指在硬盤中的具體位置，一般網(wǎng)頁設(shè)計(jì)幾乎不會(huì)使用；相對(duì)位置指圖片文件相對(duì)該網(wǎng)頁文件的位置，表示方法（假定在當(dāng)前網(wǎng)頁顯示的圖片文件為p1.jpg）見表2-1。 Width屬性和屬性和height

17、屬性屬性指定圖片的寬度和高度。其中，寬度值90%指定圖片按實(shí)際寬度90%大小顯示，百分比是相對(duì)大??；高度值60px為絕對(duì)大小。如果不帶這兩個(gè)屬性，則圖片按原始大小顯示。表2-1 相對(duì)位置描述方法格式 含義 p1.jpg 圖片與該網(wǎng)頁同一文件夾中 ./p1.jpg 圖片在該網(wǎng)頁的上一級(jí)文件中 Images/p1.jpg Images文件夾與該網(wǎng)頁在同一位置，圖片在iamges文件夾中 /p1.jpg 圖片在網(wǎng)站的根目錄下 Alt屬性屬性顯示圖片的提示。當(dāng)圖片文件不存在時(shí)，提示文字將顯示在img 區(qū)域。代碼代碼這是第一行這是第二行我的照片運(yùn)行結(jié)果運(yùn)行結(jié)果 圖2-3 單標(biāo)記使用效果 2.2.4 塊標(biāo)

18、記塊標(biāo)記例例2-5 將古詩每?jī)删浞中酗@示，全詩在頁面分別左對(duì)齊、居中和右對(duì)齊顯示。知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備1. 塊標(biāo)記塊標(biāo)記8又稱區(qū)域標(biāo)記，將網(wǎng)頁部分連續(xù)的內(nèi)容（如段落）作為塊，便于統(tǒng)一設(shè)置區(qū)域內(nèi)容的格式（對(duì)齊方式、字體樣式等）。常見的塊標(biāo)記有div 和 span 兩種。Span標(biāo)記與div標(biāo)記的不同之處：div標(biāo)記后的內(nèi)容將換行，span標(biāo)記后的內(nèi)容不換行。 2. 標(biāo)記屬性說明：Align屬性：塊內(nèi)文字對(duì)齊方式，有三個(gè)取值，為left(左對(duì)齊)、center（居中對(duì)齊）和right(右對(duì)齊)代碼代碼窗前明月光，疑是地上霜舉頭望明月，低頭思故鄉(xiāng)窗前明月光，疑是地上霜舉頭望明月，低頭思故鄉(xiāng)窗前明月光，疑

19、是地上霜舉頭望明月，低頭思故鄉(xiāng)運(yùn)行結(jié)果運(yùn)行結(jié)果運(yùn)行結(jié)果如圖2-4所示。 圖2-4 例2-5顯示效果 2.2.5 文字樣式文字樣式例例2-6 文字樣式綜合應(yīng)用，顯示如圖2-5的效果。知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備如果要單獨(dú)設(shè)置個(gè)別文字、行、段落的文字顯示新字體、大小和顏色，可以在包含的文本前后加上font 標(biāo)記。font 標(biāo)記用來設(shè)置其標(biāo)記內(nèi)容的字體、字號(hào)及字形等。例如：紅色黑紅色黑體體 其中：face屬性：指定字體名稱。指定的字體必須在本機(jī)上已經(jīng)安裝，否則以默認(rèn)字體出現(xiàn)。color屬性：指定顯示的顏色。size屬性：指定顯示的字號(hào)，取值為 17。如果要顯示字形效果，可以在包含的文字前后添加（粗體）、（斜體）

20、和 (下劃線) 標(biāo)記。如果要添加上標(biāo)或下標(biāo)，可以使用或標(biāo)記.。 代碼代碼紅色黑體水的分子式:H2O 和 X的平方X2 標(biāo)記可以嵌入其他標(biāo)記，注意不能交叉包含，如：粗斜體 是錯(cuò)誤的。運(yùn)行結(jié)果運(yùn)行結(jié)果運(yùn)行結(jié)果如圖2-5所示。 圖2-5 例6的效果2.2.6 表格制作與超鏈接表格制作與超鏈接例例2-7 使用表格制作網(wǎng)頁，網(wǎng)頁效果如圖2-6所示。 圖2-6 使用表格顯示商品信息的效果知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備表格在頁面內(nèi)容布局中起到非常重要的作用。幾乎任何一個(gè)稍微復(fù)雜的頁面，都至少有一個(gè)或一個(gè)以上的表格實(shí)現(xiàn)版面內(nèi)容的布局。因此，必須對(duì)表格標(biāo)記非常熟悉。1. 表格標(biāo)記表格由行組成，行由一個(gè)個(gè)的單元格組成。是表格的

21、標(biāo)記，行的標(biāo)記為，單元格的標(biāo)記為。 一個(gè)簡(jiǎn)單的2*2的簡(jiǎn)單表格，可以用HTML標(biāo)記描述如下： 11 12 11 12 效果如圖2-7所示。 圖2-7 2*2的表格2. table標(biāo)記的常用屬性：見表2-2。表2-2 表格的常用屬性 屬性名屬性名 描述 border 外邊框粗細(xì)，取值為大于等于零，如果為0則無邊框 align 表格在頁面對(duì)齊方式：取值為：left center right background 表格背景圖 需要指定背景圖文件位置 bgcolor 表格背景顏色 bordercolor 邊框顏色 cellpadding單元格內(nèi)文字與單元格邊距 cellspacing單元格與單元格之間

22、的距離 width表格寬度，單位為百分比（隨瀏覽器窗口變化而變化）或絕對(duì)值（不隨瀏覽器窗口變化而變化） height表格高度，單位為百分比或絕對(duì)值 3. 表格標(biāo)記屬性的含義如圖2-8所示。 Border邊框邊框Cellspacing 單元格間距Cellpadding單元格內(nèi)文字與單元格邊距表格單元格行圖2-8 表格部分屬性示意可以對(duì)行和單元格單獨(dú)設(shè)置背景色（bgcolor）、水平對(duì)齊方式（align）和垂直對(duì)齊方式（valign）。行與行、單元格與單元格之間可以合并，單元格內(nèi)可以添加文本、圖片，還可以插入另外的表格。設(shè)計(jì)思路設(shè)計(jì)思路首先，規(guī)劃要顯示的內(nèi)容，對(duì)內(nèi)容的安排有粗略的布局。建立一個(gè)2*

23、2（2行2列）表格，不顯示邊框（即border=0）。將左右兩部分行的單元格合并，形成1*2表格（也可以直接建立1*2表格，這里為了演示如何進(jìn)行行的合并）。在左邊單元格顯示圖片。在右邊單元格插入一個(gè)3*2表格，用于顯示商品信息（目的：?jiǎn)为?dú)控制文字說明部分的格式）。將新插入表格的第3行進(jìn)行單元格合并，以顯示產(chǎn)品信息（這里演示如何進(jìn)行列合并）。 設(shè)計(jì)步驟與代碼設(shè)計(jì)步驟與代碼 步驟1：.制作2*2原始表格（見圖2-9），代碼如下： 圖2-9 2*2的表格示意步驟2：對(duì)上下單元格進(jìn)行行合并（見圖2-10），代碼如下： 圖2-10 合并后的表格示意標(biāo)記說明：標(biāo)記說明：Rowspan 為行合并屬性，是對(duì)行

24、進(jìn)行合并。由于合并了行，第二行已經(jīng)沒有了，如上面代碼中斜體字部分，該行已經(jīng)沒有了單元格，可以刪除；如果僅合并了左邊的上下行，該行右邊還有一個(gè)單元格，則該標(biāo)記內(nèi)包含一個(gè)td標(biāo)記。步驟3：在左邊單元格顯示圖片，在右邊單元格式插入3*2新表格，代碼如下： 1 2 3 4 5 6 7 8 產(chǎn)品名稱產(chǎn)品名稱 9 運(yùn)動(dòng)鞋運(yùn)動(dòng)鞋 10 11 12 價(jià)格價(jià)格 13 180 14 15 16 17 產(chǎn)品信息產(chǎn)品信息: 18 黑色黑色 19 如果購(gòu)買，請(qǐng)聯(lián)系如果購(gòu)買，請(qǐng)聯(lián)系. 20 21 22 23 24 25 26 27 標(biāo)記說明：標(biāo)記說明：深色背景和粗體字的標(biāo)記為在新插入的表格標(biāo)記。行4：在單元格中顯示圖片，

25、圖片為images文件夾中的A1.jpg圖片，該圖片必須實(shí)際存在。行710：新插入表格的第一行行1114：新插入表格第二行行1521：新插入表格的第三行行16：colspan 為列合并屬性，2代表包含其本身與其右邊的2個(gè)單元格合并，合并之后，可以看到，行1521之間只有一個(gè)單元格標(biāo)記td了。知識(shí)拓展知識(shí)拓展1超鏈接超鏈接實(shí)現(xiàn)頁面之間靜態(tài)導(dǎo)航，使網(wǎng)站中頁面之間可以相互跳轉(zhuǎn)，即從一個(gè)頁面可以轉(zhuǎn)到需要的其它頁面；也可以跳轉(zhuǎn)到互聯(lián)網(wǎng)中的任何頁面。2. 建立超鏈接的標(biāo)記和基本屬性標(biāo)記格式：說明性文字其中：為鏈接標(biāo)記，表示標(biāo)記內(nèi)的內(nèi)容為鏈接，當(dāng)鼠標(biāo)點(diǎn)擊時(shí)，將跳轉(zhuǎn)到其他頁面。href：指定了要鏈接的文件的位

26、置，鏈接文件可以是任何類型的文件，根據(jù)文件所在位置，有幾種表示形式，見表2-3 表2-3 href 屬性的取值描述鏈接位置 范例 絕對(duì)鏈接 163網(wǎng)站從當(dāng)前網(wǎng)站的頁面，轉(zhuǎn)向其他網(wǎng)站或本網(wǎng)站的頁面 相對(duì)鏈接 相對(duì)當(dāng)前網(wǎng)頁文件所在位置AA頁面Info文件夾中的AA頁面上一級(jí)的info文件夾中頁面這里文件位置與img 標(biāo)記中的src屬性值文件位置含義相同 根相對(duì)鏈接 網(wǎng)站根目錄下Info文件夾中的AA頁面/ 表示網(wǎng)站根目錄 target標(biāo)記表示，跳轉(zhuǎn)到其他頁面時(shí)，顯示頁面的目標(biāo)位置，有5種取值，見表2-4。表2-4 target屬性取值tartget取值 含義 _blank在新窗口打開連接 _sel

27、f 取代本身頁面窗口顯示 _parent在本身頁面的父窗口打開，該頁面一般是框架中的子窗口 _top 如果是框架頁面，則在整個(gè)窗口打開鏈接文件 _serach 在瀏覽器的搜索區(qū)打開文件，僅Internet Explorer 5 或者更高版本中有效 指定窗口名稱 在其他打開的包含名稱的頁面或框架中打開鏈接文件 如果要鏈接到email ，則href屬性值需要帶上 mailto：標(biāo)識(shí)符，如： 聯(lián)系我們 單擊該鏈接，可直接啟動(dòng)瀏覽器指定的電子郵件收發(fā)程序進(jìn)行電子郵件的編寫和發(fā)送。2.3 表單與表單控件 表單的作用是在客戶端收集用戶輸入信息后，通表單的作用是在客戶端收集用戶輸入信息后，通過單擊表單內(nèi)的提

28、交按鈕，或通過客戶端的腳本過單擊表單內(nèi)的提交按鈕，或通過客戶端的腳本代碼調(diào)用表單的提交方法，將表單內(nèi)用戶選擇或代碼調(diào)用表單的提交方法，將表單內(nèi)用戶選擇或輸入的信息提交到服務(wù)器，在服務(wù)器端通過動(dòng)態(tài)輸入的信息提交到服務(wù)器，在服務(wù)器端通過動(dòng)態(tài)網(wǎng)頁取得提交的頁面數(shù)據(jù)，并進(jìn)行數(shù)據(jù)處理。網(wǎng)頁取得提交的頁面數(shù)據(jù)，并進(jìn)行數(shù)據(jù)處理。凡是放置在表單內(nèi)的控件內(nèi)容，都將傳遞到服務(wù)器。表單內(nèi)出現(xiàn)的控件，如文本框、按鈕等，稱為“表單控件”。2.3.1 表單控件的使用表單控件的使用-文本框與按鈕控件文本框與按鈕控件例例2-9 實(shí)現(xiàn)模擬論壇信息發(fā)布頁面，頁面內(nèi)容包括：主題、發(fā)布人、和發(fā)布內(nèi)容，頁面效果如圖2-12所示。圖2-

29、12 信息發(fā)布頁面知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備1. 表單標(biāo)記及屬性標(biāo)記格式表單控件 form：表單標(biāo)記，標(biāo)記內(nèi)為其他任何html標(biāo)記，一般為信息收集控件.name屬性：指定表單的名稱，一個(gè)html頁面可以有多個(gè)表單，每個(gè)表單只有一個(gè)提交類型的按鈕。執(zhí)行將本表單數(shù)據(jù)傳遞到服務(wù)器中的目標(biāo)網(wǎng)頁。標(biāo)記及屬性說明method屬性：有兩個(gè)取值 get或post，一般采用post方法。get值對(duì)傳遞數(shù)據(jù)的大小有限制（小于8k），傳遞時(shí)數(shù)據(jù)顯示在地址欄中；post沒大小限制.，數(shù)據(jù)也不會(huì)顯示在地址欄中，起到一定的數(shù)據(jù)保密作用。 注意：在ASP.NET中，每個(gè)頁面最多只有一個(gè)form標(biāo)記，所有的表單控件都必須放置在form

30、標(biāo)記內(nèi)。2. 表單控件一般以單標(biāo)記出現(xiàn)。 標(biāo)記格式： 注意：在Asp.Net中，控件的name屬性將被ID屬性所替代，而且ID取值是唯一的，也就是不能出現(xiàn)兩個(gè)ID相同的控件。 3. 文本框類型控件 單行文本框單行文本框標(biāo)記格式 說明 屬性type：屬性值text，指明是單行文本框;屬性value：指定文本框中顯示的初始值；屬性width：設(shè)置文本框顯示在頁面的寬度，以px為單位；被style=”width:80px”所代替屬性maxlength：設(shè)置文本框最大可以輸入字符或漢字個(gè)數(shù)。密碼文本框密碼文本框標(biāo)記格式 說明 type屬性值password：指明這是密碼文本框； 其他屬性含義與單行文本

31、框同。多行文本框多行文本框標(biāo)記格式只讀文字 說明與單行和密碼文本框不同，多行文本框成對(duì)出現(xiàn), 標(biāo)記內(nèi)為多行文本框的內(nèi)容。textarea標(biāo)記：說明這是多行文本框cols屬性：多行文本框初始顯示的列數(shù) rows屬性：多行文本框初始顯示的行數(shù)readonly屬性：指明多行文本框的內(nèi)容是否只讀，該屬性既是屬性名又是屬性值，如果加了該屬性則為只讀，否則為讀/寫方式。 隱藏文本框隱藏文本框 隱藏文本框是存在而不出現(xiàn)在頁面上的文本框，不需要用戶輸入，也不希望用戶看到，一般用來向服務(wù)器傳遞標(biāo)識(shí)性的內(nèi)容。若有幾個(gè)頁面都要向服務(wù)器中的一個(gè)動(dòng)態(tài)頁面提交數(shù)據(jù)，可以使用隱藏文本框標(biāo)識(shí)是哪個(gè)頁面?zhèn)鬟f的。與單行文本框相似

32、，區(qū)別是type屬性值為hidden。例如： 4. 常見按鈕類型控件普通類型按鈕普通類型按鈕標(biāo)記格式 說明 type屬性值button：指明是普通類型的按鈕，單 擊上面標(biāo)記生成的按鈕時(shí)，頁面上不會(huì)發(fā)生任何變化。主要作用是在標(biāo)記內(nèi)添加事件處理過程，以調(diào)用客戶端的腳本代碼（本書后面章節(jié)將對(duì)調(diào)用客戶端腳本代碼進(jìn)行解釋）。 value 屬性：顯示在按鈕上的文字。 提交類型按鈕提交類型按鈕 標(biāo)記格式 說明 type屬性值submit：說明是提交按鈕。在頁面上單擊該按鈕時(shí)，自動(dòng)將表單內(nèi)所有控件的數(shù)據(jù)（如文本框中text屬性值）提交到form 標(biāo)記中屬性值action指定的網(wǎng)頁。 重置類型按鈕重置類型按鈕

33、標(biāo)記格式 說明 type屬性值reset：說明是重置按鈕。當(dāng)在頁面上單擊該按鈕時(shí)，表單標(biāo)記內(nèi)所有選擇或輸入的控件值回復(fù)到初始值；如果初始值為空（如文本框），相當(dāng)于清除在文本框中最近輸入的內(nèi)容。 代碼代碼 1 2 3 4 發(fā)布人 5 6 78 9 主題 10 11 1213 14 發(fā)布內(nèi)容 15 16 17 18 19 20 21 22 23 24 25 代碼說明代碼說明使用表格的目的，是合理放置控件或文本的內(nèi)容。一般情況下，制作這種類型頁面都需要采用表格布局。 行1：將表格包含在form 標(biāo)記中。但擊表單內(nèi)的提交按鈕時(shí)，將所有表單的內(nèi)容傳送到服務(wù)器的test.aspx網(wǎng)頁中。采用method方

34、法的目的，可以使發(fā)布內(nèi)容的長(zhǎng)度不受限制，同時(shí)，信息不會(huì)出現(xiàn)在地址欄中。 行5和行10：在單元格中插入單行文本框。 行16：在單元格內(nèi)插入多行文本框，并指定初始顯示的列數(shù)和行數(shù)。 行20：將左右單元格合并成一行，在合并后的單元 格中插入提交和重置按鈕。2.3.2 表單控件的使用-圖形按鈕 例例2-10 制作圖2-13 所示圖形按鈕。 圖2-13 圖形按鈕樣式 知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備 本例需要使用圖形按鈕。圖形按鈕有兩種：普通圖形按鈕和圖形提交按鈕。普通圖形按鈕與普通類型按鈕作用相似，不同的是可以在圖形按鈕標(biāo)記內(nèi)使用html標(biāo)記；而圖形提交按鈕跟提交按鈕作用相同，而圖形提交按鈕跟提交按鈕作用相同，但是該

35、按鈕可以是圖片。但是該按鈕可以是圖片。普通圖形按鈕 標(biāo)記格式 其他html標(biāo)記 說明 該按鈕成對(duì)標(biāo)記出現(xiàn)，可以在按鈕內(nèi)添加其他的html標(biāo)記。如果只添加文本，則與普通按鈕一樣；如果在標(biāo)記內(nèi)添加顯示圖片標(biāo)記img，則顯示為圖片按鈕。 圖形提交按鈕 標(biāo)記格式 說明 type屬性：取值 image，說明是一個(gè)圖形提交按鈕。 src屬性：指明顯示在按鈕上的圖片來源。 value值：根據(jù)需要是否設(shè)置，該屬性值不顯示在頁面上。如果該按鈕放置在表單標(biāo)記內(nèi)，將執(zhí)行表單提交動(dòng)作。 代碼代碼 上面左邊右邊下面 2.3.3 表單控件的使用-單選按鈕 例例2-11 提供兩組單選按鈕，分別選擇性別和政治面目，效果如圖2-14所示。 圖2-14 單選按鈕的使用 知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備 本例需要使用單選按鈕。單選按鈕可在多個(gè)選項(xiàng)中選擇其中一個(gè)按鈕。 標(biāo)記格式 說明性文字 說明 在html標(biāo)記中，單選按鈕的名稱（即 name 屬性值）