1、第5章 動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)初步 / / / / / / / / / 【學(xué)習(xí)目標(biāo)】 2.學(xué)會(huì)使用表單的插入與設(shè)置方法。3.能夠架設(shè)動(dòng)態(tài)網(wǎng)站的服務(wù)器與開發(fā)環(huán)境。1.學(xué)會(huì)使用常用的HTML標(biāo)記。4.初步掌握讀取數(shù)據(jù)庫數(shù)據(jù)的方法。5.通過實(shí)例初步了解建立動(dòng)態(tài)網(wǎng)站的一般方法。 / / / / / / / / / 5.1 超文本標(biāo)記語言HTML 5.1.1 HTML簡介【代碼】網(wǎng)頁設(shè)計(jì)與制作我正在學(xué)習(xí)網(wǎng)頁設(shè)計(jì)與制作課程在上述代碼中，第一行和第二行是為了兼容HTML的升級版XHTML而設(shè)置的，在此可暫不考慮；第三行中的和最后一行的表示文檔的開始與結(jié)束；在和之間，分成兩個(gè)部分，第一部分為和，表示文檔頭的開始和結(jié)束，

2、例如網(wǎng)頁的標(biāo)題信息就放在和之間的標(biāo)記中。第二部分是和，是網(wǎng)頁的主體部分，例如“我正在學(xué)習(xí)網(wǎng)頁設(shè)計(jì)與制作課程”就放在這個(gè)部分。 HTML的全稱是Hyper Text Markup Language，中文名字為“超文本標(biāo)記語言”，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文件的主要語言。它由HTML標(biāo)記構(gòu)成描述性文件，說明網(wǎng)頁中文字、圖像、表格、鏈接等信息。由于Dreamweaver能夠自動(dòng)生成HTML代碼，現(xiàn)用一個(gè)簡單的例子說明一下HTML文檔的結(jié)構(gòu)。打開Dreamweaver，新建一個(gè)HTML文檔，在其標(biāo)題欄中輸入“網(wǎng)頁設(shè)計(jì)與制作”，在正文部分輸入“我正在學(xué)習(xí)網(wǎng)頁設(shè)計(jì)與制作課程”，單擊代碼視

3、圖，就可以看到如下文檔。5.1 超文本標(biāo)記語言HTML 5.1.2 常用的HTML標(biāo)記1、表格的HTML標(biāo)記打開Dreamweaver后，新建一個(gè)HTML文檔，在設(shè)計(jì)視圖中插入一個(gè)3行2列的表格，并按表5-1輸入內(nèi)容；表5-1 測試表格打開代碼視圖，可以看到HTML代碼的和之間自動(dòng)生成了表格的代碼如下： 第一行第一列 第一行第二列 第二行第一列 第二行第二列 第三行第一列 第三行第二列 其中和是表格的開始與結(jié)束標(biāo)記，在中的參數(shù)指明了邊框、單元格邊距、單元格間距的信息；是表中行的信息，由于插入的表格是三行的表格，所以在代碼中出現(xiàn)了3組和，分別標(biāo)出行的開始和結(jié)束；是單元格的信息，如第一行包括兩個(gè)單

4、元格，所以標(biāo)出了兩個(gè)和。5.1 超文本標(biāo)記語言HTML 5.1.2 常用的HTML標(biāo)記2、圖像的HTML標(biāo)記 在網(wǎng)頁中插入一個(gè)圖像AW.GIF，選中圖像時(shí)找開代碼視圖，就可以看到如下HTML代碼：就是插入圖像后自動(dòng)生成的HTML代碼，其中的參數(shù)src顯示了圖像文件的圖徑與名稱，width為圖像顯示的寬度，height為圖像顯示的高度； / / / / / / / / / 5.1 超文本標(biāo)記語言HTML 5.1.2 常用的HTML標(biāo)記3、超鏈接的HTML代碼在網(wǎng)頁中輸入“新浪網(wǎng)”，并通過屬性面板設(shè)置其超鏈接為“”，設(shè)置文字的超鏈接，打開代碼視圖，就可以看到如下代碼：新浪網(wǎng)、就是超鏈接的HTML標(biāo)

5、記，其中的href參數(shù)指明了鏈接的地址。5.1 超文本標(biāo)記語言HTML 5.1.2 常用的HTML標(biāo)記4、其它常用的標(biāo)記除表格標(biāo)記、圖像標(biāo)記和超鏈接標(biāo)記外，表5-2中列出了常用的HTML標(biāo)記，供讀者參考。對于表中未列出的標(biāo)記，用戶在利用Dreamweaver等可視化工具對網(wǎng)頁進(jìn)行編輯時(shí)，可以選定相應(yīng)的對象，打開代碼視圖，查看其HTML標(biāo)記。5.2 表單 5.2.1 插入表單域在交互網(wǎng)站中，應(yīng)用表單可以收集客戶的信息，如客戶名稱、聯(lián)系方式、填寫訂單及產(chǎn)品搜索等。在網(wǎng)頁中插入的表單對象提供了用戶輸入數(shù)據(jù)的機(jī)制，用戶輸入的數(shù)據(jù)通過服務(wù)器端的應(yīng)用程序進(jìn)行處理，并將結(jié)果呈現(xiàn)到用戶的瀏覽器中進(jìn)行顯示。插入

