计算机教学课件 JavaEE企业级开发PPT

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