網(wǎng)頁設(shè)計(jì)三合一教程第8章.ppt

1、2020/8/14,1,網(wǎng)頁設(shè)計(jì)三合一教程,第8章動(dòng)態(tài)數(shù)據(jù)庫網(wǎng)頁,本章要點(diǎn),配置動(dòng)態(tài)服務(wù)器IIS建立 建立動(dòng)態(tài)站點(diǎn) 創(chuàng)建動(dòng)態(tài)頁面 創(chuàng)建數(shù)據(jù)庫鏈接 制作表單文檔,8.1動(dòng)態(tài)站點(diǎn)概述,何為動(dòng)態(tài)？ 一種具有“交互性”的頁面效果，即網(wǎng)頁會(huì)根據(jù)用戶的要求和選擇而動(dòng)態(tài)改變和響應(yīng)。 制作動(dòng)態(tài)網(wǎng)頁需要做的工作有： 第一，要在個(gè)人電腦上調(diào)試動(dòng)態(tài)網(wǎng)頁。 第二，使用數(shù)據(jù)庫技術(shù)。 第三，在Dreamweaver中建立動(dòng)態(tài)站點(diǎn)。,8.2配置IIS服務(wù)器,1安裝IIS服務(wù)器 2設(shè)置IIS 3測(cè)試ASP動(dòng)態(tài)網(wǎng)頁,1安裝IIS服務(wù)器,（1）執(zhí)行【開始】|【控制面板】命令，打開【控制面板】。,（2）雙擊【添加或刪除程序】圖標(biāo)，

2、打開【添加或刪除程序】窗口。,（3）單擊【添加/刪除Windows組件】，打開【W(wǎng)indows組件向?qū)А繉?duì)話框。,（4）選擇【Internet信息服務(wù)（IIS）】復(fù)選項(xiàng)。,（5）單擊【下一步】按鈕，開始安裝IIS服務(wù)器。,安裝完成后的窗口如下圖所示。,2設(shè)置IIS,首先在D盤下面建立一個(gè)“l(fā)iuyanban”的文件夾，用來存放留言板動(dòng)態(tài)頁面文件。 其次通過以下的步驟來設(shè)置站點(diǎn)虛擬目錄： （1）從【控制面板】窗口打開【管理工具】，在打開的【管理工具】窗口中選擇【Internet信息服務(wù)快捷方式】。,2設(shè)置IIS,（2）雙擊【Internet信息服務(wù)快捷方式】選項(xiàng)，在彈出的【Internet信息服

3、務(wù)】窗口左邊窗格中，右擊【默認(rèn)網(wǎng)站】項(xiàng)，在彈出的菜單中執(zhí)行【新建】|【虛擬目錄】命令，彈出【虛擬目錄創(chuàng)建向?qū)А看翱?，如右圖所示。,2設(shè)置IIS,（3）單擊【下一步】按鈕繼續(xù)。如左圖所示，在【別名】下面的文本框中輸入“l(fā)iuyanban”。單擊【下一步】按鈕繼續(xù)。如右圖所示，在【目錄】下邊的文本框中輸入“D:liuyanban”，或者單擊【瀏覽】按鈕找到D盤的“l(fā)iuyanban”文件夾。,3測(cè)試ASP動(dòng)態(tài)網(wǎng)頁,在【Internet信息服務(wù)】窗口右邊的窗格中找到建立的ASP動(dòng)態(tài)頁面，右鍵單擊后，在彈出的快捷菜單中選擇【瀏覽】項(xiàng)即可，如圖8-15所示。,8.3創(chuàng)建留言板主頁面,8.3.1建立動(dòng)態(tài)站

