基于HTML5+CSS3+JavaScript的旅游攻略网站设计

季帅 刘芳

摘 要：随着互联网技术的发展，各行各业的信息化、智能化水平有了大幅提升。为人们提供缓解工作压力、陶冶精神情操服务的旅游业也进入了“互联网+”时代。本文基于HTML5、CSS3、JavaScript技术构建旅游攻略平台，实现PC端和移动端的无缝衔接，从而方便人们快捷地查找旅游资源并进行旅行规划。

关键词：HTML5+CSS3+JavaScript;旅游攻略;网站设计

随着我国社会经济的不断发展，一方面，人们的生活已经不再是简单的解决温饱问题，越来越多的人在解决生活基本需求的同时，也在追求精神层面的满足;另一方面，我国的交通也变得更加便捷，加速了旅游业的发展，使人们出门旅行变得更方便。但是在日常紧张的工作生活中，人们又往往没有更多的空闲时间去了解种类和数量繁多的旅游景点信息。为此，有必要设计开发一款帮助人们方便快捷地查找旅游资源并进行旅行规划的软件平台，这不但能满足人们日益多元化的出行需求，而且能提升旅游服务的质量。

一、需求分析

现阶段国内具有的类似携程网之类的旅游网站，虽然能满足大多数人的出游需求，但这一类的网站主打旅行购票、以及线路方案的推荐，涉及旅游攻略方面的内容并不多，因此，需要实现一款针对旅游攻略的、能兼顾PC端和移动端的网站，该网站还要能记录用户注册信息及其攻略方案。另外，由于旅游受众面很广，既有年轻人，也有中老年人，系统操作水平参差不齐，所以，要求系统功能结构布局合理，界面操作简洁、易用，用户通过系统导航即能完成操作[1]。

二、功能设计

通过需求分析，可将系统设计为首页、景区介绍、旅游攻略、特色活动、个人中心五个部分，其功能模块如图1所示。

（1）首页：在用户进入主页面时会看到主导航栏，其中显示首页、景区介绍、旅游攻略、特色活动等链接;而在导航栏下为部分旅游景区、旅游攻略、旅游活动信息的展示，以及热门游记，便于用户对旅游景点有个初步的了解。

（2）景区：该模块展示按地区分类的景区景点介绍，如景点名称、类别、图片、门票价格等具体信息，以及推荐的游玩季节和天数，同时还可查看景区动态和通知公告。

（3）攻略：涵盖了海岛、古镇、湖泊、山川、草原等特色景点的介绍，以及与之相关的旅游项目资讯、旅游路线规划、酒店宾馆和美食等方面的攻略。

（4）活动：用户通过该模块可以了解正在进行或往期举办的摄影爱好、结伴同游、自由出行、主题旅游等特色活动，以便于选择是否要参与。

（5）个人中心：用户登录后可以进入自己的用户中心，在这里用户能够查看和修改自己的信息，同时还可查看自己选择或收藏的旅游景点、攻略及其活动。

三、页面设计

（一）页面整体布局

由功能设计可知，本旅游平台一共包括首页、景区介绍、旅游攻略、特色活动、个人中心五大功能模块，除首页外的各功能模块都由若干页面组成，并可通过首页链接到各模块主页面进行浏览，在子页面也可以通过链接实现页面之间的相互跳转[2]。

而在页面整体布局上，首页和各模块主页面都使用HTML5的布局元素header、article、section、nav、aside、footer元素進行页面结构的合理划分，并通过CSS3对页面各部分样式进行设置，真正实现页面结构与表现分离，便于管理与维护。

（二）页头和页脚

页头部分由header元素声明，由背景图片和主、次2个导航组成。这里header包括两个nav元素，第一个nav元素作为主导航，第二个nav元素作为次导航，其中主导航菜单包括：首页、景区介绍、旅游攻略、特色活动。

页脚部分用footer元素声明，其中包含了4个div元素，在每个div容器中放置了一个无序列表，列表项中内容主要是各类旅游网站的链接。

另外，整个网站的页头导航和页脚版权信息与首页的设置大体相同，以保持网站设计风格统一。其样式的设置也是借助CSS3进行布局。

（三）网站全局样式

设计网页时，常常需要为网站设置一个全局样式，如背景、边界、字体、字号和行高等属性参数，这样，既可以保证不同页面有相对一致的风格，也可以保证网页在不同浏览器中稳定的显示效果[3]。下面为本网站有关网页对齐、垂直方向滚动、背景图像和HTML5结构元素的全局样式代码。

