好时饮品公司网站的设计与实现
目 录
一、引言 1
二、需求分析 1
（一）可行性分析 1
（二）运行环境 1
三、开发工具及技术介绍 1
（一）Dreamweaver 1
（二）Photoshop 1
（三）HTML 1
（四）JavaScript 1
四、网站内容及布局 2
（一）网站主要内容 2
（二）DIV+CSS布局结构 2
五、网站详细设计 3
（一）材料准备 3
（二）LOGO设计 3
（三）网站主页设计 3
（四）网站子页设计 4
六、网页的具体实现 5
（一）网站首页实现 5
（二）网站子页实现 6
（三）网站三级页面实现 8
七、网页特效实现 9
（一）图片轮转效果 9
（二）子页动态效果 10
八、网站测试 11
总结 12
致谢 13
参考文献 14
引言
互联网成为人们快速获取、发布和传递信息的重要渠道，正潜移默化的影响我们的生活，许多商家除了实体店外，均建立了网店。网站建设在Internet应用中的地位逐渐提升，企业建站相当于在网上建立一个家，客户介绍企业，展示企业实力，推销各自的产品。健康饮品作为兴起的产品，亟需建立网站来推广自己的产品，本课题就是为好时饮品公司建立一个网站。
二、需求分析
（一）可行性分析
本网站使用DIV+CSS的布局方式，利用Photoshop软件对网站的界面进行设计，使用Dreamweave *好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
r软件实现HTML和CSS的代码编写，采用JavaScript的特效实现图片的轮转效果，增加网站的可视性，使用户体验得到提升。
（二）运行环境
网站运行的操作系统为Windows、Linux、Mac OS等主流操作系统，Web服务器是IIS8.0，可以在IE、360、QQ、猎豹浏览器运行，运行的电脑拥有1GHz或更快的处理器、1280*800屏幕、16位的显卡，驱动器一般为DVD-ROM，内存至少有512M。
三、开发工具及技术介绍
（一）Dreamweaver
Dreamweaver软件是美国著名的多媒体软件，是“网页设计三剑客”中的重要成员，主要负责网站的创建与管理、网页版式设计、网页编辑和排版。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，且在发布之后还能对更新情况进行监控以更新站点的内容。
（二）Photoshop
Photoshop软件Adobe公司旗下的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，它的应用领域广泛，包括平面设计、修复照片、影像创意、艺术文字、网页制作，深受广大平面设计人员和电脑美术爱好者的喜爱。
（三）HTML
HTML全称Hypertext Marked Language，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。HTML文件是由HTML命令组成的描述性文本，结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。HTML命令可以说明文字、图形、动画、声音、表格、链接等。
（四）JavaScript
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。通常它是通过嵌入在HTML中来实现自身的功能的。
四、网站内容及布局
（一）网站主要内容
本网站主要包括关于我们、服务、我们的产品、公司要闻和联系我们5个子页，关于我们的分类有：公司简介、文化、宗旨、制度和与品牌有关。我们的产品分类有可乐、水果汁、矿泉水系列。与品牌有关主要介绍了公司的合作伙伴、荣誉、员工福利，让客户看到公司的业务规模、品牌的发展，更加信任好时饮品。我们的产品介绍了几种不同风格的饮料详情，广大客户可根据自身喜爱挑选产品。
如图4-1所示。
图4-1 网站内容结构图
（二）DIV+CSS布局结构
网站的首页由头部header、中间部分outerslider跟outermain和尾部footer组成，子页跟子子页较简单些，body部分不再细分。DIV+CSS的详细布局如图4-2所示。
#container{}
#header{}
#body{}
outerslider{}
#outermain{}
#footer{}
图4-2 DIV+CSS布局图
先定义container部分，为网站设置一个容器，用来存放网站所需要的内容，下面把网站分为三个大的模块，header部分是整个网页的头部，用来放置导航栏、logo；中间部分body分为两个小的模块，分别用outerslider和outermain来定义上下部分,outerslider里面包含产品图片欣赏，用JavaScript实现图片轮转效果，outermain部分文字讲解页面主要内容；footer属于底部，在这部分可以显示版权。
五、网站详细设计
（一）材料准备
为了有效率地设计制作网站，我提前准备了网站需要的一些素材，查阅了好时饮品公司的基本资料，更好地为本公司的产品做出准备说明，包括各网页中所用到的图片。通过学习站酷网上的Dreamweaver、PS视频课程，参考了网站的整体布局结构,更好地处理图片。
（二）LOGO设计
网站的LOGO相当于一个公司的代表，标志着公司的形象，它的设计至关重要。本网站LOGO的设计本着简洁明了的思想，不加背景颜色，写出产品特色“专业”、“健康”，使顾客看到一目了然，更容易记住本公司饮料产品。详细效果如图5-1所示。
图5-1 LOGO
一、引言 1
二、需求分析 1
（一）可行性分析 1
（二）运行环境 1
三、开发工具及技术介绍 1
（一）Dreamweaver 1
（二）Photoshop 1
（三）HTML 1
（四）JavaScript 1
四、网站内容及布局 2
（一）网站主要内容 2
（二）DIV+CSS布局结构 2
五、网站详细设计 3
（一）材料准备 3
（二）LOGO设计 3
（三）网站主页设计 3
（四）网站子页设计 4
六、网页的具体实现 5
（一）网站首页实现 5
（二）网站子页实现 6
（三）网站三级页面实现 8
七、网页特效实现 9
（一）图片轮转效果 9
（二）子页动态效果 10
八、网站测试 11
总结 12
致谢 13
参考文献 14
引言
互联网成为人们快速获取、发布和传递信息的重要渠道，正潜移默化的影响我们的生活，许多商家除了实体店外，均建立了网店。网站建设在Internet应用中的地位逐渐提升，企业建站相当于在网上建立一个家，客户介绍企业，展示企业实力，推销各自的产品。健康饮品作为兴起的产品，亟需建立网站来推广自己的产品，本课题就是为好时饮品公司建立一个网站。
二、需求分析
（一）可行性分析
本网站使用DIV+CSS的布局方式，利用Photoshop软件对网站的界面进行设计，使用Dreamweave *好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
r软件实现HTML和CSS的代码编写，采用JavaScript的特效实现图片的轮转效果，增加网站的可视性，使用户体验得到提升。
（二）运行环境
网站运行的操作系统为Windows、Linux、Mac OS等主流操作系统，Web服务器是IIS8.0，可以在IE、360、QQ、猎豹浏览器运行，运行的电脑拥有1GHz或更快的处理器、1280*800屏幕、16位的显卡，驱动器一般为DVD-ROM，内存至少有512M。
三、开发工具及技术介绍
（一）Dreamweaver
Dreamweaver软件是美国著名的多媒体软件，是“网页设计三剑客”中的重要成员，主要负责网站的创建与管理、网页版式设计、网页编辑和排版。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，且在发布之后还能对更新情况进行监控以更新站点的内容。
（二）Photoshop
Photoshop软件Adobe公司旗下的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，它的应用领域广泛，包括平面设计、修复照片、影像创意、艺术文字、网页制作，深受广大平面设计人员和电脑美术爱好者的喜爱。
（三）HTML
HTML全称Hypertext Marked Language，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。HTML文件是由HTML命令组成的描述性文本，结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。HTML命令可以说明文字、图形、动画、声音、表格、链接等。
（四）JavaScript
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。通常它是通过嵌入在HTML中来实现自身的功能的。
四、网站内容及布局
（一）网站主要内容
本网站主要包括关于我们、服务、我们的产品、公司要闻和联系我们5个子页，关于我们的分类有：公司简介、文化、宗旨、制度和与品牌有关。我们的产品分类有可乐、水果汁、矿泉水系列。与品牌有关主要介绍了公司的合作伙伴、荣誉、员工福利，让客户看到公司的业务规模、品牌的发展，更加信任好时饮品。我们的产品介绍了几种不同风格的饮料详情，广大客户可根据自身喜爱挑选产品。
如图4-1所示。
图4-1 网站内容结构图
（二）DIV+CSS布局结构
网站的首页由头部header、中间部分outerslider跟outermain和尾部footer组成，子页跟子子页较简单些，body部分不再细分。DIV+CSS的详细布局如图4-2所示。
#container{}
#header{}
#body{}
outerslider{}
#outermain{}
#footer{}
图4-2 DIV+CSS布局图
先定义container部分，为网站设置一个容器，用来存放网站所需要的内容，下面把网站分为三个大的模块，header部分是整个网页的头部，用来放置导航栏、logo；中间部分body分为两个小的模块，分别用outerslider和outermain来定义上下部分,outerslider里面包含产品图片欣赏，用JavaScript实现图片轮转效果，outermain部分文字讲解页面主要内容；footer属于底部，在这部分可以显示版权。
五、网站详细设计
（一）材料准备
为了有效率地设计制作网站，我提前准备了网站需要的一些素材，查阅了好时饮品公司的基本资料，更好地为本公司的产品做出准备说明，包括各网页中所用到的图片。通过学习站酷网上的Dreamweaver、PS视频课程，参考了网站的整体布局结构,更好地处理图片。
（二）LOGO设计
网站的LOGO相当于一个公司的代表，标志着公司的形象，它的设计至关重要。本网站LOGO的设计本着简洁明了的思想，不加背景颜色，写出产品特色“专业”、“健康”，使顾客看到一目了然，更容易记住本公司饮料产品。详细效果如图5-1所示。
图5-1 LOGO