6、表單對象之前一般需要插入表單域，如果沒有插入表單域，直接插入表單對象，Dreamweaver會(huì)自動(dòng)創(chuàng)建一個(gè)表單域，插入表單域的方法如下： Step1將光標(biāo)移動(dòng)到需要插入表單的位置；單擊“插入”面板中的“表單”類別里的“表單”按鈕。即可創(chuàng)建表單域。5.2 表單 5.2.1 插入表單域 Step2 單擊“插入”面板中的“表單”類別里的“表單”按鈕。即可創(chuàng)建表單域。創(chuàng)建成功后，在工作區(qū)域顯示一個(gè)紅色的方框，這就是剛剛創(chuàng)建的表單域。插入表單域后，單擊紅色的表單邊框可以選定表單域，Dreamweaver的屬性面板變成表單的屬性面板，如圖所示。在屬性面板中可以設(shè)置表單的屬性。5.2 表單 5.2.2 插入

7、表單對象1、插入文本域文本域，即文本輸入框，是使用最廣泛的表單對象，它可以接受任何類型的字母、數(shù)字等文件。文本域可以單行或多行，也可以以密碼域的方式顯示，此時(shí)輸入的文本將被星號或其它符號替換，避免旁觀者看到這些文本。插入文本域的方法為，在需要插入文本域的位置單擊，然后單擊“插入”面板中的“表單”類別里的“文本字段”按鈕。在彈出的對話框中設(shè)置其輔助功能，單擊“確定”按鈕，即可創(chuàng)建一個(gè)文本域。單擊文本域，就可以在“屬性”面板中設(shè)置其屬性，如圖所示：文本域：指定文本域的名稱，在服務(wù)器應(yīng)用程序中調(diào)用該文本域中輸入的內(nèi)容時(shí)使用。字符寬度：指定文本域最多可顯示的字符數(shù)。最多字符數(shù)：指定用戶在單行文本域中最

8、多可輸入的字符數(shù)，如果此處為空白，則用戶可以輸入任意多個(gè)字符。類型：指定文本域的類型，其中選中“單行”時(shí)為單行文本域，選中“多行”為多行文本域，選中“密碼”時(shí)為密碼域。初始值：指定表單在默認(rèn)狀態(tài)下顯示的文本，可以在域中指定說明或提示信息。類：為文本域指定CSS樣式。行數(shù)：在類型中選定“多行”時(shí)可用，用于指定文本框的高度。 / / / / / / / / / 5.2 表單 5.2.2 插入表單對象2、添加按鈕對象 使用表單可以將表單數(shù)據(jù)提交到服務(wù)器，如圖所示的網(wǎng)易免費(fèi)郵箱中，當(dāng)用戶輸入用戶名、密碼等信息后，單擊“登錄”按鈕，就可以將用戶輸入的用戶名和密碼信息上傳到網(wǎng)易的服務(wù)器中進(jìn)行驗(yàn)證。5.2

9、表單 5.2.2 插入表單對象 使用按鈕可以將表單中的數(shù)據(jù)提交到服務(wù)器，或者重置表單，也可以為按鈕指定其它處理任務(wù)，如輸入房子單價(jià)、面積、貸款方式、貸款年限及還款年限，就可以計(jì)算機(jī)出房子總價(jià)、單月還款數(shù)額等。 在網(wǎng)頁中插入按鈕的方法與插入文本域的方法類似，只需要將光標(biāo)放在要插入按鈕的位置，然后單擊“插入”面板中的“表單”類別里的“按鈕”按鈕，在彈出的對話框中設(shè)置其輔助功能屬性，單擊“確定”按鈕。默認(rèn)情況下，添加的按鈕是一個(gè)提交按鈕（將表單中的數(shù)據(jù)提交到服務(wù)器）。 選定插入的按鈕，就可以在屬性面板中設(shè)置按鈕的屬性，按鈕的屬性面板如圖所示：按鈕名稱：指定按鈕的名稱；值：設(shè)定按鈕上顯示的文本，如圖5

10、-3中顯示的文本為“登錄”，則在此輸入“登錄”；動(dòng)作：設(shè)定按鈕的類型，指定單擊按鈕時(shí)發(fā)生的動(dòng)作。如果選擇“提交表單”，則將表單中的數(shù)據(jù)提交到服務(wù)器；如果選擇“重設(shè)表單”，則將表單中的數(shù)據(jù)設(shè)為空；如果選擇“無”，則不做提交或重設(shè)操作，由編程人員指定其它程序處理；類：為按鈕指定CSS樣式，如圖5-3所示的“登錄”按鈕，就不是默認(rèn)的樣式。5.2 表單 5.2.2 插入表單對象3、添加復(fù)選框表單 復(fù)選框是指用戶可以有多個(gè)選擇的一種輸入表單機(jī)制，如一個(gè)人的愛好可以包括“讀書”、“上網(wǎng)”、“聽音樂”、“打球”等當(dāng)中的一個(gè)或多個(gè)，甚至是一個(gè)都沒有。 在網(wǎng)頁中插入復(fù)選框的方法與按鈕等表單元素的方法完全相同，同

