旅游网站制作说明书.docx

旅游网站制作说明书.docx

《旅游网站制作说明书.docx》由会员分享，可在线阅读，更多相关《旅游网站制作说明书.docx（13页珍藏版）》请在冰豆网上搜索。

旅游网站制作说明书

作品制作说明

课题

旅游网站设计

学院

电子信息工程学院

专业（方向）

计算机应用技术

班级

微机101D

学号

100203129

姓名

于美颂

完成日期

2012.12.8

指导教师

葛杰

旅游网站设计

作品简介

随着社会的发展，旅游业已成为全球经济中发展势头最强劲和规模最大的产业之一。

旅游业在城市经济发展中的产业地位、经济作用逐步增强，旅游业对城市经济的拉动性、社会就业的带动力、以及对文化与环境的促进作用日益显现。

旅游业是中国经济发展的支柱性产业之一。

本站主要利用Dreamweaver对网站进行设计开发,对网站的设和制作进行了详细的说明，在视觉上采用Photoshop和Flash。

动态网页采用ACCESS编写，制作了一个简单的旅游网站系统，实现了旅游网站的基本功能，例如留言板的实现等。

网站模块采用Flash动画普及各个页面，使视觉效果更佳。

网站中的图片经过Photoshop处理，画面效果都达到了最佳。

网站总体设计主要有7方面构成，网站首页、南通概况、开心购物、特色美食、放松愉乐、住在南通玩在南通和联系我们。

通过本网站系统，给想了解知识产权的人群提供了一个良好的平台，同时也为广大旅客提供了一个可以互动解决问题的平台。

1）网站首页：

讲述有南通购物中心、特色美食以及愉快场所等

2）南通概况：

描述南通的历史背景和地理环境

3）开心购物：

描述南通著名的购物中心

4）特色美食：

讲述南通的特色美食

5）放松愉乐：

描述南通的愉乐场所

6）住在南通：

讲述在南通比较好的入住酒店

7）玩在南通：

推荐游客去的旅游景点

8）联系我们：

提供游客留言服务

引言

改革开放以来，我国的旅游业有了非常迅速的发展，但是比较而言，我国国内旅游业发展的广度深度都远远不能适应经济发展和人民生活水平提高的需要。

随着市场经济的发展和人民收入水平的进一步提高，人民对旅游消费的需求将进一步上升，国内旅游业在国民经济中的地位和作用越来越重要。

各家旅游行业之间的竞争日益激烈，旅游部门所需的信息量越来越大，业务操作中涉及的各种线路情况、客户情况以及旅游协作部门的情况越来越复杂多变。

而除了一些个别地区已采用了的旅游网站，一般通常是以原始的手工方式处理/交流信息。

但是工作人员若仅靠手工方式处理大量资料，很可能带来出错率的增长以及大量资源的浪费和闲置等问题。

因此，只有加强对旅游信息资源的整合、统一管理，才能使旅游部门运行更加合理、高效地运转。

在网络如此发达的环境，旅游作为人们生活的一个重要部分，在网络大环境下也变得快捷方便了，我们再也不用想旅游，还有挤出时间跑各家旅行社咨询，看线路，问价格了，我们大可以轻松地坐在电脑前，随意点击鼠标，浏览自己所需要的旅游信息，找到自己想去的地方。

1旅游网站的发展

改革开放30多年来，中国旅游业飞速发展，已经从旅游资源大国发展成为亚洲旅游大国。

随着世界旅游业的迅猛发展，越来越多的人意识到，旅游业的发展，必须在满足旅游者和旅游地居民当前需要的同时，保持和增进未来发展的机会，即实现旅游业的可持续发展。

可持续旅游业的实质是要建立一种旅游业与社会、经济、资源、环境良性协调的发展模式，追求的是经济效益与社会效益、环境效益的统一，短期效益与长期效益的统一,据世界旅游组织预测中国将成为21世纪全球最大的旅游市场。

与此同时旅游行业电子商务也成为旅游业乃至互联网行业的热点之一,它的赢利前景更是为业界所看好。

中国目前与旅游相关的网站大大小小已有650多家。

作为一个古老而又新兴的产业，作为新世纪人类文明的一个重要组成部分，旅游业可持续发展将对整个人类社会的可持续发展做出重大贡献。

1.1设计旅游网站的意义

旅游成为人们生活的必需品，是人类物质文化生活水平日益提高的产物，是人类文明程度不断提高的标志。

在当代中国，旅游也发展成为一个独立的新兴产业既有必要性，也有其可能性，从必要性看，作为一种消费品，旅游的内容随着社会生产力的进步和人们收入水平的不断提高而发展，制作这个网站也方便了人们的需求。