4、點(diǎn) 8.3.2創(chuàng)建留言板頁面,8.3.1建立動(dòng)態(tài)站點(diǎn),（1）定義站點(diǎn)。,8.3.1建立動(dòng)態(tài)站點(diǎn),（2）選擇服務(wù)器技術(shù)。,8.3.1建立動(dòng)態(tài)站點(diǎn),（3）選擇存放的本地文件夾。,8.3.1建立動(dòng)態(tài)站點(diǎn),（4）設(shè)置本機(jī)測(cè)試的URL。,8.3.1建立動(dòng)態(tài)站點(diǎn),（5）單擊【下一步】按鈕繼續(xù)進(jìn)行設(shè)置。由于是在本機(jī)測(cè)試，并不需要遠(yuǎn)程服務(wù)器參與，所以選擇【否】項(xiàng)。,8.3.1建立動(dòng)態(tài)站點(diǎn),（6）單擊【下一步】按鈕繼續(xù)。窗口顯示了所填寫的信息，確認(rèn)一下。如果發(fā)現(xiàn)有錯(cuò)，可以單擊【上一步】按鈕返回修改設(shè)置，確認(rèn)無誤后就可以單擊【完成】按鈕。 這時(shí)，動(dòng)態(tài)站點(diǎn)就定義完成了，現(xiàn)在可以在Dreamweaver 8中進(jìn)行動(dòng)態(tài)

5、網(wǎng)頁的設(shè)計(jì)了。,8.3.2創(chuàng)建留言板頁面,（1）創(chuàng)建留言板主頁面ASP文檔。 （2）用表格布局留言板主頁面。 （3）選擇這個(gè)表格，打開【屬性】面板，在其中設(shè)置表格及其單元格的寬度和高度。 （4）拆分表格第1行右邊的單元格，分成兩列。 （5）在表格中插入一些顯示元素。,8.3.2創(chuàng)建留言板頁面,（6）先將images文件夾下的圖片依次插入表格第一行最右邊的單元格中，然后分別在每個(gè)單元格中輸入相應(yīng)的信息，如下圖所示。 （7）最后再將整個(gè)表格的【背景顏色】設(shè)置為淺藍(lán)色（#66CCFF）。,8.4用Access 2003創(chuàng)建數(shù)據(jù)庫,1創(chuàng)建空數(shù)據(jù)庫文檔 2創(chuàng)建留言板用戶信息表 3創(chuàng)建管理員信息數(shù)據(jù)表,1

6、創(chuàng)建空數(shù)據(jù)庫文檔,（1）新建一個(gè)名為data的文件夾，然后將空數(shù)據(jù)庫文件保存在data文件夾下，文件名為liuyanban_data.mdb。,1創(chuàng)建空數(shù)據(jù)庫文檔,（2）單擊【創(chuàng)建】按鈕創(chuàng)建一個(gè)名為liuyanban_data的數(shù)據(jù)庫文件，同時(shí)出現(xiàn)一個(gè)相應(yīng)的數(shù)據(jù)庫設(shè)計(jì)窗口，如圖8-30所示。,1創(chuàng)建空數(shù)據(jù)庫文檔,（3）雙擊【使用設(shè)計(jì)器創(chuàng)建表】命令，彈出一個(gè)表設(shè)計(jì)器窗口，如圖8-31所示。表的結(jié)構(gòu)設(shè)計(jì)將在其中完成。,2創(chuàng)建留言板用戶信息表,（1）創(chuàng)建字段（域）。最后的結(jié)果如圖8-33所示。,2創(chuàng)建留言板用戶信息表,（2）設(shè)置用戶信息數(shù)據(jù)表的主鍵字段。 （3）設(shè)置字段屬性。 用戶信息數(shù)據(jù)表設(shè)計(jì)完成

7、以后，關(guān)閉表設(shè)計(jì)器窗口，可以看到數(shù)據(jù)庫設(shè)計(jì)窗口中多了一個(gè)名字為yonghu的數(shù)據(jù)表，如下圖所示。,3創(chuàng)建管理員信息數(shù)據(jù)表,創(chuàng)建一個(gè)用來存儲(chǔ)和管理留言板管理員的信息的數(shù)據(jù)表，名字為_guest，創(chuàng)建結(jié)果如下圖所示。,最終的數(shù)據(jù)庫設(shè)計(jì)窗口如下圖所示。,8.5留言板的逐步實(shí)現(xiàn),8.5.1創(chuàng)建數(shù)據(jù)庫鏈接 8.5.2留言板主頁面的動(dòng)態(tài)效果 8.5.3創(chuàng)建用戶留言頁面 8.5.4在留言板主頁面實(shí)現(xiàn)留言記錄導(dǎo)航,8.5.1創(chuàng)建數(shù)據(jù)庫鏈接,1定義系統(tǒng)DSN （數(shù)據(jù)源名稱） 2通過DSN實(shí)現(xiàn)連接,1定義系統(tǒng)DSN （數(shù)據(jù)源名稱）,（1）打開【控制面板】，雙擊其中的【管理工具】圖標(biāo)，在轉(zhuǎn)換到的【管理工具】窗口中可

