《雅芳产品大全网.docx》由会员分享，可在线阅读，更多相关《雅芳产品大全网.docx（40页珍藏版）》请在三一办公上搜索。
1、石家庄邮电职业技术学院毕业设计 毕业设计毕业生网站设计雅芳产品大全网站 2009 届 电信工程 系专业 计算机通信 学号 50405414 姓名 谷红玉 指导教师 杨延广 完成日期 2008年12月11日 石家庄邮电职业技术学院毕业设计任务书姓 名谷红玉学号50405414专 业计算机通信班 级04五年制计通4毕业设计题目企业产品销售网站制作-雅芳产品大全网指导教师姓名杨延广职称或职务教授工作单位石家庄邮电职业技术学院电信工程系毕业设计内容、基本要求、重点研究问题、主要设计方法（或步骤）：一、 设计内容用所学的网页设计知识，制作一个雅芳产品销售的网站，通过网站可以宣传企业产品、发布销售信息，通
2、过在线语聊或留言的方式，及时的了解顾客的需求，客户可以通过网站了解企业产品，网站功能应包括产品浏览、购物车、产品收藏、在线语聊或留言等。上传购买信息等，企业可以方便更新产品信息。二、 基本要求1查阅相关技术资料。2完成系统需求分析、系统总体设计、详细设计。3完成网站的调试和实现购买产品的目的。4按要求的格式完成毕业设计报告。三、 重点研究问题B/S网站开发技术，产品展示，产品购买实现途径。四、 主要步骤确定需求、设计总体方案、制作网页、调试、撰写报告。主要参考文献、资料：1 庄王健，网页设计三剑客白金教程，北京电子出版社。2006年2 张祖鹰，网页制作实用技术Dreamweaver，大连理工大
3、学出版社，2007年3 丁群，网页设计与制作，中国计划出版社，2008年4 胡崧，Flash8标准教程。北京青年出版社，2006年计划进度毕业设计要求在2008年12月底完成，2009年1月初答辩，进度安排：10月：与老师沟通，明确设计任务，确定总体思路。11月： 查资料，需求分析、 系统总体结构设计、数据库设计、功能设计12月： 详细设计、网站上机调试实现，撰写毕业设计报告11月下旬：中期检查12月下旬：提交正式毕业设计和报告要求每阶段向老师汇报进展情况。指导教师签字： 年 月 日石家庄邮电职业技术学院毕业设计评定书姓 名谷红玉学 号50405414专 业计算机通信班 级04五年制计通4毕业
4、设计题目企业产品销售网站制作-雅芳产品大全网指导教师评语：指导教师建议成绩（60）指导教师签字： 年 月 日答辩小组建议成绩（40）组长签字： 年 月 日答辩委员会最后审定成绩主任签字： 年 月 日备注摘 要自计算机应用于管理领域以来，信息系统的开发与应用获得惊人的发展，网上购物也应运而生，并得已迅速推广，它不但可以扩大商家的规模和市场影响力，而且可以减少企业的经营成本，提高工作效率。给当今的传统型企业或者是现代型企业都带来了巨大的冲击和无限的商机。本文首先介绍了网上购物系统的现状及开发背景，然后论述了系统的设计目标，系统需求和总体设计方案，较详细的论述了系统的详细设计和实现。最后，本文对网上
5、购物系统进行了系统检测并提出了还需要改进的问题。本系统主要为用户提供了会员注册，购物车管理，商品收藏，在线留言，为管理员提供了商品管理，用户信息管理。在设计方面，本系统采用Deamveaer8.0， Photoshop css8.0， Photoshop css10.0， flash关键词：网上购物系统 开发背景AbstractSince the application of computer management, information systems development and application of access to the amazing development of o
6、nline shopping has come into being and has been a rapid promotion, it will not only expand the business scale and market influence, but also reduce business Costs and improve efficiency. To todays traditional or modern business enterprises have an enormous impact and unlimited business opportunities
7、. This article first introduced the on-line shopping system, the status quo and development background, and then discusses the design goals, system requirements and design programs, a more detailed discussion of the detailed design and realization. Finally, on-line shopping system for the detection
8、system and the need to improve. The present system is mainly to provide users with a membership registration, shopping cart management, collection of goods, online messages, merchandise manager provided management, information management users. In terms of design, this system uses dreamveaer8.0,. Ph
9、otoshop css8.0,. Photoshop css10.0, flashKey words: on-line shopping system development background目 录绪论11 网上购物系统概述11.1 网上购物的发展11.2 系统实现的目标11.3 系统的开发意义22 网上购物系统分析22.1 网站的设计目标32.2 网站的可行性分析32.3 本网站的功能32.4 网站设计的特点42.5 网站开发的设计思想42.6 系统设计的总体规则43 系统的开发技术及主要构架53.1 开发技术的选择53.2 系统的主要构架及开发模式54 详细设计与制作54.1 网站包含
10、的主要功能54.2 网站总结构的设计64.3 网站各页面设计64.4 在线留言系统115. 系统使用说明116. 总结12致 谢13参考文献14附录15/用户注册界面的代码实现/15绪论目前，网上购物正以一种前所未有的冲击力在影响着人类的活动，包括人类的生产和日常生活。网络的诞生和发展，颠覆了传统的信息传播方式，冲破了存在于传统交流方式中时间和空间的种种壁垒，极大地改变了人类从物质到精神、从形式到内容、从生产到生活的各种活动，并且给人类带来了新的机遇和挑战。中国互联网络信息中心(CNNIC)发布第22次中国互联网络发展状况统计报告中显示，截至2008年6月底，我国网民数量达2.53亿，首次大幅
11、超过美国跃居世界第一位，此外，根据CNNIC统计显示，我国网民中接入宽带比例为84.7%，宽带网民数已达到2.14亿人，宽带网民规模为世界第一。网络购物是互联网作为网民实用性工具的重要体现，随着中国整体网络购物环境的改善，网络购物市场的增长趋势明显。目前的网络购物用户人数已经达到6329万人，有25.0%的网民青睐网上购物，跻身十大网络应用之列。 1 网上购物系统概述1.1 网上购物的发展 近年来，随着Internet的迅速崛起，互联网已日益成为收集提供信息的最佳渠道并逐步进入传统的流通领域。于是电子商务开始流行起来，越来越多的商家在网上建起在线商店，向消费者展示出一种新颖的购物理念。网上购物
12、系统作为B2B,B2C（Business to Customer,即企业对消费者），C2C（Customer to Customer,即消费者对消费者)电子商务的前端商务平台,在其商务活动全过程中起着举足轻重的作用。本文主要考虑的是如何建设B2C的网上购物系统。网上购物是一种具有交互功能的商业信息系统。它向用户提供静态和动态两类信息资源。所谓静态信息是指那些比经常变动或更新的资源，如公司简介、管理规范和公司制度等等；动态信息是指随时变化的信息，如商品报价，会议安排和培训信息等。网上购物系统具有强大的交互功能，可使商家和用户方便的传递信息，完成电子贸易或EDI交易。这种全新的交易方式实现了公司间
13、文档与资金的无纸化交换。1.2 系统实现的目标现在流行的网上购物系统不仅要有漂亮的网页，更要有严谨的规划，注重每一个细小的环节。这样才能使得在电子交易时避免不必要错误发生。我们将使用Dreamweaver等技术辑网页，Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能根据自己喜爱的设计工具，如 Playback Flash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完
14、成，整体运用流程自然顺畅。除此之外，只要单击便可使 Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。本设计在实际应用中的解决方案是建立网站, 以及自己的即时通信工具，使得所需商品信息可以及时的保存、更新，可以更好的及时了解商品买卖的情况。1.3 系统的开发意义Internet的发展，为改变传统的商业运作模式提供了一种技术上的可行性的方案：利用Internet的技术和协议，建立各种企业内部网Intranet，企业外部网Extranet，通过廉价的通讯手段，将买家与卖家、厂商和合作伙伴紧密结合在了一起，消除时间与空间带来的障碍，从而大大的节约了交易成
15、本，扩大了交易范围。而在实际的生活中，这种方案已经被广泛的运用到了实际的商业活动中了，人们将这种交易模式称为：电子商务。当今比较流行的网上购物系统国外有“淘宝()”，国内有“当当()”。它们都是相当优秀的电子商务网站，对其他的网站提供了良好的典范。设计中可以学习参考他们的思想，了解和熟悉整个网站的开发流程及完整的电子商务网站应有的功能和注意事项。设计和完成一个电子商务网站的，将会牵涉到许多技术上的问题，如：动态网页制作技术的，后台数据库的设计和管理，通过实际的制作个网站，可以避免纸上谈兵，在实践中掌握上述技术的使用。2 网上购物系统分析系统分析是平台开发的一个不可缺少的环节，为了能够使本系统更
16、好、更完善地被设计出来，就必须先进行调查研究。在系统调查的基础上，对新系统的功能进行细致的分析，从而才能够开发出完整的系统设计。2.1 网站的设计目标本平台利用现在比较广泛的Dreamweaver软件制作网站来实现的系统前台部分，前台管理是友好的操作界面，供用户浏览、查询使用。包括：用户登陆、用户注册、浏览商品、查询商品、购物车、商品收藏等功能。并附带在线语聊和留言软件。2.2 网站的可行性分析 随着计算机技术的发展和网络人口的增加，网络世界也越来越广博，越来越丰富，电子商务已经成为网上的一股潮流。我们相信要不了太长有时间，顾客就可以在网络世界上获得他们在现实世界上可以获得的所有商品和服务。经
17、过设计目标和进行的市场调查得出以下四点的可行性分析：（1）经济可行性：该平台设计只是作为本人的毕业设计，又因为本人的设计能力有限，其功能还不能完善，所以没有什么经济效益可谈。（2）技术可行性：Dreamweaver的技术已经较为成熟。（3）法律可行性：该平台是作为毕业设计与商业无关，又因为是自主开发设计，因此不会构成侵权，在法律上是可行的。通过以上的可行性分析，我将采用Dreamweaver，Photoshop、flash库对网站进行建设。2.3 本网站的功能经过以上的初步调查和研究，并且确定了该平台的可行性，并决定开发本平台，为了能够对现行的平台内容进行充分了解，使所要开发的平台更具有实用性
18、和适应性，通过两个月的实习调查和指导老师的耐心介绍，设计出该平台功能如下：（1）能够完成用户基本信息录入的注册。（2）能够完成对网站的商品资料（商品添加、商品审查）、网站信息管理（修改删除、公告设置），以及常规设置（广告添加）的功能。（3）能够通过查看购物车对所选商品进行确定、挑选，通过在线联系确定商品的支付。经过前一阶段的调查与研究分析，我已确定了该平台设计的主要功能，对每个功能模块也作了具体描述，下面就来具体分析该平台的设计特点与具体思想。2.4 网站设计的特点我所设计和开发的网上购物平台是经过很长时间的调查和分析才开始具体实施的，它的主要特点是改变了以往的购物只能过现实的商场才能达到的结
19、果，采用Web技术，借助于Internet互联网广泛应用技术，达到资源共享，提高以往购物的局限性，缩短人们的时间和提高工作效率，具有较好的交互性，从而实现信息化，规范化，系统化，网络化的平台，使整个购物活动过程简单、方便、易行。本网站运行在Windows环境运行中，操作方便，便于修改。最常用的调试是IE浏览器。2.5 网站开发的设计思想网上购物平台主要是对后台管理和前台操作。后台管理是管理员对本网站的维护，通过即时软件在线联系能及时的了解用户的需求，产品的更改，用户的建议，完成再线付款等后台管理操作。前台操作是用户登录到本网站，可以进行用户注册，通过网站的精品推荐，找到自己想要买的商品，装入购
20、物车，提交定单时在线联系进行购买。网上购物平台的特点是客户和电子商品信息量很大，管理员需要整理的信息很多，为让管理员轻松、方便、快捷的管理，该平台采用符合购买电子商品基本的原则，满足广大客户的日益增长的数量，并达到操作过程中的直观、方便、实用、安全等要求。2.6 系统设计的总体规则无论哪个网站都要有它自己的设计规则。该平台也一样，它的主要设计规则有：简单性：在实现平台的功能的同时，尽量让平台操作简单易懂，这对于一个网站来说是非常重要的。针对性：该平台设计是网上购物系统及后台管理的定向开发设计，所以具有专业突出和很强的针对性。实用性：该平台能完成电子商品展示和管理员管理的基本信息，具有良好的实用
21、性。3 系统的开发技术及主要构架3.1 开发技术的选择本系统主要是Dreamweaver来编辑网站，Flash、Photoshop来辅助美化网站。Dreamweaver是一款专业的网站制作软件、它与Flash、Photoshop合在一起称为“网页三剑客”，这三个软件配合使用，制作出来的网页兼容性比较好是一款：所见即所得“的网页编辑工具，它对于web站点、web页和web应用程序进行设计、编码和开发。无论是用户是愿意手工编写HTML代码时的驾驶感，还是偏爱在可视化编辑环境中工作，Dreamweaver都会为用户提供有用的工具，拥有更加完美的Web创作体验。Flash用于制作精美的页面动画；而Ph
22、otoshop用于处理页面中的图形。3.2 系统的主要构架及开发模式系统的建设关键在于其所使用的构架，而网上购物这种基于web的系统，传统的c/s架构已经不能满足大量用户的访问和操作，b/s基于浏览器的架构则是目前网络系统应用的主流，它将大量的数据处理工作交给服务器端来处理，客户端只用通过普通的IE浏览器即可访问系统，方便快捷而且利于系统的更新和维护。4 详细设计与制作4.1 网站包含的主要功能首先进入主页面，会员可直接登陆，否则需注册用户后登陆，登陆成功后可进行产品搜索，产品导航分为产品介绍、护肤产品、彩妆产品、护发产品、保健产品五类，选择合适的产品放入购物车内，通过在线语聊或留言进行产品的
23、购买，付款成功以后退出雅芳大全网，具体流程如图4-1所示：图4-1 产品购买流程图4.2 网站总结构的设计本网站主要采用的是表格布局，使用表格布局不仅易于修改，而且可以根据自己网站的特点进行个性化布局。本网站采用上下的结构，网站上方主要是横幅（俗称Banner）和导航，导航有五部分：产品介绍、护肤产品、彩妆产品、护发产品、保健产品，网站的下半部分主要是产品的浏览。本站分类很详细，方便用户更快捷的找到所需要的商品。在产品介绍里，本网站把各类产品进行汇总，综合介绍站内产品。比如分页的彩妆产品又很详细的分出香水系列、唇彩系列、眼影系列、粉底系列，更能方便用户查找。4.3 网站各页面设计主页的设计是以
24、文字叙述为主，把产品进行综合总结。因为技术有限所以本站实现的是假登陆和假注册。产品导航链接有:产品介绍、护肤产品、彩妆产品、护发产品、保健产品。页面的颜色主要是以粉色为主，给人亲切、温馨的感觉，用了flash特效作为装饰，使我的网页有了动态之美。如图4-2所示：图4-2 雅芳产品大全网首页效果图 护肤产品页面的设计，每页有12个产品，分了四页介绍，详细介绍了产品的成分以及价格。本页面添加了购物车功能，但购物车实现的是假功能，在购物车的图片上添加了onclick行为，是在点击购物车时会弹出一个消息对话框，提示用户选择的产品已经放入到购物车内，本网站真正购买是通过即时通信的方式进行购买。如图4-3
25、所示:图4-3 护肤产品页面效果图彩妆产品页面的设计首先从视觉上给人带来冲击，采用黑色做为背景色，给人一种神秘的感觉。如图4-4所示:图4-4 彩妆产品页面效果图点击推荐产品就会链接到相应系列产品的页面。在彩妆系列里增加了产品收藏功能，在“产品收藏”链接上同样添加了“onclick”行为，点击”产品收藏”会弹出“物品已加入收藏，如果想购买请与我们在线联系，谢谢”的字样。实现购买的目的。护发、保健产品页面也是以暖色调为主，在保健产品页面中有温馨提示，介绍产品适宜人群和成分含量。如图4-5所示:图 4-5 护发产品和保健产品效果图4.4 在线留言系统留言系统采用的是TQ即时通信系统，TQ是一款易于
26、使用的网站即时通讯软件，具备了独创的网页会话功能，超强的群组沟通功能，并且可以和各类网站紧密结合，开创了即时通讯的全新领域。本网站可以根据TQ即时通信能及时了解用户所需要的产品，在线购买，或留言购买。TQ有两种状态，一种是在线状态，可以直接的咨询，使用起来就像是QQ聊天，离线状态是拨打免费电话或着留言，使用起来方便快捷。如图4-6所示：图4-6 在线留言系统在线留言系统的关键代码：script language=JavaScript src=src= language=javascript src=5. 系统使用说明本站是在Windows XP系统中进行运行与调试的，操作起来非常简单方便Win
27、dows XP系统安装程序如下：（1）区域和语言选项（2）输入个人信息（3）输入序列号（4）设置系统管理员密码（5）设置日期和时间（6）设置网络连接6. 总结本网站主要采用的是表格布局，使用表格布局易于修改，而且根据自己网站的特点进行个性化布局。本网站采用上下的结构，网站上方主要是横幅（俗称Banner）和导航，本站分类详细，方便用户能够更快捷的找到所需要的商品。我所设计和开发的网上购物平台是经过长时间的调查和分析后开始具体实施的，它改变了通俗的购物方式，采用Web技术，借助于Internet互联网达到资源共享，提高工作效率，具有较好的交互性，从而实现信息化，规范化，系统化，网络化的平台，使整
28、个购物活动过程简单、方便、易行。 致 谢在设计和论文完成后的今天，我要特别感谢我的指导教师杨严广老师，在我整个毕业设计的过程中给予我的指导和帮助，并时刻向我提出最宝贵的意见，让我能够顺利完成这次的设计和论文撰写。是他以渊博的知识和丰富的实践经验深深地感染了我，给我以毫无保留的指导，促进了我对专业知识的学习掌握，使我受益匪浅。正是在他的悉心指导下，我的论文得以顺利进行。再次,我要感谢我的一些同学，谢谢他们对我的帮助，是他们给了我灵感和信心。我从他们那里学到的不仅仅是专业知识，更重要的是严谨求实的治学态度和忘我的事业追求。大学就要毕业了，在这里我还要特别感谢教过我的所有老师。在这三年的大学生活里，
29、他们给了我很多帮助与关怀。他们不仅教授我知识而且使我学到了很多做人的道理。在平常的生活中，她们关怀的眼神、亲切的笑脸、真挚的言词，将永远深深的印在我的脑海里。这所有一切的一切都将是我未来生活中最宝贵的财富。他们和我共同生活了三年，在生活和学习上给了我很大的帮助。在我生病时有她们无微不至的照顾，在我孤独时有她们的相依相伴，让我时时刻刻都在享受着家的温暖。在这里我真诚的谢谢我的这些可爱的兄弟姐妹。总之，我相信在不久的将来，我将会更加感激大学时代曾经帮助我的所有老师、同学、朋友。因为是他们给予我鼓励，给予我力量，给予我知识。所以，我以后会更加努力，更加刻苦，为我们国家，为我们社会贡献自己的一份力量参
30、考文献1 杨选辉，网页设计基础与实例教程，北京电子工业出版社，2006年2 庄王健，网页设计三剑客白金教程，北京电子出版社。2006年3 张祖鹰，网页制作实用技术Dreamweaver，大连理工大学出版社，2007年4 丁群，网页设计与制作，中国计划出版社，2008年5 胡崧，Flash8标准教程。北京青年出版社，2006年6 宋一兵，李仲。从零开始Flash基础培训教程。人民邮电出版社，2006附录/用户注册界面的代码实现/新用户注册界面 function check() var i; var sz_question,sz_answer; var sz_gateway_id; number
31、= build_form.ACCT_NBR.value; sz_question = build_form.QUESTION.value; sz_answer = build_form.ANSWER.value; sz_gateway_id = build_form.GATEWAY.value; sz_nickname = build_form.NICKNAME.value; if ( sz_gateway_id = ) alert(请选择用户类别！); return false; if ( sz_nickname = ) alert(请输入用户昵称！); return false; if (
32、number = | number.length = 0) alert(电话号码必须输入！请输入电话号码！); return false; for(i=0;i number.length;i+) if (number.charAt(i)9) alert(电话号码必须输入整数！请重新输入电话号码！); return false; if ( sz_question.length = 0 ) alert(请输入密码查询问题！); return false; if ( sz_answer.length = 0 ) alert(请输入密码查询答案！); return false; if (!check_
33、ad_pass()return false; return true; !-todayDate = new Date();date = todayDate.getDate();month= todayDate.getMonth() +1;year= todayDate.getYear();if(navigator.appName = Netscape) document.write(1900+year); document.write(年); document.write(month); document.write(月); document.write(date); document.wri
34、te(日);if(navigator.appVersion.indexOf(MSIE) != -1)document.write(year);document.write(年);document.write(month);document.write(月);document.write(date);document.write(日);if (todayDate.getDay() = 5) document.write(星 期 五)if (todayDate.getDay() = 6) document.write(星 期 六)if (todayDate.getDay() = 0) docume
35、nt.write(星 期 日)if (todayDate.getDay() = 1) document.write(星 期 一)if (todayDate.getDay() = 2) document.write(星 期 二)if (todayDate.getDay() = 3) document.write(星 期 三)if (todayDate.getDay() = 4) document.write(星 期 四)/- 新用户注册界面 你的位置：首页>>>用户免费注册 用户类别： - 请选择- 移动用户 联通用户 小灵通用户 * 用户号码： *(如：移动手机号：13851540000) 用户昵称：/DI
