基于响应式Web设计的网页生成系统研究与实现

臧进进+鄂海红

摘要：随着移动互联网的兴起，越来越多的人开始使用移动设备访问各类网站。制作可以适配不同终端的网页成为了个人和企业网站设计和开发的关键。本文在论述了响应式Web设计相关技术的基础上，设计并实现了一套新型网页生成系统。该系统通过响应式Web设计的开发方式，为用户屏蔽网页开发的技术细节，让用户能够以“所见即所得”的方式创建网页。使用该系统生成的网页能随着接入设备的不同而自行响应，动态地调整布局结构、交互样式，将相同的内容以不同的格式呈现给不同的设备用户

关键词：移动互联网；响应式Web设计；可视化编辑；网页生成器

中图分类号：TP391

文献标识码：A

DOI：10.3969/j.issn.1003-6970.2015.06.008

本文著录格式：臧进进，鄂海红，基于响应式Web设计的网页生成系统研究与实现[J].软件，2015，36（6）：37-41

ResearchandImplementationoftheWebPageGenerationSystemBasedonResponsiveWebDesignZANGJin-jin，EHai-hong[Abstract]：WiththeriseofthemobileIntemet，moreandmorepeoplestartusingmobiledevicestoaccessvarioussites.Webpagesthatcanfitdifferentterminalsbecomethekeyforindividualsandenterprisestodesignanddeveloptheweb.Inthispaper，theauthorfirstdiscussestheresponsiveWebdesign-relatedtechnologythendesignsandimplementsanewwebpagegenerationsystem.Thesystemcanshieldthetechnicaldetailsofthedevelopmentofthewebpage，sothatuserscancreatethewebpageinthewayof”whatyouseeiswhatyouget”.ThroughtheuseofresponseWebdesign，thepagesgeneratedthroughthissystemcanautomaticresponse，dynamicadjustmentofthelayoutofthestructure，interactionstyledependingontheaccessdevice.Finally，thesamecontentpresentedindifferentformatsfordifferentdevicesusers.

[Keywords]：MobileInternet；Responsivewebdesign；Visualeditor；Webpagegenerators

0引言

随着移动设备的普及和Web技术的发展，人们进入了移动互联网时代。根据中国互联网络信息中心发布的统计数据，截至2014年12月，中国手机网民规模达5.57亿，较2013年底增加5672万人。网民中使用手机上网人群占比由2013年的81.0%提升至85.8%[1]，可见使用手机等移动设备浏览网页变得越来越普遍。

当前市面上的移动设备种类较多（如智能手机、平板电脑等），而且屏幕的分辨率标准也各不相同，未来还会有更多新的移动设备面世。对于一些实力比较强的公司，可以针对电脑和移动智能设备开发不同版本的网站，但是这种针对不同用户分别定制的做法耗时费力。并且对于多数网站来说，为每种新设备及不同的分辨率创建其独立的版本是不切实际的。在这种形势下，怎样让我们的网站尽量兼容各种类型的设备，并确保优良的用户体验，这将是越来越重要的问题[2]。

现有的网页生成T具大多还是采用传统的网页开发技术，生成的页面只适用于电脑端，具体表现在当用户使用不同设备访问同一网站时，移动设备上显示文字等网页元素是细小而紧密，用户不得不在移动设备屏幕上不停地滑动，通过放大和缩小页面来查看网页内容，横屏竖屏来回切换，页面中提供交互的视觉元素则需要多次放大才能适合手指操作[3]。并且这些网页生成T具或是针对专业网页设计人员的开发T具，或是外文开发的，而且有些还是收费软件，使用它们需要支付资金。对于非专业网页开发人员来讲，要制作网页，首先就要花费大量的时间去学习和实践开发技术；其次还需要花费大量的精力去熟悉开发环境[4]。

对于那些想拥有可适配不同终端设备的网页，但是又不懂网页制作技术的用户来说，这些T具在功能和技术的实现上都还有一定的局限性。本系统运用响应式设计技术，屏蔽网页开发技术细节，使用户能够以“所见即所得”的方式快速创建可以适配不同终端的网页。

