用DreamWeaver打造留言板(下)

1、在學(xué)這課之前先給大家解釋一下表單和表單域的區(qū)別。表單是指代碼標(biāo)簽，也就是DW設(shè)計視圖下看到的紅虛線框。 表單域是指表單將來要提交的內(nèi)容，也就是文本字段、隱藏區(qū)域、文本區(qū)域、單選按鈕、按鈕等元件叫表單域，見圖1。圖1這些都是本課要用到的表單域一、添加表單、布局表格1、新建文檔，保存為write.asp這個頁面是簽寫留言的。首先要插入一個表單見圖2。圖2插入表單面板2、在表單內(nèi)添加表格，表格布局設(shè)置見圖3。圖3布局表格二、添加表單域1、姓名：在姓名對應(yīng)的表格里添加文本字段，在屬性面板上取名為name見圖4，這樣做是為了與數(shù)據(jù)庫的字段名字相對應(yīng)。圖4姓名對應(yīng)的表單域命名2、OICQ、EMAIL、個人

2、主頁的表單域的添加方法同上，均為文本字段，分別命名為：OICQ|oicq，EMAIL|mail,個人主頁|homepage。3、頭像：在相對應(yīng)的單元格里分別插入用戶頭像圖片，然后添加對應(yīng)的單選按鈕命名為：tx。4、性別：在姓名對應(yīng)的表格里添加兩個單選按鈕，選中性別男單選按鈕：在屬性面板為它改名為sex選定值為男，初始狀態(tài)已勾選，設(shè)置見圖5。 選中性別女單選按鈕：在屬性面板為它改名為sex選定值為女，初始狀態(tài)未選中，方法同上。圖5性別男：對應(yīng)表單域單選按鈕的設(shè)置5、提交與重置按鈕：在最下面的單元格添加兩個按鈕，選中提交按鈕：在屬性面板為它改名為Submit，標(biāo)簽選提交，動作提交表單，設(shè)置見圖6。

3、 選中重置按鈕：在屬性面板為它改名為Submit2，標(biāo)簽選重置，動作重設(shè)表單，方法同上。圖6提交按鈕屬性6、添加隱藏區(qū)域：在提交按鈕旁單擊添加隱藏區(qū)域，在屬性面板里為它改名為IP，在值里添加代碼這段代碼是獲取客戶端IP的，見圖7。圖7隱藏區(qū)域設(shè)置7、留言內(nèi)容：在留言內(nèi)容對應(yīng)的單元格里添加文本區(qū)域在屬性面板里為它改名為liuyan，全部添加完的表單域，見圖8。圖8添加好的表單域三、定義提交按鈕的服務(wù)器行為1、選中的整個表格，打開服務(wù)器行為面板，單擊“+”按鈕選擇菜單下的插入記錄，見圖9。圖9服務(wù)器行為插入記錄2、設(shè)置表單域與數(shù)據(jù)庫字段名一一對應(yīng)，在表單元素里分別依次選中元素，在下面的列里選擇與數(shù)

4、據(jù)庫相對應(yīng)的域，見圖10。 圖10插入記錄對話框四、定義表單提交的錯誤檢查（行為面板）1、簽寫留言時為了避免有錯誤信息的寫入，添加表單提交的錯誤檢查功能。打開設(shè)計面板下的行為面板，單擊+選擇檢查表單，見圖11。圖11設(shè)計行為檢查表單2、設(shè)置表單域和檢查事件：name選擇必需的，ociq選擇數(shù)字，mail選擇必需的和電子郵件，homepage不選，liuyan選擇必需的，見圖12。圖12檢查表單對話框上一課我們講了簽寫留言提交表單和檢查表單，這一課我們再回過頭來充實一下main.asp頁面功能-實現(xiàn)留言記錄導(dǎo)航。 一、控制一頁顯示留言數(shù)和翻頁按鈕先介紹應(yīng)用程序下的按鈕：記錄集導(dǎo)航條：翻頁功能按鈕

