單元4制作表單網(wǎng)頁(yè)

1、操作演練操作演練1.2技術(shù)提升技術(shù)提升1.3操作準(zhǔn)備操作準(zhǔn)備1.1考核評(píng)價(jià)考核評(píng)價(jià)1.4操作準(zhǔn)備操作準(zhǔn)備1.1操作準(zhǔn)備操作準(zhǔn)備1.1操作準(zhǔn)備操作準(zhǔn)備1.1操作準(zhǔn)備操作準(zhǔn)備1.1操作準(zhǔn)備操作準(zhǔn)備4.1操作演練操作演練1.2操作演練操作演練1.2操作演練操作演練1.2操作演練操作演練1.2操作演練操作演練1.2操作演練操作演練4.2技術(shù)提升技術(shù)提升1.3技術(shù)提升技術(shù)提升1.3技術(shù)提升技術(shù)提升4.3考核評(píng)價(jià)考核評(píng)價(jià)1.4考核評(píng)價(jià)考核評(píng)價(jià)4.4 我們都曾申請(qǐng)過(guò)E-mail郵箱，在申請(qǐng)過(guò)程必須在網(wǎng)頁(yè)上輸入個(gè)人信息，然后提交信息，提交成功后，才能獲得E-mail郵箱。 這個(gè)用于獲取信息的網(wǎng)頁(yè)稱為表單，通常

2、一個(gè)表單中包含多個(gè)對(duì)象，有時(shí)也稱為控件或表單元素，例如用于輸入文本的文本域、用于發(fā)送命令的按鈕、用于選擇項(xiàng)目的單選按鈕和復(fù)選框、用于顯示列表項(xiàng)的列表框等。 在本地硬盤（例如D盤）中創(chuàng)建一個(gè)文件夾“網(wǎng)頁(yè)設(shè)計(jì)與制作案例”，將光盤中的“單元4”（包括所有子文件夾以及文件）拷貝到該文件夾中。 使用創(chuàng)建站點(diǎn)向?qū)?chuàng)建名稱為“單元4”的本地站點(diǎn)。【任務(wù)4-1】制作用戶注冊(cè)網(wǎng)頁(yè)【任務(wù)描述】 （1）在網(wǎng)頁(yè)文檔0401.html中插入1個(gè)表單域。 （2）在表單域中插入1個(gè)9行3列的表格。 （3）在表格中插入6個(gè)單行文本域。 （4）在表格中插入2個(gè)密碼文本域。 （5）在表格中插入2按鈕。 （6）在表格中插入1個(gè)下拉

3、式菜單。 （7）在表格中插入1個(gè)單選按鈕組。 （8）在表格中插入1個(gè)復(fù)選框。 （9）在表格中插入1個(gè)圖像域。 網(wǎng)頁(yè)文檔0401.html的瀏覽效果如圖4-1所示。圖圖4-14-1網(wǎng)頁(yè)文檔網(wǎng)頁(yè)文檔0401.html0401.html的瀏覽效果的瀏覽效果【任務(wù)實(shí)施】 1打開網(wǎng)頁(yè)文檔0401.html 直接打開文件夾4-1中的網(wǎng)頁(yè)文檔0401.html，也可以重新創(chuàng)建1個(gè)網(wǎng)頁(yè)文檔0401.html。 2插入表格域 3設(shè)置表單域的屬性 4在網(wǎng)頁(yè)中插入表格 5插入單行文本域 6插入表單按鈕 7插入下拉式菜單 8插入單選按鈕組 9插入復(fù)選框 10插入圖像域 11保存網(wǎng)頁(yè)與瀏覽網(wǎng)頁(yè)效果 保存網(wǎng)頁(yè)0401.h

4、tml，然后按快捷鍵F12瀏覽該網(wǎng)頁(yè)，其瀏覽效果如圖4-1所示。【任務(wù)4-2】制作用戶登錄網(wǎng)頁(yè)【任務(wù)描述】 （1）在網(wǎng)頁(yè)文檔0402.html中插入1個(gè)表單域。 （2）在表單域中插入1個(gè)3行2列的表格。 （3）在表格中插入1個(gè)文本域。 （4）在表格中插入1個(gè)Spry驗(yàn)證密碼。 （5）在表格中插入1個(gè)圖像域。 網(wǎng)頁(yè)文檔0402.html的瀏覽效果如圖4-25所示。圖圖4-254-25網(wǎng)頁(yè)文檔網(wǎng)頁(yè)文檔0402.html0402.html的瀏覽效果的瀏覽效果 【任務(wù)實(shí)施】 1打開網(wǎng)頁(yè)文檔0402.html 直接打開文件夾4-2中的網(wǎng)頁(yè)文檔0402.html，也可以重新創(chuàng)建1個(gè)網(wǎng)頁(yè)文檔0402.htm

