網(wǎng)站建設(shè)與維護(hù)課件項(xiàng)目二

1、網(wǎng)站建設(shè)與維護(hù)項(xiàng)目二 制作論壇網(wǎng)站 主 編：張艷旭副主編：杜大志任務(wù)描述： 本部分通過(guò)開(kāi)發(fā)“解憂硬件產(chǎn)品論壇”網(wǎng)站，介紹使用Dreamweaver工具來(lái)開(kāi)發(fā)動(dòng)態(tài)網(wǎng)站，主要包括連接、記錄集、動(dòng)態(tài)數(shù)據(jù)、重復(fù)的區(qū)域、顯示區(qū)域、記錄集分頁(yè)、轉(zhuǎn)到詳細(xì)頁(yè)、記錄集導(dǎo)航狀態(tài)、主詳細(xì)頁(yè)集、插入記錄、更新記錄、刪除記錄、用戶身份驗(yàn)證。本部分還會(huì)介紹ASP腳本知識(shí)，主要包括ASP的五個(gè)對(duì)象：request、response、session、server、applicaton，Ado中的常用對(duì)象：connection、recordset，等等。利用這些工具以及腳本知識(shí)可以靈活高效的開(kāi)發(fā)功能強(qiáng)大的動(dòng)態(tài)網(wǎng)站。 “解憂硬件

2、產(chǎn)品論壇”網(wǎng)站首頁(yè)如下圖所示：項(xiàng)目二 制作論壇網(wǎng)站 項(xiàng)目二 制作論壇網(wǎng)站 項(xiàng)目二 制作論壇網(wǎng)站任務(wù)一 功能介紹 任務(wù)二 數(shù)據(jù)庫(kù)設(shè)計(jì) 任務(wù)三 創(chuàng)建虛擬目錄和站點(diǎn) 任務(wù)四 創(chuàng)建網(wǎng)站樣式文件 任務(wù)五 制作網(wǎng)站模板 任務(wù)六 制作用戶注冊(cè)界面 任務(wù)七 創(chuàng)建用戶登錄界面 任務(wù)八 創(chuàng)建網(wǎng)站顯示主界面 任務(wù)九 創(chuàng)建顯示帖子詳細(xì)信息網(wǎng)頁(yè) 任務(wù)十 實(shí)現(xiàn)發(fā)布帖子功能任務(wù)十一 實(shí)現(xiàn)記錄點(diǎn)擊次數(shù)和回復(fù)次數(shù)功能 任務(wù)一 功能介紹 任務(wù)分析： 在設(shè)計(jì)一個(gè)網(wǎng)站時(shí)首先要和用戶進(jìn)行溝通，了解網(wǎng)站需要實(shí)現(xiàn)哪些功能，分為哪些欄目和板塊，需要遵循的規(guī)則和標(biāo)準(zhǔn)有哪些等 ，本任務(wù)就是在和客戶進(jìn)行溝通的基礎(chǔ)上，得出“解憂硬件產(chǎn)品論壇”網(wǎng)站要

3、實(shí)現(xiàn)的功能，并進(jìn)行功能模塊劃分。 任務(wù)描述：分析“解憂硬件產(chǎn)品論壇”網(wǎng)站要實(shí)現(xiàn)的功能，并進(jìn)行功能模塊劃分。項(xiàng)目二 制作論壇網(wǎng)站 任務(wù)實(shí)施：1網(wǎng)站主要功能 “解憂硬件產(chǎn)品論壇”網(wǎng)站實(shí)現(xiàn)的主要功能包括：用戶注冊(cè)、登錄，發(fā)布、瀏覽、回復(fù)帖子，及后臺(tái)管理等。 （1）用戶注冊(cè) 用戶如果想在論壇發(fā)布帖子，必須是注冊(cè)用戶，本功能就是實(shí)現(xiàn)用戶注冊(cè)，把用戶的一些信息保存到數(shù)據(jù)庫(kù)中。 （2）用戶登錄 用戶注冊(cè)后，就可以用獲得的用戶名和密碼登錄論壇以發(fā)布帖子。 （3）發(fā)布帖子 讓用戶把要發(fā)表的文章發(fā)布到論壇中。任務(wù)一 功能介紹 （4）瀏覽帖子 所有的用戶都可以瀏覽論壇中的內(nèi)容。 （5）回復(fù)帖子 所有的用戶都可以對(duì)感

4、興趣的帖子進(jìn)行回復(fù)。 （6）后臺(tái)管理功能 網(wǎng)站管理員可以對(duì)論壇所有注冊(cè)用戶、帖子、帖子回復(fù)信息進(jìn)行查詢、修改、刪除。 2功能模塊劃分 “解憂硬件產(chǎn)品論壇”網(wǎng)站主要包括前臺(tái)和后臺(tái)管理兩大功能模塊。根據(jù)功能介紹，可以設(shè)計(jì)出系統(tǒng)的功能模塊圖。如下圖所示。任務(wù)一 功能介紹論壇前臺(tái)功能模塊后臺(tái)功能模塊登錄查看帖子發(fā)布帖子回復(fù)帖子帖子管理回復(fù)的帖子管理刪除帖子修改帖子查詢帖子刪除回復(fù)的帖子修改回復(fù)的帖子查詢回復(fù)的帖子注冊(cè)任務(wù)一 功能介紹 本書(shū)只介紹“解憂硬件產(chǎn)品論壇”網(wǎng)站前臺(tái)的制作，后臺(tái)模板可以利用學(xué)過(guò)的知識(shí)自己制作。 3.系統(tǒng)流程分析 在本論壇中，用戶必須先注冊(cè)，獲得用戶名和密碼。然后登錄，登錄成功則發(fā)

5、布帖子，否則不能發(fā)布帖子。所有用戶都可以瀏覽帖子和對(duì)某個(gè)帖子進(jìn)行回復(fù)。 管理員登錄以后可以管理發(fā)布的帖子、以及回復(fù)的帖子。 根據(jù)以上分析，可以設(shè)計(jì)出用戶、管理員操作流程，如下圖所示。任務(wù)一 功能介紹用戶瀏覽帖子回復(fù)帖子未注冊(cè)用戶登錄發(fā)布帖子已注冊(cè)注冊(cè)注冊(cè)管理員登錄管理帖子管理回復(fù)的帖子任務(wù)一 功能介紹 任務(wù)總結(jié)：通過(guò)完成本任務(wù)學(xué)習(xí)了對(duì)用戶需求進(jìn)行分析，根據(jù)需求分析畫(huà)出功能結(jié)構(gòu)圖，根據(jù)需求分析總結(jié)網(wǎng)站操作流程。任務(wù)一 功能介紹 舉一反三： 如果要為鮮花店開(kāi)發(fā)一個(gè)網(wǎng)站，請(qǐng)根據(jù)自己的理解進(jìn)行需求分析。 啟發(fā)思路： 在互聯(lián)網(wǎng)上了解鮮花網(wǎng)站進(jìn)行參考。 在條件允許的前提下，走訪鮮花店、鮮花種植企業(yè)，了解他

6、們的需求，希望互聯(lián)網(wǎng)實(shí)現(xiàn)的功能。 分組完成任務(wù)。任務(wù)一 功能介紹作業(yè)： 1參照教材及其他優(yōu)秀網(wǎng)站，了解并熟練掌握網(wǎng)站系統(tǒng)設(shè)計(jì)的有關(guān)知識(shí)。 任務(wù)一 功能介紹任務(wù)二 數(shù)據(jù)庫(kù)設(shè)計(jì) 任務(wù)分析： 如果要實(shí)現(xiàn)本網(wǎng)站的功能，需要有后臺(tái)數(shù)據(jù)庫(kù)支持，在數(shù)據(jù)庫(kù)要存儲(chǔ)一些數(shù)據(jù)和存儲(chǔ)過(guò)程。本任務(wù)就是對(duì)“解憂硬件產(chǎn)品論壇”網(wǎng)站數(shù)據(jù)進(jìn)行分析，設(shè)計(jì)出數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)，并創(chuàng)建數(shù)據(jù)庫(kù)。任務(wù)描述：進(jìn)行數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)的設(shè)計(jì)，并創(chuàng)建數(shù)據(jù)庫(kù) 項(xiàng)目二 制作論壇網(wǎng)站 任務(wù)實(shí)施：1.數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)的設(shè)計(jì) 根據(jù)系統(tǒng)功能分析，本網(wǎng)站需要?jiǎng)?chuàng)建四個(gè)數(shù)據(jù)表：用戶信息表RegUser，帖子信息表Forum，回復(fù)帖子信息表revertArtical，用戶頭

