網(wǎng)頁制作：項目13使用表單制作注冊網(wǎng)頁--ppt.ppt

1、主講：,網(wǎng)頁設(shè)計與制作Dreamweaver 8,項目十三 使用表單制作注冊網(wǎng)頁,任務(wù)一 創(chuàng)建表單,任務(wù)二 驗證表單,項目十三： 使用表單制作注冊網(wǎng)頁,任務(wù)三 測試表單,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),任務(wù)一 創(chuàng)建表單,本任務(wù)主要介紹插入表單及文本域、文本區(qū)域、單選按鈕、復(fù)選框、列表/菜單、隱藏域、按鈕及其屬性設(shè)置的基本方法。通過本任務(wù)的學(xué)習(xí)，掌握的內(nèi)容主要有： 1、表單的工作過程 （1）訪問者在瀏覽表單頁面時，可填寫必要的信息，然后進行“提交”。 （2）這些信息通過Internet傳送到服務(wù)器上。 （3）服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進行處理，如果有錯誤會返回錯誤信息，并要求糾正錯誤。 （4）

2、當(dāng)數(shù)據(jù)完整無誤后，服務(wù)器反饋一個輸入完成信息。,項目十三： 使用表單制作注冊網(wǎng)頁,創(chuàng)建表單操作動畫,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),2、一個完整的表單包含兩個部分 （1）一是在網(wǎng)頁中進行描述的表單對象，主要用來收集信息。 （2）二是應(yīng)用程序，它可以是服務(wù)器端的，也可以是客戶端的，用于對客戶信息進行分析處理。 3、插入表單對象的方法 在Dreamweaver 8中，表單輸入類型稱為表單對象?？梢酝ㄟ^在主菜單中選擇【插入】【表單】命令來插入表單對象或者在【插入】【表單】面板中單擊相應(yīng)的按鈕插入表單對象。,任務(wù)一 創(chuàng)建表單,項目十三： 使用表單制作注冊網(wǎng)頁,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),4、表單及

3、表單對象屬性設(shè)置的基本方法 表單及文本域、文本區(qū)域、單選按鈕、復(fù)選框、列表/菜單、隱藏域、按鈕及其屬性設(shè)置的基本方法。,任務(wù)一 創(chuàng)建表單,（1）文本域【屬性】面板,項目十三： 使用表單制作注冊網(wǎng)頁,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),任務(wù)一 創(chuàng)建表單,（2）單選按鈕【屬性】面板,單選按鈕一般以兩個或者兩個以上的形式出現(xiàn)，它的作用是讓用戶在兩個或者多個選項中選擇一項。既然單選按鈕的名稱都是一樣的，那么依靠什么來判斷哪個按鈕被選定呢？因為單選按鈕是具有惟一性的，即多個單選按鈕只能有一個被選定，所以【選定值】選項就是判斷的惟一依據(jù)。每個單選按鈕的【選定值】選項被設(shè)置為不同的數(shù)值，如性別“男”的單選按鈕的

4、【選定值】選項被設(shè)置為“1”，性別“女”的單選按鈕的【選定值】選項被設(shè)置為“0”，那么當(dāng)判斷單選按鈕為“1”時，說明性別為“男”，否則的話，性別為“女”。,項目十三： 使用表單制作注冊網(wǎng)頁,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),當(dāng)在【列表/菜單】域的【屬性】面板中將【類型】選項設(shè)置為【菜單】時，【高度】和【選定范圍】選項為不可選，在【初始化時選定】列表框中只能選擇一個初始選項，文檔窗口的下拉菜單中只顯示一個選擇的條目，而不是顯示整個條目表。 將【列表/菜單】域的【屬性】面板中的【類型】選項設(shè)置為【列表】時，【高度】選項和【選定范圍】選項為可選。其中的【高度】選項是列表框中文檔的高度，“1”表示在列表

