基于終端自適應(yīng)的網(wǎng)頁(yè)設(shè)計(jì)教學(xué)拓展

江玉珍 朱映輝 陳建孝 陸錫聰 余曉春

摘 要： 手機(jī)等移動(dòng)設(shè)備已成為網(wǎng)頁(yè)的重要應(yīng)用終端，針對(duì)常規(guī)網(wǎng)頁(yè)設(shè)計(jì)課程中固化網(wǎng)頁(yè)大小的教學(xué)局限，借助HTML5和CSS3新技術(shù)，提出基于終端自適應(yīng)的網(wǎng)頁(yè)設(shè)計(jì)教學(xué)拓展。通過對(duì)流式、響應(yīng)式及彈性盒子等多種終端自適應(yīng)方法的剖析及優(yōu)缺點(diǎn)的探討，突出自適應(yīng)網(wǎng)頁(yè)的實(shí)際應(yīng)用意義和CSS3 Flexbox彈性布局的靈活性，增強(qiáng)網(wǎng)頁(yè)課程的教學(xué)深度，提升學(xué)習(xí)質(zhì)量和學(xué)習(xí)意義。

關(guān)鍵詞： 網(wǎng)頁(yè)設(shè)計(jì)； 終端； 自適應(yīng)； 彈性盒子； CSS3

中圖分類號(hào)：TP393.092 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：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 引言

作為上網(wǎng)的主要依托方式，網(wǎng)站網(wǎng)頁(yè)一直在網(wǎng)絡(luò)應(yīng)用中起著舉足輕重的媒介作用，《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程也常作為專業(yè)信息技術(shù)課或計(jì)算機(jī)公共基礎(chǔ)課在高校中推廣教學(xué)[1]。隨著各種智能移動(dòng)設(shè)備、掌上電腦等電子產(chǎn)品的迅猛推出，同一個(gè)網(wǎng)站的網(wǎng)頁(yè)的受訪終端可能是手機(jī)、平板和PC機(jī)等，這些設(shè)備的屏幕分辨率大相徑庭。如何保證網(wǎng)頁(yè)在各種終端上均能獲得友好、美觀的顯示效果以及穩(wěn)定、通用的操作功能將是一個(gè)網(wǎng)站得以長(zhǎng)遠(yuǎn)立足的根本條件。對(duì)此，新標(biāo)準(zhǔn)HTML5應(yīng)運(yùn)而生，HTML5的目標(biāo)就是使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求，為桌面和移動(dòng)平臺(tái)帶來無縫銜接的豐富內(nèi)容[2]。

雖然目前很多網(wǎng)頁(yè)設(shè)計(jì)課程已轉(zhuǎn)向基于HTML5教學(xué)，但在制作方法推介上卻還沿襲傳統(tǒng)的面向PC機(jī)固定的大屏設(shè)計(jì)模式，并沒有突出HTML5設(shè)計(jì)上的可移植性和靈活性。本文主要探討終端多樣化環(huán)境下各種網(wǎng)頁(yè)自適應(yīng)布局的實(shí)現(xiàn)方法，重點(diǎn)介紹HTML5+CSS3的彈性網(wǎng)頁(yè)布局方法，拓展實(shí)用知識(shí)點(diǎn)，填補(bǔ)常規(guī)網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中多樣化應(yīng)用的不足。

1 HTML5網(wǎng)頁(yè)的縮放設(shè)計(jì)

