Chapter09Web前端框架与移动应用开发TP09

第九章制作找房无忧网站,预习检查,简述开发一个项目需要哪些过程？对于公共代码如何处理？使用什么技术进行代码管理？如何进行真机测试？,集中测试,2/59,训练的技能点,能使用HTML5+CSS3布局网页使用meta视口标签让网页在理想视口下浏览掌握Flex属性布局弹性盒模型掌握rem相对单位布局网页掌握zepto制作移动网页交互特效掌握Git进行项目代码的版本管理,3/59,互联网开发流程及角色分工,互联网产品研发主要的角色,4/59,互联网开发流程及角色分工,互联网产品开发流程,5/59,任务描述2-1,找房无忧网站：为消费者打通线上线下所有环节,提供高品质、高效率、标准化的房产服务平台房源类栏目二手房新房租房卖房服务性页面登录注册我的经纪人,6/59,任务描述2-2,找房无忧,7/59,问题分析1：整体开发思路,找房无忧开发步骤明确需求分析所有页面找出页面内容相同、相似的部分制作公共部分创建公用结构文件public.html创建公共的reset.css文件开发顺序测试,2,3,1,5,4,8/59,问题分析2：界面交互设计,界面交互设计的原则统一性原则界面风格统一交互风格统一命名规则统一美观性原则界面简洁、大方易用性原则操作方式自然、易理解,9/59,问题分析3：技术分析,技术实现中需要考虑的问题页面整体布局使用HTML5结构元素布局页面的适配性使用Flex布局页面使用meta视口标签使用rem相对单位布局页面,10/59,难点分析1：页面实现,移动端开发不能使用px固定单位移动设备的尺寸很多使用相对单位rem找房无忧网站的PSD设计稿宽度是640px根据iPhone5的尺寸来设计的首页的头部为例，在设计稿中测量得到高度84px然后在使用javaScript动态的根据窗口的大小改变html的font-size即可,htmlfont-size:100px;headerheight:0.42rem;background:#ff8a00;display:flex;,11/59,难点分析2：页面bug调试及网页性能优化,使用Chrome模拟测试真机测试保持良好的代码规范善于总结并分享经验记录常见错误互相分享,12/59,开发计划,用例1：网站公共部分20分钟用例2：网站首页60分钟用例3：二手房列表页100分钟用例4：二手房详情页80分钟用例5：租房列表页40分钟用例6：租房详情页80分钟用例7：我的页面35分钟用例8：我的已登录页35分钟用例9：我关注的小区40分钟用例10：登录页50分钟用例11：注册页40分钟用例12：找回密码页40分钟,13/59,用例1：网站公用部分3-1,需求说明页面头部是网站logo、我的、APP下载使用header标签布局网页头部，背景颜色为#ff8a00使用Flex属性布局logo和右边的我的、APP下载部分,练习,14/59,用例1：网站公用部分3-2,需求说明网页版权部分背景颜色为#2f3130使用rem相对单位设置元素的大小使用Flex布局置底导航使用固定定位让置底导航一直定位在网页的最底部在git上把页面从分支上合并到主干上,练习,15/59,用例1：网站公用部分3-3,网站头部和底部背景、字体颜色合理头部的图标与文本显示与效果图一致底部的图片、文字与结构显示与效果图一致,功能测试,16/59,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,17/59,用例2：网站首页3-1,需求说明网页主体内容最上方是网站的宣传广告图以及搜索框，把宣传图设置为背景图片，background-size的值为cover。搜索框使用定位的方式放在背景图片上使用nav和无序列表布局“二手房、新房”部分的导航，使用Flex属性和rem布局该列表大小，使用结构伪类选择器选择每个列表项，分别给他们添加背景图片“02news”广告使用图片布局,练习,18/59,用例2：网站首页3-2,需求说明“热门房源”模块使用标题标签和无序列表布局，使用Flex属性和rem布局左边图片和右边文字的位置和大小，使用结构伪类选择器选择最后一个列表项，去掉下边框“热门关注，友情链接”模块使用无序列表布局,练习,19/59,用例2：网站首页3-3,结构标签使用合理，符合语义化适配不同分辨率的移动设备页面能自适应底部的图片、文字与结构显示与效果图一致整体页面效果美观,功能测试,20/59,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,21/59,用例3：二手房列表页3-1,需求说明使用input的search类型布局搜索框房源列表使用无序列表布局，使用Flex属性和rem布局左边图片和右边文字的位置和大小，使用结构伪类选择器选择最后一个列表项，去掉下边框,练习,22/59,用例3：二手房列表页3-2,需求说明使用nav和无序列表布局”区域、价格”列表,并且在每个选项下面都隐藏着一个下拉框使用zepto框架中的tap事件，轻触“区域、价格”等选项的时候相应的被隐藏的下拉菜单出现,练习,23/59,用例3：二手房列表页3-3,结构标签使用合理，符合语义化适配不同分辨率的移动设备页面能自适应合理布局“区域、价格”等选项下面的二级菜单，触摸的时候能弹出对应的二级页面整体页面效果美观,功能测试,24/59,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,25/59,用例4：二手房详情页3-1,需求说明二手房详情页最上边房源的图片介绍，是一个焦点轮播图，总共有5张图片，使用bootstrap的轮播图插件完成使用无序列表布局房源“户型、面积”部分，使用Flex属性和rem布局左边图片和右边文字的位置和大小使用标题标签和段落标签布局房源特色部分，使用rem布局文字的大小、间隙等,练习,26/59,用例4：二手房详情页3-2,需求说明户型分间部分使用无序列表布局，使用Flex属性和rem布局左边图片和右边文字的位置和大小，使用结构伪类选择器选择最后一个列表项，去掉下边框对口学校部分使用无序列表和rem布局排版位置及周边部分使用图片布局，使用rem控制图片的大小伸缩性,练习,27/59,用例4：二手房详情页3-3,适配不同分辨率的移动设备页面能自适应轮播图轮播正确“户型、面积”模块显示正确户型分间、推荐房源部分显示正确整体页面效果美观，字体、颜色使用正确,功能测试,28/59,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,29/59,用例5：租房列表页2-1,需求说明使用nav和无序列表布局”区域、月租”列表房源类表使用无序列表布局，使用Flex属性和rem布局左边图片和右边文字的位置和大小，使用结构伪类选择器选择最后一个列表项，去掉下边框“集中供暖”字体颜色为#6da719，房租价格“1610元/月”字体颜色是#ff8a00,练习,30/59,用例5：租房列表页2-2,适配不同分辨率的移动设备页面能自适应图片和文字排版正确整体页面效果美观，字体、颜色使用正确,功能测试,31/59,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,32/59,用例6：租房详情页3-1,需求说明租房详情页最顶部是租房信息的大图广告，使用定位属性把图片上的“分享”文字定位在图片的右下方鼠标移入“关注”部分时，心形图片背景颜色变为#ff8a00使用无序列表布局“租金、房型”部分，使用Flex属性和rem布局左边图片和右边文字的位置和大小,练习,33/59,用例6：租房详情页3-2,需求说明使用标题标签和段落标签布局经纪人房评部分，使用rem布局文字的大小、间隙等位置及周边部分使用图片布局，使用rem控制图片的大小伸缩性使用标题标签和无序列表布局小区成交历史部分，使用rem设置文字的大小及间隙,练习,34/59,用例6：租房详情页3-3,适配不同分辨率的移动设备页面能自适应分享部分半透明层使用正确“租金、房型”部分布局合理，显示正确“致电、短信”部分图片显示正确整体页面效果美观，字体、颜色使用正确,功能测试,35/59,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,36/59,用例7：我的页面2-1,需求说明我的页最顶部“登录”下面的图片设置为背景图片，背景尺寸设置为cover使用无序列表设置“我关注的房源”部分，使用flex属性和rem布局字体大小和内外边距使用结构伪类选择器选择每个列表项，添加背景图片使用结构伪类选择器选择最后一个列表项，去掉下边框,练习,37/59,用例7：我的页面2-2,适配不同分辨率的移动设备页面能自适应“登录”下面的背景图使用正确列表内容及图片显示正确整体页面效果美观，字体、颜色使用正确,功能测试,38/59,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,39/59,用例8：我的-已登录页2-1,需求说明我的页最顶部“欢迎你”文字上面的图片设置为背景图片，背景尺寸设置为cover使用无序列表设置“我关注的房源”部分，使用flex属性和rem布局字体大小和内外边距,练习,40/59,用例8：我的-已登录页2-2,适配不同分辨率的移动设备页面能自适应顶部背景图使用正确列表内容及图片显示正确整体页面效果美观，字体、颜色使用正确,功能测试,41/59,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,42/59,用例9：我关注的小区页2-1,需求说明使用无序列表布局我关注的小区使用Flex属性和rem布局左边图片和右边文字的位置和大小使用结构伪类选择器选择最后一个列表项，去掉下边框,练习,43/59,用例9：我关注的小区页2-2,适配不同分辨率的移动设备页面能自适应列表内容及图片显示正确整体页面效果美观，字体、颜色使用正确,功能测试,44/59,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,45/59,用例10：登录页3-1,需求说明使用无序列表布局“普通登录”选项卡标题部分使用表单元素布局登录页面，使用placeholder设置默认信息提示使用HTML5属性验证表单，并且用validityState对象更改错误信息提示使用rem设置元素的字体大小以及内外边距,练习,46/59,用例10：登录页3-2,需求说明使用tap事件制作轻触“验证码快捷登录”页面切换到使用验证码快捷登录页面点击“发送验证码”按钮后就会出现有60到0的倒计时，该操作使用定时器完成,练习,47/59,用例10：登录页3-3,适配不同分辨率的移动设备页面能自适应表单元素及属性使用正确验证码的倒计时效果显示正确普通登录和验证码快捷登录选项卡切换正确整体页面效果美观，字体、颜色使用正确,功能测试,48/59,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,49/59,用例11：注册页2-1,需求说明使用表单元素布局登录页面，使用placeholder设置默认信息提示使用HTML5属性验证表单，并且用validityState对象更改错误信息提示使用rem设置元素的字体大小以及内外边距,练习,50/59,用例11：注册页2-2,适配不同分辨率的移动设备页面能自适应表单元素及属性使用正确整体页面效果美观，字体、颜色使用正确,功能测试,51/59,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,52/59,用例12：找回密码页2-1,需求说明使用表单元素布局登录页面，使用placeholder设置默认信息提示使用HTML5属性验证表单，并且用validityState对象更改错误信息提示使用rem设置元素的字体大小以及内外边距点击“发送验证码”按钮后就会出现有60到0的倒计时，该操作使用定时器完成,练习,53/59,用例12：找回密码页2-2,适配不同分辨率的移动设备页面能自适应表单元素及属性使用正确验证码的倒计时效果显示正确整体页面效果美观，字体、颜色使用正确,功能测试,54/59,共性问题集中讲解,常见问题及解决办法代码规范问题调试技巧,55/59,项目总结,讲解要点完成情况、技能总结、经验分享、项目收获表达要求清晰流畅、有条理、重点突出,作品展示,56/59,技能总结,技术实