動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與網(wǎng)站管理實(shí)驗(yàn)指導(dǎo)書

第第頁動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與網(wǎng)站管理實(shí)驗(yàn)指導(dǎo)書

《動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與網(wǎng)站管理》

實(shí)驗(yàn)指導(dǎo)書

李桂芝編寫

北京信息科技大學(xué)計(jì)算中心

2023.3.9

實(shí)驗(yàn)一ASP運(yùn)行環(huán)境的配置

一、實(shí)驗(yàn)學(xué)時(shí)：2學(xué)時(shí)二、實(shí)驗(yàn)類型：驗(yàn)證性

該實(shí)驗(yàn)的目的在于驗(yàn)證已經(jīng)學(xué)習(xí)過的ASP運(yùn)行環(huán)境的配置。目的明確、原理清楚，所驗(yàn)證的知識點(diǎn)單一，實(shí)驗(yàn)方法、步驟制定完備，學(xué)生只需根據(jù)“實(shí)驗(yàn)指導(dǎo)書”中的操作步驟進(jìn)行操作，就會(huì)在規(guī)定的時(shí)間內(nèi)完成實(shí)驗(yàn)，得出實(shí)驗(yàn)結(jié)果，撰寫實(shí)驗(yàn)報(bào)告。

三、實(shí)驗(yàn)?zāi)康?/p>

1．掌握Windows2000/XP上IIS的安裝與配置；2．理解虛擬目錄的設(shè)置方法；

3．掌握ASP文件的編寫和運(yùn)行方法。

4．掌握DreamweaverMX站點(diǎn)環(huán)境的設(shè)置。四、實(shí)驗(yàn)內(nèi)容

1．在自己的個(gè)人計(jì)算機(jī)上安裝IIS。2．配置IIS

3．ASP文件的編寫和運(yùn)行

4．DreamweaverMX站點(diǎn)環(huán)境的設(shè)置五、實(shí)驗(yàn)步驟

1．安裝IIS

（1）將WINDOWS系統(tǒng)光盤插入光驅(qū)。（2）將WINDOWS2000系統(tǒng)光盤插入光驅(qū)，在“開始”-“設(shè)置”-“控制面板”-”添加刪除程序”并單擊“添加刪除windows組件”選項(xiàng)。

（3）在彈出的“windows組件向?qū)А睂υ捒蛑羞x中“Internet信息服務(wù)（IIS）”復(fù)選框安裝界面如圖1-1所示。

圖1-1Internet信息服務(wù)器安裝界面

（4）再單擊“下一步”按鈕，會(huì)彈出“選擇安裝路徑的對話框，選擇Windows系統(tǒng)盤的路徑（G:\wind\tools\i386下的文件）。

（5）單擊“確定”按鈕，再單擊“下一步”按鈕，按屏幕提示完成安裝。（6）檢驗(yàn)安裝。啟動(dòng)IE瀏覽器，在地址欄輸入：http://localhost或，并按回車鍵，出現(xiàn)如圖1-2所示的網(wǎng)頁，表示IIS組件已經(jīng)安裝成功。

圖1－2測試網(wǎng)頁

2．配置IIS

（1）開始－控制面板－管理工具－Internet服務(wù)管理器命令，可以打開“Internet信息服務(wù)”窗口，如圖1-3所示。

圖1-3Internet信息服務(wù)對話框

（2）右鍵單擊“默認(rèn)網(wǎng)站”，在彈出的快捷菜單中選擇“屬性”，將會(huì)出現(xiàn)如圖1-4“網(wǎng)站屬性”對話框；

圖1-4“網(wǎng)站屬性”對話框

（3）配置IP。這里可以指定Web站點(diǎn)的IP，如沒有特別需要，則選擇全部未分配。

（4）指定站點(diǎn)主目錄。主目錄用來存放站點(diǎn)文件的位置，默認(rèn)是C:Inetpub\root。單擊“主目錄”標(biāo)簽，切換到如圖1-5所示的主目錄設(shè)置頁面，該頁面可實(shí)現(xiàn)對主目錄的更改或設(shè)置?？梢赃x擇其他目錄作為存放站點(diǎn)文件的位置。點(diǎn)擊“瀏覽”按鈕，選擇存放站點(diǎn)文件的實(shí)際物理路經(jīng)的c:\myweb。