5、，記錄集導(dǎo)航條狀態(tài)：顯示留言數(shù)量功能按鈕，見圖1。圖1應(yīng)用程序記錄集導(dǎo)航條/記錄集導(dǎo)航狀態(tài)1、光標(biāo)移到頁面下方，單擊記錄集導(dǎo)航狀態(tài)就會彈出記錄集導(dǎo)航狀態(tài)對話框，見圖2。圖2記錄集導(dǎo)航狀態(tài)對話框2、再回車另起一行，單擊記錄集導(dǎo)航條就會彈出記錄導(dǎo)航對話框，記錄導(dǎo)航條將以文字方式顯示，見圖3。圖3記錄集導(dǎo)航條對話框這樣我們就完成了顯示留言數(shù)量和翻頁按鈕，見圖4。圖4已加好翻面和顯示留言數(shù)功能二、留言內(nèi)容顯示問題1、現(xiàn)在main.asp文件基本完成。當(dāng)然，你會想到：如果我們輸入一些html代碼，會怎么樣呢？ 我們來輸入一行html代碼試一下，輸入：測試，結(jié)果見圖5，這個當(dāng)然是不安全的。也就是為什么決大

6、部分論壇不支持html的原因。圖5測試結(jié)果 再測試看看，用戶的留言如果很長，表格會自動撐大（文字不會自動換行）！見圖6。圖6撐大的表格2.、為了解決以上問題，我們將原來綁定到留言單元格中的記錄集字段（）刪除，添加“文本區(qū)域”，添加好后的文本區(qū)域見圖7。圖7添加好的文本區(qū)域3、然后選中剛才添加的文本區(qū)域，在屬性面板里點擊打開動態(tài)數(shù)據(jù)對話框，添加動態(tài)留言文本字段y_liuyan，見圖8。圖8為文本區(qū)域添加動態(tài)數(shù)據(jù)現(xiàn)在可以在留言試試看，表格自動換行，而且不支持html代碼了，留言內(nèi)容的顯示問題也可以借助Dreamweaver MX的插件來實現(xiàn)的。上節(jié)課我們講了頁面的翻頁和顯示留言數(shù)，解決了留言內(nèi)容顯

7、示問題。這一課我們來繼續(xù)加工和充實main.asp和write.asp頁面功能。 一、實現(xiàn)留言用戶的頭像選擇與顯示1、打開簽寫留言頁面write.asp文件，選其中一張用戶頭像圖片，在屬性面板里復(fù)制源文件URL鏈接地址，見圖1。圖1選中頭像與圖像屬性再選中與頭像對應(yīng)的單選按鈕在屬性面板的選定值處粘貼剛才復(fù)制的圖片URL地址，單選按鈕名稱為tx，初始狀態(tài)未選中，見圖2。圖2頭像表單域選定值其它單選按鈕設(shè)置同上（單選按鈕tx，選定值對應(yīng)的圖片路徑，初始狀態(tài)未選中）注意圖片路徑與單選按鈕的選定值一一對應(yīng)。2、打開顯示留言頁面main.asp實現(xiàn)頭像地址記錄的綁定，在綁定面板下選擇記錄集中touxia

8、ng字段，見圖3。圖3綁定頭像動態(tài)數(shù)據(jù)按住鼠標(biāo)拖動按住鼠標(biāo)拖動touxiang字段到main.asp頁面的頭像視圖上，再釋放鼠標(biāo)即可，拖動完成后屬性面板上變成記錄集中的touxiang動態(tài)字段了，這個字段是將來顯示write.asp中選中頭像按鈕的值（頭像路徑）見圖4。圖4綁定動態(tài)數(shù)據(jù)拖動到頭像上二、OICQ、E-mail、個人主頁和IP顯示的實現(xiàn)1、打開main.asp頁面，為了避免Email、主頁地址過長，把表格撐大，影響效果，我們用四張圖片來取代他們（點擊此處下載圖片）修改頁面如圖4右上角，修改表格，在單元格加上對應(yīng)的圖片。2、設(shè)置OICQ圖像的超級鏈接：選中OICQ圖片在屬性面板中為它

9、添加鏈鏈，點擊鏈接后的瀏覽文件，見圖5。圖5為OICQ添加鏈接點擊瀏覽文件后打開選擇文件對話框，第一步選擇文件名稱為數(shù)據(jù)源，第二步選擇y_oicq動態(tài)字段，在URL參數(shù)中會顯示OICQ的動態(tài)字段，第三步復(fù)制下面紅色的鏈接，粘貼到URL參數(shù)的前面（下面綠色字段的前面），OICQ的完整鏈接應(yīng)該是下面URL的紅色部份加綠色部分，/cgi-bin/friend/user_show_info?ln=，見圖6。圖6選擇URL為數(shù)據(jù)源這個時候?qū)傩悦姘逯械逆溄泳蜁@示我們剛才添加的URL參數(shù)了，這里我們還要把目標(biāo)改為_blank就是鏈接在新窗口中打開，見圖7。圖7目標(biāo)改為_blank 3、設(shè)置OICQ圖像的號