11、樣選中復(fù)選框時(shí)可以在如圖所示的“復(fù)選框”屬性面板中設(shè)置復(fù)選框的屬性。復(fù)選框名稱：指定復(fù)選框的名稱。在此需要注意的是，一組復(fù)選框需要設(shè)置相同的名稱，否則程序編制人員就無法編寫相應(yīng)的程序。選定值：指定復(fù)選框被選中時(shí)發(fā)送到服務(wù)器的值；初始狀態(tài)：指定用戶打開網(wǎng)頁時(shí)復(fù)選框的選定狀態(tài)；類：為復(fù)選框指定CSS樣式。5.2 表單 5.2.2 插入表單對象4、單選按鈕單選按鈕代表相互排斥的選擇，只允許用戶從單選按鈕組中選擇一個(gè)。所謂單選按鈕組，是指由兩個(gè)或兩個(gè)以上的同一名稱的按鈕組成的一組按鈕，如圖所示，用戶在“性別”選項(xiàng)中只能選擇“帥哥”或“美女”中的一個(gè)，不能不選或兩個(gè)都選。插入單選按鈕的方法與插入其它表單

12、對象的方法類似，在此不再敘述；單選按鈕的屬性面板如圖所示。名稱：指定單選按鈕的名稱。需要注意的是，一組單選按鈕的名稱必須相同，否則計(jì)算機(jī)會(huì)認(rèn)為是兩組單選按鈕。例如，在圖5-5中，如果將“帥哥”前面的單選框和“美女”前面的單選框設(shè)為不同的名稱，在瀏覽網(wǎng)頁時(shí)，用戶就可以同時(shí)選定“帥哥”和“美女”，這顯然與設(shè)置的單選框的目的不同。選定值：設(shè)置選定該單選框向服務(wù)器中發(fā)送的值。在圖5-5中，盡管在網(wǎng)頁中顯示的是“帥哥”，但為其設(shè)置的值是“男”，則向服務(wù)器中傳輸?shù)氖恰澳小薄３跏紶顟B(tài)：確定單選框的初始狀態(tài)。類：為單選框指定CSS樣式。5.2 表單 5.2.2 插入表單對象5、添加下位列表或菜單 使用單選按鈕

13、或復(fù)選按鈕時(shí)，隨著選項(xiàng)的增多，占據(jù)的屏幕空間會(huì)增大，這時(shí)可以使用下拉列表或菜單，用戶可以從中選擇一個(gè)或多個(gè)選項(xiàng)。添加下拉列表或菜單的方法與其它表單的插入方法類似，其屬性面板如圖所示?！傲斜?菜單”，為“列表/菜單”指定名稱。類型：指定插入的是“菜單”還是“列表”，其中菜單是在多個(gè)選項(xiàng)中選擇一項(xiàng)，而列表可以選擇多項(xiàng)。高度：當(dāng)選擇列表類型時(shí)，此項(xiàng)被激活，允許用戶指定列表的高度。選定范圍：選中此項(xiàng)，用戶可以從列表中選擇多個(gè)項(xiàng)。列表值：單擊時(shí)打開如圖5-7的“列表值”對話框，可通過它向表單中添加選項(xiàng)。類：為列表或菜單指定CSS樣式。初始化時(shí)選定：設(shè)置列表中默認(rèn)選定的菜單項(xiàng)。5.2 表單 5.2.2 插

14、入表單對象5、添加下位列表或菜單 / / / / / / / / / 5.2 表單 5.2.2 插入表單對象6、添加跳轉(zhuǎn)菜單 跳轉(zhuǎn)菜單提供了一個(gè)下拉列表，單擊其中一項(xiàng)可以跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁或站點(diǎn)，一般用于當(dāng)前站點(diǎn)的導(dǎo)航。插入跳轉(zhuǎn)菜單的方法為：將光標(biāo)放在插入的位置，然后單擊“插入”面板中的“表單”類別里的“跳轉(zhuǎn)菜單”按鈕，彈出“插入跳轉(zhuǎn)菜單”對話框，如圖所示。在“文本”中輸入菜單項(xiàng)的名稱，在“選擇時(shí)，轉(zhuǎn)到URL”中輸入選擇該菜單項(xiàng)要跳轉(zhuǎn)的地址，單擊確定完成插入操作。5.2 表單 5.2.2 插入表單對象7、其它表單對象 除以上表單對象外，Dreamweaver還提供了文件域、圖像域、隱藏域等表單對

15、象，其中文件域允許用戶把計(jì)算機(jī)上的文件作為表單對象上傳給服務(wù)器，但必須有服務(wù)器端腳本去處理提交的文件；圖像域可以在表單中插入一個(gè)圖像，以生成圖形化按鈕，如“提交”或“重置”按鈕；隱藏域用于存儲(chǔ)用戶輸入信息，在該用戶下次訪問此站點(diǎn)時(shí)使用這些數(shù)據(jù)。這些表單對象的操作方法與上述六個(gè)表單對象的操作方法大同小異，由于篇幅有限，在此不再敘述。5.2.3 表單實(shí)例5.2 表單 下面通過一個(gè)實(shí)例講解插入表單的一般過程。在網(wǎng)頁中插入表單對象，考慮網(wǎng)站布局的需要，一般首先插入表單域，然后插入表格以約束各表單元素的位置，最后在表格的各單元格之間再插入表單對象。設(shè)計(jì)完成后的網(wǎng)頁如圖所示：實(shí)例演示5.2.3 表單實(shí)例