圖1-5主目錄設(shè)置頁面

（5）設(shè)定默認(rèn)文檔。每個(gè)網(wǎng)站都會(huì)有默認(rèn)文檔，默認(rèn)文檔就是訪問者訪問站點(diǎn)時(shí)首先要訪問的那個(gè)文件，未制定所要訪問的網(wǎng)頁文件時(shí)，系統(tǒng)會(huì)訪問默認(rèn)的頁面文件。常見的主頁文件名有index.htm、index.asp、default.htm、default.asp等。單擊“文檔”標(biāo)簽，選擇啟動(dòng)默認(rèn)的文檔復(fù)選框；點(diǎn)選“添加”按鈕，在默認(rèn)文檔對話框中設(shè)置默認(rèn)文檔名（取名為：index.asp為默認(rèn)顯示首頁）；通過箭頭按鈕，調(diào)整默認(rèn)文檔搜索順序。如圖1-6所示：

圖1-6設(shè)置啟動(dòng)默認(rèn)文檔

3．虛擬目錄的設(shè)置

要從主目錄以外的其他目錄中進(jìn)行發(fā)布，就必須創(chuàng)建虛擬目錄。“虛擬目錄”不包含在主目錄中，但在顯示給客戶瀏覽器時(shí)就象位于主目錄中一樣。本實(shí)驗(yàn)以對實(shí)際路徑（例如：d:\aspexample）創(chuàng)建虛擬目錄來說明其操作過程。（1）在D:盤根目錄下創(chuàng)建aspexample文件夾。（2）打開Internet信息服務(wù)器。

（3）新建虛擬目錄：在“默認(rèn)網(wǎng)站”單擊鼠標(biāo)右鍵，選擇“新建”－“虛擬目錄”，如圖1－7所示。

圖1-7“虛擬目錄創(chuàng)建向?qū)А_始”對話框

（4）單擊“下一步”按鈕，將會(huì)出現(xiàn)“虛擬目錄創(chuàng)建向?qū)А摂M目錄別名”對話框，在該對話框中“別名”下的文本框中輸入“ASPE”，如圖1-8所示；

圖1-8“虛擬目錄創(chuàng)建向?qū)А摂M目錄別名”對話框

（5）單擊“下一步”按鈕，將會(huì)出現(xiàn)“虛擬目錄創(chuàng)建向?qū)АW(wǎng)站內(nèi)容目錄”對話框，在該對話框中“目錄”下面的文本框中輸入文件夾名“D:\ASPExmaple”或單擊“瀏覽”按鈕，查找到“D:\ASPExmaple”文件夾，如圖1-9所示。

圖1-9“虛擬目錄創(chuàng)建向?qū)АW(wǎng)站內(nèi)容目錄”對話框

（6）單擊“下一步”按鈕，將會(huì)出現(xiàn)“虛擬目錄創(chuàng)建向?qū)АL問權(quán)限”對話框，直接按“下一步”按鈕，在出現(xiàn)的對話框中單擊“完成”按鈕便完成了“虛擬目錄”的創(chuàng)建。此時(shí)在“Internet信息服務(wù)”窗口中就可以看到建立的虛擬目錄“ASPE”，如圖1-10所示。

圖1-10建立的虛擬目錄

4．ASP文檔的創(chuàng)建與運(yùn)行

（1）用記事本將下述代碼文本命名為time.asp保存在c:\myweb下，即可形成一個(gè)ASP文件。

%@Language=VBScript%htmlbody您好！br現(xiàn)在的時(shí)間是：%t=Time

Response.Writet'顯示當(dāng)前系統(tǒng)時(shí)間%/body/html

（2）在IE瀏覽器的地址欄輸入“/time.asp”或者

“http://localhost/time.asp”，腳本代碼被執(zhí)行。查看運(yùn)行結(jié)果如圖1－11所示。

