酒店网站设计说明书.doc

毕业设计说明书

题 目
学生姓名
学 号
专 业
班 级
指导教师

完成日期 年 月 日

29

目 录

1 引言 1
1.1 编写目的 1
2 网站规划 1
2.1 需求分析 1
2.2 建站目的及功能定位 3
2.3 网站内容规划 4
2.4 网站设计 4
2.5 开发环境与技术 6
3 网站详细设计 6
3.1 网站构架 6
3.2 页面设计及主要代码 7
4 最终效果图 20
4.1 引导页（welcomepg.html） 20
4.2 首页（index.html） 21
4.3 酒店介绍页（introduce.html） 22
4.4 新闻中心页（news.html） 23
4.5 客房页（room.html） 23
4.6 餐饮页（catering.html） 24
4.7 商务会议页（meeting.html） 25
4.8 娱乐休闲页（yule.html) 25
4.9 在线预订页(order.html) 26
4.10 联系我们页（contactus.html） 27
5 总结 28
致谢 29
参考文献 29

1 引言
1.1 编写目的
当今社会是一个信息快速发展的时代，互联网不断普及，成为人们快速获取、发布和传递信息的重要渠道，越来越多的企业和个人通过建设自己的网站，在互联网上宣传和推广自己。通过建设开发海澜大酒店网站的网站平台展示酒店先进的内部设施、以国际化的服务理念，加大企业宣传力度，从而提高酒店形象，为酒店客户和潜在顾客提供网络扩展服务的网络站点。
本文档为建设该网站的系统概要设计说明书，详细阐述了网站的定位和设计方案，对网站前台开发中的各项功能模块、技术需求、实现环境及所使用的实现技术进行了明确定义。编写该文档的目的在于明确海澜大酒店网站的建站目的及用户需求，整理网站系统功能，为网站的设计与实现理清思路。

2 网站规划
2.1 需求分析
2.1.1 市场需求
网站是企业展示自身形象，发布产品信息，加强客户服务、联系网上客户，完善网络业务的新平台、新天地。进而可以通过电子商务开拓新的市场，以极少的投入获得极大的收益和利润。网站还可以帮助企业提高效率、减少中间环节、规范管理。利用互联网低廉的通讯成本统一开放的技术平台，简单实用的前端界面，企业可以把内部的管理应用放到网上，实现真正的低成本、高效率的企业管理。因此建设网站是企业把握时代脉搏，衡量企业是否跟上时代的标准。
随着现代社会经济的发展，带来了世界旅游、商旅的快速增长，酒店业也随之迅速发展起来。它作为我国最早向外资开放的行业之一，在酒店建设的大潮中，随着国内旅游业的快速发展，旅游市场的不断膨胀，酒店业也随之步入迅猛增长期。
受国内旅游市场和商旅市场的迅猛发展以及酒店客房数快速增长的影响，我国酒店业迎来突飞猛进时代。受金融危机影响，虽然2009年酒店业需求下滑，利润总额亏损12亿元，但2010年，酒店业市场强劲回暖，驻扎一线城市的外资品牌纷纷布局二三线城市，中档酒店迅速崛起，星级饭店达14587家，其中四星、五星级酒店的比例由10年前的7.7%升至18.7%，酒店客房数量达到5.5亿间；2011年上半年，中国酒店业市场规模达1200亿元，完成全年预期的47%，新建酒店增速约为13%。“十二五”期间，随着渐渐步入正轨的品牌细分化道路，酒店业发展潜力无限，更带来了挑战。全球经营一体化使酒店业客源更加丰富，市场更加广阔。高新科技的进步和发展，导致人们的社会关系，思想观念、生活方式不可避免地处于变化之中，这就给酒店业制造了新的竞争载体，通过网络宣传酒店形象，开展网上预订客房服务，让顾客了解酒店的硬件及软件设施，选择他们需要的服务，进行过程预订，最终为酒店带来更多的客源，而酒店与顾客通过网上的交流，进而提供更为人性化个性化的服务，使在在同行业中更显优势。现在很多酒店都拥有自己的企业网站，以便提升在同行业中的竞争中，走在时代的前端。

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机
软件环境：Adobe Dreamweaver CS5 、Adobe Photoshop CS5
开发技术：HTML、CSS、JAVASCRIPT

