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

1、操作演練操作演練1.2技術(shù)提升技術(shù)提升1.3操作準(zhǔn)備操作準(zhǔn)備1.1考核評價考核評價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考核評價考核評價1.4考核評價考核評價4.4 我們都曾申請過E-mail郵箱，在申請過程必須在網(wǎng)頁上輸入個人信息，然后提交信息，提交成功后，才能獲得E-mail郵箱。 這個用于獲取信息的網(wǎng)頁稱為表單，通常

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

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

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

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

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

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

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

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

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