中職Web數(shù)據(jù)庫與動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)第5單元教學(xué)課件

1、(中職）Web數(shù)據(jù)庫與動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)第5單元ppt課件Web數(shù)據(jù)庫及動(dòng)態(tài)網(wǎng)絡(luò)設(shè)計(jì)單元五 創(chuàng)建網(wǎng)絡(luò)聊天室 引言 本單元從創(chuàng)建一個(gè)最簡單的聊天室開始，由淺入深地講述制作網(wǎng)絡(luò)聊天室的過程。本單元的網(wǎng)絡(luò)聊天室后臺(tái)數(shù)據(jù)庫采用SQL Server數(shù)據(jù)庫。能力目標(biāo) 能制作簡單的聊天室網(wǎng)頁 能設(shè)置表單的隱含域 能設(shè)置站點(diǎn) 能創(chuàng)建數(shù)據(jù)表 能設(shè)置數(shù)據(jù)源 能應(yīng)用ASP主要的內(nèi)置對象 能使用簡單的SQL語句 單元五 創(chuàng)建網(wǎng)絡(luò)聊天室 任務(wù)一 創(chuàng)建一個(gè)最簡單的聊天室 任務(wù)二 為網(wǎng)站建立數(shù)據(jù)庫和數(shù)據(jù)表 任務(wù)三 制作聊天室的用戶注冊和登錄頁面 任務(wù)四 制作聊天頁面 任務(wù)五 運(yùn)行和調(diào)試聊天室任務(wù)六 美化聊天頁面 項(xiàng)目實(shí)訓(xùn) 制作網(wǎng)

2、上書店聊天室 單元五 創(chuàng)建網(wǎng)絡(luò)聊天室任務(wù)一 創(chuàng)建一個(gè)最簡單的聊天室 現(xiàn)在，家中擁有兩臺(tái)以上的計(jì)算機(jī)已是一件很平常的事情，一般家中都可建立一個(gè)小型的局域網(wǎng)。家庭成員為了不互相打擾，即便是在家中也是在不同的房間，通過各自的計(jì)算機(jī)做著自己的事情，這時(shí)如果在家中建立一個(gè)簡單的聊天室頁面，那么處于不同房間的人交流起來就會(huì)很方便。 返 回關(guān) 閉 任務(wù)描述 設(shè)計(jì)一個(gè)典型的網(wǎng)絡(luò)聊天室其實(shí)不難，只需要一些常用的HTML標(biāo)記加上ASP程序即可。下面就從“創(chuàng)建一個(gè)最簡單的聊天室”開始，來介紹網(wǎng)絡(luò)聊天室的制作方法。 在這個(gè)聊天室中只用一個(gè)頁面就能完成用戶的登錄和發(fā)言，用戶的登錄信息和發(fā)言信息分別通過該頁面上的兩個(gè)表單

3、來實(shí)現(xiàn)。 任務(wù)分析 返 回關(guān) 閉任務(wù)一 創(chuàng)建一個(gè)最簡單的聊天室 方法與步驟 創(chuàng)建文件夾 返 回關(guān) 閉任務(wù)一 創(chuàng)建一個(gè)最簡單的聊天室 在D盤的aspexp文件夾下建立一個(gè)名為Ch03的站點(diǎn)文件夾，在該目錄下分別再建立名為css、image和database的三個(gè)文件夾，將素材放到D:aspexpch03image中，如圖所示。 方法與步驟 設(shè)置虛擬目錄 返 回關(guān) 閉任務(wù)一 創(chuàng)建一個(gè)最簡單的聊天室將D:aspexpch03設(shè)置為虛擬目錄，具體操作步驟參見單元一中的介紹。 設(shè)置站點(diǎn) 返 回關(guān) 閉任務(wù)一 創(chuàng)建一個(gè)最簡單的聊天室 打開網(wǎng)頁制作軟件Dreamweaver，選擇“站點(diǎn)”“管理站點(diǎn)”命令，建立

4、一個(gè)名為chatroom的站點(diǎn)，如右圖所示。 對“分類”列表框中的“遠(yuǎn)程信息”和“測試服務(wù)器”選項(xiàng)進(jìn)行設(shè)置，具體操作步驟參見單元一中的介紹。 方法與步驟 返 回關(guān) 閉任務(wù)一 創(chuàng)建一個(gè)最簡單的聊天室 設(shè)置聊天室頁面 選擇“文件”“新建”命令，新建動(dòng)態(tài)頁ASP VBScript文件，如圖所示，單擊“創(chuàng)建”按鈕。在站點(diǎn)下建立一個(gè)名為chat.asp動(dòng)態(tài)文件，如下圖所示。返 回關(guān) 閉 在網(wǎng)頁文件chat.asp中，設(shè)計(jì)聊天室頁面如圖所示。在文檔窗口的設(shè)計(jì)視圖中，可以看到用戶登錄信息是由頁面中的第一個(gè)表單及其中的表單元素構(gòu)成，而用戶發(fā)言的信息是由第二個(gè)表單及其中的表單元素構(gòu)成的。 關(guān) 閉返 回 設(shè)計(jì)好聊

