红酒主题网站的设计与实现
目录
一、引言 1
二、开发工具选择 1
三、主题设计 1
(一)网站开发流程 1
1.功能结构图绘制 1
2.界面设计 2
3.DIV+CSS布局 4
4.首页div和层样式 4
5.子页div和层样式 5
（二）网页效果图 7
1.首页 7
2.关于我们 8
3.最新动态 9
4.产品展示 10
5.红酒中心 11
6.联系我们 12
（三）JavaScript特效实现 13
1.图片的滚动效果 13
2.按钮特效 14
四、总结 14
致谢 15
参考文献 15
附录 16
一、引言
在物质水平发展的今天，人们的消费水平日益提高，消费观念也发生了巨大的变化。中国的餐桌上出现了越来越多的红酒。红酒消费越来越成为普遍。传统的消费已经不能满足人们的需求，一些红酒柜台，超市等传统的红酒消费方式不能满足现代人们的需求，因此，又兴起了红酒的网上消费方式。网上红酒打破了传统的消费禁锢，节约了顾客的订购和配送时间，更加方便了客户对红酒的购买，扩大了消费规模，网上红酒是一种不需要装修和门面的店铺，提高了利润。通过网上平台建立起的店铺，拥有更健全的店铺体系，更好的为人们服务，方便人们更好的购买红酒。互联网技术的发展，使得网购更加趋于流行，网上红酒的购买必定从中受益。由于红酒经营者的增多，他们之间的竞争也越来越激烈。如果不想被社会淘汰，必须要发展创新。减少生产成本 *好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
，让自己的红酒销售的更快，更好，效益更高。因此，有的人就创新，利用互联网技术，在网上销售红酒，即网上红酒。以达到红酒销售的更好平台。这样既能减少公司的成本，又提高了知名度。这样的方式，使得顾客和卖家直接对话，减少了中间不必要的环节。使得消费者更方便、快捷的消费。
在网站的设计中，使用DIV+CSS的布局方式符合标准，方便维护，是目前主流的网站设计方法。 本课题采用DIV+CSS的布局方式，实现了红酒的网上构造。
二、开发工具选择
在设计红酒本网站介绍的地布局中，开发工具是网站设计非常的核心部分。在开发过程中使用了开发工具包括Dream weaver、Photoshop、Flash，Js等。在本网站设计中，在开发过程中Dream weaver建立了站点，在Dream weaver中也进行了代码的编辑工作，使用它更新了网站中的所有链接，使得本人更好的，更全面的构建网站。在设计网站的前期，对于网站中需要的图片，使用Photoshop进行了图片的编辑与处理，对图像进行了各种变化，如放大、缩小、旋转、 倾斜、镜象、透视等图形处理。也利用它进行文字的缩小和放大，新建了网站的图层，方便我更好的修改网站。 为了实现本网站的整体的动态效果，使之更美观，更有动态效果， Flash，Js等也是必不可少的。特效制作等功能实现.发挥了很大的作用。Flash能使网站的动态效果展示出来，在本网站中，利用flash把几张图片产生滚动效果，形象生动。网站中加之简单的Js特效。使用JS中的语句进行网站特效的编辑，最终使得整个本网页更加活灵活现。因此，这几种开发工具结合起来，就使得本网站更加完美、全面。
三、主题设计
(一)网站开发流程
1.功能结构图绘制
本网站分为首页、关于我们、最新动态、产品展示、红酒中心、联系我们、在线留言等七大模块。每个模块都进行的仔细的布局和排版，不仅有文字介绍，还有图片展示，下面就是红酒的详细功能结功能结构图4-1所示。
图4-1功能结构图
网站首页是一个网站的入口网页，也可以说是一个网站的门户，网站首页能让人直接了解该网站，并引导用户可以自然浏览网站其它子页的内容。本网站有六大模块组成，即关于我们、最新动态、产品展示、红酒中心、联系我们和在线留言。关于我们模块给大家介绍了一下公司，让我们更直观的了解公司；最新动态模块讲了关于红酒产业的新闻；产品展示模块介绍了红酒的分类；红酒中心模块展示了红酒的成分及来历；联系我们模块主要是我们的联系方式；在线留言模块是对我们本公司有什么看法的留言。
2.界面设计
本网站运用了DIV+CSS的布局方式，自然的把关于红酒的整个网站完美的呈现了出来。但是之前要用Photoshop进行首页的基本框架设计，首页具体框架图4-2所示
Logo
导航
Flash动画
简介
滚动图片
foot
图4-2首页框架图
首页的设计布局是以简单、大方为原则，让浏览者看了能一目了然。能从首页的设计中看出整个网站在说明的问题。首页的flash图片给人动态美。简介能使人们更好的了解的红酒的文化等知识，滚动的图片给人耳目一新的感觉，供浏览者去欣赏。
子页也采用了最普通的结构，分为logo、导航条、图片、关于红酒的内容和版权等。简单鲜明的布局，使浏览网站的人能清楚的了解网站在讲什么。使浏览起来更方便自然。子页框架图如图4-3所示
Logo
导航
图片
内容1
内容
内容2
内容3
版权
图4-3子页框架图
3.DIV+CSS布局
在做好网站的前期工作之后，紧接着就对网站进行整体的布局。对网页进行布局，就要用到Dream weaver中的DIV层。DIV层DIV+CSS是web的设计标准。它是一中网页的布局方法。能使前期的图片，字体大小，颜色，粗细等文字和图片效果进行设置，使用DIV+CSS的布局方式，将所有页面，所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。采用DIV+CSS的方式实现各种定位，它可以实现网页页面内容与表现分离。用DIV+CSS布局乐意实现全站的统一管理，便于网站的维护和管理。
Top
nav
flash
Middle
left
right
一、引言 1
二、开发工具选择 1
三、主题设计 1
(一)网站开发流程 1
1.功能结构图绘制 1
2.界面设计 2
3.DIV+CSS布局 4
4.首页div和层样式 4
5.子页div和层样式 5
（二）网页效果图 7
1.首页 7
2.关于我们 8
3.最新动态 9
4.产品展示 10
5.红酒中心 11
6.联系我们 12
（三）JavaScript特效实现 13
1.图片的滚动效果 13
2.按钮特效 14
四、总结 14
致谢 15
参考文献 15
附录 16
一、引言
在物质水平发展的今天，人们的消费水平日益提高，消费观念也发生了巨大的变化。中国的餐桌上出现了越来越多的红酒。红酒消费越来越成为普遍。传统的消费已经不能满足人们的需求，一些红酒柜台，超市等传统的红酒消费方式不能满足现代人们的需求，因此，又兴起了红酒的网上消费方式。网上红酒打破了传统的消费禁锢，节约了顾客的订购和配送时间，更加方便了客户对红酒的购买，扩大了消费规模，网上红酒是一种不需要装修和门面的店铺，提高了利润。通过网上平台建立起的店铺，拥有更健全的店铺体系，更好的为人们服务，方便人们更好的购买红酒。互联网技术的发展，使得网购更加趋于流行，网上红酒的购买必定从中受益。由于红酒经营者的增多，他们之间的竞争也越来越激烈。如果不想被社会淘汰，必须要发展创新。减少生产成本 *好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
，让自己的红酒销售的更快，更好，效益更高。因此，有的人就创新，利用互联网技术，在网上销售红酒，即网上红酒。以达到红酒销售的更好平台。这样既能减少公司的成本，又提高了知名度。这样的方式，使得顾客和卖家直接对话，减少了中间不必要的环节。使得消费者更方便、快捷的消费。
在网站的设计中，使用DIV+CSS的布局方式符合标准，方便维护，是目前主流的网站设计方法。 本课题采用DIV+CSS的布局方式，实现了红酒的网上构造。
二、开发工具选择
在设计红酒本网站介绍的地布局中，开发工具是网站设计非常的核心部分。在开发过程中使用了开发工具包括Dream weaver、Photoshop、Flash，Js等。在本网站设计中，在开发过程中Dream weaver建立了站点，在Dream weaver中也进行了代码的编辑工作，使用它更新了网站中的所有链接，使得本人更好的，更全面的构建网站。在设计网站的前期，对于网站中需要的图片，使用Photoshop进行了图片的编辑与处理，对图像进行了各种变化，如放大、缩小、旋转、 倾斜、镜象、透视等图形处理。也利用它进行文字的缩小和放大，新建了网站的图层，方便我更好的修改网站。 为了实现本网站的整体的动态效果，使之更美观，更有动态效果， Flash，Js等也是必不可少的。特效制作等功能实现.发挥了很大的作用。Flash能使网站的动态效果展示出来，在本网站中，利用flash把几张图片产生滚动效果，形象生动。网站中加之简单的Js特效。使用JS中的语句进行网站特效的编辑，最终使得整个本网页更加活灵活现。因此，这几种开发工具结合起来，就使得本网站更加完美、全面。
三、主题设计
(一)网站开发流程
1.功能结构图绘制
本网站分为首页、关于我们、最新动态、产品展示、红酒中心、联系我们、在线留言等七大模块。每个模块都进行的仔细的布局和排版，不仅有文字介绍，还有图片展示，下面就是红酒的详细功能结功能结构图4-1所示。
图4-1功能结构图
网站首页是一个网站的入口网页，也可以说是一个网站的门户，网站首页能让人直接了解该网站，并引导用户可以自然浏览网站其它子页的内容。本网站有六大模块组成，即关于我们、最新动态、产品展示、红酒中心、联系我们和在线留言。关于我们模块给大家介绍了一下公司，让我们更直观的了解公司；最新动态模块讲了关于红酒产业的新闻；产品展示模块介绍了红酒的分类；红酒中心模块展示了红酒的成分及来历；联系我们模块主要是我们的联系方式；在线留言模块是对我们本公司有什么看法的留言。
2.界面设计
本网站运用了DIV+CSS的布局方式，自然的把关于红酒的整个网站完美的呈现了出来。但是之前要用Photoshop进行首页的基本框架设计，首页具体框架图4-2所示
Logo
导航
Flash动画
简介
滚动图片
foot
图4-2首页框架图
首页的设计布局是以简单、大方为原则，让浏览者看了能一目了然。能从首页的设计中看出整个网站在说明的问题。首页的flash图片给人动态美。简介能使人们更好的了解的红酒的文化等知识，滚动的图片给人耳目一新的感觉，供浏览者去欣赏。
子页也采用了最普通的结构，分为logo、导航条、图片、关于红酒的内容和版权等。简单鲜明的布局，使浏览网站的人能清楚的了解网站在讲什么。使浏览起来更方便自然。子页框架图如图4-3所示
Logo
导航
图片
内容1
内容
内容2
内容3
版权
图4-3子页框架图
3.DIV+CSS布局
在做好网站的前期工作之后，紧接着就对网站进行整体的布局。对网页进行布局，就要用到Dream weaver中的DIV层。DIV层DIV+CSS是web的设计标准。它是一中网页的布局方法。能使前期的图片，字体大小，颜色，粗细等文字和图片效果进行设置，使用DIV+CSS的布局方式，将所有页面，所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。采用DIV+CSS的方式实现各种定位，它可以实现网页页面内容与表现分离。用DIV+CSS布局乐意实现全站的统一管理，便于网站的维护和管理。
Top
nav
flash
Middle
left
right
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1716.html
