網(wǎng)頁(yè)設(shè)計(jì)課程中的教學(xué)方法

王新儒 劉慧娟 趙秋紅

摘 要：網(wǎng)絡(luò)前端開(kāi)發(fā)技術(shù)發(fā)展迅速，正如前端開(kāi)發(fā)技術(shù)的快速發(fā)展以及對(duì)前端開(kāi)發(fā)人員的要求已經(jīng)發(fā)生了巨大變化一樣，在高等教育中的網(wǎng)頁(yè)設(shè)計(jì)課程也必須做出相應(yīng)調(diào)整，教師在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的教學(xué)時(shí)要從帶領(lǐng)學(xué)生建立感性認(rèn)識(shí)，展示好的代碼，一步步編寫(xiě)代碼，慢慢地使示例更加復(fù)雜等幾個(gè)方面入手。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；教學(xué)方法；高等教育

網(wǎng)絡(luò)前端開(kāi)發(fā)技術(shù)已經(jīng)取得了迅速的發(fā)展，在2003年的時(shí)候，一名前端開(kāi)發(fā)人員只需要通過(guò)HTML和CSS以及簡(jiǎn)單的JAVASCRIPT代碼，就可以設(shè)計(jì)出一個(gè)網(wǎng)站，供人們?yōu)g覽訪問(wèn)。但是現(xiàn)在，一個(gè)合格的前端開(kāi)發(fā)者必需精通HTML、CSS、JAVASCRIPT和JQUERY，CSS 預(yù)處理等新技術(shù)，同時(shí)還要具有響應(yīng)式設(shè)計(jì)和移動(dòng)優(yōu)先的設(shè)計(jì)理念。[1]

在本文中，我將首先介紹兩種常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)教學(xué)安排，而后將著重談?wù)勅绾螌?duì)一名網(wǎng)頁(yè)設(shè)計(jì)新生進(jìn)行有效的教學(xué)。

一、以可視化圖形界面進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)教學(xué)

在大多數(shù)大學(xué)的網(wǎng)頁(yè)設(shè)計(jì)課程設(shè)計(jì)中，學(xué)生將會(huì)在PHOTOSHOP或FIRWORKS等可視化軟件中，以圖形化的形象創(chuàng)建網(wǎng)站布局。學(xué)生可能會(huì)從一個(gè)現(xiàn)有網(wǎng)站的截圖開(kāi)始，在他們自己的圖片和內(nèi)容上分層，以創(chuàng)建一個(gè)獨(dú)特的頁(yè)面設(shè)計(jì)。

這種課程安排首先是學(xué)生掌握使用軟件的基本知識(shí)，課程學(xué)習(xí)中也會(huì)涉及到可用性、色彩、布局、字體、負(fù)空間、圖像質(zhì)量和位置等方面的內(nèi)容，而并不涉及代碼。這種授課安排能使學(xué)生在他們的腦海中勾畫(huà)出一個(gè)網(wǎng)頁(yè)并在編寫(xiě)第一行代碼之前清楚他們想要構(gòu)建的內(nèi)容，而不太關(guān)心網(wǎng)頁(yè)的編碼方式。[2]

二、學(xué)習(xí)HTML 和 CSS代碼

在典型的HTML和CSS課程中，學(xué)生會(huì)系統(tǒng)學(xué)習(xí)標(biāo)記和樣式的定義。學(xué)生將學(xué)會(huì)從頭開(kāi)始創(chuàng)建網(wǎng)頁(yè)，編寫(xiě)第一行網(wǎng)頁(yè)代碼，操作 HTML、CSS 和圖像文件。將會(huì)對(duì)標(biāo)簽、選擇器、盒子模型以及盒子的浮動(dòng)和定位得到充分了解。在此學(xué)習(xí)過(guò)程中也會(huì)對(duì)瀏覽器的兼容性問(wèn)題有所涉及。

從根本上講，這種教學(xué)安排沒(méi)有問(wèn)題。但學(xué)生要知道手動(dòng)寫(xiě)的代碼必需與HTML 和 CSS標(biāo)準(zhǔn)兼容，要按照標(biāo)準(zhǔn)語(yǔ)言要求書(shū)寫(xiě)代碼。同時(shí)，授課過(guò)程中注意擴(kuò)展最新的知識(shí)和技術(shù)應(yīng)用發(fā)展，教學(xué)中及早引入網(wǎng)頁(yè)布局的思想，尤其是當(dāng)學(xué)生掌握了浮動(dòng)和定位以后，讓學(xué)生在宏觀層面上對(duì)網(wǎng)頁(yè)布局進(jìn)行規(guī)劃，防止過(guò)分糾纏于某個(gè)技術(shù)細(xì)節(jié)的實(shí)現(xiàn)，要培養(yǎng)學(xué)生由上及下的設(shè)計(jì)思路。課堂教學(xué)中多做一些案例，如設(shè)計(jì)兩列和三列的布局，或是更復(fù)雜的1-2-1、1-3-1等布局。當(dāng)頁(yè)面布局完成后，再考慮在某個(gè)區(qū)塊內(nèi)實(shí)現(xiàn)具體的內(nèi)容和完善細(xì)節(jié)。[3][4]

三、如何對(duì)網(wǎng)頁(yè)設(shè)計(jì)的新生進(jìn)行有效授課

許多教師教授新生網(wǎng)頁(yè)設(shè)計(jì)課程有些枯燥和困難。主要原因是初學(xué)者對(duì)于語(yǔ)法、文件管理、樣式表中樣式的順序、頁(yè)面的正確標(biāo)記等等接受起來(lái)有一定難度，也需要一些時(shí)間。而且開(kāi)始階段設(shè)計(jì)的頁(yè)面也比較簡(jiǎn)單，很難引起所有學(xué)生的興趣。建議可以從以下幾個(gè)方面入手。