7、像信息表Userimage；一個(gè)視圖vi_forum，用以查詢帖子詳細(xì)信息。具體設(shè)置如下： 任務(wù)二 數(shù)據(jù)庫(kù)設(shè)計(jì) 用戶信息表RegUser字段名標(biāo)識(shí)主鍵類型長(zhǎng)度小數(shù)位數(shù)允許空默認(rèn)值字段說(shuō)明IDtinyint10用戶idUsernamevarchar300用戶名Passwordvarchar300密碼Addressvarchar500家庭地址Telephonechar150聯(lián)系電話sexchar20性別emailvarchar500郵件地址header_imagevarchar500頭像任務(wù)二 數(shù)據(jù)庫(kù)設(shè)計(jì) 帖子信息表Forum字段名標(biāo)識(shí)主鍵類型長(zhǎng)度小數(shù)位數(shù)允許空默認(rèn)值字段說(shuō)明Idint40帖子id

8、writervarchar500作者contentvarchar20000內(nèi)容strokeint40(0)點(diǎn)擊次數(shù)reback_numint40(0)回復(fù)次數(shù)subjectvarchar1000標(biāo)題write_datedatetime83(getdate()發(fā)帖日期Ipchar200發(fā)帖人ip地址任務(wù)二 數(shù)據(jù)庫(kù)設(shè)計(jì) 回復(fù)帖子信息表revertArtical列名標(biāo)識(shí)主鍵類型長(zhǎng)度小數(shù)位數(shù)允許空默認(rèn)值字段說(shuō)明idint40回復(fù)帖子編號(hào)reback_writervarchar500(作者)reback_contentvarchar20000回復(fù)內(nèi)容reback_datedatetime83(getda

9、te()回復(fù)日期reback_article_codeint40回復(fù)日期編號(hào)ipchar150回復(fù)人IP地址reback_sexchar20性別reback_emailvarchar500郵件reback_header_imagevarchar500頭像任務(wù)二 數(shù)據(jù)庫(kù)設(shè)計(jì) 用戶頭像信息表Userimage字段名標(biāo)識(shí)主鍵類型長(zhǎng)度小數(shù)位數(shù)允許空默認(rèn)值字段說(shuō)明imageipint40頭像編號(hào)imagenamevarchar500頭像名imagepathvarchar500頭像地址任務(wù)二 數(shù)據(jù)庫(kù)設(shè)計(jì) 創(chuàng)建視圖vi_forum，查詢帖子的詳細(xì)信息。代碼如下：CREATE VIEW dbo.vi_foru

10、mASSELECT dbo.forum.subject, dbo.forum.content, dbo.forum.write_date, dbo.forum.id, dbo.forum.writer, dbo.RegUser.Email, dbo.RegUser.header_imageFROM dbo.forum INNER JOIN dbo.RegUser ON dbo.forum.writer = dbo.RegUser.Username任務(wù)二 數(shù)據(jù)庫(kù)設(shè)計(jì) 任務(wù)總結(jié)：通過(guò)完成本任務(wù)學(xué)習(xí)了創(chuàng)建數(shù)據(jù)庫(kù)，創(chuàng)建表，創(chuàng)建視圖。 2.創(chuàng)建數(shù)據(jù)庫(kù) （1）啟動(dòng)Sql Server軟件。 （2）按以上分

11、析創(chuàng)建數(shù)據(jù)庫(kù)forum_data，并創(chuàng)建表添加記錄。任務(wù)二 數(shù)據(jù)庫(kù)設(shè)計(jì) 舉一反三： 根據(jù)需求創(chuàng)建用于存儲(chǔ)網(wǎng)站管理員的表 啟發(fā)思路： 復(fù)習(xí)數(shù)據(jù)庫(kù)操作的基礎(chǔ)知識(shí)，完成本任務(wù)。 分組完成任務(wù)。作業(yè)： 1.參考有關(guān)資料，了解數(shù)據(jù)庫(kù)系統(tǒng)的相關(guān)知識(shí)。掌握網(wǎng)站系統(tǒng)數(shù)據(jù)表的設(shè)計(jì)知識(shí)及技能。 任務(wù)二 數(shù)據(jù)庫(kù)設(shè)計(jì) 任務(wù)三 創(chuàng)建虛擬目錄和站點(diǎn) 任務(wù)分析： “解憂硬件產(chǎn)品論壇”網(wǎng)站可以讓用戶發(fā)布貼子、瀏覽帖子，管理員可以管理帖子，網(wǎng)站和用戶具有交互功能。要實(shí)現(xiàn)這樣的功能網(wǎng)頁(yè)中需要含有服務(wù)器端腳本，它的執(zhí)行需要服務(wù)器解釋或編譯。本教材把它放在ASP平臺(tái)的Web服務(wù)器上，這就需要為它創(chuàng)建虛擬目錄和站點(diǎn)。 任務(wù)描述：為“解

12、憂硬件產(chǎn)品論壇” 網(wǎng)站創(chuàng)建虛擬目錄和站點(diǎn)。項(xiàng)目二 制作論壇網(wǎng)站 任務(wù)實(shí)施： 1創(chuàng)建站點(diǎn)目錄 在D盤根目錄創(chuàng)建forum文件夾，把素材文件夾中的images文件夾及內(nèi)容拷貝到forum文件夾中。 2.啟動(dòng)IIS創(chuàng)建forum虛擬目錄，對(duì)應(yīng)f：forum文件夾。 3.創(chuàng)建站點(diǎn) （1）啟動(dòng)Dreamweaver，選擇“站點(diǎn)”“創(chuàng)建站點(diǎn)”菜單項(xiàng)，彈出“站點(diǎn)設(shè)置對(duì)象”對(duì)話框，站點(diǎn)名稱輸入：forum，本地站點(diǎn)文件夾輸入“d:forum” 。 （2）單擊左邊的“服務(wù)器”，設(shè)置Web服務(wù)器。單擊“添加新服務(wù)器”按鈕，打開(kāi)Web服務(wù)器設(shè)置對(duì)話框，設(shè)置如下圖所示。任務(wù)三 創(chuàng)建虛擬目錄和站點(diǎn) 單擊“保存”按鈕，保

13、存Web服務(wù)器設(shè)置，回到“站點(diǎn)設(shè)置對(duì)象”對(duì)話框，選中“測(cè)試”復(fù)選框。單擊“保存”按鈕，站點(diǎn)創(chuàng)建成功。任務(wù)三 創(chuàng)建虛擬目錄和站點(diǎn) 任務(wù)總結(jié)：通過(guò)完成本任務(wù)學(xué)習(xí)了創(chuàng)建網(wǎng)站文件夾，創(chuàng)建虛擬目錄，創(chuàng)建Dreamweaver站點(diǎn)。任務(wù)三 創(chuàng)建虛擬目錄和站點(diǎn) 舉一反三： IIS有6.0、7.0等版本，請(qǐng)說(shuō)明它們的區(qū)別。 啟發(fā)思路： Windows Server 2003 、Windows XP 集成的是IIS6.0版本，Windows Server 2008、Windows 7集成的是IIS7.0版本。 每個(gè)同學(xué)獨(dú)立完成任務(wù)。任務(wù)三 創(chuàng)建虛擬目錄和站點(diǎn)作業(yè)： 1. 如果準(zhǔn)備為本班創(chuàng)建一個(gè)網(wǎng)站，請(qǐng)?jiān)贗IS中

14、為班級(jí)網(wǎng)站創(chuàng)建對(duì)應(yīng)的網(wǎng)站，在Dreamweaver中創(chuàng)建站點(diǎn)。 任務(wù)三 創(chuàng)建虛擬目錄和站點(diǎn)任務(wù)四 創(chuàng)建網(wǎng)站樣式文件 任務(wù)分析： 根據(jù)預(yù)先設(shè)計(jì)的網(wǎng)站風(fēng)格，創(chuàng)建CSS樣式文件“forumcss.css”，以便在各個(gè)頁(yè)面中統(tǒng)一應(yīng)用樣式，規(guī)范各個(gè)網(wǎng)頁(yè)中顯示的文字格式、鏈接樣式等。結(jié)合網(wǎng)站結(jié)構(gòu)，需要在樣式文件中定義如下表所示7種樣式。 任務(wù)描述：為“解憂硬件產(chǎn)品論壇” 網(wǎng)站創(chuàng)建網(wǎng)站樣式文件 。項(xiàng)目二 制作論壇網(wǎng)站 樣式名稱樣式內(nèi)容應(yīng)用位置或含義body上下左右頁(yè)邊距為0像素頁(yè)面樣式.titlefont大小為16pt，字體為黑體，顏色為 “#FFFFFF”頁(yè)面樣式.contentfont大小為11pt，顏

15、色為“#000000”正文.rootfont大小為9pt，字體為宋體，顏色為“#000000”腳本文字顏色a大小為11pt，顏色為“#0000FF”，“修飾”為“無(wú)”添加鏈接后的樣式a:hover大小為11pt，顏色為“#cc3300”，“修飾”為帶下劃線鼠標(biāo)指向文本鏈接時(shí)的樣式a:visited大小為11pt，顏色為“#cc3300”已經(jīng)訪問(wèn)過(guò)的鏈接樣式任務(wù)四 創(chuàng)建網(wǎng)站樣式文件任務(wù)實(shí)施： 打開(kāi)Dreamweaver 新建一個(gè)HTML網(wǎng)頁(yè)。在“窗口”菜單中選擇“CSS樣式”選項(xiàng)，打開(kāi)“CSS樣式”面板。 單擊“CSS樣式”面板右下角的“新建CSS規(guī)則”按鈕，在彈出的對(duì)話框中選擇器類型選擇“標(biāo)簽

16、”，選擇器名稱選擇“body”，規(guī)則定義選擇“（新建樣式表文件）” 。單擊“確定”按鈕，出現(xiàn) “保存樣式表文件為”對(duì)話框，文件命名為“forumcss.css”，保存在“f:forum”文件夾下。單擊“確定”按鈕，顯示“body的CSS樣式定義”對(duì)話框，設(shè)置“方框”中的邊界“上”為0，并選中“全部相同”復(fù)選框，如下圖所示。任務(wù)四 創(chuàng)建網(wǎng)站樣式文件 采用同樣方法，在“forumcss.css”樣式文件中定義其他樣式。至此，完成了“forumcss.css”樣式文件7個(gè)樣式的定義，將該文件保存在“f：forum”中。任務(wù)四 創(chuàng)建網(wǎng)站樣式文件 任務(wù)總結(jié)：通過(guò)完成本任務(wù)學(xué)習(xí)了樣式的作用、樣式的保存，創(chuàng)

17、建網(wǎng)站樣式文件。任務(wù)四 創(chuàng)建網(wǎng)站樣式文件 舉一反三： 如果要制作一個(gè)鮮花店網(wǎng)站，請(qǐng)為其設(shè)計(jì)網(wǎng)站樣式文件。 啟發(fā)思路： 網(wǎng)站風(fēng)格的重點(diǎn)要把握以下幾方面: 色彩：色彩風(fēng)格是最容易識(shí)別的風(fēng)格，例如清新淡雅的色調(diào)、濃重?zé)崃业纳{(diào)、沉穩(wěn)莊重的色調(diào)等；顏色還具有許多象征性的意義，如綠色象征自然、環(huán)保等意義；黑色象征嚴(yán)肅、深沉、神秘等.。 版式：版式是以平面上的幾何特征表現(xiàn)風(fēng)格的要素。它是頁(yè)面板塊的布置和相對(duì)位置的設(shè)計(jì)，不同風(fēng)格的版式，具有不同的效果。 圖飾：頁(yè)面的裝飾會(huì)使用到一些圖片和紋飾等素材，任務(wù)四 創(chuàng)建網(wǎng)站樣式文件作業(yè)： 1. 如果要制作一個(gè)幼兒用品網(wǎng)站，請(qǐng)為其設(shè)計(jì)網(wǎng)站樣式文件。 圖片紋飾的風(fēng)格是最

18、直接表現(xiàn)風(fēng)格的要素，例如，中式古典、西洋古典、精致奢華、前衛(wèi)時(shí)尚、溫馨浪漫、簡(jiǎn)約質(zhì)樸等多種風(fēng)格都可以通過(guò)圖片、紋飾、花邊、題圖等直接表現(xiàn)出來(lái)。 文字：文字從形態(tài)到內(nèi)容都可以突出表現(xiàn)網(wǎng)站的風(fēng)格 每個(gè)同學(xué)獨(dú)立完成任務(wù)。任務(wù)四 創(chuàng)建網(wǎng)站樣式文件任務(wù)五 制作網(wǎng)站模板 任務(wù)分析： 使用Dreamweaver軟件創(chuàng)建網(wǎng)站模板，可以統(tǒng)一整個(gè)網(wǎng)站的風(fēng)格，提高網(wǎng)站開(kāi)發(fā)效率。本任務(wù)就是為“解憂硬件產(chǎn)品論壇”網(wǎng)站創(chuàng)建模板，模板風(fēng)格以藍(lán)色為主色調(diào)，學(xué)習(xí)制作網(wǎng)站模板。 任務(wù)描述：使用Dreamweaver軟件為“解憂硬件產(chǎn)品論壇” 網(wǎng)站創(chuàng)建網(wǎng)站模板 。項(xiàng)目二 制作論壇網(wǎng)站 任務(wù)實(shí)施： 打開(kāi)Dreamweaver，創(chuàng)建并

19、保存動(dòng)態(tài)網(wǎng)頁(yè)form.asp，并附加樣式文件forumcss.css 在網(wǎng)頁(yè)中插入一個(gè)5行1列的表格gl，設(shè)置表格寬967，邊框粗細(xì)為0，單元格邊距為0，單元格間距為0，表格居中對(duì)齊。 設(shè)置表格第1行高50像素，第2行高6像素，第4行高6像素，第5行高50像素。然后轉(zhuǎn)到代碼視圖，刪除表格第2行，第4行的“”。如下圖所示：任務(wù)五 制作網(wǎng)站模板 任務(wù)五 制作網(wǎng)站模板 設(shè)置表格gl第1行背景為圖片：top.jpg，內(nèi)容垂直對(duì)齊為底部。在第1行中插入一個(gè)1行6列的表格gen，其中邊框粗細(xì)為0，單元格邊距為0，單元格間距為0，表格寬度為96%，且表格居中顯示。設(shè)置表格gen第2列、第3列、第4列、第5列

20、、第六列寬為8%。 在表格gen中添加以下內(nèi)容： 第2列中輸入內(nèi)容：瀏覽帖子，居中顯示，設(shè)置鏈接為：./forumindex.asp； 第3列中輸入內(nèi)容：發(fā)布帖子，居中顯示，設(shè)置鏈接為：./forumaddarticle.asp； 第4列中輸入內(nèi)容：登錄，居中顯示，設(shè)置鏈接為：./forumlogin.asp；任務(wù)五 制作網(wǎng)站模板 第5列中輸入內(nèi)容：注冊(cè)，居中顯示，設(shè)置鏈接為：./forumadduser.asp； 第6列中輸入內(nèi)容：管理，居中顯示，設(shè)置鏈接為：./manage/manageforumlogin.asp。 設(shè)置表格gl第5行背景顏色為：b5daec。輸入內(nèi)容：Copyright

21、 解憂IT有限公司 版權(quán)所有，插入換行符（注意不要單擊回車，因?yàn)閱螕艋剀囀窃O(shè)置段落，兩行間的距離太大）。再輸入內(nèi)容：聯(lián)系QQ：372975191；選中這兩行內(nèi)容居中顯示，并從“樣式”列表中選擇“rootfont”，設(shè)置文字樣式為“rootfont”。任務(wù)五 制作網(wǎng)站模板 單擊文件菜單中的“另存為模板”， 彈出另存為模板對(duì)話框。 單擊保存，保存為forum，彈出對(duì)話框，單擊“是”，更新鏈接。 單擊表格gen中第3行，把光標(biāo)放入第3行；單擊“插入”“模板對(duì)象”“可編輯區(qū)域”，彈出如圖9-15所示對(duì)話框，單擊“確定”插入可編輯區(qū)域。保存文件，完成網(wǎng)站模板的創(chuàng)建。 任務(wù)總結(jié)： 通過(guò)完成本任務(wù)學(xué)習(xí)了網(wǎng)站