1网页生成系统设计

1.1系统架构设计

网页生成系统主要由三部分组成：网页编辑模块，网页管理模块，用户管理模块。网页编辑模块主要负责网页的可视化编辑和发布，网页管理模块主要是对已生成的网页进行增删改查，用户管理模块主要是用户的个人账户信息管理。整个系统架构如图1所示。

1.2系统功能设计

1.2.1网页编辑模块

本模块主要以向导式的方式让用户“所见即所得”地编辑网页。编辑模块主要有两部分构成，左边的引导区域和右边的编辑区域。页面主要由图片和文字两类元素组成。用户点击元素右上角的“编辑”按钮，该元素即进入编辑模式。用户可以修改文字，上传图片。当用户点击页面中其他地方时，退出编辑模式，并自动保存用户所做的最后一次修改。用户还可以添加和删除元素。如图2所示。

1.2.2页面管理模块

本模块主要用于对已创建的页面进行管理。具体包括页面的修改、预览、发布和删除。每个页面都有三种预览方式，可分别查看页面在电脑、平板和手机上的展现。用户选择发布页面后，系统会自动生成一个二维码，用户通过手机“扫一扫”分享自己的页面。如图3所示。

1.2.3用户管理模块

网页生成系统根据用户权限把用户分为管理员与普通用户。管理员可以对系统中所有用户进行管理，除了拥有普通用户的权限外，还控制不同用户对网页生成系统的使用权限，可以添加、删除用户和修改用户权限。普通用户只可进入自己的管理界面，进行个人信息管理，即账号和密码的管理，用户可以在这里进行账号修改以及密码修改和找回。

2关键技术

响应式网页设计，是由EthanMarcotte在2010年提出的名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计[5]。简单来说就是同一个网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局。实现响应式网页设计主要用到以下三种技术。

2.1弹性布局

所谓弹性布局就是不对浏览器的宽度作任何设定，即非固定式布局，因而可以适应不论是水平式的还是竖直式的终端设备[6]。将固定宽度（px）换为以“%”为单位的相对宽度，这样就可以使网页适用不同分辨率的设备。同时将各个区域的位置设置为浮动，一旦屏幕宽度变小，无法展示多个元素时，可以使一部分元素白动滚动到前面元素的下方，而不会出现水平方向上的溢出，保证页面相应宽度的变化，不会出现横向的滚动条。

2.2媒体查询

媒体查询是响应式设计的核心，它根据条件告诉浏览器如何为指定宽度的视图渲染页面。媒体查询使我们不仅能针对某些特定的设备类型，还能够对呈现设计的设备物理特性进行检验[7，8]。一个MediaQuery语句项由媒体类型和可选的用于检查媒体特性的条件表达式组成，通过使用width、height和color这些媒体属性，可以控制内容在不同设备下的输m而不需要改变内容本身。

2.3液态图片

响应式Web设计的思路中，图片如何显示是一个至关重要的问题。有很多同比缩放图片的技术，其中有不少是简单易行的，如使用CSS的max-width属性：img{max-width：100%；}。只要没有另外规定图片的具体宽度，页面上所有的图片就会以其原始宽度进行加载，除非其容器可视部分的宽度小于图片的原始宽度[8]。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片的最大宽度值也会相应的减小，图片本身永远不会被容器边缘隐藏和覆盖。这种做法就好像把图片比作液体一样，能够白由“流动”，液态图片也由此得来。

3系统实现

3.1利用meta标签对viewport进行控制

在移动设备中，浏览器将一个较大的虚拟窗口映射到移动设备的屏幕上，这个虚拟的窗口即为viewport（默认的viewport宽度为980像素）。当浏览器加载一个普通页面时，会将页面以980像素的浏览器标准进行加载，然后按一定的比例进行缩放以显示整个网页内容。缩放后页面上的所有元素都会缩小，用户需要对页面进行手动的放大和平移才能够进行浏览，这样的页面用户体验很差。在响应式设计当中，由于采用了弹性布局的设计，网页内容的宽度最大为100%，即屏幕宽度，这就需要阻止移动设备的浏览器自动调整页面大小，使网页白动检测设备屏幕的大小，网页内容白适应。具体实现方式是在页面的head标签中添加meta属性来控制viewport。如

