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

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

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

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

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

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

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

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

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

表格其余幾行的代碼如下：知識(shí)點(diǎn)講解

注意Step03

表格其余幾行的代碼如下：知識(shí)點(diǎn)講解

注意Step03

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

課前02

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

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

難