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

1、基于終端自適應(yīng)的網(wǎng)頁設(shè)計教學(xué)拓展基于終端自適應(yīng)的網(wǎng)頁設(shè)計教學(xué)拓展作為上網(wǎng)的主要依托方式，網(wǎng)站網(wǎng)頁一直在網(wǎng)絡(luò)應(yīng)用中起著舉足輕重的媒介作用，《網(wǎng)頁設(shè)計與制作》課程也常作為專業(yè)信息技術(shù)課或計算機公共基礎(chǔ)課在高校中推廣教學(xué)[1]。隨著各種智能移動設(shè)備、掌上電腦等電子產(chǎn)品的迅猛推出，同一個網(wǎng)站的網(wǎng)頁的受訪終端可能是手機、平板和PC機等，這些設(shè)備的屏幕分辨率大相徑庭。如何保證網(wǎng)頁在各種終端上均能獲得友好、美觀的顯示效果以及穩(wěn)定、通用的操作功能將是一

2、個網(wǎng)站得以長遠(yuǎn)立足的根本條件。對此，新標(biāo)準(zhǔn)HTML5應(yīng)運而生，HTML5的目標(biāo)就是使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求，為桌面和移動平臺帶來無縫銜接的豐富內(nèi)容[2]。雖然目前很多網(wǎng)頁設(shè)計課程已轉(zhuǎn)向基于HTML5教學(xué)，但在制作方法推介上卻還沿襲傳統(tǒng)的面向PC機固定的大屏設(shè)計模式，并沒有突出HTML5設(shè)計上的可移植性和靈活性。本文主要探討終端多樣化環(huán)境下各種網(wǎng)頁自適應(yīng)布局的實現(xiàn)方法，重點介紹HTML5CSS3的彈性網(wǎng)頁布局方法，拓展實用知識點，

3、填補常規(guī)網(wǎng)頁設(shè)計教學(xué)中多樣化應(yīng)用的不足。1HTML5網(wǎng)頁的縮放設(shè)計使用手機等小屏幕設(shè)備瀏覽網(wǎng)站網(wǎng)頁時，許多傳統(tǒng)網(wǎng)頁常會自動縮小至屏幕范圍內(nèi)。雖然這種顯示可以快速地抓住整個網(wǎng)頁的概構(gòu)，但卻可能因為字體太小而難以辨識網(wǎng)頁的細(xì)節(jié)內(nèi)容。為提高移覽器寬度進行自動等比縮放，其自適應(yīng)顯示方式如圖1所示。該網(wǎng)頁設(shè)計模式的優(yōu)點是技術(shù)上容易為用戶接受也容易實現(xiàn)，但主要缺點是，當(dāng)需要添加新內(nèi)容模塊時，所有之前的內(nèi)容模塊可能都要重設(shè)百分比，更新的工作量大。圖1

4、百分比布局的網(wǎng)頁自適應(yīng)模式2.2浮動布局浮動布局利用對象的float屬性實現(xiàn)內(nèi)容模塊（浮動框）的自動排列。常設(shè)float屬性值為left，浮動框自動向左移動靠攏，直到它的左邊緣碰到包含框或另一個浮動框的邊框為止，若包含框?qū)挾茸冃?，則后面的浮動框會自動被擠到下一行。其自適應(yīng)顯示方式如圖2所示。該網(wǎng)頁設(shè)計模式的優(yōu)點是可以隨時添加新的內(nèi)容模塊而不用修改之前模塊的屬性，缺點是其浮動方向只有水平向左浮動或向右浮動，且當(dāng)各內(nèi)容盒子的高度不協(xié)調(diào)時，容