16、Step1新建網(wǎng)頁，插入表單域，表單域的屬性設(shè)置為默認(rèn)狀態(tài)； 5.2 表單 Step2在表單域中輸入“用戶注冊信息”并居中顯示； Step3在表單域中插入一個(gè)6行2列的表格，表格的邊框設(shè)為0，寬度為600，并居中； Step4在表格的第一行至第五行的第一列分別輸入“用戶名”、“密碼”、“確認(rèn)密碼”、“性別”、“愛好”等文字信息； Step5在表格第一行第二列輸入一個(gè)文本域；表格的第二行和第三行的第二列輸入兩個(gè)文本域，在其屬性面板中修改屬性，使其變?yōu)槊艽a域； Step6在表格第一行第二列輸入一個(gè)文本域；表格的第二行和第三行的第二列輸入兩個(gè)文本域，在其屬性面板中修改屬性，使其變?yōu)槊艽a域； Step

17、7在第六行的第一列和第二列分別插入“按鈕”對象，在屬性面板中設(shè)置其值分別為“注冊”和“重填”，動(dòng)作類型分別為“提交表單”和“重設(shè)表單” 。至此，網(wǎng)頁設(shè)計(jì)完成，保存文件后瀏覽網(wǎng)頁，重點(diǎn)查看密碼域輸入的是否為密碼形式、“性別”選項(xiàng)中是否允許多選、“重填”按鈕是否可以使表單數(shù)據(jù)重置等內(nèi)容。 實(shí)例演示5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.1 動(dòng)態(tài)網(wǎng)站設(shè)計(jì)簡介 我們可以將網(wǎng)站分為靜態(tài)網(wǎng)站和動(dòng)態(tài)網(wǎng)站。靜態(tài)網(wǎng)站的內(nèi)容是固定不變的，它不能實(shí)現(xiàn)訪問者與網(wǎng)站的交互，如果修改網(wǎng)站的內(nèi)容必須修改網(wǎng)站的HTML代碼。隨著網(wǎng)站信息的不斷增加，其維護(hù)工作量大得出乎想象。動(dòng)態(tài)網(wǎng)站是具有交互性的網(wǎng)站，能夠?qū)崿F(xiàn)網(wǎng)站的自動(dòng)更新。 在

18、制作動(dòng)態(tài)網(wǎng)站過程中，網(wǎng)站美工利用可視化的網(wǎng)站設(shè)計(jì)與制作工具（如Dreamweaver）制作前臺(tái)，由編程人員編制網(wǎng)站后臺(tái)程序。由于一套程序可以供多個(gè)相同類別的網(wǎng)站使用，所以在網(wǎng)站制作單位，雖然編寫程序需要大量的工作，但由于是一次性工作（甚至可以直接購賣網(wǎng)站后臺(tái)代碼或直接下載免費(fèi)的代碼，這是一些中小網(wǎng)站制作公司經(jīng)常采用的方法），因此網(wǎng)站設(shè)計(jì)的主要任務(wù)是網(wǎng)頁的前臺(tái)設(shè)計(jì)，大量的工作是網(wǎng)站美工完成的。 常用的后臺(tái)編制語言包括ASP、JSP、PHP、ASP.net。由于ASP具有功能強(qiáng)、學(xué)習(xí)簡單等特點(diǎn)，在網(wǎng)站開發(fā)中一直處于統(tǒng)治地位。據(jù)統(tǒng)計(jì)，目前80%以上的中小企業(yè)網(wǎng)站制作均采用ASP技術(shù)，本章重點(diǎn)介紹AS

19、P技術(shù)。5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.1 動(dòng)態(tài)網(wǎng)站設(shè)計(jì)簡介 ASP技術(shù)是Microsoft Active Pages的簡寫，是微軟公司提供的一套開發(fā)服務(wù)器端腳本的環(huán)境。ASP可以用來創(chuàng)建和運(yùn)行動(dòng)態(tài)網(wǎng)頁或Web應(yīng)用程序。ASP網(wǎng)頁可以包含HTML標(biāo)記、普通文本、腳本命令以及COM組件等。利用ASP可以向網(wǎng)頁中添加交互式內(nèi)容，也可以創(chuàng)建使用HTML網(wǎng)頁作為用戶界面的web應(yīng)用程序。ASP技術(shù)使用VBScript等簡單易懂的語言，結(jié)合HTML代碼，可快速完成網(wǎng)站應(yīng)用程序的編寫，這是ASP的最大優(yōu)點(diǎn)。由于ASP簡單易學(xué)、又有微軟的強(qiáng)大支持，所以目前ASP使用非常廣泛，很多中小企業(yè)網(wǎng)站、甚至部分大

20、型站點(diǎn)都是用ASP開發(fā)的。ASP目前可以在windows NT、windows 2000、 windows XP上運(yùn)行，它對客戶端沒有什么特殊的要求，只要有一個(gè)普通的瀏覽器就可以了。 ASP腳本的工作原理是，當(dāng)用戶訪問的網(wǎng)頁以.asp為后綴名時(shí)，該訪問請求就被發(fā)送到web服務(wù)器上，web服務(wù)器就調(diào)用ASP服務(wù)程序?qū)⒃撃_本加以解析，自動(dòng)生成相應(yīng)的HTML代碼，并將該代碼返回到客戶端的瀏覽器中執(zhí)行，用戶就可以看到該文件的執(zhí)行結(jié)果。用戶通過表單提交的數(shù)據(jù)不同，得到的結(jié)果不同，以此實(shí)現(xiàn)用戶的交互。 / / / / / / / / / 5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.2 配置ASP服務(wù)器 1、安裝I