10、碼提示信息：選中OICQ圖像，切換到代碼視圖。將光標(biāo)定位在 圖8在title標(biāo)簽中添加記錄集動態(tài)文本做這步的目的是為了實現(xiàn)鼠標(biāo)移到OICQ圖像上時將顯示OICQ號碼提示信息，否則不顯示，如圖4、EMAIL、主頁和IP的圖像的超級鏈接請參考OICQ圖像的超級鏈接，方法相同；提示信息同樣也在URL參數(shù)前加上下面的紅色部分鏈接。E-mail鏈接：mailto:主 頁 鏈接：http:/I P 鏈接： #到此顯示留言主頁面main.asp和簽寫留言頁面write.asp就全部完成了，不是很難吧，現(xiàn)在就可以測試你親手做的留言板了：）上節(jié)我們完完善了顯示留留言頁面maain.assp和簽寫留留言頁面wrr

11、ite.aasp，從這這節(jié)課開始做做管理部分的的頁面。一、管管理員登陸頁頁面的實現(xiàn)llogin.asp1、新新建logiin.aspp管理員登陸陸頁面，首先先要插入一個個表單，在表表單內(nèi)插入表表格，表格布布局見圖1。圖1管理員登陸界面2、添加服務(wù)器行為：打開應(yīng)用程序下的服務(wù)器行為面板，單擊“+”按鈕選擇用戶身份驗證下的登錄用戶，見圖2。圖2服務(wù)器行為-登錄用戶3、用戶登錄設(shè)置：首先在使用鏈接驗證里選擇數(shù)據(jù)源（我們這里數(shù)據(jù)源名稱是 hlbook），然后在如果登陸成功，轉(zhuǎn)到后面的輸入框里輸入main_guset.asp（這是下面將要做的管理頁面），最后在如果登錄失敗，轉(zhuǎn)到后面的輸入框里輸入logi

12、n.asp（就是登錄不成功就轉(zhuǎn)到管理員登錄頁面）見圖3。圖3登錄用戶對話框設(shè)置 4 、保存login.asp，然后打開站點data文件夾下的liuyan_guest.mdb的數(shù)據(jù)庫，雙擊_guest數(shù)據(jù)庫表，在g_name字段下寫個用戶名（用戶名隨意），在g_password字段下寫個用戶密碼（用戶密碼自定義）見圖4。圖4在數(shù)據(jù)庫里添加用戶名與密碼二、創(chuàng)建main_guest.asp管理頁面1、打開main.asp另存為main_guest.asp，首先把進入管理改為退出管理，表格下再添加一些文字回復(fù)、刪除、編輯，見圖5。圖5main_guest.asp管理頁面2、添加服務(wù)器行為：打開應(yīng)用程序

13、下的服務(wù)器行為面板，單擊“+”按鈕選擇用戶身份驗證下的限制對頁的訪問，見圖6。圖6服務(wù)器行為-用戶身份驗證-限制對頁的訪問限制對頁的訪問對話框設(shè)置見圖7。管理員在登陸時輸入正確的用戶名和密碼才能登陸到管理頁面，否則跳到login.asp管理員登陸頁面。圖7限制對頁的訪問對話框3、選中剛才添加的退出管理幾個文字，添加器行為，打開應(yīng)用程序下的服務(wù)器行為面板，單擊“+”按鈕選擇用戶身份驗證下的注銷用戶。這是為退出管理而添加的一個功能，見圖8。圖8注銷用戶注銷用戶對框設(shè)置見圖9。管理員退出以后就直接跳轉(zhuǎn)到顯示留言頁面。圖9注銷用戶對話框上節(jié)課我們制制作了管理員員登陸頁面llogin.asp和管管理主頁

14、面mmain_gguest.asp,這這節(jié)課我們繼繼續(xù)來做編輯輯，回復(fù)，刪刪除3個管理理頁面。一、編編輯用戶留言言（更新記錄錄）頁面的創(chuàng)創(chuàng)建：1、新新建文件eddit.assp編輯頁面面，首先在插插入面板添加加一個表單，在在表單內(nèi)添加加表格與表單單域，布局見見圖1。圖11單元格與與表單域2、在在綁定面板里里單擊“+”按按鈕選擇記錄錄集，打開記記錄集對話框框，記錄集對對話框設(shè)置見見圖2。圖22記錄集設(shè)設(shè)置3、選選中姓名對應(yīng)應(yīng)的文本字段段，在屬性面面板里改名為為name，然然后點擊按鈕鈕，打開動態(tài)態(tài)數(shù)據(jù)對話框框，為姓名文文本字段添加加動態(tài)數(shù)據(jù)，選選取記錄集中中的y_naame字段，動動態(tài)數(shù)據(jù)對話話