5、l。 2插入表單域 3在網(wǎng)頁(yè)中插入表格 4插入文本域 5插入Spry驗(yàn)證密碼域 6插入圖像域 7保存網(wǎng)頁(yè)與瀏覽網(wǎng)頁(yè)效果 保存網(wǎng)頁(yè)0402.html，然后按快捷鍵F12瀏覽該網(wǎng)頁(yè)，其瀏覽效果如圖4-25所示?！救蝿?wù)4-3】美化用戶注冊(cè)網(wǎng)頁(yè)【任務(wù)描述】 （1）創(chuàng)建外部樣式文件04global.css，在該樣式文件中定義必要的CSS樣式。 （2）創(chuàng)建外部樣式文件04main.css，在該樣式文件中定義必要的CSS樣式。 （3）創(chuàng)建網(wǎng)頁(yè)文檔0403.html，該網(wǎng)頁(yè)中所包含的內(nèi)容與網(wǎng)頁(yè)0401.html類似，網(wǎng)頁(yè)0403.html主要應(yīng)用CSS樣式對(duì)表格、單元格和表單控件進(jìn)行美化。 （4）編寫代碼實(shí)現(xiàn)

6、以下功能：瀏覽網(wǎng)頁(yè)時(shí)，當(dāng)鼠標(biāo)指針指向“用戶名”和“密碼”文本框時(shí)，該文本框自動(dòng)獲取焦點(diǎn)，并且文本框的背景顏色和邊框顏色自動(dòng)改變。當(dāng)鼠標(biāo)指針離開該文本框，則自動(dòng)恢復(fù)默認(rèn)的背景顏色和邊框顏色。 （5）編寫代碼實(shí)現(xiàn)以下功能：游覽網(wǎng)頁(yè)時(shí)，在“字符”文本框中單擊時(shí)，該文本框獲取焦點(diǎn)且背景顏色和邊框顏色自動(dòng)改變。當(dāng)該文本框失去焦點(diǎn)時(shí)，則自動(dòng)恢復(fù)默認(rèn)的背景顏色和邊框顏色。 網(wǎng)頁(yè)0403.html的瀏覽效果如圖4-28所示。圖圖4-284-28網(wǎng)頁(yè)網(wǎng)頁(yè)0403.html0403.html的瀏覽效果的瀏覽效果【任務(wù)實(shí)施】 1創(chuàng)建外部樣式文件04global.css 2創(chuàng)建外部樣式文件04main.css 3創(chuàng)建

7、網(wǎng)頁(yè)文檔0403.html 4保存網(wǎng)頁(yè)與瀏覽網(wǎng)頁(yè)效果 保存網(wǎng)頁(yè)0403.html，然后按快捷鍵F12瀏覽該網(wǎng)頁(yè)，其瀏覽效果如圖4-28所示?！救蝿?wù)4-4】美化用戶登錄網(wǎng)頁(yè)【任務(wù)描述】 （1）創(chuàng)建外部樣式文件04common.css，在該樣式文件中定義必要的CSS樣式。 （2）創(chuàng)建外部樣式文件04user_login.css，在該樣式文件中定義必要的CSS樣式。 （3）創(chuàng)建網(wǎng)頁(yè)文檔0404.html，該網(wǎng)頁(yè)中所包含的內(nèi)容與網(wǎng)頁(yè)0402.html類似，網(wǎng)頁(yè)0404.html主要應(yīng)用CSS樣式對(duì)表格、單元格和表單控件進(jìn)行美化。 網(wǎng)頁(yè)0404.html的瀏覽效果如圖4-29所示?！救蝿?wù)實(shí)施】 1創(chuàng)建外