使用手機(jī)等小屏幕設(shè)備瀏覽網(wǎng)站網(wǎng)頁(yè)時(shí)，許多傳統(tǒng)網(wǎng)頁(yè)常會(huì)自動(dòng)縮小至屏幕范圍內(nèi)。雖然這種顯示可以快速地抓住整個(gè)網(wǎng)頁(yè)的概構(gòu)，但卻可能因?yàn)樽煮w太小而難以辨識(shí)網(wǎng)頁(yè)的細(xì)節(jié)內(nèi)容。為提高移動(dòng)設(shè)備顯示性能，HTML5提倡使用viewport元標(biāo)簽，當(dāng)網(wǎng)頁(yè)加載時(shí)，手機(jī)瀏覽器就會(huì)先把頁(yè)面放在一個(gè)虛擬的“窗口”（viewport）中，通常這個(gè)虛擬的“窗口”比屏幕寬，網(wǎng)頁(yè)不會(huì)被擠到很小的窗口中，用戶可以通過平移和縮放來瀏覽網(wǎng)頁(yè)的不同部分。以下代碼實(shí)現(xiàn)按原始大小顯示網(wǎng)頁(yè)，不自動(dòng)縮小，允許手動(dòng)縮放，縮放范圍為初始大小的0.5～2.0倍。

2 流式網(wǎng)頁(yè)布局

流式布局是通過改變?cè)氐呐帕羞_(dá)到適應(yīng)設(shè)計(jì)尺寸的目的。流式布局的網(wǎng)頁(yè)可以這樣理解：頁(yè)面上內(nèi)容模塊就像液體一樣，從左到右從上到下地流動(dòng)且自適應(yīng)地排列。流式布局常使用百分比分配技術(shù)和浮動(dòng)技術(shù)。百分比布局模式能實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容模塊的自動(dòng)橫向伸縮；浮動(dòng)布局模式則能依據(jù)瀏覽器或容器盒子寬度讓各內(nèi)容模塊自動(dòng)排列成多行[3]。

2.1 百分比布局

百分比布局使用百分比來設(shè)置各個(gè)部分的具體寬度以用來適應(yīng)不同的分辨率。在百分比布局模式下，各內(nèi)容模塊的寬度會(huì)根據(jù)瀏覽器寬度進(jìn)行自動(dòng)等比縮放，其自適應(yīng)顯示方式如圖1所示。該網(wǎng)頁(yè)設(shè)計(jì)模式的優(yōu)點(diǎn)是技術(shù)上容易為用戶接受也容易實(shí)現(xiàn)，但主要缺點(diǎn)是，當(dāng)需要添加新內(nèi)容模塊時(shí)，所有之前的內(nèi)容模塊可能都要重設(shè)百分比，更新的工作量大。

圖1 百分比布局的網(wǎng)頁(yè)自適應(yīng)模式

2.2 浮動(dòng)布局

浮動(dòng)布局利用對(duì)象的float屬性實(shí)現(xiàn)內(nèi)容模塊（浮動(dòng)框）的自動(dòng)排列。常設(shè)float屬性值為”left”，浮動(dòng)框自動(dòng)向左移動(dòng)靠攏，直到它的左邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹梗舭驅(qū)挾茸冃。瑒t后面的浮動(dòng)框會(huì)自動(dòng)被“擠”到下一行。其自適應(yīng)顯示方式如圖2所示。該網(wǎng)頁(yè)設(shè)計(jì)模式的優(yōu)點(diǎn)是可以隨時(shí)添加新的內(nèi)容模塊而不用修改之前模塊的屬性，缺點(diǎn)是其浮動(dòng)方向只有水平向左浮動(dòng)或向右浮動(dòng)，且當(dāng)各內(nèi)容盒子的高度不協(xié)調(diào)時(shí)，容易造成較大的版面空白區(qū)。

圖2 浮動(dòng)布局的網(wǎng)頁(yè)自適應(yīng)模式

3 響應(yīng)式網(wǎng)頁(yè)布局

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是指可以自動(dòng)識(shí)別屏幕寬度、并作出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)[4]。其關(guān)鍵技術(shù)是通過CSS3引入Media Query模塊自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件或執(zhí)行相應(yīng)的CSS樣式代碼。響應(yīng)式網(wǎng)頁(yè)布局常使用“CSS的@media規(guī)則”和“l(fā)ink標(biāo)簽媒體查詢”兩種方式實(shí)現(xiàn)自適應(yīng)顯示。

3.1 @media規(guī)則

@media規(guī)則添加在網(wǎng)頁(yè)的