资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,基于,DIV+CSS,技术网页设计应用与优化,学生：,导师：,目录,Contents,1,2,技术的背景及意义,3,项目的设计与实现,4,项目的需求和分析,总 结,技术的背景及意义,技术的背景,1,现在网页用户群体复杂，层次多样，对网页的好用性要求越来越高，要求一个网页在很好的需求战略，功能规格，信息架构的基础上更多的关注交互细节设计。,传统的网页设计采用表格,(Table),布局,源代码存在大量的冗余代码,页面结构与表现混杂在一起,非常不利于查找和管理信息,更不利于修改信息。,而一种新生的技术，,DIV+CSS,的出现弥补了,Table,布局的不足。,技术的背景及意义,技术的意义,2,DIV+CSS,设计思想有以下的优势,:,1.,布局灵活，便于维护，代码清晰,2.,利于后期优化，更高的兼容性,3.,元素精确定位 ，任意排列,4.,内容结构与格式控制相分离,5.,良好的开发体验,(,易用性、扩展性、重构性,),技术的背景及意义,核心的技术,3,1.,盒模型,每个,HTML,元素都可以看作是一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充,(padding),盒子本身有边框,(border),而盒子边框外和其它盒子之间，还有边界,(magin),等。,默认情况下盒子的边框是无，背景色是透明，所以在默认情况下看不到盒子在网页设计上，内容常指文字、图片等元素。,2.,分形设计思想,可以看成是,CSS,盒模型在实际应用中的延伸与拓展，也可以看成是,CSS,代码在实际设计中的迭代与复用的过程，本身可以作为一种实际开发人员对于网页设计思想的总结和集成。,技术的背景及意义,核心技术展示,4,技术的背景及意义,核心技术展示,3,分形设计过程,项目的需求和分析,项目简介,1,物流管理系统来管理其基本业务和信息。该物流配送公司的主要业务是为用户配送货物，组织结构分为省公司和配送点。,本系统根据客户提出的需求，从配送管理信息化，和路线安排合理化入手，开发的一款快递物流系统，客户在物流运输方面能够方便迅捷的完成任务。,项目的需求和分析,系统功能图,2,项目的需求和分析,页面层次结构图,3,项目的设计与实现,项目首页,-,布局,3,项目的设计与实现,导航,-,全局导航,3,导航概要图,实际设计图,项目的设计与实现,色彩搭配,3,三色原则,:,主色为白色，强调色为深蓝色，辅助色为淡灰色和浅蓝色。,项目的设计与实现,文字及排版设计,3,字体,：宋体，严肃、清新，风格统一。唯一的字体可以避免杂乱无章。颜色变化也可以起到特殊信息强调的作用。,排版,：两端均齐和居中排列两种方式，结合的排列展示了端正，对称的美感。,16,磅,:,标题和,button,中，醒目、清晰,14,磅,:,页面正文标注,12,磅,:,小字体用于页脚和辅助信息,图片使用：可以准确地表达丰富的意思,项目的设计与实现,布局,3,Flash,动画展示，宣传公司,总结,最后总结,1,对于同一个页面视觉效果，采用,CSS+DIV,重构的页面容量要比,TABLE,编码的页面文件容量小得多，代码更加简洁，前者一般只有后者的,1/2,大小。对于一个大型网站来说，可以节省大量带宽。并且支持浏览器的向后兼容。,样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。基于,DIV+CSS,技术开发网页，并结合,JSP,、,javaScript,、,Flash,等技术会让整个网站充满美感与活力。,致谢！,
展开阅读全文