圖1-11網(wǎng)頁效果

（3）將該文件復(fù)制到d:\aspexample文件夾下，在IE瀏覽器的地址欄輸入，查看網(wǎng)頁結(jié)果，理解虛擬目錄的概念。5．在Dreamweaver2023MX下設(shè)置管理站點(diǎn)

為了能方便的在此軟件中創(chuàng)建、調(diào)試和運(yùn)行程序，需要在DW中給網(wǎng)頁程序設(shè)置管理站點(diǎn)。假設(shè)要實(shí)驗(yàn)的應(yīng)用程序存儲(chǔ)在實(shí)際路徑c:\myweb中，在DW中的管理站點(diǎn)名設(shè)為“ASP實(shí)驗(yàn)站點(diǎn)”，則具體操作如下：（1）啟動(dòng)Dreamweaver2023MX程序

（2）選擇：站點(diǎn)→站點(diǎn)管理，則出現(xiàn)對話框,如圖1-12所示：

圖1-12“管理站點(diǎn)”對話框

（3）單擊“新建”按鈕，選擇“站點(diǎn)”，則屏幕顯示如圖1－13所示。

圖1-12“站點(diǎn)命名”對話框（4）輸入站點(diǎn)名“ASP實(shí)驗(yàn)站點(diǎn)”，單擊下一步，顯示如圖1－14所示。

圖1-14“選擇服務(wù)器技術(shù)”對話框

（5）選擇單選按鈕：是，我想使用服務(wù)器技術(shù)；然后根據(jù)下拉菜單選擇：ASPVBScript。單擊下一步，顯示顯示如圖1－15所示。

圖1-15“選擇文件存放位置”對話框

（6）擇文件存儲(chǔ)的實(shí)際位置，該實(shí)驗(yàn)為:c:\myweb。單擊下一步，繼續(xù)顯示如圖1-16所示。

圖1-16“選擇站點(diǎn)根目錄”對話框

（7）輸入該管理站點(diǎn)瀏覽的根目錄，該實(shí)驗(yàn)為：http://localhost，然后單擊“測試URL(T)”按鈕，來測試設(shè)置是否成功。測試成功，再單擊“下一步“，顯示如圖1-17所示。

圖1-17“選擇是否傳文件”對話框

（8）選擇單選按鈕“否”，單擊“下一步”則出現(xiàn)站點(diǎn)定義總結(jié)，然后按“完成“按鈕，則結(jié)束對管理站點(diǎn)的設(shè)置。

6.用DW編寫并運(yùn)行一個(gè)簡單的ASP網(wǎng)頁程序

（1）啟動(dòng)Dreamweaver2023MX，然后選擇已建立的“ASP實(shí)驗(yàn)站點(diǎn)”，在其下進(jìn)行創(chuàng)建、編輯和運(yùn)行文件。

（2）文件→新建，選擇“動(dòng)態(tài)頁”和“ASPVBScript”，點(diǎn)按“創(chuàng)建”，在出

現(xiàn)的屏幕上的body與/body之間加入以下ASP代碼：%response.write(“我們有信心學(xué)好ASP這門課程！”)%

%response.write(“現(xiàn)在系統(tǒng)的時(shí)間為:“now)%

（3）將網(wǎng)頁保存到路徑c:\myweb目錄下，文件可命名為first.asp。（4）啟動(dòng)IE瀏覽器，在地址欄鍵入：http://locallost/first.asp或者/first.asp,然后按回車查看結(jié)果。

實(shí)驗(yàn)二HTML標(biāo)記符的使用

一、實(shí)驗(yàn)學(xué)時(shí)：2學(xué)時(shí)二、實(shí)驗(yàn)類型：設(shè)計(jì)性

學(xué)生根據(jù)實(shí)驗(yàn)?zāi)康暮蛢?nèi)容要求，運(yùn)用所學(xué)的知識，運(yùn)用HTML語言設(shè)計(jì)實(shí)現(xiàn)各種網(wǎng)頁，并進(jìn)行實(shí)際驗(yàn)證，得出實(shí)驗(yàn)結(jié)果，撰寫實(shí)驗(yàn)報(bào)告。三、實(shí)驗(yàn)?zāi)康?/p>

