酒店网站设计说明书

1、 毕业设计说明书题 目学生学 号专 业班 级指导教师完成日期年月日29 / 31目 录1 引言11.1 编写目的12 规划12.1 需求分析12.2 建站目的与功能定位32.3 容规划42.4 设计42.5 开发环境与技术63 详细设计63.1 构架63.2 页面设计与主要代码74 最终效果图204.1 引导页（welcomepg.html）204.2 首页（index.html）214.3 酒店介绍页（introduce.html）224.4 新闻中心页（news.html）234.5 客房页（room.html）234.6 餐饮页（catering.html）244.7 商务会议页（mee

2、ting.html）254.8 娱乐休闲页（yule.html)254.9 在线预订页(order.html)264.10 联系我们页（contactus.html）275 总结28致29参考文献291 引言1.1 编写目的当今社会是一个信息快速发展的时代，互联网不断普与，成为人们快速获取、发布和传递信息的重要渠道，越来越多的企业和个人通过建设自己的，在互联网上宣传和推广自己。通过建设开发海澜大酒店的平台展示酒店先进的部设施、以国际化的服务理念，加大企业宣传力度，从而提高酒店形象，为酒店客户和潜在顾客提供网络扩展服务的网络站点。本文档为建设该的系统概要设计说明书，详细阐述了的定位和设计方案，对

3、前台开发中的各项功能模块、技术需求、实现环境与所使用的实现技术进行了明确定义。编写该文档的目的在于明确海澜大酒店的建站目的与用户需求，整理系统功能，为的设计与实现理清思路。2 规划2.1 需求分析2.1.1 市场需求是企业展示自身形象，发布产品信息，加强客户服务、联系网上客户，完善网络业务的新平台、新天地。进而可以通过电子商务开拓新的市场，以极少的投入获得极大的收益和利润。还可以帮助企业提高效率、减少中间环节、规管理。利用互联网低廉的通讯成本，统一开放的技术平台，简单实用的前端界面，企业可以把部的管理应用放到网上，实现真正的低成本、高效率的企业管理。因此建设是企业把握时代脉搏，衡量企业是否跟上

4、时代的标准。随着现代社会经济的发展，带来了世界旅游、商旅的快速增长，酒店业也随之迅速发展起来。它作为我国最早向外资开放的行业之一，在酒店建设的大潮中，随着国旅游业的快速发展，旅游市场的不断膨胀，酒店业也随之步入迅猛增长期。受国旅游市场和商旅市场的迅猛发展以与酒店客房数快速增长的影响，我国酒店业迎来突飞猛进时代。受金融危机影响，虽然2009年酒店业需求下滑，利润总额亏损12亿元，但2010年，酒店业市场强劲回暖，驻扎一线城市的外资品牌纷纷布局二三线城市，中档酒店迅速崛起，星级饭店达14587家，其中四星、五星级酒店的比例由10年前的7.7%升至18.7%，酒店客房数量达到5.5亿间；2011年上

5、半年，中国酒店业市场规模达1200亿元，完成全年预期的47%，新建酒店增速约为13%。“十二五”期间，随着渐渐步入正轨的品牌细分化道路，酒店业发展潜力无限，更带来了挑战。全球经营一体化使酒店业客源更加丰富，市场更加广阔。高新科技的进步和发展，导致人们的社会关系，思想观念、生活方式不可避免地处于变化之中，这就给酒店业制造了新的竞争载体，通过网络宣传酒店形象，开展网上预订客房服务，让顾客了解酒店的硬件与软件设施，选择他们需要的服务，进行过程预订，最终为酒店带来更多的客源，而酒店与顾客通过网上的交流，进而提供更为人性化个性化的服务，使在在同行业中更显优势。现在很多酒店都拥有自己的企业，以便提升在同行

6、业中的竞争中，走在时代的前端。2.1.2 功能需求一个典型的酒店一般都需要实现酒店信息的展示、商务应用需求、酒店与客户的交互等模块。海澜大酒店作为一个酒店，主要是实现客户信息需求、网上订房服务、顾客与酒店交互功能的。1) 首页：首页是客户打开的第一个页面，一般在这个页面中呈现的信息量最大，需要酒店新闻的显示、酒店的简介、酒店设施与客房的展示等，都要在第一时间呈现给顾客，且需要充分展现的亮点，以吸引顾客。2) 酒店信息展示：海澜酒店通过自己的提供公司简介、服务项目、新闻中心、餐饮特色等详尽资料，而顾客与潜在顾客便可以从海澜酒店上更快、更便捷地了解酒店，他们足不出户便可对酒店有个直观全面的印象与了