name="viewport"content-”width=device-width，initial-scale-l.0，maxlmum-scale-l.0，minimum-scale-l.0，user-scalable-no">[9]。其中各属性代表的含义如下：

（1）width=device-width：控制viewport的宽度，可以指定固定的值或特殊的值，如device-width设备宽度。

（2）initial-scale：设置页面的初始缩放值，1.0代表初始化页面时不要对页面进行任何缩放的操作。

（3）maximum-scale：允许用户的最大缩放值，1.0代表阻止页面放大。

（4）minimum-scale：允许用户的最小缩放值，1.0代表阻止页面缩小。

（5）user-scalable：是否允许用户进行缩放，值为"no"或"yes"，no代表不允许，yes代表允许。

3.2设置媒体查询

通过对媒体查询（MediaQueries）的设置，我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件以渲染页面的视觉风格，从而实现在不同的设备上呈现给用户同样的Web网页[10]。具体实现方式有两种：

通过link标签设置：示例代码代表当当前屏幕宽度小于680px的时候，加载cssstyle.css文件来渲染页面。

CSS中直接设置：

@mediascreenand（max-width：680px）{

/冰具体的CSS属性设置*/

}

3.3利用JavaScript实现交互效果

响应式设计在针对不同设备时，有不同的交互功能。例如在电脑端网页会有顶部导航栏的设计，但在移动设备中，则需要将其转化为具有折叠效果的侧边栏[11-13]。利用JavaScript技术，隐藏导航栏，只为用户提供一个按钮，当用户点击时，就会显示完整导航栏。这样可以使页面看起来整洁美观，节省了屏幕空间，用户还可以按需查看想要了解的内容。

4测试

对本系统生成的页面，在多种浏览器和不同的移动设备屏幕中进行了测试，实验证明，具有很好的兼容性。最终部分效果图如图4-6所示。

5结语

响应式Web设计可以为不同智能终端的用户提供更加舒适的界面和更好的用户体验，随着Web技术的不断进步和移动智能设备的不断普及，响应式Web设计将受到越来越多的Web设计师的青睐。本系统利用响应式Web设计技术，帮助用户方便快捷的生成可以自动适配不同的终端的页面，具有很好的实用性。

参考文献

[1]中国互联网络信息中心（CNNIC）.第35次中国互联网络发展状况统计报告[R].2015.

[2]阮一峰.白适应网页设计（ResponsiveWebDesign）[OL].（2012-05-10）[2015-06-17].

[3]

http：//www.ruanyifeng.com/blog/2012/05/responsive_web_design.html.

[4]WOODSS.HTML5触摸界面设计与开发[M].北京：人民邮电出版社，2014：188-189.

[5]尹航，詹舒波.基于配置文件的web页面白动生成系统[J].软件，2014，35（10）：117-121.

[6]MARCOTTEE.Responsivewebdesign.AListApart[J].2010：306.

[7]FRANB。响应式Web设计：HTML5和CSS3实战[M].王永强，译.北京：人民邮电出版社，2013：156-157.

[8]张蕙.浅谈网页界面设计思路与实现[J].软件，2013，34（1）：102-103.

[9]李强.基于HTML5的网页围棋游戏的开发[J]软件，2013，34（9）：39-40.

[10]HAYS.响应式Web设计全流程解析[M].北京：人民邮电出版社，2014：118-119.

[11]WROBLEWSKIL，MARCOTTEE.移动优先和响应式web设计[M].北京：人民邮电出版社，2014：205-206.

[12]张幸芝，徐东东，贾菲.基于响应式Web设计的教务系统移动平台研究与建设[J].软件，2013，34（6）：5-7.

[13]苟强强，张华.基于脚本指令的移动设备白适应机制研究[J].软件，2014，35（11）：1-4.

[14]姜福成.基于网页平台的移动文本编辑器的设计[J].软件，2013，34（5）：12-15.