CSS网页设计答辩ppt

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