旅游网站设计.doc

Web网页设计报告2012 年 12 月01 日目 录一 引言31.1网站建设概述31.2规划思路3二 网站总体分析与设计42.1系统的功能结构42.2 系统的功能特点42.3 页面设计5三 各个功能模块的实现53.1 信息记录53.2 信息浏览功能63.3具体实现7四 总结8一 引言新的世纪，互联网进入一个崭新的阶段，信息化的发展带动其它产业的发展，各行业都将与它进行更深入的融合和渗透。，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。为了适应知识经济社会的需要，促进学习与交流。网上交流和协作的功能比较普遍；技术管理和资源管理受到重视。随着互联网的普及和发展，必将有越来越多的企业及个人在英特网上拥有自己的网站。网站建设成为企业 形象宣传、产品展示推广、客户沟通的最新最快捷的桥梁；成为个人展示自我，与世界交流的重要平台。越来越多的人已开始从对互联网的认知阶段进入到认同和行动阶段。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了更好的协作，更多的与外界交流新的信息，和他人共享信息，特构建旅游网站。1.1网站建设概述此次设计的项目是构建一个九寨沟旅游网站，有个人信息记录系统,网站主要实现旅游信息查询系统部分,使访问者可查询旅游有关的信息。1.2规划思路网站的基本风格是简洁明快的界面、实用的旅游讯息和个性化的社区。网页设计的构思是：(1) 主页上有标志物，能让浏览者一眼就知道是主页。(2) 用到CSS模板制作网页，这样子的网页比较有一致性。(3) 各个页面上都有漂浮物，运用JavaScript实现动态效果。(4) 设计渐进显示的页面，每个图标都应配有文字说明显示，这样做可以减少等待时不耐烦的心情。(5）图象的应用时要注意至多只用一到两个主要的较大图象，并辅以一系列较小的图标。(6）在网页设计中，设有导航栏，使得层次清晰，便于浏览者浏览。(7) 内容，内容是一个网站的灵魂。要使网站脱颖而出,须注意其组织的条理性、内容的充实性和新鲜性,以区别于其它同类网站,让上网者觉得物有所值。(8）多媒体、视频，音乐等综合功能。形式是一个网站内容的外在表现。其界面的质量直接影响访问者的主观感受。网页设计要体现专业特点,富有特色,给人耳目一新的感觉。基于以上所需实现的功能，所以我选择了ASP技术结合Macromedia Dreamweaver MX 2004软件架构个人网站。二 网站总体分析与设计 2.1系统的功能结构旅游网站主页模型如图所示。九寨沟旅游网主页九寨沟简介自然风光出行指南旅游贴士风土人情特产指南信息记录资源浏览联系我们通过进入主页及下级网页,可以实现对旅游资源和旅游服务设施的浏览以及个人信息的录入等功能。本旅游信息网站的功能是针对旅游者而设计的,有以下两种功能:1. 查看浏览功能进行旅游交通、住宿等的查询。2. 信息记录系统本系统的用户。2.2 系统的功能特点（1）操作简单、界面友好：完全控件式的页面布局，使得旅游信息的录入工作更简便；许多选项包括信息类别、来源部门等只需要点击鼠标就可以完成；另外，跟踪出现的提示信息也让用户随时清楚自己的操作情况。（2）即时可见：对信息的处理,将立即在主页的对应栏目显示出来，达到即时发布、即时见效的功能。（3）功能完善：完整地实现了网站对即时旅游信息的要求。2.3 页面设计下面介绍一下网站中的几个网页的制作。九寨旅游的主页（20.html），背景色采用蓝色，蓝色的背景可以给人天然的感觉，无疑是最好的选择。图片的下方为导航栏，导航栏下方是图片与链接页，正下方是用Photoshop处理过的图片。左边的有天气查询链接与景点介绍，右边是一些特产与旅社的介绍。这样制作丰富了页面内容，使整个页面条理清晰。出行指南页面（26.html），背景色与主页保持一致。这一页的主要内容是有用到层的隐藏。整个页面包括线路与交通等信息，清晰有致，比较大方，浏览者可以清楚的看到九寨沟的线路与景点。 个人信息记录页面（25.html），要求游客输入个人信息包括登录名性别，身份证号等信息，方便管理用户资料。所有页面整齐划一，设计风格保持一致，加上蓝色的背景，给人简洁、明了、大方的感觉。三 各个功能模块的实现3.1 信息记录进入网站的游客，能浏览网页并进行个人信息录入。 页面的设计：3.2 信息浏览功能这是该网站的主要功能,用于各种与旅游有关的信息浏览:(1) 通过鼠标选择就可获得与之相关的信息;(2) 根据用户给定的条件（按按名称、按交通路线、按距离、按区域等）相关信息显示出来。通过以上方式,游客就可以进行旅游资源查看: (1) 简介与自然风光：通过图片与视频的介绍，让游客可以快速浏览到信息。(2) 出行指南：进入九寨沟的线路以及交通道路状况。根据游客需要,可分类查看到九寨沟的各景点的地理位置、名称、乘车路线等信息。(3) 旅游贴士：气候信息以及最佳的旅游时间,与天气网站相连旅客可及时查询到本地各旅游景区当天的气温、污染指数等信息,为出游作好准备。并给出旅客一些注意事项等信息。(4) 特产购物信息：旅客可查看到名优特产、小吃等的名称及其介绍资料,并配以声音、动画、图像等多媒体信息。(5) 资源浏览：推荐的一些游记以及FLASH动画，游客可下载浏览。(6) 其他信息：如旅客可查询到旅行社团、旅馆、旅游监督机构等服务机构的名称、地址,及其文字资料、图片、图像等信息。页面的设计：3.3具体实现（1）CSS模板（部分代码）：bodybackground-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 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-repeat 5px 7px; #middlebackground-color:#FFFFFF;margin:0px 0px 0px 2px;padding:5px 0px 0px 0px;width:400px; float:left;#middle divmargin-left:5px;margin-right:5px;position:relative;#rightfloat:left;margin:0px 0px 1px 2px;width:176px;background-color:#FFFFFF;color:#d8ecff;#right divposition:relative;margin-left:5px;margin-right:5px;background-color:#5ea6eb;（2）主页的部分代码：首页九寨沟简介自然风光出行指南旅游贴士风土人情特产指南信息记录资源浏览联系我们四 总结旅游网站的开发涉及到各方面的知识。技术是为用户服务的,网站更要体现对用户的服务性,因为这关系到旅游信息传播的及时性和高效性Macromedia Dreamweaver MX 2004软件给网页的制作带来了很大的便利。优缺点：比较明确，风格统一。并运用了一些其它的设计软件加以辅助设计。使网页更加具有动感，形式丰富。就内容而言，比较丰富。大量运用了图片，并进行了文字说明，做到了图文并茂。但是由于我们刚接触网页制作，做出的效果还是有些稚嫩的，需要以后不断的实践。