22、模板的作用，創(chuàng)建網(wǎng)站模板。任務(wù)五 制作網(wǎng)站模板 舉一反三： 如果要制作一個(gè)鮮花店網(wǎng)站，請(qǐng)為其設(shè)計(jì)網(wǎng)站模板。 啟發(fā)思路： 根據(jù)上一任務(wù)舉一反三中第1題設(shè)計(jì)的鮮花網(wǎng)站風(fēng)格，收集素材，制作網(wǎng)站模板。作業(yè)： 1. 如果要制作一個(gè)幼兒用品網(wǎng)站，請(qǐng)為其設(shè)計(jì)網(wǎng)站模板。 每個(gè)同學(xué)獨(dú)立完成任務(wù)。任務(wù)五 制作網(wǎng)站模板 任務(wù)六 制作用戶注冊(cè)界面 任務(wù)分析： 本論壇只有登錄用戶才能發(fā)布帖子，如果一個(gè)網(wǎng)友想要發(fā)布帖子，他首先要在論壇中進(jìn)行注冊(cè)，成為注冊(cè)用戶，然后才能登錄發(fā)布帖子。本部分的功能就是創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)，實(shí)現(xiàn)用戶注冊(cè)功能。本功能實(shí)質(zhì)是通過(guò)網(wǎng)頁(yè)向ForumData數(shù)據(jù)庫(kù)的User表中添加記錄。 任務(wù)描述：創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)