3 网站详细设计
3.1 网站构架
海澜大酒店网站共有十个页面，包括引导页（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 引导页的设计（welcomepg.html）

图3 引导页

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

图4 LOGO

引导页页面主要结构代码如下：

容和版权内容。背景使用花纹背景图，页面颜色以白色与黄色想搭配，网页整体采用垂直布局，实现网站整体风格统一。如图5所示。
A. 导航设计
导航是有效链接网站各页面的工具，它有效的分类网站内容并指向它所代表内容。一个网站清晰的网站导航，可以让用户快速明了的找到自己想要了解的内容。对于网站架构信息，以及用户的体验有着密不可分的关系。海澜大酒店网站的导航项目设置为：首页、酒店介绍、新闻中心、客房、餐饮、商务会议、娱乐休闲、在线预订、联系我们。导航条的背景为黄色到白色的渐变背景图，导航项目超链接文字的颜色为白色，鼠标滑过时的文字为黄色，如图6所示：

图6 导航
B.正文内容设计
分为客户预订、酒店新闻、酒店介绍、客房展示四个栏目，使浏览者了解网站概貌及重点内容，满足客户基本需求。
C.特效设计
主页有下拉菜单、图片自动切换、图片滚动三个js特效。

主页页面主要结构代码如下：

/div>
<！--头部-->
<！--网页主体-->

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(); //创建数组对像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)
} //返回指定id的标签名为tagName的页面元素对象集合
function closeMe(Cid,Oid)
{ //定义函数 closeMe（），使用Cid,Oid两个形参
var h = parseInt(Ds[Cid].style.height);
if(h > 0){
h = h - Math.ceil(h/3);
Ds[Cid].style.height = h+"px";
}
else
{
openMe(Oid);
clearTimeout(closeState[Cid]);
return false;
}
closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")");
}
function openMe(Oid){
var h = parseInt(Ds[Oid].style.height);
if(h < dH)
{
h = h + Math.ceil((dH-h)/3);
Ds[Oid].style.height = h+"px";
}
else
{
clearTimeout(openState[Oid]);
return false;
}
openState[Oid] = setTimeout("openMe("+Oid+")");
}
var 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){
Ds[i].style.height = dH+"px";
Ts[i].className="title01";
}
else
{
Ds[i].style.height = "0px";
Ts[i].className="title02";
}
Ts[i].value = i
Ts[i].onclick = function(){
if(open==this.value)
{
return false;
}
Ts[open].className="title02";
Ts[this.value].className="title01";
for(var i = 0 ; i < openState.length ; i++)
{
clearTimeout(openState[i]);
clearTimeout(closeState[i]);
}
closeMe(open,this.value);
//openMe(this.value);
open = this.value;
}
} //直接打开层函数
function showDiv(id){
Ds[id].style.height=dH+"px";
Ds[open].style.height="0px";
open = id;
} //渐渐打开层函数

C.图片轮换特效（如图10所示）:

图10 图片轮换特效

