項(xiàng)目三企業(yè)網(wǎng)站任務(wù)八制作【管理首頁】頁面任務(wù)九制作【后臺(tái)登錄】頁面任務(wù)十制作【新聞添加】頁面任務(wù)十一制作【新聞列表】頁面任務(wù)十二制作【新聞修改】頁面任務(wù)十三制作【新聞刪除】頁面任務(wù)十四制作【企業(yè)新聞】頁面任務(wù)十五制作【企業(yè)新聞搜索】頁面任務(wù)十六完善【企業(yè)網(wǎng)站】首頁任務(wù)十七企業(yè)網(wǎng)站發(fā)布任務(wù)八制作【管理首頁】頁面

框架的作用是將網(wǎng)頁頁面劃分為多個(gè)相對(duì)獨(dú)立的區(qū)域，每個(gè)區(qū)域是一個(gè)獨(dú)立的頁面，從而達(dá)到將幾個(gè)獨(dú)立頁面同時(shí)顯示在瀏覽器中的效果。

框架(Frames)技術(shù)由框架集(Frameset)和框架(Frame)兩部分組成?？蚣芗强蚣艿募?，它定義了各框架的結(jié)構(gòu)、數(shù)量、大小尺寸、裝入框架中的HTML文件名和路徑等屬性?？蚣芗⒉辉跒g覽器中顯示，只是存儲(chǔ)所屬框架的有關(guān)信息?？蚣芗械娜靠蚣芪募?gòu)成一個(gè)網(wǎng)頁頁面?？蚣苁强蚣芗慕M成元素。一、創(chuàng)建框架集

(一)自己設(shè)計(jì)框架集

自己設(shè)計(jì)框架集的操作步驟如下：

(1)新建一個(gè)HTML空白文檔。

(2)單擊【查看】→【可視化助理】→【框架邊框】菜單項(xiàng)，將框架頁的邊框顯示出來。這時(shí)在網(wǎng)頁文檔四周將出現(xiàn)邊框，如圖3-8-1所示。

(3)將鼠標(biāo)指針置于框架邊框上，當(dāng)鼠標(biāo)指針變?yōu)闀r(shí)，將邊框拖動(dòng)到適當(dāng)位置，就可在頁面中創(chuàng)建出框架結(jié)構(gòu)。如圖3-8-2所示，在頁面中拖動(dòng)出了四個(gè)部分的框架效果。圖3-8-1圖3-8-2

(二)創(chuàng)建預(yù)定義框架集

創(chuàng)建預(yù)定義框架集的操作步驟如下：

(1)新建一個(gè)HTML空白文檔。

(2)將光標(biāo)定位在網(wǎng)頁文檔中，單擊【插入】面板【布局】選項(xiàng)卡框架視圖按鈕右側(cè)的下拉箭頭，在打開的下拉列表中預(yù)定義了13種框架類型，如圖3-8-3所示，單擊選擇一種框架類型，即可在網(wǎng)頁文檔中創(chuàng)建框架集。圖3-8-3

三、框架的編輯

(一)選擇框架與框架集

框架和框架集都是獨(dú)立的HTML文件。要修改框架或框架集,必須首先選中框架或框架集。選中框架和框架集的方法很多。

◆在【框架】面板中單擊要選定的框架區(qū)域,，即可選中該框架。

◆在頁面窗口中，按住Alt鍵的同時(shí)，用鼠標(biāo)單擊框架區(qū)域，即可選中該框架。

◆在【框架】面板中單擊環(huán)繞框架的邊框，即可選中框架集。

◆在頁面窗口中，將鼠標(biāo)指針置于頁面邊框上，當(dāng)鼠標(biāo)指針變?yōu)闀r(shí)，左鍵單擊，即可選中框架集。

(二)拆分框架

插入框架之后，可利用拆分框架的方法調(diào)整框架的結(jié)構(gòu)。方法如下：

(1)選中框架，按住Alt鍵的同時(shí)，拖動(dòng)框架邊框，可將框架縱向或橫向劃分。

(2)在需要拆分的框架內(nèi)單擊，選擇【修改】菜單中的【框架頁】選項(xiàng)，從【拆分左框架】、【拆分右框架】、【拆分上框架】、【拆分下框架】四個(gè)選項(xiàng)中選擇一項(xiàng)。

(三)刪除框架

刪除框架是拆分框架的逆操作。刪除框架時(shí)，可拖動(dòng)框架邊框離開頁面或拖動(dòng)到其他框架的邊框上。

(四)設(shè)置框架與框架集的屬性

框架和框架集均有對(duì)應(yīng)的【屬性】面板?？蚣軐傩詻Q定了該框架的名稱、源文件名稱與路徑、邊界大小、框架邊框的顯示等。

1.框架集屬性

框架集屬性控制著框架的維數(shù)及框架之間邊框的顏色和寬度。選中頁面中的框架集，其【屬性】面板如圖3-8-5所示。圖3-8-5

2.框架屬性

選中頁面中的某個(gè)框架，其【屬性】面板如圖3-8-6所示。圖3-8-6

(五)設(shè)置框架的背景顏色

將光標(biāo)定位在需要設(shè)置背景顏色的框架內(nèi)，單擊【屬性】面板上的頁面屬性視圖按鈕，在打開的對(duì)話框中，設(shè)置【背景顏色】，即為框架的背景顏色。

(六)設(shè)置框架集的標(biāo)題

設(shè)置框架集標(biāo)題的操作步如下：

(1)選中框架集。

(2)執(zhí)行【修改】→【頁面屬性】菜單命令。

(3)在打開的對(duì)話框中選擇【標(biāo)題/編碼】分類，在該分類下的【標(biāo)題】文本框中輸入框架集的名稱。四、框架和框架集的保存

框架結(jié)構(gòu)的網(wǎng)頁制作結(jié)束后，可以分別保存每個(gè)框架文件，也可單獨(dú)保存框架集文件，還可以將整個(gè)框架集與它的各個(gè)框架文件一起保存。

使用DreamWeaver創(chuàng)建框架時(shí)，每個(gè)框架文件都有一個(gè)暫時(shí)的文件名。例如，UntitledFrameset-1是框架集的文件名；UntitledFrame-1及UntitledFrame-2等是框架的文件名。

(三)保存框架集中的所有文件

執(zhí)行【文件】→【保存全部】菜單命令，將依次提示需要保存的內(nèi)容，首先保存的是框架集文件，然后是其他框架文件。通常，首次創(chuàng)建的框架集和框架文件通過該方法進(jìn)行保存。

實(shí)施步驟

一、創(chuàng)建框架集和框架

創(chuàng)建框架集和框架的具體操作如下：

(1)將設(shè)計(jì)好的【企業(yè)新聞】管理頁面用到的圖片文件夾images拷貝到D:\cweb\admin下。(該文件夾在隨書光盤中)

(2)啟動(dòng)DreamWeaverCS3軟件，導(dǎo)入企業(yè)網(wǎng)站站點(diǎn)。

(3)執(zhí)行【文件】→【新建】菜單命令。在打開的【新建文檔】對(duì)話框中，選擇【示例中的頁】→【框架集】→【上方固定，左側(cè)嵌套】，如圖3-8-7所示。圖3-8-7

(4)單擊【創(chuàng)建】按鈕，彈出【框架標(biāo)簽輔助功能屬性】對(duì)話框，如圖3-8-8所示，單擊該對(duì)話框的【確定】按鈕,將在頁面中創(chuàng)建框架集和框架。(該對(duì)話框?yàn)槊總€(gè)框架默認(rèn)定義了一個(gè)標(biāo)題，可通過該對(duì)話框的【標(biāo)題】文本框?yàn)榭蚣芨囊粋€(gè)新的標(biāo)題。)

操作技巧當(dāng)在網(wǎng)頁文檔中插入【表單對(duì)象】、【框架】、【媒體】和【圖像】時(shí)，均彈出【…標(biāo)簽輔助功能屬性】對(duì)話框。如不希望彈出該提示對(duì)話框，可執(zhí)行【編輯】→【首選參數(shù)】菜單命令，在【輔助功能】窗口下，取消勾選各復(fù)選框，如圖3-8-9所示。圖3-8-8圖3-8-9二、保存框架集和框架文件

具體如下：執(zhí)行【文件】→【保存全部】菜單命令，在打開的對(duì)話框中選擇保存的位置為D:\cweb\admin文件夾，然后依次保存：框架集文件名為index.asp，主框架文件名為main.asp，左框架文件名為left.asp，上框架文件名為top.asp。每保存一個(gè)文件，單擊一次【保存】按鈕，直到全部保存完畢為止。三、設(shè)置框架集和框架屬性

設(shè)置框架集和框架屬性的具體操作如下：