7、解酒店各项服务，享受视觉上的形象化的享受，获得身临其境的感觉。同时海澜大酒店可通过互联网宣传企业形象，比传统的宣传方式更快捷、更清晰、更全面、更互动，使无形服务有形化。3) 酒店部设施展示：酒店可运用多种多媒体手段，展示出酒店客房、餐饮、商务会议、娱乐设施等各种服务设施、设备，使顾客能够直观的体验酒店服务，了解酒店品质与特色。4) 在线订房模块：海澜大酒店可为顾客提供网络在线订房服务，以便顾客可以不必局限于地区和时间，通过与时的进行信息交递，实现网上订房与实际预定一样的功能，让顾客随时随地方便快捷地实现订房服务。同时酒店通过网上订房服务扩大销售渠道，提高海澜酒店的预定能力、销售能力。5) 交互

8、模块：海澜酒店应提供客服服务与留言板作为顾客与酒店之间交流的平台。上的服务应是现实中酒店对客户服务的延伸，酒店通过与顾客的互动了解其对的需求与意见，来改善酒店的服务质量，提升酒店的社会效益与经济效益。2.1.3 用户界面需求1) 用户界面的一致很关键，界面的结构必须清晰且所用的术语保持一致，风格必须与容相一致，界面的色调字体也要保持一致。2) 遵循对比原则在浅色背景上使用深色文字，在深色背景上使用浅色文字。3) 页面模块化。4) 更好的符合用户需求，根据用户需求定制个性化页面。5) 对页面进行合理样式管理和版式管理而进行合理的组合拆分。6) 突出主要频道的实用性和观赏性。2.2 建站目的与功能

9、定位2.2.1 建站目的海澜大酒店通过建设自己的平台展示酒店先进的部设施、以国际化的服务理念，为酒店客户和潜在顾客提供网络扩展服务的网络站点。该主要是为展示酒店自身形象，提高酒店知名度，以与为酒店的业务更好开展而服务的，是不以追求投资本身利润为目标。2.2.2 功能定位根据海澜大酒店的建站目的，该属于客户服务型，网络营销型结合的。系统主要功能实现的作用体现为：顾客获取信息。可满足顾客的了解酒店、获取信息的需求。酒店与顾客在空间上存在着距离，顾客必须在酒店消费之后才能真正了解其服务水准，所形成的印象对以后是否再次光临该酒店起作用。因此，无论酒店怎么运用广告、宣传等促销手段，都不能让顾客在消费之前

10、就形成对酒店的真切认识，而在互联网上，酒店可运用多种多媒体手段，展示出各种服务设施、设备，使顾客能够直观的体验酒店服务。商务应用需求。随着网络应用的不断深入，网络订房因其快捷方便性也更多的为人所接受。海澜大酒店可为顾客提供网上订房服务，与时的进行信息交递，实现网上订房与实际预定一样的功能，扩大其销售渠道。顾客与酒店的交互需求。顾客可从了解海澜大酒店信息的同时与酒店进行信息互动，酒店的服务是现实中酒店对客户服务的延伸。酒店可通过与顾客的互动了解其对的需求与意见，来改善酒店的服务质量，提升酒店的社会效益与经济效益。2.3 容规划名称：海澜大酒店主题：通过宣传，树立企业形象，提高企业知名度语言：简体

11、中文风格：以暖色调为主，给人以如家般温馨舒适的感觉，主题鲜明突出（顾客至上，品质服务），以简单明确的语言和画面体现的主题，表现温馨高雅的特点。LOGO：标志海澜大酒店的企业标识与名称导航项目：首页、企业介绍、新闻中心、客房、餐饮、商务会议、娱乐休闲、在线预订、联系我们海澜大酒店，作为一个宣传性的企业主要是突出它的中心标志性形象，运用现代流行理念和元素，体现出海澜大酒店网现代而不失传统，庄重不失轻松，大众不失前卫的特点，并做好各个栏目的导航，突出的重要功能和重要容，使得能够同今日高科技与服务行业完美结合，建成同行业中独具特色的宣传型商务。2.4 设计网页设计作为一种视觉语言，特别讲究编排和布局，

