html5设计规范.docx

html5设计规范篇一:HTML5微信页面设计我保证你一分钟就能看完这篇文章!真的.. 角色解释: 需求方:有钱大爷设计人员:美工殿下前端工程师:前端文艺青年一个HTML5页面从提出到完成上线的流程: 1、需求方、设计人员、H5实现人员三方共同讨论实现方案 2、设计人员出设计图 3、H5人员按设计图出H5页面 4、需求方评估已实现的H5页面后给予反馈 5、设计人员与H5人员根据反馈进行适当调整 6、发布推广如何提出一个合理的微信HTML5页面设计诉求? 合理分析诉求与公司团队拥有的资源: 1、需求完成时间; 时间给的越多,项目做的就越扎实,优化的也更好,就像造一座桥,三个星期完工,保质10年,1年完工,保质100年 2、现有技术能力; 根据人员的能力选用合适的技术,以及设计对应能实现的视觉特效 3、工作人员配备; 有些狂拽酷炫屌炸天的特效需要专业的游戏或影视人员参与制作 4、领导B格不解释 5、公司B格不解释好吧以上都是枯燥的叙述,后面会有可爱的喵星人出现,所以往下看吧。三方需要达成的共识与常识一、手机屏宽度高度不一由于手机屏大小不一,所以H5页面所承载的设计图相应的宽高也会不一样,是否需要设计多套不同的设计图以适应不同的手机屏? 最好的效果肯定是设计多套不同的效果针对不同的屏幕尺寸,但这样需要大量的人力与时间,而且维护成本太高,不符合大部分团队的实际情况。典型的手机屏尺寸如: 导航栏+iphone状态栏高度:64px iphone4 屏幕总宽度:320px 屏幕总高度:480px 微信网页可视高度:416px iphone5 屏幕总宽度:320px 屏幕总高度:568px 微信网页可视高度:504px iphone6 屏幕总宽度:375px 屏幕总高度:667px 微信内网页可视高度:603px iphone6plus 屏幕总宽度:414px 屏幕总高度:736px 微信网页可视高度:672px samsunggalaxynote3(三丧手机开发者的黑洞。) 导航栏+Android状态栏高度:73px 屏幕总宽度:360px 屏幕总高度:640px 微信网页可视高度:567px 仅iphone就4个尺寸了,更别说Android阵营的手机了特别注意:以上不是手机的分辨率单位,而是普通电脑上浏览网页时的像素,这和客户端Native制作有很大的区别。比如iphone4,宽度就是320px像素,高度为480px,如果以实际分辨率来设计即640*960来排列设计,实际在H5页面显示时会显得很小。一般我们都是以用自适应的解决方案,以一套或两套效果图适应大部分的屏目,放弃极端屏或对其优雅降级,牺牲一些效果正因为只有一套或两套效果图,团队、公司拥有的手机型号又是有限的,那么其它型号的手机显示效果就需要大家脑补了。需要需求方脑补一下在特别小的屏或特别大的屏上你当前效果图的显示效果。二、两种效果图排列,以及对应的解决方案 1、效果图水平居中排列设计(较容易实现自适应) 由于是水平居中,则两边可以用纯色平铺,不管屏有多宽,都可以以纯色填充,这就是最最容易的自适应了。篇二:《HTML5+CSS3网站设计基础教程》_教学大纲《HTML5+CSS3网站设计基础教程》课程教学大纲(课程英文名称) 课程编号:20XX01210011 学分:5学分学时:76学时(其中:讲课学时:47学时上机学时:26学时)先修课程:计算机基础、计算机网络、计算机应用后续课程:UI设计、JavaScript网页特效适用专业:信息技术及其计算机相关专业开课部门:计算机系一、课程的性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容,通过本课程的学习,学生能够了解网页web发展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果,学会制作各种企业、门户、电商类网站。二、课程设计理念与思路课程设计理念:高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展,不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点,以就业为导向,培养学生具备职业岗位所需的职业能力,职业生涯发展所需的能力和终身学习的能力,实现一站式教学理念。课程设计思路:基于工作过程开发课程内容,以行动为导向进行教学内容设计,以学生为主体,以案例(项目)实训为手段,设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标,以案例(项目)任务实现为载体、理论学习与时间操作相结合”。三、教学条件要求开发工具:DreamweaverCS6 四、课程的主要内容及基本要求第一章初识HTML5 第二章HTML5页面元素及属性第三章