视图设计与配置 全市获奖_第1页
视图设计与配置 全市获奖_第2页
视图设计与配置 全市获奖_第3页
视图设计与配置 全市获奖_第4页
视图设计与配置 全市获奖_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

移动应用开发专业资源库移动应用开发专业资源库实训项目：掌上商城

--视图设计与配置学习目标1234重点难点学习方法实践过程目录5课后思考移动应用开发专业资源库学习方法重点难点实践过程课后思考学习目标本次实训完成的目标任务01了解移动应用视图设计模式02完成掌上商城UI界面设计学习方法重点难点实践过程课后思考学习目标重点移动应用界面设计模式难点掌上商城页面的设计图学习方法重点难点实践过程课后思考学习目标教引导演示学探究做任务驱动动手实践1:开发软件HBuilder学习方法重点难点实践过程课后思考学习目标2:完整的演示项目

素材准备开发模式设计结构3:手机

4:Photoshop图像处理软件

1:流式布局学习方法重点难点实践过程课后思考学习目标素材准备开发模式设计结构流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下所示。目标元素宽度/父盒子宽度=百分数宽度。2:理解viewport（视口）学习方法重点难点实践过程课后思考学习目标素材准备开发模式设计结构视口（viewport）是移动前端开发中一个非常重要的概念，最早是苹果公司推出iPhone的时候发明的，为的使让iPhone的小屏幕尽可能完整显示整个网页。不管网页原始的分辨率尺寸多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。在苹果引入视口的概念后，所有的移动开发者也都认同了这个做法。学习方法重点难点实践过程课后思考学习目标素材准备开发模式设计结构为了方便读者理解视口到底是什么，接下来举一个例子进行说明。在网页制作过程中，有时我们会使用百分比来声明宽度，代码如下所示。<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>demo</title></head><body><divstyle="width:50%"></div></body></html>div是body的子元素，设置style=”width:50%”就表示该div占body宽度的50%，而body没有显示声明宽度，因此body占用了父包含块html元素宽度的100%。同样，html也没显示声明宽度，因此html元素也占父包含块的100%。那么，html元素的父包含块是什么呢？答案是视口。学习方法重点难点实践过程课后思考学习目标素材准备开发模式设计结构视口在CSS标准文档中称为初始包含块，这个初始包含块是所有CSS百分比宽度推算的根源。在PC桌面上，如果不对html和body元素设置margin和padding，那么html和body元素都与浏览器窗口的宽度一致。因此，这时我们可以说，上述代码中的div元素占浏览器宽度的50%。但是由于移动设备的屏幕较小，在移动设备上，如果视口的宽度与浏览器窗口的宽度一致，在小的屏幕上呈现过多的内容清晰度较差，例如demo4-1的页面内容如果在iPhone6设备上呈现，效果如图所示。网页的内容显示模糊，这时读者也许想到了是否可以把网页放大，通过移动网页来看清上面的内容，这就需要让视口的宽度大于浏览器窗口的宽度，来达到网页缩放的目的。学习方法重点难点实践过程课后思考学习目标素材准备开发模式设计结构移动端的三种视口

在移动端浏览器当中，存在着三种视口,如下所示：可见视口布局视口（视窗视口）理想视口3:移动端视口1:掌上商城首页内容组织形式学习方法重点难点实践过程课后思考学习目标素材准备开发模式设计结构项目框架搭建搜索栏轮播图导航栏商品区底部导航栏2:商品分类页内容组织形式学习方法重点难点实践过程课后思考学习目标素材准备开发模式设计结构左测商品分类导航顶部工具区右测商品导航3:商品详情页内容组织形式学习方法重点难点实践过程课后思考学习目标素材准备开发模式设计结构顶部工具区商品详细商品信息商品评价4:购物车内容组织形式学习方法重点难点实践过程课后思考学习目标素

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论