(1)執(zhí)行【窗口】→【框架】菜單命令，打開【框架】面板，單擊環(huán)繞框架的邊框，即可選中框架集，如圖3-8-10所示。在框架集【屬性】面板中設(shè)置【邊框】為默認(rèn)，【邊框?qū)挾取繛?(即在瀏覽器中不顯示所有框架的邊框)，【行】的值為60，【單位】為像素。

(2)單擊【框架】面板上環(huán)繞下部框架的邊框，如圖3-8-11所示。在框架集【屬性】面板中設(shè)置【列】的值為170，【單位】為像素。圖3-8-10圖3-8-11

(3)單擊【框架】面板的mainFrame區(qū)域，即可選中主框架，如圖3-8-12所示。在【屬性】面板中設(shè)置框架名稱為main。

(4)按照如上方法，依次設(shè)置左框架leftFrame的框架名稱為left，上框架topFrame的框架名稱為top。設(shè)置后，【框架】面板如圖3-8-13所示。圖3-8-12圖3-8-13四、編輯框架集和各框架

(一)編輯【框架集】

具體操作：單擊【框架】面板中環(huán)繞框架的外邊框，即選中【框架集】文檔，在該文檔窗口的【標(biāo)題】文本框中輸入文本【新聞管理系統(tǒng)】，如視圖按鈕所示。

(3)將光標(biāo)定位在該表格的第一個(gè)單元格中，在【屬性】面板中設(shè)置【寬】為260，【高】為56。

(4)在該單元格中插入圖片，圖片位于D:\cweb\admin\images\top_left.jpg。

(5)將光標(biāo)定位在該表格的第三個(gè)單元格中，在【屬性】面板中設(shè)置【寬】為268，【高】為56。

(6)在該單元格中插入圖片，圖片位于D:\cweb\admin\images\top_right.jpg。

(7)將光標(biāo)定位在該表格的第二個(gè)單元格中，在【屬性】面板中設(shè)置【水平】為右對(duì)齊，然后在該單元格中輸入【退出登錄】文本。

(8)選中該文本，在【屬性】面板中單擊粗體視圖按鈕，在文本顏色按鈕右側(cè)的文本框中輸入#FFFFFF，在【鏈接】文本框中輸入【javascript:if(confirm('確定要退出？'))top.location='login.asp';】，如圖3-8-14所示。圖3-8-14操作技巧

【javascript:if(confirm(‘確定要退出？’))top.location=‘url’;】的含義為：當(dāng)單擊使用該語句作為鏈接地址的網(wǎng)頁對(duì)象時(shí)，會(huì)彈出【確定要退出??】對(duì)話框，單擊該對(duì)話框中的【確定】按鈕，網(wǎng)頁將自動(dòng)跳轉(zhuǎn)到url所指的頁面中，單擊【取消】按鈕，網(wǎng)頁將不做任何變化。其中，top表示窗口打開目標(biāo)為_top，即在頂端的瀏覽器窗口中顯示鏈接的文檔。

(9)至此，【上框架top】編輯完畢，如圖3-8-15所示?？赏ㄟ^按Ctrl?+?S組合鍵將top頁面保存。圖3-8-15圖3-8-16圖3-8-17圖3-8-19

(10)執(zhí)行【插入記錄】→【布局對(duì)象】→【APDiv】菜單命令，在頁面中插入一個(gè)層對(duì)象。選中該層，在屬性面板中設(shè)置【左】、【上】均為空，【寬】、【高】為165px，【可見性】為hidden，如圖3-8-20所示。圖3-8-20

(11)將光標(biāo)定位在該層中，插入一個(gè)3行1列寬為165像素的表格。

(12)用鼠標(biāo)左鍵拖選中該表格的三個(gè)行,如圖3-8-21所示,在【屬性】面板中設(shè)置【高】為55，設(shè)置后如圖3-8-22所示。

(13)將光標(biāo)定位在該表格第二行內(nèi)，插入圖片D:\cweb\admin\images\bt_03.gif。

(14)再將光標(biāo)定位在該表格第三行內(nèi)，插入圖片D:\cweb\admin\images\bt_04.gif。

(15)按照如上設(shè)置熱點(diǎn)鏈接的方法，依次為這兩幅圖片設(shè)置矩形熱區(qū)，并在【屬性】面板中設(shè)置【鏈接】分別為D:admin_addnews.asp和D:admin_newslist.asp，在【目標(biāo)】下拉列表中均選擇【main】。設(shè)置后的效果如圖3-8-23所示。圖3-8-21圖3-8-22

(16)單擊選中圖3-8-23中圖片上的熱區(qū)，按Shift?+?F4組合鍵，打開【行為】面板，單擊該面板上的【添加行為】按鈕，在打開的下拉列表中選擇【顯示-隱藏元素】選項(xiàng)，如圖3-8-24所示。

(17)打開【顯示-隱藏元素】對(duì)話框，選中該對(duì)話框中的【div“apDiv1”】，單擊【顯示】按鈕，則在【div“apDiv1”】右側(cè)出現(xiàn)【(顯示)】，如圖3-8-25所示。

(18)單擊【確定】按鈕，返回【行為】面板，如圖3-8-26所示。圖3-8-23圖3-8-24圖3-8-25圖3-8-26

(19)單擊頁面中的層錨點(diǎn)圖標(biāo)，將層選中，然后單擊【行為】面板上的【添加行為】按鈕，在打開的下拉列表中選擇【顯示-隱藏元素】選項(xiàng)，如圖3-8-27所示。

(20)打開【顯示-隱藏元素】對(duì)話框，選中該對(duì)話框中的【div“apDiv1”】，單擊【顯示】按鈕，則在【div“apDiv1”】右側(cè)出現(xiàn)【(顯示)】。

(21)單擊【確定】按鈕，返回到【行為】面板，單擊【行為】面板【onClick】所在的下拉列表，選擇【onMouseOver】選項(xiàng)，如圖3-8-28所示。圖3-8-27圖3-8-28

(22)在【行為】面板中再次單擊【添加行為】按鈕，在打開的下拉列表中選擇【顯示-隱藏元素】選項(xiàng)。在打開的【顯示-隱藏元素】對(duì)話框中，選擇【div“apDiv1”】，單擊【隱藏】按鈕，則顯示為【div“apDiv1”(隱藏)】，如圖3-8-29所示。

圖3-8-29

(23)單擊【確定】按鈕，返回到【行為】面板，單擊【行為】面板【onClick】所在的下拉列表，選擇【onMouseOut】選項(xiàng)。設(shè)置后的行為面板如圖3-8-30所示。

(24)在頁面窗口中，單擊【left】頁面的其他位置，層將隱藏起來。此時(shí)，在層錨點(diǎn)圖標(biāo)上按住鼠標(biāo)左鍵，將其拖動(dòng)到圖片所在行，釋放鼠標(biāo)，如圖3-8-31所示。

(25)至此，完成了【左框架left】頁面的編輯，如圖3-8-32所示?？赏ㄟ^按Ctrl?+?S組合鍵將【left】頁面保存。

以上制作步驟中的(10)～(24)步介紹了下拉菜單的制作方法。

(四)編輯【主框架main】

將光標(biāo)定位在【主框架main】內(nèi)，如圖3-8-33所示，插入表格、圖片和文本。用D:\cweb\admin\images\title_bg1.jpg該圖片作為【系統(tǒng)使用說明】文本所在行的背景圖，而圖片D:\cweb\admin\images\admin_p.gif用作頁面中插入的圖片?！颈砀瘛?、【圖片】、【文本】的插入與前面介紹的方法一樣，這里不再贅述。圖3-8-33

(五)預(yù)覽網(wǎng)頁

執(zhí)行【文件】→【保存全部】菜單命令，將前面所做的操作進(jìn)行保存。然后按F12鍵預(yù)覽網(wǎng)頁。網(wǎng)頁效果如圖3-8-34所示，單擊【新聞管理】圖片，在其下方將顯示【新聞添加】和【新聞列表】圖片，如圖3-8-35所示，鼠標(biāo)移開，網(wǎng)頁返回如圖3-8-34所示的狀態(tài)。圖3-8-34圖3-8-35任務(wù)九制作【后臺(tái)登錄】頁面

相關(guān)知識(shí)

一、網(wǎng)站安全機(jī)制

當(dāng)管理員進(jìn)入管理頁面進(jìn)行添加、刪除和修改時(shí)，就需要有一個(gè)安全機(jī)制來保證這些頁面是不能被其他人訪問的。這一安全機(jī)制就是限制用戶登錄。

