雯雯网上鲜花销售系统毕业设计说明书
日期： 2015.1 目录
Abstract:
This topic made flower sales site, the overall use of DIV+CSS technology, combining the JavaScript effects of the production of this website is to provide a newer and more quick shopping environment for consumers. This website is the inspiration for the masses are familiar with online shopping mall: such as Amazon, Jingdong Mall, Dangdang, the online sales model saves time and space for enterprises and users, improve efficiency, achieve mutual benefit and win-win new operation. This website uses a light blue + Blue + white, giving a fresh and clean feeling, but not overwhelming, mainly reflected the characteristic of flower shop. The site uses 3 JavaScript effects, make the website more vivid, the t *好棒文|www.hbsrm.com +Q: *351916072*
otal effect reached the purpose of selling flowers.
Keywords: DIV+CSS sales of flowers JavaScript
一、 概述
（一）、项目开发背景
随着国际互联网的飞速发展和信息技术的不断进步，Internet不仅给我们带来了无穷尽的信息，更是改变了商业运营模式以及人们的消费观念。正是在这种网络高速发展的背景下，网上销售便是互联网上出现的新概念，是网络技术应用新的发展方向，它利用计算机技术，网络技术和远程通信技术，实现人们网上购物。网上购物具有很强的交互性，方便用户相互传递信息，沟通交流，完成交易。伴随着网上购物技术的不断成熟和功能的越发强大，用户可以在网上随意搜索，享受网上购物的轻松便捷。如今商业网络已经成为网络经济的大势所趋，利用互联网平台进行网站销售在给人们带来经济实惠的同时，也降低了交易成本，增强竞争力，为商家提供了探索新经济销售模式的有效渠道。如今人们生活节奏快，工作繁忙，出门购物的时间越来越少，更不能享受到购物的乐趣所在，所以网购逐渐成为一种流行，深受人们的喜爱。为了适应互联网发展的新技术、为不同的读者的需求提供种类繁多，物廉价美的鲜花，达到人们足不出户便可随意购物，特开发了本系统——网上鲜花系统。
（二）、项目开发目的
首先，由于此鲜花店地理位置离市中心很近，各式各样大大小小的花店到处可见，特别是市区的花店很多老板都回去大城市学习最先进的扎花技术，特别在一些特殊节日，比如母亲节要送康乃馨，情人节要送玫瑰，还有生日等等，年轻人潮流、追风，一般他们都会选择在市区购买，所以对于我们来说竞争力很大，那么开发本网站最大的目的就是扩大本店知名度，让更多的人熟知，扩大经济来源。第二点，网络是一个沟通的桥梁，客户可以直接通过留言、评论跟我们进行直接的沟通，有什么问题可以得到更快的解决办法，客户可以直接跟我们提出意见，比如鲜花的扎法啊，配色啊，装饰等等，方便各方面提升本店的技术，更好得迎合大众的口味，也就是所谓的互惠互利，同时还能有效控制运营成本，提高经济效益的目的。第三点，鲜花销售分好多种类，有包扎的礼品鲜花，有盆栽，有花篮，有假花装饰等等，我会在网站里增加一项基本养花护花的知识，教大家一些平常的护花技巧，这样会让读者觉得这家店的温馨，还有也增进了他们对花得认识，其实花跟动物跟人一样，都有生命，它们很多神奇的地方需要人们慢慢去了解，这样也可以呼吁人们爱花、护花。
（三）、 网站设计思想
为了完成一个好的网上销售网站，必须要满足使用方便、操作灵活等设计需求。根据顾客的实际需求本网站在设计时应该满足以下几个目标。
1.实用性
本网站界面设计美观、友好，所以决定大体采用蓝加白的背景色，让人感觉来到大自然的亲近感。其次使顾客在视觉上得到美的享受，商品的信息查询灵活、方便、快捷、准确。本网站能够全面展示网站内所有商品，并展示推荐商品、热卖商品及养花护花的基本常识。
2.高兼容性
一个好的网站同时必须具有高兼容性，本网站通过合理的图片设计以及复杂的层布局、js特效，经过多次调试实现各浏览器高兼容。
3.智能性
本网站为了方便用户操作所以将网站页面设计得既易懂也更易操作，没有繁琐的操作，不用进行说明，让您一看就懂。
二、 开发工具介绍
（一）、 Dreamwever
Dreamwever是一款强大的网页编辑软件，它可以对html,css,js等文件进行可视化编辑。它具有强大的智能提示系统，对不太熟悉的代码进行提示，大大的减少了对代码的编写操作。
（二）、 Photoshop
Photoshop是一款强大的图形编辑软件，它可以对图层和矢量图进行编辑，将图片数据化，使得图片编排可以随心所欲，使网页效果更鲜明，是网页制作前期的得力助手。
（三）、 IIS
IIS是web服务器系统，它主要用于发布网站，该课题使用IIS主要是为了调试该项目，由于在课题开发过程中，js特效方面遇到图片路径问题，经过多次尝试，猜想是缓存问题，而本地运行缓存不好清理，所以采用本地IIS服务器解决缓存问题，并且解决了js特效问题。
三、 网站开发流程
（一）、 素材准备
本课题的所有图片均来自与淘宝网，京东等各个花店。首先根据课题的选取，需要准备鲜花等图片素材，经过淘宝网等途径，为本课题所设计出来的分类寻找具有代表性的鲜花，再通过PS技术将图片处理成相同像素比的图片，由于js特效需要像素比较大的图片，因此在素材准备中，我就已经将大像素比的图片给保存了一份。下面就是head层的图片，它是在百度图片库中找到的三张图片，第一张是左边的鲜花，第二张是门帘，第三张则是后面的纹理，我通过PS抠图技术，将此三张图片进行了抠取，并放在一个图层上面，形成了一张head层的背景，并通过艺术字的方式给这张图片上写上了雯雯鲜花销售系统。图片准备好后，就是js特效的准备了，首先第一个js特效位于鲜花展示导航下，此处运用了懒人素材网的一个js特效素材。大致介绍：先通过引入jquery.roundabout2.js开源库，通过ul标签给的id=fashion，它是被开源库所调用的，我们首先将样式引入首页html，把图片引入到ul中的li中，最后通过jquery的ready函数，获取id为fashion的层，将它roundabout，也就是执行函数库中的特效函数。详细介绍：第一步，首先从网上下载这个特效插件，并了解里面的demo.html文件，对它进行分析。第二步，将demo.html中没用的内容都全部删除，最后得到这个代码（如图1）。第三步，对特效的文件夹进行分析，发现里面除了js文件夹和images文件夹有文件。第四步，移植特效到js 文件夹，首先移入js库文件，并在页面中引入，在将处理好的鲜花图片放入课题的images文件夹中，将demo.html中的内容复制到课题的div中，将li标签中的img标签的src修改成要展示图片的地址，保存后，JS特效一配置准备成功。如图2。第二个js特效与第一个js特效类似，也是从懒人素材网选择的素材，第二个js特效则位于商品详细页面中的商品图片，点击后有放大的效果。代码如图3所示。
Abstract:
This topic made flower sales site, the overall use of DIV+CSS technology, combining the JavaScript effects of the production of this website is to provide a newer and more quick shopping environment for consumers. This website is the inspiration for the masses are familiar with online shopping mall: such as Amazon, Jingdong Mall, Dangdang, the online sales model saves time and space for enterprises and users, improve efficiency, achieve mutual benefit and win-win new operation. This website uses a light blue + Blue + white, giving a fresh and clean feeling, but not overwhelming, mainly reflected the characteristic of flower shop. The site uses 3 JavaScript effects, make the website more vivid, the t *好棒文|www.hbsrm.com +Q: *351916072*
otal effect reached the purpose of selling flowers.
Keywords: DIV+CSS sales of flowers JavaScript
一、 概述
（一）、项目开发背景
随着国际互联网的飞速发展和信息技术的不断进步，Internet不仅给我们带来了无穷尽的信息，更是改变了商业运营模式以及人们的消费观念。正是在这种网络高速发展的背景下，网上销售便是互联网上出现的新概念，是网络技术应用新的发展方向，它利用计算机技术，网络技术和远程通信技术，实现人们网上购物。网上购物具有很强的交互性，方便用户相互传递信息，沟通交流，完成交易。伴随着网上购物技术的不断成熟和功能的越发强大，用户可以在网上随意搜索，享受网上购物的轻松便捷。如今商业网络已经成为网络经济的大势所趋，利用互联网平台进行网站销售在给人们带来经济实惠的同时，也降低了交易成本，增强竞争力，为商家提供了探索新经济销售模式的有效渠道。如今人们生活节奏快，工作繁忙，出门购物的时间越来越少，更不能享受到购物的乐趣所在，所以网购逐渐成为一种流行，深受人们的喜爱。为了适应互联网发展的新技术、为不同的读者的需求提供种类繁多，物廉价美的鲜花，达到人们足不出户便可随意购物，特开发了本系统——网上鲜花系统。
（二）、项目开发目的
首先，由于此鲜花店地理位置离市中心很近，各式各样大大小小的花店到处可见，特别是市区的花店很多老板都回去大城市学习最先进的扎花技术，特别在一些特殊节日，比如母亲节要送康乃馨，情人节要送玫瑰，还有生日等等，年轻人潮流、追风，一般他们都会选择在市区购买，所以对于我们来说竞争力很大，那么开发本网站最大的目的就是扩大本店知名度，让更多的人熟知，扩大经济来源。第二点，网络是一个沟通的桥梁，客户可以直接通过留言、评论跟我们进行直接的沟通，有什么问题可以得到更快的解决办法，客户可以直接跟我们提出意见，比如鲜花的扎法啊，配色啊，装饰等等，方便各方面提升本店的技术，更好得迎合大众的口味，也就是所谓的互惠互利，同时还能有效控制运营成本，提高经济效益的目的。第三点，鲜花销售分好多种类，有包扎的礼品鲜花，有盆栽，有花篮，有假花装饰等等，我会在网站里增加一项基本养花护花的知识，教大家一些平常的护花技巧，这样会让读者觉得这家店的温馨，还有也增进了他们对花得认识，其实花跟动物跟人一样，都有生命，它们很多神奇的地方需要人们慢慢去了解，这样也可以呼吁人们爱花、护花。
（三）、 网站设计思想
为了完成一个好的网上销售网站，必须要满足使用方便、操作灵活等设计需求。根据顾客的实际需求本网站在设计时应该满足以下几个目标。
1.实用性
本网站界面设计美观、友好，所以决定大体采用蓝加白的背景色，让人感觉来到大自然的亲近感。其次使顾客在视觉上得到美的享受，商品的信息查询灵活、方便、快捷、准确。本网站能够全面展示网站内所有商品，并展示推荐商品、热卖商品及养花护花的基本常识。
2.高兼容性
一个好的网站同时必须具有高兼容性，本网站通过合理的图片设计以及复杂的层布局、js特效，经过多次调试实现各浏览器高兼容。
3.智能性
本网站为了方便用户操作所以将网站页面设计得既易懂也更易操作，没有繁琐的操作，不用进行说明，让您一看就懂。
二、 开发工具介绍
（一）、 Dreamwever
Dreamwever是一款强大的网页编辑软件，它可以对html,css,js等文件进行可视化编辑。它具有强大的智能提示系统，对不太熟悉的代码进行提示，大大的减少了对代码的编写操作。
（二）、 Photoshop
Photoshop是一款强大的图形编辑软件，它可以对图层和矢量图进行编辑，将图片数据化，使得图片编排可以随心所欲，使网页效果更鲜明，是网页制作前期的得力助手。
（三）、 IIS
IIS是web服务器系统，它主要用于发布网站，该课题使用IIS主要是为了调试该项目，由于在课题开发过程中，js特效方面遇到图片路径问题，经过多次尝试，猜想是缓存问题，而本地运行缓存不好清理，所以采用本地IIS服务器解决缓存问题，并且解决了js特效问题。
三、 网站开发流程
（一）、 素材准备
本课题的所有图片均来自与淘宝网，京东等各个花店。首先根据课题的选取，需要准备鲜花等图片素材，经过淘宝网等途径，为本课题所设计出来的分类寻找具有代表性的鲜花，再通过PS技术将图片处理成相同像素比的图片，由于js特效需要像素比较大的图片，因此在素材准备中，我就已经将大像素比的图片给保存了一份。下面就是head层的图片，它是在百度图片库中找到的三张图片，第一张是左边的鲜花，第二张是门帘，第三张则是后面的纹理，我通过PS抠图技术，将此三张图片进行了抠取，并放在一个图层上面，形成了一张head层的背景，并通过艺术字的方式给这张图片上写上了雯雯鲜花销售系统。图片准备好后，就是js特效的准备了，首先第一个js特效位于鲜花展示导航下，此处运用了懒人素材网的一个js特效素材。大致介绍：先通过引入jquery.roundabout2.js开源库，通过ul标签给的id=fashion，它是被开源库所调用的，我们首先将样式引入首页html，把图片引入到ul中的li中，最后通过jquery的ready函数，获取id为fashion的层，将它roundabout，也就是执行函数库中的特效函数。详细介绍：第一步，首先从网上下载这个特效插件，并了解里面的demo.html文件，对它进行分析。第二步，将demo.html中没用的内容都全部删除，最后得到这个代码（如图1）。第三步，对特效的文件夹进行分析，发现里面除了js文件夹和images文件夹有文件。第四步，移植特效到js 文件夹，首先移入js库文件，并在页面中引入，在将处理好的鲜花图片放入课题的images文件夹中，将demo.html中的内容复制到课题的div中，将li标签中的img标签的src修改成要展示图片的地址，保存后，JS特效一配置准备成功。如图2。第二个js特效与第一个js特效类似，也是从懒人素材网选择的素材，第二个js特效则位于商品详细页面中的商品图片，点击后有放大的效果。代码如图3所示。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1590.html
