旅游网站设计

1、1/ 7Web网页设计报告2012 年 12 月 01 日目录引言.21.1 网站建设概述.2.1.2 规划思路.3.二 网站总体分析与设计.32.1 系统的功能结构.3.2.2 系统的功能特点.4.2/ 72.3 页面设计.4.三 各个功能模块的实现.43.1 信息记录.4.3.2 信息浏览功能.5.3.3 具体实现.6.四 总结引言新的世纪，互联网进入一个崭新的阶段，信息化的发展带动其它产业的发 展，各行业都将与它进行更深入的融合和渗透。，互联网成为人们快速获取、 发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重 要的作用。为了适应知识经济社会的需要，促进学习与交流。网

2、上交流和协作 的功能比较普遍；技术管理和资源管理受到重视。随着互联网的普及和发展， 必将有越来越多的企业及个人在英特网上拥有自己的网站。3/ 7网站建设成为企业 形象宣传、产品展示推广、 客户沟通的最新最快捷的桥梁； 成为个人展示自我， 与世界交流的重要平台。 越来越多的人已开始从对互联网的认知阶段进入到认 同和行动阶段。Internet上发布信息主要是通过网站来实现的， 获取信息也 是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下 载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、 企事业单位信息化建设中的重要组成部分， 从而倍受人们的重视。

3、 为了更好的 协作，更多的与外界交流新的信息，和他人共享信息，特构建旅游网站。1.1 网站建设概述此次设计的项目是构建一个九寨沟旅游网站，有个人信息记录系统，网站主要实现旅游信息查询系统部分，使访问者可查询旅游有关的信息。1.2 规划思路网站的基本风格是简洁明快的界面、实用的旅游讯息和个性化的社区。网页设计的构思是：(1)主页上有标志物，能让浏览者一眼就知道是主页。用到CSS莫板制作网页，这样子的网页比较有一致性。(3)各个页面上都有漂浮物，运用JavaScript实现动态效果。(4)设计渐进显示的页面，每个图标都应配有文字说明显示，这样做可以减少 等待时不耐烦的心情。(5)图象的应用时要注意

4、至多只用一到两个主要的较大图象，并辅以一系列较 小的图标。(6)在网页设计中，设有导航栏，使得层次清晰，便于浏览者浏览。(7)内容，内容是一个网站的灵魂。要使网站脱颖而出，须注意其组织的条理性、 内容的充实性和新鲜性，以区别于其它同类网站，让上网者觉得物有所值。(8)多媒体、视频，音乐等综合功能。形式是一个网站内容的外在表现。其界 面的质量直接影响访问者的主观感受。 网页设计要体现专业特点，富有特色,给人耳目一新的感觉。基于以上所需实现的功能，所以我选择了ASP技术结合Macromedia Dreamweaver MX 200欲件架构个人网站。二 网站总体分析与设计2.1 系统的功能结构旅游网

5、站主页模型如图所示九寨沟旅游网主页4/ 7通过进入主页及下级网页，可以实现对旅游资源和旅游服务设施的浏览以及 个人信息的录入等功能。本旅游信息网站的功能是针对旅游者而设计的，有以下 两种功能：1.查看浏览功能进行旅游交通、住宿等的查询。2信息记录系统本系统的用户。2.2 系统的功能特点（1）操作简单、界面友好：完全控件式的页面布局，使得旅游信息的录入工作 更简便；许多选项包括信息类别、来源部门等只需要点击鼠标就可以完成；另 外，跟踪出现的提示信息也让用户随时清楚自己的操作情况。（2）即时可见：对信息的处理，将立即在主页的对应栏目显示出来，达到即时 发布、即时见效的功能。（3）功能完善：完整地实

6、现了网站对即时旅游信息的要求。2.3 页面设计下面介绍一下网站中的几个网页的制作。九寨旅游的主页（20.html），背景色采用蓝色，蓝色的背景可以给人天然 的感觉，无疑是最好的选择。图片的下方为导航栏，导航栏下方是图片与链接页，正下方是用Photoshop处理过的图片。左边的有天气查询链接与景点介绍，右边 是一些特产与旅社的介绍。这样制作丰富了页面内容，使整个页面条理清晰。出行指南页面（26.html），背景色与主页保持一致。这一页的主要内容是 有用到层的隐藏。整个页面包括线路与交通等信息，清晰有致，比较大方，浏览 者可以清楚的看到九寨沟的线路与景点。个人信息记录页面（25.html），要求游

7、客输入个人信息包括登录名性别， 身份证号等信息，方便管理用户资料。所有页面整齐划一，设计风格保持一致， 加上蓝色的背景，给人简洁、明了、大方的感觉。5/ 7三各个功能模块的实现3.1 信息记录进入网站的游客，能浏览网页并进行个人信息录入。 页面的设计：3.2 信息浏览功能这是该网站的主要功能，用于各种与旅游有关的信息浏览：(1)通过鼠标选择就可获得与之相关的信息；(2)根据用户给定的条件(按按名称、按交通路线、按距离、按区域等)相 关信息显示出来。通过以上方式，游客就可以进行旅游资源查看：(1)简介与自然风光：通过图片与视频的介绍，让游客可以快速浏览到信息。(2)出行指南：进入九寨沟的线路以及

8、交通道路状况。根据游客需要，可分类查看到九寨沟的各景点的地理位置、名称、乘车路线等信息。(3)旅游贴士： 气候信息以及最佳的旅游时间，与天气网站相连旅客可及时 查询到本地各旅游景区当天的气温、污染指数等信息，为出游作好准备。 并给出旅客一些注意事项等信息。(4)特产购物信息：旅客可查看到名优特产、小吃等的名称及其介绍资料，并配以声音、动画、图像等多媒体信息。资源浏览：推荐的一些游记以及FLAS动画，游客可下载浏览。(6)其他信息： 如旅客可查询到旅行社团、 旅馆、 旅游监督机构等服务机构 的名称、 地址，6/ 7及其文字资料、图片、图像等信息。页面的设计：7/ 73.3 具体实现(1)csS莫

9、板(部分代码)：body background-color:#2286c6; margin:0px;padding:0px;text-align:center;font-size:12px;font-family:Arial, Helvetica, sans-serif;#containerposition:relative;margin:0px auto 0px auto;width:780px;text-align:left;#leftfloat:left;width:200px;background-color:#FFFFFF;margin:0px;padding:0px 0px 5px

10、 0px;color:#d8ecff;#left div h3font-size:12px;padding:4px 0px 2px 15px;color:#003973; margin:0px 0px 5px 0px;background:#bbddff url(icon2.gif) no-repeat5px 7px;#middle background-color:#FFFFFF;margin:0px 0px 0px 2px;padding:5px 0px 0px 0px;width:400px; float:left;#middle div margin-left:5px;margin-r

11、ight:5px; position:relative;#rightfloat:left; margin:0px 0px 1px 2px;width:176px;background-color:#FFFFFF;color:#d8ecff;#right div position:relative;margin-left:5px;8/ 7margin-right:5px;background-color:#5ea6eb;出行指南旅游贴士四 总结旅游网站的开发涉及到各方面的知识。技术是为用户服务的,网站更要体现 对用户的服务性,因为这关系到旅游信息传播的及时性和高效性Macromedia Dreamweaver MX 2004软件给网页的制作带来了很大的便利。优缺