限制用戶登錄的實(shí)現(xiàn)方法是：在數(shù)據(jù)庫中存儲(chǔ)管理員的用戶名和密碼，當(dāng)瀏覽者要訪問這些限制頁面時(shí)，系統(tǒng)會(huì)彈出一個(gè)登錄頁面，要求瀏覽者輸入用戶名和密碼，然后把瀏覽者輸入的數(shù)據(jù)與數(shù)據(jù)庫中的記錄進(jìn)行核對(duì)，若相符則允許進(jìn)入，否則不允許登錄該限制頁面。二、【用戶身份驗(yàn)證】菜單選項(xiàng)的介紹

在【服務(wù)器行為】面板中的【用戶身份驗(yàn)證】菜單中有四個(gè)選項(xiàng)：登錄用戶、限制對(duì)頁的訪問、注銷用戶、檢查新用戶名。

◆登錄用戶：主要用于制作登錄頁面，在登錄頁面中驗(yàn)證表單中輸入的用戶名和密碼是否和數(shù)據(jù)庫中的數(shù)據(jù)相匹配。

◆限制對(duì)頁的訪問：主要用于設(shè)置沒有經(jīng)過登錄驗(yàn)證時(shí)不能訪問的頁面，即用于禁止非授權(quán)用戶訪問的頁面，如后臺(tái)管理中的各頁面。

◆注銷用戶：它與登錄用戶是一個(gè)逆過程，主要用于注銷登錄用戶。當(dāng)管理員完成管理操作時(shí)，通常要執(zhí)行注銷用戶操作，退出后臺(tái)管理頁面?！魴z查新用戶名：主要用于驗(yàn)證在表單中新添加的內(nèi)容是否已在數(shù)據(jù)庫中存在。必須在執(zhí)行【插入記錄】操作之后，才可以執(zhí)行【檢查新用戶名】操作。如在制作注冊(cè)頁面時(shí)，可通過添加【檢查新用戶名】行為來驗(yàn)證用戶名是否重名注冊(cè)。

該任務(wù)主要介紹登錄用戶、限制對(duì)頁的訪問的操作方法，其詳細(xì)操作步驟在【實(shí)施步驟】中介紹。

注銷用戶和檢查新用戶名的操作本教材將不詳述，讀者可根據(jù)登錄用戶、限制對(duì)頁的訪問的介紹自行體會(huì)其用法。

實(shí)施步驟

一、制作【登錄】頁面

制作【登錄】頁面的具體操作步驟如下：

(1)啟動(dòng)DreamWeaverCS3軟件，導(dǎo)入企業(yè)網(wǎng)站站點(diǎn)。

(2)執(zhí)行【文件】→【新建】菜單命令，在打開的【新建文檔】對(duì)話框中依次選擇【空白頁】→【ASPVBScript】→【無】，然后單擊【創(chuàng)建】按鈕。

(3)在打開的網(wǎng)頁文檔窗口下，執(zhí)行【文件】→【保存】菜單命令，將其保存在D:\cweb\admin文件夾下，命名為login.asp。

(4)在文檔窗口中【工具欄】的【標(biāo)題】文本框中輸入【新聞管理系統(tǒng)登錄頁面】。

(5)在文檔窗口中單擊右鍵，在打開的快捷菜單中選擇【CSS樣式】→【附加樣式表】選項(xiàng)，在打開的【鏈接外部樣式表】對(duì)話框中單擊【瀏覽】按鈕，選擇D:\cweb\css\style.css，單擊【確定】按鈕，完成CSS樣式文件的鏈接。

(6)執(zhí)行【插入記錄】→【表格】菜單命令，插入一個(gè)1行1列、寬為100%的表格，選中該表格，在【屬性】面板中設(shè)置【背景顏色】為#002779。

(7)單擊【工具欄】中的【代碼】按鈕，將文檔窗口切換到【代碼視圖】窗口下，如圖3-9-1所示。

圖3-9-1

(8)在【<tablewidth=“100%”…】中添加【height=“100%”】語句，如圖3-9-2所示。

操作技巧表格的【屬性】面板沒有對(duì)高度的設(shè)置項(xiàng)，因此可通過【代碼視圖】窗口在表格代碼<table>中添加高度屬性，即height="高度值"。圖3-9-2

(9)將頁面切換回【設(shè)計(jì)視圖】，再將光標(biāo)定位在該表格中，在【屬性】面板中設(shè)置單元格【水平】為居中對(duì)齊，【垂直】為居中。

(10)在該表格中插入一個(gè)4行1列、寬為468像素的表格，選中該表格，在【屬性】面板中設(shè)置【背景顏色】為#FFFFFF。

(11)將光標(biāo)定位在該表格的第一行中，插入圖片D:\cweb\admin\images\login_1.jpg。

(12)將光標(biāo)定位在該表格的第二行中，插入圖片D:\cweb\admin\images\login_2.jpg。

(13)將光標(biāo)定位在該表格的第三行中，在【屬性】面板中設(shè)置【水平】為居中對(duì)齊，【背景圖像】為D:\cweb\admin\images\login_3.jpg。然后執(zhí)行【插入記錄】→【表單】→【表單】菜單命令，在該單元格中插入一個(gè)紅色虛線框的表單域。

(14)將光標(biāo)定位在該表單域中，插入一個(gè)3行2列、寬為70%的表格。按住鼠標(biāo)左鍵選中該表格第一列的三行單元格，在【屬性】面板中設(shè)置【水平】為居中對(duì)齊，【寬】為80，【高】為30，如圖3-9-3所示。

(15)按住鼠標(biāo)左鍵選中該表格第二列的前兩行單元格，在【屬性】面板中設(shè)置【水平】為左對(duì)齊。圖3-9-3圖3-9-4

(20)將光標(biāo)定位在該表格第三行中，執(zhí)行【插入記錄】→【表單】→【圖像域】命令，在彈出的對(duì)話框中選擇圖片為D:\cweb\admin\images\bt_login.gif。

(21)將光標(biāo)定位在外層表格第四行中，插入圖片D:\cweb\admin\images\login_4.jpg。

(22)至此，完成了登錄頁面的制作，如圖3-9-5所示。

(23)單擊【工具欄】中的【代碼】按鈕，將文檔窗口切換到【代碼視圖】窗口下，刪除代碼行(該行【代碼視圖】窗口的最上端)：

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0

Transitional//EN”“/TR/xhtml1/DTD/xhtml1-

transitional.dtd”>

讀者可通過瀏覽該頁面刪除前和刪除后的效果來體會(huì)刪除該行代碼的作用。圖3-9-5二、設(shè)置【登錄】頁面的驗(yàn)證功能

設(shè)置【登錄】頁面的驗(yàn)證功能的具體操作如下：

(1)在【login.asp】文檔窗口中，執(zhí)行【窗口】→【服務(wù)器行為】菜單命令，打開【服務(wù)器行為】面板。

(2)單擊【服務(wù)器行為】面板中的按鈕，如圖3-9-6所示，在打開的下拉菜單中選擇【用戶身份驗(yàn)證】→【登錄用戶】選項(xiàng)，如圖3-9-7所示。圖3-9-6圖3-9-7

(3)打開【登錄用戶】對(duì)話框，該對(duì)話框的前三項(xiàng)不用修改，DreamWeaver自動(dòng)將【login.asp】頁面中的表單元素顯示在相應(yīng)的下拉列表框中。(如需要修改可通過下拉列表進(jìn)行選擇。在【使用連接驗(yàn)證】下拉列表中選擇conn選項(xiàng)。)如圖3-9-7所示。

(4)在【表格】下拉列表中選擇admin，【用戶名列】下拉列表中選擇username，【密碼列】下拉列表中選擇password，【如果登錄成功，轉(zhuǎn)到】文本框中輸入index.asp，或單擊右側(cè)的【瀏覽】按鈕選擇D:\cweb\admin\index.asp，【如果登錄失敗，轉(zhuǎn)到】文本框中輸入login.asp，如圖3-9-8所示。單擊【確定】按鈕，完成【登錄用戶】的設(shè)置。圖3-9-8

(5)此時(shí)，在【服務(wù)器行為】面板上顯示出【登錄用戶】項(xiàng)，如圖3-9-9所示。

(6)按Ctrl?+?S組合鍵保存該文檔，按F12鍵預(yù)覽網(wǎng)頁效果。圖3-9-9三、設(shè)置【后臺(tái)】頁面的訪問權(quán)限

設(shè)置【后臺(tái)】頁面的訪問權(quán)限的具體操作如下：

(1)在文件面板中雙擊鼠標(biāo)左鍵，打開admin文件夾下的index.asp文件。

(2)單擊【服務(wù)器行為】面板中的視圖按鈕，在打開的下拉菜單中選擇【用戶身份驗(yàn)證】→【限制對(duì)頁的訪問】選項(xiàng)。

