上海日普食品销售公司网站设计与实现
目录
一、引言 1
二、需求分析 1
三、开发工具选择 2
四、网站设计与实现 2
（一）网站建设流程 2
1.功能模块设计 2
2.界面设计 3
3.Table布局 4
4.首页Table结构 4
5.子页table结构 5
(二)网站基本功能 6
1.首页 6
2.公司简介 7
3.新闻动态 8
4.产品展示 8
5.营养介绍 9
6.食用方法 9
7.友情链接 10
8.联系我们 10
（三）JavaScript特效 11
（四）Flash动画 11
五、总结 12
致谢 14
参考文献 14
一、引言
使用HTML+Table布局已经成为现在社会的主流，采用此种布局，修改方便，容易维护，使用Javascript特效给人一种视觉冲击，因此本次课题使用了HTML+Table布局和Javascript特效的方法完成了适合小型公司销售网站的搭建。
在现如今中国人们健康水平降低，体质衰弱的情况下，在销售中将食品传统的买卖的形式配合上网络技术。食品销售完全需要通过打造一个电子商务平台的方式，来实现这些目的。这种方式打造的网店完全不需要门面和装修，是一个以网络的平台模式而建立的食品销售公司，让更多人了解到此网站的作用以及养生疗补方法。由于现在的人们关注自身以及家人的健康，因此食品销售网站已经被大多消费者接受。
二、需求分析
当今世界已经进入了信息时代，互联网成为21世纪人们必不可 *好棒文|www.hbsrm.com +Q: ^351916072*
少的东西，足不出户就可以购买到自己的衣食住行，互联网本身就具有开放性，全球性，低成本，高效率的特点，也就成为食品网上销售一大动力。通过电子化，数字化来替代传统的网上食品销售销售流程，这不仅节约了大量的人力，物力，财力，更重要的是可以使消费者更加便捷的消费。
网上食品销售以低成本进入市场，使一些上班族或者酒店获得了更多的信息材料，提升了他们的竞争力，带动了公司长远的发展计划。网上销售更是对传统经营模式的一种打破，而网上订购的模式，也使得消费者和生产者之间变得更加信任，客观上来说这也在一定程度上改变了当今社会的一些不良现象。
由于经营食品销售人比较多，他们每个人都在努力寻找一种新的营销方式，以求以最低的成本获取最大的利率。因此，电子商务这个平台，为经营者筑下了奠基石。不仅可以快速的扩大自己的知名度，还可以拉动经济的发展。
为了使网上食品销售的投入得到最大的回报，在对网上食品销售设计之前，有必要对一些相关的问题进行正确的论证，比如对食品销售需求方面的分析，总体规划，功能的实现以及实施方案，传播与推广等等。
相信在达到这些要求之后，网上食品销售一定会成为消费者的第一选择，从而在网上销售这方面创造一个奇迹！
三、开发工具选择
网上食品销售公司，实现了公司简介，新闻动态，产品展示，营养介绍，食用方法等模块的功能，使顾客对这方面的形势更加了解，也为了让顾客更加简单的了解并购买，在通过对市场环境的实际调查以及论证分析，最终与时下网上比较流行的销售网站相结合，顾设计此食品销售的静态网站。
建设好一个网站，制作工具也是必不可少的。本网站开发用到了Dreamweaver， Photoshop， Flash等软件。当然，这中间还涉及到了了JavaScript特效。
四、网站设计与实现
（一）网站建设流程
1.功能模块设计
本网站共分为8个模块，还加入了大量的图片，使客户能够更加详细的了解产品，如图4-1所示。
图4-1 网站模块结构图
网站首页是一个切入点，人们第一眼看到的页面就是首页，而本网站的首页给人一种与众不同的感觉；公司简介这一模块主要向用户介绍了公司的基本情况；新闻动态主要向顾客展示了近期有关食品的重大新闻；产品展示为顾客提供了一些本公司的主营产品；营养介绍为顾客介绍了产品中所含有的营养物质；食用方法为用户介绍了如何烹制产品最佳；友情链接方便了用户浏览其它的网页；联系我们可以让顾客给公司提供宝贵的建议。
2.界面设计
应用了Table布局，并且加入了HTML代码来设计食品销售公司的整个原型以及整个框架。第一点就是要设计出基本的框架，这里就要利用到Photoshop。首页具体框架见图4-2：
Logo
导航
Flash动态
产品分类
公司简介
形象展示
产品搜素
产品展示
客服中心
销售信息
销售网络
版权
图4-2 首页布局框架
首页布局是以朴素大方为原则，给浏览者带来一种视觉冲击。导航采取横放形式，让浏览者一目了然。在首页放上公司的简介，让客户及时了解到网站的基本信息。产品分类则是让用户进一步详细了解到产品的相关属性。在产品展示中，是通过图片滚动的方式来供浏览者欣赏。
子页框架见图4-3：
子页采用工字布局，最上方仍是LOGO和导航条，导航条的下方仍有Flash动态，在左侧会有几个二级导航，点击过后，能进入到详细的页面，浏览到不同的页面效果，右侧主要介绍的本页面的主题内容，下方会有对应的导航条，最底部就是本网站的版权部分。
Logo
导航
Flash动态
二级导航
主要内容
下部导航
版权
图4-3 子页布局框架
子页的布局与首页比较类似，Top包括logo、导航条、logo和导航条的下方采用Flash效果，Middle是主要内容，Bottom包括下部导航和版权。这种朴素大方的布局给人一种亲切感，使人们更容易接受。
3.Table布局
这些准备工作都做好后，然后就到了制作网站的时候，首先要在Dreamweaver中用Table来对整个网页布局。为了上一步的布局更加的完美，需采用CSS层叠式样式表，这样可以控制文字颜色、粗细、大小等效果，使网站的样式变得更加多样化，而且样式表还可以重复利用，这样使网站做起来更加的方便快捷，也使得代码简单，明了。
另外，其创建的HTML文件代码也相对比较简单，而且可以更快速地打开。这也彰显了CSS技术自身的优点，展示了CSS存在的必要性。打破了传统网页设计的形式。使用Table布局可以实现表格套表格的效果，使用Table虽然繁琐了一些，但是也沿承了以往的优点。
一、引言 1
二、需求分析 1
三、开发工具选择 2
四、网站设计与实现 2
（一）网站建设流程 2
1.功能模块设计 2
2.界面设计 3
3.Table布局 4
4.首页Table结构 4
5.子页table结构 5
(二)网站基本功能 6
1.首页 6
2.公司简介 7
3.新闻动态 8
4.产品展示 8
5.营养介绍 9
6.食用方法 9
7.友情链接 10
8.联系我们 10
（三）JavaScript特效 11
（四）Flash动画 11
五、总结 12
致谢 14
参考文献 14
一、引言
使用HTML+Table布局已经成为现在社会的主流，采用此种布局，修改方便，容易维护，使用Javascript特效给人一种视觉冲击，因此本次课题使用了HTML+Table布局和Javascript特效的方法完成了适合小型公司销售网站的搭建。
在现如今中国人们健康水平降低，体质衰弱的情况下，在销售中将食品传统的买卖的形式配合上网络技术。食品销售完全需要通过打造一个电子商务平台的方式，来实现这些目的。这种方式打造的网店完全不需要门面和装修，是一个以网络的平台模式而建立的食品销售公司，让更多人了解到此网站的作用以及养生疗补方法。由于现在的人们关注自身以及家人的健康，因此食品销售网站已经被大多消费者接受。
二、需求分析
当今世界已经进入了信息时代，互联网成为21世纪人们必不可 *好棒文|www.hbsrm.com +Q: ^351916072*
少的东西，足不出户就可以购买到自己的衣食住行，互联网本身就具有开放性，全球性，低成本，高效率的特点，也就成为食品网上销售一大动力。通过电子化，数字化来替代传统的网上食品销售销售流程，这不仅节约了大量的人力，物力，财力，更重要的是可以使消费者更加便捷的消费。
网上食品销售以低成本进入市场，使一些上班族或者酒店获得了更多的信息材料，提升了他们的竞争力，带动了公司长远的发展计划。网上销售更是对传统经营模式的一种打破，而网上订购的模式，也使得消费者和生产者之间变得更加信任，客观上来说这也在一定程度上改变了当今社会的一些不良现象。
由于经营食品销售人比较多，他们每个人都在努力寻找一种新的营销方式，以求以最低的成本获取最大的利率。因此，电子商务这个平台，为经营者筑下了奠基石。不仅可以快速的扩大自己的知名度，还可以拉动经济的发展。
为了使网上食品销售的投入得到最大的回报，在对网上食品销售设计之前，有必要对一些相关的问题进行正确的论证，比如对食品销售需求方面的分析，总体规划，功能的实现以及实施方案，传播与推广等等。
相信在达到这些要求之后，网上食品销售一定会成为消费者的第一选择，从而在网上销售这方面创造一个奇迹！
三、开发工具选择
网上食品销售公司，实现了公司简介，新闻动态，产品展示，营养介绍，食用方法等模块的功能，使顾客对这方面的形势更加了解，也为了让顾客更加简单的了解并购买，在通过对市场环境的实际调查以及论证分析，最终与时下网上比较流行的销售网站相结合，顾设计此食品销售的静态网站。
建设好一个网站，制作工具也是必不可少的。本网站开发用到了Dreamweaver， Photoshop， Flash等软件。当然，这中间还涉及到了了JavaScript特效。
四、网站设计与实现
（一）网站建设流程
1.功能模块设计
本网站共分为8个模块，还加入了大量的图片，使客户能够更加详细的了解产品，如图4-1所示。
图4-1 网站模块结构图
网站首页是一个切入点，人们第一眼看到的页面就是首页，而本网站的首页给人一种与众不同的感觉；公司简介这一模块主要向用户介绍了公司的基本情况；新闻动态主要向顾客展示了近期有关食品的重大新闻；产品展示为顾客提供了一些本公司的主营产品；营养介绍为顾客介绍了产品中所含有的营养物质；食用方法为用户介绍了如何烹制产品最佳；友情链接方便了用户浏览其它的网页；联系我们可以让顾客给公司提供宝贵的建议。
2.界面设计
应用了Table布局，并且加入了HTML代码来设计食品销售公司的整个原型以及整个框架。第一点就是要设计出基本的框架，这里就要利用到Photoshop。首页具体框架见图4-2：
Logo
导航
Flash动态
产品分类
公司简介
形象展示
产品搜素
产品展示
客服中心
销售信息
销售网络
版权
图4-2 首页布局框架
首页布局是以朴素大方为原则，给浏览者带来一种视觉冲击。导航采取横放形式，让浏览者一目了然。在首页放上公司的简介，让客户及时了解到网站的基本信息。产品分类则是让用户进一步详细了解到产品的相关属性。在产品展示中，是通过图片滚动的方式来供浏览者欣赏。
子页框架见图4-3：
子页采用工字布局，最上方仍是LOGO和导航条，导航条的下方仍有Flash动态，在左侧会有几个二级导航，点击过后，能进入到详细的页面，浏览到不同的页面效果，右侧主要介绍的本页面的主题内容，下方会有对应的导航条，最底部就是本网站的版权部分。
Logo
导航
Flash动态
二级导航
主要内容
下部导航
版权
图4-3 子页布局框架
子页的布局与首页比较类似，Top包括logo、导航条、logo和导航条的下方采用Flash效果，Middle是主要内容，Bottom包括下部导航和版权。这种朴素大方的布局给人一种亲切感，使人们更容易接受。
3.Table布局
这些准备工作都做好后，然后就到了制作网站的时候，首先要在Dreamweaver中用Table来对整个网页布局。为了上一步的布局更加的完美，需采用CSS层叠式样式表，这样可以控制文字颜色、粗细、大小等效果，使网站的样式变得更加多样化，而且样式表还可以重复利用，这样使网站做起来更加的方便快捷，也使得代码简单，明了。
另外，其创建的HTML文件代码也相对比较简单，而且可以更快速地打开。这也彰显了CSS技术自身的优点，展示了CSS存在的必要性。打破了传统网页设计的形式。使用Table布局可以实现表格套表格的效果，使用Table虽然繁琐了一些，但是也沿承了以往的优点。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1762.html