5、天室頁面之后，接下來開始添加程序代碼。首先，將chat.asp文檔窗口從設(shè)計(jì)視圖切換到的代碼視圖，仔細(xì)查看設(shè)計(jì)好的頁面的HTML程序代碼。然后，在原來的HTML程序代碼中添加一些必需的ASP程序代碼，使得頁面中的兩個(gè)表單分別能夠在滿足相應(yīng)的條件下出現(xiàn)和起作用。添加ASP程序后的完整程序代碼見教材。關(guān) 閉返 回 編寫好程序后，通過按【F12】鍵預(yù)覽，可以看到如下圖所示的結(jié)果，即所做頁面中的第一個(gè)表單。關(guān) 閉返 回 在“昵稱”文本框內(nèi)輸入“陽光燦爛”后，單擊頁面上的“進(jìn)入聊天室”按鈕，可以看到如下圖所示的結(jié)果，即所做頁面中的第二個(gè)表單。關(guān) 閉返 回 在客戶說話的文本框內(nèi)輸入“大家好，初次見面請多關(guān)

6、照！”后，再單擊頁面上的“提交”按鈕，客戶將會(huì)看見自己的發(fā)言，如下圖所示。關(guān) 閉返 回 相關(guān)知識(shí)與技能 返 回關(guān) 閉任務(wù)一 創(chuàng)建一個(gè)最簡單的聊天室 Session對象及使用 Session對象有兩個(gè)屬性： SessionID、 Timeout Session對象只有一個(gè)方法：Abandon 對象有兩個(gè)事件（Session_OnStart Session_OnEnd ），且必須和Global.asa結(jié)合使用 利用Session存儲(chǔ)信息 思考與練習(xí) 建立站點(diǎn)目錄mychat，并將站點(diǎn)指定至站點(diǎn)目錄。 返 回關(guān) 閉任務(wù)一 創(chuàng)建一個(gè)最簡單的聊天室進(jìn)行IIS設(shè)置，將站點(diǎn)目錄mychat設(shè)置為Web發(fā)布站

7、點(diǎn)，并啟用默認(rèn)文檔為index.asp 。任務(wù)二 為網(wǎng)站建立數(shù)據(jù)庫和數(shù)據(jù)表 返 回關(guān) 閉 任務(wù)描述 聊天室是網(wǎng)絡(luò)中交流信息的方式之一，由于它具有實(shí)時(shí)性的特點(diǎn)，所以很受用戶的歡迎。用戶登錄到聊天室后，可各抒己見，系統(tǒng)將用戶發(fā)表的信息顯示在頁面上，讓每個(gè)用戶都可以看到。聊天室系統(tǒng)不僅要保存每個(gè)用戶的個(gè)人信息，而且還要保存用戶的發(fā)言內(nèi)容，以便管理員可以進(jìn)行管理。因此在聊天室系統(tǒng)中首先必須有一個(gè)數(shù)據(jù)庫來存放這些信息。返 回關(guān) 閉 任務(wù)分析 系統(tǒng)中應(yīng)有一個(gè)存放信息內(nèi)容的數(shù)據(jù)庫chat，在此使用SQL Server 2000數(shù)據(jù)庫來實(shí)現(xiàn)。其內(nèi)部包括聊天室必須的兩個(gè)數(shù)據(jù)表，第一個(gè)是用戶信息表userinfo

8、，它存放的是用戶的基本信息；第二個(gè)是聊天記錄表，它存放的是此聊天室的所有聊天記錄。任務(wù)二 為網(wǎng)站建立數(shù)據(jù)庫和數(shù)據(jù)表返 回關(guān) 閉 方法與步驟 任務(wù)二 為網(wǎng)站建立數(shù)據(jù)庫和數(shù)據(jù)表 安裝SQL Server 2000數(shù)據(jù)庫 建立數(shù)據(jù)庫和數(shù)據(jù)表 返 回關(guān) 閉 相關(guān)知識(shí)與技能 Microsoft SQL Server 2000 的特性 SQL Server 2000的工具和實(shí)用程序 任務(wù)二 為網(wǎng)站建立數(shù)據(jù)庫和數(shù)據(jù)表返 回關(guān) 閉 思考與練習(xí) 在SQL Server 2000下新建職工檔案數(shù)據(jù)庫，文件名為“職工檔案”。 在“職工檔案”數(shù)據(jù)庫中創(chuàng)建一個(gè)表，表的名稱為“職工基本情況”，如表所示。首先，定義表的結(jié)構(gòu)

