1、操作演練操作演練1.2技術提升技術提升1.3操作準備操作準備1.1考核評價考核評價1.4操作準備操作準備1.1操作準備操作準備1.1操作準備操作準備1.1操作準備操作準備1.1操作準備操作準備4.1操作演練操作演練1.2操作演練操作演練1.2操作演練操作演練1.2操作演練操作演練1.2操作演練操作演練1.2操作演練操作演練4.2技術提升技術提升1.3技術提升技術提升1.3技術提升技術提升4.3考核評價考核評價1.4考核評價考核評價4.4 我們都曾申請過E-mail郵箱，在申請過程必須在網頁上輸入個人信息，然后提交信息，提交成功后，才能獲得E-mail郵箱。 這個用于獲取信息的網頁稱為表單，通常

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

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

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

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

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

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

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

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

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