1．掌握HTML標(biāo)記符的用法和功能。2．掌握HTML網(wǎng)頁的基本結(jié)構(gòu)。

四、實(shí)驗(yàn)內(nèi)容

1．用HTML標(biāo)記語言編程實(shí)現(xiàn)如圖2－1所示的網(wǎng)頁。

圖2-1網(wǎng)頁

素材如下：

唐詩——七言樂府

此題《全唐詩》為無名氏。這首詩含義比較單純，反復(fù)詠嘆強(qiáng)調(diào)愛惜時(shí)光，莫要錯(cuò)過青春年華。從字面看，是對青春和愛情的大膽歌唱，是熱情奔放的坦誠流露。然而字面背后，仍然是“愛惜時(shí)光”的主旨。因此，若作“行樂及時(shí)”的宗旨看似乎低了，作“珍惜時(shí)光”看，便搖曳多姿，耐人尋味。

《金縷衣》：杜秋娘

勸君莫惜金縷衣，勸君惜取少年時(shí)?；ㄩ_堪折直須折，莫待無花空折枝。

2．用HTML標(biāo)記語言編程實(shí)現(xiàn)如圖2－2所示的網(wǎng)頁。

圖2-2網(wǎng)頁

參考代碼：

headtitle超鏈接綜合實(shí)例/title/headbody

h2align=centeraname=top中國詩詞賞析/a/h2center

ahref=ex4-2.htmltarget=_blank金縷衣/abr/ahref=#靜夜思/abr/ahref=#沁園春﹒雪/abr/ahref=#念奴嬌﹒赤壁懷古/abr/hr

h2歡迎下載中國詩詞集/h2ahref=tssbs.rar唐詩三百首/abr/ahref=scwbs.rar宋詞五百首

/abr/br/

請和我聯(lián)系:ahref=mailto:goodlook@龍的傳人多媒體工

作室/anbsp;nbsp;ahref=#top返回頁頂/a/center/body/html

3．用HTML標(biāo)記語言編程實(shí)現(xiàn)如圖2－3所示的表單網(wǎng)頁。

圖2-3表單網(wǎng)頁

實(shí)驗(yàn)三VBScript程序設(shè)計(jì)

一、實(shí)驗(yàn)學(xué)時(shí)：2學(xué)時(shí)二、實(shí)驗(yàn)類型：設(shè)計(jì)性

學(xué)生根據(jù)實(shí)驗(yàn)?zāi)康暮蛢?nèi)容要求，運(yùn)用所學(xué)的知識，運(yùn)用VBScript語言設(shè)計(jì)實(shí)現(xiàn)各種網(wǎng)頁，并進(jìn)行實(shí)際驗(yàn)證，得出實(shí)驗(yàn)結(jié)果，撰寫實(shí)驗(yàn)報(bào)告。

三、實(shí)驗(yàn)?zāi)康?/p>

1.了解并掌握VBScript腳本程序設(shè)計(jì)語言的基本語法知識及簡單程序設(shè)計(jì)方法

2.熟練掌握VBScript的輸入輸出函數(shù)InputBox和MsgBox；

3.熟練掌握VBScript的If語句和SelectCase語句的編程技術(shù)；

4.熟練掌握VBScript的ForNext、DoLoop和ForeachIn等循環(huán)語句的編程技術(shù)；

5.熟練掌握VBScript的過程和函數(shù)的編程技術(shù)。

四、實(shí)驗(yàn)內(nèi)容

1．選擇結(jié)構(gòu)程序設(shè)計(jì)

購書款折扣計(jì)算程序：為圖書館“好書共享”協(xié)會(huì)編寫一個(gè)會(huì)員購書款折扣計(jì)算的動(dòng)態(tài)網(wǎng)頁程序。

（1）要求如下：

程序運(yùn)行時(shí)，首先出現(xiàn)如圖3-1所示的“姓名輸入”對話框，輸入姓名

后按“確定”按鈕；

