網(wǎng)頁(yè)設(shè)計(jì)演講教程ppt課件

1、網(wǎng)頁(yè)設(shè)計(jì)教程2022/7/161本章要點(diǎn)配置動(dòng)態(tài)效力器IIS建立建立動(dòng)態(tài)站點(diǎn)創(chuàng)建動(dòng)態(tài)頁(yè)面創(chuàng)建數(shù)據(jù)庫(kù)鏈接制造表單文檔8.1動(dòng)態(tài)站點(diǎn)概述何為動(dòng)態(tài)？一種具有“交互性的頁(yè)面效果，即網(wǎng)頁(yè)會(huì)根據(jù)用戶的要求和選擇而動(dòng)態(tài)改動(dòng)和呼應(yīng)。制造動(dòng)態(tài)網(wǎng)頁(yè)需求做的任務(wù)有：第一，要在個(gè)人電腦上調(diào)試動(dòng)態(tài)網(wǎng)頁(yè)。第二，運(yùn)用數(shù)據(jù)庫(kù)技術(shù)。第三，在Dreamweaver中建立動(dòng)態(tài)站點(diǎn)。8.2配置IIS效力器1安裝IIS效力器2設(shè)置IIS3測(cè)試ASP動(dòng)態(tài)網(wǎng)頁(yè)1安裝IIS效力器1執(zhí)行【開(kāi)場(chǎng)】|【控制面板】命令，翻開(kāi)【控制面板】。2雙擊【添加或刪除程序】圖標(biāo)，翻開(kāi)【添加或刪除程序】窗口。3單擊【添加/刪除Windows組件】，翻開(kāi)【W(wǎng)ind

2、ows組件導(dǎo)游】對(duì)話框。4選擇【Internet信息效力IIS】復(fù)選項(xiàng)。5單擊【下一步】按鈕，開(kāi)場(chǎng)安裝IIS效力器。安裝完成后的窗口如以下圖所示。2設(shè)置IIS首先在D盤下面建立一個(gè)“l(fā)iuyanban的文件夾，用來(lái)存放留言板動(dòng)態(tài)頁(yè)面文件。其次經(jīng)過(guò)以下的步驟來(lái)設(shè)置站點(diǎn)虛擬目錄：1從【控制面板】窗口翻開(kāi)【管理工具】，在翻開(kāi)的【管理工具】窗口中選擇【Internet信息效力快捷方式】。2設(shè)置IIS2雙擊【Internet信息效力快捷方式】選項(xiàng)，在彈出的【Internet信息效力】窗口左邊窗格中，右擊【默許網(wǎng)站】項(xiàng)，在彈出的菜單中執(zhí)行【新建】|【虛擬目錄】命令，彈出【虛擬目錄創(chuàng)建導(dǎo)游】窗口，如右圖所示

3、。2設(shè)置IIS3單擊【下一步】按鈕繼續(xù)。如左圖所示，在【別名】下面的文本框中輸入“l(fā)iuyanban。單擊【下一步】按鈕繼續(xù)。如右圖所示，在【目錄】下邊的文本框中輸入“D:liuyanban，或者單擊【閱讀】按鈕找到D盤的“l(fā)iuyanban文件夾。3測(cè)試ASP動(dòng)態(tài)網(wǎng)頁(yè)在【Internet信息效力】窗口右邊的窗格中找到建立的ASP動(dòng)態(tài)頁(yè)面，右鍵單擊后，在彈出的快捷菜單中選擇【閱讀】項(xiàng)即可，如圖8-15所示。8.3創(chuàng)建留言板主頁(yè)面8.3.1建立動(dòng)態(tài)站點(diǎn)8.3.2創(chuàng)建留言板頁(yè)面8.3.1建立動(dòng)態(tài)站點(diǎn)1定義站點(diǎn)。8.3.1建立動(dòng)態(tài)站點(diǎn)2選擇效力器技術(shù)。8.3.1建立動(dòng)態(tài)站點(diǎn)3選擇存放的本地文件夾。8