21、IS服務(wù)器 Step1在任務(wù)欄中找到“開始”“控制面板”“程序與功能”彈出如圖5-10所示的窗口；5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.2 配置ASP服務(wù)器 1、安裝IIS服務(wù)器 Step2單擊“打開或關(guān)閉windows功能”，彈出如圖所示的窗口，在此窗口將圖中紅框中的選項(xiàng)全部打?qū)︺^，單擊“確定”，即可完成IIS的安裝。 5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.2 配置ASP服務(wù)器 1、安裝IIS服務(wù)器 Step3測試是否安裝成功。在安裝完成后，需要測試一下IIS是否安裝成功。打開IE瀏覽器，在地址欄中輸入http:/localhost/，出現(xiàn)圖所示的標(biāo)志，表示IIS已安裝成功。 / / / / /

22、 / / / / 5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.2 配置ASP服務(wù)器2、添加虛擬目錄 Step1單擊任務(wù)欄中“開始”，打開“控制面板”，雙擊“管理工具”選項(xiàng)卡，打開“Internet 信息服務(wù)(IIS)管理器”會(huì)彈出“Internet 信息服務(wù)(IIS)管理器”窗口。如圖所示 5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.2 配置ASP服務(wù)器2、添加虛擬目錄 Step2在該窗口左側(cè)找到“UVAJVE9JY1SSKMB”，將其前面的小三角展開后，右單擊鼠標(biāo)器選擇“添加虛擬目錄”彈出“添加虛擬目錄”窗口，如圖所示。5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.2 配置ASP服務(wù)器2、添加虛擬目錄 Step3在彈

23、出窗口中填寫虛擬目錄名稱及實(shí)際網(wǎng)站的物理地址，如圖5-15所示，單擊“確定”，可完成“虛擬目錄”的添加。5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.3 其它小型的ASP服務(wù)器 除IIS外，也有許多專門用于ASP開發(fā)的小型服務(wù)器，下面介紹一款由lamp公司開發(fā)的ASP服務(wù)器，雖然其體積較少，但可以在Windows系統(tǒng)上調(diào)試和發(fā)布ASP程序，并且完全支持ACCESS、SQL等常用數(shù)據(jù)庫。 在網(wǎng)上下載該軟件、安裝并打開后，如現(xiàn)如圖1的界面。單擊“啟用服務(wù)”可以啟動(dòng)ASP服務(wù)，單擊系統(tǒng)置，可以設(shè)置服務(wù)器的參數(shù)，如圖2所示。圖1 ASP服務(wù)器的界面 圖2 ASP服務(wù)器的設(shè)置 5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.

24、3 其它小型的ASP服務(wù)器 啟動(dòng)服務(wù)后，打開IE瀏覽器，輸入http:/localhost/，出現(xiàn)圖的界面，表示ASP服務(wù)器安裝成功，其服務(wù)器根目錄為安裝路徑中的WEB目錄。 / / / / / / / / / 5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.4 開發(fā)環(huán)境的搭建 安裝完成ASP服務(wù)器后，就可以在Dreamweaver中搭建開發(fā)環(huán)境，制作動(dòng)態(tài)網(wǎng)站。我們以5.3.3中的ASP服務(wù)器為例介紹一下Dreamweaver中開發(fā)環(huán)境的搭建。假設(shè)ASP服務(wù)器完裝在“D:ASP服務(wù)器”下，則網(wǎng)站的根目錄應(yīng)放在“D:ASP服務(wù)器web”目錄下。 Step1打開Dreamweaver，新建站點(diǎn)，在“高級”選項(xiàng)

25、卡中輸入圖5-20的信息，注意本地根文件夾一定要處于“D:ASP服務(wù)器web”目錄下； 圖5-20 站點(diǎn)本地信息 5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.4 開發(fā)環(huán)境的搭建 Step2單擊圖5-20左側(cè)的“遠(yuǎn)程信息”，按圖5-21輸入信息； 圖5-21 站點(diǎn)遠(yuǎn)程信息 5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.4 開發(fā)環(huán)境的搭建 Step3單擊圖5-21左側(cè)的“測試服務(wù)器”，按圖5-22輸入信息；由于新建的網(wǎng)站在ASP服務(wù)器根目錄的子目錄下，注意的“URL前綴”中輸入子目錄的名稱。 圖5-21 站點(diǎn)遠(yuǎn)程信息 5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.4 開發(fā)環(huán)境的搭建 Step4單擊“確定”完成開發(fā)環(huán)境的搭建。

26、要測試服務(wù)器架設(shè)是否成功。在圖5-23所示的站點(diǎn)文件窗口中新建一個(gè)名稱為“index.asp”的文件，雙擊輸入“測試”字樣。單擊“在瀏覽器中預(yù)覽調(diào)試”，（或者打開IE瀏覽器，輸入http:/localhost/dongtai，其中dongtai是根目錄中子目錄的名稱)，如果能夠正常打開并訪問網(wǎng)頁（如圖5-24），表示網(wǎng)站的開發(fā)環(huán)境搭建成功。5-22 站點(diǎn)的遠(yuǎn)程服務(wù)器信息 圖5-23 新建文件 圖5-24 開發(fā)環(huán)境搭建成功的界面5.3 搭建動(dòng)態(tài)網(wǎng)站設(shè)計(jì)環(huán)境5.3.4 開發(fā)環(huán)境的搭建 Step4單擊“確定”完成開發(fā)環(huán)境的搭建。要測試服務(wù)器架設(shè)是否成功。在圖5-23所示的站點(diǎn)文件窗口中新建一個(gè)名稱為