(3)打開【限制對(duì)頁的訪問】對(duì)話框,在【基于以下內(nèi)容進(jìn)行限制】中選擇【用戶名和密碼】單選按鈕,在【如果訪問被拒絕，則轉(zhuǎn)到】文本框中輸入login.asp，或者單擊右側(cè)的【瀏覽】按鈕,選擇D:\cweb\admin\login.asp,如圖3-9-10所示。圖3-9-10

(4)單擊【確定】按鈕，完成【限制對(duì)頁的訪問】設(shè)置。此時(shí)，在【服務(wù)器行為】面板中顯示出【限制對(duì)頁的訪問】項(xiàng)，如圖3-9-11所示。

(5)按Ctrl?+?S組合鍵將該文檔保存。至此，index.asp頁面的訪問權(quán)限設(shè)置完畢。

(6)按F12鍵，彈出【DreamWeaverCS3】提示框，如圖3-9-12所示。如果單擊【否】，將不預(yù)覽；如果單擊【是】，則打開index.asp文件下載窗口。因此框架集動(dòng)態(tài)頁面不能被直接預(yù)覽。圖3-9-11圖3-9-12

(7)啟動(dòng)瀏覽器，在地址欄中輸入http://localhost/cweb/admin/index.asp，按Enter鍵，可以看到瀏覽器中并沒有顯示index.asp頁面，而顯示login.asp頁面，在login.asp頁面中輸入【用戶名】為myname，【密碼】為111111，單擊【登錄】按鈕，即可進(jìn)入index.asp頁面。如果用戶名和密碼輸入其他數(shù)據(jù)，則頁面仍停留在login.asp登錄頁面不動(dòng)。任務(wù)十制作【新聞添加】頁面

相關(guān)知識(shí)

一、【插入記錄】的應(yīng)用

使用【插入記錄】的操作步驟如下：

(1)制作表單頁面，添加所需的表單對(duì)象(如添加兩個(gè)文本字段，分別命名為name和pwd)。

(2)在【服務(wù)器行為】面板中單擊視圖按鈕，在打開的下拉菜單中即可看到【插入記錄】選項(xiàng)。單擊【插入記錄】選項(xiàng)，打開【插入記錄】對(duì)話框，如圖3-10-1所示。圖3-10-1操作技巧在網(wǎng)頁中如果沒有添加任何表單對(duì)象，直接執(zhí)行【服務(wù)器行為】→【插入記錄】選項(xiàng)時(shí)，DreamWeaverCS3會(huì)彈出警告對(duì)話框，如圖3-10-2所示。圖3-10-2

實(shí)施步驟

一、制作【添加新聞】頁面

制作【添加新聞】頁面的具體操作如下：

(1)啟動(dòng)DreamWeaverCS3軟件，導(dǎo)入企業(yè)網(wǎng)站站點(diǎn)。

(2)在【文件】面板中的admin文件夾上右鍵單擊，在彈出的快捷菜單中選擇【新建文件】選項(xiàng)，如圖3-10-3所示。

(3)將新建的文件命名為admin_addnews.asp，如圖3-10-4所示，然后左鍵雙擊將其打開。圖3-10-3圖3-10-4

(4)在打開的文檔窗口的【標(biāo)題】文本框中輸入【新聞管理系統(tǒng)-新聞添加】，如圖3-10-5所示。圖3-10-5圖3-10-6圖3-10-7圖3-10-8圖3-10-9

(17)將光標(biāo)定位在隱藏域右側(cè)，單擊【插入】面板中【表單】選項(xiàng)卡下的視圖按鈕，選中該按鈕，在【屬性】面板中設(shè)置值為添加，【動(dòng)作】為提交表單。然后在該按鈕后再添加一個(gè)按鈕，選中該按鈕，在【屬性】面板中設(shè)置值為取消，【動(dòng)作】為重設(shè)表單。

(18)按Ctrl?+?S組合鍵保存該文檔。至此，完成了【新聞添加】頁面的制作，如圖3-10-10所示。圖3-10-10圖3-10-11圖3-10-12

(6)參照上一步的操作方法，依次將【表單元素】文本區(qū)域中其他行的元素與【列】下拉列表中的字段一一對(duì)應(yīng)，設(shè)置后的效果如圖3-10-13所示。

(7)單擊【確定】按鈕，完成【插入記錄】的設(shè)置。按Ctrl?+?S組合鍵保存該文檔。圖3-10-13三、為admin_addnews.asp頁面添加訪問權(quán)限

由于【新聞添加】頁面只有管理員可以訪問，因此需要為該頁設(shè)置訪問權(quán)限。具體操作步驟參照任務(wù)九實(shí)施步驟中的【設(shè)置后臺(tái)頁面的訪問權(quán)限】的操作，這里不再贅述。

操作技巧添加訪問權(quán)限的頁面，只有在執(zhí)行l(wèi)ogin.asp登錄頁面，輸入正確的用戶名和密碼后，才可正常訪問。當(dāng)瀏覽器窗口關(guān)閉，再次打開具有訪問權(quán)限的頁面時(shí)，仍需再次登錄。四、制作addsuccess.asp頁面

addsuccess.asp頁面用于顯示添加新聞后的信息提示。新建一個(gè)ASPVBScript文檔，在文檔窗口中輸入三行文本【新聞添加成功】、【繼續(xù)添加】、【返回管理首頁】。選中文本【繼續(xù)添加】，在【屬性】面板【鏈接】文本框中輸入admin_addnews.asp，選中文本【返回管理首頁】，在【屬性】面板【鏈接】文本框中輸入main.asp。頁面如圖3-10-14所示。

至此，新聞添加功能全部制作完成，可在瀏覽器中預(yù)覽admin_addnews.asp頁面，并添加新聞，測試是否能實(shí)現(xiàn)添加功能。添加的新聞內(nèi)容的顯示，在任務(wù)十一中介紹。圖3-10-14

作業(yè)

1.為addsuccess.asp頁面添加訪問權(quán)限。

2.制作【添加管理員】頁面，并實(shí)現(xiàn)管理員用戶名和密碼的添加，如圖3-10-15所示。圖3-10-15

任務(wù)十一制作【新聞列表】頁面

相關(guān)知識(shí)

一、【記錄集】的應(yīng)用

(2)打開的【記錄集】對(duì)話框，如圖3-11-1所示。圖3-11-1

(二)【記錄集】的應(yīng)用

記錄集創(chuàng)建完畢，可在【綁定】面板中展開記錄集的樹形結(jié)構(gòu)，按住鼠標(biāo)左鍵在樹形結(jié)構(gòu)中選擇要在頁面中顯示記錄的字段名，將其拖動(dòng)到文檔窗口需要顯示記錄的位置，如圖3-11-3所示。使用這種方法僅可以實(shí)現(xiàn)將記錄集中的一條記錄插入到頁面中。如果要實(shí)現(xiàn)將多行記錄顯示在頁面中，可使用【重復(fù)區(qū)域】服務(wù)器行為來完成。圖3-11-3二、【重復(fù)區(qū)域】的應(yīng)用

(一)【重復(fù)區(qū)域】的創(chuàng)建步驟

具體如下：

(1)先創(chuàng)建一個(gè)記錄集。創(chuàng)建記錄集后，方可使用【重復(fù)區(qū)域】將數(shù)據(jù)庫表中的記錄顯示在頁面中。如果在未創(chuàng)建記錄集的情況下，執(zhí)行【重復(fù)區(qū)域】選項(xiàng)，DreamWeaverCS3將彈出提示對(duì)話框，如圖3-11-4所示。由該提示可以了解在使用【重復(fù)區(qū)域】前需要?jiǎng)?chuàng)建一個(gè)記錄集。圖3-11-4

(2)在網(wǎng)頁文檔窗口中選擇包含動(dòng)態(tài)內(nèi)容的區(qū)域?？梢赃x定任意內(nèi)容，包括表格、表格行，甚至一段文本。通?！局貜?fù)區(qū)域】應(yīng)用在表格的行中。

(3)在【服務(wù)器行為】面板中單擊視圖按鈕，在打開的下拉菜單中選擇【重復(fù)區(qū)域】選項(xiàng)，即打開【重復(fù)區(qū)域】對(duì)話框，如圖3-11-5所示。

圖3-11-5在該對(duì)話框的【記錄集】下拉列表中選擇要使用的記錄集的名稱，【顯示】項(xiàng)用于設(shè)置每頁顯示的記錄數(shù)，如果選擇右側(cè)的第一個(gè)單選按鈕，則可在文本框中輸入具體的數(shù)值；如果選擇【所有記錄】單選按鈕，則將記錄集中的所有數(shù)據(jù)行全部在一個(gè)頁面中顯示出來。