23、，實(shí)現(xiàn)用戶注冊(cè)功能。 項(xiàng)目二 制作論壇網(wǎng)站 任務(wù)六 制作用戶注冊(cè)界面 任務(wù)實(shí)施： 1新建網(wǎng)頁(yè)并插入表格 通過(guò)模板forum，創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)forumadduser.asp并保存。刪除可編輯區(qū)域中的內(nèi)容，并插入一個(gè)2行1列的表格fau，邊框粗細(xì)為0，單元格邊距為0，單元格間距為0，表格寬度為100%。表格背景為：b5daec。設(shè)置表格第1行高為60，輸入內(nèi)容：用戶注冊(cè)，居中顯示，并對(duì)它使用樣式：bigtitle。 2連接數(shù)據(jù)庫(kù) 選擇“窗口”“數(shù)據(jù)庫(kù)”菜單項(xiàng)，顯示數(shù)據(jù)庫(kù)面板，如下圖所示。任務(wù)六 制作用戶注冊(cè)界面 如果“文檔類型”前沒(méi)有對(duì)鉤，單擊“文檔類型”鏈接，打開(kāi)“選擇文檔類型”對(duì)話框，選擇“AS

24、P VBScript”。單擊“自定義連接字符串”按鈕，打開(kāi)“自定義連接字符串”對(duì)話框。任務(wù)六 制作用戶注冊(cè)界面 建立連接conn，連接字符串為driver=sql server;server=(local);uid=sa;pwd= stu05!#;database=forumdata“（注意：本連接在整個(gè)論壇網(wǎng)站中只創(chuàng)建一次。使用時(shí)要把uid內(nèi)容修改成登錄SQL Server的登錄名，pwd內(nèi)容修改成指定登錄的密碼。）如下圖所示。任務(wù)六 制作用戶注冊(cè)界面 3添加記錄集 選擇“插入”“數(shù)據(jù)對(duì)象”“記錄集”菜單項(xiàng)，創(chuàng)建記錄集RsRegUser，查詢用戶頭像信息，只查詢userimage表中imag

25、ename、imagepath兩列，用于在用戶注冊(cè)時(shí)讓用戶選擇頭像。如下圖所示。任務(wù)六 制作用戶注冊(cè)界面 把光標(biāo)放入表格fau中的第2行，選擇“插入”“數(shù)據(jù)對(duì)象”“插入記錄”“插入記錄表單向?qū)А辈藛雾?xiàng)，顯示“插入記錄表單”，“連接”選擇為：conn；“插入到表格”選擇為：dbo.RegUser；“插入后，轉(zhuǎn)到”文本框輸入“forumlogin.asp”；在表單字段中刪除ID列；選中Password列，“顯示為”改為“密碼字段”；選中Sex列，“顯示為”改為“單選按鈕組”，單擊“單選按鈕組屬性”按鈕，打開(kāi)“單選按鈕組”屬性對(duì)話框，添加選項(xiàng)：男和女。 把表單字段中header_image列“顯示為

26、”改為菜單，單擊“菜單屬性”按鈕，顯示“菜單屬性”對(duì)話框，把菜單屬性改為如下圖所示。任務(wù)六 制作用戶注冊(cè)界面 單擊“確定”按鈕，返回“插入記錄表單”向?qū)?duì)話框。各表單字段Username、Password、Sex、Email、Address、Telephone、Header_image標(biāo)簽依次修改為：用戶名、密碼、電子郵件、家庭住址、聯(lián)系電話、頭像。如下圖所示。任務(wù)六 制作用戶注冊(cè)界面 單擊“確定”按鈕返回設(shè)計(jì)視圖。在“密碼”行下邊插入再插入一行，輸入內(nèi)容為：“確認(rèn)密碼”，字段名為password1。任務(wù)六 制作用戶注冊(cè)界面 4實(shí)現(xiàn)驗(yàn)證功能 為了提高頁(yè)面效果，要求對(duì)輸入的數(shù)據(jù)進(jìn)行如下驗(yàn)證： （

27、1）用戶名必須輸入，字符數(shù)不能超過(guò)20，只能由數(shù)字、大小寫字母和下劃線組成。 （2）密碼必須輸入，字符數(shù)不能超過(guò)20，密碼內(nèi)容要和確認(rèn)密碼內(nèi)容相同。 （3）電子郵件要符合郵件格式。 轉(zhuǎn)入代碼視圖，在代碼下面插入代碼，保存文件完成功能。任務(wù)六 制作用戶注冊(cè)界面 5實(shí)現(xiàn)用戶頭像預(yù)覽功能 （1）在header_image列表框右側(cè)插入圖像，顯示圖片：01.jpg，并為圖片標(biāo)記命名為：userimage。 （2）轉(zhuǎn)入代碼視圖，添加一個(gè)客戶端函數(shù)，實(shí)現(xiàn)根據(jù)用戶在header_image列表框中的選擇，右邊顯示相應(yīng)的圖片。函數(shù)內(nèi)容如下：function changeuserimage()document.

28、form1.userimage.src=document.form1.header_image.value （3）選中header_image列表框，展開(kāi)“行為”面板。在左邊的列表框中選擇“onChange”，右邊輸入changeuserimage()。任務(wù)六 制作用戶注冊(cè)界面 6設(shè)置網(wǎng)頁(yè)外觀 設(shè)置用戶注冊(cè)表格寬為：600，整個(gè)表格背景色為：#3366CC，間距為：2，填充為：5，邊框?yàn)?，表格內(nèi)所有單元格的背景顏色為：b5daec。Username、Password、Password1文本字段字符寬度為20。在文字“用戶名”、“密碼”、“確認(rèn)密碼”前加“*”，保存網(wǎng)頁(yè)。 任務(wù)總結(jié)：通過(guò)完成本