27、“index.asp”的文件，雙擊輸入“測試”字樣。單擊“在瀏覽器中預(yù)覽調(diào)試”，（或者打開IE瀏覽器，輸入http:/localhost/dongtai，其中dongtai是根目錄中子目錄的名稱)，如果能夠正常打開并訪問網(wǎng)頁（如圖5-24），表示網(wǎng)站的開發(fā)環(huán)境搭建成功。為了保證開發(fā)工作的正常進(jìn)行，以上環(huán)境搭建必須經(jīng)過成功測試，否則以下的工作將有可能無法完成。 5.4 數(shù)據(jù)庫的建立與連接5.4.1 數(shù)據(jù)庫建立 在創(chuàng)建數(shù)據(jù)庫之前，首先要規(guī)劃自己的數(shù)據(jù)庫，要盡量使數(shù)據(jù)庫設(shè)計(jì)合理。既要包含重要的信息，又要能節(jié)省數(shù)據(jù)的存儲(chǔ)空間。例如設(shè)計(jì)網(wǎng)頁上的論壇界面，就需要建立一個(gè)用戶數(shù)據(jù)庫，添加一個(gè)保存用戶信息的表

28、，用來存放用戶的基本信息，包括用戶名、密碼、注冊時(shí)間。還需要一個(gè)記錄用戶登錄信息的表，記錄用戶的登錄時(shí)間、留言內(nèi)容、登錄IP字段等信息。 打開“office Access”程序（如果系統(tǒng)中沒有安裝Access數(shù)據(jù)庫，則需要重新安裝Access數(shù)據(jù)庫），進(jìn)入其主頁面，在右側(cè)找到“新建文件”下的“空數(shù)據(jù)庫”。單擊“空數(shù)據(jù)庫”，將會(huì)彈出新建一個(gè)空數(shù)據(jù)庫的窗口，如圖所示。在彈出的“文件新建數(shù)據(jù)庫”窗口中，選擇新建立的數(shù)據(jù)庫的存放位置以及數(shù)據(jù)庫的名稱。填寫完后單擊“創(chuàng)建”，系統(tǒng)就建好了一個(gè)空數(shù)據(jù)庫。5.4 數(shù)據(jù)庫的建立與連接5.4.1 數(shù)據(jù)庫建立 空數(shù)據(jù)庫中還沒有包括數(shù)據(jù)信息，需要在數(shù)據(jù)庫中創(chuàng)建表。表在

29、表現(xiàn)形式上是一個(gè)二維表格，一個(gè)數(shù)據(jù)庫實(shí)際上是包含有多個(gè)表的集合。當(dāng)我們在如圖所示的窗口中單擊“創(chuàng)建”完成數(shù)據(jù)庫的創(chuàng)建后，系統(tǒng)會(huì)彈出如圖所示的窗口，它提供了三種在數(shù)據(jù)庫中創(chuàng)建表的方法，即“使用設(shè)計(jì)器創(chuàng)建表”、“使用向?qū)?chuàng)建表”和“通過輸入數(shù)據(jù)創(chuàng)建表”。我們可以采用“使用設(shè)計(jì)器創(chuàng)建表”方法新建表。5.4 數(shù)據(jù)庫的建立與連接5.4.1 數(shù)據(jù)庫建立 創(chuàng)建表分為兩步，第一步是創(chuàng)建表的結(jié)構(gòu)，即定義表中每一列（字段）的屬性，第二步是向表中添加數(shù)據(jù)。在圖5-26所示窗口中單擊“使用設(shè)計(jì)器創(chuàng)建表”，可以彈出如圖5-27所示的定義表的結(jié)構(gòu)對話框，在此創(chuàng)建表的結(jié)構(gòu)。 雙擊“使用設(shè)計(jì)器創(chuàng)建表”選項(xiàng)，在新彈出的窗口填寫

30、字段名稱，選擇該字段相應(yīng)的數(shù)據(jù)類型，搭建起表的基本結(jié)構(gòu)。例如我們要?jiǎng)?chuàng)建的是一個(gè)記錄用戶登錄信息的表，則需要有的字段為“編號”、“用戶名”、“電話”、“郵箱”、“內(nèi)容”等字段。考慮到編寫程序的需要，一般用字母表示如id、user、tele、mail、content。5.4 數(shù)據(jù)庫的建立與連接5.4.1 數(shù)據(jù)庫建立 創(chuàng)建表分為兩步，第一步是創(chuàng)建表的結(jié)構(gòu)，即定義表中每一列（字段）的屬性，第二步是向表中添加數(shù)據(jù)。在圖5-26所示窗口中單擊“使用設(shè)計(jì)器創(chuàng)建表”，可以彈出如圖5-27所示的定義表的結(jié)構(gòu)對話框，在此創(chuàng)建表的結(jié)構(gòu)。 雙擊“使用設(shè)計(jì)器創(chuàng)建表”選項(xiàng)，在新彈出的窗口填寫字段名稱，選擇該字段相應(yīng)的數(shù)據(jù)