(4)單擊【確定】按鈕，在文檔窗口的重復(fù)區(qū)域周圍會(huì)出現(xiàn)一個(gè)灰色的細(xì)輪廓，如圖3-11-6所示。圖3-11-6操作技巧如果要在文檔窗口中查看數(shù)據(jù)庫表中的具體數(shù)據(jù)，可執(zhí)行【查看】→【動(dòng)態(tài)數(shù)據(jù)】菜單命令，此時(shí)，重復(fù)區(qū)域周圍灰色輪廓消失，并將數(shù)據(jù)庫表中數(shù)據(jù)顯示出來，如圖3-11-7所示。圖3-11-7

(二)重復(fù)區(qū)域的修改

設(shè)置后的重復(fù)區(qū)域，如果要修改記錄集或每頁顯示的記錄條數(shù)，可使用如下兩種方法：

(1)在【服務(wù)器行為】面板中左鍵雙擊該重復(fù)區(qū)域選項(xiàng)，將打開如圖3-11-4所示的【重復(fù)區(qū)域】對(duì)話框，在該對(duì)話框中直接修改即可。

(2)在【服務(wù)器行為】面板中左鍵單擊選中該重復(fù)區(qū)域選項(xiàng)，然后在【屬性】面板中進(jìn)行相應(yīng)的修改，如圖3-11-8所示。圖3-11-8三、【記錄集導(dǎo)航條】的應(yīng)用

如果指定的每頁記錄數(shù)是有限的，并且所請(qǐng)求的記錄數(shù)可能超過此數(shù)目，則可通過添加記錄集導(dǎo)航條鏈接以使用戶能夠查看其他記錄。

記錄集導(dǎo)航條鏈接使用戶可以從一條記錄移到下一條，或者從一組記錄移到下一組。如設(shè)計(jì)了每次顯示10條記錄的頁面，可添加諸如【下一頁】或【上一頁】這類使用戶顯示后10條或前10條記錄的鏈接?？梢詣?chuàng)建四類瀏覽記錄集的導(dǎo)航鏈接：第一個(gè)、前一個(gè)、下一個(gè)和最后一個(gè)。在同一頁面中無法添加瀏覽另一個(gè)記錄集的鏈接。在將導(dǎo)航條插入到頁面之前，應(yīng)確保頁面包含要導(dǎo)航的記錄集和用于顯示記錄的頁面布局。

【記錄集導(dǎo)航條】的添加步驟如下：

(1)將光標(biāo)定位在網(wǎng)頁文檔中需要添加記錄集導(dǎo)航條鏈接的位置。

(2)執(zhí)行【插入記錄】→【數(shù)據(jù)對(duì)象】→【記錄集分頁】→【記錄集導(dǎo)航條】菜單命令，如圖3-11-9所示。圖3-11-9

(3)打開【記錄集導(dǎo)航條】對(duì)話框，如圖3-11-10所示。在該對(duì)話框的【記錄集】下拉列表中選擇用于顯示記錄的記錄集名，【顯示方式】項(xiàng)用于設(shè)置鏈接的顯示形式，包括文本和圖像兩種。圖3-11-10

(4)選擇后單擊【確定】按鈕，即可在頁面中添加【記錄集導(dǎo)航條】鏈接。如選擇【文本】單選按鈕，【記錄集導(dǎo)航條】鏈接如圖3-11-11所示。如選擇【圖像】單選按鈕，則添加該導(dǎo)航條鏈接的網(wǎng)頁文檔需先保存?！居涗浖瘜?dǎo)航條】鏈接如圖3-11-12所示。

圖3-11-11圖3-11-11圖3-11-12操作技巧

【記錄集導(dǎo)航條】鏈接中的文本或圖像均可修改。修改方法分別為：【文本的修改】可在頁面中選中文本，將其修改為自定義的文本，如【第一頁】改為【首頁】，【前一頁】改為【上一頁】；【圖像的修改】可在頁面中選中圖像，然后左鍵雙擊，打開【選擇圖像源文件】對(duì)話框，在該對(duì)話框中選擇想要替換的新圖像。四、創(chuàng)建含有URL參數(shù)的鏈接

通常，創(chuàng)建數(shù)據(jù)庫表中數(shù)據(jù)列表頁后，會(huì)在該頁上創(chuàng)建用來打開數(shù)據(jù)庫表中某一行詳細(xì)記錄頁的鏈接。詳細(xì)記錄頁將根據(jù)列表頁傳遞的記錄的ID(主鍵)在數(shù)據(jù)庫中查找具體的記錄，并顯示該記錄。其中傳遞記錄的ID使用URL參數(shù)來完成。

URL參數(shù)是追加到URL上的一個(gè)【名-值】對(duì)，可使用戶提供的信息從瀏覽器傳遞到服務(wù)器。參數(shù)以問號(hào)【?】開始，并采用name=value的方式。如果存在多個(gè)URL參數(shù)，則參數(shù)之間用【&】符隔開。如?name1=value1&name2=value2。

DreamWeaverCS3軟件中提供了設(shè)置參數(shù)傳遞的方法。在設(shè)置鏈接時(shí)，可通過【選擇文件】對(duì)話框的【參數(shù)】按鈕完成參數(shù)的設(shè)置。具體應(yīng)用在實(shí)施步驟中有詳細(xì)介紹。

實(shí)施步驟

一、【新聞列表】頁面的制作

制作【新聞列表】頁面的操作如下：

(1)啟動(dòng)DreamWeaverCS3軟件，導(dǎo)入企業(yè)網(wǎng)站站點(diǎn)。

(2)新建ASPVBScript頁面，命名為admin_newslist.asp，保存到D:\cweb\admin文件夾下。

(3)鏈接CSS樣式文件，并設(shè)置背景顏色為?#FFFFFF。

(4)在文檔窗口中右鍵單擊，選擇并打開快捷菜單中的【對(duì)齊】→【居中對(duì)齊】選項(xiàng)。

(5)在文檔窗口中連續(xù)按兩次Enter鍵，將光標(biāo)向下移動(dòng)兩行，輸入文本【新聞列表】，并在【屬性】面板中將其設(shè)置為粗體。

(6)單擊【插入】面板中【常用】選項(xiàng)卡下的表格視圖按鈕，在打開的【表格】對(duì)話框中設(shè)置【行數(shù)】為2，【列數(shù)】為5，【寬度】為700像素，【邊框粗細(xì)】為1，【單元格間距】為0，【單元格邊距】為4。

(7)單擊【確定】按鈕，即在文檔窗口中添加了一個(gè)2行5列的表格。選中該表格，在【屬性】面板中設(shè)置【邊框顏色】為?#B7D6F4。

(8)在該表格的第一行各單元格中依次輸入文本：新聞編號(hào)、新聞欄目、新聞標(biāo)題、發(fā)布時(shí)間、操作。然后按住鼠標(biāo)左鍵拖選第一行的各單元格，在【屬性】面板中設(shè)置【水平】為居中對(duì)齊。

(9)將該表格第二行最后一個(gè)單元格拆分成兩列，然后依次輸入文本：編輯、刪除。

(10)依次設(shè)置該表格第一行各單元格寬度及第二行最后兩個(gè)單元格的寬度。該表格最終效果如圖3-11-13所示。至此，完成了【新聞列表】頁面的制作。圖3-11-13二、創(chuàng)建【記錄集】綁定

創(chuàng)建【記錄集】綁定的具體操作步驟如下：

(1)執(zhí)行【窗口】→【綁定】菜單選項(xiàng)，打開【綁定】面板，在【綁定】面板中單擊按鈕，在打開的下拉菜單中選擇【記錄集(查詢)】選項(xiàng)，即可打開【記錄集】對(duì)話框。

(2)在該對(duì)話框的【名稱】文本框中輸入rsNewsList，【連接】下拉列表中選擇conn，【表格】下拉列表中選擇newsdata，【排序】下拉列表中選擇News_ID，在其右側(cè)下拉列表中選擇【降序】，如圖3-11-14所示。圖3-11-14

(3)單擊【測試】按鈕，將打開數(shù)據(jù)庫表中全部記錄集數(shù)據(jù)頁面，如圖3-11-15所示。查看測試結(jié)果是否正確，然后單擊【確定】按鈕將其關(guān)閉。

(4)如果測試結(jié)果是正確的，則單擊【記錄集】對(duì)話框中的【確定】按鈕，完成記錄集的創(chuàng)建。此時(shí)，在【綁定】面板中增加了一行名為rsNewsList的記錄集，展開該記錄集，打開樹形結(jié)構(gòu)，如圖3-11-16所示。

(5)選擇樹形結(jié)構(gòu)的News_ID項(xiàng)，按住鼠標(biāo)左鍵將其拖到【新聞編號(hào)】下方的單元格中。按照同樣的方法，依次將News_Catalog、News_Title、News_Date三個(gè)字段項(xiàng)拖到【新聞欄目】、【新聞標(biāo)題】、【發(fā)布時(shí)間】下方的單元格中，如圖3-11-17所示。圖3-11-15圖3-11-16圖3-11-17

