1、 毕业设计说明书题 目 学生姓名 学 号 专 业 班 级 指导教师 完成日期 年 月 日目 录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 餐
2、饮页（catering.html） 244.7 商务会议页（meeting.html） 254.8 娱乐休闲页（yule.html) 254.9 在线预订页(order.html) 264.10 联系我们页（contactus.html） 275 总结 28致谢 29参考文献 2911 引言1.1 编写目的当今社会是一个信息快速发展的时代，互联网不断普及，成为人们快速获取、发布和传递信息的重要渠道，越来越多的企业和个人通过建设自己的网站，在互联网上宣传和推广自己。通过建设开发海澜大酒店网站的网站平台展示酒店先进的内部设施、以国际化的服务理念，加大企业宣传力度，从而提高酒店形象，为酒店客户和潜在
3、顾客提供网络扩展服务的网络站点。本文档为建设该网站的系统概要设计说明书，详细阐述了网站的定位和设计方案，对网站前台开发中的各项功能模块、技术需求、实现环境及所使用的实现技术进行了明确定义。编写该文档的目的在于明确海澜大酒店网站的建站目的及用户需求，整理网站系统功能，为网站的设计与实现理清思路。2 网站规划2.1 需求分析2.1.1 市场需求网站是企业展示自身形象，发布产品信息，加强客户服务、联系网上客户，完善网络业务的新平台、新天地。进而可以通过电子商务开拓新的市场，以极少的投入获得极大的收益和利润。网站还可以帮助企业提高效率、减少中间环节、规范管理。利用互联网低廉的通讯成本，统一开放的技术平
4、台，简单实用的前端界面，企业可以把内部的管理应用放到网上，实现真正的低成本、高效率的企业管理。因此建设网站是企业把握时代脉搏，衡量企业是否跟上时代的标准。随着现代社会经济的发展，带来了世界旅游、商旅的快速增长，酒店业也随之迅速发展起来。它作为我国最早向外资开放的行业之一，在酒店建设的大潮中，随着国内旅游业的快速发展，旅游市场的不断膨胀，酒店业也随之步入迅猛增长期。受国内旅游市场和商旅市场的迅猛发展以及酒店客房数快速增长的影响，我国酒店业迎来突飞猛进时代。受金融危机影响，虽然 2009 年酒店业需求下滑，2利润总额亏损 12 亿元，但 2010 年，酒店业市场强劲回暖，驻扎一线城市的外资品牌纷纷
5、布局二三线城市，中档酒店迅速崛起，星级饭店达 14587 家，其中四星、五星级酒店的比例由 10 年前的 7.7%升至 18.7%，酒店客房数量达到 5.5亿间；2011 年上半年，中国酒店业市场规模达 1200 亿元，完成全年预期的47%，新建酒店增速约为 13%。 “十二五”期间，随着渐渐步入正轨的品牌细分化道路，酒店业发展潜力无限，更带来了挑战。全球经营一体化使酒店业客源更加丰富，市场更加广阔。高新科技的进步和发展，导致人们的社会关系，思想观念、生活方式不可避免地处于变化之中，这就给酒店业制造了新的竞争载体，通过网络宣传酒店形象，开展网上预订客房服务，让顾客了解酒店的硬件及软件设施，选择
6、他们需要的服务，进行过程预订，最终为酒店带来更多的客源，而酒店与顾客通过网上的交流，进而提供更为人性化个性化的服务，使在在同行业中更显优势。现在很多酒店都拥有自己的企业网站，以便提升在同行业中的竞争中，走在时代的前端。2.1.2 功能需求一个典型的酒店网站一般都需要实现酒店信息的展示、商务应用需求、酒店与客户的交互等模块。海澜大酒店作为一个酒店网站，主要是实现客户信息需求、网上订房服务、顾客与酒店交互功能的网站。1) 网站首页：首页是客户打开网站的第一个页面，一般在这个页面中呈现的信息量最大，需要酒店新闻的显示、酒店的简介、酒店设施与客房的展示等，都要在第一时间呈现给顾客，且需要充分展现网站的
7、亮点，以吸引顾客。2) 酒店信息展示：海澜酒店通过自己的网站提供公司简介、服务项目、新闻中心、餐饮特色等详尽资料，而顾客及潜在顾客便可以从海澜酒店网站上更快、更便捷地了解酒店，他们足不出户便可对酒店有个直观全面的印象及了解酒店各项服务，享受视觉上的形象化的享受，获得身临其境的感觉。同时海澜大酒店可通过互联网宣传企业形象，比传统的宣传方式更快捷、更清晰、更全面、更互动，使无形服务有形化。3) 酒店内部设施展示：酒店可运用多种多媒体手段，展示出酒店客房、餐饮、商务会议、娱乐设施等各种服务设施、设备，使顾客能够直观的体验酒店服务，了解酒店品质及特色。4) 在线订房模块：海澜大酒店网站可为顾客提供网络
8、在线订房服务，以便顾客可以不必局限于地区和时间，通过网站及时的进行信息交递，实现网上订房与实际预定相同的功能，让顾客随时随地方便快捷地实现订房服务。同时酒店通过网上订房服务扩大销售渠道，提高海澜酒店的预定能力、销3售能力。5) 交互模块：海澜酒店网站应提供客服服务及留言板作为顾客与酒店之间交流的平台。网站上的服务应是现实中酒店对客户服务的延伸，酒店通过与顾客的互动了解其对网站的需求与意见，来改善酒店的服务质量，提升酒店的社会效益与经济效益。2.1.3 用户界面需求1) 用户界面的一致很关键，界面的结构必须清晰且所用的术语保持一致，风格必须与内容相一致，界面的色调字体也要保持一致。2) 遵循对比
9、原则在浅色背景上使用深色文字，在深色背景上使用浅色文字。3) 页面模块化。4) 更好的符合用户需求，根据用户需求定制个性化页面。5) 对网站页面进行合理样式管理和版式管理而进行合理的组合拆分。6) 突出主要频道的实用性和观赏性。2.2 建站目的及功能定位2.2.1 建站目的海澜大酒店通过建设自己的网站平台展示酒店先进的内部设施、以国际化的服务理念，为酒店客户和潜在顾客提供网络扩展服务的网络站点。该网站主要是为展示酒店自身形象，提高酒店知名度，以及为酒店的业务更好开展而服务的，是不以追求投资网站本身利润为目标。2.2.2 功能定位根据海澜大酒店的建站目的，该网站属于客户服务型，网络营销型结合的网
10、站。系统主要功能实现的作用体现为：顾客获取信息。可满足顾客的了解酒店、获取信息的需求。酒店与顾客在空间上存在着距离，顾客必须在酒店消费之后才能真正了解其服务水准，所形4成的印象对以后是否再次光临该酒店起作用。因此，无论酒店怎么运用广告、宣传等促销手段，都不能让顾客在消费之前就形成对酒店的真切认识，而在互联网上，酒店可运用多种多媒体手段，展示出各种服务设施、设备，使顾客能够直观的体验酒店服务。商务应用需求。随着网络应用的不断深入，网络订房因其快捷方便性也更多的为人所接受。海澜大酒店网站可为顾客提供网上订房服务，及时的进行信息交递，实现网上订房与实际预定相同的功能，扩大其销售渠道。顾客与酒店的交互
11、需求。顾客可从网站了解海澜大酒店信息的同时与酒店进行信息互动，酒店网站的服务是现实中酒店对客户服务的延伸。酒店可通过与顾客的互动了解其对网站的需求与意见，来改善酒店的服务质量，提升酒店的社会效益与经济效益。2.3 网站内容规划网站名称：海澜大酒店网站主题：通过网站宣传，树立企业形象，提高企业知名度网站语言：简体中文网站风格：以暖色调为主，给人以如家般温馨舒适的感觉，主题鲜明突出（顾客至上，品质服务） ，以简单明确的语言和画面体现网站的主题，表现网站温馨高雅的特点。网站 LOGO：标志海澜大酒店的企业标识及网站名称网站导航项目：首页、企业介绍、新闻中心、客房、餐饮、商务会议、娱乐休闲、在线预订、
12、联系我们海澜大酒店，作为一个宣传性的企业网站主要是突出它的中心标志性形象，运用现代流行理念和元素，体现出海澜大酒店网现代而不失传统，庄重不失轻松，大众不失前卫的特点，并做好各个栏目的导航，突出网站的重要功能和重要内容，使得网站能够同今日高科技与服务行业完美结合，建成同行业中独具特色的宣传型商务网站。2.4 网站设计网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，版式设计通过文字图形的空间组合，表达整体和谐之美。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要5处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果
13、，设计时考虑到整体布局的合理性，使浏览者有一个流畅的视觉体验。具体体现为：1) 酒店的主页能够给顾客比较强烈和突出的印象，突出海澜酒店的特点和风格。酒店网站的设计首先要抓住酒店在同行业中的突出特点，以增加浏览者的兴趣，挖掘潜在客户，其次要突出酒店的服务宗旨、服务特色和产品特点，结合网站栏目设计在首页导航上突出层次感。2) 网页结构设计合理，层次清楚。为了将丰富的含义和多样的形式组织成统一的页面结构，形式、语言必须符合页面的内容，灵活运用各种技巧，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感，做到点、线、面三者较好的结合，充分表达完美的设计意境，使顾客可以从主页实现自己的
14、需求。3) 网站内容全面，尽量涵盖顾客普遍所需的信息。4) 页面的链接方便浏览，传输速度和图片的下载的速度快，避免死链接和无效链接、图片无显示等情况存在。网站主页布局结构如图 1 所示：图 1 网站主页布局结构图62.5 开发环境与技术硬件环境：PC 机软件环境：Adobe Dreamweaver CS5 、Adobe Photoshop CS5开发技术：HTML、CSS、JAVASCRIPT3 网站详细设计3.1 网站构架海澜大酒店网站共有十个页面，包括引导页（welcome.html） 、首页(index.html)、酒店介绍页(introduce.html)、新闻中心页(news.htm
15、l)、客房页（room.html） 、餐饮页(catering.html)、商务会议页(meeting.html)、娱乐休闲页(yule.html)、在线预订页(order.html)、联系我们页(contactus.html)。共有三个文件夹：images 文件夹用于存放图片，css 文件夹用于放置 CSS 文件，script 文件夹用于放置 JS 文件。网站结构如图 2 所示：图 2 网站结构图73.2 页面设计及主要代码3.2.1 引导页的设计（welcomepg.html）图 3 引导页网站的引导页又称作“包装页” ，就像一本书的“封皮” 。网站引导页更多的作用是起到包装、装饰网站的作
16、用，海澜大酒店网站的引导页设计包括LOGO、正文内容，如图 3 所示。整个页面用一张带 LOGO 的大背景图，正文主要是一张带酒店服务理念的图片，突现海澜酒店的主题，让浏览者在进入网站时就直观的了解海澜标志及酒店文化。该页面使用了图片循环渐显的 javascript特效，使页面产生动感，增强浏览者的视觉享受。A.LOGO 设计网站 LOGO 是企业的标志，起到对徽标拥有公司的识别和推广的作用，通过形象的 logo 可以让消费者记住公司主体和品牌文化。海澜大酒店网站的 logo是在 photoshop 软件里设计处理的，最上面是酒店的图标，中间是网站名字的英文，最下面一行是网站名的中文。深黄色的
17、主色调，体现酒店深厚的企业文化，而“海澜大酒店”的文字标明网站名字，如图 4 所示：图 4 LOGO8引导页页面主要结构代码如下：.3.2.2 主页的设计（index.html）图 5 主页整个主页设计包括三部分：页头、正文内容和版权内容。背景使用花纹背景图，页面颜色以白色与黄色想搭配，网页整体采用垂直布局，实现网站整体风格统一。如图 5 所示。A.导航设计导航是有效链接网站各页面的工具，它有效的分类网站内容并指向它所代表内容。一个网站清晰的网站导航，可以让用户快速明了的找到自己想要了解的内容。对于网站架构信息，以及用户的体验有着密不可分的关系。海澜大酒店网站的导航项目设置为：首页、酒店介绍、新闻中心、客房、餐饮、商务会议、娱乐休闲、在线预订、联系我们。导航条的背景为黄色到白色的渐变背景