4、.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)程效力器參與，所以選擇【否】項(xiàng)。8.3.1建立動(dòng)態(tài)站點(diǎn)6單擊【下一步】按鈕繼續(xù)。窗口顯示了所填寫的信息，確認(rèn)一下。假設(shè)發(fā)現(xiàn)有錯(cuò)，可以單擊【上一步】按鈕前往修正設(shè)置，確認(rèn)無(wú)誤后就可以單擊【完成】按鈕。這時(shí)，動(dòng)態(tài)站點(diǎn)就定義完成了，如今可以在Dreamweaver 8中進(jìn)展動(dòng)態(tài)網(wǎng)頁(yè)的設(shè)計(jì)了。8.3.2創(chuàng)建留言板頁(yè)面1創(chuàng)建留言板主頁(yè)面ASP文檔。2用表格規(guī)劃留言板主頁(yè)面。3選擇這個(gè)表格，翻開(kāi)【屬性】面板，在其中設(shè)置表格及其單元格的寬度和高度。4拆分表格第1行右邊的單元格，分成

5、兩列。5在表格中插入一些顯示元素。8.3.2創(chuàng)建留言板頁(yè)面6先將images文件夾下的圖片依次插入表格第一行最右邊的單元格中，然后分別在每個(gè)單元格中輸入相應(yīng)的信息，如以下圖所示。7最后再將整個(gè)表格的【背景顏色】設(shè)置為淺藍(lán)色#66CCFF。8.4用Access 2003創(chuàng)建數(shù)據(jù)庫(kù) 1創(chuàng)建空數(shù)據(jù)庫(kù)文檔2創(chuàng)建留言板用戶信息表3創(chuàng)建管理員信息數(shù)據(jù)表1創(chuàng)建空數(shù)據(jù)庫(kù)文檔1新建一個(gè)名為data的文件夾，然后將空數(shù)據(jù)庫(kù)文件保管在data文件夾下，文件名為liuyanban_data.mdb。1創(chuàng)建空數(shù)據(jù)庫(kù)文檔2單擊【創(chuàng)建】按鈕創(chuàng)建一個(gè)名為liuyanban_data的數(shù)據(jù)庫(kù)文件，同時(shí)出現(xiàn)一個(gè)相應(yīng)的數(shù)據(jù)庫(kù)設(shè)計(jì)窗

6、口，如圖8-30所示。1創(chuàng)建空數(shù)據(jù)庫(kù)文檔3雙擊【運(yùn)用設(shè)計(jì)器創(chuàng)建表】命令，彈出一個(gè)表設(shè)計(jì)器窗口，如圖8-31所示。表的構(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ì)完成以后，封鎖表設(shè)計(jì)器窗口，可以看到數(shù)據(jù)庫(kù)設(shè)計(jì)窗口中多了一個(gè)名字為yonghu的數(shù)據(jù)表，如以下圖所示。3創(chuàng)建管理員信息數(shù)據(jù)表創(chuàng)建一個(gè)用來(lái)存儲(chǔ)和管理留言板管理員的信息的數(shù)據(jù)表，名字為_(kāi)guest，創(chuàng)建結(jié)果如以下圖所示。最終的數(shù)據(jù)庫(kù)設(shè)計(jì)窗口如以下圖所示。8.5留言板的逐漸實(shí)現(xiàn)8.5.1創(chuàng)建數(shù)據(jù)庫(kù)鏈接8.5.2留言