9、（字段），然后將職工號作為主關(guān)鍵字，保存表。 任務(wù)二 為網(wǎng)站建立數(shù)據(jù)庫和數(shù)據(jù)表職 工 號姓 名出 生 日 期職 稱月 薪備 注01趙克明60-01-10工程師150002錢端江59-02-19高工200003汪小紅70-02-19工程師120004李農(nóng)平71-10-30工程師100005吳建民76-11-01工程師80006張法建75-11-01工程師800任務(wù)二 為網(wǎng)站建立數(shù)據(jù)庫和數(shù)據(jù)表返 回關(guān) 閉返 回關(guān) 閉 思考與練習(xí) 向“職工檔案”數(shù)據(jù)庫中的“職工基本情況”表輸入6條記錄，保存記錄。 修改表的結(jié)構(gòu)，刪除字段“備注”，增加字段“性別”。 任務(wù)二 為網(wǎng)站建立數(shù)據(jù)庫和數(shù)據(jù)表任務(wù)三 制作聊天室

10、的用戶注冊和登錄頁面 返 回關(guān) 閉 任務(wù)描述 大型網(wǎng)站的聊天室一般都采用會(huì)員制的管理方式，即使用聊天室的用戶必須要先注冊一個(gè)賬號，且必須通過登錄系統(tǒng)才能進(jìn)入聊天室，這樣可以方便網(wǎng)站管理員對使用網(wǎng)站聊天室的用戶進(jìn)行管理。 會(huì)員制網(wǎng)絡(luò)聊天室的組成主要包括：注冊頁面regin.asp、登錄頁面enter.asp、處理發(fā)言頁面updata.asp、聊天室頁面chatroom.asp（由用戶發(fā)言頁面talk.asp、用戶在線頁面online.asp 和信息顯示頁面show.asp組成的框架頁面）、離開聊天室頁面leave.asp、存放信息的數(shù)據(jù)庫chat（包含用戶信息表userinfo和聊天記錄表cha

11、tinfo）。 任務(wù)三 制作聊天室的用戶注冊和登錄頁面 返 回關(guān) 閉 任務(wù)描述 各組成部分之間的關(guān)系如下圖所示，用戶首先從登錄頁面進(jìn)入。 返 回關(guān) 閉 任務(wù)分析 要進(jìn)入會(huì)員制網(wǎng)絡(luò)聊天室，需先進(jìn)入注冊頁面進(jìn)行注冊，填寫完頁面中需要用戶填寫的注冊信息后，提交頁面，此時(shí)用戶輸入的所有數(shù)據(jù)將和chat數(shù)據(jù)庫的userinfo數(shù)據(jù)表中的數(shù)據(jù)進(jìn)行比較，如果沒有發(fā)現(xiàn)相同的“昵稱”，則將輸入數(shù)據(jù)新增到userinfo數(shù)據(jù)表中，并且可轉(zhuǎn)到聊天室登錄頁面，否則將在regin.asp輸出錯(cuò)誤提示信息，要求用戶重新注冊。而在聊天室登錄頁面中，已注冊者在該頁面中輸入要在聊天室中使用的昵稱，并選擇好代表自己的頭像后，提交

12、頁面即可進(jìn)入聊天室聊天。任務(wù)三 制作聊天室的用戶注冊和登錄頁面返 回關(guān) 閉 方法與步驟 任務(wù)三 制作聊天室的用戶注冊和登錄頁面 制作用戶注冊頁面 打開網(wǎng)頁制作軟件Dreamweaver，選擇“窗口”“文件”命令，在打開的文件面板下拉列表中選擇站點(diǎn)chatroom，如圖所示。 返 回關(guān) 閉任務(wù)三 制作聊天室的用戶注冊和登錄頁面 在chatroom站點(diǎn)中新建一個(gè)ASP VBScript動(dòng)態(tài)頁面regin.asp，如圖所示。返 回關(guān) 閉任務(wù)三 制作聊天室的用戶注冊和登錄頁面 在網(wǎng)頁文件regin.asp的文檔工具欄中輸入網(wǎng)頁標(biāo)題“用戶注冊”，然后設(shè)計(jì)聊天室的用戶注冊頁面如圖所示。返 回關(guān) 閉任務(wù)三

13、制作聊天室的用戶注冊和登錄頁面 設(shè)計(jì)好聊天室用戶注冊頁面后，接下來開始添加程序代碼。將regin.asp文檔窗口從設(shè)計(jì)視圖切換到的代碼視圖，仔細(xì)查看頁面的HTML程序代碼后，在原來的HTML程序代碼中添加ASP程序代碼，見教材。返 回關(guān) 閉任務(wù)三 制作聊天室的用戶注冊和登錄頁面 按【F12】鍵預(yù)覽頁面，用戶即可在regin.asp頁面中填寫必要的注冊信息進(jìn)行注冊，如圖所示。單擊“提交”按鈕后，頁面將用戶的注冊信息存入用戶信息數(shù)據(jù)表userinfo的同時(shí)，即可進(jìn)入聊天室用戶登錄頁面enter.asp。返 回關(guān) 閉 方法與步驟 任務(wù)三 制作聊天室的用戶注冊和登錄頁面 制作用戶登錄頁面 在chatr

