电商系统设计报告
系 统 报 告目录一、系统总体结构设计1.1 系统外部接口1.2 系统组成结构1.3 系统设计原则二、系统信息基础设施设计2.1IT 基础设施规划定义2.2IT 基础设施规划内容三、支持平台设计 3.1 网站建设目标3.2 项目基础分析3.3 网站功能栏目3.4 网站框架图3.5 网站开发预算四、应用系统设计4.1 应用软件系统与子系统的划分4.2 数据库与数据结构设计4.3 输入输出设计五、网页设计5.1 首页制作5.2 商品展示页面制作5.3 登陆界面的制作5.4 注册页面的制作5.5 结账页面的制作系统总体结构设计用户Internet服务器主机商业逻辑 ^tranetinternet网上书城系统总体转构图1.1 系统外部接口从上图中可以看到，系统有4个接口，分别是通过浏览器和用户的接口、通过浏览器与图书供应商的接口、企业内部的接口、通过专 门的软件和银行及其他支付平台的接口1.2 系统组成结构零食销售的系统由商业逻辑和应用服务器组成，其中，应用服务器又由Webg达层应用、支持平台、互联集成工具等几个部分组成1.3 系统设计原则由于本网站是基于C2c模式的零食销售，因此，本系统设计的原则有：（ 1）系统的可扩展性系统设计除了可以适应目前的网站的需要以外， 应充分考虑用户日后的业务发展需要，为业务发展提供接口。
例如，如果网站还要扩充一些娱乐功能， 系统可以轻松的进行扩充， 从而降低未来的管理成本 2）技术即时性兼顾系统成熟性和先进性的技术，才能保证现有系统的先进性，使计算机系统发挥最大的效率，并使之随着技术的发展不断升级 3）系统的稳定性采用计算机系统管理的目的就是为了提高企业运作效率，网站必须保持 24*7 的工作方式（每天 24 小时、每周 7 天） ，从而保证交易的即时性 4）电子交易的安全性安全性是整个电子商务解决方案中最重要的方面， 因此， 在系统设计时，需要充分保证对系统安全性的要求，通过支付密码技术、安全用户授权体系等技术来实现系统安全性 5）用户界面的友好因为本网站主要侧重于网上交易， 因此系统建设应该注重用户的感受，将用户的个人空间和交易界面设计的更加友好和个性化二、系统信息基础设施设计信息化基础设施 （IT 基础设施 ）建设也需要进行规划如果只是盲目地花钱，增加硬件、软件投资，表面上看起来好看，但是会存在很多问题再者， 当今技术的发展也远超过了人们的预期，即使刚建设两三年的基础设施也不可避免地面临一些新的挑战， 如新出现的分布式业务系统非常复杂， 它就会对基础设施提出新的要求， 还有大量结构化数据的出现使得存储介质、 存储结构都会发生很大的变化。
因此，企业的这些基础设施期待重新进行规划，以适应新的发展2.1 、 IT 基础设施规划定义所谓 IT 基础设施规划，就是合理规划和安排各项信息化基础设施，使之形成良好的 IT 环境，让各种业务解决方案、应用系统和数据都能不受约束地在其上实现有效配合 这些基础设施包括网络、 硬件设备和基础软件 网络规划包括数据流量及约束条件分析、 网络选型、拓扑结构设计、网络安全方案、网络建设方案等；硬件设备规划包括服务器、路由器、交换机、集线器、台式机、笔记本、打印机、手持设备等的规划和配置等； 基础软件规划包括操作系统软件、 数据库软件等软件的规划等等2.2 、 IT 基础设施规划内容网络规划现在， 企业和事业单位基本上建设有自己的网络系统， 但是随着业务需求的增长和技术的发展， 都不得不面临优化、 扩容和升级的问题 在进行网络的相关规划 时，主要侧重几个方面，一是提出企业和事业单位的LAN/WANRS域网/广域网）的网络拓扑结构的建设/改良方案； 二是确定合理的网络协议； 三是评估现有的结构化布线系统的容量、 网络设备、 广域网数据链路带宽是否满足未来新业务的需求，否则就要进行相应的扩充和升级等。
储系统规存划存储系统的规划遵循以下原则 :（ 1） 存储架构必须满足数据集中的要求 存储架构能够适应大存储容量的需求，又能够对存储资源进行集中利用（ 2） 存储架构能够对原有的投资进行保护 存储架构是一个长期的架构， 而如今存储设备的升级速度也非常迅速， 进行存储架构规划时要考虑到对客户现有设备的投资保护， 在保证不断提供功能和性能提高的同时，存储架构在较长的时间内能够保持相对稳定 3） 存储设备必须具有瞬间数据复制功能 利用完全基于存储设备的数据复制功能， 可以在不影响主机工作的情况下在最短的时间对数据进行快照式复制4) 存储设备必须具有远程数据复制功能利用该功能 存储设备可以提供与主机无关的数据级远程灾难备份， 对于一些不支持远程灾难备份的主机系统，可以利用存储进行远程灾备5) 高性能 集中的存储系统将支持多种核心应用，连接几台甚至十几台同时工作的服务器，存储系统必须有高的性能才能胜任6) 高可用性与高数据安全性 数据中心是核心应用的最终保障，必须能够保证7X24全天候运行，存储系统必须有高可用性，以保证应用系统对数据的随时存取7) 灵活的扩展性 存储系统必须有强大的扩展性来满足这种高速发展的要求。
备份系统规划备份系统应以不影响业务系统正常运作为前提 在业务系统遭受非法入侵、介质损坏、人为误操作等原因引起的数据丢失后，备份系统应能提供快速的数据恢复手段 要真正保证系统高效的运行以及提高当灾难出现时的抵御与恢复能力， 就必须做好数据的备份 一般来说， 各种操作系统所附带的备份程序都有着这样或那样的缺陷， 所以若想对数据进行可靠的存储备份， 必须选择专门的存储备份软、 硬 件，并制定相应的存储备份及恢复方案系统管理规划互联网、操作系统、数据库等新技术的应用，组成了复杂而相互依存的 IT 系统机构与企业在享受新技术带来的便捷的同时，也面临着复杂的系统和应用管理问题系统管理是以服务质量战略为核心， 利用针对业务应用管理的新技术， 对整个分布式网络环境进行统一监控和管理， 使之逐步整合成为一个安全、 可靠的网络体系， 实现集中管理、 全面防护的目的 一般来说，系统管理规划设计如下内容 :(1) 一体化网络和系统管理平台，改善了网络和系统管理； (2) 功能强大的管理报告解决方案，随时了解网络和系统的运行情况； (3) 端到端资源和性能管理解决方案，做到 IT 资源的远程监控、 分发和变更管理； (4) 具有实时诊断和监控功能的工具； ( 5)提供可全面管理系统可用性与性能的综合性产品；(6) 对服务器与数据库的性能和可用性进行管理的产品，确保数据库的稳定性和可用性等。
安全规划安全问题已经变得比以往任何时候都重要 为了保障数据、 网络等的安全，人们纷纷进行相关安全技术的研究，由此，目录产品、加密技术、认证技术、病毒防护技术、入侵检测技术、防火墙技术等营运而生 而在信息化基础设施规划中， 有关安全产品与技术的规划也越来越占据重要地位 操作系统规划 操作系统经过很长时间的发展， 从单用户、 单任务的操作系统， 如 CP/M、 C-DOS、 M-DO、S TRS-DO、SS-DO序口 MS-DO等，发展到多用户多道作业和分时系统，其典型代表有UNIX XENIX OS/2和 Windows操作系统等，以及自由软件Linux操作系统每次操作系统的更新都经历了多个版本的升级， 如DOSg历的7次大的版本升级，Windows的几次大升级等在进行操作系统规划时，既不能因循守旧，也不能一味从新最佳策略是 : 结合机构或者企业的实际情况， 在对各种操作系统进行综合评估比较的基础上，谨慎选择是否升级版本或更新操作系统 .数据库系统规划数据库技术和产品在不断地的发展，主要体现在以下几个方面 :(1) 数据模型是数据库发展的主线由于硬件技术飞速发展，支持 64个CPU^口 64GB RAM勺并行计算机使数据库系统扩展性大大提高，也使查询优化的参数空间发生改变； ( 2) 数据库技术与其他计算机技术的结合及相互渗透是数据库发展的重要特征； (3) 应用需求是推动数据库技术不断发展的动力。
数据库被广泛地应用到 ERP、 CRM、 CIM、OA GIS等系统中当前，数据库应用已经从 OLTPtj OLAP从数据管理向内容管理的广度扩展 至于数据库产品与技术方面的竞争， 主要在 Oracle、IBM DB2和 Microsoft SQL Server 之间展开从目前的情况看， Oracle 占据了第一的位置， 其后是 IBMDB2， Microsoft SQLServer 尽管仍位居两者之后，但是发展势头迅猛在进行数据库方面的规划时，首先要确认机构或企业内外的数据类型、数据内容、数据量如果已有数据库，也要对原有数据库的软件结构、系统结构、数据流程、业务情况、使用情况、系统性能进行一系列的综合分析和测试在此基础上，就可以根据用户的实际情况，综合考虑系统提供服务的用户数、 信息量、 业务需求和服务级别， 提供系统的、 合理的、综合的硬件，系统和数据库规划建议备份系统规划备份系统应以不影响业务系统正常运作为前提 在业务系统遭受非法入侵、介质损坏、人为误操作等原因引起的数据丢失后，备份系统应能提供快速的数据恢复手段 要真正保证系统高效的运行以及提高当灾难出现时的抵御与恢复能力， 就必须做好数据的备份。
一般来说， 各种操作系统所附带的备份程序都有着这样或那样的缺陷， 所以若想对数据进行可靠的存储备份， 必须选择专门的存储备份软、 硬件，并制定相应的存储备份及恢复方案系统管理规划互联网、操作系统、数据库等新技术的应用，组成了复杂而相互依存的 IT 系统机构与企业在享受新技术带来的便捷的同时，也面临着复杂的系统和应用管理问题系统管理是以服务质量战略为核心， 利用针对业务应用管理的新技术， 对整个分布式网络环境进行统一监控和管理，使之逐步整合成为一个安全、可靠的网络体系，实现集中管理、全面防护的目的 一般来说，系统管理规划设计如下内容: (1) 一体化网络和系统管理平台， 改善了网络和系统管理； (2)功能强大的管理报告解决方案，随时了解网络和系统的运行情况；(3) 端到端资源和性能管理解决方案， 做到 IT 资源的远程监控、 分发和变更管理； (4) 具有实时诊断和监控功能的工具； (5) 提供可全面管理系统可用性与性能的综合性产品； (6) 对服务器与数据库的性能和可用性进行管理的产品，确保数据库的稳定性和可用性等三、支持平台设计食品行业在我国国民经济中占有举足轻重的地位， 2009 年 1至五月份中国食品工业产值实现 1082万亿元产值， 14.6%的增速，高出全国工业增加值速 6.57 个百分点， 尽管在金融风暴的冲击下，我国经济增速放缓，但食品产业荏苒保持强大定力，逆势上升。
由此可见食品产业所面对的巨大市场从 2000 年开始，以信息化和网络经济为代表的全球新经济飞速发展，吸引了各个行业商家的眼球，引领着各个行业的经营理念食品产业同样在这场变革中引入了电子商务经营模式网络作为第四媒体，具有一定的特殊性网络不仅具有广泛地宣传范围， 而且还具有操作上的互动性以及数据传输的及时性网络在最大程度上缩减了交易的成本，缩短了交易的时间，扩大了客户群，加快了信息流通速度俨然已经成为了联系生产者及消费者的最方便的桥梁企业和用户实现了直接接轨，屏蔽了多级中间商对于食品行业从事电子商务企业的运营模式，目前有 B ToB,B To C,C To C三种模式，目前网络市场的主要形式则是 B To B尽管互联网时代的到来为大型食品企业和中小型食品企业在不同的方面都带来了新的商机，但是食品行业的特殊性值得企业家们的特别关注食品行业是与老百姓日常生活关系最密切的、相关企业最多的、投入最大的行业之一而且就目前中国食品行业的现状而言，在规模及管理上都存在着巨大差异因此，选择恰当的经营模式是各企业成功发展的重要环节电子商务可能为一个企业创造巨大商机和财富也可能成为一个企业增加开销，造成资源浪费的源头。
3.1 网站建设目标通过互联网这个平台销售有机绿色食品，推广企业的品牌，采用网上商城系统、新闻发布系统、会员管理系统、电子支付系统相结合的运营平台，才是长期的、可行的、省钱的方案建立一个完整的食品网站，突出食品特点，有美观的界面设计主要功能：1. 用户可以浏览各种食品的信息，同时可以查询食品的信息，在线留言注册等功能2. 网站有一定数量食品相关信息可供处理，方便顾客了解食品各种相关信息，同时有利于食品管理部门的管理，加强双边的沟通与协作，以提高和改善管理水平，使顾客通过网站的浏览可以对食品有比较真实和丰富的了解，对食品本身做一个比较好的宣传和推广3. 管理人员登陆系统后，将各种烦琐的管理工作通过网站来管理，用最少的人力和物力提高管理水平，方便发布各种旅游信息，处理游客所遇到的各种问题，及时了解对食品管理部门的意见，通过数据分析可以了解顾客的基本情况，突出食品特点，具有美观的界面设计，保证网站安全稳定的运行3.2 项目基础分析我们根据对网络营销项目的初步了解，对网络营销项目进行了系列基础分析 ：1 业务定位网络营销项目的主要业务定位是：①网上零售②品牌形象推广2 网站定位网站为企业实现网上营销，完成如下职能：1 网上销售产品2 推广自己品牌（通过活动和推广提升品牌知名度）3 客户定位网站的目标客户群体定位是：1 主要目标客户群：终端买家2 次要客户群：代理商，批发商4 赢利模式定位1 网上直销收入：网站的主要赢利来源，主要为产品个人零售收入2 网上招商收入：代理商分站为网站辅助赢利来源， 包含收取产品加盟商的加盟费、 产品代理分销收入3.3 网站功能栏目A. 产品展示客户能够以多种分类方式浏览产品，并拥有强大的产品搜索功能能够最快速地帮助客户锁定感兴趣的产品； 管理员在后台可轻松完成对商品信息的添加、统计、查询等管理和维护过程A.1 产品发布（后台）管理员可在线发布各种产品资料， 含产品图片 （支持大图、 小图） 、价格（支持多级价格） 、简介等A.2 产品查询客户可按产品关键字、产品分类、用途等多种查询条件，快速锁定感兴趣的产品A.3 产品推荐可按精品推荐、新品推荐、人气产品、畅销产品四种方式进行产品推荐排行A.4 产品评论产品评论可为客户采购提供客观的参考意见。
客户（或管理员）可对产品发表评分，或评论意见、用户见证A.5 产品关联产品介绍页面中，可以看到与当前产品有关的其他产品列表A.6 产品管理（后台）管理员可在线轻松进行各类产品资料的修改、删除、排序、查询统计等编辑操作 特色功能： 客户可对产品图片进行放大或缩小查看B.产品订购配备简单快捷的全套订购系统，能有效地保障客户快速完成订购过程，提高网站成交率8.1 在线订购（购物车）客户首先必须进行会员注册，才可进行在线订购系统客户可选择配送方式和支付方式8.2 直接订购客户也可选择直接订购的便捷方式：无需会员注册，直接打免费 电话或在线填写订单订购8.3 订单查询客户可在线查看和修改自己的网上订单和交易记录8.4 订购指南包括订购方式、配送方式、售后服务、常见问题、付款方式等说明8.5 在线支付支持网上银行、支付宝等多种在线支付方式8.6 订单管理（后台）管理员在后台可轻松实现客户在线订单的查询、统计、跟踪、编辑等功能C.企业介绍客户更可能的从多方面了解本企业，将有力提升本企业的品牌形象和网上销售的可信度C.1 企业概况企业概述、 发展历程等， 常规采用文字 +企业形象照片形式 （可选购“企业视频介绍”功能）C.2 主营业务企业主要经营的产品与服务项目简介C.3使命愿景企业的经营宗旨、价值观、使命宣言、发展愿景C.4 企业风采生产基地可重点展示绿色有机食品的生产环境和过程，让消费者放心；公司可展示办公室景象照片等D.会员管理客户可通过“会员注册”来提交自己的简介资料，管理员也可以此收集网站访问者的联系资料。
管理员可对注册会员资料进行统计、查询、编辑等操作D.1 会员注册客户通过“会员注册” ，输入公司名称、姓名、联系方式、省份城市等资料，注册成为本站会员D.2 会员登录会员注册后，可使用会员登录功能登陆企业网站，才可使用本站的多项会员服务功能D.3 会员资料管理（会员中心）会员登录后即进入会员中心，可查看和修改自己的会员注册资料（简介、密码、联系方式等） 、会员状态（会员积分、会员级别等）D.4 会员信息管理会员在“会员中心”中，可发布和管理自己的简介信息、订单信息、资讯信息等类别信息D.5 会员权限管理（后台）管理员可设置多种会员类型，对不同类型的会员可设置不同的服务权限 （例如可设置普通会员、高级会员，享有不同的产品定价折扣和不同的产品信息或资讯文章的浏览权限）E.联系我们网站必须提供尽量多元化的联系方式，尽量方便客户以最便捷的 方式，和我们产生交流，有力的提升网上招商成功率和服务品质F.管理员权限管理（后台）网站系统提供多种管理员权限设置功能，不同级别的管理员具有不同的后台功能管理权限， 不能越权操作其他功能模块，保证网站后台系统的管理安全3.4 网站框架图会员服务I > 详见下文产品知识\加盟与招聘会员服务账户查询3.5 网站开发预算项目说明单价数量价格网站开发建设网页设计网站首页首页设计采用客户的既定标准色，注重协调各区域的主次关系， 以营造高易用性与视觉舒适性的人机交互界囿为终极目标；100011000网站栏目页（一级栏目页）根据网站结构及信息类别的分类， 确定需要独立设计的频道栏目。
设 计中兼顾并继承首页的设计风格， 保障版面在各具体页面中的适用 性和灵活性活动&促销、产品、新闻、会员 管理、购物车、购物帮助、积分、 关于我们）40083200网站内容贝（二级及以下 栏目页）根据上级页面的设计风格与内容 页元素组成进行设计，出具设计稿 图形文件150101500数据库系统开发产品展示多级分类功能；自行添加修改删除200012000 数据；产品关键词指定；图片关键 词及标签（Tag）设定；优先显示 排序功能，搜索分为模糊搜索和高 级搜索2种形式，模糊搜索结合网 站整体数据库，对网站所有信息进 行关键字模糊搜索精确搜索应用 于网站版块，可实现多层级精确搜 索，针对模糊搜索可进行再次细化 搜索产品订购系统购物车记忆功能，防止顾客掉线丢 失购物车商品信息；购物车提示功 能：可让顾客随时查看购物车内商 品和金额，客户可以在订单中添加 备注内容9001900订单管理能够查看管理订单信息，能够按多 种方式对订单信息进行列表 管理员能够定义订单的处理状态， 如止在处理、已确认、无效等，能 够自由修改订单的状态能够按类别、关键字检索订单信息9001900积分管理会员能够查看自己的积分情况、 消费额（经验值）情况；用户可以用 积分兑换商品管理员可以修改积分，可以按类别 管理积分兑换或者附赠礼品的管 理6001600网上支付系统支付宝、易宝、财付通等6001600留言板留言表格设置合理，可多人管理； 用户发送留言后，留言将自动发至 指定邮箱；网站管理员可以删除留 百内谷；5001500资讯发布系统管理和发布新闻类文章内容； 每栏 目信息能够按类别显示， 方便浏览 者浏览与查找；系统可以提取最新的信息在首页 或栏目首页显示；管理员能够按类 别、关键字查询信息，方便管理；140011400会员管理系统浏览者在线填写注册表，即时成为 网站全员；会员可自行维护个人注 册信息；后台设置会员管理界面， 管理员可对会员信息进行分类查 询、对无效会员进行删除；会员登 录后能够查看、管理自己的信息； 会员能够查看自己的订单、积分150011500 值；会员能够查看自己的历史交易 记录；会员能够查看自己的收藏 夹；权限管理设立不同后台模块的管理权限， 可实现多人共同管理的目的9001900网站开发费用总计：15000元，网站优惠价：12000元域名注册.com100兀每年，三年共计 300兀，双线全能虚拟主机 4GB, 1900兀每年，三年可享8折优惠，即三年只要 4560兀，可省1140兀网站配套服务在线客服交流客户可直接在线与公司交流赠送1赠送在线流量统计口」直接从网上看到网站的询问情 况赠送1赠送网站维护服务终身免费技术维护赠送1赠送网站设计排版网站名称输入内容搜索会员服务首页主食休闲食品调料干货酒类方便食品产品展示公司介绍帮助中心新闻中心版权所有四、应用系统设计4.1应用软件系统与子系统的划分部分应用软件系统的网络接入设备室系统活动开展的前提， 有设备的 接入才有之后各项操作的完成，当然保证安全是必要的，所以要考虑 网络接入的安全接入系统，服务器部分主要针对信息的发布等相关内容。
中间件主要是控制系统服务器等相关的中间件安全系统 数据存 储部分是数据的管理，分析应用等开发维护部分是对系统的研究开 发维护，保证系统的安全运营按子系统的划分 休闲 食品网店休闲食品网站：总体上一个对外的版面，一切依据此来展开用户子系统：一个有关于用户的相关操作系统，包括有用户在该的网 站活动，相关信息的查看等等管理员子系统：该网站相关人员的活动，对用户的及时反馈，自身系 统的管理4.2数据库与数据结构设计 浏览器 ： 应用逻辑客户机 1 基于web的 ! 数据库服务 数据库应用服务器 器数据库与数据库服务器建立连接是对数据的有效利用， 数据服务器与（应用逻辑）基于 web的应用服务器通过请求、响应联系实现 对数据的逻辑表达，基于 web的应用服务器与浏览器客户机通过请 求、响应联系来实现对用户的要求多层结构Web服务器 Web服务器 Web服务器应用服务㈱ 应用服务器事务服务器数据库服务器数据库服务器数据库服务器Wob应用层应用服务层事务服务层数据库服务层众多服务器相互作用相互联系共同服务于企业网站， web服务器、应用服务器、事务服务器、数据库服务器相互之间作用服务于总 体系统4.3输入输出设计输入输出设计主要针对应用软件的输入输出数据的格式、内容、 方法等方面的设计，保证期间的合理合法等。
输入输出主要是用户通 过键盘完成在线的浏览、购买、支付等过程，以及交易之后的相关事 宜等五、网页设计首页详细设计与实现5.1首页制作打开dreamweaver8选择站点，然后点击新建站点，在显示出来的页面输入站点的名称，如下图所示吉本 昌m分类本地信息局罂 布列lie、霎蓼bll 富视rl 售伴nt站点名称值〕：零食网I本地t艮文件夹出〕：C ： iUsersAinird三"吐好包总温「口由未舌_। 也自动6惭本地死特胰皿跋认雕文件夹ar .㈡统持相对于白文档m 站点根目录⑻HTTP 地址出）htip7T~区分大小写的错接 便用区分大小片的燧接桧叠QI）裳存了启用缥存限）建后rh过法共进I3格知行竹栏自一 ■；寺图4-1站点建立然后点击确认，就会建立一个叫“零食网”的站点文件夹，可以在dreamweaver8的右下角看到，如图a 口零食网H-a| css甲…目I 储豌电53 index, .html& login, html孑 reg_new. htm ■ JUln-df K. f .图4-2文件夹视图在右下角的零食网文件夹出，右键点击该文件夹，选择新建文 件夹，命名为CSS用来存放建立的CSS羊式文件。
然后同理新建文 件夹命名为images,用来保存建立网页所需要的相关媒体文件点击左上角的新建选项，然后新建一个网页在设计样式中，选择插入然后选择表格，在出现的界面中设置如下行数1 列数3~]表格竟度；裱素 ，i 边把粗细：0 像茶单元格边距： 图单元格阍距； 田 图4-3表格设置表格建立完成后，效果如下图所示铃版是如 臊史■我的耍食网X । 工・培用党 ::\为天”幽仲1*行羽用W甚小ksWi^l;快点来啊买吧fill I i •== :，叩 Hf.；加吊功 *.W:靠冲m tm ： I 二图4-4页面布局然后在每个表格中插入先前准备好的背景图片即可表格背景设置完成后，选择插入一布局对象一层，然后在出现 的层中插入一张表格，用来设置主页中商品的“全部分类”选项插 入的表格设置为9行1列即可在新建的这张表格中，填入需要设置的商品名称然后将该层 移动到最左边的大表格中即可接着制作在主页中需要显示的部分商 品的展示图片，制作方法如下：打开photoshop工具，新建一张图片， 大小设置为283*283，接着插入3张静态的图片，在photoshop中找 到导航栏中的窗口选项，然后选中动画，在动画窗口新建3张新的动 画图片，在第一张新建动画中只显示插入的第一张图，然后，在第二 张新建动画中只显示第二张插入的图片， 最后，在第三张中只显示插入的第三张图，效果如图所示 图4-5GIF图片制作然后设置播放动画的时间为1秒，如图所示永远, | %；图4-6动画最后，保存为gif格式，同理，创建其他需要的图片即可。
在首页相应的位置插入制作好的图片，然后在最右边的大表格 中填入商品的名称和资料，完善页面的布局接着对字体和页面的背 景设置CSS羊式然后设置3个热点区域，分别在登陆、注册和联系的位置并设 置到链接，其中在联系的链接中，我们输入mailto:test@ 用 于测试完成后的页面如图所示全部分类的迎零来图4-7首页截图5.2 商品展示页面制作商品展示页面我们可以利用dreamweaver自带的模板进行修改,方法如下:选择新建一个页面，在弹出的窗口中选择如下图所示文档类型BTD）：本历录页页 页页 页页---页品本田录页品本而录页品本田 >食食主产文日目主产文曰目主产文日 康康康乐乐乐乐乐游游游璇游饮饮饮饮健健健娱娱庭娱娱旅旅旅旅旅餐饕饕餐本态板他星功模其CSS样式表框架第页面设计（CSS）入ns面页面殳计（有辅助功能的）图4-8模板然后我们对新建的页面进行修改首先将背景颜色更改为符合我们网站风格的颜色，用鼠标点击背景的空白处，我们可以再dreamweaver的下方看见背景的属性设置菜单，然后我们只需要将里面的属性修改为我们需要的属性即可， 具体的参数设置如下图所示格叫无 ▼辐Loeq ▼ | 0 1cg1，三三三三链控 -字体▼ 大小18 ▼康奉虹， 网触lire IE IE IS 1- 目标 7||百 单就 髀啦 M―ME 不搅行困 昔星 二分已 [1"口抑 垂直:蚪 1 S so 标题 背胭色理的啊二|加口匚图4-9属性然后建立一个页面，在代码栏中我们写入需要设置的 CSS样式 代码，里面包括网页中文字的样式和部分背景图片的样式。
然后保存 为CSS后缀的文件即可返回之前所建立的商品展示页面，在网页代 码中应用建好的CSS羊式，输入的代码如下接着，我们在页面下方的表格中设置滚动提示文字， 输入的代码如下
然后在两个表格的最下方添加两个按钮，一个命名为提交，用 于提交表单内容，命名为取消，用于重置表单完成后的效果如图所 示两户：1百 h -4.■广・ L - . . . Ji- - ,图4-12登陆框接着我们编写一个简单的javascript 程序，用于提示用户的登陆情况代码如下最后，我们在网页的左下角设置一个返回首页的链接， 完成后的效果如图ELCOME用户登录图4-13登陆页面5.4 注册页面的制作插入一张表格设置为1列5行，在第一行中我们设置一个用于返回首页的链接并设置为向右对齐，在第 3行中我们输入部分的文 字，用于提醒注册的用户在第5行中，我们插入5个文本域，分别 用作输入用户名称，用户密码，验证密码，用户邮箱，用户昵称，然后在下面插入连个单选按钮用于用户设置性别 最后，在最下方设置两个按钮，用于用户提交表单和重置表单，完成的效果如下图所示宜羽即助中心碰在n找的事谪网，注册后可以享受更妥胆苦和优惠唠、！迁在鲜什总？ tf案注册吧！ ! 1登骷母： *登陆密岛；|再复定码: *电子邮宿； *您的砌二. *您的性别；♦男一・女 B图4-14注册页面接着我们编写用于验证用户输入的信息是否合理的 javascript 程序代码，部分代码如下function checkSubmit() // 用于验证用户输入的信息是否正确{if(document.form2.userid.value=="")〃 判断用户是否输入了 用户名document.form2.userid.focus();alert(" 用户名不能为空！ ");return false;}if(document.form2.userpwd.value=="")// 判断两次输入的密码是否一致{document.form2.userpwd.focus();alert(" 登陆密码不能为空！ ");return false;}if(document.form2.userpwdok.value!=document.form2.userpwd.value){document.form2.userpwdok.focus();alert(" 两次密码不一致！ ");return false;}if(document.form2.email.value=="")// 判断用户是否输入了 EMAIL地址{document.form2.email.focus();alert（"Email 不能为空！ "）;return false;}if(document.form2.uname.value=="")// 判断用户是否输入了昵称{document.form2.uname.focus();alert(" 用户昵称不能为空！ ");return false;}}5.5 结账页面的制作插入一张表格并进行分割， 插入事先准备好的图片并设置好 CSS样式， 然后在页面表格中左侧插入一个文本域， 用于输入购买的商品数量， 接着在商品数量表单下面插入两个按钮， 一个用于提交输入的数量并提示购买成功操作， 另一个用于取消当前的操作， 完成后的页面如图所示首英结账页面零食博出认吉年航买的电身飞兵迂介忸，曲八舌冉点韦强 皮性板.交品CL最：1◎区期直图4-15结账页面调试运行调试将站点文件移动到别的文件夹，进行测试，这样可以检测网页中的链接是否添加正确。
首先进入站点文件夹，打开 index.html件，在浏览器中显示如下图所示图5-1首页测试我们可以发现部分图片显示不正常，因此可以判定有部分图片 的链接添加的不正确，检查后发现无法显示的图片是因为图片的地址 设置为绝对路径，因此，当文件夹的位置改变后，发生了图片显示不 正常的情况修改后的结果如下图所示网-tHIP-!*19图5-2首页链接修改后可以看到网页已经可以正常显示在打开的首页中，我们点击左侧导航栏中的“进口零食”链接，进入如下页面进口零食图5-3进口零食页面发现一切正常，然后在该页面中，我们点击顶部导航栏中特产零食链白拿事干■:互BAt*4特产零食图5-4导航栏测试发现一切正常，然后我们在任意点击顶部的其他任意链接<3C肝变方曲制鼻糖果巧克力图5-5其他链接测试 发现一切正常，并且我们可以看到，下部的滚动文字提示运行正常,如图所示图5-6底部效果数据测试返回首页，然后我们进入注册页面，进入页面后，我们可以看到页面显示正常，然后我们输入数据进行测试，当我们不输入信息是，点击提交按钮，如图所示重复密码: 电子邮箱: 您的昵称: 您的性别:图5-7用户名提示弹出提示“用户名不能为空”，接着我们输入两组不同的密码数据,如图所示图5-8密码提示弹出提示“两次密码不一致”,接着我们输入正确的数据，成功跳转 回首页，证明注册成功。
在首页中，我们点击登录链接，输入任意用户账户和密码后，点击登录按钮，结果如图所示图5-9登陆提示提示“登录成功”，点击确认后，返回首页当输入用户数据后，我们点击“清空”按钮，可以看到用户输入的数据已经清空我们在商品展示页面，点击任意我们想要购买的商品后， 进入结账页面，在结账页面中，我们可以看到默认的商品数量为 1,接着修改商品数量，如图所示L233图5-10商品数量点击取消后1233图5-11成功提示弹出取消成功的提示并且商品的数量重置为 1,如图所示图5-12重置结果当我们输入商品数量后，点击提交后图5-13成功提示弹出购买成功提示，并且返回首页。