8、部樣式文件04common.css 2創(chuàng)建外部樣式文件04user_login.css 3創(chuàng)建網(wǎng)頁(yè)文檔0404.html 4保存網(wǎng)頁(yè)與瀏覽網(wǎng)頁(yè)效果 保存網(wǎng)頁(yè)0404.html，然后按快捷鍵F12瀏覽該網(wǎng)頁(yè)，其瀏覽效果如圖4-29所示。圖圖4-294-29網(wǎng)頁(yè)網(wǎng)頁(yè)0404.html0404.html的瀏覽效果的瀏覽效果【考核任務(wù)描述】 教材配套光盤中已提供了考核評(píng)價(jià)項(xiàng)目所需的起點(diǎn)網(wǎng)頁(yè)文件0405.html，在該網(wǎng)頁(yè)中完成以下操作。 （1）在表格的第2行第2個(gè)單元格中插入1個(gè)單行文本域，字符寬度設(shè)置為16，最多字符數(shù)設(shè)置為20。 （2）在表格的第2行第4個(gè)單元格中插入2個(gè)單選按鈕，標(biāo)簽名稱分別為“

9、男”和“女”。 （3）在表格的第3行第2個(gè)單元格中插入1個(gè)單元文本域，字符寬度設(shè)置為30，最多字符數(shù)設(shè)置為40。在該單元格插入1個(gè)Spry驗(yàn)證文本域，其類型為“電子郵件地址”，預(yù)覽狀態(tài)“無(wú)效格式”。 （4）在表格的第3行第4個(gè)單元格中插入1個(gè)單元文本域，字符寬度設(shè)置為6，最多字符數(shù)設(shè)置為6。在該單元格插入1個(gè)Spry驗(yàn)證文本域，其類型為“郵政編碼”，預(yù)覽狀態(tài)“無(wú)效格式”。 （5）在表格的第4行第2個(gè)單元格中插入1個(gè)列表，列表包括“公務(wù)員”、“公司職員”、“企業(yè)職員”、“教師”、“農(nóng)民”、“經(jīng)商人員”、“學(xué)生”和“其他”。 （6）在表格的第4行第4個(gè)單元格中插入1個(gè)單選按鈕組，名稱為“age”，

10、成員名稱分別為“16歲以下”、“1625”、“2535”、“3545”、“4555”和“55歲以上”。 （7）在表格的第5行第2個(gè)單元格中插入5個(gè)復(fù)選框，標(biāo)簽名稱分別為“自然風(fēng)光”、“人文景觀”、“民風(fēng)民俗”、“休閑游”和“探險(xiǎn)游”。 （8）在表格的第6行第2個(gè)單元格中插入1個(gè)跳轉(zhuǎn)菜單，菜單項(xiàng)分別為“黃山旅游網(wǎng)”、“桂林旅游網(wǎng)”、“張家界旅游網(wǎng)”和“九寨溝旅游網(wǎng)”，對(duì)應(yīng)的網(wǎng)址分別為：http:/http:/http:/http:/ （9）在表格的第7行第2個(gè)單元格中插入1個(gè)單選按鈕組，該單選按鈕組包括7個(gè)成員，其標(biāo)簽名稱分別為“五一”、“十一”、“春節(jié)”、“元旦”、“暑假”、“周末”和“其他時(shí)間”。 （10）在表格的第8行第2個(gè)單元格中插入1個(gè)單選按鈕組，該單選按鈕組包括5個(gè)成員，其標(biāo)簽名稱分別為“飛機(jī)”、“火車”、“汽車”、“自駕車”和“徒步”。 （11）在表格的第9行第2個(gè)單元格中插入1個(gè)多行文本域，字符寬度設(shè)置為80，行數(shù)設(shè)置為4，初始值設(shè)置為“請(qǐng)多提寶貴建議”。 （12）在表格的第10行單元格中插入2個(gè)按鈕，其值分別為“提交”和“重置”。 本單元的考核評(píng)價(jià)任務(wù)完成后，網(wǎng)頁(yè)0405.html的最終瀏覽效果如圖4-30所示。圖圖4-304-30網(wǎng)頁(yè)網(wǎng)頁(yè)0405.html0405.html的最終瀏覽效果的最終瀏覽效果【評(píng)價(jià)要點(diǎn)】 本單元的考核評(píng)價(jià)表如表4