8、以看到一個(gè)【數(shù)據(jù)源（ODBC）】圖標(biāo)。 （2）雙擊【數(shù)據(jù)源（ODBC）】圖標(biāo)，打開【ODBC數(shù)據(jù)源管理器】對(duì)話框，切換到【系統(tǒng)DSN】選項(xiàng)卡，如圖所示。,1定義系統(tǒng)DSN （數(shù)據(jù)源名稱）,（3）添加一個(gè)新的系統(tǒng)DSN名稱。單擊【添加】按鈕，彈出【創(chuàng)建新數(shù)據(jù)源】對(duì)話框，在其中選擇“Driver do Microsoft Access(*.mdb)”項(xiàng)，如圖所示。,1定義系統(tǒng)DSN （數(shù)據(jù)源名稱）,（4）單擊【完成】按鈕以后，彈出【ODBC Microsoft Access安裝】對(duì)話框，在其中定義數(shù)據(jù)源名并選取數(shù)據(jù)庫文件。設(shè)置后如右圖所示。,1定義系統(tǒng)DSN （數(shù)據(jù)源名稱）,（5）單擊【確定】按鈕

9、，完成數(shù)據(jù)庫的選擇，這時(shí)的【ODBC Microsoft Access安裝】對(duì)話框如下圖所示。 （6）經(jīng)過上面步驟的操作以后，在上圖所示的對(duì)話框中就會(huì)顯示一個(gè)新定義的數(shù)據(jù)源名稱。,2通過DSN實(shí)現(xiàn)連接,打開留言板站點(diǎn)的主頁面文檔（main.asp）。在【應(yīng)用程序】面板中的【數(shù)據(jù)庫】面板下單擊加號(hào)按鈕，在彈出的下拉菜單中單擊【數(shù)據(jù)源名稱】項(xiàng)，如圖所示。,2通過DSN實(shí)現(xiàn)連接,在【數(shù)據(jù)源名稱】對(duì)話框的【連接名稱】文本框中輸入數(shù)據(jù)源連接名稱，在【數(shù)據(jù)源名稱】下拉列表中選擇名字為“l(fā)iuyanban”的DSN，其他參數(shù)保持默認(rèn)值，如圖所示。,2通過DSN實(shí)現(xiàn)連接,單擊【確定】以后，【數(shù)據(jù)庫】面板就會(huì)出

10、現(xiàn)新定義的連接名稱，單擊它前面的加號(hào)按鈕展開，可以看到留言板數(shù)據(jù)庫中的兩個(gè)表，如圖所示。這時(shí)就完成數(shù)據(jù)庫和留言板站點(diǎn)的連接了，連接名是liuyb。,8.5.2留言板主頁面的動(dòng)態(tài)效果,1在【綁定】面板中定義記錄集 2將記錄集中數(shù)據(jù)綁定到表格域,1在【綁定】面板中定義記錄集,在Dreamweaver中打開留言板站點(diǎn)主頁面（main.asp）。打開【綁定】面板，單擊加號(hào)按鈕，在彈出的下拉菜單中執(zhí)行【記錄集（查詢）】命令，如圖所示。,1在【綁定】面板中定義記錄集,在彈出的【記錄集】對(duì)話框中，定義記錄集【名稱】為i、選擇數(shù)據(jù)庫【連接】名為liuyb、選擇數(shù)據(jù)庫中的【表格】為yonghu、選擇表中的字段（