將會(huì)出現(xiàn)如圖3-2所示的“性別輸入”對話框，輸入性別后按“確定”按鈕；將會(huì)出現(xiàn)如圖3-3所示的“好書共享”協(xié)會(huì)會(huì)員書款折扣計(jì)算網(wǎng)頁，在文本框中輸入書款后按“確定”按鈕；

將會(huì)出現(xiàn)如圖3-4所示的對話框，顯示用戶應(yīng)付的書款。

書款折扣率計(jì)算規(guī)律如下：書款小于1000元時(shí)，0.95折；書款大于等于1000元而小于2000元時(shí)，0.9折；書款大于等于2000元而小于4000元時(shí)，0.8折；書款大于等于4000元時(shí)，0.7折。（2）任務(wù)分析：

訪問網(wǎng)頁時(shí)，出現(xiàn)的輸入姓名和輸入性別的對話框，在VBScript中可以用InputBox()函數(shù)來實(shí)現(xiàn)。

根據(jù)用戶輸入的性別來給出是“先生”或“女士”的稱呼，可用if…else…endif雙分支語句來實(shí)現(xiàn)。

問候語是隨著時(shí)間的變化而變化的，有“上午好”、“下午好”和“晚上好”，因此有三種不同的情況，可通過if…else…endif語句的嵌套來實(shí)現(xiàn)，也可以使用塊if語句來實(shí)現(xiàn)

要顯示中文的“星期幾”，可先使用weekday()函數(shù)得到一個(gè)指示今天是星期幾的數(shù)值，使用多分支語句selectcaseendselect來實(shí)現(xiàn)。

書款的折扣計(jì)算也可以通過selectcase…endselect語句來實(shí)現(xiàn)。顯示應(yīng)付書款，可通過msgbox()函數(shù)來實(shí)現(xiàn)。

圖3-1“姓名輸入”對話框

圖3-2“性別輸入”對話框

圖3-3“好書共享”協(xié)會(huì)會(huì)員書款折扣計(jì)算網(wǎng)頁

圖3-4“用戶應(yīng)付書款”對話框

（3）參考代碼：htmlhead

title圖書館好書共享協(xié)會(huì)會(huì)員購書款折扣計(jì)算程序/title/headbody

scriptlanguage=vbscriptoptionexplicit

dimxm,xb,str1,str2'聲明四個(gè)變量xm=inputbox(請輸入你的姓名,姓名輸入)xb=inputbox(請輸入性別,性別輸入)ifxb=男then'根據(jù)輸入的性別，決定稱呼

str1=先生else

str1=女士endif

iftime()=#6:00:00#andtime()=#12:00:00#then'根據(jù)當(dāng)前時(shí)間決

定問候語

str2=早上好!

elseiftime()=#12:00:00#andtime()=#19:00:00#thenstr2=下午好!else

str2=晚上好!endif

document.writeh2align=center您好，_

xmstr1,str2/h2'該語句輸出歡迎詞/scriptpalign=center

%dimy,m,d,t,w,str

y=year(date())'取得當(dāng)前年m=month(date())'取得當(dāng)前月d=day(date())'取得當(dāng)前日t=time()'取得當(dāng)前時(shí)間

selectcaseweekday(date)'判斷weekday()函數(shù)的值形成中文“星期幾”信息case1

w=星期日case2

w=星期一case3

w=星期二case4

w=星期三case5

w=星期四case6

w=星期五case7

w=星期六endselect

str=現(xiàn)在日期時(shí)間為：y年m月d日wt

br

response.writestr'輸出當(dāng)前日期時(shí)間和星期信息%

centerh3歡迎你使用圖書館好書共享協(xié)會(huì)會(huì)員購書款折扣計(jì)算程序/h3

請輸入你的總書款：inputtype=textname=txtpriceinputtype=buttonname=okbtnvalue=確定/centerscriptlanguage=vbscriptfor=okbtnevent=onclick'okbtn按鈕的單擊事件代碼

dimtotalprice,givepricetotalprice=txtprice.value

selectcasetrue'該循環(huán)計(jì)算應(yīng)付書款casetotalprice1000