（1）建立學(xué)生的感性認(rèn)識(shí)。找一些大多數(shù)人都感興趣的主題。例如，什么是 HTML？縮寫(xiě)代表什么？它在哪里開(kāi)發(fā)的？HTML 可以獨(dú)立于網(wǎng)頁(yè)嗎？誰(shuí)需要知道 HTML？CSS 如何與 HTML 匹配？這些問(wèn)題不需要花太長(zhǎng)時(shí)間，但是可以通過(guò)這些問(wèn)題讓學(xué)生建立起一種“大局觀”。對(duì)于具體的技術(shù)細(xì)節(jié)當(dāng)他們?cè)诰帉?xiě)頁(yè)面時(shí)，可以通過(guò)幻燈片或白板進(jìn)行講授。一定要讓學(xué)生參與討論，提防在學(xué)習(xí)中出現(xiàn)大的方向上的困惑。在用代碼具體實(shí)現(xiàn)設(shè)計(jì)之前，確保他們了解最終目的和規(guī)劃，否則代碼將毫無(wú)意義，學(xué)習(xí)也會(huì)陷入被動(dòng)。

（2）一步步編寫(xiě)代碼，慢慢地使示例更加復(fù)雜。教學(xué)時(shí)不要同時(shí)介紹太多的項(xiàng)目，以免失去重點(diǎn)。例如，當(dāng)引入 CSS 時(shí)，首先要為 HTML 標(biāo)記編寫(xiě)樣式。顯示樣式的BODY標(biāo)記可以控制整個(gè)網(wǎng)頁(yè)，包括背景顏色、字體、大小等。每次編寫(xiě)一個(gè)屬性，保存更改并在瀏覽器中顯示它，這樣學(xué)生就能準(zhǔn)確地看到哪一行 CSS 控制了頁(yè)面上的哪個(gè)元素。這一點(diǎn)對(duì)于學(xué)生準(zhǔn)確理解知識(shí)點(diǎn)很重要。[5]

（3）課堂上要不時(shí)提問(wèn)。在進(jìn)行某項(xiàng)技術(shù)的具體操作前，教師要先設(shè)置幾個(gè)疑問(wèn)，并讓學(xué)生給出相對(duì)的解決方案。如果他們可以從概念上解釋這個(gè)概念，那么代碼編寫(xiě)就變得簡(jiǎn)單了。例如，如果你已用藍(lán)色文本樣式化了網(wǎng)頁(yè)的正文，請(qǐng)?jiān)儐?wèn)學(xué)生如何使主標(biāo)題變?yōu)榧t色，如果學(xué)生可以解釋?zhuān)阈枰阅撤N方式改變文本H1標(biāo)記為紅色，并要向他們展示如何將其寫(xiě)為代碼。

（4）及早規(guī)范語(yǔ)法規(guī)則。學(xué)生在剛開(kāi)始學(xué)習(xí)時(shí)，會(huì)經(jīng)常忘記關(guān)閉標(biāo)簽，忘記分號(hào)，大括號(hào)和小括號(hào)弄混，甚至在中文輸入下寫(xiě)入相關(guān)符號(hào)等等。發(fā)現(xiàn)這些錯(cuò)誤有時(shí)很容易，有時(shí)候也很困難。這時(shí)一定要養(yǎng)成一種良好的編碼習(xí)慣，比如在每寫(xiě)完一部分功能時(shí)，就要查看輸出效果，有問(wèn)題早發(fā)現(xiàn)，也好解決，決不能等全部代碼輸入完畢再進(jìn)行驗(yàn)證，往往很難定位問(wèn)題的所在。同時(shí)要規(guī)范編碼，嚴(yán)格按最嚴(yán)標(biāo)準(zhǔn)來(lái)寫(xiě)，從一開(kāi)始就養(yǎng)成好的習(xí)慣，后面的學(xué)習(xí)可以節(jié)省不必要的時(shí)間浪費(fèi)。

教師教導(dǎo)學(xué)生的工作非常重要，要了解不同教學(xué)方法對(duì)學(xué)生的影響，并掌握新生的教學(xué)規(guī)律。平面設(shè)計(jì)、HTML和CSS是專(zhuān)業(yè)設(shè)計(jì)師每天工作的關(guān)鍵技能。編寫(xiě)干凈、高效的代碼、了解如何調(diào)試問(wèn)題、研究解決問(wèn)題的更好方法、解決跨瀏覽器兼容性問(wèn)題-這些都是前端開(kāi)發(fā)人員生活中的基本概念。教師要用新鮮而又生動(dòng)的素材，并確保學(xué)生有一個(gè)扎實(shí)的理解，然后再進(jìn)入下一個(gè)主題，為他們的職業(yè)打開(kāi)一個(gè)好的開(kāi)端。

參考文獻(xiàn)：

[1]任翠池，姜晗.《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教學(xué)改革研究與實(shí)踐.課程教育研究，2013（22）：217-217.

[2]韓陵宜.《網(wǎng)頁(yè)制作》課程教學(xué)及考核方式的研究與探索.電腦知識(shí)與技術(shù)，2008，2（14）：122-124.

[3]張翔，賈雪倩.《網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)改革的研究和探索.福建電腦，2011，27（1）：39-40.

[4]李偉，鄧紅濤.《網(wǎng)頁(yè)設(shè)計(jì)》課程實(shí)踐性教學(xué)改革與創(chuàng)新研究.新課程研究：高等教育，2011（12）：103-104.

[5]任雪蓮.高職《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教學(xué)改革的實(shí)踐與探索.職業(yè)技術(shù)，2011（2）：14.

作者簡(jiǎn)介：王新儒（1983-），男，專(zhuān)業(yè)課教師。