网页设计技巧与规范ppt课件

网页（web）的基础知识与设计,1,.,视觉设计,前端开发,后台开发,网页效果图展示,Html（htm、xhtml）结尾属于静态页面Asp、aspx、php结尾的为动态页面，只能后台修改,编程,2,.,补充：,JS：动画制作，不是很炫，用的地方比较多H5：功能更加强大，操作更加简单，建立在Flash的基础上，动画表现力比较强,3,.,网站类型:,自适应网站：缩放时有滚动条，元素大小没有改变，画面变化不大（被动式响应设计）响应式网站：缩放时主题元素有所改变，中间元素没有变（主动式响应设计）,4,.,HEML网页布局:,静态布局：即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。流式布局：流式布局（Liquid）的特点（也叫Fluid)是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。适应布局：自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。响应布局：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合,5,.,元素,1.文本2.图像3.超级链接4.导航栏5.动画,种类,1.企业形象2.电商平台3.产品展示4.社区（门户）平台（雅虎）5.个人展示6.政府机构7.行业信息8.娱乐休闲9.个性化网站,网页,访问机构,首页栏目页详细页专题页,6,.,网站板块,顶部（top）,广告（KV）banner,内容（con）,版权（bottom）,7,.,px像素（电脑显示领域、网页设计）Pt点（打印）衬线字体Timesnewsroman（宋、楷）无衬线字体ArialTahoma（黑、幼圆、微软）等宽字体courier手写体标题，logo装饰字体标题、创意性设计,8,.,屏幕尺寸：1920*1080、1366*768、1440*900,知识进阶,2K屏：2060*14404K屏：4096*2160、4096*3112、3656*2664、3840*2160,16:9电视机显示器,KV端：页面尺寸1920*980（1000*1100*1200）px,9,.,网页配色,色彩三要素：色相、饱和度、明度Ctrl+U,色环：补色180度对比色120度中度色90度,10,.,TOP,微软雅黑14px、16px,11,.,广告栏,KV,字体的选择与产品的特征及环境要相适应,12,.,内容,KV,正文12、14宋体,13,.,底栏,BOTTOM,这些不是网页的重点，明度调低亮度的等级变化,14,.,同样等级的字体大小统一以偶数结尾（12、14、16）字体的统一性字间距、行间距（12号字、行间距22-24）网页中字体的数量不超过3种,字体的运用,朴实正常符合大众口味使用高对比颜色避免特殊性颜色（蓝色给人的感觉就是超链接）字体中间划一杠（避免超链接）,15,.,网站设计思路,主题突出方向关键词提取发散思维找素材,强调点想象场景,（总站）,16,.,内页设计,1.风格，元素的统一2.顶部，logo、导航、搜索3.字体、板式、色彩4.视觉的一致性（间距、边