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

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

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

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

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

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

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

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

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