5、中顯示一個選項?！具x定范圍】選項用于設(shè)置是否允許多項選擇，勾選表示允許，否則為不允許。,任務(wù)一 創(chuàng)建表單,（3）列表/菜單【屬性】面板,項目十三： 使用表單制作注冊網(wǎng)頁,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),由于復(fù)選框在表單中一般都不單獨出現(xiàn)，而是多個復(fù)選框同時使用，因此其【選定值】就顯得格外重要。另外，復(fù)選框的名稱最好與其說明性文字發(fā)生聯(lián)系，這樣在表單腳本程序的編制中將會節(jié)省許多時間和精力。例如，代表“小說”的【復(fù)選框名稱】可以是“novel”，【選定值】設(shè)為“Y”；“上網(wǎng)”的復(fù)選框名稱可以是“Internet”，【選定值】設(shè)為“Y”等。由于復(fù)選框的【復(fù)選框名稱】不同，【選定值】可以取相同的值。,

6、任務(wù)一 創(chuàng)建表單,（4）復(fù)選框【屬性】面板,項目十三： 使用表單制作注冊網(wǎng)頁,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),任務(wù)一 創(chuàng)建表單,（5）文本區(qū)域【屬性】面板,項目十三： 使用表單制作注冊網(wǎng)頁,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn), 通常用隱藏域來傳遞一些特殊的信息，如注冊時間、認(rèn)證號等，這些都需要使用JavaScript、ASP等源代碼來編寫，隱藏域在網(wǎng)頁中一般不顯現(xiàn)。 隱藏域的【值】文本框內(nèi)是一段ASP代碼，其中“”是ASP代碼的開始、結(jié)束標(biāo)志，而“Date()”表示當(dāng)前的系統(tǒng)日期（2007-10-30），如果換成“Now()”則表示當(dāng)前的系統(tǒng)日期和時間（2007-10-30 10:16:44），而

7、“Time()”則表示當(dāng)前的系統(tǒng)時間（10:16:44）。,任務(wù)一 創(chuàng)建表單,（6）隱藏域【屬性】面板,項目十三： 使用表單制作注冊網(wǎng)頁,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),按鈕的作用在于發(fā)送信息、執(zhí)行腳本程序、重置表單，這是表單頁收尾的工作。 在主菜單中選擇【插入】【表單】【圖像域】命令，可以插入一個圖像域。圖像域的作用就是用一幅圖像來替代按鈕的工作，用它來發(fā)送表單或者執(zhí)行腳本程序。,任務(wù)一 創(chuàng)建表單,（7）按鈕【屬性】面板,項目十三： 使用表單制作注冊網(wǎng)頁,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),表單在提交到服務(wù)器端以前，必須進行驗證，這是非常重要的一步，如果忽略了這一步，那么很可能將錯誤的信息直接發(fā)

8、送到服務(wù)器端，不但浪費時間，而且也有一定的危險性，最起碼要做到的是防止空白表單被提交至服務(wù)器端。 通過本任務(wù)的學(xué)習(xí)，主要掌握表單驗證的方法： （1）通過【檢查表單】對話框的設(shè)置進行驗證,任務(wù)二 驗證表單,項目十三： 使用表單制作注冊網(wǎng)頁,驗證表單操作動畫,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),（2）通過簡單的JavaScript來驗證 打開【標(biāo)簽編輯器】對話框，在對話框中選中“onClick”事件，然后在右側(cè)的文本框中輸入代碼。,任務(wù)二 驗證表單,項目十三： 使用表單制作注冊網(wǎng)頁,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),實訓(xùn) 制作在線調(diào)查表單網(wǎng)頁,本項目著重介紹了插入表單對象及其屬性設(shè)置以及驗證表單和測試表單的基本方法。實訓(xùn)將創(chuàng)建如圖所示表單網(wǎng)頁，以進一步鞏固表單網(wǎng)頁的相關(guān)知識。,項目十三： 使用表單制作注冊網(wǎng)頁,實訓(xùn)結(jié)果文件見“項目結(jié)果”文件夾中的“shixun.htm”。,【實訓(xùn)目的】 進一步鞏固插入常用表單對象的方法。 進一步鞏固表單及表單對象屬性的設(shè)置方法。 進一步鞏固使用“檢查表單”行為驗證表單的基本方法。,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),實訓(xùn) 制作在線調(diào)查表單網(wǎng)頁,項目十三： 使用表單制作注冊網(wǎng)頁,任務(wù)一,小 結(jié),任務(wù)二,實 訓(xùn),小結(jié),本項目通過制作用戶注冊網(wǎng)頁