扶贫产品购销网站自适应网页面的设计开发,网页设计论文

　　摘要：　随着现代信息技术在各个领域内的应用推广，助力脱贫攻坚战略的工作方式与手段也正朝着信息化、多元化的方向快速发展，基于网络平台的消费扶贫也成为扶贫的重要途径，但其跨平台和跨浏览器的现状与其他类型网页一样存在自适应性的问题。因此，使用基于HTML5代码，结合CSS3、Bootstrap、jQuery等先进技术，设计开发扶贫产品购销自适应网页来解决上述问题势在必行。实践证明，采取的自适应网页设计方法，可以有效解决当前扶贫产品购销平台页面兼容性、自适应性较差的问题，同时对扩展扶贫产品销路具有实践意义。

　　关键词 : 自适应页面; HTML5; CSS3; Bootstrap; jQuery;

　　Abstract：　With the application and promotion of modern information technology in various fields, the working methods and means of targeted poverty alleviation strategy are developing rapidly in the direction of informatization and diversification. The consumption poverty alleviation based on network platform has also become an important way of poverty alleviation. However, the current situation of cross platform and cross browser has the same adaptability problem as other types of web pages. Therefore, it is imperative to design and develop adaptive Web pages for poverty alleviation products based on HTML5 code, combined with CSS3, Bootstrap, jQuery and other advanced technologies, to solve the above problems. Practice has proved that the adaptive Web design method adopted in this paper can effectively solve the problems of poor compatibility and adaptability of the current purchase and marketing platform of poverty alleviation products, and has practical significance for expanding the sales of poverty alleviation products.

　　Keyword：　adaptive page; HTML5; CSS3; Bootstrap; jQuery;

　　0、引言

　　消费扶贫已经成为全社会力量参与脱贫攻坚战略、帮助贫困人口增收脱贫的一种重要扶贫方式，在2020年新冠疫情的影响下，城镇的公共交通、公共场所、各类商场、超市、菜场、批发市场等场所受到了严格的防疫要求，作为农作物主要销售出口的农贸市场、超市商店等场所流量骤减，农产品产业链中的销售环节受到较大冲击，部分地区蔬菜、水果等农产品出现严重滞销问题。为此，国务院提出实施“互联网+”农产品出村进城工程，特别是在贫困地区建立长效稳定的购销关系，搭建常态化的产销对接平台。在新时代“互联网+”发展的新形势和新冠疫情影响下，基于线上的扶贫产品购销网络平台自然更加成为加快脱贫进程、提高扶贫效力的关键手段。但现有大部分购销平台主要是针对其他商业消费产品，针对扶贫产品的少之又少，与此同时，扶贫产品购销信息主要是通过微信公众号进行单一推送，PC用户端和移动端均适用的Web平台开发使用更是少之又少。因此，构建一套基于不同类型用户端的自适应Web前段页面的购销平台，对助力扶贫攻坚任务具有重要的意义。

　　1、自适应网页设计

　　随着信息化便捷程度的提档升级，各类型设备终端层出不穷，但在访问固定网站时，不同设备的显示效果完全不同。期初，为了解决这一问题，必须针对不同终端专门设计前端网页，带来的问题是需要同期维护不同版本前端网页及网站入口，势必加大了网站维护与网页设计的复杂度和设计者的工作成本。自适应网页设计就是能够让一个网站的前端网页可以兼容不同的终端，不用被动去适应不同分辨率设备而特定设置网站版本，故而自适应网页也称为响应式网页，使其自动适应终端不同屏幕分辨率且自动调整布局，不仅在设计端实现“一次设计，普遍适用”,更在用户端展现更友好的体验。自适应网页设计的概念旨在统一代码树，消除代码分叉并提供一种更简单的方法来跨设备提供高质量的用户体验[1,2]。目前，自适应网页设计的支持技术很多，主要是基于HTML5代码，利用CSS3、Bootstrap、jQuery等有效解决跨终端、跨浏览器的网页兼容性问题。综上，结合扶贫产品购销需求，文中充分利用目前主流的HTML5+Bootstrap+jQuery+CSS3技术，设计扶贫产品购销平台的前端网页，使其支持不同大小的屏幕尺寸又广泛支持多种浏览器浏览，扩大不同网站终端的浏览量，更广泛地推广扶贫产品[3]。

