網站建設與維護課件項目二

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

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

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

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

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

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

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

8、writervarchar500作者contentvarchar20000內容strokeint40(0)點擊次數reback_numint40(0)回復次數subjectvarchar1000標題write_datedatetime83(getdate()發(fā)帖日期Ipchar200發(fā)帖人ip地址任務二 數據庫設計 回復帖子信息表revertArtical列名標識主鍵類型長度小數位數允許空默認值字段說明idint40回復帖子編號reback_writervarchar500(作者)reback_contentvarchar20000回復內容reback_datedatetime83(getda

9、te()回復日期reback_article_codeint40回復日期編號ipchar150回復人IP地址reback_sexchar20性別reback_emailvarchar500郵件reback_header_imagevarchar500頭像任務二 數據庫設計 用戶頭像信息表Userimage字段名標識主鍵類型長度小數位數允許空默認值字段說明imageipint40頭像編號imagenamevarchar500頭像名imagepathvarchar500頭像地址任務二 數據庫設計 創(chuàng)建視圖vi_forum，查詢帖子的詳細信息。代碼如下：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任務二 數據庫設計 任務總結：通過完成本任務學習了創(chuàng)建數據庫，創(chuàng)建表，創(chuàng)建視圖。 2.創(chuàng)建數據庫 （1）啟動Sql Server軟件。 （2）按以上分

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

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

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

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

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

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

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

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

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

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

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

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

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

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

25、ename、imagepath兩列，用于在用戶注冊時讓用戶選擇頭像。如下圖所示。任務六 制作用戶注冊界面 把光標放入表格fau中的第2行，選擇“插入”“數據對象”“插入記錄”“插入記錄表單向導”菜單項，顯示“插入記錄表單”，“連接”選擇為：conn；“插入到表格”選擇為：dbo.RegUser；“插入后，轉到”文本框輸入“forumlogin.asp”；在表單字段中刪除ID列；選中Password列，“顯示為”改為“密碼字段”；選中Sex列，“顯示為”改為“單選按鈕組”，單擊“單選按鈕組屬性”按鈕，打開“單選按鈕組”屬性對話框，添加選項：男和女。 把表單字段中header_image列“顯示為

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

43、容左對齊，把綁定面板中記錄集rsforumdetail下的content拖動進來。設置表格ng第3行高8，兩列單元格背景色為：#b5daec。 3顯示帖子回復信息 建立記錄集rsrebackinfo查詢對此帖子的回復信息，查詢revertArtical表中字段：id，reback_writer，reback_content，reback_date，reback_article_code，reback_email，reback_header_image，篩選為：reback_article_code、=、URL參數、id。 任務九 制作顯示帖子詳細信息網頁 設置表格ng第4行高130，第1列背景

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

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

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

47、ertArtical中添加記錄。移除“表單字段”中ip和reback_date（因為在數據庫此為自動填充）。 選中表單列表中的reback_article_code，把“顯示為：”改為隱藏域，單擊“默認值”右邊的按鈕，打開“動態(tài)數據”對話框，選中記錄集rsforumdetail中的id作為默認值，單擊“確定”按鈕。 選中ip，把“顯示為”改為隱藏域，設置默認值為：。選中reback_sex，“顯示為”改為：單選按鈕組，并添加男、女兩個選項。任務九 制作顯示帖子詳細信息網頁 把表單字段reback_writer、reback_content、reback_sex、reback_email、Reb

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

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

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

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

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

53、布帖子，居中顯示，并對它使用樣式：bigtitle。 2添加表單 把光標放在表格faa第2行，選擇“插入”“數據對象”“插入記錄”“插入記錄表單向導”菜單項，向表forum中添加記錄。顯示“插入記錄表單”，“連接”選擇為：conn；“插入到表格”選擇為：dbo.forum；“插入后，轉到”文本框輸入任務十 實現發(fā)布帖子功能“forumindex.asp”；在表單字段中刪除ID、stroke、reback_num、write_date列（這些列內容為自動填充），把writer和ip列“顯示為”改為“隱藏域”，修改content列標簽為“內容：”、subject列標簽為“主題：” 。 單擊“確定”

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

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

56、每個同學獨立完成任務。任務十 實現發(fā)布帖子功能任務十一 實現記錄點擊次數和回復次數功能 任務分析： 作為用戶和網站都希望知道那個帖子被瀏覽和被回復的次數多，或大多數用戶都關注那些內容。本任務就是實現記錄某一帖子被瀏覽的次數和被其他用戶回復信息的次數。 任務描述：實現記錄某一帖子被瀏覽的次數和被其他用戶回復信息的次數。 項目二 制作論壇網站 任務實施： 1實現記錄某一帖子被瀏覽的次數 （1）創(chuàng)建存儲過程 在數據庫forumdata中創(chuàng)建存儲過程queryforumdetail，實現記錄某一帖子被點擊的次數的功能。代碼如下：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任務十一 實現記錄點擊次數和回復次數功能 （2）修改頁面代碼 打開動態(tài)網頁forumindex.asp，轉到代碼視圖，通過“編輯”菜單中的“查找和替換”功能找到下面代碼：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, , )任務十一 實現記錄點擊次數和回復次數功能 2實現記錄某一帖子被回復了多少次（1）創(chuàng)建存儲過程在數據庫forumdata中創(chuàng)建存儲過程addrebackartical，實現記錄某一帖子被回復了多少次的功能。代碼如下：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任務十一 實現記錄點擊次數和回復次數功能 -實現添加回復帖子內容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)-更新帖子回復次數declare rebackco intselect rebackco=count(*) from revertArtical where reback_article_code=reback_article_codeupdate forum set rebac