基于Bootstarp实现的爱旅行网站

到山东找蓝翔

发布日期: 2021-07-24 09:52:07 浏览量: 72
评分:
star star star star star star star star star star_border
*转载请注明来自write-bug.com

一、引言

由于时下大多数人生活优越,交通工具方便快捷,信息获取方便,导致旅游业迅猛发展。为了方便旅游爱好者在网上获取信息,有效地掌握各大旅游景点的详细情况,我们开发出一套适合于旅游者在网络上快速获取信息的管理系统。通过本系统,出行者可以查看某个地区的全部景点列表,了解某个景点的详细情况,自驾车、公交线路,获取景区内的旅游地图等。该系统为游客提供全面的旅游服务.

二、需求分析

通过本系统,出行者可以查看某个地区的全部景点列表,了解某个景点的详细情况,自驾车、公交线路,获取景区内的旅游地图等。该系统为游客提供全面的旅游景点查询服务。本系统的功能主要包括:旅游查询、酒店查询、交通查询、景点查询、、用户管理。

所用技术:Bootstarp、HTML、CSS

三、网站结构设计

3.1 总体设计

该网站由首页、酒店浏览页面、客服中心、帮助中心页面、登录页面、注册页面六个页面组成。

3.2 详细设计

3.2.1 首页

该页面的布局由顶部导航栏、搜索框、菜单导航栏、广告轮播图、服务搜索、主体内容、底部七个部分组成。主体内容又由旅游信息、酒店信息、机票信息、用车、玩乐五个部分组成。布局如下图。

3.2.2 酒店浏览

该页面的布局由顶部导航栏、搜索框、菜单导航栏、广告图、酒店查询、酒店服务、酒店推荐、底部八个部分组成。布局如下图。

3.2.3 客服中心

该页面的布局由顶部导航栏、搜索框、菜单导航栏、主体内容、底部五个大部分组成。其中主题内容由在线咨询、热门问题、常见问题三个部分组成。布局如下图。

3.2.4 帮助中心

该页面的布局由顶部导航栏、搜索框、菜单导航栏、主体内容、底部五个大部分组成。其中主题内容由问题搜索框、问题分类、快速引导三个部分组成。布局如下图。

3.2.5 登录页面

该页面由 Logo 标志、主体内容、底部三个大部分组成。主体内容由背景图、登录框两个部分组成。布局如下。

3.2.6 注册页面

该页面由 Logo 标志、主体内容、底部三个大部分组成。主体内容由背景图、注册框两个部分组成。布局如下。

四、项目效果实现

4.1 首页

4.1.1 整体效果

4.1.2 功能实现

顶部导航栏

通过单击“你好,请登录”、“免费注册”以及“客服中心”三个组件,可以分别转到登录页面、注册页面以及客服中心。效果图如下。

菜单导航栏

点击带有倒三角形的一级菜单,可以切换出其对应的二级菜单。同时点击“酒店”的二级菜单中的“国内酒店”可以转到酒店浏览页面。效果图如下。

服务搜索

点击不同的标签页可以进行不同的搜索,目前只实现了静态。效果图如下。

快速定位

通过点击左边的 Affix 插件,可以快速定位到右边与其相对应的内容。效果图如下。

4.2 酒店浏览

4.2.1 整体效果

4.2.2 功能实现

顶部导航栏

通过单击“你好,请登录”、“免费注册”以及“客服中心”三个组件,可以分别转到登录页面、注册页面以及客服中心。效果图如下。

菜单导航栏

点击带有倒三角形的一级菜单,可以切换出其对应的二级菜单。同时点击“酒店”的二级菜单中的“国内酒店”可以转到酒店浏览页面。效果图如下。

酒店搜索

通过输入目的地名称、酒店名称、入住时间、退房时间、房间数、房间人数进行酒店查询。目前只实现静态效果。

酒店推荐

点击不同的标签页,可以切换不同的内容。

4.3 客服中心

4.3.1 整体效果

4.3.2 功能实现

顶部导航栏

通过单击“你好,请登录”、“免费注册”以及“客服中心”三个组件,可以分别转到登录页面、注册页面以及客服中心。效果图如下。

菜单导航栏

点击带有倒三角形的一级菜单,可以切换出其对应的二级菜单。同时点击“酒店”的二级菜单中的“国内酒店”可以转到酒店浏览页面。效果图如下。

热门问题搜索

输入关键词可以查询相关问题。目前只实现静态效果。效果图如下。

4.4 帮助中心

4.4.1 整体效果

4.4.2 功能实现

顶部导航栏

通过单击“你好,请登录”、“免费注册”以及“客服中心”三个组件,可以分别转到登录页面、注册页面以及客服中心。效果图如下。

菜单导航栏

点击带有倒三角形的一级菜单,可以切换出其对应的二级菜单。同时点击“酒店”的二级菜单中的“国内酒店”可以转到酒店浏览页面。效果图如下。

折叠

通过使用 collapse 插件对问题分类进行折叠,点击某个问题就会显示其更加详细的问题分类。

问题详情

通过点击快速引导或问题分类里的相关问题可以查看其详情。

4.5 登录

4.5.1 整体效果

4.5.2 功能实现

目前只实现静态效果。

4.6 注册

4.6.1 整体效果

4.6.2 功能实现

目前只实现静态效果。

总结

经过这段时间的学习,我对网页设计方面的知识又增加了不少,这次我做的是一个以“旅游”为主题的网站,虽然代码敲到手酸,但看到作品成型时,心里还是有点成就感的。,在通过网上查找资料解决问题,可能没那么完美,也解决得差不多,不断地学习、思考、实践、提高,设计出的网页不论是外观还是内容,都会比前一次的好很多,通过这次网站设计,我对那些代码的使用更加熟练。

上传的附件 cloud_download 源代码.zip ( 2.73mb, 1次下载 ) cloud_download 爱旅行网站说明书.docx ( 3.71mb, 1次下载 )
error_outline 下载需要11点积分
eject