第14讲-网站功能设计课件

网站的功能设计网站的功能设计网站开发技术网站开发技术第十四讲第十四讲知识回顾知识回顾:JSP中使用JavaBean、编写和使用JavaBean、bean的存放目录、获取和修改bean的属性、带包名的bean、JSP与bean结合的实例第第1414讲网站的功能设计讲网站的功能设计14.1 14.1 网页设计基础网页设计基础14.2 B2C14.2 B2C购物网站的需求分析购物网站的需求分析14.3 B2C14.3 B2C购物网站的功能设计购物网站的功能设计14.4 14.4 企业门户网站功能结构企业门户网站功能结构14.1 14.1 网页设计基础网页设计基础一、网页设计工具1、FrontPage 2002 站点管理工具，编辑HTML，发布网页，数据库集成，扩充性和可程序化。2、Dreamweaver MX/2004 最佳的制作效率，网站管理，无可比拟的控制能力，所见即所得，梦幻样板和XML，全方位呈现，支持动态网页。二、网站设计原则1.目标定位 潜力大,发展趋势，定位要小，内容要精。2.主题明确3.内容要求新、精、专 信息内容永远处于第一位，内容设计要有组织，及时更新信息内容。4.访问安全快速 提高浏览者的访问速度，以免影响访问量，要有安全良好运转的硬件和软件环境，要使信息便于用户浏览。5.页面美感十足、方便用户访问 提供交互性，完善的检索和帮助功能，方便用户访问和操作。三、风格设计 网站要根据主题的内容决定其风格与形式，因为只有形式与内容的完美统一，才能达到理想的宣传效果。1 1、必须遵循行业标准。、必须遵循行业标准。不同类型的网站有不同的风格,不同性质的行业，应体现出不同的网站风格，就像穿着打扮，应依不同的性别以及年龄层次而异一样。例如:政府部门的主页风格一般应比较庄重，而娱乐行业则可以活泼生动一些;文化教育部门的主页风格应该高雅大方，而商务主页则可以贴近民俗，使大众喜闻乐见。主页风格的形成主要依赖于主页的版式设计、色调处理和图片与文字的组合形式等。综合型门户网站搜索引擎网站C2C电子商务网站政府网站学校网站公司网站B2C购物网站课程网站专题网站有自己的特色有自己的特色名字名字符合规范、短小精悍、容易记忆、不易混淆、与公司名称、商标或核心业务相关。标志标志(logo)颜色颜色公司的CI（Corporate Identity，企业识别）主色调，是企业将其宗旨和产品包含的文化内涵传达给公众，建立起的视觉体系形象系统。如IBM的深蓝色，肯得基的红色条型。导航导航清晰。超链接清晰无误，导航按钮标识清楚。规范规范网页上所有的图像、文字、背景颜色、区分线、字体、标题、注脚等，都要统一风格，贯穿全站。四、版面布局 以最适合浏览的方式将图片和文字排放在页面的不同位置。要求重点突出、层次分明、错落有致、平衡谐调，将网站标志，主菜单等重要模块放在最显眼，最突出的位置，再考虑次要模块的排放。页面尺寸页面尺寸 由于页面尺寸和显示器大小及分辨率有关，一般分辨率在800 x600像素的情况下，页面的显示尺寸为：780 x428个像素；分辨率在1024X768像素的情况下，页面的显示尺寸为：1007x600像素。布局技术布局技术 表格布局、框架布局 和层叠样式表的应用布局原则布局原则主次分明、中心突出，大小搭配、相互呼应，图文并茂、相得益彰。布局步骤布局步骤 草案，粗略布局，定案。布局的类型布局的类型 网页版面布局大致可分为“口（同、国）”字型、拐角型（“T”结构布局）、“三”型、对称对比型、标题正文型、框架型、封面型、Flash型等。“国国”字型字型大型网站所喜欢的类型。上为标题广告；中间左主菜单，右友情连接，中主要部分；下为基本信息。优点充分利用版面，信息量大，缺点页面拥挤，不够灵活。拐角型 网页设计中用的最广泛的一种布局方式。优点是页面结构清晰，主次分明。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。“三三”型型 “三”型结构多用于国外站点，国内用的不多。特点是页面上横向两条色块将页面整体分割为四部分，色块中大多放广告条。对称对比型对称对比型 对称对比型是采取左右或者上下对称的一种布局方法，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。标题正文型标题正文型这种结构类型即最上面是标题或类似的一些东西，下面是正文，如文章页面或注册页面。框架型框架型框架型又可以分为左右框架型、上下框架型、综框架型又可以分为左右框架型、上下框架型、综合框架型。合框架型。一面是导航链接，一面是正文。这种类型结构非常清晰，一目了然。封面型封面型 也称为“POP”型。这种结构常用于时尚类站点和个人网站的首页，大部分为一些精美的平面设计结合一些小动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做上栏目链接。这种结构的优点是漂亮吸引人，缺点就是速度有时比较慢。Flash型型 Flash型与封面型结构类似，只是Flash型采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。五、色彩设计使用相同色系色彩用一种色彩：用一种色彩：先选定一种色彩，然后调整透明度或者饱和度，即将 色彩变淡或则加深，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。用一个色系：用一个色系：用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。注意注意：1.不要将所有颜色都用到，尽量控制在三种色彩以内,在其中选择一种作为主色调。2.背景和前文的对比尽量要大，以便突出主要文字内容。3.由于国家和种族、宗教和信仰不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的好恶程度有着很大的差异。六、图片、音乐和文字图片美观、符合网站的内容，数量要少，容量要小。标题建议使用动画。在个人网站中，应用背景音乐的网站较多。但一般对于企业的电子商务网站的主页来说，背景音乐不用。网站字体 不要使用超过3种以上的字体 不要用太大或太小的文字 避免过多使用不停闪烁的文字七、网页设计要求（1）网页命名要简洁（2）确保页面的导航性好（3）网页要易读（4）合理设计视觉效果（5）为图片添加文字说明（6）不宜使用太多的动画和静态图片（7）页面长度要适中（8）Java程序少用为宜（9）整个页面风格要一致（10）尽量使用相对超级链接（11）不要滥用尖端技术八、首页设计 首页设计应遵循快速、简洁、吸引人、信息概括能力强、易于导航的原则。1首页的功能模块 页头，主菜单，最新消息的传递，电子邮件地址，联络信息，版权信息，其他信息。2首页的可视化设计3首页设计要注意的问题 首页明确，主题突出；尽可能缩短下载时间。1、需求分析商品管理需求：商品管理需求：展出商品 商品下架网络客户需求：网络客户需求：浏览 查找 选择 更换 购买网站管理需求：网站管理需求：会员管理购物管理订单管理公告管理（促销、新品上市）连接管理留言管理销量管理14.2 B2C14.2 B2C网站的需求分析网站的需求分析14.3 14.3 网站的功能设计网站的功能设计1、功能确定用户管理：用户管理：注册登陆查找密码删除商品管理：商品管理：添加浏览查询查看详细信息 删除购物车管理：购物车管理：添加浏览清空修改 订单管理：订单管理：提交查询 校对删除留言管理：留言管理：添加浏览删除 连接管理：连接管理：添加浏览删除公告管理：公告管理：添加浏览 删除连接管理：连接管理：添加浏览删除2、功能设计前台与后台 大多数的网站采用B/S三层结构，即客户端浏览器-Web服务器-数据库服务器结构。客户端浏览器以超文本形式向Web服务器提出访问数据库的要求，Web服务器接受客户端请求后，将这个请求转化为SQL语法，并交给数据库服务器，数据库服务器得到请求后，验证其合法性，并进行数据处理，然后将处理后的结果返回给Web服务器，Web服务器将处理结果转化，变成HTML文档形式，转发给客户端浏览器。网站设计上分前台和后台，前台是给浏览者看的，用户可以在线阅读新闻、提交留言、查询信息等，后台是给网站管理人员提供的，用来发布新闻、管理用户和留言等。后台需要进入的。前台只有只读权限，而后台可以修改、删除网站的信息。需要拥有一定的权限才可进入。前台（用户操作）：用户管理：用户管理：登陆注册修改找密码商品管理：商品管理：浏览 详细信息搜索购物车管理：购物车管理：添加浏览清空修改订单管理：订单管理：提交查询留言管理：留言管理：提交浏览公告管理：公告管理：连接管理：连接管理：浏览后台（网站管理）：用户管理：用户管理：浏览删除订单管理：订单管理：浏览查看详细信息核对删除商品管理：商品管理：删除、添加公告管理：公告管理：删除、添加连接管理：连接管理：删除、添加留言管理：留言管理：删除3、数据库设计（1）数据库的选择 Access,SQL Server,MySQL等（2）创建数据表用户：id姓名口令E-MAIL地址联系方式问题答案注册时间商品：id名称类型介绍图片发布时间订单：订单id用户名订购日期E-MAIL地址邮编付款方式联系方式运送方式是否核对其它订单明细：订单id货物名称价格数量统计管理员：姓名口令连接：名称地址时间公告：内容时间留言：姓名E-MAIL主题内容时间(3)建立一个ODBC建立与Microsoft Access数据库的ODBC连接建立与SQL Server数据库的ODBC连接(4)下载、安装JDBC驱动程序，配置运行环境5、网站的目录结构网站的目录是指你建立网站时创建的目录。注意事项：1.不要将所有的文件放在根目录下。2.按栏目内容建立子目录 3.在主目录下建立独立的images目录 4.目录的层次不要太深，不过三层为好 5.不要使用中文目录，不要使用过长的目录 结束语当你尽了自己的最大努力时，失败也是伟大的，所以不要放弃，坚持就是正确的。When You Do Your Best,Failure Is Great,So DonT Give Up,Stick To The End谢谢大家荣幸这一路，与你同行ItS An Honor To Walk With You All The Way演讲人：XXXXXX 时 间：XX年XX月XX日