CSS网页设计答辩pptPPT课件.ppt

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