第14讲_网站功能设计

1、网站的功能设计网站的功能设计 网站开发技术网站开发技术 第十四讲第十四讲 知识回顾知识回顾: : 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 网页设计基础网页设计基础 一

2、、 网页设计工具 1、FrontPage 2002 站点管理工具，编辑HTML，发布网页， 数据库集成，扩充性和可程序化。 2、Dreamweaver MX/2004 最佳的制作效率，网站管理，无可比 拟的控制能力，所见即所得，梦幻样板和 XML，全方位呈现，支持动态网页。 二、网站设计原则 1.目标定位 潜力大, 发展趋势，定位要小，内容要精。 2.主题明确 3.内容要求新、精、专 信息内容永远处于第一位，内容设计要有组织，及时 更新信息内容。 4.访问安全快速 提高浏览者的访问速度，以免影响访问量，要有安全 良好运转的硬件和软件环境，要使信息便于用户浏览。 5.页面美感十足、方便用户访问

3、提供交互性，完善的检索和帮助功能，方便用户访问 和操作。 三、风格设计 网站要根据主题的内容决定其风格与形式，因为 只有形式与内容的完美统一，才能达到理想的宣传效 果。 1 1、必须遵循行业标准。、必须遵循行业标准。 不同类型的网站有不同的风格,不同性质的行业， 应体现出不同的网站风格，就像穿着打扮，应依不同 的性别以及年龄层次而异一样。例如:政府部门的主 页风格一般应比较庄重，而娱乐行业则可以活泼生动 一些;文化教育部门的主页风格应该高雅大方，而商 务主页则可以贴近民俗，使大众喜闻乐见。 主页风格的形成主要依赖于主页的版式设计、色 调处理和图片与文字的组合形式等。 综合型门户网站 搜索引擎网

4、站 C2C电子商务网站 政府网站 学校网站 公司网站 B2C购物网站 课程网站 专题网站 有自己的特色有自己的特色 名字名字 符合规范、短小精悍、容易记忆、不易混淆、与公 司名称、商标或核心业务相关。 标志标志(logo) 颜色颜色 公司的CI（Corporate Identity，企业识别）主色调， 是企业将其宗旨和产品包含的文化内涵传达给公众，建 立起的视觉体系形象系统。如IBM的深蓝色，肯得基的 红色条型。 导航导航 清晰。超链接清晰无误，导航按钮标识清楚。 规范规范 网页上所有的图像、文字、背景颜色、区分线、字 体、标题、注脚等，都要统一风格，贯穿全站。 四、版面布局 以最适合浏览的方

5、式将图片和文字排放在 页面的不同位置。要求重点突出、层次分明、 错落有致、平衡谐调，将网站标志，主菜单等 重要模块放在最显眼，最突出的位置，再考虑 次要模块的排放。 页面尺寸页面尺寸 由于页面尺寸和显示器大小及分辨率有关 ，一般分辨率在800 x600像素的情况下，页面的 显示尺寸为：780 x428个像素；分辨率在 1024X768像素的情况下，页面的显示尺寸为： 1007x600像素。 布局技术布局技术 表格布局、框架布局 和层叠样式表的应用 布局原则布局原则 主次分明、中心突出，大小搭配、相互呼 应，图文并茂、相得益彰。 布局步骤布局步骤 草案，粗略布局，定案。 布局的类型布局的类型 网

6、页版面布局大致可分为“口（同、国） ”字型、拐角型（“T”结构布局）、“三”型、 对称对比型、标题正文型、框架型、封面型、 Flash型等。 “国国”字型字型 大型网站所喜欢的类型。上为标题广告；中间左主 菜单，右友情连接，中主要部分；下为基本信息。优点 充分利用版面，信息量大，缺点页面拥挤，不够灵活。 拐角型 网页设计中用的最广泛的一种布局方式。优点是 页面结构清晰，主次分明。缺点是规矩呆板，如果细 节色彩上不注意，很容易让人看之无味。 “三三”型型 “三”型结构多用于国外站点，国内用的不 多。特点是页面上横向两条色块将页面整体分割为 四部分，色块中大多放广告条。 对称对比型对称对比型 对称

7、对比型是采取左右或者上下对称的一种布局方 法，一半深色，一半浅色，一般用于设计型站点。优点是 视觉冲击力强，缺点是将两部分有机的结合比较困难。 标题正文型标题正文型 这种结构类型即最上面是标题或类似的一些东西， 下面是正文，如文章页面或注册页面。 框架型框架型 框架型又可以分为左右框架型、上下框架型、综框架型又可以分为左右框架型、上下框架型、综 合框架型。合框架型。 一面是导航链接，一面是正文。这种类型结构非常 清晰，一目了然。 封面型封面型 也称为“POP”型。这种结构常用于时尚类站点 和个人网站的首页，大部分为一些精美的平面设计结合 一些小动画，放上几个简单的链接或者仅是一个“进入 ”的链