29、任務(wù)學(xué)習(xí)了創(chuàng)建數(shù)據(jù)庫(kù)連接，利用Dreamweaver工具創(chuàng)建網(wǎng)頁(yè)向表中添加記錄實(shí)現(xiàn)用戶注冊(cè) ，實(shí)現(xiàn)用戶錄入信息驗(yàn)證。任務(wù)六 制作用戶注冊(cè)界面 舉一反三： 建設(shè)學(xué)生信息管理網(wǎng)站，創(chuàng)建數(shù)據(jù)庫(kù)StuManage,在數(shù)據(jù)庫(kù)中創(chuàng)建表Student,包含字段：學(xué)號(hào)、姓名、性別、家庭住址、聯(lián)系電話、入學(xué)時(shí)間；創(chuàng)建管理員表User,包含字段：編號(hào)、用戶名、密碼、備注。在IIS中創(chuàng)建網(wǎng)站Stu，在網(wǎng)站Stu下創(chuàng)建網(wǎng)頁(yè)StuAdd.asp,實(shí)現(xiàn)向表Student添加學(xué)生信息的功能。 啟發(fā)思路： 復(fù)習(xí)創(chuàng)建數(shù)據(jù)庫(kù)、創(chuàng)建表，在IIS中創(chuàng)建站點(diǎn)、設(shè)置站點(diǎn)，使用網(wǎng)頁(yè)向表中添加記錄知識(shí)。然后完成本任務(wù)。 每個(gè)同學(xué)獨(dú)立完成任務(wù)

30、。任務(wù)六 制作用戶注冊(cè)界面 作業(yè)： 1. 制作網(wǎng)頁(yè)ManageMan.asp，為本論壇網(wǎng)站添加網(wǎng)站后臺(tái)管理員。 2. 在學(xué)生信息網(wǎng)站中制作網(wǎng)站StuUserAdd.asp網(wǎng)頁(yè)，實(shí)現(xiàn)添加管理員的功能。 任務(wù)六 制作用戶注冊(cè)界面 任務(wù)七 制作用戶登錄界面 任務(wù)分析： 為了維護(hù)本論壇內(nèi)容的純凈,防止惡意用戶發(fā)布反動(dòng)、涉黃等信息，本論壇只有登錄后的用戶才能發(fā)帖子，現(xiàn)在開(kāi)始創(chuàng)建用戶登錄網(wǎng)頁(yè)，實(shí)現(xiàn)驗(yàn)證用戶的功能。 任務(wù)描述：使用Dreamweaver軟件創(chuàng)建用戶登錄網(wǎng)頁(yè)，實(shí)現(xiàn)驗(yàn)證用戶的功能。項(xiàng)目二 制作論壇網(wǎng)站 任務(wù)實(shí)施： 1創(chuàng)建提示頁(yè)面 通過(guò)模板forum創(chuàng)建網(wǎng)頁(yè)loginerror.asp并保存。 刪

31、除可編輯區(qū)域中的內(nèi)容，插入一個(gè)1行1列的表格，寬為100%，在表格內(nèi)輸入內(nèi)容：“用戶名或密碼錯(cuò)誤,請(qǐng)單擊返回,重新登錄!”，如后插入換行符，再輸入“如果您還沒(méi)有注冊(cè),請(qǐng)注冊(cè)!”，內(nèi)容居中顯示。選中“返回”設(shè)置鏈接：javascript:history.go(-1)，選中“注冊(cè)”設(shè)置鏈接：forumadduser.asp。 2創(chuàng)建登錄頁(yè)面 通過(guò)模塊forum創(chuàng)建網(wǎng)頁(yè)forumlogin.asp并保存。 刪除可編輯區(qū)域中的內(nèi)容，插入一個(gè)表單form1，在表任務(wù)七 制作用戶登錄界面 選擇“插入”“數(shù)據(jù)對(duì)象”“用戶身份驗(yàn)證”“登錄用戶”菜單項(xiàng)，顯示“登錄用戶”對(duì)話框，設(shè)置內(nèi)容如下圖所示。單中插入一個(gè)4

32、行2列的表格，在表格中添加內(nèi)容并設(shè)置樣式。設(shè)置用戶名文本字段名為：Username，密碼文本字段名為：Password。任務(wù)七 制作用戶登錄界面 設(shè)置好后單擊“確定”按鈕。最后保存網(wǎng)頁(yè)，完成登錄用戶頁(yè)面的創(chuàng)建。 任務(wù)總結(jié)：通過(guò)完成本任務(wù)學(xué)習(xí)了制作錯(cuò)誤提示網(wǎng)頁(yè),學(xué)習(xí)了登錄用戶工具、注銷用戶工具、限制對(duì)頁(yè)的訪問(wèn)工具、檢查新用戶名工具的使用。學(xué)習(xí)了利用Dreamweaver工具創(chuàng)建用戶登錄網(wǎng)頁(yè)。任務(wù)七 制作用戶登錄界面 舉一反三： 為本論壇網(wǎng)站制作管理員登錄網(wǎng)頁(yè)ManageLogin.asp，實(shí)現(xiàn)管理員登錄網(wǎng)站后臺(tái)。 啟發(fā)思路： 明確存放用戶名密碼的表，確定用戶名和密碼的驗(yàn)證規(guī)則，使用登錄用戶工具、

33、限制對(duì)頁(yè)的訪問(wèn)工具完成任務(wù)。作業(yè)： 1. 完善任務(wù)六舉一反三中的學(xué)生信息管理網(wǎng)站，創(chuàng)建網(wǎng)頁(yè)StuUserLogin.asp，實(shí)現(xiàn)管理員用戶登錄的功能。 每個(gè)同學(xué)獨(dú)立完成任務(wù)。任務(wù)七 制作用戶登錄界面 任務(wù)八 制作網(wǎng)站顯示主界面 任務(wù)分析： 在一個(gè)論壇中要有一個(gè)帖子顯示主界面，分頁(yè)顯示所有帖子的標(biāo)題、作者、發(fā)布時(shí)間、點(diǎn)擊次數(shù)、回復(fù)次數(shù)等信息，不顯示帖子的詳細(xì)內(nèi)容，通過(guò)單擊帖子標(biāo)題鏈接再顯示帖子的詳細(xì)信息，效果如下圖所示。本任務(wù)通過(guò)制作網(wǎng)站顯示主界面學(xué)習(xí)記錄集等工具的使用。 任務(wù)描述：制作帖子顯示主界面，分頁(yè)顯示所有帖子的標(biāo)題、作者、發(fā)布時(shí)間、點(diǎn)擊次數(shù)、回復(fù)次數(shù)等信息。項(xiàng)目二 制作論壇網(wǎng)站 任務(wù)八

34、 制作網(wǎng)站顯示主界面 任務(wù)實(shí)施： 1新建網(wǎng)頁(yè)并插入表格 通過(guò)模板forum創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)forumindex.asp并保存。 刪除可編輯區(qū)域中的內(nèi)容，插入3行1列的表格zgti，寬100%。設(shè)置第1行高為30，插入圖像：postnew.gif，設(shè)此圖像鏈接網(wǎng)頁(yè)forumaddarticle.asp；第3行高為：30像素，背景為：#006699。 2添加記錄集并編輯表格 選擇“插入”“數(shù)據(jù)對(duì)象”“記錄集”菜單項(xiàng)，打開(kāi)記錄集對(duì)話框，創(chuàng)建記錄集rsforum查詢用戶發(fā)布帖子內(nèi)容，查尋內(nèi)容包括：id、writer、stroke、reback_num、subject、reback_date。如下圖所示。任

35、務(wù)八 制作網(wǎng)站顯示主界面 任務(wù)八 制作網(wǎng)站顯示主界面 在表格zgti第2行插入動(dòng)態(tài)表格dg，選擇“插入”“數(shù)據(jù)對(duì)象”“動(dòng)態(tài)數(shù)據(jù)”“動(dòng)態(tài)表格”菜單項(xiàng)，彈出“動(dòng)態(tài)表格”對(duì)話框，設(shè)置每頁(yè)顯示15行。 刪除動(dòng)態(tài)表格dg放置id的第1列，設(shè)置動(dòng)態(tài)表格dg背景顏色為：#006699，寬為100%，第1行高為：30像素，設(shè)置表格第2行高：28像素。第2行第1列、第3列、第5列背景顏色為：b5daec，第2列、第4列背景顏色為：#FFFFFF。 調(diào)整動(dòng)態(tài)表格dg各列寬度和順序。通過(guò)拖動(dòng)調(diào)整各列顯示內(nèi)容，依次為：subject、writer、reback_num、stroke、reback_date；并把標(biāo)題修

