（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作教程7

1、YCF正版可修改PPT（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作教程7項(xiàng)目活動(dòng)七在線注冊(cè)頁(yè)面制作:表單的應(yīng)用任務(wù)一創(chuàng)建表單及表單對(duì)象任務(wù)二驗(yàn)證表單任務(wù)三制作在線注冊(cè)頁(yè)面返回任務(wù)一創(chuàng)建表單及表單對(duì)象一、了解表單表單是 用戶(hù)與服務(wù)器進(jìn)行信息交流的重要工具， 在網(wǎng)頁(yè)中有著廣泛的應(yīng)用，如留言板、搜索引擎、注冊(cè)程序等。 通常， 一個(gè)表單會(huì)包含多個(gè)對(duì)象， 也稱(chēng)為控件。 所有的表單對(duì)象都包含在 和 標(biāo)簽中。如圖 所示的在線注冊(cè)頁(yè)面， 當(dāng)用戶(hù)填寫(xiě)完資料并提交后， 輸入在表單中的信息就會(huì)上傳到服務(wù)器， 然后再由服務(wù)器的有關(guān)應(yīng)用程序進(jìn)行處理， 并執(zhí)行某些程序， 將處理結(jié)果反饋給用戶(hù)。下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象二、創(chuàng)建表單執(zhí)行

2、菜單命令“插入” “表單” “表單”， 可插入表單， 如圖 所示。 任何其他表單對(duì)象， 都必須插入到表單中， 瀏覽器才能正確處理這些數(shù)據(jù)。 表單將以紅色虛線框顯示， 但在瀏覽器中是不可見(jiàn)的。 將光標(biāo)置于表單內(nèi)， 用鼠標(biāo)單擊狀態(tài)欄上的“ ” 標(biāo)簽選中整個(gè)表單， 可以在“屬性” 面板中設(shè)置表單屬性， 其主要選項(xiàng)如圖 所示?！氨韱巍? 用來(lái)設(shè)置表單的名稱(chēng)， 該名稱(chēng)不能省略?！皠?dòng)作”: 指定設(shè)置處理提交表單的服務(wù)器端腳本的 地址(提交給程序) 或郵件地址。“ 目標(biāo)”: 指定提交的結(jié)果文件顯示的位置。 有四個(gè)選項(xiàng) 、 、 、 。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象() 表示在一個(gè)新的、沒(méi)有命令的瀏覽

3、器窗口調(diào)入指定的文件。() 表示在指向這個(gè)目標(biāo)元素的相同框架中調(diào)入文件。() 表示把文件調(diào)入當(dāng)前框的直接父框 中, 在當(dāng)前框沒(méi)有父框時(shí)， 這個(gè)值等價(jià)于 。() 表示把文件調(diào)入原來(lái)的、最頂部的瀏覽器窗口中(因此取消所有其他框架)， 在當(dāng)前框沒(méi)有父框時(shí)， 這個(gè)值等價(jià)于 “編碼類(lèi)型”: 指定對(duì)提交給服務(wù)器進(jìn)行處理的數(shù)據(jù)使用 編碼類(lèi)型。 有兩個(gè)選項(xiàng): / 和/ 。 前者是默認(rèn)選項(xiàng)， 通常與 方法協(xié)同使用, 如果表單中包含文件上傳域， 則應(yīng)選擇后者。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象“方法”: 指定將表單數(shù)據(jù)傳輸?shù)椒?wù)器所使用的方法有三個(gè)選項(xiàng)， 默認(rèn)、和。() 默認(rèn)方法是使用瀏覽器的默認(rèn)設(shè)置將表單

4、數(shù)據(jù)發(fā)送到服務(wù)器。() 方法是在消息正文中發(fā)送表單值， 并向服務(wù)器發(fā)送 請(qǐng)求。 這種方法允許傳輸大量數(shù)據(jù)， 一般情況下， 選用該方法比較安全。() 方法是將表單值添加到 請(qǐng)求中， 并向服務(wù)器發(fā)送 請(qǐng)求。 所以傳送的數(shù)據(jù)量就會(huì)受到限制， 但是執(zhí)行效率卻比 方法好。注意: 在發(fā)送銀行卡號(hào)、密碼等重要信息時(shí)， 最好采用 方法發(fā)送， 因?yàn)槿绻?方法發(fā)送表單數(shù)據(jù)， 表單會(huì)將數(shù)據(jù)附加到 請(qǐng)求中發(fā)送， 安全性降低。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象三、插入文本域在文本字段中， 可輸入任何類(lèi)型的文本內(nèi)容， 它是最常見(jiàn)的表單對(duì)象之一。 按照文本字段的行數(shù)和顯示方式， 可將其分為單行文本字段、多行文本字段