2开发工具介绍

2.1Dreamweaver简介

Dreamweaver是创建和管理网页的专业化可视编辑器，在网页设计与制作领域中用户最多、应用最广、功能最强大的软件。

它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。

1）灵活的编写方式

Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。

2）可视化编辑界面

Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。

或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。

无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。

3）功能更多的CSS支持——CSS可视化设计、CSS检查工具

4）动态跨浏览器验证

当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。

动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。

2.2PhotoshopCS

PhotoshopCS是一款图形、图像编辑软件，在网页设计领域被广泛得应用。

以下功能：

1）改进的文件浏览器

使用功能强大文件浏览器的可以快速预览、标注和排序图片；搜索或编辑图像的数据元或关键词；并且可以自动批量共享文件。

2）匹配颜色命令

可以迅速从一张图片的颜色校正另外一张图像的颜色。

3）直方图调色板

随时根据对图像的调整更新直方图调色板（HistogramPalette）。

4）阴影/加亮区修正

使用“阴影/加亮区修正（hadow/Highlightcorrection）”可以快速调整照片中曝光过渡或欠缺的区域。

2.3MicrosoftOfficeAccess

它之所以被集成到Office中而不是VisualStudio中，是因为它与其它的数据库管理系统（如VisualFoxPro）相比更加简单易学，一个普通的计算机用户即可掌握并使用它。

而且最重要的一点是Access的功能足够强大，足以应付一般的数据管理及处理需要。

Assess能够存取Access/Jet、MicrosoftSQLServer、Oracle，或者任何ODBC兼容数据库内的资料。

ODBC（OpenDatabaseConnectivity开放式数据库互联）是微软推出的一种工业标准，一种开放的独立于厂商的API应用程序接口，可以跨平台访问各种个人计算机、小型机以及主机系统。

ODBC作为一个工业标准，绝大多数数据库厂商、大多数应用软件和工具软件厂商都为自己的产品提供了ODBC接口或提供了ODBC支持，这其中就包括常用的SQLSERVER、ORACAL、INFORMIX等，当然也包括了Access。

在ASP中可以通过三种方式访问数据库：

一是IDC（InternetDatabaseConnector）方式；二是ADO（ActiveXDataObjects）方式；三是RDS（RemoteDataService）方式。

这三种访问方式对数据库的访问都是由InternetInformationServer完成的。

通过Web浏览器用HTTP协议向IIS（Internet信息服务器）发送请求，IIS执行对数据库的访问，并返回一个HTML格式的文档响应。

以下是Access的优点：

1）存储方式单一

Access管理的对象有表、查询、窗体、报表、页、宏和模块，以上对象都存放在后缀为（.mdb）的数据库文件种，便于用户的操作和管理。

2）面向对象

Access是一个面向对象的开发工具，利用面向对象的方式将数据库系统中的各种功能对象化，将数据库管理的各种功能封装在各类对象中。

它将一个应用系统当作是由一系列对象组成的，对每个对象它都定义一组方法和属性，以定义该对象的行为和外国，用户还可以按需要给对象扩展方法和属性。

通过对象的方法、属性完成数据库的操作和管理，极大地简化了用户的开发工作。

同时，这种基于面向对象的开发方式，使得开发应用程序更为简便。

3）界面友好、易操作

Access是一个可视化工具，是风格与Windows完全一样，用户想要生成对象并应用，只要使用鼠标进行拖放即可，非常直观方便。

系统还提供了表生成器、查询生成器、报表设计器以及数据库向导、表向导、查询向导、窗体向导、报表向导等工具，使得操作简便，容易使用和掌握。

4）集成环境、处理多种数据信息

Access基于Windows操作系统下的集成开发环境，该环境集成了各种向导和生成器工具，极大地提高了开发人员的工作效率，使得建立数据库、创建表、设计用户界面、设计数据查询、报表打印等可以方便有序地进行。

3整体网站的设计用作品展示

3.1主界面框架搭建

网站总体设计主要有7方面构成，网站首页、南通概况、开心购物、特色美食、放松愉乐、住在南通玩在南通和联系我们。

网站首页：

讲述有南通购物中心、特色美食以及愉快场所等

南通概况：

描述南通的历史背景和地理环境

开心购物：

描述南通著名的购物中心

特色美食：

讲述南通的特色美食

放松愉乐：

描述南通的愉乐场所

住在南通：

讲述在南通比较好的入住酒店

玩在南通：

推荐游客去的旅游景点

联系我们：

提供游客留言服务

3.2页面布局——头部与导航

