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

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

2、個(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)頁設(shè)計(jì)課程已轉(zhuǎn)向基于HTML5教學(xué)，但在制作方法推介上卻還沿襲傳統(tǒng)的面向PC機(jī)固定的大屏設(shè)計(jì)模式，并沒有突出HTML5設(shè)計(jì)上的可移植性和靈活性。本文主要探討終端多樣化環(huán)境下各種網(wǎng)頁自適應(yīng)布局的實(shí)現(xiàn)方法，重點(diǎn)介紹HTML5CSS3的彈性網(wǎng)頁布局方法，拓展實(shí)用知識(shí)點(diǎn)，

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

4、百分比布局的網(wǎng)頁自適應(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ū)挾茸冃?，則后面的浮動(dòng)框會(huì)自動(dòng)被擠到下一行。其自適應(yīng)顯示方式如圖2所示。該網(wǎng)頁設(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í)，容