//主函数
var s=function(){
var interv=2000; //切换间隔时间
var interv2=10; //切换速速
var opac1=80; //文字背景的透明度
var source="changebox" //焦点轮换图片容器的id名称
//获取对象
function getTag(tag,obj)
{if(obj==null){return document.getElementsByTagName(tag)}
else{return 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);
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="button";
for(var i=0;iName="b1";
a.onmouseover=function()
{this.className="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+")";
}
else{obj.style.opacity=(n/100);
}
}
//控制焦点按钮
function sc(n){
for(var i=0;
i
id.appendChild(button);

//渐显
var fadeon=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;
scrolltxt();
scton=1};
if(opac<100){
timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);
};
}
//渐隐
var fadeout=function(){
opac-=5;
div.innerHTML=li[j].innerHTML;
alpha(div,opac);
if(scton==0){
num=2;
scrolltxt();
scton=1};
if(opac>0){
timer=setTimeout(fadeout,interv2)
}
else{if(j }
//滚动文字
var scrolltxt=function(){
t+=num;span.style.marginTop=t+"px";
if(num<0 && t>3){timer3=setTimeout(scrolltxt,interv2)}
else if(num>0 && t<62){timer3=setTimeout(scrolltxt,interv2)}
else{scton=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=setInterval(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);
var 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 引导页（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 联系我们页（contactus.html）

图21 联系我们页效果图

5 总结
通过本次毕业设计，我独立完成了网站前台开发设计，从最初对毕业设计不了解到能够整体把握再到比较顺利的完成本次设计，我从宏观上把握了网站前台的开发过程以及结构设计，使平时学到的知识点有了巩固和提高，加深了以往学习的专业知识，并有了更深层次的体会。要开发一个网站，不仅仅是设计页面那么简单，它需要考虑很多方面。比如，建站前的市场分析、建站目的、网站技术解决方案、网站开发规划、网页设计等，涉及到了很多的知识，不像之前网站设计课程任务中只是侧重于网站设计而没有进行规划。而在这次的毕业设计中则系统地完成了网站开发过程，让我了解到要做好一个网站，前期的规划是最重要的，好的开端是成功的一半，准备充分才能事半功倍，而不是毫无目的的随心所欲，这是网站开发中要特别注意的问题之一。而在网站规划过程中搜集相关资料，并从中分析有用的信息进行整理，这锻炼了我对信息收集整理的能力，将对我以后的学习和工作是有益的。
在网站前台开发过程中，主要运用了CSS、HTML、Javascript等网站前台开发技术及使用photoshop图形图像处理软件等，必须熟练掌握DreamweaverCS5的操作以及功能。在网站测试过程中，会遇到诸如层叠样式设置错误、代码错误等，需要进行不断的修改调试，这需要耐心和坚持。经过两个多星期来的资料收集，分析、整理，方案设计、确定，到目前基本上完成了毕业设计，这是个漫长的过程，也有倦怠的时候，但静下心来的时候就能保持清醒而继续奋斗。
在网页设计过程中，细节决定成败，最重要的就是细心，设计中一句代码的错误就会影响整体设计，很可能你在寻找原因时并不能很容易的发现问题，这就要求我们在过程要有认真细心的态度进行代码的编写，网页的设计。开发过程中遇到的最大问题和难点就是Javascript前台开发技术的应用，虽然在大二下学期专门学习了这一课程，但还是缺少灵活运用的能力，并不能很好的将所学的知识融汇贯通，这就使我看到了自己在学习中的缺陷。在学习中理论与实践相结合是很重要的，只有从理论中得出结论，并运用于实践才能真正掌握技术，从而提高自己的实际动手能力和独立思考的能力。我们在课堂中学到的知识是有限的，很多知识不能完全靠老师来教授，要想掌握更多更全的知识，我们必须学会主动学习，而我现在缺少的正是这种主动学习的精神，以至于在网站开发中的设计有所局限。我想我必须要尽力改变这种状态，才能适应时代的发展、技术的日益更新，才能走在别人前面。
虽然毕业设计仍有一些不足，但毕业设计过程中的体验却让我受益匪浅，那对我而言将是一种宝贵的财富，让我在今后的学习及工作中有所借鉴，不断地提高和完善自我。
致谢

我衷心感谢刘晓知老师在网站前台开发毕业设计中给予我无私的帮助与指导，悉心指导我对毕业设计进行修改与完善，让我顺利完成了毕业设计工作，在此表示深深的谢意。同时也对在设计过程中帮助我解决问题的朋友们说一声谢谢。

参考文献

[1]吴涛编，网站全程设计技术(修改版)[M]，北京交通大学出版社,2006.7（2）；
[2]任学文、范严编, 网页设计与制作[M]，中国科学技术出版社,2006.8(2)；
[3]何琛编, 网页设计与网站建设完全学习手册[M],中国科学出版社，2010.7（1）；
[4]曹刘阳编，编写高质量代码--Web前端开发修炼之道[M]，机械工业出版社，2010.6（1）；
[5]阮江文编，JavaScript程序设计基础教程[M]，北京人民邮电出版社,2010.8(2)；
[6]曾静娜编，新手学CSS+DIV[M]，北京希望电子出版社，2010.3（1）.