7、板主頁(yè)面的動(dòng)態(tài)效果8.5.3創(chuàng)建用戶留言頁(yè)面8.5.4在留言板主頁(yè)面實(shí)現(xiàn)留言記錄導(dǎo)航8.5.1創(chuàng)建數(shù)據(jù)庫(kù)鏈接1定義系統(tǒng)DSN 數(shù)據(jù)源稱號(hào)2經(jīng)過(guò)DSN實(shí)現(xiàn)銜接1定義系統(tǒng)DSN 數(shù)據(jù)源稱號(hào)1翻開(kāi)【控制面板】，雙擊其中的【管理工具】圖標(biāo)，在轉(zhuǎn)換到的【管理工具】窗口中可以看到一個(gè)【數(shù)據(jù)源ODBC】圖標(biāo)。2雙擊【數(shù)據(jù)源ODBC】圖標(biāo)，翻開(kāi)【ODBC數(shù)據(jù)源管理器】對(duì)話框，切換到【系統(tǒng)DSN】選項(xiàng)卡，如下圖。1定義系統(tǒng)DSN 數(shù)據(jù)源稱號(hào)3添加一個(gè)新的系統(tǒng)DSN稱號(hào)。單擊【添加】按鈕，彈出【創(chuàng)建新數(shù)據(jù)源】對(duì)話框，在其中選擇“Driver do Microsoft Access(*.mdb)項(xiàng)，如下圖。1定義系

8、統(tǒng)DSN 數(shù)據(jù)源稱號(hào)4單擊【完成】按鈕以后，彈出【ODBC Microsoft Access安裝】對(duì)話框，在其中定義數(shù)據(jù)源名并選取數(shù)據(jù)庫(kù)文件。設(shè)置后如右圖所示。1定義系統(tǒng)DSN 數(shù)據(jù)源稱號(hào)5單擊【確定】按鈕，完成數(shù)據(jù)庫(kù)的選擇，這時(shí)的【ODBC Microsoft Access安裝】對(duì)話框如以下圖所示。6經(jīng)過(guò)上面步驟的操作以后，在上圖所示的對(duì)話框中就會(huì)顯示一個(gè)新定義的數(shù)據(jù)源稱號(hào)。2經(jīng)過(guò)DSN實(shí)現(xiàn)銜接翻開(kāi)留言板站點(diǎn)的主頁(yè)面文檔main.asp。在【運(yùn)用程序】面板中的【數(shù)據(jù)庫(kù)】面板下單擊加號(hào)按鈕，在彈出的下拉菜單中單擊【數(shù)據(jù)源稱號(hào)】項(xiàng)，如下圖。2經(jīng)過(guò)DSN實(shí)現(xiàn)銜接在【數(shù)據(jù)源稱號(hào)】對(duì)話框的【銜接稱號(hào)】

9、文本框中輸入數(shù)據(jù)源銜接稱號(hào)，在【數(shù)據(jù)源稱號(hào)】下拉列表中選擇名字為“l(fā)iuyanban的DSN，其他參數(shù)堅(jiān)持默許值，如下圖。2經(jīng)過(guò)DSN實(shí)現(xiàn)銜接單擊【確定】以后，【數(shù)據(jù)庫(kù)】面板就會(huì)出現(xiàn)新定義的銜接稱號(hào)，單擊它前面的加號(hào)按鈕展開(kāi)，可以看到留言板數(shù)據(jù)庫(kù)中的兩個(gè)表，如下圖。這時(shí)就完成數(shù)據(jù)庫(kù)和留言板站點(diǎn)的銜接了，銜接名是liuyb。8.5.2留言板主頁(yè)面的動(dòng)態(tài)效果1在【綁定】面板中定義記錄集2將記錄集中數(shù)據(jù)綁定到表格域1在【綁定】面板中定義記錄集在Dreamweaver中翻開(kāi)留言板站點(diǎn)主頁(yè)面main.asp。翻開(kāi)【綁定】面板，單擊加號(hào)按鈕，在彈出的下拉菜單中執(zhí)行【記錄集查詢】命令，如下圖。1在【綁定】面

