《响应式网页开发实战》教学教案-第15章Bootstrap组件

15.1会员注册页面【教学导航】教学目标(1)掌握Glyphicons字体图标使用方法(2)掌握下拉菜单的结构和使用方法(3)掌握下拉按钮组和按钮工具条的结构和使用方法(4)掌握输入框组使用方法 重难点(1)下拉按钮组和按钮工具条的结构和使用方法(2)输入框组使用方法 教学方法任务驱动法、分组讨论法、理论实践一体化、讲练结合 课时建议4课时 【教学任务】15.1.1任务描述请引入Bootstrap框架，制作如下图15.1所示的会员注册网页。当浏览设备不同时将会有不同效果。如果是桌面浏览器，主体表单靠右边对齐。如果是移动设备浏览器，主体表单居中对齐，并且字体缩小。图15.1(1)会员注册桌面屏页面效果图 图15.1(2)会员注册移动端页面效果图1GlyPhiCons字体图标2下拉菜单按钮组和按钮式下拉菜单输入框组任务实施有了任务知识作为铺垫，接下来分析一下如何实现会员注册网页。该页面由标题和主体部分构成，主体部分是一个表单构成，表单内部由多个.input-group构成输入框框组构成。页面结构示意图如图15.9所示。源代码。任务实验综合之前所介绍的知识，使用表单，下拉菜单，按钮组完成如图15.10所示的葡萄酒品尝师网站的登录页面。图15.10(1)登录PC端示意图图15.10(2)登录移动端示意图主要的HTML项目代码为Task15-2.html,CSS项目代码为TaSk15-2.css。15.2制作品牌服装的网页【教学导航】教学目标(1)掌握Bootstrap导航组建的使用(2)掌握Bootstrap导航条组建的使用(3)掌握Bootstrap缩略图的设计方法(4)掌握BootstrapJavaScript插件滚动监听的使用方法(5)掌握BootstrapJavaScript插件轮播的使用方法重难点(1)下拉按钮组和按钮工具条的结构和使用方法(2)输入框组使用方法 教学方法任务驱动法、分组讨论法、理论实践一体化、讲练结合 课时建议4课时 【教学任务】任务描述请引入Bootstrap框架，制作如下图15.11⑴所示的品牌服装网页。如果屏幕设备是中等屏幕即桌面浏览器，则导航条平铺展示固定在页面上方，主要内容区域按照单列布局展示，点击导航条不同的选项页面自动滚动到相关内容。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服装网页桌面效果图如果屏幕设备是移动设备及平板或者手机，菜单将进行折叠为一个按钮用户点击展开，主内容区内容全部按单列显示，如图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)服装网页移动设备效果图15.2.2任务知识1导航2导航条3缩略图JaVaSCriPt插件一滚动监听JavaScript插件一轮播15.2.3任务实施有了任务知识作为铺垫，接下来分析一下如何实现服装品牌网页。该页面采用的是单页多屏可垂直滚动的页面效果。导航为响应时折叠导航条。导航下方为一个轮播展示品牌服装，再往下为导航各项内容展示。网页主要框架设计如图15.23所示。主要HTML项目代码为Task15-3.html。CSS项目代码为Task15-3.css。按照之前学习的知识，完成如下前端学习网页。如图15.24所示分别为PC端显示屏，移动端显示屏的效果示意图。图15.24(1)前端网页PC端效果图噩础廿题HTML+CSS防力一sHTlWIH3fτf,⅛HEE时・升Jt =阶建三IHE高黑项目年发