14、oom站點(diǎn)中新建一個(gè)新的ASP VBScript動(dòng)態(tài)頁面文件enter.asp，在其文檔工具欄中輸入網(wǎng)頁標(biāo)題“用戶登錄”，然后再設(shè)計(jì)聊天室的登錄頁面如圖所示。 返 回關(guān) 閉任務(wù)三 制作聊天室的用戶注冊和登錄頁面 設(shè)計(jì)好聊天室用戶注冊頁面后，接下來開始添加程序代碼。將enter.asp文檔窗口從設(shè)計(jì)視圖切換到的代碼視圖，仔細(xì)查看頁面的HTML程序代碼后，首先在原來的HTML程序代碼的開頭終結(jié)標(biāo)記后添加ASP程序代碼，見教材。返 回關(guān) 閉任務(wù)三 制作聊天室的用戶注冊和登錄頁面 按【F12】鍵預(yù)覽，出現(xiàn)如圖所示頁面，在該頁面中用戶輸入要在聊天室中使用的昵稱，并選擇代表自己的頭像后。單擊“進(jìn)入聊天室”

15、按鈕后，用戶登錄enter.asp會(huì)根據(jù)用戶是否輸入了昵稱和是否為注冊會(huì)員，出現(xiàn)下列三種不同的響應(yīng)情況： 返 回關(guān) 閉任務(wù)三 制作聊天室的用戶注冊和登錄頁面 用戶沒有在聊天室登錄區(qū)中填寫“昵稱”，直接按下了“進(jìn)入聊天室”按鈕，這是畫面停留在enter.asp，并在聊天室登錄區(qū)的下方顯示下圖所示的錯(cuò)誤提示。返 回關(guān) 閉任務(wù)三 制作聊天室的用戶注冊和登錄頁面 使用戶填寫“昵稱”后單擊“進(jìn)入聊天室”按鈕，用戶還不是注冊會(huì)員，這時(shí)畫面停留在enter.asp，并在聊天登錄區(qū)的下方顯示如下圖所示的錯(cuò)誤提示。返 回關(guān) 閉任務(wù)三 制作聊天室的用戶注冊和登錄頁面 若用戶已是注冊會(huì)員，并填寫了“昵稱”，選擇了代

16、表自己的頭像后單擊“進(jìn)入聊天室”按鈕，即可進(jìn)入到聊天室頁面chatroom.asp。返 回關(guān) 閉 思考與練習(xí) 在SQL Server中創(chuàng)建一個(gè)數(shù)據(jù)庫regin，再建立一個(gè)新表yhxx，其中包含字段名分別為：username、password、usersex，并且在yhxx表內(nèi)填寫一些記錄，然后保存。 任務(wù)三 制作聊天室的用戶注冊和登錄頁面返 回關(guān) 閉 思考與練習(xí) 任務(wù)三 制作聊天室的用戶注冊和登錄頁面 編寫一個(gè)帶有表單的動(dòng)態(tài)頁面denglu.asp，包括文本框、密碼框、單選按鈕和提交表單的按鈕，要求達(dá)到如圖所示效果。 任務(wù)四 制作聊天頁面 返 回關(guān) 閉 任務(wù)描述 在會(huì)員制聊天室中，用戶首先要注

17、冊用戶名，然后在登錄頁面中使用自己的用戶名或昵稱進(jìn)行登錄后，進(jìn)入到真正的聊天室頁面。 返 回關(guān) 閉 任務(wù)分析 本系統(tǒng)中用戶注冊信息和用戶聊天內(nèi)容需進(jìn)行保存，而后臺(tái)數(shù)據(jù)庫采用SQL Server，所以本任務(wù)中先要?jiǎng)?chuàng)建數(shù)據(jù)庫的鏈接，進(jìn)行ODBC的創(chuàng)建。然后制作基本頁面，聊天室主頁面是一個(gè)由三個(gè)網(wǎng)頁所組成的框架網(wǎng)頁文件，其中包含了用戶發(fā)言頁面talk.asp、信息顯示頁面show.asp和在線用戶列表頁面online.asp。左上部框架為顯示頁面show.asp，主要用來顯示每個(gè)用戶所說的話，顯示的內(nèi)容為：用戶發(fā)言的時(shí)間、用戶的頭像、任務(wù)四 制作論壇顯示頁面返 回關(guān) 閉 任務(wù)分析 用戶的昵稱、用戶發(fā)