11、域）、定義記錄排序的方法等，如圖所示。,1在【綁定】面板中定義記錄集,按照前面的步驟操作完成以后，在【綁定】面板中就會(huì)出現(xiàn)新定義的記錄集，單擊它前面的加號(hào)按鈕，可以展開記錄集，如圖所示。,2將記錄集中數(shù)據(jù)綁定到表格域,（1）重新編輯留言板主頁面。對(duì)留言板主頁面（main.asp）中的表格重新編輯，并刪除單元格中的一些文字和圖片，如圖所示。,2將記錄集中數(shù)據(jù)綁定到表格域,（2）將記錄集中的數(shù)據(jù)域（字段）綁定到表格相應(yīng)的單元格中。打開【綁定】面板，展開記錄集。用鼠標(biāo)將記錄集中的y_name字段拖放到頁面表格的左上角中，用同樣的方法將其他數(shù)據(jù)域（字段）拖動(dòng)到相應(yīng)的單元格中，結(jié)果如圖所示。,8.5.3

12、創(chuàng)建用戶留言頁面,1添加表單并布局表格 2添加表單域 3定義提交按鈕的服務(wù)器行為 4在【行為】面板定義表單提交的錯(cuò)誤檢查,1添加表單并布局表格,新建一個(gè)動(dòng)態(tài)頁面，并將其保存為“write.asp”，它就是用戶留言頁面。在【表單】工具欄中單擊【表單】按鈕，插入一個(gè)表單。然后在表單中插入一個(gè)表格，表格布局如圖所示。,2添加表單域,（1）添加“姓名”文本字段。 通過【表單】工具欄中的【文本字段】按鈕，完成在單元格中添加一個(gè)“文本字段”表單域。 在【屬性】面板中【文本域】下面的文本框中定義這個(gè)文本字段的名字為name，如圖所示。,2添加表單域,（2）添加OICQ、E-mail、個(gè)人主頁文本字段。OIC

13、Q、E-mail、個(gè)人主頁表單域的添加方法同上，均為文本字段，在【屬性】面板中各個(gè)文本字段的命名情況是： OICQ文本字段：oicq； E-mail文本字段：mail； 個(gè)人主頁文本字段：homepage。,2添加表單域,（3）添加“性別”單選按鈕表單域，性別“男”的單選按鈕屬性設(shè)置如圖所示。,2添加表單域,同樣的方法再設(shè)置一個(gè)性別“女”的單選按鈕。完成后的頁面效果如下圖所示。,2添加表單域,（4）添加“選擇頭像”表單域。 因?yàn)椤斑x擇頭像”右邊的單元格中要有若干備選的頭像圖片，所以我們應(yīng)該事先制作或者搜集一些卡通頭像圖片。復(fù)制以后的【文件】面板情況如圖所示。,2添加表單域,將光標(biāo)定位在“選擇頭

14、像”右邊的單元格中，分兩行插入8個(gè)頭像圖片。在每幅圖片的右邊添加一個(gè)單選按鈕。 名字統(tǒng)一定義為tx，第一個(gè)單選按鈕的【初始狀態(tài)】選擇為【已勾選】，其他的單選按鈕為【未選中】，每個(gè)單選按鈕【選定值】屬性的設(shè)置稍微麻煩一些。,2添加表單域,以第1個(gè)單選按鈕為例，先選中這個(gè)單選按鈕前面對(duì)應(yīng)的頭像圖片，在【屬性】面板中復(fù)制這個(gè)圖片【源文件】地址，如圖所示。,2添加表單域,再選中與頭像對(duì)應(yīng)的單選按鈕，在【屬性】面板的【選定值】處粘貼剛才復(fù)制的頭像圖片源文件地址，如圖所示。,2添加表單域,其他7個(gè)單選按鈕的【選定值】屬性都按照同樣的方法進(jìn)行設(shè)置。最后編輯頁面效果如圖所示。,2添加表單域,（5）添加“留言內(nèi)