插入两行一列的表格，第一行插入如图所示狼山风景区的图片，第二行插入布局对象Spry菜单栏，输入相应文字，如图3.1所示：

图3.1主页头部与导航部分

3.3布局页面——主页头部与导身航部分

1）首先根据页面要展示内容的多少，在Photoshop中新建一个适合的网页宽度和长度的文件。

在画布上按自己的想法结合实际内容，用各图形工具在画布上画上整个网页基本的布局。

2）用Photoshop把所有的图片进行修减，进行切片，将要动态显示的地方切出来，还有就是大的图片要切一下，能提高网页读取速度。

3）主页上部分的制作。

上部分分为左中右三部分，左边介绍南通美食、旅游景点两个部分。

左边插入五行一列表格，并插入相应的图片，输入相应的文字进入超链接。

中间的栏目插入二十行一列的表格，再插入一个制作好的FLASH，图片以及输入相应的文字并创建相应的超链接。

在最右边插入一行一列的表格并在代码相应位置插入滚动图片特效的代码，实现图片至下而上滚动，鼠标移到图片时滚动停留的功能，在网站首页顶端插入滚动的欢迎字幕，方法同上。

如图3.2所示：

图3.2主页上部分

主页中间部分的制作。

这部分主要显示南通的介绍，包括购物、宾馆、美食、愉乐等信息，左面插入4张图片，这部分的布局比较简单，为五行一列的表格布局，每一小部分都含有小图片，不同的是图片在不同的部分排在顶端和底部，每个图片之间再插入相应的表格，在表格中插入图片与输入文字即可，中间插入相应图片，输入相应的文字，字体用蓝色，各个小部分的制作过程基本相同，制作完成的缩略图如图3.3所示：

图3.3主页中间部分

主页下部分的制作。

插入3行1列的表格并设置背景颜色，输入相应的文字，，中间插入8张用PS修过的旅游图片，再加上超链接即可，右边也是插入图片主页下部分的制作完成。

如图3.4所示：

图3.4页页下部分

3.4主页底部细节与调整

最后完成的就是主页底部了，底部包括一些链接、版权与联系方式等内容，用几行表格插入相应的文字，再调整一下文字的显示位置，插入三行一列的表格，插入相应的图片，这样主页的底部部分也制作完成如图3.5所示。

图3.5主页底部

整个主页制作完成后再进行整体的位置调整及优化以达到浏览舒适的效果，整个网站有多个页面，这里只描述制作一个主页的过程，后面的用类似的方式即可完成。

4动态网页的设计

4.1留言板的设计

为了能让大家有一个相互探讨、分享知识产权方面的心得与经验的平台，为了能让广大人群更好、更深刻的了解知识产权，为此，我们特别设立了“留言板”这一栏目，如果你有什么和知识产权有关的问题或者想法，可以在这里留言。

总体来说，留言板功能是这个网站的主要功能之一，也是这个网站的亮点之一，它让整个网站的功能得到提升，使其不单单只是一个简单的单纯的信息发布的网站，增加了互动环节。

如图4.1所示：

图4.1留言板的界面

4.2数据库的设计

使用Access2003实现关系型数据库，以下是数据库中几个主要的表的设计如图4.2所示：

1）登录注册管理

图4.2登录注册表

2）留言板

存储了留言的档案，主要实现用户信息管理、留言及回复等。

如下4.3图所示：

图4.3留言表

接下来我们要测试一下数据库，打开Dreamweaver中liuyan.asp,点击右角数据库下面的“+”号，打开自定义连接字符串对话框，在连接名称后输入”conn”,在连接字符串后输入"Driver={MicrosoftAccessDriver（*.mdb）};DBQ=F:

\yumeisong\data\liuyan.mdb"，点击测试按钮，如图4.4所示：

图4.4自定义连接字符串

测试成功后，数据库下面会多一个liuyanbiao1,并将内容插入到留言板中，如图4.5所示

图4.5liuyanbiao1

点击数据库右边的“绑定”按钮，点“+“下面的记录集（查询），打开记录集对话框，如图4.6所示：

图4.6记录集

在“名称”后面输入“rs”，在“连接”后面选择“conn”,在数据项下面选择表格中的“liuyanbiao1”然后选择“SELECT”最后测试一下。

如图4.7所示：

图4.7测试SQL指令

这样留言板的制作也基本完成。

4.3系统实现代码

1）滚动文字特效

南通旅游网欢迎您！

2）滚动图片特效

style="WIDTH:

220px;HEIGHT:

815px;OVERFLOW:

hidden"

id=deeo>

南通博物院

文峰公园

海底世界