18、言的對象、用戶發(fā)言時(shí)的表情以及用戶發(fā)言的內(nèi)容。右上部框架為在線用戶列表頁面online.asp，主要是顯示使用此聊天室的用戶人數(shù)和用戶名，使每個(gè)用戶知道他們在和誰聊天。下部框架為用戶發(fā)言頁面talk.asp，用來輸入聊天的內(nèi)容，可以選擇字體的顏色、說話的語氣和聊天的對象。 任務(wù)四 制作論壇顯示頁面返 回關(guān) 閉 方法與步驟 任務(wù)四 制作論壇顯示頁面 創(chuàng)建ODBC數(shù)據(jù)源 “創(chuàng)建新數(shù)據(jù)源”對話框 選擇服務(wù)器和設(shè)置數(shù)據(jù)源 返 回關(guān) 閉選擇身份驗(yàn)證模式 選擇數(shù)據(jù)庫 設(shè)置其他屬性 創(chuàng)建的ODBC數(shù)據(jù)源的設(shè)置 返 回關(guān) 閉“測試結(jié)果”對話框 “ODBC數(shù)據(jù)源管理器”對話框 返 回關(guān) 閉 方法與步驟 任務(wù)四

19、制作論壇顯示頁面 制作聊天室大廳頁面 添加框架 生成的框架頁面 返 回關(guān) 閉保存好的框架頁面 “數(shù)據(jù)源名稱（DSN）”對話框 測試連接對話框 “數(shù)據(jù)庫”面板 返 回關(guān) 閉 方法與步驟 任務(wù)四 制作論壇顯示頁面 制作在線用戶列表頁面 在線用戶頁面online.asp的設(shè)計(jì) “記錄集”對話框 返 回關(guān) 閉設(shè)置記錄集Rsonline1 完成設(shè)置的在線用戶頁面 設(shè)置online.asp的動(dòng)態(tài)文本 “重復(fù)區(qū)域”對話框 返 回關(guān) 閉 方法與步驟 任務(wù)四 制作論壇顯示頁面 制作用戶發(fā)言頁面 雙擊打開框架頁面chatroom.asp，并將光標(biāo)移到框架頁面的下部框架頁talk.asp中，按如圖所示對用戶發(fā)言頁面

20、talk.asp進(jìn)行設(shè)計(jì)。返 回關(guān) 閉任務(wù)四 制作論壇顯示頁面 在talk.asp頁面中，單擊“綁定”面板左上角的（）按鈕，在彈出的菜單中選擇“記錄集（查詢）”命令，在彈出的“記錄集”對話框中建立如圖所示的記錄集內(nèi)容。返 回關(guān) 閉任務(wù)四 制作論壇顯示頁面 選中列表框（selto），在“服務(wù)器行為”面板上單擊左上角的（）按鈕，在彈出的菜單中選擇“動(dòng)態(tài)表單元素”“動(dòng)態(tài)列表/菜單”命令，彈出“動(dòng)態(tài)列表/菜單”對話框，如圖所示。返 回關(guān) 閉任務(wù)四 制作論壇顯示頁面 在此對話框中的“靜態(tài)選項(xiàng)”下的“值”欄和“標(biāo)簽”欄都輸入“大家”，設(shè)置一個(gè)靜態(tài)選項(xiàng)，然后在“來自記錄集的選項(xiàng)”下拉列表框中選擇記錄集Rst

21、alk1，在“值”和“標(biāo)簽”下拉列表框中都選擇字段name2，如圖所示，最后單擊“確定”按鈕。 返 回關(guān) 閉任務(wù)四 制作論壇顯示頁面 選中字體顏色列表框（selcolor），單擊“屬性”面板中的“列表值”按鈕，打開“列表值”對話框，如圖所示。返 回關(guān) 閉任務(wù)四 制作論壇顯示頁面 在此對話框中的“項(xiàng)目標(biāo)簽”欄和“值”欄輸入如下表所示的內(nèi)容，然后單擊“確定”按鈕。項(xiàng) 目 標(biāo) 簽值項(xiàng) 目 標(biāo) 簽值黑色沉靜#000000紫色拘謹(jǐn)#990099紅色熱情#FF0000深藍(lán)憂郁#000099藍(lán)色開朗#0000FF鎦金歲月#FF9900桃色浪漫#FF00FF發(fā)亮藍(lán)紫#9900FF綠色青春#009900墨綠深沉