5、和密碼域三種。 執(zhí)行菜單命令“插入” “表單” “文本域” 命令插入文本域。 其“屬性” 面板如圖 所示。在“屬性” 面板中， 根據(jù)需要設(shè)置文本域的屬性。 主要設(shè)置選項(xiàng)含義如下?！拔谋居颉? 設(shè)置表單對(duì)象的?！白址麑挾取? 設(shè)置域中可顯示的最大字符數(shù)。 此數(shù)字可以小于“最多字符數(shù)” 的值?！白疃嘧址麛?shù)”: 設(shè)置單行文本域中可輸入的最大字符數(shù)。 如使用“最多字符數(shù)” 可將郵政編碼限制為 位數(shù)， 將密碼限制為 個(gè)字符， 身份證號(hào)碼限制為 個(gè)字符。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象“類(lèi)型”: 指定是單行、多行或密碼域?！皢涡小? 輸入的文字不會(huì)發(fā)生換行， 一般情況下用于一些簡(jiǎn)單的輸入設(shè)置?！岸?/p>

6、行”: 輸入的文字如果超過(guò)了單行字符寬度， 就會(huì)換行。“密碼”: 產(chǎn)生一個(gè)密碼文本域。 當(dāng)用戶(hù)在密碼文本域中輸入時(shí)， 輸入內(nèi)容顯示為項(xiàng)目符號(hào)或星號(hào)， 以保護(hù)它不被其他人看到。“初始值”: 指定在首次載入表單時(shí)文本域中顯示的文字。 例如， 通過(guò)包含說(shuō)明或示例文字， 可以提示用戶(hù)在文本域中輸入信息?！邦?lèi)”: 下拉列表框， 將 規(guī)則應(yīng)用于對(duì)象。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象四、插入單選按鈕單選按鈕與復(fù)選框相似， 主要用于標(biāo)記一個(gè)選項(xiàng)是否被選中， 單選按鈕只允許用戶(hù)從選項(xiàng)中選擇唯一答案。 單選按鈕通常成組地使用。 同一個(gè)組中的所有單選按鈕必須具有相同的名稱(chēng)， 但它們的區(qū)域值， 即選項(xiàng)值是不同

7、的。() 創(chuàng)建單選按鈕。在“插入” 工具欄的“表單” 選項(xiàng)卡中單擊“單選按鈕” ， 出現(xiàn)“輸入標(biāo)簽輔助功能屬性” 對(duì)話框， 設(shè)置 和標(biāo)簽文字， 單擊“確定” 按鈕后， 一個(gè)單選按鈕隨即出現(xiàn)在文檔中。 反復(fù)單擊單選按鈕， 可以創(chuàng)建更多單選按鈕。() 設(shè)置單選按鈕屬性。選中單選按鈕， 出現(xiàn)如圖 所示的單選按鈕“屬性” 面板。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象在“屬性” 面板中， 根據(jù)需要設(shè)置屬性， 主要選項(xiàng)介紹如下。“單選按鈕”: 單選按鈕名稱(chēng)?！斑x定值”: 選定該單選按鈕后， 提交表單時(shí)傳遞的值?！俺跏紶顟B(tài)”: 有“未選中” 和“已勾選” 兩種。單選按鈕舉例如圖 所示。五、插入單選按鈕組用

8、戶(hù)可以用單選按鈕一個(gè)一個(gè)地創(chuàng)建表單選項(xiàng)， 也可以用單選按鈕組同時(shí)創(chuàng)建多個(gè)表單選項(xiàng)來(lái)供用戶(hù)選擇。 在創(chuàng)建多個(gè)選項(xiàng)時(shí)， 單選按鈕組的操作比單選按鈕的操作更快捷。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象在 “插入” 工具欄的“表單” 選項(xiàng)卡中單擊“單選按鈕組” 按鈕顯示“單選按鈕組” 對(duì)話框， 設(shè)置單選按鈕組的名稱(chēng)、組內(nèi)標(biāo)簽和值， 如圖 所示， 單擊“確定”按鈕后， 一個(gè)單選按鈕組隨即出現(xiàn)在文檔中?！懊Q(chēng)”: 用來(lái)設(shè)置單選按鈕組的名稱(chēng)， 名稱(chēng)要唯一?！皢芜x按鈕”: 單擊“ ”， 添加單選按鈕， “標(biāo)簽” 列是單選按鈕的文本說(shuō)明， “值”列是單選按鈕的值。 單擊“ ” 刪除選擇好的單選按鈕。 通過(guò)單擊

