《響應(yīng)式網(wǎng)頁開發(fā)實(shí)戰(zhàn)》教學(xué)教案-第15章Bootstrap組件

15.1會(huì)員注冊頁面【教學(xué)導(dǎo)航】教學(xué)目標(biāo)(1)掌握Glyphicons字體圖標(biāo)使用方法(2)掌握下拉菜單的結(jié)構(gòu)和使用方法(3)掌握下拉按鈕組和按鈕工具條的結(jié)構(gòu)和使用方法(4)掌握輸入框組使用方法 重難點(diǎn)(1)下拉按鈕組和按鈕工具條的結(jié)構(gòu)和使用方法(2)輸入框組使用方法 教學(xué)方法任務(wù)驅(qū)動(dòng)法、分組討論法、理論實(shí)踐一體化、講練結(jié)合 課時(shí)建議4課時(shí) 【教學(xué)任務(wù)】15.1.1任務(wù)描述請(qǐng)引入Bootstrap框架，制作如下圖15.1所示的會(huì)員注冊網(wǎng)頁。當(dāng)瀏覽設(shè)備不同時(shí)將會(huì)有不同效果。如果是桌面瀏覽器，主體表單靠右邊對(duì)齊。如果是移動(dòng)設(shè)備瀏覽器，主體表單居中對(duì)齊，并且字體縮小。圖15.1(1)會(huì)員注冊桌面屏頁面效果圖 圖15.1(2)會(huì)員注冊移動(dòng)端頁面效果圖1GlyPhiCons字體圖標(biāo)2下拉菜單按鈕組和按鈕式下拉菜單輸入框組任務(wù)實(shí)施有了任務(wù)知識(shí)作為鋪墊，接下來分析一下如何實(shí)現(xiàn)會(huì)員注冊網(wǎng)頁。該頁面由標(biāo)題和主體部分構(gòu)成，主體部分是一個(gè)表單構(gòu)成，表單內(nèi)部由多個(gè).input-group構(gòu)成輸入框框組構(gòu)成。頁面結(jié)構(gòu)示意圖如圖15.9所示。源代碼。任務(wù)實(shí)驗(yàn)綜合之前所介紹的知識(shí)，使用表單，下拉菜單，按鈕組完成如圖15.10所示的葡萄酒品嘗師網(wǎng)站的登錄頁面。圖15.10(1)登錄PC端示意圖圖15.10(2)登錄移動(dòng)端示意圖主要的HTML項(xiàng)目代碼為Task15-2.html,CSS項(xiàng)目代碼為TaSk15-2.css。15.2制作品牌服裝的網(wǎng)頁【教學(xué)導(dǎo)航】教學(xué)目標(biāo)(1)掌握Bootstrap導(dǎo)航組建的使用(2)掌握Bootstrap導(dǎo)航條組建的使用(3)掌握Bootstrap縮略圖的設(shè)計(jì)方法(4)掌握BootstrapJavaScript插件滾動(dòng)監(jiān)聽的使用方法(5)掌握BootstrapJavaScript插件輪播的使用方法重難點(diǎn)(1)下拉按鈕組和按鈕工具條的結(jié)構(gòu)和使用方法(2)輸入框組使用方法 教學(xué)方法任務(wù)驅(qū)動(dòng)法、分組討論法、理論實(shí)踐一體化、講練結(jié)合 課時(shí)建議4課時(shí) 【教學(xué)任務(wù)】任務(wù)描述請(qǐng)引入Bootstrap框架，制作如下圖15.11⑴所示的品牌服裝網(wǎng)頁。如果屏幕設(shè)備是中等屏幕即桌面瀏覽器，則導(dǎo)航條平鋪展示固定在頁面上方，主要內(nèi)容區(qū)域按照單列布局展示，點(diǎn)擊導(dǎo)航條不同的選項(xiàng)頁面自動(dòng)滾動(dòng)到相關(guān)內(nèi)容。ABOUTIsabelGarc∣aH?nlt?li?πbrandofd?sigπerCtOIhlngU?al&Land*DUt『w∣tsr?hcolors,unusualQJ情and∣nπαvaliveapproachtoFabrics.Brand'sphilosophyisIoCrwaI#elegaπ1clashingfo「womenataffordab?pricesandalongIheIaiie?tfa≤hio∏tr?πd?.IsabelGartiaisa?πamic.rapid?3κpmridingeompartywiththirteencore'satrc≡svariouscrEie?ofEuiropeandRussiaandJwOexhιbidoπcEntersIOCaqi≡dinFranceandItaly.I≡ab?>lGarciasuccessfully圖15.11服裝網(wǎng)頁桌面效果圖如果屏幕設(shè)備是移動(dòng)設(shè)備及平板或者手機(jī)，菜單將進(jìn)行折疊為一個(gè)按鈕用戶點(diǎn)擊展開，主內(nèi)容區(qū)內(nèi)容全部按單列顯示，如圖15.11(2)所示。烏/CSQt 但TMnI口S-?Cu1ST?3Γr3?lΓ?5ri>?ftΓιpeil=h3fll?lvtfeuMdrtbr?r-∣d∣iαιbi3dM∣τcc∣d5dιfuet?mρα.□urWWmk

rlτ?rB∣q∏jαtalnhκfia∣b?i≡κlBκhMWWrn?aι.InHi)∣*dNl15lIaakHl

BArQiitauncha?itkowjιri?na11?!∣∣Aw????rill?iιLπ■'11πia/φu1

bnr∣dDIARYIMov-emtP&r1Br2(115 *RL∣fiMgEec?∣U1iΓl∣l5≡∣bp-≡NKJ的UinI;KlHlGepSkldr??5P?pt??er?err?*υ?h4BpPeHlMrl尊?-raf?f∏l?cw?*?fl?∣QflRH

w?σ?ι享h????OrCMqyi?ahChwim廿聲3taIWltF

r?κ-o?πsnbein■ look.3w≡findrt?-ItfdEltIilnWe4nd圖15.11(2)服裝網(wǎng)頁移動(dòng)設(shè)備效果圖15.2.2任務(wù)知識(shí)1導(dǎo)航2導(dǎo)航條3縮略圖JaVaSCriPt插件一滾動(dòng)監(jiān)聽JavaScript插件一輪播15.2.3任務(wù)實(shí)施有了任務(wù)知識(shí)作為鋪墊，接下來分析一下如何實(shí)現(xiàn)服裝品牌網(wǎng)頁。該頁面采用的是單頁多屏可垂直滾動(dòng)的頁面效果。導(dǎo)航為響應(yīng)時(shí)折疊導(dǎo)航條。導(dǎo)航下方為一個(gè)輪播展示品牌服裝，再往下為導(dǎo)航各項(xiàng)內(nèi)容展示。網(wǎng)頁主要框架設(shè)計(jì)如圖15.23所示。主要HTML項(xiàng)目代碼為Task15-3.html。CSS項(xiàng)目代碼為Task15-3.css。按照之前學(xué)習(xí)的知識(shí)，完成如下前端學(xué)習(xí)網(wǎng)頁。如圖15.24所示分別為PC端顯示屏，移動(dòng)端顯示屏的效果示意圖。圖15.24(1)前端網(wǎng)頁P(yáng)C端效果圖噩礎(chǔ)廿題HTML+CSS防力一sHTlWIH3fτf,?HEE時(shí)?升Jt =階建三IHE高黑項(xiàng)目年發(fā)