31、類型，搭建起表的基本結(jié)構(gòu)。例如我們要?jiǎng)?chuàng)建的是一個(gè)記錄用戶登錄信息的表，則需要有的字段為“編號”、“用戶名”、“電話”、“郵箱”、“內(nèi)容”等字段?？紤]到編寫程序的需要，一般用字母表示如id、user、tele、mail、content。我們一般需要為一個(gè)數(shù)據(jù)表設(shè)置一個(gè)主鍵作為一條記錄的唯一性識(shí)別字段。設(shè)置主鍵的方法是在左側(cè)選中作為主鍵的一行右擊，在彈出的菜單中選擇“主鍵”一項(xiàng)，此行的字段即被設(shè)置成主鍵，在該字段前出現(xiàn)小鑰匙標(biāo)記。字段數(shù)據(jù)類型的設(shè)置不用自己填寫，只需將光標(biāo)定位到該單元格，右側(cè)即可出現(xiàn)下拉菜單，從中選取需要的數(shù)據(jù)類型。 說明5.4 數(shù)據(jù)庫的建立與連接5.4.1 數(shù)據(jù)庫建立 設(shè)計(jì)完成表

32、的結(jié)構(gòu)后，單擊工具欄中的“保存”按鈕，將彈出“保存表結(jié)構(gòu)”對話框，修改表的名稱，單擊“保存表結(jié)構(gòu)”對話框中的“保存”按鈕，關(guān)閉表結(jié)構(gòu)設(shè)計(jì)窗口。在“db1數(shù)據(jù)庫”對話框中將出現(xiàn)我們所創(chuàng)建的表，如圖所示。 創(chuàng)建表的第二步是向表中添加信息，在圖中雙擊“biao”打開新創(chuàng)建的表，根據(jù)表字段添加相應(yīng)的信息。5.4 數(shù)據(jù)庫的建立與連接5.4.2 在網(wǎng)頁中連接數(shù)據(jù)庫要對數(shù)據(jù)庫進(jìn)行操作，首先要連接數(shù)據(jù)庫。網(wǎng)頁中連接數(shù)據(jù)庫的代碼如下： 其中表示此處是ASP腳本，而不是HTML代碼；在之間，列出了建立數(shù)據(jù)庫連接對象，指定數(shù)據(jù)庫的名稱與驅(qū)動(dòng)程序。 / / / / / / / / / 5.4 數(shù)據(jù)庫的建立與連接5.4

33、.2 在網(wǎng)頁中連接數(shù)據(jù)庫 在Dreamweaver新建的網(wǎng)頁中（注意需要搭建ASP環(huán)境，詳見5.3節(jié)），打開代碼視圖，在其和之前插入上述代碼，就可以連接到該網(wǎng)頁所在目錄下的名稱為shujuku.mdb的數(shù)據(jù)庫。由于需要多次調(diào)用數(shù)據(jù)庫，在實(shí)際程序編制過程中，可將上述代碼單獨(dú)編寫進(jìn)一個(gè)文件（名稱為CONN.ASP），在網(wǎng)頁中利用下面的代碼將其包含進(jìn)來，可以大大提高編寫程序的工作效率。 實(shí)際上，在ASP編程和網(wǎng)頁設(shè)計(jì)與制作工作中，我們經(jīng)常把網(wǎng)站中各網(wǎng)頁相同的部分（如網(wǎng)站的標(biāo)題、網(wǎng)站的版權(quán)信息等在網(wǎng)站中各網(wǎng)頁大量出現(xiàn)的部分），編寫成一個(gè)獨(dú)立的文件，用上面的代碼進(jìn)行包含操作。這樣做的好處是，在修改時(shí)只需

34、要修改一個(gè)文件，可以實(shí)現(xiàn)所有文件的更新。說明：由于數(shù)據(jù)庫連接操作中，未向?yàn)g覽器發(fā)送任何信息，所以在預(yù)覽網(wǎng)頁時(shí)，只要正常打開瀏覽器，不出現(xiàn)錯(cuò)誤提示，即表示數(shù)據(jù)庫連接成功。同樣，正確連接數(shù)據(jù)庫是進(jìn)一步操作數(shù)據(jù)庫的基礎(chǔ)，如果此處不成功，對數(shù)據(jù)庫的所有操作都不會(huì)成功，所以需要讀者一定要完成此步操作后再向下操作。5.5 交互網(wǎng)站設(shè)計(jì)留住客戶信息5.5.1 顯示客戶留言 某企業(yè)的網(wǎng)站為了能提高網(wǎng)站的交互功能，及時(shí)了解用戶的需求、意見和建議，要求在其網(wǎng)站增加“給我留言”欄目，在留言顯示下面是添加留言區(qū)域，輸入姓名、電話、電子郵件和客戶需求等內(nèi)容，擊“提交”按鈕后，留言會(huì)顯示在留言顯示區(qū)域顯示。實(shí)例演示 St

35、ep1架設(shè)ASP服務(wù)器和開發(fā)環(huán)境，詳見5.3節(jié)相關(guān)內(nèi)容。其中服務(wù)器根目錄、站點(diǎn)名稱與5.3節(jié)內(nèi)容相同。 Step2數(shù)據(jù)庫與數(shù)據(jù)庫中表的建立，詳見5.4節(jié)相關(guān)內(nèi)容，其中數(shù)庫庫的名稱、表的名稱、表中字段的名稱與5.4節(jié)內(nèi)容相同，并且在數(shù)據(jù)表（名稱為biao）中輸入至少一條記錄。 Step3建立數(shù)據(jù)庫連接專用文件。在Dreamweaver的“文件”面板中，右單擊新建一個(gè)conn.asp的文件，雙擊該文件，打開代碼視圖，刪除其中所有代碼，輸入以下代碼。5.5 交互網(wǎng)站設(shè)計(jì)留住客戶信息5.5.1 顯示客戶留言實(shí)例演示 Step4在新建的站點(diǎn)中新建網(wǎng)頁文件，文件名稱為“l(fā)iuyan.asp”，在此文件的和