15、容”文本區(qū)域。效果如圖8-60所示。,2添加表單域,（6）添加提交和重置按鈕。完成以后的頁面效果如圖所示。,2添加表單域,（7）添加隱藏區(qū)域。將光標(biāo)定位在“提交”按鈕的左邊，單擊【表單】工具欄中的【隱藏域】按鈕，在【屬性】面板中，定義它的名字為ip，在【值】文本框中輸入代碼： ,3定義提交按鈕的服務(wù)器行為,打開【綁定】面板，單擊加號(hào)按鈕，執(zhí)行【記錄集（查詢）】命令，并按照8.5.3介紹的方法綁定【記錄集】。 選中整個(gè)表格，打開【服務(wù)器行為】面板，單擊加號(hào)按鈕，選擇【插入記錄】命令。在【插入記錄】對(duì)話框中設(shè)置表單域與數(shù)據(jù)庫字段名一一對(duì)應(yīng)，在【表單元素】中依次選中元素，在下面的【列】中選擇與數(shù)據(jù)庫

16、相對(duì)應(yīng)的域。,4在【行為】面板定義表單提交的錯(cuò)誤檢查,選中【提交】按鈕，打開【行為】面板，單擊加號(hào)按鈕，在彈出的菜單中選擇【檢查表單】命令。 設(shè)置表單域和檢查事件：name選擇【必需的】；ociq選擇【數(shù)字】；mail選擇選擇【必需的】；【電子郵件地址】，homepage不選；liuyan選擇【必需的】，如圖所示。最后單擊【確定】按鈕，事件為onClick。,8.5.4在留言板主頁面實(shí)現(xiàn)留言記錄導(dǎo)航,1實(shí)現(xiàn)留言記錄導(dǎo)航 2留言內(nèi)容顯示問題的解決,1實(shí)現(xiàn)留言記錄導(dǎo)航,在main.asp頁面實(shí)現(xiàn)留言記錄導(dǎo)航主要包括控制一頁顯示留言數(shù)和翻頁按鈕（上一頁、下一頁、最前一頁、最后一頁）。 這個(gè)功能主要使

17、用【應(yīng)用程序】工具欄來完成。將工具欄切換到【應(yīng)用程序】工具欄后得應(yīng)用程序按鈕如圖所示。,1實(shí)現(xiàn)留言記錄導(dǎo)航,這里主要應(yīng)用【記錄集分頁】按鈕和【記錄集導(dǎo)航狀態(tài)】按鈕。 單擊【記錄集分頁】按鈕彈出如右上圖所示的下拉列表框； 單擊【記錄集導(dǎo)航狀態(tài)】按鈕彈出如右下圖所示的對(duì)話框。,1實(shí)現(xiàn)留言記錄導(dǎo)航,下面為留言板主頁面添加記錄導(dǎo)航功能： （1）將光標(biāo)定位在編輯頁面的下邊，單擊【記錄集導(dǎo)航狀態(tài)】按鈕，彈出【記錄集導(dǎo)航狀態(tài)】對(duì)話框，單擊【確定】按鈕,1實(shí)現(xiàn)留言記錄導(dǎo)航,（2）再回車另起一行，單擊【記錄集分頁】按鈕，彈出【記錄集導(dǎo)航條】對(duì)話框，如下圖所示。單擊【確定】按鈕，記錄導(dǎo)航條將以文字方式顯示。,1實(shí)現(xiàn)留言記錄導(dǎo)航,這樣就完成了顯示留言數(shù)量和翻頁的按鈕，如圖所示。,2留言內(nèi)容顯示問題的解決,需要解決的問題： 防止留言內(nèi)容支持html代碼； 防止留言很長(zhǎng)時(shí)main.asp頁面上的表格被自動(dòng)撐大（文字不會(huì)自動(dòng)換行） 用如下的操作解決上述問題：,2留言內(nèi)容顯示問題的解決,（1）將原來綁定到留言內(nèi)容單元格中的記錄集字段（）刪除，然后在這個(gè)單元格中添加【文本區(qū)域】表單域，添加好后的文本區(qū)域如圖所示。,2留言內(nèi)容顯示問題的解決,（2）選中剛才添加的文本區(qū)域，在【屬性】面板中設(shè)置【字符寬度】為66，【行數(shù)】為5，然后單擊【綁定到動(dòng)態(tài)源】按鈕，如圖所示。,2留言內(nèi)容