旅游网站设计

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

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

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

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

5、寨沟旅游网主页*九自出旅风特信资联然寨风行游土产息源系沟光指贴人指记浏我简南士情南录览们介通过进入主页及下级网页，可以实现对旅游资源和旅游服务设施的浏览以及个人信息的录入等功能。本旅游信息网站的功能是针对旅游者而设计的，有以下精选资料，欢迎下载两种功能 ：1.查看浏览功能进行旅游交通、住宿等的查询。2?信息记录系统本系统的用户。2.2 系统的功能特点（ 1） 操作简单、界面友好：完全控件式的页面布局，使得旅游信息的录入工作更简便；许多选项包括信息类别、来源部门等只需要点击鼠标就可以完成；另外，跟踪出现的提示信息也让用户随时清楚自己的操作情况。（ 2） 即时可见：对信息的处理 ，将立即在主页的对

6、应栏目显示出来，达到 "即时 发布、即时见效 "的功能。（ 3） 功能完善：完整地实现了网站对即时旅游信息的要求。2.3 页面设计下面介绍一下网站中的几个网页的制作。九寨旅游的主页（ 20.html ），背景色采用蓝色，蓝色的背景可以给人天然的感觉，无疑是最好的选择。图片的下方为导航栏，导航栏下方是图片与链接页，正下方是用 Photoshop 处理过的图片。左边的有天气查询链接与景点介绍，右边是一些特产与旅社的介绍。这样制作丰富了页面内容，使整个页面条理清晰。出行指南页面（ 26.html ），背景色与主页保持一致。这一页的主要内容是有用到层的隐藏。整个页面包括线路与交通等

7、信息，清晰有致，比较大方，浏览者可以清楚的看到九寨沟的线路与景点。个人信息记录页面（25.html ），要求游客输入个人信息包括登录名性别，身份证号等信息，方便管理用户资料。所有页面整齐划一，设计风格保持一致，加上蓝色的背景，给人简洁、明了、大方的感觉。三各个功能模块的实现3.1 信息记录进入网站的游客，能浏览网页并进行个人信息录入。页面的设计：精选资料，欢迎下载个人棺息记录3.2 信息浏览功能这是该网站的主要功能，用于各种与旅游有关的信息浏览：(1)通过鼠标选择就可获得与之相关的信息；(2) 根据用户给定的条件 ( 按按名称、按交通路线、按距离、按区域等) 相 关信息显示出来。通过以上方式

8、，游客就可以进行旅游资源查看：(1) 简介与自然风光：通过图片与视频的介绍，让游客可以快速浏览到信息。(2)出行指南：进入九寨沟的线路以及交通道路状况。根据游客需要，可分类查看到九寨沟的各景点的地理位置、名称、乘车路线等信息。(3) 旅游贴士：气候信息以及最佳的旅游时间，与天气网站相连旅客可及时 查询到本地各旅游景区当天的气温、污染指数等信息 ，为出游作好准备。 并给出旅客一些注意事项等信息。(4)特产购物信息：旅客可查看到名优特产、小吃等的名称及其介绍资料，并配以声音、动画、图像等多媒体信息。资源浏览：推荐的一些游记以及FLAS 动画，游客可下载浏览。(6)其他信息：如旅客可查询到旅行社团、

9、旅馆、旅游监督机构等服务机构的名称、地址，及其文字资料、图片、图像等信息。精选资料，欢迎下载页面的设计：精选资料，欢迎下载3.3 具体实现(1)CSS 莫板( 部分代码 ) ：bodybackgrou nd-color:#2286c6;margi n: Opx;padd in g:0px;text-alig n:ce nter;fon t-size:12px;fon t-family:Arial, Helvetica, san s-serif;#containerpositi on:relative;margi n: 0px auto 0px auto;width:780px;text-ali

10、g n:left;#leftfloat:left;width:200px;backgro un d-color:#FFFFFF;margi n:0px;padd in g:0px 0px 5px 0px;color:#d8ecff;#left div h3fon t-size:12px;padd in g:4px 0px 2px 15px;color:#003973;(2) 主页的部分代码 : <div id="c on tai ner">margi n: 0px 0px 5px 0px;backgro un d:#bbddffurl(ic on 2.gif)

11、no-repeat 5px7px; #middlebackgro un d-color:#FFFFFF; margin: 0px0px 0px 2px; padd in g:5px0px 0px 0px; width:400px;float:left;#middle divmargi n-left:5px; margin-right:5px; positi on:relative;#rightfloat:left; margin: 0px 0px1px 2px; width:176px;backgro un d-color:#FFFFFF;color:#d8ecff;#right divpos

12、iti on:relative; margi n-left:5px;margin-right:5px; backgroun d-color:#5ea6eb;精选资料，欢迎下载<div id="banner"><img<li><a href="#">风土人 情src="banner.jpg"></div></a></li><div id="globallink"><li><a href="24.

13、html"><ul>特产指南 </a></li><li><a href="20.html"><li><a href="25.html">信息记录 </a></li>首页 </a>v/li><li><a href="21.html"><li><a href="27.html">资源浏览 </a></li>九

14、寨沟简介 </a></li><li><a href="22.html"><li><a href="#">联系我自然风光 </a></li>们 </a></li><li><a href="26.htm"></ul>出行指南 </a></li><br><li><a href="23.html">旅游贴士 </a></li></div>四 总结旅游网站的开发涉及到各方面的知识。技术是为用户服务的, 网站更要体现对用户的服务性, 因为这关系到旅游信息传