江玉珍 朱映辉 陈建孝 陆锡聪 余晓春

摘 要： 手机等移动设备已成为网页的重要应用终端，针对常规网页设计课程中固化网页大小的教学局限，借助HTML5和CSS3新技术，提出基于终端自适应的网页设计教学拓展。通过对流式、响应式及弹性盒子等多种终端自适应方法的剖析及优缺点的探讨，突出自适应网页的实际应用意义和CSS3 Flexbox弹性布局的灵活性，增强网页课程的教学深度，提升学习质量和学习意义。

关键词： 网页设计； 终端； 自适应； 弹性盒子； CSS3

中图分类号：TP393.092 文献标志码：A 文章编号：1006-8228（2018）03-70-03

Teaching extension for design of terminal-adaptive webpage

Jiang Yuzhen， Zhu Yinghui， Chen Jianxiao， Lu Xicong， Yu Xiaochun

（School of Computer Information Engineering， Hanshan Normal University， Chaozhou， Guangdong 521041， China）

Abstract： Mobile phone and other mobile devices have become the important application terminals of web 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 FlowLayout， 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； CSS3

0 引言

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

虽然目前很多网页设计课程已转向基于HTML5教学，但在制作方法推介上却还沿袭传统的面向PC机固定的大屏设计模式，并没有突出HTML5设计上的可移植性和灵活性。本文主要探讨终端多样化环境下各种网页自适应布局的实现方法，重点介绍HTML5+CSS3的弹性网页布局方法，拓展实用知识点，填补常规网页设计教学中多样化应用的不足。……