《第十八讲struts+hibernate整合开发(一)》-课件设计.ppt

实例 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是一个构思好的界面布局图。 页面构图 仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 创建页面 创建CSS文件 JavaEE企业级开发 ——第十八讲 由NordriDesign提供 授课教师：郑浩 主要内容 需求分析说明 页面设计 天狗 T 实现电子商务平台的基本功能 商户可以管理商品 购物者可以添加购物车 用户分角色登陆 登陆模块 登录 角色判断 商品管理 购物模块 登陆页面 登陆框 分类/列表 Use case:login 访问数据库判断用户名、密码是否正确 如果不正确，返回登陆页面重新登陆 根据用户的角色选择不同的跳转 商品管理模块 商户主页面 商品列表 添加商品页面 删除商品 商品管理页面 商品列表 添加/修改商品属性 购物模块 买家登陆 商品详细信息页面 加入购物车 商品列表页面 大图视图 列表视图 单个商品页面 加入购物车 设计数据库 需要哪些表 表的字段 表的关联 需要补充的知识 页面设计 HTML CSS+DIV JavaScript Div+css的概述 业界对DIV+CSS的标准化设计关注 DIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准 传统的网页布局是使用网格 DIV+CSS布局 DIV+CSS布局这个布局中，div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学习，会发现div+css的好处实在是太明显了 DIV的概念 　1. DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 2. 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 P/P 是一样的。 3. DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码 4. 注意：div标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，paadivbb/divcc/p的结果是不确定的。 css的概念 CSS:Cascading Style Sheets 层叠式样式表 HTML语言并不是真正的版面语言，它只是标记语言，意图把文档的不同部分通过它们的功能作用进行分类，但并不指出这些元素如何在计算机屏幕上显示。 CSS则提供对文档外观的更好更全面的控制，而且不干扰文档的内容。 CSS基本语句的结构： HTML选择符{属性1：值1；属性2：值2；属性n：值n；} 选择符是要对它应用说明的HTML元素名称；属性就是能够被CSS影响的浏览器行为，如字体、背景、边界等；值就是可以为属性设置的任何选项，如“楷体”，“red”等。 如：p {font-size:12pt；color:blue} SPAN 和 DIV 的区别 SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。SPAN是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容 而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。 盒子模型 每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。 　　DIV结构如下：　　│body {}　/*这是一个HTML元素*/　　└#Container {}　/*页面层容器*/　　　　　├#Header {}　/*页面头部*/　　　　　├#PageBody {}　/*页面主体*/　　　　　│　├#Sidebar {}　/*侧边栏*/　　　　　│　└#MainBody {}　/*主体内容*/　　　　　└#Footer {}　/*页面底部*/ 开发方式 分组开发，每组三人 各个小组统一表结构设计、页面风格、命名方式、开发平台版本等 每个成员负责一个模块的开发，包括该模块的页面、业务逻辑、pojo、DAO等