研磨时光咖啡网站的设计与实现

目 录
引言 1
一、网站需求分析 1
（一）概述 1
（二）可行性分析 1
（三）网站运行环境 1
二、工具及关键技术介绍 1
（一）Dreamweaver 1
（二）HTML 1
（三）JavaScript 2
三、网站的设计与实现 2
（一）网站总体设计 2
（二）网站详细设计 2
1、材料准备 2
2、LOGO设计 2
3、首页和子页的布局设计 3
4、DIV+CSS框架结构 4
(三)网站整体实现 5
1、首页 5
2、子页 6
3、子子页 7
（四）网页特效的实现 8
1、图片轮转效果 8
2、水平字幕效果 9
四、网站测试 10
五、不足及展望 10
总结 11
致谢 12
参考文献 13
引言
随着网络的发展，互联网已经渗透到各行各业中去，很多企业已经认识到互联网能提高知名度，带来新的发展前景，纷纷投入资金建设自己的网站。但是企业在网站建设中使用的理念较为落后，已经不能适应大众及自身发展的需求，没有达到期望的效果。
本课题针对上述情况做了改善，着重于产品展示，咖啡厅经营理念，以及最新新闻的发布，内容针对性强，这样网站就不是一个摆设，而是一个真正的能够为咖啡厅带来效益的有效工具。
论文从制作网站的环境开始，由浅入深的介绍了制作一个完整的网站所需要的各种技术，详细介绍了界面的排版布局，图片的动态显示方法等，并且说明了 *好棒文|www.hbsrm.com +Q:  3_5_1_9_1_6_0_7_2 
网站制作过程中遇到的问题的解决方法。
一、网站需求分析
（一）概述
现在是一个信息技术发展的时代，人们越来越趋向于使用互联网来获取信息。通过对研磨时光咖啡馆的网站制作，更真实的向人们展示咖啡馆的情况，同时对咖啡馆起到宣传的效果，网站内容包括有环境介绍、产品介绍以及整个咖啡馆的经营理念，让研磨时光咖啡馆得到更多的人认可和喜爱，同时让此咖啡馆得到发展。
（二）可行性分析
本网站使用DIV+CSS的布局方式，利用Photoshop软件对网站的界面进行设计，采用HTML作为开发语言，采用JavaScript的特效实现图片的轮转效果，增加网站的可视性，使用户体验得到提升。网站符合咖啡厅的主题，保证网站的原创，内容丰富全面，色彩搭配得当，品牌宣传到位，符合Web标准。方便用户通过网站更便捷的查询研磨时光咖啡馆的产品以及价位，了解馆内最新动态，提供联系方式便于联系。
（三）网站运行环境
服务器要求操作系统是Windows XP / Win7；Web服务器要求IIS8.0；任意客户端操作系统下的浏览器均可。配置要求CPU是酷睿双核处理器，内存标准版至少512M，硬盘至少200G，一般为500G，显视器 VGA或更高分辨率。
二、工具及关键技术介绍
（一）Dreamweaver
Dreamweaver是在网页制作过程中使用最多的软件，它具有网页设计、网站开发和站点管理等功能，支持多平台使用和跨浏览器的特性,具有所见即所得的特性。突出的特点主要它的编写方式较灵活,可视化编辑界面；可为整体页面布局添加CSS功能，方便更改布局和外观；支持多浏览器使用；强大的Web站点管理功能；丰富的媒体支持能力等。
（二）HTML
HTML是W3C制定的一种标准的超文本标记语言，是通过对文本文档添加标记符号来告诉浏览器该如何显示其中的内容，HTML文档的结构包括头部（head）和主体（body）两大部分，其中，头部描述这个文档的标题以及其他网页信息，主体则包括该网站的具体内容，HTML可以在任何浏览器中使用，但是由于不同的浏览器对标记符的解释不同，所以可能会产生不同的效果。
（三）JavaScript
JavaScript 是一种基于对象的脚本语言，是一种解释性脚本语言，是一种动态类型语言，用来对网页添加动态功能，实现图片的轮转效果，提供美观的浏览效果，通常情况是基于HTML来实现功能的。它和其他语言一样，都有自己的基本数据类型，JavaScript具有跨平台性，只要浏览器支持JavaScript脚本语言都可以被运行。现在已经广泛应用于网站开发中。
三、网站的设计与实现
（一）网站总体设计
网站目录功能包括首页、新闻、咖啡饮品、联系我们、时光美食。详细目录功能模块功能结构图，如图3-1所示：

图3-1 网站结构图
（二）网站详细设计
1、材料准备
素材是制作网站的最重要的一部分，需要收集许多内容各异的文字图片，还需要设计网页的排版格式与美工。这个网站的排版格式是用Photoshop设计出来的，其中的图片有的是自己处理的，也有些是从网上下载后自己用Photoshop处理的。具体的网站有：华军软件园、萧湘书室等。
2、LOGO设计
该网站是以咖啡为主，所以LOGO用了白色做底，咖啡色的文字和图来设计，咖啡厅名字为研磨时光，所以用了一个研磨机加上coffer time来修饰，以此符合咖啡厅的主题。如图3-2所示：


图3-2 LOGO
3、首页和子页的布局设计
（1）首页
现如今网站数不胜数，而且各个网站主题也都大同小异，能够吸引人们的不仅在是网页中的数据量，更是网页美观、新颖的页面设计。所以在进行首页设计的时候，不仅要求布局合理，而且颜色搭配美观得体，从而给人们留下好的印象。所以本网站首页主选颜色是咖啡色，设计的内容包括信息栏、导航栏、品牌介绍、最新产品推荐、站内新闻。如图3-3所示：


图3-3 首页效果图
（2）子页
子页的大体设计和首页一致，通过链接与首页相连，即可通过点击首页的导航栏对子页进行访问，子页内容介绍的更为详细，而且针对性强，子页下面还有子子页，如图3-4所示：


图3-4 子页效果图
4、DIV+CSS框架结构
网站整体框架结构如图3-5所示：
#container{}
#top{}


#pagebody{}
#left{}

#right{}


#right2{}