36、改為中文標(biāo)題依次為：主題、作者、回復(fù)次數(shù)、點(diǎn)擊次數(shù)、發(fā)表日期；標(biāo)題居中顯示，使用樣式titlefont。第2行第2列到第5列內(nèi)容居中顯示。第1到4列寬度任務(wù)八 制作網(wǎng)站顯示主界面 分別為：49%，15%，10%，10%。 在表格dg第3行插入一個(gè)1行2列的表格dh，邊框線寬度為：0，寬為100%；第1列寬40%。單擊表格dh第1列，選擇“插入”“數(shù)據(jù)對(duì)象”“顯示記錄計(jì)數(shù)”“記錄集導(dǎo)航狀態(tài)”菜單項(xiàng)，插入“記錄集導(dǎo)航狀態(tài)”。單擊表格dh第2列，選擇“插入”“數(shù)據(jù)對(duì)象”“記錄集分頁(yè)”“記錄集導(dǎo)航條”菜單項(xiàng)，插入“記錄集導(dǎo)航條”。 選中記錄導(dǎo)航條，進(jìn)入代碼視圖修改代碼，把顯示記錄導(dǎo)航條和顯示記錄導(dǎo)航狀

37、態(tài)的表格合并成一個(gè)1行5列的表格。設(shè)置以上合并生成的表格第2列到第4列的寬度依次為15%，15%，15%。 選中主題內(nèi)容，選擇“插入”“數(shù)據(jù)對(duì)象”“轉(zhuǎn)到”“轉(zhuǎn)到任務(wù)八 制作網(wǎng)站顯示主界面 詳細(xì)頁(yè)”菜單項(xiàng)，打開(kāi)“轉(zhuǎn)到詳細(xì)頁(yè)面”對(duì)話框，設(shè)置詳細(xì)信息頁(yè)為：forumdetail.asp；傳遞URL參數(shù)為：id；記錄集為：rsforum；列為：id，如下圖所示。任務(wù)八 制作網(wǎng)站顯示主界面 最后保存網(wǎng)頁(yè)文件，完成網(wǎng)站顯示主界面的創(chuàng)建。 任務(wù)總結(jié)：通過(guò)完成本任務(wù)學(xué)習(xí)了創(chuàng)建記錄集，使用動(dòng)態(tài)表格工具顯示記錄集數(shù)據(jù)，使用轉(zhuǎn)到詳細(xì)頁(yè)工具，使用記錄集導(dǎo)航條工具，使用記錄集導(dǎo)航狀態(tài)工具。任務(wù)八 制作網(wǎng)站顯示主界面 舉

38、一反三： 制作網(wǎng)頁(yè)ShowMember.asp，分頁(yè)顯示網(wǎng)站會(huì)員，每頁(yè)顯示15個(gè)會(huì)員,并在網(wǎng)頁(yè)上顯示總共有多少會(huì)員。 啟發(fā)思路： 總結(jié)記錄集、動(dòng)態(tài)表格、記錄集導(dǎo)航狀態(tài)工具的使用，完成本任務(wù)。 學(xué)生分組協(xié)作完成任務(wù)。作業(yè)： 1. 完善本項(xiàng)目任務(wù)六舉一反三中的學(xué)生信息管理網(wǎng)站，創(chuàng)建網(wǎng)頁(yè)StuShowAll.asp，分頁(yè)顯示所有學(xué)生信息。 任務(wù)八 制作網(wǎng)站顯示主界面 任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè) 任務(wù)分析： 上一任務(wù)制作了帖子顯示主界面，只顯示帖子的標(biāo)題等基本信息，本任務(wù)將制作網(wǎng)頁(yè)，顯示用戶所選帖子的詳細(xì)內(nèi)容，用戶瀏覽了詳細(xì)內(nèi)容后，還可以在本網(wǎng)頁(yè)針對(duì)帖子內(nèi)容進(jìn)行回復(fù)，效果如下圖所示。通過(guò)實(shí)現(xiàn)這些

39、功能學(xué)習(xí)記錄集等工具的靈活運(yùn)用。 任務(wù)描述：制作網(wǎng)頁(yè)顯示用戶所選帖子的詳細(xì)內(nèi)容，用戶瀏覽了詳細(xì)內(nèi)容后，還可以在本網(wǎng)頁(yè)針對(duì)帖子內(nèi)容進(jìn)行回復(fù)。項(xiàng)目二 制作論壇網(wǎng)站 項(xiàng)目二 制作論壇網(wǎng)站 任務(wù)實(shí)施： 1新建網(wǎng)頁(yè)并插入表格并編輯 通過(guò)模塊forum創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)forumdetail.asp并保存。刪除可編輯區(qū)域中的內(nèi)容，在可編輯區(qū)域內(nèi)插入一個(gè)4行1列的表格zbj，寬為100%，背景為#b5daec，填充為0，間距為1，邊框?yàn)?。 在表格zbj第1行插入一個(gè)1行3列的表格fb，寬為100%，填充為0，間距為1，邊框?yàn)?。表格fb第1列寬10%，插入images文件夾中圖片postnew.gif，設(shè)置鏈接

40、為forumaddcontent.asp；第2列寬10%，插入images文件夾中圖片newreply.gif，設(shè)置鏈接為#rebackarti（在接下來(lái)的步驟中將在回復(fù)帖子處插入錨點(diǎn)）。 任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè) 2顯示帖子信息 建立記錄集rsforumdetail，查詢?cè)趂orumindex.asp網(wǎng)頁(yè)中單擊的主題詳細(xì)信息，查詢視圖vi_forum中的id，writer，subject，content，write_date，email，header_image。設(shè)置篩選為id、=、url參數(shù)、id。 在表格zbj第2行插入一個(gè)5行2列的表格ng，寬度為96%，填充為0，間距為1，邊

41、框?yàn)?，背景為#006699，居中對(duì)齊。 設(shè)置表格ng第1行高30，把兩列合并，輸入內(nèi)容：“主題：”。顯示“應(yīng)用程序”下的“綁定”面板，拖動(dòng)記錄集rsforumdetail中的subject到“主題：”右邊,使內(nèi)容居中顯示，選中第1行中的所有內(nèi)容，應(yīng)用樣式：titlefont。任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè) 設(shè)置表格ng第2行高130，第1列寬20%，此單元格背景為#FFFFCC，單元格內(nèi)容居中對(duì)齊，把“綁定”面板中記錄集rsforumdetail下的writer拖動(dòng)進(jìn)來(lái)。在writer下選擇“插入”“圖像對(duì)象”“圖像占位符”菜單項(xiàng)，彈出“圖像占位符”對(duì)話框，設(shè)置圖像占位符的高度和寬度均為8

42、0， 轉(zhuǎn)到代碼視圖，找到圖像標(biāo)簽代碼。把綁定面板中記錄集rsforumdetail下的header_image拖動(dòng)到src=后的雙引號(hào)中間。 設(shè)置表格ng第2行第2列中內(nèi)容垂直頂端對(duì)齊，水平居中對(duì)齊，背景為#FFFFFF。并插入一個(gè)3行3列的表格ys，寬度為96%，填充為0，間距為1，邊框?yàn)?。表格ys第1行第1列寬10%，內(nèi)容居中顯示，輸入“郵件”,設(shè)置鏈接為任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè)“mailto:”；第1行第2列寬80%，內(nèi)容右對(duì)齊，把綁定面板中記錄集rsforumdetail下的write_date拖動(dòng)進(jìn)來(lái)。把表格ys第2行的3列合并，插入“分割行”。把表格ys第3行3列合并，內(nèi)

43、容左對(duì)齊，把綁定面板中記錄集rsforumdetail下的content拖動(dòng)進(jìn)來(lái)。設(shè)置表格ng第3行高8，兩列單元格背景色為：#b5daec。 3顯示帖子回復(fù)信息 建立記錄集rsrebackinfo查詢對(duì)此帖子的回復(fù)信息，查詢r(jià)evertArtical表中字段：id，reback_writer，reback_content，reback_date，reback_article_code，reback_email，reback_header_image，篩選為：reback_article_code、=、URL參數(shù)、id。 任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè) 設(shè)置表格ng第4行高130，第1列背景