(6)選擇該表格【操作】下方單元格中的【編輯】文本，在【屬性】面板的【鏈接】文本框中輸入admin_editnews.asp，然后單擊其右側(cè)的文件夾按鈕，在打開的【選擇文件】對(duì)話框中單擊視圖按鈕，打開【參數(shù)】對(duì)話框，如圖3-11-18所示。圖3-11-18

(7)在該參數(shù)對(duì)話框的【名稱】文本框中輸入newsid，單擊【值】文本框右側(cè)的記錄集按鈕，如圖3-11-19所示。

(8)打開【動(dòng)態(tài)數(shù)據(jù)】對(duì)話框，選擇News_ID項(xiàng)，然后單擊【確定】按鈕，如圖3-11-20所示。圖3-11-19

圖3-11-20

(9)返回到【參數(shù)】對(duì)話框，單擊【確定】按鈕，關(guān)閉該對(duì)話框，返回到【選擇文件】對(duì)話框。

(10)單擊【選擇文件】對(duì)話框的【確定】按鈕，完成鏈接的參數(shù)設(shè)置，如圖3-11-21所示，其【屬性】面板【鏈接】文本框中的內(nèi)容為admin_editnews.asp?newsid=<%=(rsNewsList.Fields.Item("News_ID").Value)%>。圖3-11-21操作技巧

【鏈接】文本框中的【admin_editnews.asp】是新聞編輯頁面，將在任務(wù)十二中介紹?！?】表示在鏈接的同時(shí)傳遞參數(shù)，【newsid】為傳遞的參數(shù)名稱，【<%=(rsNewsList.Fields.Item(“News_ID”).Value)%>】為傳遞的參數(shù)值。

(11)按照第(6)～(9)步的操作方法，選擇【刪除】文本，設(shè)置【屬性】面板【鏈接】文本框中的內(nèi)容最終為admin_delnews.asp?newsid=<%=(rsNewsList.Fields.Item("News_ID").Value)%>。其中，admin_delnews.asp是新聞刪除頁面，在任務(wù)十三中介紹。三、添加【重復(fù)區(qū)域】

添加【重復(fù)區(qū)域】的具體操作步驟如下：

(1)將光標(biāo)定位在表格第二行的任意單元格內(nèi)，單擊文檔窗口左下角【標(biāo)簽選擇器】中的<tr>標(biāo)簽，即選中該表格第二行，如圖3-11-22所示。圖3-11-22

(2)單擊【服務(wù)器行為】面板中的按鈕，在打開的下拉菜單中選擇【重復(fù)區(qū)域】選項(xiàng)，在打開的【重復(fù)區(qū)域】對(duì)話框中設(shè)置【記錄集】為rsNewsList，【顯示】為10，如圖3-11-23所示。圖3-11-23

(3)此時(shí)，在【服務(wù)器行為】面板中增加了一行【重復(fù)區(qū)域】項(xiàng)，如圖3-11-24所示。在文檔窗口表格第二行四周增加了灰色的邊框，如圖3-11-25所示。圖3-11-24圖3-11-25四、添加【記錄集導(dǎo)航條】鏈接

前面步驟中設(shè)置重復(fù)區(qū)域?yàn)槊宽擄@示10條記錄，一旦記錄條數(shù)超過10條，就需要添加如同【上一頁】、【下一頁】的鏈接以實(shí)現(xiàn)分頁顯示。

(1)將光標(biāo)定位在文檔窗口表格的下方，執(zhí)行【插入記錄】→【數(shù)據(jù)對(duì)象】→【記錄集分頁】→【記錄集導(dǎo)航條】菜單命令。

(2)打開【記錄集導(dǎo)航條】對(duì)話框，在【記錄集】下拉列表中選擇rsNewsList，【顯示方式】中選擇【文本】單選按鈕，如圖3-11-26所示。圖3-11-26

(3)單擊【確定】按鈕，即在文檔窗口中添加了導(dǎo)航條鏈接，如圖3-11-27所示。圖3-11-27

(4)可修飾導(dǎo)航條鏈接的顯示：在各文本兩側(cè)添加【[】和【]】，然后選中該表格的行，在【屬性】面板中設(shè)置【高】為40，如圖3-11-28所示。圖3-11-28

(5)按Ctrl?+?S組合鍵保存該文檔。按F12鍵預(yù)覽，頁面效果如圖3-11-29所示。圖3-11-29任務(wù)十二制作【新聞修改】頁面

相關(guān)知識(shí)

更新數(shù)據(jù)庫表數(shù)據(jù)時(shí)，通常要制作一個(gè)更新頁，此更新頁的制作過程包括創(chuàng)建記錄集，添加表單對(duì)象，在表單對(duì)象中顯示記錄集中的各字段，使用【數(shù)據(jù)庫行為】面板中的【更新記錄】行為完成數(shù)據(jù)庫表中記錄的更新四個(gè)步驟。

一、創(chuàng)建記錄集

記錄集的創(chuàng)建在任務(wù)十一中有相關(guān)介紹。在做更新數(shù)據(jù)庫表頁時(shí)，記錄集的創(chuàng)建要使用【篩選】項(xiàng)，用于設(shè)置更新記錄的ID。通常，更新記錄的ID來自數(shù)據(jù)列表頁，通過數(shù)據(jù)列表頁含有URL參數(shù)的鏈接來傳遞。二、添加表單對(duì)象

在表單域中添加表單對(duì)象，需要為數(shù)據(jù)庫表中要更新的每一列添加一個(gè)表單對(duì)象，并且每個(gè)表單對(duì)象都應(yīng)該在記錄集中具有一個(gè)對(duì)應(yīng)的列。

表單對(duì)象主要用于數(shù)據(jù)輸入，輸入更新的數(shù)據(jù)，因此經(jīng)常會(huì)使用文本字段，但是也可根據(jù)需要使用菜單/列表或單選按鈕。三、在表單對(duì)象中顯示記錄集中的各字段

將記錄集中保存的記錄顯示在表單對(duì)象中。操作方法有兩種。

(一)使用【屬性】面板

使用【屬性】面板的具體操作方法如下：

(1)選擇頁面上表單域中的文本字段。

(2)在【屬性】面板中，單擊【初始值】文本框右側(cè)的閃電圖標(biāo)，如圖3-12-1所示。

(3)在打開的【動(dòng)態(tài)數(shù)據(jù)】對(duì)話框中選擇為文本字段提供值的記錄集列，然后單擊【確定】按鈕。圖3-12-1

(二)使用【綁定】面板

使用【綁定】面板的具體操作如下：

(1)選擇頁面上表單域中的文本字段。

(2)執(zhí)行【窗口】→【綁定】菜單命令，打開【綁定】面板。在【綁定】面板中選中為文本字段提供值的記錄集項(xiàng)。

(3)單擊【綁定】面板下方的視圖按鈕，即完成數(shù)據(jù)字段與文本字段的綁定。四、【更新記錄】數(shù)據(jù)庫行為的應(yīng)用

在經(jīng)過了前三個(gè)步驟的設(shè)置后，方可使用【更新記錄】行為。操作步驟如下：

(1)執(zhí)行【窗口】→【服務(wù)器行為】菜單命令，打開【服務(wù)器行為】面板。

(2)單擊該面板中的視圖按鈕，在打開的下拉菜單中選擇【更新記錄】選項(xiàng)，即打開【更新記錄】對(duì)話框，如圖3-12-2所示。圖3-12-2

(3)設(shè)置【更新記錄】對(duì)話框中的各項(xiàng)。

◆在【連接】下拉列表中，選擇一個(gè)到數(shù)據(jù)庫的連接。

◆在【要更新的表格】下拉列表中，選擇包含要更新的記錄的數(shù)據(jù)庫表。

◆【選取記錄自】下拉列表用于設(shè)置顯示在表單對(duì)象上的記錄的記錄集。

◆在【唯一鍵列】下拉列表中，選擇一個(gè)鍵列(通常是記錄的ID列)來標(biāo)識(shí)數(shù)據(jù)庫表中的記錄。如果該值是一個(gè)數(shù)字，則選擇【數(shù)字】復(fù)選框。鍵列通常接受數(shù)值，但有時(shí)候也接受文本值?！粼凇靖潞螅D(zhuǎn)到】文本框中，輸入更新記錄后將要打開的文件，或單擊【瀏覽】按鈕查找到該文件。

◆在【獲取值自】下拉列表中選擇一個(gè)表單域名稱。