12、虽然主页的设计不等同于平面设计，但它们有许多相近之处，版式设计通过文字图形的空间组合，表达整体和谐之美。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面的秩序与容的关系。为了达到最佳的视觉表现效果，设计时考虑到整体布局的合理性，使浏览者有一个流畅的视觉体验。具体体现为：1) 酒店的主页能够给顾客比较强烈和突出的印象，突出海澜酒店的特点和风格。酒店的设计首先要抓住酒店在同行业中的突出特点，以增加浏览者的兴趣，挖掘潜在客户，其次要突出酒店的服务宗旨、服务特色和产品特点，结合栏目设计在首页导航上突出层次感。2) 网页结构设计合理，层次清楚。为了将丰富的含义和多样的

13、形式组织成统一的页面结构，形式、语言必须符合页面的容，灵活运用各种技巧，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感，做到点、线、面三者较好的结合，充分表达完美的设计意境，使顾客可以从主页实现自己的需求。3) 容全面，尽量涵盖顾客普遍所需的信息。4) 页面的方便浏览，传输速度和图片的下载的速度快，避免死和无效、图片无显示等情况存在。主页布局结构如图1所示：图1 主页布局结构图2.5 开发环境与技术硬件环境：PC机软件环境：Adobe Dreamweaver CS5 、Adobe Photoshop CS5开发技术：HTML、CSS、JAVASCRIPT3 详细设计3.1

14、 构架海澜大酒店共有十个页面，包括引导页（welcome.html）、首页(index.html)、酒店介绍页(introduce.html)、新闻中心页(news.html)、客房页（room.html）、餐饮页(catering.html)、商务会议页(meeting.html)、娱乐休闲页(yule.html)、在线预订页(order.html)、联系我们页(contactus.html)。共有三个文件夹：images文件夹用于存放图片，css文件夹用于放置CSS文件，script文件夹用于放置JS文件。结构如图2所示：图2 结构图3.2 页面设计与主要代码3.2.1 引导页的设计（we

15、lcomepg.html）图3 引导页的引导页又称作“包装页”，就像一本书的“封皮”。引导页更多的作用是起到包装、装饰的作用，海澜大酒店的引导页设计包括LOGO、正文容，如图3所示。整个页面用一带LOGO的大背景图，正文主要是一带酒店服务理念的图片，突现海澜酒店的主题，让浏览者在进入时就直观的了解海澜标志与酒店文化。该页面使用了图片循环渐显的javascript特效，使页面产生动感，增强浏览者的视觉享受。A. LOGO设计LOGO是企业的标志，起到对徽标拥有公司的识别和推广的作用，通过形象的logo可以让消费者记住公司主体和品牌文化。海澜大酒店的logo是在photoshop软件里设计处理的，

16、最上面是酒店的图标，中间是名字的英文，最下面一行是名的中文。深黄色的主色调，体现酒店深厚的企业文化，而“海澜大酒店”的文字标明名字，如图4所示：图4 LOGO引导页页面主要结构代码如下：<body><div id="all"> <p>.</p></div></body>3.2.2 主页的设计（index.html）图5 主页整个主页设计包括三部分：页头、正文容和容。背景使用花纹背景图，页面颜色以白色与黄色想搭配，网页整体采用垂直布局，实现整体风格统一。如图5所示。A. 导航设计导航是有效各页面的工具，它

17、有效的分类容并指向它所代表容。一个清晰的导航，可以让用户快速明了的找到自己想要了解的容。对于架构信息，以与用户的体验有着密不可分的关系。海澜大酒店的导航项目设置为：首页、酒店介绍、新闻中心、客房、餐饮、商务会议、娱乐休闲、在线预订、联系我们。导航条的背景为黄色到白色的渐变背景图，导航项目超文字的颜色为白色，鼠标滑过时的文字为黄色，如图6所示：图6 导航B.正文容设计分为客户预订、酒店新闻、酒店介绍、客房展示四个栏目，使浏览者了解概貌与重点容，满足客户基本需求。C.特效设计主页有下拉菜单、图片自动切换、图片滚动三个js特效。主页页面主要结构代码如下：<body><!-头部-&g