22、#006600青色清爽#009999灰色軌跡#333333返 回關(guān) 閉任務(wù)四 制作論壇顯示頁面 選中語氣列表框（selspeak），單擊“屬性”面板中的“列表值”按鈕，在打開的“列表值”對話框的“項(xiàng)目標(biāo)簽”欄中輸入如下表所示的內(nèi)容，然后單擊“確定”按鈕。這樣，就完成了用戶發(fā)言頁面的設(shè)計(jì)。 項(xiàng) 目 標(biāo) 簽值項(xiàng) 目 標(biāo) 簽值輕聲細(xì)語輕聲細(xì)語興高采烈興高采烈不好意思不好意思幸災(zāi)樂禍幸災(zāi)樂禍得意洋洋得意洋洋哭笑不得哭笑不得慢條斯理慢條斯理開懷大笑開懷大笑無精打采無精打采欲哭無淚欲哭無淚返 回關(guān) 閉 方法與步驟 任務(wù)四 制作論壇顯示頁面 制作信息顯示頁面 將光標(biāo)移到框架頁面的左上部框架頁show.asp

23、中，插入一個(gè)1行3列的表格，并按圖所示對信息顯示頁面show.asp進(jìn)行設(shè)計(jì)。它主要用來顯示最新的聊天記錄。返 回關(guān) 閉任務(wù)四 制作論壇顯示頁面 單擊“綁定”面板左上角的（）按鈕，在彈出的菜單中選擇“記錄集（查詢）”命令，在彈出的“記錄集”對話框中建立如圖5-4-28所示的記錄集。在對話框的“名稱”文本框中輸入記錄集的名稱Rsshow1，在“連接”下拉列表框中選擇數(shù)據(jù)庫連接connchat，在“表格”下拉列表框中選擇數(shù)據(jù)表dbo.chatinfo，并且選擇“全部”列，最后在“排序”下拉列表框中選擇time字段，按“降序”排列，完成所有設(shè)置后單擊“確定”按鈕。返 回關(guān) 閉任務(wù)四 制作論壇顯示頁面

24、 展開“綁定”面板中的“記錄集Rsshow1”樹結(jié)構(gòu)，將time字段拖動(dòng)到show.asp頁面的表格第一個(gè)單元格中，將name2字段拖動(dòng)到頁面的第一個(gè)中括號“ ”中，將sayto字段拖動(dòng)到頁面的第二個(gè)中括號“ ”中，將speak字段拖動(dòng)到頁面的第二個(gè)中括號“ ”后，將word字段拖動(dòng)到頁面的“說：”文本后，如圖所示。 返 回關(guān) 閉任務(wù)四 制作論壇顯示頁面 將光標(biāo)移到show.asp頁面內(nèi)表格的第二個(gè)單元格內(nèi)，選擇“插入”“圖像對象”“圖像占位符”命令，打開“圖像占位符”對話框，按圖所示進(jìn)行設(shè)置。在“名稱”文本框中輸入faceimage，將“高度”和“寬度”都設(shè)置為20。返 回關(guān) 閉任務(wù)四 制作

25、論壇顯示頁面 將“記錄集Rsshow1”中的face字段拖動(dòng)到show.asp頁面的圖像占位符中，并在“屬性”面板中將“高度”和“寬度”都設(shè)置為20，如圖所示。 這樣，就完成了顯示信息頁面的設(shè)計(jì)。返 回關(guān) 閉任務(wù)四 制作論壇顯示頁面 選中show.asp頁面中的表格，單擊“服務(wù)器行為”面板左上角的加號（）按鈕，在彈出的菜單中選擇“重復(fù)區(qū)域”命令，將彈出“重復(fù)區(qū)域”對話框，對其按圖所示進(jìn)行設(shè)置。返 回關(guān) 閉任務(wù)四 制作論壇顯示頁面 單擊“重復(fù)區(qū)域”對話框中的“確定”按鈕，將看到show.asp頁面發(fā)生如圖所示的變化。這樣，就完成了用戶發(fā)言頁面的設(shè)計(jì)。返 回關(guān) 閉 相關(guān)知識(shí)與技能 設(shè)計(jì)頁面 創(chuàng)建動(dòng)

26、態(tài)數(shù)據(jù)源 任務(wù)四 制作論壇顯示頁面 向Web頁添加動(dòng)態(tài)內(nèi)容 向頁面添加服務(wù)器行為 測試和調(diào)試頁面 返 回關(guān) 閉 思考與練習(xí) 在SQL server中創(chuàng)建一個(gè)數(shù)據(jù)庫Chengji，再建立一個(gè)新表CJ，其中包含列名分別為：xh、bj、xm、xb、nl、yw、sx、yy，數(shù)據(jù)類型為nvarchar，長度等自定，然后保存。任務(wù)四 制作論壇顯示頁面 制作一個(gè)框架頁面ff.asp，分為上下兩個(gè)窗口，分別起名為f1.asp、f2.asp 。返 回關(guān) 閉 思考與練習(xí) 任務(wù)四 制作論壇顯示頁面 設(shè)計(jì)ff.asp框架頁面的窗口布局效果如圖所示。 任務(wù)五 運(yùn)行和調(diào)試聊天室 返 回關(guān) 閉 任務(wù)描述 在基本頁面制作完后

