基于HCJB的旅游景点一体化平台自适应页面设计
2019-10-11肖丽利刘在欢
梁 弼，肖丽利，刘在欢
(1.四川文理学院 智能制造学院，四川 达州 635000；2.四川文理学院 科技处，四川 达州 635000)
0 引 言
随着智能手机、平板电脑、无线通信、物联网及Internet等技术的快速发展，信息化已渗入人类社会方方面面，旅游业正朝着信息化、多元化、科学化、自动化方向发展，尤其是Web技术及移动技术在旅游业的应用打破了传统旅游业的单位性、地域性和国界性，弥补了传统旅游模式中旅游目的地与游客之间存在的信息不对称等缺陷，并成为众多旅游景点、旅游企业和旅游管理部门竞相采用的方式。据查阅，有关旅游景点各种信息平台的研发已成为目前旅游行业以及软件行业的热门课题[1]。但大部分旅游景点Web平台要么适用于PC端，要么适用于移动端，很少同时适应两类不同的硬件设备及所安装的软件系统[2-3]。所以，构建一套基于PC端和移动端的旅游景点Web平台是必要的，其关键任务在于设计出自适应的Web前端页面。
自适应Web页面设计是指能使前端网页自适应并正确显示在不同终端设备上的一种新网页设计技术，即让同一张网页自动适应终端不同的屏幕大小，并根据屏幕长度和宽度自动调整其布局，从而实现“一次设计，普遍适用”的目标[4]。通过查阅相关文献，发现目前自适应页面技术主要有HTML5、CSS3、BootStrap、JavaScript及jQuery等，它们能有效解决网页跨平台跨浏览器兼容性、自适应性等问题[5-6]。因此，文中通过恰当融合目前主流的HTML5+CSS3+jQuery+BootStrap技术(即HCJB)来设计旅游景点一体化Web平台的前端页面，使其既支持不同大小的屏幕尺度又支持主流浏览器。并且，为了提高该旅游平台网页的自适应度，网页中元素节点的宽高均采用百分比(%)，头部采用固定(fixed)定位，其余元素节点采用相对(relative)定位。
1 HCJB相关技术简介
1.1 HTML5
HTML5是目前流行的一种用于创建网页的超文本标记语言，它是开发Web平台的奠基石，具有多种新特征，譬如语义特征、本地存储特征、设备兼容特征、连接特征、网页多媒体特征、三维图像特征以及即时更新特征等[7]。并且，HTML5当前得到网页设计人员广泛青睐的主要原因在于它的跨平台性非常强，同一个软件能兼容当前主流的平台[8]。譬如开发一套HTML5的游戏软件，它可以正确地运行在UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至还可以发放到Google Play上。
1.2 CSS3
CSS是一种用来表现HTML或XML等文件样式的计算机语言，不但可以静态地修饰网页而且可以动态地对网页各元素进行格式化，在网页制作时通过使用CSS技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。目前流行的CSS3是CSS技术的升级版本，它正朝着模块化发展，这些模块主要包括盒子模型、语言模块、列表模块、多栏布局、背景和边框、文字特效等。而且，CSS3具有很多新的特征，例如圆角效果、图形化边界、块阴影与文字阴影、渐变效果等[9]。
1.3 jQuery
jQuery是一个简洁的JavaScript框架，其设计倡导“编写更少的代码，实现更多的功能”。它对JavaScript常用的功能代码进行封装，提供了一种更为简便的JavaScript设计模式，并优化了HTML文档操作、动画设计以及Ajax异步交互等功能[10]。其核心特性包括：具有独特的链式语法和短小的多功能接口；具有灵活的CCS选择器，并可对CSS选择器进行扩充；具有便捷的插件扩展机制等。更为重要的是，jQuery对主流浏览器兼容性好，如IE 8.0+、FF 1.5+、Safari 2.0+、Chrome 9+、Opera 9.0+等。
1.4 Bootstrap
Bootstrap是当前流行的一个前端开源工具包，它基于HTML、CSS、JavaScript等技术，而且简洁灵活，这使得Web页面开发更加快捷。Bootstrap提供了良好的HTML和CSS规范，基于Less语言编写的CSS代码更易于扩展和维护。它包含了丰富的Web组件，如导航条、下拉菜单、按钮组及媒体对象等，通过灵活使用这些组件可以快速搭建一个漂亮的Web页面。而且自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了新的活力，主要包括模式对话框、标签页、滚动条和弹出框等[11]。
2 旅游景点自适应页面结构设计
2.1 自适应页面设计的核心
旅游景点一体化Web平台自适应网页设计的核心是CSS3引入的Media Query模块，其含义是自动探测终端设备的屏幕宽度，并根据屏幕宽度来加载对应的CSS文件。它类似于高级语言中的条件选择if语句，其作用是告诉浏览器根据不同的视口宽度来渲染网页[12]。譬如，若屏幕宽度小于400像素，则加载smallScreen.css文件。
media="screen and (max-device-width: 400px)"
href="smallScreen.css"/>
若屏幕宽度在400像素到600像素之间，就加载mediumScreen.css文件。
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="mediumScreen.css"/>
通过上述设计便快捷地实现了该旅游景点一体化Web平台网页对终端不同屏幕宽度的自适应功能。
2.2 自适应网页宽度设计
为了实现旅游景点一体化Web平台网页的自适应能力，首先需要将网页宽度设置为自动调整，即在旅游景点网页源码的头部
中加入viewport元标签，其代码为[13]。其中，viewport是网页默认的宽、高度。该代码表达的含义是网页宽度默认等于设备屏幕宽度，原始缩放比例设置为1.0，即网页初始大小占屏幕的100%。由于网页会根据当前终端设备屏幕宽度调整布局，所以旅游景点一体化Web平台的网页不能使用绝对宽度来布局，也不能使用具有绝对宽度的元素。具体来讲，CSS代码不能指定像素宽度(如width：**px;)，只能指定百分比宽度(如width：**%;)，或设置为自动(即width：auto;)，并将所用字体设置为相对大小(即font-size:**em;)。
2.3 自适应页面布局设计
旅游景点一体化Web平台自适应页面尽量采用弹性布局，它的主要思想是给予容器控制内部元素高度和宽度的能力。弹性布局的最大优点是若宽度太小容纳不下两个元素，后面的元素会自动滚动到前面元素的下方，而不会在水平方向溢出，避免了水平滚动条出现，进而增强用户体验性[14]。该平台页面使用flex布局的容器(flex container)，它内部的元素自动成为flex项目(flex item)。而且任何一个容器都可以指定为flex布局，例如.box{display:flex;}；同样，行内元素也可以使用flex布局，例如.box{display:inline-flex;}；但Webkit内核的浏览器则必须加上-webkit前缀，其关键代码如下：
.box{display:-webkit-flex;display:flex:}
.box{flex-wrap:wrap;}
3 旅游景点自适应页面元素设计
3.1 导航条的自适应设计
导航条是旅游景点一体化Web平台网页设计中不可缺少的部分，为了实现其自适应能力，文中采用Bootstrap集成好的导航条样式，它既能在PC端显示出完整的导航，也能在较小的移动端把导航自动收缩起来。当用户点击时就会自动展开，这样便能较好地兼容屏幕大小不同的终端设备。具体来讲，当浏览器视口的宽度小于@grid-float-breakpoint值时，导航条内部的元素变为折叠排列(即为移动设备展现模式)；当浏览器视口的宽度大于@grid-float- breakpoint值时，导航条内部的元素变为水平排列(即为非移动设备展现模式)。其核心源代码如下：
3.2 块状内容的自适应设计
该旅游景点一体化Web平台自适应网页中部分内容采用float流动布局，部分内容则采用Bootstrap的栅格布局。其中，在旅游资讯页面采用左右两部分的设计，对于不是很重要的模块内容让其在屏幕较大的PC端显示，而在移动端则将div中class设置为hidden-xs，其含义是让元素节点在屏幕宽度很小时就自动隐藏。具体可以参考表1中的参数设置[6,15]。
表1 不同大小屏幕的参数设置
3.3 内容字体的自适应设计
文字是网页中的重要元素，其字体效果直接影响着用户阅读体验。为了避免旅游景点一体化Web平台网页因设备屏幕大小不同导致内容字体太突兀、界面不美观，其页面文字采用CSS3引入的Media Query模块，对于不同尺寸的平板设备媒体查询关键代码如下：
媒体查询-小屏幕(平板，大于等于768 px)
@media (min-width:768px){
.tab-h2{font-size:26px;}
.tab-p{font-size:16px;}
.text h3{font-size:22px;}
.text p{font-size:15px;}
.tab2 .tab2-text{float:left;}
.tab2 .tab2-img{float:right;}}
媒体查询-小屏幕(平板，大于等于992 px)
@media (min-width:992px){
.tab-h2{font-size:28px;}
.tab-p{font-size:17px;}
.text h3{font-size:24px;}
.text p{font-size:16px;}}
媒体查询-小屏幕(平板，大于等于1 200 px)
@media (min-width:1200px){
.tab-h2{font-size:30px;}
.tab-p{font-size:18px;}
.text h3{font-size:26px;}
.text p{font-size:18px;}}
3.4 图片的自适应设计
除了导航条、文字等网页元素的自适应设计外，对于旅游景点一体化Web平台来讲旅游景点图片展示尤为重要。恰当灵活的景点图片展示能有效增强用户视觉感受，更能吸引用户亲自前往观赏，因此对网页中这些景点图片的自适应设计是非常必要的，即针对不同设备窗口大小来实现图片的自动缩放功能，其具体设计过程如下：
首先，设定景点图片百分比宽高度。
img{width:100%;height:100%;}
其次，通过jQuery获取屏幕大小，并动态设置景点图片的宽高[16]。
$(“img”).css(“height”,$(window).height()*50%);
$(“img”).css(“width”,$(window).width()*50%);
接着，根据CSS3媒体查询，为不同宽高的屏幕设置景点图片的宽高。
媒体查询-小屏幕(平板，大于等于768 px)
@media(min-width:768px){
img{width:400px;height:400px} }
媒体查询-小屏幕(平板，大于等于992 px)
@media(min-width：992px){
img{width:200px;height:200px} }
媒体查询-小屏幕(平板，大于等于1 200 px)
@media(min-width:1200px){
img{width:100px;height:100px} }
最后，使用Bootstrap的方法为景点图片添加class为img-responsive。
对于旅游景点一体化Web平台网页中其他元素的自适应设计(如音频、视频等)可以参考景点图片自适应来类似实现，而且HTML5提供了更多高质量的视频和音频流服务功能，在此就不再论述。
4 旅游景点自适应页面运行效果
通过上述内容完成了旅游景点自适应页面结构和元素设计后，便可得到旅游景点一体化Web平台所需的前端页面，再使用Web后台技术(如SSM框架技术)可实现该Web平台的所有功能[17]。经过在线测试和实际运行证明，所设计的前端页面能自适应目前主流的移动设备和PC上的浏览器，而且用户满意度高，有效提高了该旅游Web平台的访问率，并达到了预期目标。其中，首页运行效果如图1和图2所示。
图1 PC端运行效果
图2 移动端运行效果
5 结束语
自适应网页可以自动识别终端设备的屏幕宽度并自动做出相应调整，使其页面效果在各类设备上保持一致，这有效解决了传统Web系统需要为不同的前端设备提供不同页面的问题。文中恰当使用组合的HCJB技术来设计和实现既支持PC端也支持移动端的旅游景点一体化Web平台页面，使其在目前主流的各种前端设备上呈现出用户体验一致的浏览效果。实践证明，使用该方法开发旅游景点一体化Web平台自适应网页不仅能解决网页兼容性、自适应等问题，而且能减少开发工作量、缩短开发时间和降低开发成本，有效节省了开发Web系统的人力、物力和财力，并提高了系统的用户满意度。但所设计的旅游景点一体化Web平台页面现阶段只适合目前主流的前端设备和浏览器，对于极个别特殊设备和浏览器其自适应能力欠佳，后续还有待进一步研究和完善。