giveprice=0.95*totalprice

casetotalprice=1000andtotalprice2000giveprice=0.9*totalprice

casetotalprice=2000andtotalprice4000giveprice=0.8*totalpricecaseelse

giveprice=0.7*totalpriceendselect

msgbox你的應(yīng)付書款為：giveprice/script/body/html

2．循環(huán)結(jié)構(gòu)程序設(shè)計(jì)（1）任務(wù)描述

為圖書館網(wǎng)站編寫一個(gè)休閑游戲網(wǎng)頁，該游戲網(wǎng)頁由“猜數(shù)”、“判斷某數(shù)是否為素?cái)?shù)”、“百錢買百雞”三個(gè)小游戲組成。網(wǎng)頁的瀏覽界面如圖3-5所示。

此時(shí)如果用戶單擊“猜數(shù)”按鈕，將會(huì)出現(xiàn)如圖3-6所示的“猜數(shù)游戲”對話框，用戶輸入猜的數(shù)后單擊“確定”按鈕，如果猜的數(shù)小了，將會(huì)出現(xiàn)如圖3-7所示的提示框，如果猜的數(shù)大了，將會(huì)出現(xiàn)如圖3-8所示的提示框，如果猜中了將會(huì)出現(xiàn)如圖3-9所示的提示框，同時(shí)提示一共猜了幾次。

圖3-5游戲網(wǎng)頁瀏覽界面

圖3-6“猜數(shù)游戲”對話框

圖3-7“猜小了”的提示框

圖3-8“猜大了”的提示框

圖3-9“猜中了”的提示框

單擊“判斷某數(shù)是否為素?cái)?shù)”按鈕，將會(huì)出現(xiàn)如圖3-9所示的“判斷素?cái)?shù)游戲”對話框，如果用戶猜錯(cuò)了，將會(huì)出現(xiàn)如圖3-10所示的提示框，如果用戶猜對了，將會(huì)出現(xiàn)如圖3-11所示的提示框。

圖3-9“判斷素?cái)?shù)游戲”對話框

單擊“百錢買百雞”按鈕，將會(huì)出現(xiàn)如圖3-12所示的“百雞買百雞”對話框，

圖3-10“猜錯(cuò)”提示框

圖3-11“猜對”提示框

供用戶輸入一種購買的的方案，用戶輸入方案后按“確定”按鈕，如果方案不正確，將會(huì)出現(xiàn)提示框告訴你沒有答對，如果給出的方案正確，將會(huì)出現(xiàn)提示框告訴你回答正確，無論答對答錯(cuò)，最后均會(huì)出現(xiàn)如圖3-13所示的提示框，告訴用戶所有可能的方案。

圖3-12“百錢買百雞游戲”對話框圖3-13“所有方案”提示框

（2）參考代碼htmlhead

title游戲程序界面/title/headbody

centerh2如果你累了，請玩玩游戲吧/h2/centerhr!--水平線--

centerinputtype=buttonname=game1value=猜數(shù)inputtype=buttonname=game2value=判斷某數(shù)是否為質(zhì)數(shù)inputtype=buttonname=game3value=百錢買百雞/centerscriptfor=game1event=onclicklanguage=vbscriptDimm,n,num,ans,cs

'm和n分別存放要猜的數(shù)的上下界,num存放在猜的數(shù),ans存放用戶猜的數(shù),cs表示猜的總次數(shù)

randomize'隨機(jī)數(shù)初始化

m=int(50*rnd())'產(chǎn)生要猜的數(shù)的范圍下界

n=50+int(50*rnd())'產(chǎn)生要猜的數(shù)的范圍上界num=m+int((n-m)*rnd)'產(chǎn)生要猜的數(shù)

ans=inputbox(猜的數(shù)的范圍為：m~nvbclrf請輸入你猜的數(shù),猜數(shù)游戲)

'上述語句讓用戶輸入一個(gè)要猜的數(shù)ans=ans+1-1'使ans具有數(shù)值數(shù)據(jù)的特性cs=1'猜的次數(shù)置1

do