27、還要對頁面進(jìn)行正確的設(shè)置才能使聊天室正常運(yùn)行，本任務(wù)主要是對頁面進(jìn)行設(shè)置和調(diào)試，另外還有制作離開聊天室頁面。只要用戶單擊“離開聊天室”超鏈接，即可轉(zhuǎn)到離開聊天室頁面leave.asp，如圖所示。返 回關(guān) 閉 任務(wù)分析 為使聊天室能正常運(yùn)行，就要正確設(shè)置頁面屬性。在用戶發(fā)言頁面talk.asp，當(dāng)用戶輸入聊天內(nèi)容后，單擊“我說完了”按鈕即可；而當(dāng)用戶想要離開聊天室主頁面時(shí)，只要單擊“離開聊天室”超鏈接，即可轉(zhuǎn)到離開聊天室頁面leave.asp。最后要對這個(gè)聊天室的各個(gè)文件進(jìn)行調(diào)試，完成這個(gè)聊天室系統(tǒng)。另外，聊天室是一個(gè)公共平臺(tái)，聊天的時(shí)間長了，數(shù)據(jù)庫的內(nèi)容就會(huì)很多，所以聊天的內(nèi)容需要及時(shí)刷新，并

28、要求顯示的內(nèi)容是最新的前幾條內(nèi)容。任務(wù)五 運(yùn)行和調(diào)試聊天室返 回關(guān) 閉 方法與步驟 任務(wù)五 運(yùn)行和調(diào)試聊天室 制作處理發(fā)言頁面 在chatroom站點(diǎn)中新建一個(gè)ASP VBScript動(dòng)態(tài)頁面文件updata.asp，如圖所示。該頁面主要用于處理發(fā)言內(nèi)容，故頁面上無需任何設(shè)置。 返 回關(guān) 閉任務(wù)五 運(yùn)行和調(diào)試聊天室 將updata.asp文檔窗口從設(shè)計(jì)視圖切換到代碼視圖，仔細(xì)檢查頁面的HTML程序代碼后，在原來的HTML程序代碼中添加ASP程序代碼，完整的程序代碼見教材。返 回關(guān) 閉 方法與步驟 任務(wù)五 運(yùn)行和調(diào)試聊天室 設(shè)置用戶發(fā)言頁面的屬性 選中talk.asp頁面中的表單（sendfor

29、m），打開“屬性”面板，在“動(dòng)作”文本框內(nèi)輸入updata.asp，在“目標(biāo)”下拉列表框中選擇mainframe選項(xiàng)，如圖所示。返 回關(guān) 閉 方法與步驟 任務(wù)五 運(yùn)行和調(diào)試聊天室 設(shè)置信息顯示頁面 雙擊打開show.asp頁面，在設(shè)計(jì)視圖窗口中選中表格內(nèi)第一個(gè)單元格中的Rsshow1.time動(dòng)態(tài)文本，如圖所示，然后切換到代碼視圖窗口。 以下步驟見教材。 返 回關(guān) 閉 方法與步驟 任務(wù)五 運(yùn)行和調(diào)試聊天室 制作離開聊天室頁面 新建一個(gè)ASP VBScript動(dòng)態(tài)頁面文件leave.asp，然后按如圖所示進(jìn)行設(shè)置。返 回關(guān) 閉任務(wù)五 運(yùn)行和調(diào)試聊天室 將leave.asp文檔窗口從設(shè)計(jì)視圖切換到

30、的代碼視圖，仔細(xì)檢查頁面的HTML程序代碼后，在原來的HTML程序代碼中添加ASP程序代碼。完整的程序代碼見教材。返 回關(guān) 閉 方法與步驟 任務(wù)五 運(yùn)行和調(diào)試聊天室 調(diào)試 打開站點(diǎn)中的enter.asp文件，按【F12】鍵，打開IE瀏覽器進(jìn)行測試，如圖所示。在此頁面的“輸入昵稱”文本框中輸入“陽光燦爛”，選擇第三個(gè)女孩頭像。 返 回關(guān) 閉任務(wù)五 運(yùn)行和調(diào)試聊天室 單擊enter.asp頁面中的“進(jìn)入聊天室”按鈕，則會(huì)轉(zhuǎn)到chatroom.asp聊天大廳頁面，如圖所示。返 回關(guān) 閉任務(wù)五 運(yùn)行和調(diào)試聊天室 在此頁面中的右方顯示了當(dāng)前正在聊天室的用戶名列表；用戶可以在下方的發(fā)言區(qū)選擇說話的對象、字

