基于终端自适应的网页设计教学拓展

1、基于终端自适应的网页设计教学拓展摘 要： 等挪动设备已成为网页的重要应用终端，针对常规网页设计课程中固化网页大小的教学局限，借助HTML5和CSS3新技术，提出基于终端自适应的网页设计教学拓展。通过对流式、响应式及弹性盒子等多种终端自适应方法的剖析及优缺点的讨论，突出自适应网页的实际应用意义和CSS3 Flexbox弹性布局的灵敏性，增强网页课程的教学深度，提升学习质量和学习意义。关键词： 网页设计； 终端； 自适应； 弹性盒子； CSS3中图分类号：TP393.092 文献标志码：A 文章编号：1006-8228202103-70-03Teaching extension for desig

2、n of terminal-adaptive webpageJiang Yuzhen， Zhu Yinghui， Chen Jianxiao， Lu Xicong， Yu XiaochunSchool of Computer Information Engineering， Hanshan Normal University， Chaozhou， Guangdong 521041， ChinaAbstract： Mobile phone and other mobile devices have become the important application terminals of web

3、 pages. Aiming at the teaching limitations of fixed-size web pages in regular webpage design courses， with the help of HTML5 and CSS3 technology， a teaching extension for design of terminal adaptive webpage is put forward. Through the analysis of a variety of terminal adaptive methods， such as FlowL

4、ayout， responsive design and Flexbox， the practical importance of adaptive webpage and the flexibility advantage of CSS3 Flexbox are emphasized， thus improving the teaching depth， the learning quality and the significance of webpage courses.Key words： webpage design； terminal； self-adaptive； Flexbox

5、； CSS30 引言作为上网的主要依托方式，网站网页一直在网络应用中起着举足轻重的媒介作用，?网页设计与制作?课程也常作为专业信息技术课或计算机公共根底课在高校中推广教学1。随着各种智能挪动设备、掌上电脑等电子产品的迅猛推出，同一个网站的网页的受访终端可能是、平板和PC机等，这些设备的屏幕分辨率大相径庭。如何保证网页在各种终端上均能获得友好、美观的显示效果以及稳定、通用的操作功能将是一个网站得以长远立足的根本条件。对此，新标准HTML5应运而生，HTML5的目的就是使网络标准到达符合当代的网络需求，为桌面和挪动平台带来无缝衔接的丰富内容2。虽然目前很多网页设计课程已转向基于HTML5教学，但在

6、制作方法推介上却还沿袭传统的面向PC机固定的大屏设计形式，并没有突出HTML5设计上的可移植性和灵敏性。本文主要讨论终端多样化环境下各种网页自适应布局的实现方法，重点介绍HTML5+CSS3的弹性网页布局方法，拓展实用知识点，填补常规网页设计教学中多样化应用的缺乏。1 HTML5网页的缩放设计使用等小屏幕设备阅读网站网页时，许多传统网页常会自动缩小至屏幕范围内。虽然这种显示可以快速地抓住整个网页的概构，但却可能因为字体太小而难以辨识网页的细节内容。为进步挪动设备显示性能，HTML5提倡使用viewport元标签，当网页加载时，阅读器就会先把页面放在一个虚拟的“窗口viewport中，通常这个虚

7、拟的“窗口比屏幕宽，网页不会被挤到很小的窗口中，用户可以通过平移和缩放来阅读网页的不同部分。以下代码实现按原始大小显示网页，不自动缩小，允许手动缩放，缩放范围为初始大小的0.52.0倍。2 流式网页布局流式布局是通过改变元素的排列到达适应设计尺寸的目的。流式布局的网页可以这样理解：页面上内容模块就像液体一样，从左到右从上到下地流动且自适应地排列。流式布局常使用百分比分配技术和浮动技术。百分比布局形式能实现网页内容模块的自动横向伸缩；浮动布局形式那么能根据阅读器或容器盒子宽度让各内容模块自动排列成多行3。2.1 百分比布局百分比布局使用百分比来设置各个部分的详细宽度以用来适应不同的分辨率。在百分

