摘要自從W3C組織發(fā)布Web2.0標(biāo)準(zhǔn)以來(lái)，國(guó)內(nèi)外許多網(wǎng)站依照DIV+CSS的布局標(biāo)準(zhǔn)重新構(gòu)建網(wǎng)站，然而在《網(wǎng)頁(yè)制作》課程的教學(xué)中，許多教師依然使用表格布局模式進(jìn)行教學(xué)，這顯然不適應(yīng)網(wǎng)頁(yè)技術(shù)發(fā)展的趨勢(shì)。本文就如何更好按照Web2.0標(biāo)準(zhǔn)化布局進(jìn)行《網(wǎng)頁(yè)制作》課程教學(xué)進(jìn)行探討。

關(guān)鍵字Web2.0網(wǎng)頁(yè)制作標(biāo)準(zhǔn)化布局

中圖分類號(hào):G633.67文獻(xiàn)標(biāo)識(shí)碼:A

1 引言

在早期網(wǎng)頁(yè)設(shè)計(jì)中，HTML的表格(Table)僅用來(lái)列舉數(shù)據(jù)，隨著互聯(lián)網(wǎng)的發(fā)展，HTML為了表現(xiàn)頁(yè)面，表格成為了一種布局工具。網(wǎng)頁(yè)失去了文檔加結(jié)構(gòu)的意義而變得越來(lái)越復(fù)雜，代碼變得幾乎不可理解。設(shè)計(jì)者不得不借助“所見即所得”(WYSIWYG)的軟件工具來(lái)處理大量無(wú)意義的標(biāo)簽。

Web2.0標(biāo)準(zhǔn)的內(nèi)容之一就是要將網(wǎng)頁(yè)的內(nèi)容與表現(xiàn)分離，同時(shí)要求HTML文檔要具有良好的結(jié)構(gòu)。采用層(DIV)布局，并且使用層疊樣式表(CSS)來(lái)實(shí)現(xiàn)頁(yè)面外觀的定義。這就是目前流行的DIV+CSS標(biāo)準(zhǔn)化布局。

2 使用標(biāo)準(zhǔn)化布局的好處

對(duì)網(wǎng)站設(shè)計(jì)者有以下好處:符合W3C標(biāo)準(zhǔn)，保證所設(shè)計(jì)的網(wǎng)站不會(huì)因?yàn)閷?lái)網(wǎng)絡(luò)應(yīng)用的升級(jí)而被淘汰;內(nèi)容與表現(xiàn)的分離，使頁(yè)面和樣式的調(diào)整變得更加方便;提高網(wǎng)站易用性，支持瀏覽器的向后兼容;代碼簡(jiǎn)潔，更容易被搜索引擎搜索。

對(duì)網(wǎng)站瀏覽者有以下好處:基于標(biāo)準(zhǔn)構(gòu)建的網(wǎng)站文件下載與頁(yè)面顯示速度更快;內(nèi)容能被更多的用戶和更廣泛的設(shè)備所訪問;用戶能夠通過樣式選擇定制自己的表現(xiàn)界面;所有頁(yè)面都能提供適于打印的版本。

3 如何有效根據(jù)標(biāo)準(zhǔn)化布局進(jìn)行網(wǎng)頁(yè)制作教學(xué)活動(dòng)

3.1 不采用表格布局模式教學(xué)

基于Web2.0的標(biāo)準(zhǔn)化布局就是要改善表格布局帶來(lái)代碼混亂的局面，因此在教學(xué)中，應(yīng)該在學(xué)生慣用表格布局之前，強(qiáng)調(diào)表格布局的不合理性，通過簡(jiǎn)單的實(shí)例，對(duì)比表格布局和DIV+CSS標(biāo)準(zhǔn)布局的區(qū)別，使學(xué)生理解內(nèi)容和表現(xiàn)分離的真正含義。

在教學(xué)中，教師應(yīng)從簡(jiǎn)單的設(shè)計(jì)圖入手，通過分析、拆分、組裝設(shè)計(jì)圖，整理CSS文檔，讓學(xué)生從中了解標(biāo)準(zhǔn)化布局的整個(gè)過程，認(rèn)識(shí)到定位和樣式在標(biāo)準(zhǔn)化布局中的重要地位，理解CSS盒模型 (Box Model) 中處理元素內(nèi)容、內(nèi)邊距、邊框和外邊距的方法;向展示學(xué)生正確的網(wǎng)頁(yè)布局方法。

3.2 脫離“所見即所得”的軟件進(jìn)行網(wǎng)頁(yè)制作教學(xué)

Dreamweaver、Frontpage等 “所見即所得”的可視化軟件大大降低了學(xué)生學(xué)習(xí)網(wǎng)頁(yè)制作的難度，但也帶來(lái)不利的影響:學(xué)生對(duì)網(wǎng)頁(yè)布局的認(rèn)識(shí)停留在網(wǎng)頁(yè)界面這個(gè)表層，而對(duì)底層的代碼并不了解。這意味著他們將難于理解Web2.0標(biāo)準(zhǔn)化布局中提出的內(nèi)容和表現(xiàn)分離的思想。即使能用使用DIV+CSS手段進(jìn)行網(wǎng)頁(yè)布局，也會(huì)陷入濫用層與類的誤區(qū)，重返表格布局中內(nèi)容和表現(xiàn)混亂的局面。