44、為#FFFFCC，單元格內(nèi)容居中對(duì)齊，把綁定面板中記錄集rsrebackinfo下的reback_writer拖動(dòng)進(jìn)來(lái)。在reback_writer下選擇“插入”“圖像對(duì)象”“圖像占位符”菜單項(xiàng)，插入一個(gè)圖像占位符，此圖像占位符寬度和高度均為80。使用前面講述方法設(shè)置此圖像占位符的src為revertArtical表中的reback_header_image字段內(nèi)容。 設(shè)置表格ng第4行第2列中內(nèi)容頂端對(duì)齊，居中對(duì)齊，背景為#FFFFFF。并插入一個(gè)3行3列的表格hf，寬度為96%，填充為0，間距為1，邊框?yàn)?。表格hf第1行第1列寬10%，內(nèi)容居中顯示，輸入“郵件”,設(shè)置鏈接為“mailto

45、:”；第1行第2列寬80%，內(nèi)容右對(duì)齊，把綁定面板中記錄集rsrebackinfo下的reback_date拖動(dòng)進(jìn)來(lái)。把表格hf第2行的3列合并，插入“分割行”。把表格hf第3行3列合并，內(nèi)容左對(duì)齊，把綁定面板中記錄集rsrebackinfo下的reback_content拖動(dòng)進(jìn)來(lái)。 選中表格ng的第3行和第4行（注意選中的是兩行“”，不是兩行中的單元格），選擇“插入”“數(shù)據(jù)對(duì)象”“重復(fù)區(qū)域”菜單項(xiàng)，顯示“重復(fù)區(qū)域”對(duì)話框，設(shè)置記錄集為“rsrebackinfo”，每頁(yè)顯示5條回復(fù)信息。單擊“確定”按鈕。 設(shè)置表格ng第5行高30，合并兩列，單擊“記錄集導(dǎo)航狀態(tài)”按鈕，插入記錄集rsrebac

46、kinfo導(dǎo)航狀態(tài)，單擊“記錄集分頁(yè)：記錄集導(dǎo)航條”按鈕，插入記錄集rsrebackinfo導(dǎo)航條。 任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè) 轉(zhuǎn)入代碼視圖，修改代碼使表格ng第5行中的內(nèi)容放在一個(gè)1行5列的表格中。設(shè)置新合并的表格寬100%，第1到4列寬各為：40%，15%，15%，15%。 4實(shí)現(xiàn)回復(fù)帖子 設(shè)置表格zbj第3行高15。創(chuàng)建記錄集rsuserimage查詢用戶頭像的信息，用于填充在菜單/列表中。參數(shù)設(shè)置如下圖所示。 任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè)任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè) 把光標(biāo)放在表格zbj第4行中，選擇“插入”“數(shù)據(jù)對(duì)象”“插入記錄”“插入記錄表單向?qū)А辈藛雾?xiàng)，向表rev

47、ertArtical中添加記錄。移除“表單字段”中ip和reback_date（因?yàn)樵跀?shù)據(jù)庫(kù)此為自動(dòng)填充）。 選中表單列表中的reback_article_code，把“顯示為：”改為隱藏域，單擊“默認(rèn)值”右邊的按鈕，打開(kāi)“動(dòng)態(tài)數(shù)據(jù)”對(duì)話框，選中記錄集rsforumdetail中的id作為默認(rèn)值，單擊“確定”按鈕。 選中ip，把“顯示為”改為隱藏域，設(shè)置默認(rèn)值為：。選中reback_sex，“顯示為”改為：?jiǎn)芜x按鈕組，并添加男、女兩個(gè)選項(xiàng)。任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè) 把表單字段reback_writer、reback_content、reback_sex、reback_email、Reb

48、ack_header_image的標(biāo)簽依次改為：作者：、內(nèi)容：、性別：、電子郵箱：、頭像：。設(shè)置表單字段reback_writer的默認(rèn)值為“游客”。把表單字段reback_header_image的“顯示為”改為菜單，并設(shè)置菜單屬性為如下圖所示。任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè) 單擊“確定”按鈕，轉(zhuǎn)到設(shè)計(jì)視圖。 在reback_header_image列表框右邊插入一個(gè)圖像，顯示圖片：01.jpg，并為圖片標(biāo)記命名為：userimage。轉(zhuǎn)入代碼視圖，在代碼下添加一個(gè)客戶端函數(shù)，實(shí)現(xiàn)根據(jù)用戶在reback_header_image列表框中的選擇。/實(shí)現(xiàn)用戶頭像預(yù)覽function chang

49、euserimage()document.form1.userimage.src=document.form1.reback_header_image.value 選中reback_header_image列表框，展開(kāi)“行為”面板。任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè)在左邊的列表框中選擇“onChange”，右邊輸入changeuserimage()。 在“作者”行上邊插入一行，并把此行兩列合并，內(nèi)容左對(duì)齊，選擇“插入”“命名錨記”菜單項(xiàng)，插入一個(gè)錨點(diǎn)，名稱為rebackarti。在后邊輸入內(nèi)容：“回復(fù)：”，拖動(dòng)“綁定”面板中記錄集rsforumdetail的subject列到“回復(fù)：”的后邊，設(shè)

50、置文字“回復(fù)：”樣式為：titlefont。任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè) 4實(shí)現(xiàn)驗(yàn)證功能 本頁(yè)面同樣要求實(shí)現(xiàn)如下驗(yàn)證： （1）作者必須輸入。 （2）內(nèi)容必須輸入。 （3）電子郵箱輸入必須符合郵箱格式。 具體參照前面內(nèi)容。 進(jìn)一步設(shè)置回復(fù)帖子的網(wǎng)頁(yè)布局和樣式，最后保存頁(yè)面文件，完成回復(fù)帖子功能。 任務(wù)總結(jié)：通過(guò)完成本任務(wù)學(xué)習(xí)了記錄集的靈活運(yùn)用，使用重復(fù)區(qū)域工具， 使用主詳細(xì)頁(yè)集工具。任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè) 舉一反三： 完善本項(xiàng)目任務(wù)六舉一反三中的學(xué)生信息管理網(wǎng)站，在數(shù)據(jù)庫(kù)StuManage中創(chuàng)建成績(jī)表，包含字段：學(xué)號(hào)、課程名、成績(jī)。再創(chuàng)建兩個(gè)網(wǎng)頁(yè)，第一個(gè)網(wǎng)頁(yè)StuShowStuIn

51、fo.asp用于顯示學(xué)生的基本信息，在學(xué)生姓名上添加超級(jí)鏈接。單擊學(xué)生姓名顯示第二個(gè)網(wǎng)頁(yè)StuShowScore.asp，顯示選中學(xué)生的各門課成績(jī)信息。 啟發(fā)思路： 熟悉記錄集、動(dòng)態(tài)表格工具的使用，自己動(dòng)用研究轉(zhuǎn)到詳細(xì)頁(yè)工具的使用完成本任務(wù)。 學(xué)生分組協(xié)作完成任務(wù)。任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè)作業(yè)： 1. 完善本項(xiàng)目任務(wù)六舉一反三中的學(xué)生信息管理網(wǎng)站，創(chuàng)建兩個(gè)網(wǎng)頁(yè)，第一個(gè)網(wǎng)頁(yè)StuShowTitile.asp用于顯示學(xué)生的學(xué)號(hào)、姓名，在學(xué)生姓名上添加超級(jí)鏈接。單擊學(xué)生姓名顯示第二個(gè)網(wǎng)頁(yè)StuShowDetail.asp，顯示選中學(xué)生的詳細(xì)信息。 任務(wù)九 制作顯示帖子詳細(xì)信息網(wǎng)頁(yè)任務(wù)十 實(shí)現(xiàn)