8、比布局形式下，各热菽？榈目矶然岣据阅读器宽度进展自动等比缩放，其自适应显示方式如图1所示。该网页设计形式的优点是技术上容易为用户承受也容易实现，但主要缺点是，当需要添加新内容模块时，所有之前的内容模块可能都要重设百分比，更新的工作量大。图1 百分比布局的网页自适应形式2.2 浮动布局浮动布局利用对象的float属性实现内容模块浮动框的自动排列。常设float属性值为left，浮动框自动向左挪动靠拢，直到它的左边缘碰到包含框或另一个浮动框的边框为止，假设包含框宽度变小，那么后面的浮动框会自动被“挤到下一行。其自适应显示方式如图2所示。该网页设计形式的优点是可以随时添加新的内容模块而不用修改之前模

9、块的属性，缺点是其浮动方向只有程度向左浮动或向右浮动，且当各内容盒子的高度不协调时，容易造成较大的版面空白区。图2 浮动布局的网页自适应形式3 响应式网页布局响应式网页设计是指可以自动识别屏幕宽度、并作出相应调整的网页设计4。其关键技术是通过CSS3引入Media Query模块自动探测屏幕宽度，然后加载相应的CSS文件或执行相应的CSS款式代码。响应式网页布局常使用“CSS的media规那么和“link标签媒体查询两种方式实现自适应显示。3.1 media规那么media规那么添加在网页的标签中，根据不同的屏幕分辨率而应用不同的CSS规那么。以下代码实现列表链接字体在三种不同阅读器宽度下的大

10、小变化。当阅读器窗口宽度“800px时，字体放大1.6倍，图像宽度800px。网页效果如图3。media screen and min- width：801px ul li afont-size：1.6em； imgwidth：800pxmedia screen and min-width：601px and max-width：800px ul li afont-size：1.3em； imgwidth：600pxmedia screen and max-width：600pxul li afont-size：1em； imgwidth：400px图3 media规那么的自适应效果3.2 l

11、ink标签媒体查询link标签媒体查询通过标签实现判断屏幕大小并加载相应的CSS文件，以实现更多的网页外观款式的自适应优化。代码如下：4 CSS3 Flexbox弹性布局Flexbox弹性布局是由CSS3支持的一个新的布局形式，旨在提供一个更加有效的方式制定、调整和分布一个容器里的工程布局，即使他们的大小是未知或者是动态的5。Flexbox布局由伸缩容器和伸缩工程内容模块组成。通过设置元素的display属性为flex或inline-flex而得到一个伸缩容器。以下CSS3代码显示不换行伸缩容器的弹性排版效果：.flex-container display：flex； /指定容器为flex弹性

12、布局flex-direction：row； /容器内工程排列方向为横向自左向右background-color：#FDAFB0；list-style-type：none；padding：10px； .flex-item height：100px；width：100px；/工程盒子的高宽虽然设定为100px，仍能受其容器盒子控制而弹性缩放background-color： #FBFFC1；margin：2px；text-align：center；font-size：16px；line-height：80px； 当改变阅读器宽度或更换小分辨率显示器时，网页的自适应效果如图4所示。图4 “不换行Fl

13、exbox弹性布局的自适应效果Flexbox弹性布局中的内容模块不仅能横向排列，还可以纵向排列。假设在CSS类选择器“.flex-container中添加：“flex-wrap：wrap；，即将窗口内工程的换行方式设为可换行，那么工程小盒子改为自适应换行排列。当用阅读该网页，竖放和横放阅读时，网页自适应效果如图5。图5 “换行Flexbox弹性布局的竖放/横放自适应效果5 完毕语HTML5与CSS3技术结合，可使网页既具有新颖大气的界面效果，也具备平安、稳健、高效的平台通用功能。在网页设计与制作教学中，自适应网页设计灵敏性高，实际应用性强，本文讨论了等阅读设备多样化环境下HTML5网页通用性设

14、计方法。其中，流式布局和响应式布局较为传统且易学易实现，而Flexbox布局那么能更好地操作和控制内部的子元素，具有更灵敏更多效果的设计性。相比之下，Flexbox布局的优势非常明显：不必太关心容器盒子是否有足够的空间，每个子工程可以自动分配到容器的宽高比例；当窗口或容器大小改变时，不用担忧子工程会破坏布局；可以方便地让子工程在容器中进展的左右或上下对齐，设置他们排成行或排成列；无需修改构造就可以改变他们的显示顺序。终端自适应网页设计是网页根底学习的知识拓展，是具备实用意义的前端设计技术，教学上，需要循序渐进，由易入难地理解、掌握各种自适应方法，才能真正实现学有所成、学以致用。参考文献References：1 陈建孝，江玉珍，陆锡聪，余晓春.网页制作案例教程M.人民邮电出版社，2021.2 周美玲，陈书