◆在【表單元素】文本區(qū)域中選擇一個(gè)表單對(duì)象名稱，從【列】下拉列表中選擇要更新的數(shù)據(jù)庫列，然后從【提交為】下拉列表中為該表單對(duì)象選擇數(shù)據(jù)類型。數(shù)據(jù)類型是數(shù)據(jù)庫表中的字段所需的數(shù)據(jù)類型(可為文本、數(shù)字、布爾型等)。依次為表單中的每個(gè)表單對(duì)象重復(fù)該過程。

(4)設(shè)置完畢，單擊【確定】按鈕。操作技巧若要修改【更新記錄】服務(wù)器行為，可執(zhí)行【窗口】→【服務(wù)器行為】菜單命令，打開【服務(wù)器行為】面板，在該面板中左鍵雙擊【更新記錄】項(xiàng)，即可打開【更新記錄】對(duì)話框，進(jìn)行修改。其他行為的修改也可參照該方法實(shí)現(xiàn)。

實(shí)施步驟

一、制作【新聞修改】頁面

制作【新聞修改】頁面的具體操作步驟如下：

(1)啟動(dòng)DreamWeaverCS3軟件，導(dǎo)入企業(yè)網(wǎng)站站點(diǎn)。

(2)在【文件】面板中左鍵雙擊admin_addnews.asp文件，將其打開，然后執(zhí)行【文件】→【另存為】菜單命令，將其保存在admin文件夾下，命名為admin_editnews.asp。

(3)打開【服務(wù)器行為】面板，按Ctrl鍵的同時(shí)單擊鼠標(biāo)左鍵選中【插入記錄】項(xiàng)和【動(dòng)態(tài)屬性】項(xiàng)，然后單擊面板上方的按鈕，將這兩項(xiàng)刪除，如圖3-12-3所示。圖3-12-3

(4)選中頁面中的【添加】按鈕左側(cè)的隱藏域視圖按鈕，按Del鍵將其刪除。

(5)將頁面中的【添加新聞】文本修改為【修改新聞】，選中【添加】按鈕，在【屬性】面板【值】文本框中將【添加】文本刪除，重新輸入【修改】文本，如圖3-12-4所示。圖3-12-4

(6)將光標(biāo)定位在【新聞內(nèi)容】文本所在單元格，執(zhí)行【插入記錄】→【表格對(duì)象】→【在下面插入行】菜單命令，即在【新聞內(nèi)容】所在行下方添加一行。

(7)在新插入行的左側(cè)單元格中輸入文本【發(fā)布時(shí)間：】，在右側(cè)單元格中插入一個(gè)【文本字段】表單對(duì)象，如圖3-12-5所示。圖3-12-5

(8)選中【文本字段】，在【屬性】面板的【文本域】文本框中輸入addtime。

(9)至此，【新聞修改】頁面制作完成，按Ctrl?+?S組合鍵將其保存。二、在表單對(duì)象中添加記錄集綁定

在表單對(duì)象中添加記錄集綁定的具體操作步驟如下：

(1)執(zhí)行【窗口】→【綁定】菜單命令，打開【綁定】面板。單擊【綁定】面板的按鈕，從彈出的菜單中選擇【記錄集(查詢)】命令。

(2)在打開的【記錄集】對(duì)話框的【名稱】文本框中輸入rsNewsEdit，【連接】下拉列表中選擇conn，在【表格】下拉列表中選擇newsdata表，在【篩選】右側(cè)第一項(xiàng)中選擇News_ID，第二項(xiàng)中選擇【=】，第三項(xiàng)中選擇【URL參數(shù)】，第四項(xiàng)中輸入newsid。如圖3-12-6所示。圖3-12-6操作技巧在設(shè)置篩選條件中的第四項(xiàng)輸入傳遞到本頁的參數(shù)名稱。本任務(wù)十一中輸入newsid即為在admin_newslist.asp頁面單擊【編輯】文本鏈接時(shí)傳遞的參數(shù)名稱。

(3)單擊【測試】按鈕，打開【請(qǐng)?zhí)峁┮粋€(gè)測試值】對(duì)話框，在【測試值】欄中輸入【1】，如圖3-12-7所示。單擊【確定】按鈕，即可在打開的對(duì)話框中看到該編號(hào)所對(duì)應(yīng)的新聞內(nèi)容，然后單擊【確定】按鈕關(guān)閉該對(duì)話框。(如不想測試，可忽略此步操作。)圖3-12-7

(4)單擊如圖3-12-6所示【記錄集】對(duì)話框中的【確定】按鈕，此時(shí)，在【綁定】面板中增加了一行名為rsNewsEdit的記錄集，展開該記錄集，打開樹形結(jié)構(gòu)，如圖3-12-8所示。

(5)在文檔窗口中選擇【新聞標(biāo)題】右側(cè)的文本框，在【綁定】面板的【記錄集】樹形結(jié)構(gòu)中選擇News_Title項(xiàng)，然后單擊【綁定】面板下面的【綁定】按鈕，如圖3-12-9所示，即在【新聞標(biāo)題】右側(cè)的文本框中添加了一段代碼，如圖3-12-10所示。

(6)按照上一步的操作方法，依次設(shè)置【新聞內(nèi)容】、【發(fā)布時(shí)間】右側(cè)的表單對(duì)象與【綁定】面板中的News_Content、News_Date各項(xiàng)進(jìn)行綁定。綁定后的頁面效果如圖3-12-11所示。圖3-12-11

(7)【新聞欄目】右側(cè)的下拉列表需要特殊處理一下。選中該下拉列表，將頁面視圖切換到【代碼】視圖下，如圖3-12-12所示。圖3-12-12

(9)按Ctrl?+?S組合鍵將該文檔保存。至此，完成了記錄集的綁定。

(10)按F12鍵預(yù)覽該頁，頁面將自動(dòng)跳轉(zhuǎn)到登錄頁面，輸入管理員用戶名和密碼，單擊登錄按鈕，進(jìn)入到新聞后臺(tái)管理首頁，然后單擊左側(cè)的【新聞管理】按鈕，在打開的下拉菜單中選擇【新聞列表】按鈕，進(jìn)入到新聞列表頁面。再單擊【新聞列表】頁面中的任意條新聞?dòng)覀?cè)的【編輯】文本，即可打開【新聞修改】頁面，如圖3-12-13所示。圖3-12-13三、實(shí)現(xiàn)新聞修改功能

實(shí)現(xiàn)新聞修改功能的具體操作如下：

(1)將光標(biāo)定位在該文檔窗口中,單擊【服務(wù)器行為】面板的視圖按鈕，在彈出的菜單中選擇【更新記錄】命令。

(2)打開【更新記錄】對(duì)話框，在【連接】下拉列表中選擇conn，【要更新的表格】下拉列表中選擇newsdata，【選取記錄自】下拉列表中選擇rsNewsEdit，【唯一鍵列】下拉列表中選擇News_ID，并選中【數(shù)字】復(fù)選框，【在更新后，轉(zhuǎn)到】文本框中輸入editsuccess.asp，其他項(xiàng)使用默認(rèn)設(shè)置即可，如圖3-12-14所示。圖3-12-14

(3)單擊【確定】按鈕，【服務(wù)器行為】面板將增加【更新記錄】項(xiàng)，如圖3-12-15所示。

(4)按Ctrl?+?S組合鍵將該頁保存。至此，新聞修改功能制作完成。圖3-12-15四、制作editsuccess.asp頁面

制作editsuccess.asp頁面的具體操作步驟如下：

(1)?editsuccess.asp頁面用于顯示修改新聞后的信息提示，和addsuccess.asp頁面相似，因此可打開addsuccess.asp文檔，將其另存為editsuccess.asp。

(2)刪除頁面中原有的文本內(nèi)容，在頁面中輸入兩行文本【新聞修改成功】、【5秒后自動(dòng)返回新聞列表頁面】，如圖3-12-16所示。

(3)單擊【插入】面板的【常用】選項(xiàng)卡下的【文件頭】下拉列表中的【刷新】按鈕，如圖3-12-17所示。圖3-12-17圖3-12-16

(4)在打開的【刷新】對(duì)話框中的【延遲】文本框中輸入5，選中【轉(zhuǎn)到URL】單選按鈕，單擊【瀏覽】按鈕，選擇admin_newslist.asp文件，如圖3-12-18所示。圖3-12-18

(5)單擊【確定】按鈕完成設(shè)置。按Ctrl?+?S組合鍵將其保存。

至此，新聞修改功能全部制作完成。

新聞修改功能每次只能修改數(shù)據(jù)庫表中的一條記錄，因此該新聞修改頁面不能直接訪問，必須通過單擊【新聞列表】頁面的【編輯】鏈接文本打開。任務(wù)十三制作【新聞刪除】頁面

相關(guān)知識(shí)