18、t; <div id="header"> <p>-logo-</p> <ul class="nav">-导航-</ul> </div><!-头部-><!-正文容-> <div id="content">.</div><!-正文容-><!-尾部-><div id="footer"> <ul>.</ul> <p>容</p&g

19、t;</div><!-尾部-></body>3.2.3 二级子页面的设计的二级页面将容更加条理化，更加详细与方便的展现给浏览者。二级页面基本采用一样的页面结构，一样的页头和页尾，正文容分左右两栏，左栏为菜单，右栏为容。其中一个子页面效果图如图7所示。二级页面最大特色是用CSS样式实现的带箭头的导航菜单，如图8所示。二级子页面的主要结构代码为：<body><！-头部-><div id="header">.</div><！-头部-><！-网页主体-><div id=

20、"main"> <div class="leftcol"> .<！-左栏->.</div> <div class="rightcol">.<！-右栏->.</div></div><！-网页主体-><！-尾部-><div id="footer">.</div><！-尾部-></body>图7 子页图8 带箭头的导航菜单3.2.4 特效设计A.图片循环渐显特效

21、（引导页）： var b = 1; var c = true; function fade() if(document.all); if(c = true) b+; if(b=100) b-; c = false if(b=10) b+; c = true; if(c = false) b-; u.filters.alpha.opacity=0 + b; setTimeout("fade()",40); B.左侧竖向滑动菜单特效（如图9所示）：图9 左侧竖向滑动菜单特效 var open = 0; / 设置初始打开的层序号 var openState = new Array

22、(); /创建数组对像openState var closeState = new Array(); /创建数组对像closeState var dH = 150; /声明变量dH,并赋值为150 function $(id) if(document.getElementById(id) return document.getElementById(id); else alert("没有找到!"); /判断是否存在指定id属性值的页面元素 function $tag(id,tagName) return $(id).getElementsByTagName(tagName)

23、 /返回指定id的标签名为tagName的页面元素对象集合 function closeMe(Cid,Oid) /定义函数 closeMe（），使用Cid,Oid两个形参 var h = parseInt(DsCid.style.height); if(h > 0) h = h - Math.ceil(h/3); DsCid.style.height = h+"px" else openMe(Oid); clearTimeout(closeStateCid); return false; closeStateCid = setTimeout("closeMe

24、("+Cid+","+Oid+")"); function openMe(Oid) var h = parseInt(DsOid.style.height); if(h < dH) h = h + Math.ceil(dH-h)/3); DsOid.style.height = h+"px" else clearTimeout(openStateOid); return false; openStateOid = setTimeout("openMe("+Oid+")"); va

25、r Ds = $tag("menu","div"); var Ts = $tag("menu","table"); if(Ds.length != Ts.length) alert("标题和容数目不一样!"); for(var i = 0 ; i < Ds.length ; i+) if(i=open) Dsi.style.height = dH+"px" Tsi.className="title01" else Dsi.style.height =

26、 "0px" Tsi.className="title02" Tsi.value = i; Tsi.onclick = function() if(open=this.value) return false; Tsopen.className="title02" Tsthis.value.className="title01" for(var i = 0 ; i < openState.length ; i+) clearTimeout(openStatei); clearTimeout(closeState

27、i); closeMe(open,this.value); /openMe(this.value); open = this.value; /直接打开层函数 function showDiv(id) Dsid.style.height=dH+"px" Dsopen.style.height="0px" open = id; /渐渐打开层函数C.图片轮换特效（如图10所示）:图10 图片轮换特效/主函数var s=function()var interv=2000; /切换间隔时间var interv2=10; /切换速速var opac1=80; /文字

28、背景的透明度var source="changebox" /焦点轮换图片容器的id名称/获取对象function getTag(tag,obj)if(obj=null)return document.getElementsByTagName(tag)elsereturn obj.getElementsByTagName(tag)function getid(id)return document.getElementById(id);var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source)

29、;id.removeChild(getTag("div",id)0);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="

30、button"for(var i=0;i<li.length;i+)var a=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.cla

31、ssName="b2"a.onmouseout=function()this.className="b1"sc(j);button.appendChild(a);/控制图层透明度function alpha(obj,n)if(document.all)obj.style.filter="alpha(opacity="+n+")"elseobj.style.opacity=(n/100);/控制焦点按钮function sc(n)for(var i=0;i<li.length;i+)button.childNo

32、desi.className="b1"button.childNodesn.className="b2"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);/渐显var fadeon=function()opac+