* { margin： 0; padding： 0; }

html { overflow-y： scroll; }

body { text-align： center; }

header article section footer nav aside{

display：block;

}

四、主要模块的实现

（一）首页

页面包含旅游景区的展示、旅游攻略信息的展示、旅游活动的展示（以及热门游记）等功能。着重于旅游信息的及时获取及攻略信息的展示。其中有许多交互效果：如鼠标滑过一级导航的高亮及内容切换效果。技术特点：代码中通过使用不同的div，区分不同功能区域块，并给不同的div区域块添加不同的id来区分不同的功能点击事件。

另外，在首页还提供了用户登录/注册的入口链接。点击注册链接后，会进入注册页面，对用户信息进行注册;而

（二）注册与登录

（1）注册：注册表单页面要求用户填写用户名、密码、确认密码、手机号和邮箱进行注册。提交注册信息时，如果有必填项未填写则提示用户填写相应项，当用户名已存在时提示用户该用户名已存在。

（2）登录：用户可通过注册的用户名和密码登录系统。登录成功后跳转至首页，并显示当前登录的用户名。

注册和登录页面均使用HTML5的表单元素来搭建，并通过定位实现布局结构，以提高页面交互效率。

（三）旅游攻略

在首页点击攻略链接后，会进入到攻略页面。攻略主页面包括侧边二级菜单栏（有热门推荐、旅行游记、旅游问答等栏目），以及按地区划分的旅游攻略列表和按月份划分的旅游攻略列表。其中侧边二级菜单栏放置在section元素中，section元素是一个具有引导和导航作用的HTML5结构元素。另外，本页面除提供各景区的攻略入口链接外，着重通过列表标签和选择器来实现交互效果，下面对页面中轮播图的实现作一介绍。

轮播图是现在常用的一种网站内容的展现形式，其提供了多张图片的轮播效果，以造成一定的视觉吸引性。本模块通过nav元素中放置了3个div容器，每个div容器中又包含了图片链接、标题以及切换图片按钮。其中，图片的切换功能由JavaScript定义的行为实现，初始时显示第1幅图片，图片的轮播使用定时函数setTimeout（），并通过递归调用change_img（）方法切换图片。下面是进行图片切换的JavaScript代码：

var t1 = 0; //打开页面时等待图片载入的时间，将其设置为0，单位为秒

var t2 = 5; //图片轮播的间隔时间

var num = 3; //轮播图个数

var n = 1;//当前焦点

var m =null;

t = setTimeout（'change_img（）'， t1*1000）;

function change_img（）{

setFocus（n）;

t = setTimeout（'change_img（）'， t2*1000）;

}

function setFocus（i）{

if（i>num）{n=1;i=1;}

m？document.getElementById（'focusPic'+m）.style.display='none'：'';

document.getElementById（'focusPic'+i）.style.display='block';

m=i;

n++;

}

（四）特色活动

本模块通过使用三个div元素，分别对应快速搜索、滑动Tab和在线咨询三个版块的实现。其中快速搜索可根据线路名称、行程目的地、行程天数、行程起始日期、终止日期查询各特色旅游活动信息;滑动Tab包含旅游快讯和优惠活动两个选项页，方便用户查看和选择特色旅游活动;而在线咨询则通过HTML5表單元素实现实时旅游咨询服务。

（五）个人中心

用户登录成功后点击首页中的用户名链接，即可跳转到“个人中心”页面，该页面分为页头、菜单栏、正文和页脚4个部分。其中页头包含网站的Logo和导航栏，菜单栏包含修改密码、修改联系方式、我的攻略、我的收藏4个菜单项，正文部分为相应菜单的用户内容，页脚为版权声明。

五、结束语

本文基于HTML5、CSS3、JavaScript技术构建旅游攻略平台，不但为人们提供了方便，而且通过HTML5新增属性元素实现跨平台使用，通过CSS3样式设置不仅实现了结构与表现的分离，而且提高了网页的性能。而使用JavaScript代码则不仅使得网页内容的呈现更为生动，而且增强了用户的交互体验。

参考文献：

[1]陈舟劢.贵州旅游景点智能推荐系统的设计与实现[D].贵州大学，2021.

[2]冯秀玲，张杨娟.基于HTML5+Css3+JavaScript的山西旅游平台搭建[J].中国管理信息化，2021，24（19）：155-157.

[3]刘德山，章增安，孙美乔.HTML5+CSS3 Web前端开发技术[M].北京：人民邮电出版社，2017.11.