（中職）Web前端設計基礎 項目五-3電子課件

1、YCF正版可修改PPT（中職）Web前端設計基礎 項目五-3電子課件網(wǎng)頁中的表單項目五授課教師：姓名WEB前端設計基礎Contents1.項目描述2.知識準備3.項目實施4.項目拓展5.項目小結6.技能訓練三 項目實施利用所學的表單知識制作網(wǎng)上銀行注冊頁面，如圖所示。captionfont-size:24px;line-height:50px;tdheight:30px;三 項目實施啟動Sublime程序，新建并保存文件名稱為5-7.html。第一步第二步Head標簽內的CSS代碼輸入如下：設置了表格標題的樣式：文字大小為24像素；標題文字行高為50像素。設置了單元格的樣式，高為30像素。三

2、項目實施第三步在body標簽中，先插入form表單，再在form表單中插入10行2列的表格，在表格中填寫內容。中國XXX銀行注冊頁面 注冊卡/賬戶類型 標準卡/賬戶閃酷卡創(chuàng)建了一個表單，將所有的表格以及表單元素都放在表單標簽中。創(chuàng)建表格標題。表格第一行，第二個單元格中是一個單選按鈕組，包含兩個單選項。三 項目實施第三步請輸入注冊卡（賬）號注冊卡（帳）戶密碼 手機號碼 證件類型身份證軍官證表格第二行，第二個單元格中是一個文本框。表格第三行，第二個單元格中是一個密碼框。表格第四行，第二個單元格中是一個文本框。表格第五行，第二個單元格中是一個列表框，包含兩個列表項。三 項目實施第三步請輸入證件號碼請

3、留下你的聯(lián)系郵箱選擇您要開通的業(yè)務短信提醒信用卡自動還款支付寶表格第六行，第二個單元格中是一個文本框。表格第七行，第二個單元格中是一個email地址輸入框。表格第八行，第二個單元格中是一個復選框組，包含三個復選項。三 項目實施第三步個人備注信息您確定注冊并開通以上業(yè)務嗎？ 表格第九行，第二個單元格中是一個文本框。表格第八行，第二個單元格中是是兩個按鈕，一個提交按鈕，另一個是重置按鈕。三 項目實施再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四步四 項目拓展通過項目實施，表單以及表單元素的標簽、屬性已經(jīng)基本掌握，如何能讓表單在內容完整的同時又能美化一

4、點呢？這就要結合css進行樣式設置，此項目拓展制作如圖所示的調查問卷。四 項目拓展首先要創(chuàng)建一個大的div塊，需要給塊設置背景和邊框，然后創(chuàng)建標題、表單以及具有布局作用的表格。第一步 分析需求第二步Head標簽內的CSS代碼輸入如下：#layoutwidth:700px;margin:0 auto;background-color:#F6F6F6;border:2px solid #8FC629;h1border-bottom:2px solid #8FC629;text-align:center;設置了ID名為“l(fā)ayout”的div塊樣式，寬為700像素；居中顯示；背景顏色灰色；邊框為2像

5、素的黃綠色實線邊框。設置了標題h1的樣式，下邊框為2像素的黃綠色實線邊框；文本對齊方式為居中對齊。四 項目拓展第二步h3padding:10px;tablewidth:500px;font-size: 12px;th,tdpadding:3px;thtext-align:right;.textInputwidth:150px;height:20px;border:1px solid #58805f;.textStyleborder:1px solid #58805f;.submitButwidth:100px;height:25px;margin:10px;font-weight:bold;b

6、order:2px solid #abd8b3;設置了標題h3的樣式，內邊距為10像素。設置了標題行單元格th，普通單元格的樣式td內邊距為3像素。設置了標題行單元格th的樣式，文本右對齊。設置了表格table的樣式，寬為500像素，字號為12像素。設置了類名為.textInput的姓名輸入框和email地址框的樣式，寬為150像素，高為20像素，邊框為1像素的青色實線邊框。設置類名為.textStyle的文本框邊框為1像素的青色實線邊框。設置了類名為.submitBut的按鈕的樣式寬為100像素；高為25像素；外邊距為10像素；文字加粗；邊框為2像素的青色實線邊框。四 項目拓展第三步 幾個有

7、關Web標準的問題 幫助我們更好的了解您對Web標準網(wǎng)頁設計的想法與看法 您是否曾使用表格式布局？ 是 否 您是否開始使用CSS布局？ 是 否 body標簽內的HTML代碼輸入如下：表格的第一行，第二個單元格中是一個單選按鈕組，name值為“c1”。表格的第二行，第二個單元格中是一個單選按鈕組，name值為“c2” ，包含兩個單選項。四 項目拓展第三步 是否訂閱CSS郵件？ 是的 您所從事的行業(yè)： 設計師 程序員 總監(jiān) 美術編輯 項目經(jīng)理 表格的第三行，第二個單元格中是一個復選框。表格的第四行，第二個單元格中是一個下拉列表框。四 項目拓展第三步 請留下您的姓名： 請留下您的Email地址： 請

8、留下您的建議： 表格的第五行，第二個單元格中是一個文本框，用于輸入姓名。表格的第七行，第二個單元格中是一個多行文本輸入框，用于輸入建議。表格的第六行，第二個單元格中是一個email地址輸入框。定義了提交按鈕。四 項目拓展再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四步五 項目小結本項目通過項目實施和項目拓展制作了銀行注冊頁面和用css樣式修飾過的調查問卷頁面，學習了HTML中表單、各種表單元素以及一些高級屬性的應用，也學習了一些CSS樣式的新用法。五 項目小結本項目知識點總結如表所示。標簽屬性說明formname表單名稱action表單提交地址m

9、ethod提交表單的HTTP方法，取值為get或posttarget目標顯示方式：_self、_blank、_parent、_topenctype編碼方式inputtypetext單行文本框password密碼checkbox復選框radio單選按鈕button普通按鈕submit提交按鈕reset重置按鈕image圖像域file上傳按鈕hidden隱藏字段URLURL地址輸入框emailemail地址輸入框date 日期選擇框time時間選擇框number數(shù)字輸入框range滑條控件required必填項textarearows文本框的高度cols文本框的寬度selectselected下拉列表選中項value值六 技能訓練通過測試練習環(huán)節(jié)，對本項目涉及的英文單詞進行重復練習，既可以熟悉html標簽的單詞組合，也可以提高代碼輸入的速度和正確率。在瀏覽器中打開素材中的Exercise5.html文件，單擊“開始測試按鈕”，在文本框輸入上面的單詞，輸入完成后，單