9、 、 按鈕來(lái)調(diào)整單選按鈕的次序?！安季?， 使用”: 用來(lái)設(shè)置單選按鈕組的布局方式， 選擇“換行符” 則使用換行符，上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象豎向排列， 否則使用表格。提示: 一旦單選按鈕被選擇， 同一組的單選按鈕將始終有一個(gè)處于選中狀態(tài)， 除非點(diǎn)擊重置按鈕進(jìn)行重新設(shè)定。 比如， 男、女性別兩個(gè)單選按鈕， 初始狀態(tài)是兩個(gè)都不選中，選中“男” 后“女” 不被選中， 選中“女” 后“男” 不被選中， 總有一個(gè)處于選中狀態(tài)， 只有重置才能回到兩個(gè)都不選中的初始狀態(tài)。保存網(wǎng)頁(yè)， 運(yùn)行效果如圖 所示。六、列表/ 菜單除了使用復(fù)選框和單選按鈕為用戶(hù)提供選項(xiàng)， 還可以用“列表/ 菜單” 來(lái)制作選

10、項(xiàng)?！傲斜? 菜單” 可以顯示一個(gè)有項(xiàng)目的可滾動(dòng)列表， 用戶(hù)可以在該列表中選擇項(xiàng)目。 當(dāng)頁(yè)面的空間有限， 但需要顯示許多菜單項(xiàng)時(shí)， “列表/ 菜單” 就會(huì)非常有用。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象() 創(chuàng)建列表/ 菜單。在“插入” 工具欄的“表單” 選項(xiàng)卡中單擊“列表/ 表單” 按鈕， 顯示“輸入標(biāo)簽輔助功能屬性” 對(duì)話框， 設(shè)置 和標(biāo)簽文字， 單擊“確定” 后， 文檔中便會(huì)出現(xiàn)一個(gè)菜單。() 設(shè)置列表/ 菜單屬性。選中列表/ 菜單字段， 出現(xiàn)如圖 所示的“屬性” 面板。在“屬性” 面板中， 根據(jù)需要設(shè)置列表/ 菜單的屬性。 主要設(shè)置選項(xiàng)含義如下。列表/ 菜單: 列表/ 菜單的名稱(chēng)?！?/p>

11、類(lèi)型”: 兩種選擇， 選中“菜單” 單選按鈕， 網(wǎng)頁(yè)中只能顯示一行, 選中“列表”單選按鈕， 則“高度”、“選定范圍” 均可選擇?！傲斜碇怠?按鈕: 單擊此按鈕后， 彈出“列表值” 對(duì)話框， 可以在該對(duì)話框中設(shè)置列表值， 如圖 所示。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象七、跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單是利用表單元素形成各種選項(xiàng)的列表， 可以說(shuō)跳轉(zhuǎn)菜單是列表/ 菜單功能的延伸， 利用它不僅可以提供菜單項(xiàng)， 而且還可給菜單項(xiàng)指定鏈接頁(yè)面， 選中列表中的某個(gè)選項(xiàng)時(shí)， 瀏覽器會(huì)立即跳轉(zhuǎn)到一個(gè)新網(wǎng)頁(yè)。() 創(chuàng)建跳轉(zhuǎn)菜單。在“插入” 工具欄的“表單” 選項(xiàng)卡中單擊的“跳轉(zhuǎn)菜單” 按鈕， 隨即彈出“插入跳轉(zhuǎn)菜單”

12、對(duì)話框， 根據(jù)需要設(shè)置其屬性， 如圖 所示。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象() 設(shè)置跳轉(zhuǎn)菜單屬性。跳轉(zhuǎn)菜單屬性設(shè)置與列表/ 菜單屬性設(shè)置相似， 不同點(diǎn)主要是， 跳轉(zhuǎn)菜單比列表/ 菜單的屬性設(shè)置多了行為設(shè)置， 添加了鼠標(biāo)事件() 和事件代碼(在新窗口中打開(kāi)相應(yīng)的網(wǎng)頁(yè)或者網(wǎng)站的主頁(yè))。提示: 如果在設(shè)置的時(shí)候， 在菜單之后插入“前往” 按鈕， 那么插入的跳轉(zhuǎn)表單中就自動(dòng)帶一個(gè)“前往” 按鈕。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象八、圖像區(qū)域在網(wǎng)頁(yè)中插入圖像區(qū)域能夠使頁(yè)面更加豐富多彩。 如果使用圖像來(lái)執(zhí)行任務(wù)而不是提交數(shù)據(jù)， 則需要將這種行為附加到表單對(duì)象。() 創(chuàng)建圖像區(qū)域。在“插入”