在一個(gè)空白ASPVBScript頁面中，執(zhí)行【窗口】→【服務(wù)器行為】菜單命令，打開【服務(wù)器行為】面板。單擊該面板中的按鈕，在打開的下拉菜單中選擇【刪除記錄】選項(xiàng)，即打開【AdobeDreamWeaverCS3】警告對(duì)話框，如圖3-13-1所示。圖3-13-1前三步在任務(wù)十二中有相關(guān)介紹。事實(shí)上【更新記錄】行為和【刪除記錄】行為在實(shí)現(xiàn)時(shí)，前三步幾乎是相同的，區(qū)別在于第四步，如果是實(shí)現(xiàn)修改頁，則在第四步執(zhí)行【更新記錄】，如果實(shí)現(xiàn)刪除頁，則在第四步執(zhí)行【刪除記錄】。

因此，這里只介紹第四步【刪除記錄】。當(dāng)完成前三步操作后，單擊【服務(wù)器行為】面板中的視圖按鈕，在打開的下拉菜單中選擇【刪除記錄】選項(xiàng)后，將打開【刪除記錄】對(duì)話框，如圖3-13-2所示。圖3-13-2操作技巧刪除頁一次只能包含一個(gè)記錄編輯服務(wù)器行為。例如，不能將【插入記錄】或【更新記錄】服務(wù)器行為添加到刪除頁。

實(shí)施步驟

一、制作【新聞刪除】頁面

制作【新聞刪除】頁面的具體操作步驟如下：

(1)啟動(dòng)DreamWeaverCS3軟件，導(dǎo)入企業(yè)網(wǎng)站站點(diǎn)。

(2)左鍵雙擊【文件】面板中的admin_editnews.asp文件，將其打開。按Ctrl?+?Shift?+?S組合鍵將其另存在admin文件夾下，并命名為admin_delnews.asp。

(3)修改頁面內(nèi)容：將文本【修改新聞】改為【刪除新聞】，【修改】按鈕改為【確認(rèn)刪除】，在【取消】按鈕右側(cè)添加一個(gè)按鈕，選中該按鈕，在【屬性】面板中設(shè)置【值】為【返回】，【動(dòng)作】為【無】，如圖3-13-3所示。

(4)選中【返回】按鈕，按Shift?+?F4組合鍵打開【行為】面板，單擊【行為】面板中的按鈕，在打開的下拉菜單中選擇【調(diào)用JavaScript】，即打開【調(diào)用JavaScript】對(duì)話框，在該對(duì)話框中輸入window.location=“admin_newslist.asp”，如圖3-13-4所示。

(5)單擊【確定】按鈕，關(guān)閉該對(duì)話框，即在【行為】面板中新增一行，如圖3-13-5所示。

(6)刪除【更新記錄】服務(wù)器行為：在【服務(wù)器行為】面板中選中【更新記錄】項(xiàng)，單擊視圖按鈕，將其刪除，如圖3-13-6所示。圖3-13-3圖3-13-4圖3-13-5圖3-13-6

(7)單擊【服務(wù)器行為】面板中的視圖按鈕，在打開的下拉菜單中選擇【刪除記錄】行為。

(8)打開【刪除記錄】對(duì)話框，在該對(duì)話框【連接】下拉列表中選擇conn，【從表格中刪除】下拉列表中選擇newsdata，【選取記錄自】下拉列表中選擇rsNewsEdit，【唯一鍵列】下拉列表中選擇News_ID，在【刪除后，轉(zhuǎn)到】文本框中輸入delsuccess.asp，如圖3-13-7所示。

(9)單擊【確定】按鈕，完成新聞刪除功能的制作。圖3-13-7二、制作delsuccess.asp頁面

打開editsuccess.asp頁面，將其另存為delsuccess.asp，修改【新聞修改成功】文本為【新聞刪除成功】，即完成該頁面的制作，如圖3-13-8所示。圖3-13-8任務(wù)十四制作【企業(yè)新聞】頁面

相關(guān)知識(shí)

通常在列表頁中添加記錄集，列出數(shù)據(jù)庫表中所有記錄，然后創(chuàng)建用于打開詳細(xì)頁的鏈接，此鏈接以URL參數(shù)的形式傳遞用戶所選擇記錄的ID，詳細(xì)頁將使用此ID在數(shù)據(jù)庫表中查找請(qǐng)求的記錄并顯示該記錄。

在一個(gè)空白ASPVBScript頁面，單擊【服務(wù)器行為】面板中的按鈕，在打開的下拉菜單中選擇【轉(zhuǎn)到詳細(xì)頁面】選項(xiàng)，即打開【AdobeDreamWeaverCS3】警告對(duì)話框，如圖3-14-1所示。圖3-14-1創(chuàng)建記錄集并將記錄集綁定到頁面后，選中要?jiǎng)?chuàng)建鏈接的內(nèi)容，單擊【服務(wù)器行為】面板中的視圖按鈕，在打開的下拉菜單中選擇【轉(zhuǎn)到詳細(xì)頁面】選項(xiàng)，即打開【轉(zhuǎn)到詳細(xì)頁面】對(duì)話框，如圖3-14-2所示。圖3-14-2實(shí)施步驟

一、制作【企業(yè)新聞】頁面

制作【企業(yè)新聞】頁面的操作步驟如下：

(1)啟動(dòng)DreamWeaverCS3軟件，導(dǎo)入企業(yè)網(wǎng)站站點(diǎn)。

(2)在【開始頁】窗口單擊【ASPVBScript】選項(xiàng)，如圖3-14-3所示。

(3)打開一個(gè)空白網(wǎng)頁文檔，執(zhí)行【文件】→【保存】菜單命令，在打開的【另存為】對(duì)話框中的【保存在】下拉列表中選擇D:\cweb文件夾，然后單擊右側(cè)的【創(chuàng)建新文件夾】視圖按鈕，并在文件窗口中為【新建文件夾】改名為news，如圖3-14-4所示。圖3-14-3圖3-14-4

(4)雙擊news文件夾，在【文件名】文本框中輸入news_list.asp，然后單擊【保存】按鈕，如圖3-14-5所示。

(5)在文檔窗口執(zhí)行【修改】→【模板】→【應(yīng)用模板到頁】菜單命令，打開【選擇模板】對(duì)話框，在該對(duì)話框中選擇template，然后單擊【選定】按鈕，如圖3-14-6所示。圖3-14-5圖3-14-6圖3-14-7⑦將光標(biāo)定位在該表格中，在文檔窗口左下角的標(biāo)簽選擇器中單擊form#form1標(biāo)簽，在【屬性】面板【動(dòng)作】文本框中輸入news_search.asp，如圖3-14-8所示。(news_search.asp為新聞搜索頁面，在任務(wù)十五中介紹。)圖3-14-8⑧選中該表格第二行的文本字段，按Shift?+?F4組合鍵打開【行為】面板，單擊【行為】面板中的視圖按鈕，在打開的下拉菜單中選擇【設(shè)置文本】→【設(shè)置文本域文字】選項(xiàng)，如圖3-14-9所示。

⑨打開【設(shè)置文本域文字】對(duì)話框，該對(duì)話框不做任何修改，直接單擊【確定】按鈕，如圖3-14-10所示。

⑩此時(shí)在【行為】面板中添加了一行，如圖3-14-11所示。單擊左側(cè)的下拉列表選擇onClick，如圖3-14-12所示。(該行為的功能：當(dāng)單擊該文本字段時(shí)，文本字段中的值自動(dòng)清空。)

?至此，完成了【左側(cè)內(nèi)容】可編輯區(qū)域的設(shè)置，如圖3-14-13所示。圖3-14-9圖3-14-10圖3-14-11圖3-14-12圖3-14-13

(8)在【詳細(xì)內(nèi)容】可編輯區(qū)域內(nèi)設(shè)置新聞列表：

①將光標(biāo)定位在【詳細(xì)內(nèi)容】可編輯區(qū)域內(nèi)，插入圖片，位于D:\cweb\images\文件夾下的news_car.jpg。

②將光標(biāo)定位在該圖片右側(cè)，連按三次Shift?+?Enter組合鍵，產(chǎn)生三個(gè)換行。

③插入一個(gè)1行3列、寬為100%的表格。設(shè)置第一列屬性【水平】為居中對(duì)齊，【寬】為20，【高】為25；設(shè)置第二列屬性【水平】為左對(duì)齊；設(shè)置第三列屬性【水平】為左對(duì)齊，【寬】為150。

④將光標(biāo)定位在第一列,插入圖片D:\cweb\images\arrow.jpg。

⑤將光標(biāo)定位在第三列，輸入【[]】。

⑥至此，【詳細(xì)內(nèi)容】可編輯區(qū)域如圖3-14-14所示。圖3-14-14⑦執(zhí)行【窗口】→【綁定】菜單選項(xiàng)，打開【綁定】面板，在【綁定】面板中單擊視圖按鈕，在打開的下拉菜單中選擇【記錄集(