模塊6 制作網(wǎng)站的會員注冊頁面-實訓(xùn)指導(dǎo)書

模塊6制作網(wǎng)站的會員注冊頁面實訓(xùn)任務(wù)指導(dǎo)書【實訓(xùn)目的】.掌握創(chuàng)建表單的方法；.理解get和post兩種提交方式的區(qū)別；.掌握常用輸入組件的使用方法；.掌握表單元素的使用方法；.掌握表單元素的常用屬性。.熟練使用CSS樣式美化表單外觀，設(shè)置不同的表單效果?！緦嵱?xùn)內(nèi)容】實訓(xùn)任務(wù)1：制作班級網(wǎng)站中調(diào)查問卷【任務(wù)描述】制作班級網(wǎng)站中“大學(xué)生對食堂要求的問卷調(diào)查”，并設(shè)置問卷中各元素不同樣式。問卷中包含單選按鈕、復(fù)選框、文本輸入框和提交按鈕等，頁面效果如圖教材220頁?！緦嵱?xùn)任務(wù)指導(dǎo)】.使用有序列表＜。1＞定義問卷中4個問題。.應(yīng)用表單中單選按鈕、復(fù)選框、文本輸入框和按鈕等元素制作表單。.使用＜li＞的border-bottom設(shè)置4個問題的分隔線，掌握表單中各種按鈕的制作。實訓(xùn)任務(wù)2：制作班級網(wǎng)站中郵箱注冊頁面【任務(wù)描述】制作班級網(wǎng)站中郵箱注冊頁面，熟練創(chuàng)建表單元素，并設(shè)置表單元素樣式，靈活應(yīng)用表格技術(shù)設(shè)置頁面結(jié)構(gòu)，頁面效果如圖教材224頁6-22所示?！緦嵱?xùn)任務(wù)指導(dǎo)】.整體使用DIV+CSS布局頁面的左右結(jié)構(gòu)，左側(cè)使用表格＜table＞創(chuàng)建11行2列的表單布局結(jié)構(gòu)，右側(cè)使用背景圖技術(shù)顯示圖像。.通過跨行合并rowspan屬性，跨列合并colspan屬性，調(diào)整表格行列結(jié)構(gòu)。.使用CSS為文本輸入框、密碼框、復(fù)選框、按鈕等表單元素設(shè)置各自樣式。實訓(xùn)任務(wù)3：制作電子郵箱中發(fā)送郵件頁面【任務(wù)描述】制作電子郵箱中發(fā)送郵件的頁面效果如圖教材226頁6-23所示，用戶發(fā)送郵件時，在“收件人”輸入框中輸入收件人地址，在“主題”輸入框中輸入郵件主題，單擊“添加附件”的“選擇文件”按鈕，可以選擇本地文件作為附件上傳，郵件編輯框暫且模擬郵件正文效果，然后在頁面頂端的四個按鈕中選擇操作功能，并單擊相應(yīng)按鈕?！緦嵱?xùn)任務(wù)指導(dǎo)】.整體頁面分成上中下結(jié)構(gòu)，自上而下鋪出畫面結(jié)構(gòu)，然后逐步細(xì)化。.對“免費(fèi)郵箱”標(biāo)題頭的制作，綜合應(yīng)用各種標(biāo)記及細(xì)膩的樣式設(shè)置。.對“發(fā)送”、“預(yù)覽”等四個按鈕的制作，此處使用＜span＞標(biāo)記，是實際開發(fā)中制作按鈕的常見技術(shù)應(yīng)用。.郵件題頭處，“收件人”、“主題”使用〈input,標(biāo)記的單行文本輸入類型制作，“添加附件”使用文件上傳域類型制作。實訓(xùn)任務(wù)4：制作班級網(wǎng)站的用戶注冊頁面【任務(wù)描述】本實訓(xùn)任務(wù)制作班級網(wǎng)站的用戶注冊頁面，在頁面中對表單元素的類型、屬性充分實踐應(yīng)用。初始狀態(tài)時，頁面效果如圖教材229頁6-24(a)所示；當(dāng)用戶將光標(biāo)定位到郵箱、密碼輸入框時，即輸入框獲得焦點(diǎn)時，輸入框動態(tài)加長，如果輸入的內(nèi)容不符合驗證要求，即輸入無效時，輸入框的邊框顏色變?yōu)榧t色，提示圖標(biāo)變?yōu)閣arning警告圖標(biāo)如圖教材229頁6-24(b)所示；如果必填項目輸入的內(nèi)容符合驗證要求，即必填項目輸入有效時，輸入框邊框變?yōu)榫G色，提示圖標(biāo)變?yōu)閞ight正確圖標(biāo)如圖教材229頁6-24(c)所示；當(dāng)鼠標(biāo)懸浮在提交按鈕上時,按鈕背景色、前景色發(fā)生相應(yīng)變化如圖教材229頁6-24(d)所示?！緦嵱?xùn)任務(wù)指導(dǎo)】.用戶注冊表單使用U1無序列表布局，將郵箱輸入框和密碼輸入框的required屬性設(shè)置為必填項。.對郵箱輸入框、密碼輸入框做相同的樣式設(shè)置，可以通過標(biāo)簽屬性過濾選擇，也可以通過id集合選擇，還可以定義為同類，通過類選擇器選擇，然后進(jìn)行統(tǒng)一定義。.對于按鈕初始狀態(tài)和鼠標(biāo)懸浮狀態(tài)的樣式變化，通過對按鈕的初始狀態(tài)設(shè)置樣式和偽類hover設(shè)置樣式。.對郵箱輸入框、密碼輸入框獲得焦點(diǎn)時設(shè)置樣式，通過偽類focus設(shè)置樣式。.對輸入框設(shè)置類選擇器的:focus:invalid,即在同類的基礎(chǔ)上，選取focus狀態(tài)下的無效