52、發(fā)布帖子功能 任務(wù)分析： 論壇中的帖子是由用戶一條條發(fā)布的，這就需要帖子發(fā)布功能，本任務(wù)通過(guò)實(shí)現(xiàn)發(fā)布帖子功能，學(xué)習(xí)插入記錄表單向?qū)У裙ぞ叩撵`活運(yùn)用，Session對(duì)象的使用。 網(wǎng)頁(yè)效果如下： 任務(wù)描述：使用Dreamweaver工具創(chuàng)建網(wǎng)頁(yè)實(shí)現(xiàn)發(fā)布帖子功能。項(xiàng)目二 制作論壇網(wǎng)站 任務(wù)十 實(shí)現(xiàn)發(fā)布帖子功能任務(wù)實(shí)施： 1新建網(wǎng)頁(yè)并插入表格 通過(guò)模板forum創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)forumaddarticle.asp并保存。刪除可編輯區(qū)域中的內(nèi)容，并插入一個(gè)2行1列的表格faa，邊框粗細(xì)為0，單元格邊距為0，單元格間距為0，表格寬度為100%，表格背景為：#b5daec。設(shè)置表格第1行高為60，輸入內(nèi)容：發(fā)

53、布帖子，居中顯示，并對(duì)它使用樣式：bigtitle。 2添加表單 把光標(biāo)放在表格faa第2行，選擇“插入”“數(shù)據(jù)對(duì)象”“插入記錄”“插入記錄表單向?qū)А辈藛雾?xiàng)，向表forum中添加記錄。顯示“插入記錄表單”，“連接”選擇為：conn；“插入到表格”選擇為：dbo.forum；“插入后，轉(zhuǎn)到”文本框輸入任務(wù)十 實(shí)現(xiàn)發(fā)布帖子功能“forumindex.asp”；在表單字段中刪除ID、stroke、reback_num、write_date列（這些列內(nèi)容為自動(dòng)填充），把writer和ip列“顯示為”改為“隱藏域”，修改content列標(biāo)簽為“內(nèi)容：”、subject列標(biāo)簽為“主題：” 。 單擊“確定”

54、按鈕，在網(wǎng)頁(yè)上添加了表單元素。 3設(shè)置隱藏域 轉(zhuǎn)入代碼視圖，找到writer隱藏域標(biāo)記，設(shè)置value值為，找到ip隱藏域標(biāo)記，設(shè)置value值為。任務(wù)十 實(shí)現(xiàn)發(fā)布帖子功能 4實(shí)現(xiàn)驗(yàn)證功能 本頁(yè)面要求實(shí)現(xiàn)如下驗(yàn)證： （1）主題必須輸入。 （2）內(nèi)容必須輸入。 轉(zhuǎn)入代碼視圖，參照注冊(cè)網(wǎng)頁(yè)的創(chuàng)建，實(shí)現(xiàn)此功能。 5設(shè)置表格樣式 設(shè)置新添加的表格樣式，并添加一個(gè)重置按鈕。 根據(jù)論壇功能分析，只有注冊(cè)用戶登錄后才能發(fā)布帖子，現(xiàn)在設(shè)置用戶沒(méi)有登錄直接打開(kāi)發(fā)布帖子網(wǎng)頁(yè)時(shí)，會(huì)自動(dòng)轉(zhuǎn)到用戶登錄網(wǎng)頁(yè)。選擇“插入”“數(shù)據(jù)對(duì)象”“用戶身份驗(yàn)證”“限制對(duì)頁(yè)的訪問(wèn)”菜單項(xiàng)，顯示“限制對(duì)頁(yè)的訪問(wèn)”對(duì)話框，參數(shù)設(shè)置如下圖所示

55、。任務(wù)十 實(shí)現(xiàn)發(fā)布帖子功能單擊“確定”按鈕，保存網(wǎng)頁(yè)，完成發(fā)布帖子功能的實(shí)現(xiàn)。 任務(wù)總結(jié)：通過(guò)完成本任務(wù)學(xué)習(xí)了靈活運(yùn)用插入記錄表單向?qū)В珹SP內(nèi)置對(duì)象：Session，能對(duì)用戶錄入的數(shù)據(jù)按給定要求進(jìn)行驗(yàn)證。任務(wù)十 實(shí)現(xiàn)發(fā)布帖子功能 舉一反三： 利用所學(xué)知識(shí)，分析Dreamweaver中更新記錄的作用和用法。然后創(chuàng)建網(wǎng)頁(yè)UpdateTZ.ASP，實(shí)現(xiàn)更新帖子的功能。 啟發(fā)思路： 利用所學(xué)知識(shí)，分析Dreamweaver中更新記錄工具的作用和用法，然后完成任務(wù)。作業(yè)： 1. 利用所學(xué)知識(shí)，分析Dreamweaver中刪除記錄的作用和用法。然后創(chuàng)建網(wǎng)頁(yè)DeleteTZ.ASP，實(shí)現(xiàn)更新帖子的功能。

56、每個(gè)同學(xué)獨(dú)立完成任務(wù)。任務(wù)十 實(shí)現(xiàn)發(fā)布帖子功能任務(wù)十一 實(shí)現(xiàn)記錄點(diǎn)擊次數(shù)和回復(fù)次數(shù)功能 任務(wù)分析： 作為用戶和網(wǎng)站都希望知道那個(gè)帖子被瀏覽和被回復(fù)的次數(shù)多，或大多數(shù)用戶都關(guān)注那些內(nèi)容。本任務(wù)就是實(shí)現(xiàn)記錄某一帖子被瀏覽的次數(shù)和被其他用戶回復(fù)信息的次數(shù)。 任務(wù)描述：實(shí)現(xiàn)記錄某一帖子被瀏覽的次數(shù)和被其他用戶回復(fù)信息的次數(shù)。 項(xiàng)目二 制作論壇網(wǎng)站 任務(wù)實(shí)施： 1實(shí)現(xiàn)記錄某一帖子被瀏覽的次數(shù) （1）創(chuàng)建存儲(chǔ)過(guò)程 在數(shù)據(jù)庫(kù)forumdata中創(chuàng)建存儲(chǔ)過(guò)程queryforumdetail，實(shí)現(xiàn)記錄某一帖子被點(diǎn)擊的次數(shù)的功能。代碼如下：CREATE PROCEDURE queryforumdetail (fi

57、d int) ASupdate forum set stroke=stroke+1 where id=fidselect id,writer,content,subject,write_date,email,header_image from forum where id=fidGO任務(wù)十一 實(shí)現(xiàn)記錄點(diǎn)擊次數(shù)和回復(fù)次數(shù)功能 （2）修改頁(yè)面代碼 打開(kāi)動(dòng)態(tài)網(wǎng)頁(yè)forumindex.asp，轉(zhuǎn)到代碼視圖，通過(guò)“編輯”菜單中的“查找和替換”功能找到下面代碼：rsforumdetail.Source = SELECT subject, content, write_date, id, writer, E

58、mail, header_image FROM dbo.vi_forum WHERE id = + Replace(rsforumdetail_MMColParam, , ) + 然后改為下面代碼：rsforumdetail.Source = dbo.queryforumdetail & Replace(rsforumdetail_MMColParam, , )任務(wù)十一 實(shí)現(xiàn)記錄點(diǎn)擊次數(shù)和回復(fù)次數(shù)功能 2實(shí)現(xiàn)記錄某一帖子被回復(fù)了多少次（1）創(chuàng)建存儲(chǔ)過(guò)程在數(shù)據(jù)庫(kù)forumdata中創(chuàng)建存儲(chǔ)過(guò)程addrebackartical，實(shí)現(xiàn)記錄某一帖子被回復(fù)了多少次的功能。代碼如下：CREATE PROC

59、EDURE addrebackartical (reback_writer varchar(30),reback_content varchar(2000),reback_article_code int,ip char(15),reback_sex char(2),reback_email varchar(30),reback_header_image varchar(50)AS任務(wù)十一 實(shí)現(xiàn)記錄點(diǎn)擊次數(shù)和回復(fù)次數(shù)功能 -實(shí)現(xiàn)添加回復(fù)帖子內(nèi)容insert into dbo.revertArtical (reback_writer,reback_article_code,ip,reback_sex,reback_email,reback_header_image,reback_content) values(reback_writer,reback_article_code,ip,reback_sex,reback_email,reback_header_image,reback_content)-更新帖子回復(fù)次數(shù)declare rebackco intselect rebackco=count(*) from revertArtical where reback_article_code=reback_article_codeupdate forum set rebac