31、體的顏色、說話的語氣，在文本框中輸入想要說的話，單擊“我說完了”按鈕，則輸入的文字會(huì)顯示在上方的信息顯示頁面中，如圖所示。 返 回關(guān) 閉任務(wù)五 運(yùn)行和調(diào)試聊天室 單擊“離開聊天室”鏈接，則會(huì)轉(zhuǎn)到leave.asp頁面，如圖所示。返 回關(guān) 閉 相關(guān)知識(shí)與技能 Cookies基本知識(shí) 使用Response對象設(shè)置Cookies 任務(wù)五 運(yùn)行和調(diào)試聊天室 使用Request對象設(shè)置Cookies 返 回關(guān) 閉 思考與練習(xí) 把離開聊天室頁面Leave.asp做成非動(dòng)態(tài)頁面，用一般的html頁面實(shí)現(xiàn)現(xiàn)有的效果。 任務(wù)五 運(yùn)行和調(diào)試聊天室 試開發(fā)一個(gè)頁面，當(dāng)客戶第一次訪問時(shí)，需在線注冊姓名、性別、密碼等信

32、息，然后把信息保存到Cookies中。下一次如該客戶再訪問時(shí)，則顯示“某某，您好，您是第幾次光臨本站”的歡迎信息。 任務(wù)六 美化聊天頁面 返 回關(guān) 閉 任務(wù)描述 通過各種色彩豐富的背景，可愛的圖片、多變的字體等的裝置和點(diǎn)綴，讓網(wǎng)絡(luò)用戶能在聊天的同時(shí)，有一種溫馨的感覺及美的享受。本任務(wù)完成后聊天頁面將美化成如圖所示的界面。返 回關(guān) 閉 任務(wù)分析 為了讓聊天室頁面看起來生動(dòng)活潑、有美感，可為頁面添加背景圖案或是顏色，通過對網(wǎng)頁文檔“頁面屬性”的設(shè)置可實(shí)現(xiàn)各種各樣的效果；為了讓網(wǎng)頁擁有統(tǒng)一風(fēng)格的標(biāo)題，還可通過“CSS樣式”表的設(shè)置來制作相同格式的標(biāo)題，簡單又快捷；另外，還可在頁面加上插入一些生動(dòng)可愛

33、的圖片或者GIF動(dòng)畫來增加網(wǎng)頁的趣味性。任務(wù)六 美化聊天頁面返 回關(guān) 閉 方法與步驟 任務(wù)六 美化聊天頁面 添加背景 “頁面屬性”對話框之一 show.asp的背景效果之一 返 回關(guān) 閉“頁面屬性”對話框之二 online.asp的背景效果之二 “頁面屬性”對話框之三 talk.asp的背景效果之三 返 回關(guān) 閉 方法與步驟 任務(wù)六 美化聊天頁面 添加統(tǒng)一的標(biāo)題 “css樣式”面板 “新建CSS規(guī)則”對話框 返 回關(guān) 閉“.biaoti的CSS樣式定義（在我的樣式.css中）”對話框 樣式.biaoti 使用biaoti樣式 “鏈接外部樣式表”對話框 返 回關(guān) 閉“CSS樣式”面板 使用bia

34、oti樣式 返 回關(guān) 閉 方法與步驟 任務(wù)六 美化聊天頁面 插入圖片 “選擇圖像源文件”對話框 返 回關(guān) 閉任務(wù)六 美化聊天頁面插入圖像的頁面 離開聊天室頁面 返 回關(guān) 閉 相關(guān)知識(shí)與技能 Application簡介 Application對象有兩個(gè)事件：Application_OnStart 、Application_OnEnd （要與Global.asa結(jié)合使用） 任務(wù)六 美化聊天頁面 利用Application存儲(chǔ)信息 實(shí)例 返 回關(guān) 閉 思考與練習(xí) 試用Application對象創(chuàng)建一個(gè)計(jì)數(shù)器 任務(wù)六 美化聊天頁面 請編寫兩個(gè)頁面，在第一個(gè)頁面中客戶要輸入姓名，然后保存到Session中，在第二頁面中讀取該Session 信息，并顯示歡迎信息。如果客戶沒有在第一頁登錄就直接訪問第二頁，則將客戶重定向回第一頁。 項(xiàng)目實(shí)訓(xùn) 制作網(wǎng)上書店聊天室 返 回關(guān) 閉 項(xiàng)目描述 為了在注冊用戶中能更好地實(shí)時(shí)進(jìn)行信息的傳遞和交流，同時(shí)為了使網(wǎng)站管理員能很好地與用戶進(jìn)行實(shí)時(shí)溝通和信息的傳達(dá)，還可建立網(wǎng)站內(nèi)部的聊天室系統(tǒng)。項(xiàng)目實(shí)訓(xùn) 創(chuàng)建網(wǎng)上書店論壇返 回關(guān) 閉 項(xiàng)目要求 為網(wǎng)上書店創(chuàng)建一個(gè)簡單的聊天室，使每位用戶在通