　　2、自适应网页设计关键技术分析

　　2.1、 HTML5

　　HTML5是取代HTML4.01和XHTML1.0标准的一种用于创建网页的超文本标记语言，实际是包括HTML、CSS和JavaScript在内的一套技术组合，它在语义、存储、设备兼容、多媒体、三维图像具有明显兼容特征以及即时更新能力，它不仅强化了Web网页的表现性能，同时追加了数据库等Web应用的功能，集中体现的是其跨平台性[4]。

　　2.2、 Bootstrap

　　Bootstrap是集合CSS,HTML和JavaScript等Web页面开发技术的开源前端工具包，它提供了优雅的HTML和CSS设计规范，更易于扩展和维护，使得Web页面开发更加便捷，在其提供的网格系统、链接样式、背景的基本结构下，拥有的全局CSS设置、定义基本HTML元素样式、可扩展Class、自定义的jQuery插件等，可以用于创建图像、下拉菜单、导航、警告框、弹出框等，且可以定制Bootstrap的组件、LESS变量和jQuery插件来享受特别需求的版本[5]。

　　2.3、 jQuery

　　在上述Bootstrap中就已提及的jQuery, 实质是一个快捷的JavaScript框架，为网页设计者能够更简便的开发设计提供可能，其核心特性体现在独特的链式语法和短小清晰的多功能接口和高效灵活的CSS选择器，并且可对CSS选择器进行扩展，以便获得更为便捷和丰富的插件，其优化后的HTML编写、动画设计以及交互式设计深受欢迎[6]。

　　2.4 、CSS3

　　CSS3是一种用来展现HTML或XML等网页设计的计算机语言，也是最新的CSS标准。目前CSS3包含选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面等模块[7]。

　　3、扶贫产品购销平台自适应网页设计

　　3.1、结构设计

　　3.1.1、自适应网页宽度设计

　　在总体布局下，为了使扶贫产品购销平台网页达到自适应的效果，须在网页文本源码头部增加元标签viewport, 自动调整网页宽度，使网页宽度自适应屏幕宽度，代码如下。

　　但对于扶贫地区可能存在的终端设备软件平台陈旧问题，IE8以下等老版本浏览器可采取如下操作。

<!--[if lt IE 9]>

　　</script>

　　<![endif]-->

　　3.1.2、自适应网页屏宽设计

　　在拥有了CSS3提供的Media Query模块功能下，自适应网页设计可以通过该技术，在设计时自动探测屏幕宽度，然后加载相应的CSS文件。例如：屏幕宽度小于600像素，使用下列代码。

　　<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)"

　　href="style/css/css600.css"/>

　　如果屏幕宽度在600像素到980像素之间，则加载css600-980.css文件。

　　<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 600px)and (max-device-width: 980px)"

　　href="css600-980.css"/>

　　3.2 、元素设计

　　3.2.1、导航项目设计

　　对于本文扶贫购销自适应Web网页来讲，导航条是分类展示购销扶贫货品不可缺少的部分，文中采用弹性布局的方法，主要是考虑到弹性布局可以解决网页宽度容纳性的问题。Flex布局为自适应网页设计提供了很大的灵活性，采用Flex布局的元素，称为Flex容器(flex container),容器中的子元素即Flex项目(flex item)[8]。

　　在扶贫产品购销平台前端网页的导航项目中设置“首页”“产品配送”“产品团购”“产品展示”“联系我们”5个栏目，且按照自适应的方式在一行内自动把剩余空间平均分配给了每个项目，核心设计代码如下。

　　定义一个无序列表：

　　<u1>

　　</ul>

　　然后修改其CSS规则：

　　ul{

　　width: 400px;

　　height: 80px;

　　border: lpx solid yellow;

　　margin: 20px auto;

　　display: flex;

　　flex-direction: row;

　　justify-content: space-around;

　　}