36、中輸入如下代碼。此時(shí)預(yù)覽網(wǎng)頁，能夠正常預(yù)覽（不顯示代碼錯(cuò)誤，但沒有其它信息），表示數(shù)據(jù)庫連接成功。 Step5在網(wǎng)頁的設(shè)計(jì)視圖中輸入以下信息，并設(shè)置其格式。 客戶序號:客戶姓名:客戶電話:客戶郵箱:客戶需求:5.5 交互網(wǎng)站設(shè)計(jì)留住客戶信息5.5.1 顯示客戶留言實(shí)例演示 Step6從數(shù)據(jù)庫的提取數(shù)據(jù)。首先打開DB1.MDB數(shù)據(jù)庫,打開其中的表(名稱為biao),查看其表結(jié)構(gòu)，記下表中各字段的名稱。然后在Dreamweaver中打開liuyan.asp的代碼視圖，找到剛才輸入的信息部分，將其修改為如下代碼： 客戶序號: 客戶姓名: 客戶電話: 客戶郵箱: 客戶需求: 設(shè)計(jì)完成后，打開代碼視圖，

37、可以看到其中的HTML代碼如下（部分）： 客戶序號: 客戶姓名: 客戶電話: 客戶郵箱: 客戶需求:其中用于顯示ID信息，用于顯示用戶名稱，依此類推。是插入了一條水平線。5.5 交互網(wǎng)站設(shè)計(jì)留住客戶信息5.5.1 顯示客戶留言實(shí)例演示 【前面代碼】在此部分代碼前面和后面分別輸入如下兩段代碼：【后面代碼】 Step6 / / / / / / / / / 5.5 交互網(wǎng)站設(shè)計(jì)留住客戶信息5.5.1 顯示客戶留言實(shí)例演示代碼說明：Set Rs=server.CreateObject(adodb.recordset)建立了一個(gè)記錄集對象,用于操作數(shù)據(jù)表;sqlyqlj=select * from bi

38、ao order by ID 用于設(shè)置該記錄集的屬性，在此列出了要操作表的名稱；set rs=conn.execute(sqlyqlj)打開執(zhí)行該記錄集；if rs.eof then、else 和end if構(gòu)成了一個(gè)分支結(jié)構(gòu)，表示當(dāng)記錄集未結(jié)束時(shí)執(zhí)行中間的操作；while not rs.eof、Rs.movenext、wend構(gòu)成了一個(gè)循環(huán)結(jié)構(gòu)，循環(huán)顯示表中的各條記錄。 Step6 / / / / / / / / / 5.5 交互網(wǎng)站設(shè)計(jì)留住客戶信息5.5.1 顯示客戶留言實(shí)例演示保存并預(yù)覽網(wǎng)頁，出現(xiàn)如圖5-29所示的信息，即在網(wǎng)頁中顯示了數(shù)據(jù)庫中的信息。圖5-29 顯示客戶信息 Step6

39、5.5 交互網(wǎng)站設(shè)計(jì)留住客戶信息5.5.2 客戶留言實(shí)例演示圖5-30客戶留言界面設(shè)計(jì) 新建一個(gè)名稱“kehuliuyan.asp”為的網(wǎng)頁，并在liuyan.asp的設(shè)計(jì)視圖中制作一個(gè)名稱為“我要留言”的鏈接，方便用戶打開留言網(wǎng)頁。 Step1 雙擊“kehuliuyan.asp”，在設(shè)計(jì)視圖中插表以下表單對象，如圖5-30所示。 。 Step2其中，圖中4個(gè)文件框的名稱分別為：user 、telephone、email、content。由于在下面的程序設(shè)計(jì)中需要用到各表單對象的名稱，所以此處要關(guān)注表單的名稱，否則網(wǎng)頁中將無法提取有關(guān)的數(shù)據(jù)。5.5 交互網(wǎng)站設(shè)計(jì)留住客戶信息5.5.2 客戶留

40、言實(shí)例演示 新建一個(gè)名稱為liuyanchuli.asp的網(wǎng)頁,它能夠?qū)⑿彰麨椤巴跷濉?、電話為、電子郵件為“”、 留言信息為“我想了解一下你們的業(yè)績”添加到數(shù)據(jù)庫（注意，此處不是添加表單中的數(shù)據(jù)，而是特定數(shù)據(jù)）。 雙擊liuyanchuli.asp并打開設(shè)計(jì)視圖，在其和中輸入如下代碼： Step3其中調(diào)用前面建好的文件，建立數(shù)據(jù)庫的連接；在中的第一行和第二行與前面的例子相同，建立了記錄集對象；第三行打開該記錄集對象；第四行在數(shù)據(jù)庫中追加一條記錄，第五行至第八行分別描述了該記錄的值；第九行對數(shù)據(jù)庫進(jìn)行了更新操作；至此，追加記錄完成?？梢栽贏CCESS中打開數(shù)據(jù)表查看數(shù)據(jù)庫，其中：姓名user為“王五”、電話tele為、電子郵件mail為“”、 留言信息content為“我想了解一