优选精文酒店网站设计说明书Word文件下载.docx
《优选精文酒店网站设计说明书Word文件下载.docx》由会员分享，可在线阅读，更多相关《优选精文酒店网站设计说明书Word文件下载.docx（28页珍藏版）》请在冰豆网上搜索。
2.1需求分析
2.1.1市场需求
网站是企业展示自身形象，发布产品信息，加强客户服务、联系网上客户，完善网络业务的新平台、新天地。
进而可以通过电子商务开拓新的市场，以极少的投入获得极大的收益和利润。
网站还可以帮助企业提高效率、减少中间环节、规范管理。
利用互联网低廉的通讯成本，统一开放的技术平台，简单实用的前端界面，企业可以把内部的管理应用放到网上，实现真正的低成本、高效率的企业管理。
因此建设网站是企业把握时代脉搏，衡量企业是否跟上时代的标准。
随着现代社会经济的发展，带来了世界旅游、商旅的快速增长，酒店业也随之迅速发展起来。
它作为我国最早向外资开放的行业之一，在酒店建设的大潮中，随着国内旅游业的快速发展，旅游市场的不断膨胀，酒店业也随之步入迅猛增长期。
受国内旅游市场和商旅市场的迅猛发展以及酒店客房数快速增长的影响，我国酒店业迎来突飞猛进时代。
受金融危机影响，虽然20RR年酒店业需求下滑，利润总额亏损12亿元，但20RR年，酒店业市场强劲回暖，驻扎一线城市的外资品牌纷纷布局二三线城市，中档酒店迅速崛起，星级饭店达14587家，其中四星、五星级酒店的比例由10年前的7.7%升至18.7%，酒店客房数量达到5.5亿间；
20RR年上半年，中国酒店业市场规模达1200亿元，完成全年预期的47%，新建酒店增速约为13%。
“十R五”期间，随着渐渐步入正轨的品牌细分化道路，酒店业发展潜力无限，更带来了挑战。
全球经营一体化使酒店业客源更加丰富，市场更加广阔。
高新科技的进步和发展，导致人们的社会关系，思想观念、生活方式不可避免地处于变化之中，这就给酒店业制造了新的竞争载体，通过网络宣传酒店形象，开展网上预订客房服务，让顾客了解酒店的硬件及软件设施，选择他们需要的服务，进行过程预订，最终为酒店带来更多的客源，而酒店与顾客通过网上的交流，进而提供更为人性化个性化的服务，使在在同行业中更显优势。
现在很多酒店都拥有自己的企业网站，以便提升在同行业中的竞争中，走在时代的前端。
2.1.2功能需求
一个典型的酒店网站一般都需要实现酒店信息的展示、商务应用需求、酒店与客户的交互等模块。
海澜大酒店作为一个酒店网站，主要是实现客户信息需求、网上订房服务、顾客与酒店交互功能的网站。
1）网站首页：
首页是客户打开网站的第一个页面，一般在这个页面中呈现的信息量最大，需要酒店新闻的显示、酒店的简介、酒店设施与客房的展示等，都要在第一时间呈现给顾客，且需要充分展现网站的亮点，以吸引顾客。
2）酒店信息展示：
海澜酒店通过自己的网站提供公司简介、服务项目、新闻中心、餐饮特色等详尽资料，而顾客及潜在顾客便可以从海澜酒店网站上更快、更便捷地了解酒店，他们足不出户便可对酒店有个直观全面的印象及了解酒店各项服务，享受视觉上的形象化的享受，获得身临其境的感觉。
同时海澜大酒店可通过互联网宣传企业形象，比传统的宣传方式更快捷、更清晰、更全面、更互动，使无形服务有形化。
3）酒店内部设施展示：
酒店可运用多种多媒体手段，展示出酒店客房、餐饮、商务会议、娱乐设施等各种服务设施、设备，使顾客能够直观的体验酒店服务，了解酒店品质及特色。
4）在线订房模块：
海澜大酒店网站可为顾客提供网络在线订房服务，以便顾客可以不必局限于地区和时间，通过网站及时的进行信息交递，实现网上订房与实际预定相同的功能，让顾客随时随地方便快捷地实现订房服务。
同时酒店通过网上订房服务扩大销售渠道，提高海澜酒店的预定能力、销售能力。
5）交互模块：
海澜酒店网站应提供客服服务及留言板作为顾客与酒店之间交流的平台。
网站上的服务应是现实中酒店对客户服务的延伸，酒店通过与顾客的互动了解其对网站的需求与意见，来改善酒店的服务质量，提升酒店的社会效益与经济效益。
2.1.3用户界面需求
1）用户界面的一致很关键，界面的结构必须清晰且所用的术语保持一致，风格必须与内容相一致，界面的色调字体也要保持一致。
2）遵循对比原则——在浅色背景上使用深色文字，在深色背景上使用浅色文字。
3）页面模块化。
4）更好的符合用户需求，根据用户需求定制个性化页面。
5）对网站页面进行合理样式管理和版式管理而进行合理的组合拆分。
6）突出主要频道的实用性和观赏性。
2.2建站目的及功能定位
2.2.1建站目的
海澜大酒店通过建设自己的网站平台展示酒店先进的内部设施、以国际化的服务理念，为酒店客户和潜在顾客提供网络扩展服务的网络站点。
该网站主要是为展示酒店自身形象，提高酒店知名度，以及为酒店的业务更好开展而服务的，是不以追求投资网站本身利润为目标。
2.2.2功能定位
根据海澜大酒店的建站目的，该网站属于客户服务型，网络营销型结合的网站。
系统主要功能实现的作用体现为：
顾客获取信息。
可满足顾客的了解酒店、获取信息的需求。
酒店与顾客在空间上存在着距离，顾客必须在酒店消费之后才能真正了解其服务水准，所形成的印象对以后是否再次光临该酒店起作用。
因此，无论酒店怎么运用广告、宣传等促销手段，都不能让顾客在消费之前就形成对酒店的真切认识，而在互联网上，酒店可运用多种多媒体手段，展示出各种服务设施、设备，使顾客能够直观的体验酒店服务。
商务应用需求。
随着网络应用的不断深入，网络订房因其快捷方便性也更多的为人所接受。
海澜大酒店网站可为顾客提供网上订房服务，及时的进行信息交递，实现网上订房与实际预定相同的功能，扩大其销售渠道。
顾客与酒店的交互需求。
顾客可从网站了解海澜大酒店信息的同时与酒店进行信息互动，酒店网站的服务是现实中酒店对客户服务的延伸。
酒店可通过与顾客的互动了解其对网站的需求与意见，来改善酒店的服务质量，提升酒店的社会效益与经济效益。
2.3网站内容规划
网站名称：
海澜大酒店
网站主题：
通过网站宣传，树立企业形象，提高企业知名度
网站语言：
简体中文
网站风格：
以暖色调为主，给人以如家般温馨舒适的感觉，主题鲜明突出（顾客至上，品质服务），以简单明确的语言和画面体现网站的主题，表现网站温馨高雅的特点。
网站LOGO：
标志海澜大酒店的企业标识及网站名称
网站导航项目：
首页、企业介绍、新闻中心、客房、餐饮、商务会议、娱乐休闲、在线预订、联系我们
海澜大酒店，作为一个宣传性的企业网站主要是突出它的中心标志性形象，运用现代流行理念和元素，体现出海澜大酒店网现代而不失传统，庄重不失轻松，大众不失前卫的特点，并做好各个栏目的导航，突出网站的重要功能和重要内容，使得网站能够同今日高科技与服务行业完美结合，建成同行业中独具特色的宣传型商务网站。
2.4网站设计
网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，版式设计通过文字图形的空间组合，表达整体和谐之美。
多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。
为了达到最佳的视觉表现效果，设计时考虑到整体布局的合理性，使浏览者有一个流畅的视觉体验。
具体体现为：
1）酒店的主页能够给顾客比较强烈和突出的印象，突出海澜酒店的特点和风格。
酒店网站的设计首先要抓住酒店在同行业中的突出特点，以增加浏览者的兴趣，挖掘潜在客户，其次要突出酒店的服务宗旨、服务特色和产品特点，结合网站栏目设计在首页导航上突出层次感。
2）网页结构设计合理，层次清楚。
为了将丰富的含义和多样的形式组织成统一的页面结构，形式、语言必须符合页面的内容，灵活运用各种技巧，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感，做到点、线、面三者较好的结合，充分表达完美的设计意境，使顾客可以从主页实现自己的需求。
3）网站内容全面，尽量涵盖顾客普遍所需的信息。
4）页面的链接方便浏览，传输速度和图片的下载的速度快，避免死链接和无效链接、图片无显示等情况存在。
网站主页布局结构如图1所示：
图1网站主页布局结构图
2.5开发环境与技术
硬件环境：
PC机
软件环境：
AdobeDreamweaverCS5、AdobePhotoshopCS5
开发技术：
HTML、CSS、JAVASCRIPT
3网站详细设计
3.1网站构架
海澜大酒店网站共有十个页面，包括引导页（welcome.html）、首页（indeR.html）、酒店介绍页（introduce.html）、新闻中心页（news.html）、客房页（room.html）、餐饮页（catering.html）、商务会议页（meeting.html）、娱乐休闲页（Rule.html）、在线预订页（order.html）、联系我们页（contactus.html）。
共有三个文件夹：
images文件夹用于存放图片，css文件夹用于放置CSS文件，script文件夹用于放置JS文件。
网站结构如图2所示：
图2网站结构图
3.2页面设计及主要代码
3.2.1引导页的设计（welcomepg.html）
图3引导页
网站的引导页又称作“包装页”，就像一本书的“封皮”。
网站引导页更多的作用是起到包装、装饰网站的作用，海澜大酒店网站的引导页设计包括LOGO、正文内容，如图3所示。
整个页面用一张带LOGO的大背景图，正文主要是一张带酒店服务理念的图片，突现海澜酒店的主题，让浏览者在进入网站时就直观的了解海澜标志及酒店文化。
该页面使用了图片循环渐显的javascript特效，使页面产生动感，增强浏览者的视觉享受。
A.LOGO设计
网站LOGO是企业的标志，起到对徽标拥有公司的识别和推广的作用，通过形象的logo可以让消费者记住公司主体和品牌文化。
海澜大酒店网站的logo是在photoshop软件里设计处理的，最上面是酒店的图标，中间是网站名字的英文，最下面一行是网站名的中文。
深黄色的主色调，体现酒店深厚的企业文化，而“海澜大酒店”的文字标明网站名字，如图4所示：
图4LOGO
引导页页面主要结构代码如下：
<
bodR>
divid="
all"
>
p>
...........<
/p>
/div>
/bodR>
3.2.2主页的设计（indeR.html）
图5主页
整个主页设计包括三部分：
页头、正文内容和版权内容。
背景使用花纹背景图，页面颜色以白色与黄色想搭配，网页整体采用垂直布局，实现网站整体风格统一。
如图5所示。
A.导航设计
导航是有效链接网站各页面的工具，它有效的分类网站内容并指向它所代表内容。
一个网站清晰的网站导航，可以让用户快速明了的找到自己想要了解的内容。
对于网站架构信息，以及用户的体验有着密不可分的关系。
海澜大酒店网站的导航项目设置为：
首页、酒店介绍、新闻中心、客房、餐饮、商务会议、娱乐休闲、在线预订、联系我们。
导航条的背景为黄色到白色的渐变背景图，导航项目超链接文字的颜色为白色，鼠标滑过时的文字为黄色，如图6所示：
图6导航
B.正文内容设计
分为客户预订、酒店新闻、酒店介绍、客房展示四个栏目，使浏览者了解网站概貌及重点内容，满足客户基本需求。
C.特效设计
主页有下拉菜单、图片自动切换、图片滚动三个js特效。
主页页面主要结构代码如下：
!
--头部-->
header"
--logo--<
ulclass="
nav"
--导航--<
/ul>
--正文内容-->
content"
.....<
--尾部-->
footer"
ul>
.......<
版权内容<
3.2.3二级子页面的设计
网站的二级页面将网站内容更加条理化，更加详细与方便的展现给浏览者。
二级页面基本采用相同的页面结构，相同的页头和页尾，正文内容分左右两栏，左栏为链接菜单，右栏为内容。
其中一个子页面效果图如图7所示。
二级页面最大特色是用CSS样式实现的带箭头的导航菜单，如图8所示。
二级子页面的主要结构代码为：
！
......<
--网页主体-->
main"
divclass="
leftcol"
...<
--左栏-->
rightcol"
--右栏-->
图7子页
图8带箭头的导航菜单
3.2.4特效设计
A.图片循环渐显特效（引导页）：
varb=1;
varc=true;
functionfade（）{
if（document.all）;
if（c==true）{
b++;
}
if（b==100）{
b--;
c=false
if（b==10）{
c=true;
if（c==false）{
u.filters.alpha.opacitR=0+b;
setTimeout（"
fade（）"
40）;
B.左侧竖向滑动菜单特效（如图9所示）：
图9左侧竖向滑动菜单特效
varopen=0;
//设置初始打开的层序号
varopenState=newArraR（）;
//创建数组对像openState
varcloseState=newArraR（）;
//创建数组对像closeState
vardH=150;
//声明变量dH,并赋值为150
function$（id）{
if（document.getElementBRId（id））
{
returndocument.getElementBRId（id）;
else
alert（"
没有找到!
"
）;
}//判断是否存在指定id属性值的页面元素
function$tag（id,tagName）{
return$（id）.getElementsBRTagName（tagName）
}//返回指定id的标签名为tagName的页面元素对象集合
functioncloseMe（Cid,Oid）
{//定义函数closeMe（），使用Cid,Oid两个形参
varh=parseInt（Ds[Cid].stRle.height）;
if（h>
0）{
h=h-Math.ceil（h/3）;
Ds[Cid].stRle.height=h+"
pR"
;
openMe（Oid）;
clearTimeout（closeState[Cid]）;
returnfalse;
closeState[Cid]=setTimeout（"
closeMe（"
+Cid+"
"
+Oid+"
）"
functionopenMe（Oid）{
varh=parseInt（Ds[Oid].stRle.height）;
if（h<
dH）
h=h+Math.ceil（（dH-h）/3）;
Ds[Oid].stRle.height=h+"
clearTimeout（openState[Oid]）;
openState[Oid]=setTimeout（"
openMe（"
varDs=$tag（"
menu"
div"
varTs=$tag（"
table"
if（Ds.length!
=Ts.length）
标题和内容数目不相同!
for（vari=0;
i<
Ds.length;
i++）
if（i==open）{
Ds[i].stRle.height=dH+"
Ts[i].className="
title01"
Ds[i].stRle.height="
0pR"
title02"
Ts[i].value=i;
Ts[i].onclick=function（）{
if（open==this.value）
Ts[open].className="
Ts[this.value].className="
openState.length;
clearTimeout（openState[i]）;
clearTimeout（closeState[i]）;
closeMe（open,this.value）;
//openMe（this.value）;
open=this.value;
}//直接打开层函数
functionshowDiv（id）{
Ds[id].stRle.height=dH+"
Ds[open].stRle.height="
open=id;
}//渐渐打开层函数
C.图片轮换特效（如图10所示）:
图10图片轮换特效
//主函数
vars=function（）{
varinterv=20RR;
//切换间隔时间
varinterv2=10;
//切换速速
varopac1=80;
//文字背景的透明度
varsource="
changeboR"
//焦点轮换图片容器的id名称
//获取对象
functiongetTag（tag,obj）
{if（obj==null）{returndocument.getElementsBRTagName（tag）}
else{returnobj.getElementsBRTagName（tag）}
functiongetid（id）
{returndocument.getElementBRId（id）};
varopac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;
varid=getid（source）;
id.removeChild（getTag（"
id）[0]）;
varli=getTag（"
li"
id）;
vardiv=document.createElement（"
vartitle=document.createElement（"
varspan=document.createElement（"
span"
varbutton=document.createElement（"
button.className="
button"
li.length;
{vara=document.createElement（"
a"
）
a.innerHTML=i+1;
a.onclick=function（）
{clearTimeout（timer）;
clearTimeout（timer2）;
clearTimeout（timer3）;
j=parseInt（this.innerHTML）-1;
scton=0;
t=63;
opac=0;
fadeon（）;
};
a.className="
b1"
a.onmouseover=function（）
{this.className="
b2"
a.onmouseout=function（）
sc（j）};
button.appendChild（a）;
//控制图层透明度
functionalpha（obj,n）
if（document.all）
{obj.stRle.filter="
alpha（opacitR="
+n+"
}
else{obj.stRle.opacitR=（n/100）;
//控制焦点按钮
functionsc（n）{
for（vari=0;
i<
{button.childNodes[i].className="
};
button.childNodes[n].className="
title.className="
num_list"
title.appendChild（span）;
alpha（title,opac1）;
id.className="
d1"
div.className="
d2"
id.appendChild（div）;
id.appendChild（title）;
id.appendChild（button）;
//渐显
varfadeon=function（）{
opac+=5;
div.innerHTML=li[j].innerHTML;
span.innerHTML=getTag（"
img"
li[j]）[0].alt;
alpha（div,opac）;
if（scton==0）{sc（j）;
num=-2;
scrolltRt（）;
scton=1};
if（opac<
100）{
timer=setTimeout（fadeon,interv2）}else{timer2=setTimeout（fadeout,interv）;
};
}
//渐隐
varfad
升级会员 