網(wǎng)頁設(shè)計演講教程PPT

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

2、s組件】，打開【W(wǎng)indows組件向?qū)А繉υ捒颉?（4）選擇【Internet信息服務(wù)（IIS）】復(fù)選項。8（5）單擊【下一步】按鈕，開始安裝IIS服務(wù)器。9安裝完成后的窗口如下圖所示。102設(shè)置IIS首先在D盤下面建立一個“l(fā)iuyanban”的文件夾，用來存放留言板動態(tài)頁面文件。其次通過以下的步驟來設(shè)置站點虛擬目錄：（1）從【控制面板】窗口打開【管理工具】，在打開的【管理工具】窗口中選擇【Internet信息服務(wù)快捷方式】。112設(shè)置IIS（2）雙擊【Internet信息服務(wù)快捷方式】選項，在彈出的【Internet信息服務(wù)】窗口左邊窗格中，右擊【默認網(wǎng)站】項，在彈出的菜單中執(zhí)行【新建】|

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

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

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

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

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

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

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

10、數(shù)據(jù)庫和留言板站點的連接了，連接名是liuyb。408.5.2留言板主頁面的動態(tài)效果1在【綁定】面板中定義記錄集2將記錄集中數(shù)據(jù)綁定到表格域411在【綁定】面板中定義記錄集在Dreamweaver中打開留言板站點主頁面（main.asp）。打開【綁定】面板，單擊加號按鈕，在彈出的下拉菜單中執(zhí)行【記錄集（查詢）】命令，如圖所示。421在【綁定】面板中定義記錄集在彈出的【記錄集】對話框中，定義記錄集【名稱】為i、選擇數(shù)據(jù)庫【連接】名為liuyb、選擇數(shù)據(jù)庫中的【表格】為yonghu、選擇表中的字段（域）、定義記錄排序的方法等，如圖所示。431在【綁定】面板中定義記錄集按照前面的步驟操作完成以后，在

11、【綁定】面板中就會出現(xiàn)新定義的記錄集，單擊它前面的加號按鈕，可以展開記錄集，如圖所示。442將記錄集中數(shù)據(jù)綁定到表格域（1）重新編輯留言板主頁面。對留言板主頁面（main.asp）中的表格重新編輯，并刪除單元格中的一些文字和圖片，如圖所示。452將記錄集中數(shù)據(jù)綁定到表格域（2）將記錄集中的數(shù)據(jù)域（字段）綁定到表格相應(yīng)的單元格中。打開【綁定】面板，展開記錄集。用鼠標將記錄集中的y_name字段拖放到頁面表格的左上角中，用同樣的方法將其他數(shù)據(jù)域（字段）拖動到相應(yīng)的單元格中，結(jié)果如圖所示。468.5.3創(chuàng)建用戶留言頁面1添加表單并布局表格2添加表單域3定義提交按鈕的服務(wù)器行為4在【行為】面板定義表單

12、提交的錯誤檢查471添加表單并布局表格新建一個動態(tài)頁面，并將其保存為“write.asp”，它就是用戶留言頁面。在【表單】工具欄中單擊【表單】按鈕，插入一個表單。然后在表單中插入一個表格，表格布局如圖所示。482添加表單域（1）添加“姓名”文本字段。通過【表單】工具欄中的【文本字段】按鈕，完成在單元格中添加一個“文本字段”表單域。在【屬性】面板中【文本域】下面的文本框中定義這個文本字段的名字為name，如圖所示。492添加表單域（2）添加OICQ、E-mail、個人主頁文本字段。OICQ、E-mail、個人主頁表單域的添加方法同上，均為文本字段，在【屬性】面板中各個文本字段的命名情況是：OIC

13、Q文本字段：oicq；E-mail文本字段：mail；個人主頁文本字段：homepage。502添加表單域（3）添加“性別”單選按鈕表單域，性別“男”的單選按鈕屬性設(shè)置如圖所示。512添加表單域同樣的方法再設(shè)置一個性別“女”的單選按鈕。完成后的頁面效果如下圖所示。522添加表單域（4）添加“選擇頭像”表單域。因為“選擇頭像”右邊的單元格中要有若干備選的頭像圖片，所以我們應(yīng)該事先制作或者搜集一些卡通頭像圖片。復(fù)制以后的【文件】面板情況如圖所示。532添加表單域?qū)⒐鈽硕ㄎ辉凇斑x擇頭像”右邊的單元格中，分兩行插入8個頭像圖片。在每幅圖片的右邊添加一個單選按鈕。名字統(tǒng)一定義為tx，第一個單選按鈕的【初

14、始狀態(tài)】選擇為【已勾選】，其他的單選按鈕為【未選中】，每個單選按鈕【選定值】屬性的設(shè)置稍微麻煩一些。542添加表單域以第1個單選按鈕為例，先選中這個單選按鈕前面對應(yīng)的頭像圖片，在【屬性】面板中復(fù)制這個圖片【源文件】地址，如圖所示。552添加表單域再選中與頭像對應(yīng)的單選按鈕，在【屬性】面板的【選定值】處粘貼剛才復(fù)制的頭像圖片源文件地址，如圖所示。562添加表單域其他7個單選按鈕的【選定值】屬性都按照同樣的方法進行設(shè)置。最后編輯頁面效果如圖所示。572添加表單域（5）添加“留言內(nèi)容”文本區(qū)域。效果如圖8-60所示。582添加表單域（6）添加提交和重置按鈕。完成以后的頁面效果如圖所示。592添加表單

15、域（7）添加隱藏區(qū)域。將光標定位在“提交”按鈕的左邊，單擊【表單】工具欄中的【隱藏域】按鈕，在【屬性】面板中，定義它的名字為ip，在【值】文本框中輸入代碼：603定義提交按鈕的服務(wù)器行為打開【綁定】面板，單擊加號按鈕，執(zhí)行【記錄集（查詢）】命令，并按照8.5.3介紹的方法綁定【記錄集】。選中整個表格，打開【服務(wù)器行為】面板，單擊加號按鈕，選擇【插入記錄】命令。在【插入記錄】對話框中設(shè)置表單域與數(shù)據(jù)庫字段名一一對應(yīng)，在【表單元素】中依次選中元素，在下面的【列】中選擇與數(shù)據(jù)庫相對應(yīng)的域。614在【行為】面板定義表單提交的錯誤檢查選中【提交】按鈕，打開【行為】面板，單擊加號按鈕，在彈出的菜單中選擇【

16、檢查表單】命令。設(shè)置表單域和檢查事件：name選擇【必需的】；ociq選擇【數(shù)字】；mail選擇選擇【必需的】；【電子郵件地址】，homepage不選；liuyan選擇【必需的】，如圖所示。最后單擊【確定】按鈕，事件為onClick。628.5.4在留言板主頁面實現(xiàn)留言記錄導(dǎo)航1實現(xiàn)留言記錄導(dǎo)航2留言內(nèi)容顯示問題的解決631實現(xiàn)留言記錄導(dǎo)航在main.asp頁面實現(xiàn)留言記錄導(dǎo)航主要包括控制一頁顯示留言數(shù)和翻頁按鈕（上一頁、下一頁、最前一頁、最后一頁）。這個功能主要使用【應(yīng)用程序】工具欄來完成。將工具欄切換到【應(yīng)用程序】工具欄后得應(yīng)用程序按鈕如圖所示。641實現(xiàn)留言記錄導(dǎo)航這里主要應(yīng)用【記錄集分

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