绿植销售有限公司网站设计与实现
目录
一、引言 1
二、开发工具 1
（一）Photoshop CC 1
（二）Sublime Text 2 1
三、网站需求分析 1
（一）市场需求分析 1
（二）网站可行性分析 1
四、网站内容结构 2
（一）整体网站结构 2
（二）Logo的设计 2
（三）首页设计 3
（四）子页设计 5
（五）三级界面设计 6
（六）特色界面设计 8
五、页面的具体实现 8
（一）DIV+CSS布局 8
（二）首页的实现 9
（三）子页的实现 10
六、页面特效的具体实现 11
（一）图片轮转效果的实现 11
（二）图片灯箱效果的实现 12
七、网站测试 13
总结 14
致谢 15
参考文献 16
一、引言
常熟绿植销售公司原先只是通过店面，手机短信等不快捷的推销方式推销产品。而现在此课题制作的这个网页，主打以网络的方式来宣传常熟绿植销售公司的产品，制作此网页也方便顾客在短时间内，就能了解到常熟绿植销售公司的文化内涵及文化底蕴，对该公司整体状况有个全方位多层次的了解。因为现在网上购物给人的生活带来很大的便利，能让人足不出户就买到自己想买的东西，所以各大公司纷纷创建自己的宣传网站与购物平台。当今的社会环境污染十分严重，各种企业、学校、公司、个人对绿色植物有着大量的需求。设计此网页方便该公司通过互联网，加大对其品牌的推广，也能使顾客充分了解绿色植物的重要性及美观性，来增加其销售量，并且从中达到其互联网营销手段的目的。
二、开发工具
（一）Photoshop CC
Adobe Photoshop CC的简称为“PS”，是由Adobe公司开发和发行的图像处理软件。它的作用是来处理图片，来达成自己所需要的效果。使用其功能能很轻松的完成许多绘图操作，是目前为止较新的一款处理图片的程序。
（二）Sublime Text 2
Sublime T
*好棒文|www.hbsrm.com +Q: ^351916072*
的目的。
二、开发工具
（一）Photoshop CC
Adobe Photoshop CC的简称为“PS”，是由Adobe公司开发和发行的图像处理软件。它的作用是来处理图片，来达成自己所需要的效果。使用其功能能很轻松的完成许多绘图操作，是目前为止较新的一款处理图片的程序。
（二）Sublime Text 2
Sublime Text 2 是一款“性感”的程序代码编辑器，能跨平台并且拥有简洁大方的操作界面，最主要能够运用快捷操作界面来快速操作，快速编写代码，是针对程序员对代码编写能力较强的纯代码编辑器，利用它能很容易制作出动态与静态结合的网站。
三、网站需求分析
（一）市场需求分析
此课题针对常熟绿植销售有限公司的发展步骤，传统的店面营销方式已经无法满足当今社会市民对商品的需求，企业只有跟上时代的步伐，开启互联网销售方式才可以扩大企业的销售业绩。在整个网站的开发内容以及市场需求的分析过程中，本人调查了该公司的业务需求，通过对公司的财务状况，以及销售状况的大致分析，并调查所了解的较为出名的、优秀的同类绿植网络销售网站获取经验。并了解同类绿植销售网站的使用环境与各知名企业网站的优缺点与类似点，分析该公司对此网站的项目的需求。
（二）网站可行性分析
首先对该企业的需求以及企业环境进行初步可行性的调查分析，对素材，图片，资料等进行整理和归纳。接着查阅相关书籍，努力学习手机端，屏幕大小自适应的实现方法但是在整个学习过程中，并没有完全掌握所以没有完成，这是一大遗憾。在网页设计过程中遇到了很多的问题，首先自己先行揣摩更改，接着还有问题的部分去请教老师，或者在网络上寻求帮助。
四、网站内容结构
（一）整体网站结构
在首页顶部是公司的LOGO、导航以及登录注册，左下方使用了图片轮转的特效，以图片的形式自动呈现该网页的主题，简化浏览者的操作，但同时还能展示出较多的资料，让浏览者能有兴趣进行下一步对网页的浏览。在图片轮转的旁边是对公司的简略介绍，让浏览者对公司有初步的了解。在简介的下方是公司的公众微信号，扫一扫能关注该公司的微信。网站的中间部分是公司的主营业务，六张图片简单明了的展示了公司的部分营业业务。在主营业务的下方是公司拓展浏览者的花卉与绿植的知识，这是一个方便浏览者了解绿色植物，拓宽公司销售路径的有一大方式，人们只有了解了绿色植物的重要性，才会去购买，会加强对绿色植物的保护。在底部上面，有拓展对花语的介绍，整个花语界面采用了灯箱效果的特效，放大图片更清晰的看清花的形态。在最下方是版权界面，有关于我们和了解加入我们的方式，有分享网页的方式，网页友情链接，以及版权信息。如图4-1是网页整体结构的部分示意图：
图4-1 网站内容结构图
（二）Logo的设计
网站的Logo使用Photoshop CC软件制作而成，采用透明背景，绿色的小树在最左方，再配上绿色的行书字体，整体看上去非常的清新自然。Logo的整体色调为绿色是为了呼应网站的主题“绿色”销售，绿色小树茂密的树叶，象征着企业的发展也会很好。网页的Logo如下图4-2所示
图4-2 网站Logo
（三）首页设计
首页大致可分为上、中、下三层，在网页的最左上方，是专门为公司设计的Logo，采用绿色的整体色调，更显的清新自然，符合主题。在Logo的右边是网站的导航栏，导航主要分为首页、公司简介、主营业务、产品展示、园艺资讯这五个方面的内容，包含了该公司网站的大体全部内容。在导航的右边是登陆和收藏此网页的链接方式。首页的简易布局如图4-3所示：
LOGO
导航栏
注册登陆收藏链接
首页图片轮转效果
公司简介
扫码，加微信号
主营业务
花卉简介
常见家用绿植介绍
常见花语介绍
版权栏
图4-3 首页简易布局图
为了使得浏览者能很快速寻找到公司网页的导航栏，最终决定将Logo和导航栏留在每
一、引言 1
二、开发工具 1
（一）Photoshop CC 1
（二）Sublime Text 2 1
三、网站需求分析 1
（一）市场需求分析 1
（二）网站可行性分析 1
四、网站内容结构 2
（一）整体网站结构 2
（二）Logo的设计 2
（三）首页设计 3
（四）子页设计 5
（五）三级界面设计 6
（六）特色界面设计 8
五、页面的具体实现 8
（一）DIV+CSS布局 8
（二）首页的实现 9
（三）子页的实现 10
六、页面特效的具体实现 11
（一）图片轮转效果的实现 11
（二）图片灯箱效果的实现 12
七、网站测试 13
总结 14
致谢 15
参考文献 16
一、引言
常熟绿植销售公司原先只是通过店面，手机短信等不快捷的推销方式推销产品。而现在此课题制作的这个网页，主打以网络的方式来宣传常熟绿植销售公司的产品，制作此网页也方便顾客在短时间内，就能了解到常熟绿植销售公司的文化内涵及文化底蕴，对该公司整体状况有个全方位多层次的了解。因为现在网上购物给人的生活带来很大的便利，能让人足不出户就买到自己想买的东西，所以各大公司纷纷创建自己的宣传网站与购物平台。当今的社会环境污染十分严重，各种企业、学校、公司、个人对绿色植物有着大量的需求。设计此网页方便该公司通过互联网，加大对其品牌的推广，也能使顾客充分了解绿色植物的重要性及美观性，来增加其销售量，并且从中达到其互联网营销手段的目的。
二、开发工具
（一）Photoshop CC
Adobe Photoshop CC的简称为“PS”，是由Adobe公司开发和发行的图像处理软件。它的作用是来处理图片，来达成自己所需要的效果。使用其功能能很轻松的完成许多绘图操作，是目前为止较新的一款处理图片的程序。
（二）Sublime Text 2
Sublime T
*好棒文|www.hbsrm.com +Q: ^351916072*
的目的。
二、开发工具
（一）Photoshop CC
Adobe Photoshop CC的简称为“PS”，是由Adobe公司开发和发行的图像处理软件。它的作用是来处理图片，来达成自己所需要的效果。使用其功能能很轻松的完成许多绘图操作，是目前为止较新的一款处理图片的程序。
（二）Sublime Text 2
Sublime Text 2 是一款“性感”的程序代码编辑器，能跨平台并且拥有简洁大方的操作界面，最主要能够运用快捷操作界面来快速操作，快速编写代码，是针对程序员对代码编写能力较强的纯代码编辑器，利用它能很容易制作出动态与静态结合的网站。
三、网站需求分析
（一）市场需求分析
此课题针对常熟绿植销售有限公司的发展步骤，传统的店面营销方式已经无法满足当今社会市民对商品的需求，企业只有跟上时代的步伐，开启互联网销售方式才可以扩大企业的销售业绩。在整个网站的开发内容以及市场需求的分析过程中，本人调查了该公司的业务需求，通过对公司的财务状况，以及销售状况的大致分析，并调查所了解的较为出名的、优秀的同类绿植网络销售网站获取经验。并了解同类绿植销售网站的使用环境与各知名企业网站的优缺点与类似点，分析该公司对此网站的项目的需求。
（二）网站可行性分析
首先对该企业的需求以及企业环境进行初步可行性的调查分析，对素材，图片，资料等进行整理和归纳。接着查阅相关书籍，努力学习手机端，屏幕大小自适应的实现方法但是在整个学习过程中，并没有完全掌握所以没有完成，这是一大遗憾。在网页设计过程中遇到了很多的问题，首先自己先行揣摩更改，接着还有问题的部分去请教老师，或者在网络上寻求帮助。
四、网站内容结构
（一）整体网站结构
在首页顶部是公司的LOGO、导航以及登录注册，左下方使用了图片轮转的特效，以图片的形式自动呈现该网页的主题，简化浏览者的操作，但同时还能展示出较多的资料，让浏览者能有兴趣进行下一步对网页的浏览。在图片轮转的旁边是对公司的简略介绍，让浏览者对公司有初步的了解。在简介的下方是公司的公众微信号，扫一扫能关注该公司的微信。网站的中间部分是公司的主营业务，六张图片简单明了的展示了公司的部分营业业务。在主营业务的下方是公司拓展浏览者的花卉与绿植的知识，这是一个方便浏览者了解绿色植物，拓宽公司销售路径的有一大方式，人们只有了解了绿色植物的重要性，才会去购买，会加强对绿色植物的保护。在底部上面，有拓展对花语的介绍，整个花语界面采用了灯箱效果的特效，放大图片更清晰的看清花的形态。在最下方是版权界面，有关于我们和了解加入我们的方式，有分享网页的方式，网页友情链接，以及版权信息。如图4-1是网页整体结构的部分示意图：
图4-1 网站内容结构图
（二）Logo的设计
网站的Logo使用Photoshop CC软件制作而成，采用透明背景，绿色的小树在最左方，再配上绿色的行书字体，整体看上去非常的清新自然。Logo的整体色调为绿色是为了呼应网站的主题“绿色”销售，绿色小树茂密的树叶，象征着企业的发展也会很好。网页的Logo如下图4-2所示
图4-2 网站Logo
（三）首页设计
首页大致可分为上、中、下三层，在网页的最左上方，是专门为公司设计的Logo，采用绿色的整体色调，更显的清新自然，符合主题。在Logo的右边是网站的导航栏，导航主要分为首页、公司简介、主营业务、产品展示、园艺资讯这五个方面的内容，包含了该公司网站的大体全部内容。在导航的右边是登陆和收藏此网页的链接方式。首页的简易布局如图4-3所示：
LOGO
导航栏
注册登陆收藏链接
首页图片轮转效果
公司简介
扫码，加微信号
主营业务
花卉简介
常见家用绿植介绍
常见花语介绍
版权栏
图4-3 首页简易布局图
为了使得浏览者能很快速寻找到公司网页的导航栏，最终决定将Logo和导航栏留在每
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/2451.html
