基于HCJB的旅游景点一体化平台自适应页面设计

梁弼¹，肖丽利²，刘在欢¹

(1.四川文理学院智能制造学院，四川达州 635000；2.四川文理学院科技处，四川达州 635000)

摘要：随着无线通信、计算机网络等现代信息技术的快速发展，以及智能手机、平板电脑等移动设备的广泛使用，旅游业正朝着信息化、多元化方向发展，而且基于Web的旅游系统愈来愈流行，但其前端页面跨平台和跨浏览器的兼容性、自适应性问题越发突出。为了有效解决这些问题，文中恰当融合HTML5、CSS3、jQuery和BootStrap等前端页面技术(即HCJB)来设计和实现既支持PC端又支持移动端的旅游景点一体化Web平台页面。实践证明，所实现的旅游景点页面能自动适应当前主流的硬件设备和软件系统。并且，与单独开发面向PC端的Web应用和面向移动端的Web App相比，该方法不仅节约人力、物力和财力，而且所实现的旅游景点一体化Web平台前端页面具有良好的兼容性、稳定性和自适应性，这有效提高了旅游Web系统的访问率和用户满意度。

关键词：一体化Web平台；HTML5；CSS3；jQuery；BootStrap；自适应页面

正交实验设计方法可通过少量的实验点来获得整个实验域内丰富的实验信息，从而得出全面的结论，因此具有设计灵活、不需要获得导数信息、实验次数少、可靠性高、可多方向同时寻优等特点。本实验为3因素4水平正交实验，正交实验因素水平见表2。

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 (min-width:1200px){

href="smallScreen.css"/>

若屏幕宽度在400像素到600像素之间，就加载mediumScreen.css文件。

现代医学认为，特发性胎儿生长受限发病与胎盘功能障碍有密切联系，不正常胎盘形成过程中引起血管重铸不良，增加特发性胎儿生长受限发生几率[7]。引起特发性胎儿生长受限致病的可能胎盘因素主要包括：胎盘解剖学异常、胎盘血管形成不良、胎盘发育形态学异常及染色体异常等[8-9]。其中胎盘血管形成不良造成胎盘血流灌注不足为特发性胎儿生长受限发病常见原因，而围产期脐动脉血流情况是临床上常用来评价胎盘血流灌注情况的重要指标。

media="screen and (min-width: 400px) and (max-device-width: 600px)"

经Pearson相关性检验，联合用药组IL-2和IFN-γ与PR和SD呈显著正相关，而与PD呈负相关(P均<0.05)；TNF-α和IGF-1与PR和SD呈显著负相关，而与PD呈正相关(P均<0.05)。见表3。

免疫组织化学结果显示，Syn阳性细胞胞质内可见弥散分布的棕色颗粒，阳性率为98.6%(71/72)；CgA阳性细胞胞质内可见弥散分布的棕色颗粒或呈局灶性胞质内阳性颗粒，阳性率为95.8%(69/72)；NSE阳性细胞胞质内可见弥散分布的棕色颗粒，阳性率为88.9%(64/72)；CD56阳性细胞胞膜呈棕黄色着色，阳性率为90.3%(65/72)。不同分级肿瘤之间表型标志物阳性率的差异均无统计学意义(图1，表2)。

媒体查询-小屏幕(平板，大于等于768 px)

媒体查询-小屏幕(平板，大于等于1 200 px)

2.2 自适应网页宽度设计

为了实现旅游景点一体化Web平台网页的自适应能力，首先需要将网页宽度设置为自动调整，即在旅游景点网页源码的头部<head>中加入viewport元标签，其代码为<meta name="viewport" content="width=device-width, initial-scale=1.0"/>^[13]。

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值时，导航条内部的元素变为水平排列(即为非移动设备展现模式)。其核心源代码如下：

其中，viewport是网页默认的宽、高度。该代码表达的含义是网页宽度默认等于设备屏幕宽度，原始缩放比例设置为1.0，即网页初始大小占屏幕的100%。由于网页会根据当前终端设备屏幕宽度调整布局，所以旅游景点一体化Web平台的网页不能使用绝对宽度来布局，也不能使用具有绝对宽度的元素。具体来讲，CSS代码不能指定像素宽度(如width：**px;)，只能指定百分比宽度(如width：**%;)，或设置为自动(即width：auto;)，并将所用字体设置为相对大小(即font-size:**em;)。

<button type="button" class="navbar-toggle">参考文献：

[1] LI Yunpeng,HU C,HUANG Chao,et al.The concept of smart tourism in the context of tourism information services[J].Tourism Management,2017,58:293-300.

[2] 王星捷,李春花.基于WebGIS技术旅游系统的设计与实现[J].计算机技术与发展,2018,28(8):148-151.

[3] 余尤骋.基于Android的体系架构及百度地图的自助旅游系统设计[J].微型电脑应用,2018,34(7):52-54.

[4] 冯兴利,洪丹丹,罗军锋,等.自适应网页设计中的关键技术[J].计算机应用,2016,36(S1):249-251.

[5] TOUT H,MOURAD A,TALHI C,et al.AOMD approach for context-adaptable and conflict-free Web services composition[J].Computers & Electrical Engineering,2015,44:200-217.

[6] CRESPO R G,ESPADA J P,BURGOS D.Social4all:definition of specific adaptations in Web applications to improve accessibility[J].Computer Standards & Interfaces,2016,48:1-9.

[7] 张玉清,贾岩,雷柯楠,等.HTML5新特性安全研究综述[J].计算机研究与发展,2016,53(10):2162-2171.

[8] DOMNGUEZ M,PRADA M A,MORN A,et al.Improving user interaction in remote laboratories through HTML5/AJAX[J].IFAC Proceedings Volumes,2012,45(11):282-287.

[9] 江玉珍,朱映辉,黄伟,等.HTML5网页设计课程的CSS3教学拓展[J].现代计算机,2018(3):71-74.

[10] 郭庆燕,张敏,杨贤栋.JQuery Ajax异步处理JSON数据实现气象图片的显示[J].计算机应用与软件,2016,33(6):20-22.

[11] 王琴.基于Bootstrap技术的高校门户网站设计与实现[J].哈尔滨师范大学自然科学学报,2017,33(3):43-48.

[12] 周美玲,陈书理.CSS3和HTML5的优势及其在网页布局中的应用[J].开封大学学报,2017,31(2):86-88.

[13] 黄雪琴,耿强,陈显军.基于CSS+DIV的自适应宽度网页布局方法[J].计算机与现代化,2014(6):53-55.

[14] ACKERMANN P,VLACHOGIANNIS E,VELASCO C A.Developing advanced accessibility conformance tools for the ubiquitous web[J].Procedia Computer Science,2015,67(12):452-457.

[15] 陈奋,张晓兰.自适应网页设计研究[J].通化师范学院学报,2017,38(8):62-64.

[16] CAMACHO A,CAIZARES P C,ESTÉVEZ S,et al.A tool-supported framework for work planning on construction sites based on constraint programming[J].Automation in Construction,2018,86(2):190-198.

[17] LIANG Bi.The study and application of the new control layer for enterprise-class web applications[J].Journal of Computers (Taiwan),2017,28(6):151-162.

Adaptive Page Design of Integrated Platform for Tourist Spots Based on HCJB

LIANG Bi¹，XIAO Li-li²，LIU Zai-huan¹

(1.School of Intelligent Manufacturing，Sichuan University of Arts and Science，Dazhou 635000，China；2.Department of Science and Technology，Sichuan University of Arts and Science，Dazhou 635000，China)

Abstract ：With the rapid development of modern information technologies such as wireless communication and computer network，and the wide use of mobile devices such as smart phones and tablet computers，the tourism industry is developing towards the direction of informatization and diversification，and the tourism system based on Web is becoming more and more popular. However，the cross-platform and cross-browser compatibility and adaptability problems of front-end pages are becoming more and more appeared. In order to effectively solve these problems，we properly integrate some front-end page technologies such as HTML5，CSS3，jQuery and BootStrap (namely HCJB) to design and implement the integrated Web platform pages for that support both PC and mobile devices. The practice has proved these pages of tourist spots can automatically adapt to the current mainstream hardware devices and software systems. Furthermore，compared with developing PC-oriented Web applications and mobile-oriented Web App separately，this method not only saves manpower，material and financial resources，but also has great compatibility，stability and adaptability in front-end pages of the integrated Web platform for tourist spots. In addition，it effectively improves the access rate and user’s satisfaction of the tourism Web system.

Key words ：integrated Web platform；HTML5；CSS3；jQuery；BootStrap；adaptive page

收稿日期： 2018-09-17

修回日期： 2019-01-22

网络出版时间： 2019-06-26

基金项目： 2018年四川省教育重点项目(18ZA0421)；2016年四川省教育科研项目(16ZB0362)；2016年四川文理学院重点项目(2016KZ002Z)

作者简介：梁弼(1982-)，男，副教授，博士生，研究方向为Web服务、推荐系统、智能信息处理。

网络出版地址： http://kns.cnki.net/kcms/detail/61.1450.TP.20190626.0823.002.html

中图分类号： TP311

文献标识码: A

文章编号: 1673-629X( 2019) 10-0100-05

doi: 10.3969/j.issn.1673-629X.2019.10.021

标签：一体化Web平台论文; html5论文; CSS3论文; jQuery论文; BootStrap论文; 自适应页面论文; 四川文理学院智能制造学院论文; 四川文理学院科技处论文;

基于HCJB的旅游景点一体化平台自适应页面设计论文

0 引言