8、接甚至直接在首页的图片上做上栏目链接。这种 结构的优点是漂亮吸引人，缺点就是速度有时比较慢。 Flash型型 Flash型与封面型结构类似，只是Flash型采用 了目前非常流行的Flash，与封面型不同的是，由于 Flash强大的功能，页面所表达的信息更丰富，其视 觉效果及听觉效果如果处理得当，绝不差于传统的 多媒体。 五、色彩设计 使用相同色系色彩 用一种色彩：用一种色彩：先选定一种色彩，然后调整透明度或者饱和度， 即将 色彩变淡或则加深，产生新的色彩，用于网页。这样 的页面看起来色彩统一，有层次感。 用一个色系：用一个色系：用一个感觉的色彩，例如淡蓝，淡黄，淡绿； 或者土黄，土灰，土蓝。

9、注意注意： 1.不要将所有颜色都用到，尽量控制在三种色彩以内,在其 中选择一种作为主色调。 2.背景和前文的对比尽量要大，以便突出主要文字内容。 3.由于国家和种族、宗教和信仰不同，以及生活的地理位置、 文化修养的差异等，不同的人群对色彩的好恶程度有着很大 的差异。 六、图片、音乐和文字 图片美观、符合网站的内容，数量要少， 容量要小。 标题建议使用动画。 在个人网站中，应用背景音乐的网站较多。 但一般对于企业的电子商务网站的主页来说， 背景音乐不用。 网站字体 不要使用超过3种以上的字体 不要用太大或太小的文字 避免过多使用不停闪烁的文字 七、网页设计要求 （1）网页命名要简洁 （2）确保页

10、面的导航性好 （3）网页要易读 （4）合理设计视觉效果 （5）为图片添加文字说明 （6）不宜使用太多的动画和静态图片 （7）页面长度要适中 （8）Java程序少用为宜 （9）整个页面风格要一致 （10）尽量使用相对超级链接 （11）不要滥用尖端技术 八、首页设计 首页设计应遵循快速、简洁、吸引人 、信息概括能力强、易于导航的原则。 1首页的功能模块 页头，主菜单，最新消息的传递，电 子邮件地址，联络信息，版权信息，其 他信息。 2首页的可视化设计 3首页设计要注意的问题 首页明确，主题突出；尽可能缩短下 载时间。 1、需求分析 商品管理需求：商品管理需求： 展出商品 商品下架 网络客户需求：网

11、络客户需求： 浏览 查找 选择 更换 购买 网站管理需求：网站管理需求： 会员管理 购物管理 订单管理 公告管理（促销、新品上市） 连接管理 留言管理 销量管理 14.2 B2C14.2 B2C网站的需求分析网站的需求分析 14.3 14.3 网站的功能设计网站的功能设计 1、功能确定 用户管理：用户管理： 注册 登陆 查找密码 删除 商品管理：商品管理： 添加 浏览 查询 查看详细信息 删除 购物车管理：购物车管理： 添加 浏览 清空 修改 订单管理：订单管理： 提交 查询 校对 删除 留言管理：留言管理： 添加 浏览 删除 连接管理：连接管理： 添加 浏览 删除 公告管理：公告管理： 添加

12、 浏览 删除 连接管理：连接管理： 添加 浏览 删除 2、功能设计 前台与后台 大多数的网站采用B/S三层结构，即客户端浏览器-Web 服务器-数据库服务器结构。客户端浏览器以超文本形式向 Web服务器提出访问数据库的要求，Web服务器接受客户端请 求后，将这个请求转化为SQL语法，并交给数据库服务器， 数据库服务器得到请求后，验证其合法性，并进行数据处理， 然后将处理后的结果返回给Web服务器，Web服务器将处理结 果转化，变成HTML文档形式，转发给客户端浏览器。 网站设计上分前台和后台，前台是给浏览者看的，用户 可以在线阅读新闻、提交留言、查询信息等，后台是给网站 管理人员提供的，用来发

13、布新闻、管理用户和留言等。后台 需要进入的。 前台只有只读权限，而后台可以修改、删除网站的信息。 需要拥有一定的权限才可进入。 前台（用户操作）： 用户管理：用户管理： 登陆 注册 修改 找密码 商品管理：商品管理： 浏览 详细信息 搜索 购物车管理：购物车管理： 添加 浏览 清空 修改 订单管理：订单管理： 提交 查询 留言管理：留言管理： 提交 浏览 公告管理：公告管理： 连接管理：连接管理： 浏览 后台（网站管理）： 用户管理：用户管理： 浏览 删除 订单管理：订单管理： 浏览 查看详细信息 核对 删除 商品管理：商品管理：删除、添加 公告管理：公告管理：删除、添加 连接管理：连接管理：

14、删除、添加 留言管理：留言管理：删除 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.目录的层次不要太深