陳孟臻 羅 杰 蘇 廣

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

關鍵字Web2.0網(wǎng)頁制作標準化布局

中圖分類號:G633.67文獻標識碼:A

1 引言

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

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

2 使用標準化布局的好處

對網(wǎng)站設計者有以下好處:符合W3C標準,保證所設計的網(wǎng)站不會因為將來網(wǎng)絡應用的升級而被淘汰;內(nèi)容與表現(xiàn)的分離,使頁面和樣式的調(diào)整變得更加方便;提高網(wǎng)站易用性,支持瀏覽器的向后兼容;代碼簡潔,更容易被搜索引擎搜索。

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

3 如何有效根據(jù)標準化布局進行網(wǎng)頁制作教學活動

3.1 不采用表格布局模式教學

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

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

3.2 脫離“所見即所得”的軟件進行網(wǎng)頁制作教學

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

在教學中,使用記事本和EditPlus等文本編輯軟件引導學生進行代碼編輯。通過教學實踐了解到,學生在直接面對代碼時,對CSS 中的“普通流”、“浮動”和“絕對定位”等基本定位機制的理解,要比在使用“所見即所得”的軟件時更為容易接受。

3.3 引入“任務驅(qū)動”思想提高學生學習代碼興趣

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

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

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

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

4 結語

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