33、=5;div.innerHTML=lij.innerHTML;span.innerHTML=getTag("img",lij)0.alt;alpha(div,opac);if(scton=0)sc(j);num=-2;scrolltxt();scton=1;if(opac<100)timer=setTimeout(fadeon,interv2)elsetimer2=setTimeout(fadeout,interv);/渐隐var fadeout=function()opac-=5;div.innerHTML=lij.innerHTML;alpha(div,opac)

34、;if(scton=0)num=2;scrolltxt();scton=1;if(opac>0)timer=setTimeout(fadeout,interv2)elseif(j<li.length-1)j+elsej=0; fadeon();/滚动文字var scrolltxt=function()t+=num;span.style.marginTop=t+"px"if(num<0 && t>3)timer3=setTimeout(scrolltxt,interv2)else if(num>0 && t<

35、62)timer3=setTimeout(scrolltxt,interv2)elsescton=0; fadeon();/初始化window.onload=s;D.图片滚动特效（如图11所示）：图11 图片滚动特效 var speed=20 /速度数值越大速度越慢 demo2.innerHTML=demo1.innerHTML function Marquee() if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else demo.scrollLeft+ var MyMar=setI

36、nterval(Marquee,speed) demo.onmouseover=function() clearInterval(MyMar) demo.onmouseout=function() MyMar=setInterval(Marquee,speed) E.图片显示特效（客房页）： function showpic(i) var tu=i.getAttribute("href"); var pic=document.getElementById("frame"); frame.setAttribute("src",tu);v

37、ar text=i.getAttribute("alt"); var tx=document.getElementById("tx"); tx.firstChild.nodeValue=text;3.2.4 遇到的问题与解决方案A. 在首页制作中导航在IE浏览器中浏览时正常显示，但在火狐浏览器中浏览却出现错位现象。通过不断修改导航的CSS样式，调整整体宽度和li列表宽度而解决的。B. 主页中javascript代码的运用，了解自己所需要的特效效果，却不能独立的设计编写代码。利用网络搜索相关效果代码并进行修改后运用到设计中来解决问题的。4 最终效果图4.1

38、 引导页（welcomepg.html）图12 引导页效果图4.2 首页（index.html）图13 首页效果图4.3 酒店介绍页（introduce.html）图14 酒店介绍页效果图4.4 新闻中心页（news.html）图15 新闻中心页效果图4.5 客房页（room.html）图16 客房页效果图4.6 餐饮页（catering.html）图17 餐饮页效果图4.7 商务会议页（meeting.html）图18 商务会议页效果图4.8 娱乐休闲页（yule.html)图19 娱乐休闲页效果图4.9 在线预订页(order.html)图20 在线预订页效果图4.10 联系我们页（con

39、tactus.html）图21 联系我们页效果图5 总结通过本次毕业设计，我独立完成了前台开发设计，从最初对毕业设计不了解到能够整体把握再到比较顺利的完成本次设计，我从宏观上把握了前台的开发过程以与结构设计，使平时学到的知识点有了巩固和提高，加深了以往学习的专业知识，并有了更深层次的体会。要开发一个，不仅仅是设计页面那么简单，它需要考虑很多方面。比如，建站前的市场分析、建站目的、技术解决方案、开发规划、网页设计等，涉与到了很多的知识，不像之前设计课程任务中只是侧重于设计而没有进行规划。而在这次的毕业设计中则系统地完成了开发过程，让我了解到要做好一个，前期的规划是最重要的，好的开端是成功的一半，准备充分才能事半功倍，而不是毫无目的的随心所欲，这是开发中要特别注意的问题之一。而在规划过程中搜集相关资料，并从中分析有用的信息进行整理，这锻炼了我对信息收集整理的能力，将对我以后的学习和工作是有益的。在前台开发过程中，主要运用了CSS、HTML、Javas