13、 工具欄的“表單” 選項(xiàng)卡中單擊“圖像區(qū)域” 按鈕， 彈出“選擇圖像源文件” 對(duì)話框， 如圖 所示。 選擇一張圖片作為表單對(duì)象。() 設(shè)置圖像區(qū)域?qū)傩?。選中文本字段， 出現(xiàn)如圖 所示的圖像區(qū)域“屬性” 面板。在“屬性” 面板中， 根據(jù)需要設(shè)置圖像區(qū)域的屬性。 主要設(shè)置選項(xiàng)含義如下。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象“圖像區(qū)域”: 圖像域的名稱(chēng)。“源文件”: 圖像文件的?！疤鎿Q”: 當(dāng)瀏覽器不能顯示圖像時(shí)， 替代顯示文字?！皩?duì)齊”: 圖像在網(wǎng)頁(yè)中的對(duì)齊方式， 主要有默認(rèn)值、頂端、居中、底部、左對(duì)齊和右對(duì)齊。如果需要對(duì)插入的圖像進(jìn)行編輯， 可以在屬性面板中單擊“編輯圖像” 按鈕， 就可以直接

14、打開(kāi) 或 圖像處理軟件。九、文件域文件域?qū)ο蟊任谋究驅(qū)ο蠖嗔艘粋€(gè)“瀏覽” 按鈕。 瀏覽者可以通過(guò)單擊這個(gè)按鈕來(lái)選擇需要上傳文件的路徑和名稱(chēng)。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象() 創(chuàng)建文件域。在“插入” 工具欄的“表單” 選項(xiàng)卡中單擊“文件域” 按鈕， 顯示“輸入標(biāo)簽輔助功能屬性” 對(duì)話框， 設(shè)置 和標(biāo)簽文字， 單擊“確定” 按鈕后， 隨即插入一個(gè)文件域?qū)ο蟆?) 設(shè)置文件域?qū)傩浴＿x中文件域， 出現(xiàn)如圖 所示的“屬性” 面板。在“屬性” 面板中， 根據(jù)需要設(shè)置文件域的屬性。 主要設(shè)置選項(xiàng)含義如下。“文件域名稱(chēng)”: 文件域名稱(chēng)?！白址麑挾取? 設(shè)定網(wǎng)頁(yè)上顯示“文件域” 文本框的寬度?！白疃?/p>

15、字符數(shù)”: 設(shè)定網(wǎng)頁(yè)上顯示“文件域” 文本框中最多能輸入的字符數(shù)。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象十、標(biāo)準(zhǔn)按鈕按鈕對(duì)于表單而言是必不可少的， 它可以控制表單的操作。 使用按鈕可將表單數(shù)據(jù)提交到服務(wù)器， 或者重置該表單。 在 中既可以使用圖片來(lái)制作按鈕， 也可以直接使用表單里的按鈕。 表單中的按鈕外形無(wú)法改變， 但是卻比圖像按鈕用起來(lái)更方便。() 創(chuàng)建按鈕。單擊“插入” 工具欄中“表單” 選項(xiàng)卡的 按鈕， 顯示“輸入標(biāo)簽輔助功能屬性”對(duì)話框， 如圖 所示， 設(shè)置 和標(biāo)簽文字， 單擊“確定” 按鈕后， 文檔中隨即出現(xiàn)一個(gè)按鈕對(duì)象。() 設(shè)置按鈕屬性。選中按鈕， 出現(xiàn)如圖 所示的“屬性” 面

16、板。上一頁(yè)下一頁(yè)返回任務(wù)一創(chuàng)建表單及表單對(duì)象在“屬性” 面板中， 根據(jù)需要設(shè)置按鈕的屬性。 主要設(shè)置選項(xiàng)含義如下?！鞍粹o名稱(chēng)”: 按鈕的名稱(chēng)?！爸怠? 按鈕上顯示的文字?！皠?dòng)作”: 單擊按鈕后引發(fā)的事件。 有三個(gè)單選按鈕供選擇: “提交表單”、“重設(shè)表單” 和“無(wú)”。上一頁(yè)返回任務(wù)二驗(yàn)證表單檢查表單行為面板() 執(zhí)行菜單命令“窗口” “行為”， 打開(kāi)行為面板， 選中“在線注冊(cè)” 表單，如圖 所示， 單擊行為面板中的“行為” 按鈕， 如圖 所示。() 選擇“檢查表單” 選項(xiàng)， 彈出“檢查表單” 對(duì)話框， 如圖 所示。() 該表單相關(guān)的重要表單項(xiàng)的設(shè)置如圖 至圖 所示。() 單擊“確定” 按鈕后保