10、板中定義記錄集在彈出的【記錄集】對(duì)話框中，定義記錄集【稱號(hào)】為i、選擇數(shù)據(jù)庫(kù)【銜接】名為liuyb、選擇數(shù)據(jù)庫(kù)中的【表格】為yonghu、選擇表中的字段域、定義記錄排序的方法等，如下圖。1在【綁定】面板中定義記錄集按照前面的步驟操作完成以后，在【綁定】面板中就會(huì)出現(xiàn)新定義的記錄集，單擊它前面的加號(hào)按鈕，可以展開(kāi)記錄集，如下圖。2將記錄集中數(shù)據(jù)綁定到表格域1重新編輯留言板主頁(yè)面。對(duì)留言板主頁(yè)面main.asp中的表格重新編輯，并刪除單元格中的一些文字和圖片，如下圖。2將記錄集中數(shù)據(jù)綁定到表格域2將記錄集中的數(shù)據(jù)域字段綁定到表格相應(yīng)的單元格中。翻開(kāi)【綁定】面板，展開(kāi)記錄集。用鼠標(biāo)將記錄集中的y_n

11、ame字段拖放到頁(yè)面表格的左上角中，用同樣的方法將其他數(shù)據(jù)域字段拖動(dòng)到相應(yīng)的單元格中，結(jié)果如下圖。8.5.3創(chuàng)建用戶留言頁(yè)面1添加表單并規(guī)劃表格2添加表單域3定義提交按鈕的效力器行為4在【行為】面板定義表單提交的錯(cuò)誤檢查1添加表單并規(guī)劃表格新建一個(gè)動(dòng)態(tài)頁(yè)面，并將其保管為“write.asp，它就是用戶留言頁(yè)面。在【表單】工具欄中單擊【表單】按鈕，插入一個(gè)表單。然后在表單中插入一個(gè)表格，表格規(guī)劃如下圖。2添加表單域1添加“姓名文本字段。經(jīng)過(guò)【表單】工具欄中的【文本字段】按鈕，完成在單元格中添加一個(gè)“文本字段表單域。在【屬性】面板中【文本域】下面的文本框中定義這個(gè)文本字段的名字為name，如下圖。

12、2添加表單域2添加OICQ、個(gè)人主頁(yè)文本字段。OICQ、個(gè)人主頁(yè)表單域的添加方法同上，均為文本字段，在【屬性】面板中各個(gè)文本字段的命名情況是：OICQ文本字段：oicq；文本字段：mail；個(gè)人主頁(yè)文本字段：homepage。2添加表單域3添加“性別單項(xiàng)選擇按鈕表單域，性別“男的單項(xiàng)選擇按鈕屬性設(shè)置如下圖。2添加表單域同樣的方法再設(shè)置一個(gè)性別“女的單項(xiàng)選擇按鈕。完成后的頁(yè)面效果如以下圖所示。2添加表單域4添加“選擇頭像表單域。由于“選擇頭像右邊的單元格中要有假設(shè)干備選的頭像圖片，所以我們應(yīng)該事先制造或者搜集一些卡通頭像圖片。復(fù)制以后的【文件】面板情況如下圖。2添加表單域?qū)⒐鈽?biāo)定位在“選擇頭像右

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

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

15、提交的錯(cuò)誤檢查選中【提交】按鈕，翻開(kāi)【行為】面板，單擊加號(hào)按鈕，在彈出的菜單中選擇【檢查表單】命令。設(shè)置表單域和檢查事件：name選擇【必需的】；ociq選擇【數(shù)字】；mail選擇選擇【必需的】；【電子郵件地址】，homepage不選；liuyan選擇【必需的】，如下圖。最后單擊【確定】按鈕，事件為onClick。8.5.4在留言板主頁(yè)面實(shí)現(xiàn)留言記錄導(dǎo)航1實(shí)現(xiàn)留言記錄導(dǎo)航2留言內(nèi)容顯示問(wèn)題的處理1實(shí)現(xiàn)留言記錄導(dǎo)航在main.asp頁(yè)面實(shí)現(xiàn)留言記錄導(dǎo)航主要包括控制一頁(yè)顯示留言數(shù)和翻頁(yè)按鈕上一頁(yè)、下一頁(yè)、最前一頁(yè)、最后一頁(yè)。這個(gè)功能主要運(yùn)用【運(yùn)用程序】工具欄來(lái)完成。將工具欄切換到【運(yùn)用程序】工具欄

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