網(wǎng)頁設(shè)計與制作（活頁式） 課件 情景7-5 課中案例

網(wǎng)頁設(shè)計與制作課中案例授課教師：陳璇JavaScriptCSSHTMLHTML目錄CONTENTS1學(xué)習(xí)目標(biāo)2知識點講解3思政育人4考核評價5同步技能考點測試6課后拓展學(xué)習(xí)目標(biāo)01學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)掌握課中案例02知識點講解案例分析——個人信息注冊頁面案例分析表單淘寶會員支付寶會員QQ

微信案例分析——個人信息注冊頁面案例分析能夠掌握表單基本元素的應(yīng)用方法能夠在頁面中正確使用各種表單元素

案例學(xué)習(xí)目標(biāo)03思政育人保護個人隱私，防止網(wǎng)絡(luò)詐騙

同學(xué)們對“釣魚詐騙”都不陌生，“釣魚詐騙”主要有幾種常見的套路，例如：大量發(fā)送欺詐性電子郵件，郵件多以中獎、顧問、對賬等內(nèi)容引誘用戶在郵件中填入金融賬號和密碼等信息，繼而盜竊用戶資金；所以我們不要打開來歷不明的網(wǎng)頁、郵箱鏈接，更不要隨便在表單中填寫個人信息。恭喜中一等獎賬號密碼知識點講解案例設(shè)計思路具體頁面設(shè)計思路如下：具體頁面設(shè)計思路如下：【思考】（1）如何設(shè)置輸入框的提示文字？（2）如何設(shè)置輸入框為必填項目？（3）如何將表格和表格混合使用？知識點講解

打開開發(fā)工具“HBuilderX”，選擇“文件”------>“新建”------>“項目”，打開如下圖7.13所示對話框：Step01寫好相應(yīng)的項目名稱后，選擇基本的HTML項目，點擊創(chuàng)建，即可完成項目的創(chuàng)建。知識點講解

插入標(biāo)題<h2>，標(biāo)題文字為“個人信息注冊”，并設(shè)置標(biāo)題對齊屬性值為居中；同時在表單標(biāo)簽里面嵌套一個9行2列的表格，代碼如下，效果如圖7.9所示。Step02知識點講解Step02知識點講解

接下來依次在單元格內(nèi)添加輸入元素、下拉選擇框元素select-option元素和多行文本域元素Textarea，設(shè)置“賬戶、“密碼”、“性別”等控件，其中表格前三行的代碼如下：Step03知識點講解

注意Step03（1）當(dāng)type="radio"的時候，input標(biāo)簽要去相同的name值，才能保證二選一的效果。（2）文本區(qū)域和按鈕使用了合并列，即<tdcolspan="2">

表格其余幾行的代碼如下：知識點講解

注意Step03

表格其余幾行的代碼如下：知識點講解

注意Step03

表格其余幾行的代碼如下：知識點講解提示：案例最后可以把表格的寬高屬性去掉，并給表格添加背景顏色，如下代碼所示。最終效果圖【環(huán)節(jié)4】課堂實戰(zhàn)——個人信息注冊網(wǎng)整理課前收集的素材，根據(jù)課中的案例步驟，利用已掌握的知識點，進行課堂實戰(zhàn)演練，并通過相應(yīng)平臺提交成品課堂實戰(zhàn)——個人信息注冊網(wǎng)04考核評價考核評價線上學(xué)習(xí)線上測試資訊單線上學(xué)習(xí)線上測試資訊單01

課前02

課中知識點掌握案例實現(xiàn)效果思政元素表單線上學(xué)習(xí)線上測試資訊單整體素質(zhì)、技能、思政、運用03綜合評價整體素質(zhì)、技能、思政、運用05同步技能考點測試同步技能考點測試一、填空題（1）表單是由_________________元素定義。（2）表單的兩個屬性_________、_________。二、判斷題（1）<form>標(biāo)簽可以嵌套表格標(biāo)簽。（2）<input>標(biāo)簽可以實現(xiàn)三種不同的按鈕。答案：06課后拓展課后拓展根據(jù)課中已完成的案例方法，靈活運用已掌握的知識點，發(fā)散思維，利用表格元素進行布局，根據(jù)課中已完成的案例方法，靈活運用已掌握的知識點，發(fā)散思維，利用表格元素進行布局，制作會員注冊排頁面。設(shè)計表單控件的位置，制作更加美觀整齊的注冊頁面？制作會員注冊排頁面。計表單控件的位置，制作更加美觀整齊的注冊頁面？

可以多去關(guān)注其他網(wǎng)站的注冊頁面的設(shè)計，結(jié)合自己的設(shè)計，制作更加美觀的注冊頁面。

難