在教學(xué)中，使用記事本和EditPlus等文本編輯軟件引導(dǎo)學(xué)生進(jìn)行代碼編輯。通過教學(xué)實(shí)踐了解到，學(xué)生在直接面對(duì)代碼時(shí)，對(duì)CSS 中的“普通流”、“浮動(dòng)”和“絕對(duì)定位”等基本定位機(jī)制的理解，要比在使用“所見即所得”的軟件時(shí)更為容易接受。

3.3 引入“任務(wù)驅(qū)動(dòng)”思想提高學(xué)生學(xué)習(xí)代碼興趣

“任務(wù)驅(qū)動(dòng)”是一種建立在建構(gòu)主義教學(xué)理論基礎(chǔ)上的教學(xué)法。它強(qiáng)調(diào)學(xué)生的學(xué)習(xí)活動(dòng)必須與任務(wù)或問題相結(jié)合，用探索問題的形式來(lái)引動(dòng)和維持學(xué)生學(xué)習(xí)興趣和動(dòng)機(jī)。教師讓學(xué)生在一序列任務(wù)的驅(qū)動(dòng)下展開活動(dòng)，引導(dǎo)學(xué)生循序漸進(jìn)地完成網(wǎng)頁(yè)制作，從中了解HTML代碼的規(guī)則，CSS表示頁(yè)面的方法，克服對(duì)代碼的恐懼心理，提高學(xué)習(xí)代碼的興趣。

(1)設(shè)計(jì)任務(wù)，創(chuàng)造情景。教師先創(chuàng)設(shè)盡可能真實(shí)的學(xué)習(xí)情境，以學(xué)習(xí)者為中心，讓學(xué)生自主學(xué)習(xí)。學(xué)生根據(jù)教師給定的網(wǎng)頁(yè)模版(部分代碼)和要求(補(bǔ)充代碼)，用記事本逐行編寫代碼來(lái)完成任務(wù)。從而習(xí)得代碼編寫的經(jīng)驗(yàn)，養(yǎng)成自主學(xué)習(xí)HTML代碼的習(xí)慣。

(2)觀察思考，小組協(xié)作。教師采用小組協(xié)作學(xué)習(xí)的模式，將網(wǎng)頁(yè)布局的各種變式呈現(xiàn)在學(xué)生面前，要求學(xué)生分小組討論和分析，用以解決不同瀏覽器布局的差異。這種模式的優(yōu)點(diǎn)在于，可以通過小組討論、協(xié)商，促進(jìn)知識(shí)的社會(huì)性建構(gòu)和集體智慧的形成，培養(yǎng)學(xué)生的協(xié)作創(chuàng)新能力。在軟件的使用上由記事本轉(zhuǎn)為EditPlus等功能更為強(qiáng)大的文本編輯軟件，減少代碼的輸入量，同時(shí)進(jìn)一步強(qiáng)化學(xué)生對(duì)代碼編寫的認(rèn)知。

(3)完成任務(wù)，共同評(píng)價(jià)。通過學(xué)生自評(píng)、同學(xué)互評(píng)、教師評(píng)價(jià)等方法對(duì)學(xué)生完成的作品進(jìn)行評(píng)價(jià)，從而去發(fā)現(xiàn)作品中的閃光點(diǎn)或者是指出其中存在的問題，使學(xué)生能(下轉(zhuǎn)第103頁(yè))(上接第94頁(yè))互相交流，互相激勵(lì)，取長(zhǎng)補(bǔ)短，從而得到更為清晰的思路、方法和知識(shí)結(jié)構(gòu)。在任務(wù)評(píng)價(jià)環(huán)節(jié)中，能使學(xué)生頁(yè)面設(shè)計(jì)的能力得到進(jìn)一步提高。

4 結(jié)語(yǔ)

2005年來(lái)，國(guó)內(nèi)各大網(wǎng)站掀起推廣Web2.0標(biāo)準(zhǔn)化布局的熱潮，在此環(huán)境下要求從事網(wǎng)頁(yè)設(shè)計(jì)的設(shè)計(jì)師必須掌握并正確使用DIV+CSS標(biāo)準(zhǔn)化布局。在具體教學(xué)中，由于教師理念，DIV布局視角的新穎性，CSS代碼的復(fù)雜性和瀏覽器的兼容性等問題，使得在推行網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)化布局的路上遇到了一些困難。但作為教師，應(yīng)當(dāng)有責(zé)任調(diào)整自己的教學(xué)思路，改變觀念，及時(shí)更新自身知識(shí)結(jié)構(gòu)，用新的設(shè)計(jì)視角和教學(xué)方式來(lái)指導(dǎo)學(xué)生掌握最新的網(wǎng)頁(yè)設(shè)計(jì)與制作的技巧。