教學(xué)課題：14．1動(dòng)態(tài)網(wǎng)站的配置
教學(xué)目標(biāo)：了解什么是動(dòng)態(tài)網(wǎng)站，掌握在windows 7環(huán)境下和windows xp環(huán)境下創(chuàng)建動(dòng)態(tài)網(wǎng)站的方法。
教學(xué)重點(diǎn)：1、動(dòng)態(tài)網(wǎng)站創(chuàng)建的方法。
2、在Dreamweaver CS5環(huán)境下創(chuàng)建動(dòng)態(tài)網(wǎng)站的方法。
教學(xué)難點(diǎn)：在Dreamweaver CS5環(huán)境下創(chuàng)建動(dòng)態(tài)網(wǎng)站的方法。
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
演示案例1：配置一個(gè)動(dòng)態(tài)網(wǎng)站
【技能要點(diǎn)】
- 動(dòng)態(tài)網(wǎng)站的配置
- 制作一個(gè)動(dòng)態(tài)網(wǎng)頁
Windows 7環(huán)境下：
步驟：在IIS中配置動(dòng)態(tài)網(wǎng)站
（1）打開Internet信息服務(wù)（IIS）管理器：【控制面板】->【管理工具】->Internet信息服務(wù)（IIS）管理器。
（2） 右鍵單擊“網(wǎng)站”圖標(biāo)，在彈出的快捷菜單中選擇：添加網(wǎng)站，打開“添加網(wǎng)站”對(duì)話框，填寫網(wǎng)站名稱、物理路徑與端口號(hào)。如圖所示14-1和14-2。
網(wǎng)站名稱：chapter14
物理路徑：f:\Dreamweaver CS5案例教程\演示案例素材\chapter14
端口號(hào)：82
說明：端口號(hào)不要與其它網(wǎng)站相同。
|
|
圖14-1
圖14-2
Windows xp環(huán)境下：
步驟1：在IIS中配置動(dòng)態(tài)網(wǎng)站
（1）打開“F:\Dreamweaver CS5案例教程\演示案例素材”文件夾，右擊“chapter14”文件夾,在彈出的快捷菜單中選擇“共享和安全”，打開“chapter14屬性”對(duì)話框，選擇“web共享”選項(xiàng)卡。選中“共享文件夾”，如圖14-3所示。彈出“編輯別名”對(duì)話框，輸入“chapter14”單擊確定按鈕，如圖14-4所示。
圖14-3 圖14-4
（2）打開【控制面板】下的【管理工具】，雙擊【Internet信息服務(wù)】，打開【Internet信息服務(wù)】對(duì)話框，展開“默認(rèn)網(wǎng)站”，可以看到chapter14,動(dòng)態(tài)網(wǎng)站配置完畢。
步驟2：在Dreamweaver CS5環(huán)境下配置態(tài)網(wǎng)站
- 啟動(dòng)Dreamweaver CS5，選擇“站點(diǎn)”->“新建站點(diǎn)”，打開“站點(diǎn)設(shè)置對(duì)象”對(duì)話框，在“站點(diǎn)”選項(xiàng)下進(jìn)行如下設(shè)置。
- 站點(diǎn)名稱：chapter14。
- 本地站點(diǎn)文件夾：F:\Dreamweaver CS5案例教程\演示案例素材\chapter14\。如圖14-5所示。
圖14-5
- 選擇“服務(wù)器”選項(xiàng)，單擊“+”按鈕添加服務(wù)器。如圖14-6所示。
圖14-6
- 打開“添加服務(wù)器”對(duì)話框，進(jìn)行如下設(shè)置，然后單擊“保存”按鈕。如圖14-7所示
圖14-7
- 服務(wù)器名稱：服務(wù)器2
- 連接方法：本地/網(wǎng)絡(luò)
- 服務(wù)器文件夾： f:\Dreamweaver CS5案例教程\演示案例素材\chapter14
- Web URL: http://localhost:82/ (win7環(huán)境)
- Web URL: http://localhost:/chapter14/
(windws xp環(huán)境)
說明：
- 服務(wù)器名稱可以自定。
- 端口號(hào)要和IIS下的設(shè)置一致（win7環(huán)境下）
（4）返回到“添加服務(wù)器”對(duì)話框，勾選“測(cè)試”復(fù)選框，單擊“保存”按鈕，如要修改服務(wù)器配置，可以單擊下方“鉛筆”工具。
步驟3：創(chuàng)建并測(cè)試一個(gè)動(dòng)態(tài)網(wǎng)頁
（1）在Dreamweaver CS5環(huán)境下，打開“文件”面板，右鍵單擊“站點(diǎn)-study”彈出快捷菜單，選擇“新建文件”，將其命名為first.asp。
(2)雙擊first.asp將其打開，在設(shè)計(jì)視圖輸入文本：這是我的第一個(gè)ASP動(dòng)態(tài)網(wǎng)頁。保存后，按F12進(jìn)行游覽。
教學(xué)課題：14．2數(shù)據(jù)庫連接
教學(xué)目標(biāo)：掌握ACCESS數(shù)據(jù)庫的創(chuàng)建、ODBC數(shù)據(jù)源的配置和服務(wù)器行為的使用的方法。
教學(xué)重點(diǎn)：1、ACCESS數(shù)據(jù)庫的創(chuàng)建。
2、ODBC數(shù)據(jù)源的配置。
3、服務(wù)器行為的使用。
教學(xué)難點(diǎn)：服務(wù)器行為的使用。
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
演示案例2：制作淘寶用戶登錄與注冊(cè)網(wǎng)站
【技能要點(diǎn)】
- ACCESS數(shù)據(jù)庫的創(chuàng)建。
- ODBC數(shù)據(jù)源的配置。
- 服務(wù)器行為的使用。
【操作步驟】
步驟1、Access數(shù)據(jù)庫的創(chuàng)建
（1）啟動(dòng)Microsfot Access2003,選擇【文件】->【新建】,打開【新建文件】面板，單擊【空數(shù)據(jù)庫】，打開【文件新建數(shù)據(jù)庫】對(duì)話框，輸入文件名：data.mdb；選擇保存路徑為：f:\Dreamweaver CS案例教程\演示案例素材\chapter14，單擊【創(chuàng)建】按鈕。如圖14-8所示
圖14-8
（2）打開data.mdb數(shù)據(jù)庫設(shè)計(jì)器，選擇【表】對(duì)象，雙擊右邊【使用設(shè)計(jì)器創(chuàng)建表】，打開“表1”設(shè)計(jì)器。分別輸入以下字段：
|
字段名 |
字段類型 |
說明 |
|
name |
文本 |
姓名 |
|
pwd |
文本 |
密碼 |
|
gen |
文本 |
性別 |
|
age |
數(shù)值 |
年齡 |
|
|
文本 |
電子郵箱 |
并將表名保存為：user。
（3）雙擊打開user表，輸入一條記錄：
步驟2、ODBC數(shù)據(jù)源的配置
（1）打開【控制面板】->【管理工具】->【數(shù)據(jù)源（ODBC）】
(2)打開【ODBC數(shù)據(jù)源管理器】窗口，選擇【系統(tǒng)DSN】選項(xiàng)卡，單擊【添加】按鈕。如圖14-9所示
圖14-9
（3）打開【創(chuàng)建新數(shù)據(jù)源】窗口，選擇【Microsoft Access Driver(*.mdb)】單擊【完成】按鈕。如圖14-10所示。
圖14-10
（13）打開【ODBC Microsoft Access安裝】窗口，輸入數(shù)據(jù)源名：study，單擊【選擇】按鈕，選取數(shù)據(jù)庫。如圖14-11所示。
圖14-11
（5）打開【選擇數(shù)據(jù)庫】窗口，選擇：f:\Dreamweaver CS案例教程\演示案例素材\chapter14\data.mdb，單擊【確定】按鈕。如圖14-12所示。
圖14-12
（6）返回【ODBC Microsoft Access安裝】窗口，單擊【確定】按鈕，返回【ODBC數(shù)據(jù)源管理器】窗口，在【系統(tǒng)DSN】選項(xiàng)卡下多一項(xiàng)剛添加的數(shù)據(jù)源：study。單擊【確定】按鈕。
步驟3、創(chuàng)建并配置動(dòng)態(tài)網(wǎng)站。
本例仍使用14.1創(chuàng)建的動(dòng)態(tài)網(wǎng)站：chapter14。
步驟4、制作登錄表單頁面：login.asp
- 打開f:\Dreamweaver CS案例教程\演示案例素材\chapter14\演示案例2\login.asp頁面。制作如圖14-13所示用戶登錄表單。
圖14-13
說明：
- 用戶名框的名字是name。
- 密碼框的名字是pwd。
（2）創(chuàng)建數(shù)據(jù)庫綁定，打開【窗口】->【數(shù)據(jù)庫】面板，單擊“+”按鈕，選擇“數(shù)據(jù)源名稱（DSN）”，如圖14-14所示。
圖14-14 圖14-15
（3）打開【數(shù)據(jù)源名稱（DSN）】窗口，輸入連接名稱：conn；選擇數(shù)據(jù)源名稱（DSN）：study。單擊【測(cè)試】按鈕，彈出“成功創(chuàng)建鏈接腳本。”窗口。所圖14-15所示，說明數(shù)據(jù)庫鏈接成功，單擊“確定”按鈕。此時(shí)，在數(shù)據(jù)庫面板下會(huì)出現(xiàn)數(shù)據(jù)源鏈接名：conn。
（13）在login.asp頁面標(biāo)簽區(qū)域中選擇form標(biāo)簽，打開【窗口】->【服務(wù)器行為】面板，單擊“+”按鈕，在彈出的下拉菜單下選擇【用戶身份驗(yàn)證】->【登錄用戶】。如圖14-16所示
圖14-16
- 打開“登錄用戶”窗口，進(jìn)行如圖14-17所示設(shè)置：
- 從表單獲取輸入：form1
- 用戶名字段：name
- 密碼字段：pwd
- 使用連接驗(yàn)證：conn
- 表格：user
- 用戶名列：name
- 密碼列：pwd
- 如果成功轉(zhuǎn)到success.asp
- 如果登錄失敗，轉(zhuǎn)到：fail.asp
圖14-17
- 保存頁面，按F12瀏覽，在用戶中輸入：admin；密碼中輸入：888888。單擊“登錄”按鈕，則跳轉(zhuǎn)到success.asp頁面，如圖14-18所示。
圖14-18
步驟5、制作用戶注冊(cè)頁面：reg.asp
（1）打開f:\Dreamweaver CS案例教程\演示案例素材\chapter14\演示案例2\reg.asp，制作如圖14-19所示用戶注冊(cè)表單。
圖14-19
說明：
- 登錄名框的名字：name。
- 密碼框的名字：pwd。
- 電子郵箱框的名字：email。
- 性別兩個(gè)單選按鈕的名字均為：gen，選定值分別是“男”和“女”。
- 年齡框的名字：age。
（2）在reg.asp頁面的標(biāo)簽區(qū)域選擇form標(biāo)簽，單擊【服務(wù)器行為】面板上“+”按鈕，從彈出的菜單中選擇【插入記錄】，打開“插入記錄”對(duì)話框，進(jìn)行如下設(shè)置，如圖14-20所示。
- 連接：conn
- 插入到表格：user
- 插入后，轉(zhuǎn)到：login.asp
- 獲取值自：form1
- 表單元素：
name插入到列中“name”(文本)
Pwd插入到列中“pwd”(文本)
email插入到列中“email”(文本）
gen插入到列中“gen”(文本)
age插入到列中“age”（數(shù)值） 
圖14-20
（3）單擊“確定”按鈕后，在“服務(wù)器行為”面板上會(huì)出現(xiàn)一條“插入記錄”的行為。
（13）按F12進(jìn)行瀏覽，輸入表單各項(xiàng)值后，單擊“提交注冊(cè)信息”按鈕，就會(huì)跳轉(zhuǎn)到login.asp頁面，用新注冊(cè)的用戶信息進(jìn)行登錄。
說明：
- 登錄成功頁面：seccess.asp。
- 登錄失敗頁：fail.asp如圖14-21所示。
圖14-21
教學(xué)課題：14．3記錄集的顯示、添加、修改與刪除
教學(xué)目標(biāo)：掌握重復(fù)區(qū)域的制作和添加、修改、刪除記錄的方法。
教學(xué)重點(diǎn)：1、重復(fù)區(qū)域的制作。
2、添加、修改、刪除記錄的方法。
教學(xué)難點(diǎn)：添加、修改、刪除記錄的方法。
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：1節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
演示案例3：制作留言簿頁面
【技能要點(diǎn)】
- 重復(fù)區(qū)域的制作
- 添加、修改、刪除記錄的方法
【操作步驟】
步驟1：制作留言簿的顯示頁面：disp.asp
（1）添加數(shù)據(jù)表。打開演示案例2中所創(chuàng)建的數(shù)據(jù)庫f:\Dreamweaver CS5案例教程\演示案例素材\chpater14\data.mdb。選擇“表”對(duì)象，使用有表設(shè)計(jì)器創(chuàng)建新表，結(jié)構(gòu)如下：
|
ltitle |
文本 |
留言標(biāo)題 |
|
lname |
文本 |
留言人姓名 |
|
ltime |
日期/時(shí)間 |
留言時(shí)間 |
|
cont |
文本 |
留言內(nèi)容 |
并將其保存表名為：ly。
（2）打開f:\Dreamweaver CS5案例教程\演示案例素材\chpater14\演示案例3\disp.asp。選擇【窗口】->【綁定】，打開【綁定】面板，單擊“+”按鈕，在彈出的菜單中選取“記錄集（查詢）”。打開“記錄集”對(duì)話框，進(jìn)行如圖14-22所示設(shè)置：
圖14-22
- 單擊“確定”按鈕，在“綁定”面板下就會(huì)出現(xiàn)一條“記錄集（Recordset1）”,說明已經(jīng)綁定該記錄。
- 在disp.asp頁面下制作如下表格。并將記錄集Recordset1下面ltilte字段插入到“留言標(biāo)題”下面的單元格內(nèi)，將lname字段插入到“留言人”下面的單元格內(nèi)，將ltime字段插入到“留言時(shí)間”下面的單元格內(nèi)。如圖14-23所示。
圖14-23
- 添加“刪除記錄”的按鈕。在最后一列的第二行的單元格上輸入“我要留言”，并將鏈接到add.asp頁面。在第三行的單元格上插入一個(gè)表單，在表單內(nèi)插入一個(gè)“提交表單”按鈕，將其值設(shè)為：刪除。選中“刪除”按鈕，添加【服務(wù)器行為】->【刪除記錄】，進(jìn)行如圖14-24所示設(shè)置。
圖14-24
（5）單擊“確定”按鈕，在“服務(wù)器行為”面板下會(huì)有一條“刪除記錄”的行為。按F12進(jìn)行瀏覽。
說明：可以先在ly表中輸入一些測(cè)試記錄，當(dāng)記錄為空時(shí)該按鈕不可用。
（6）創(chuàng)建重復(fù)區(qū)域。選中表格的最后一行，單擊【服務(wù)器行為】面板下“+”按鈕，在彈出的菜單中選擇【重復(fù)區(qū)域】，打開“重復(fù)區(qū)域”對(duì)話框，如圖14-25所示。
圖14-25
- 完成disp.asp頁面的制作，瀏覽效果為：
步驟2：制作留言簿的添加頁面：add.asp
- 打開f:\Dreamweaver CS5案例教程\演示案例素材\chpater14\演示案例3\add.asp頁面，插入如下表單。
說明：
- 標(biāo)題文本框的名字：ltitle
- 留言人文本框的名字：lname
- 時(shí)間文本框的名字：ltime
- 留言內(nèi)容文本區(qū)域的名字：lnr
- 時(shí)間文本框的的初始值為：<%=date()%>
- 選中form標(biāo)簽，添加【服務(wù)器行為】->【插入記錄】，進(jìn)行如圖14-26所示設(shè)置。
圖14-26
(3)單擊“確定”按鈕，完成添加留言頁面add.asp的制作。按F12瀏覽，添加記錄，完成跳轉(zhuǎn)的留言顯示頁disp.asp。
步驟3、制作查看留言內(nèi)容頁面：deta.asp
（1）打開deta.asp頁面，插入如圖14-27所示表單。綁定記錄集Recordset1,將ltitle字段插入到“標(biāo)題”后面的文本框內(nèi)；將lname字段插入到“留言人”后面的文本框內(nèi)；將ltime字段插入到“留言時(shí)間”后面的文本框內(nèi)；將cont字段插入到“留言內(nèi)容”后面的文本框內(nèi)。最下面的“返回留言簿”鏈接到disp.asp頁面。
圖14-27
(2)返回disp.asp頁面，選中“留言標(biāo)題”下面的動(dòng)態(tài)文本{Recordset1.ltitle}，添加【服務(wù)器行為】->【轉(zhuǎn)到詳細(xì)頁】，進(jìn)行如圖14-28所示設(shè)置。
圖14-28
（3）打開deta.asp頁面。雙擊【綁定】下記錄集Recordset1，打開“記錄集”對(duì)話框，修改“篩選”項(xiàng)的設(shè)置，如圖14-29所示。
圖14-29
（13）單擊【確定】按鈕，完成查看留言頁面的制作。返回到disp.asp頁面，單擊每個(gè)留言的標(biāo)題，可以查看相應(yīng)的留言詳細(xì)內(nèi)容。