　　1i{

　　width: 60px;

　　height: 50px;

　　background: blue;

　　list-style: none;

　　border: lpx solid red;

　　text-align: center;

　　line-height: 50px;

　　}

　　利用flex弹性布局可以灵活地应用于不同分辨率的不同元素布局中。

　　3.2.2 、区块设计

　　扶贫产品购销平台自适应网页的展示内容部分，可以采用float流动布局，或Bootstrap自带的栅格布局。也可按照最直接简单的流动布局方式来解决区块设计。为适应不同终端的屏幕尺寸，在主页展示产品信息的各个区块的位置都是浮动的，不是固定不变的[9],例如：

　　.left{ width: 30%; float: left}

　　.right{ width: 70%; float: right; }

　　上述处理方式可以解决一行内两个元素排列不下后，后面的区块内容自动调转至前面区块的下方，从而不产生水平方向溢出而出现水平滚动条的尴尬现象。

　　3.2.3、文字设计

　　在上述分析前端网页可根据当前终端设备屏宽自动调整布局的前提下，自适应网页中的文字元素不能使用绝对宽度。字体大小是页面默认大小的100%,即16像素，字体不能使用绝对大小“PX”,要使用相对大小“REM”。

　　html{font-size: 62.5%;}

　　body {font: normal 100% Arial, sans-serif; font-size: 14px; font-size: 1.4rem; }

　　3.2.4、图片展示设计

　　在购销网站中，直接、恰当地展示扶贫货品的内容，对增强购买方的视觉感受，提高扶贫产品购买吸引力是十分关键的。因此，扶贫产品展示图片的自适应设计非常必要，特别是扩大用户覆盖面前提下，必须针对不同用户使用的终端设备尺寸，在网页中实现图片自动缩放，但扶贫产品展示图片往往在采集时，比例并不统一或规范，在前端网页展示明确规定宽高比例的要求下，如果不影响图片拉伸变形，核心设计代码如下。

　　HTML代码部分可定义：

　　其CSS规则如下。

　　.povertyImage{

　　width: 100%;

　　height: 0;

　　padding-bottom: 100%;

　　overflow: hidden;

　　background-position: center center;

　　background-repeat: no-repeat;

　　-webkit-background-size: cover;

　　-moz-background-size: cover;

　　background-size: cover;

　　}

　　扶贫产品购销平台网页中的其他视频的自适应效果可以参考图片设计的类似方式予以实现。

　　4 、扶贫产品购销平台自适应网页运行效果

　　经过上述主要的设计方法进行前端页面设计后，经过后台系统调试运行和在线测试运行，所设计的扶贫产品购销平台页面能自响应目前主流的浏览器，而且在不同终端设备运行良好，部分网页内容运行效果如图1—图3所示。

　　图1 PC端网页展示效果

GetImg (1).jpg

　　5、总结

　　实践证明，使用基于HTML5代码，结合CSS3、Bootstrap、jQuery等先进技术设计开发的扶贫产品购销自适应网页从技术上解决了浏览器跨版本兼容性、自适应的问题，同时缩短了开发设计时间和成本，更重要的是为扩展扶贫产品销路提供了信息化的有效手段。下一步还将针对扶贫工作的具体需求进一步完善网站的设计与开发，以切实满足多样化的购销需求。

　　图2 Pad端网页展示效果

GetImg (2).jpg

　　图3 手机端网页展示效果

GetImg (3).jpg

　　参考文献

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

　　[2]贾英霞浅谈Bootstrap制作响应式网站布局[J]福建电脑, 2015,31(8):122-123.

　　[3]杨秀生响应式Web的设计的关键技术研究[J]电脑知识与技术, 2017,13(5):51-52.

　　[4]薛鹏飞响应式网页设计在高校网站建设中的应用那[J.计算机与网络, 2019,45(16):42-43.

　　[5]舒后,熊-帆，葛雪娇基于Bootstrap框架的响应式网页设计与实现[J].北京印刷学院学报，2016,24(2):47-52.

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

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

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

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