15、框設(shè)置見圖圖3。圖33添加動態(tài)態(tài)數(shù)據(jù)4、OOICQ、EEMAILL、個人主頁頁、留言內(nèi)容容動態(tài)數(shù)據(jù)綁綁定的方法與與姓名綁定的的方法相同，按按照上面的方方法一一對應(yīng)應(yīng)綁定即可。5、選中單選按鈕女，在屬性面板里為它改名為sex選定值為女；再選中單選按鈕男，在屬性面板為它改名為sex選定值為男，然后再點擊動態(tài)按鈕，打開動態(tài)單選按鈕對話框，在動態(tài)單選按鈕對話框中單擊，打開動態(tài)數(shù)據(jù)對話框，選取記錄集中的y_xingbie字段，見圖4。圖4設(shè)置單選按鈕因為男女單選按鈕的名稱均為sex，所以只綁定一次就可以了，全部綁定到相應(yīng)的表單域如圖5。圖5動態(tài)數(shù)據(jù)綁定完成6、添加限制訪問頁行為：打開服務(wù)器行為面板，單擊

16、“+”按鈕選擇用戶身份驗證下的限制對頁面的訪問，打開限制對頁的訪問對話框，限制對頁的訪問對話框設(shè)置，見圖6。圖6限制對頁的訪問對話框7、頁面的數(shù)據(jù)更新，打開服務(wù)器行為面板，單擊“+”按鈕選擇更新記錄，打開更新記錄對話框，更新設(shè)置見圖7。圖7更新記錄對話框設(shè)置編輯留言實際上就是更新數(shù)據(jù)庫中的內(nèi)容，編輯留言頁面我們就做完了。二、管理員回復(fù)功能頁面的創(chuàng)建：1、創(chuàng)建huifu.asp回復(fù)頁面，首先插入表單，在表單內(nèi)添加表格與表單域，布局見圖8。圖8管理員回復(fù)頁2、綁定記錄集：在綁定面板單擊“+”按鈕，選擇添加記錄集，綁定記錄集方法同編輯頁面第2節(jié)。3、添加動態(tài)數(shù)據(jù)：姓名、EMAIL、留言內(nèi)容、回復(fù)內(nèi)容

17、添加動態(tài)數(shù)據(jù)的方法同編輯頁面第3節(jié)。4、添加限制訪問頁行為：限制訪問頁行為添加方法同編輯頁面的第6節(jié)。5、頁面的數(shù)據(jù)更新：更新記錄方法同編輯頁面的第7節(jié)。 三、刪除用戶留言（刪除記錄）頁面的創(chuàng)建：1、創(chuàng)建delete.asp刪除頁面，首先插入表單，在表單內(nèi)添加單元格與表單域，布局見圖9。圖9刪除留言表單與布局表格2、綁定記錄集：在綁定面板單擊“+”按鈕，選擇添加記錄集，綁定記錄集方法同編輯頁面第2節(jié)。3、添加動態(tài)數(shù)據(jù)：姓名、留言內(nèi)容添加動態(tài)數(shù)據(jù)的方法同編輯頁面第3節(jié)。 4、添加限制訪問頁行為：限制訪問頁行為添加方法同編輯頁面的第6節(jié)。5、頁面的服務(wù)器行為：打開服務(wù)器行為面板，單擊“+”選擇刪除

18、記錄，打開刪除記錄對話框，刪除記錄對話框設(shè)置見圖10。圖10刪除記錄對話框四、管理頁面添加服務(wù)器行為：實現(xiàn)跳轉(zhuǎn)到詳細信息頁（main_guest.asp）1、打開main_guest.asp管理主頁面，選中“編輯”這兩個文字，打開服務(wù)器行為面板，單擊“+”選擇轉(zhuǎn)到詳細信息頁，打開轉(zhuǎn)到詳細信息頁對話框，詳細信息頁選擇edit.asp，轉(zhuǎn)到詳細信息頁對話框設(shè)置見圖11。圖11編輯轉(zhuǎn)到詳細信息頁對話框傳遞URL參數(shù)為y_id，它是mdb數(shù)據(jù)庫里我們定義的ID字段類型是自動編號，自動編號在數(shù)據(jù)庫里是不會重復(fù)的，將來我們要編輯留言板中的某條留言的時候，這條留言信息的ID號就傳遞給了edit.asp頁面，edit.asp頁面就會顯示這條留