17、存文件， 至此檢查表單就完成了， 接下來(lái)就可以進(jìn)行表單測(cè)試了。() 按下 鍵進(jìn)行預(yù)覽， 為了檢查前面設(shè)置， 單擊“提交” 按鈕， 可以看到系統(tǒng)給出的錯(cuò)誤提示。返回任務(wù)三制作在線注冊(cè)頁(yè)面一、插入與設(shè)置表單域() 新建一個(gè)文檔， 執(zhí)行菜單命令“修改” “頁(yè)面屬性”， 打開(kāi)“頁(yè)面屬性” 對(duì)話框， 在“分類(lèi)” 欄中選擇“外觀” 選項(xiàng)， 將字體大小設(shè)置為， 文本顏色為，單擊“確定” 按鈕， 如圖 所示。() 在“插入” 工具欄中單擊“表單” 選項(xiàng)卡中的“表單” 按鈕， 插入一個(gè)表單域。二、插入并設(shè)置表單元素() 將光標(biāo)定位在表單內(nèi)， 插入一個(gè) 行 列的表格， 設(shè)置“表格” 對(duì)話框， 如圖 所示。 合并第

18、一行、第二行、第九行和最后一行的單元格， 并對(duì)表格進(jìn)行美化。在第一列單元格內(nèi)輸入相應(yīng)的文本內(nèi)容， 并設(shè)置單元格內(nèi)文字居中對(duì)齊， 如圖 所示。下一頁(yè)返回任務(wù)三制作在線注冊(cè)頁(yè)面() 將光標(biāo)定位在“姓名” 后的單元格內(nèi)， 執(zhí)行菜單命令“插入” “表單” “文本域”， 彈出“輸入標(biāo)簽輔助功能屬性” 對(duì)話框， 不做任何設(shè)置， 直接單擊“確定”按鈕， 即可以插入一個(gè)文本框。() 選中該文本框， 在文本框“屬性” 面板中設(shè)置“文本域” 名稱(chēng)為姓名， “字符寬度” 和“最多字符數(shù)” 均設(shè)置為， 其余設(shè)置不變， 如圖 所示。() 用同樣方法插入一個(gè)通信地址文本框， 設(shè)置“文本域” 名稱(chēng)為通信地址， “字符寬度”

19、 為， 其余設(shè)置不變。() 用同樣方法插入一個(gè)郵編和電子郵件文本框， 并根據(jù)需要設(shè)置“文本域” 和“字符寬度”。() 將光標(biāo)定位在“性別” 后的單元格內(nèi)， 執(zhí)行菜單命令“插入” “表單” “單選按鈕組”， 彈出“單選按鈕組” 對(duì)話框， 設(shè)置標(biāo)簽為“男” 和“女”， 如圖 所示。 最后單擊“確定” 按鈕， 即可插入一個(gè)單選按鈕組， 調(diào)整使其水平顯示。上一頁(yè)下一頁(yè)返回任務(wù)三制作在線注冊(cè)頁(yè)面() 將光標(biāo)定位在“照片” 后的單元格內(nèi)， 執(zhí)行菜單命令“插入” “表單” “文件域”， 彈出“輸入標(biāo)簽輔助功能屬性” 對(duì)話框， 設(shè)置“” 和“標(biāo)簽” 都為，如圖 所示。 最后單擊“確定” 按鈕， 即可插入一個(gè)文件域() 將光標(biāo)定位在“你的興趣愛(ài)好” 后的單元格內(nèi)， 執(zhí)行菜單命令“插入” “表單” “復(fù)選框組”， 彈出“復(fù)選框組” 對(duì)話框， 設(shè)置標(biāo)簽為“聽(tīng)音樂(lè)” “看?！?和“上網(wǎng)”， 如圖 所示。 最后單擊“確定” 按鈕， 即可插入一個(gè)復(fù)選框組。() 將光標(biāo)定位在“備注” 后的單元格內(nèi)， 執(zhí)行菜單命令“插入” “表單” “文本域”， 選中該文本域， 在文本域“屬性” 面板中設(shè)置“文本域” 名稱(chēng)為備注，“類(lèi)型” 為多行， “字符寬度” 設(shè)置為， “行數(shù)” 為， 其余設(shè)置不變， 如圖 所示上一頁(yè)下一頁(yè)返回任務(wù)三制作在線注冊(cè)頁(yè)面() 將光標(biāo)定位在表格的最后一行， 執(zhí)行菜單命令