導言：作(zuo)為(wei)寫作(zuo)愛好者(zhe)，不可(ke)錯過為(wei)您精(jing)心(xin)挑選的(de)(de)1篇網(wang)頁設(she)計課程(cheng)教學研究，它(ta)們將(jiang)為(wei)您的(de)(de)寫作(zuo)提供(gong)全新的(de)(de)視角，我們衷心(xin)期(qi)待(dai)您的(de)(de)閱讀，并希望這些內容(rong)能(neng)為(wei)您提供(gong)靈感和參考。

網絡前端開發技術已經取得了迅速的發展，在2003年的時候，一名前端開發人員只需要通過HTML和CSS以及簡單的JAVASCＲIPT代碼，就可以設計出一個網站，供人們瀏覽訪問。但是現在，一個合格的前端開發者必需精通HTML、CSS、JAVASCＲIPT和JQUEＲY，CSS預處理等新技術，同時還要具有響應式設計和移動優先的設計理念。在本文中，我將首先介紹兩種常見的網頁設計教學安排，而后(hou)將著重談(tan)談(tan)如(ru)何對一名網頁設(she)計新生進行有效的教學。

一、以可視化圖形界面進行網頁設計教學

在大多數大學的網頁設計課程設(she)計中，學(xue)生將會(hui)在(zai)PHO-TOSHOP或FIＲWOＲKS等(deng)可視化軟(ruan)(ruan)件(jian)中，以圖(tu)形化的(de)(de)(de)(de)(de)形象創(chuang)建(jian)網站布局。學(xue)生可能會(hui)從一(yi)個(ge)現有網站的(de)(de)(de)(de)(de)截圖(tu)開始(shi)，在(zai)他們(men)(men)自己的(de)(de)(de)(de)(de)圖(tu)片和(he)內(nei)(nei)容上分層(ceng)，以創(chuang)建(jian)一(yi)個(ge)獨特的(de)(de)(de)(de)(de)頁(ye)面設(she)計。這(zhe)(zhe)種(zhong)(zhong)課(ke)程(cheng)安(an)排(pai)首先(xian)是學(xue)生掌握使用軟(ruan)(ruan)件(jian)的(de)(de)(de)(de)(de)基本知識(shi)，課(ke)程(cheng)學(xue)習(xi)中也會(hui)涉及(ji)到(dao)可用性、色(se)彩、布局、字(zi)體、負空間、圖(tu)像質量(liang)和(he)位(wei)置等(deng)方(fang)面的(de)(de)(de)(de)(de)內(nei)(nei)容，而并不涉及(ji)代碼(ma)。這(zhe)(zhe)種(zhong)(zhong)授課(ke)安(an)排(pai)能使學(xue)生在(zai)他們(men)(men)的(de)(de)(de)(de)(de)腦海中勾畫出一(yi)個(ge)網頁(ye)并在(zai)編寫第(di)一(yi)行(xing)代碼(ma)之(zhi)前(qian)清楚(chu)他們(men)(men)想要構建(jian)的(de)(de)(de)(de)(de)內(nei)(nei)容，而不太關(guan)心網頁(ye)的(de)(de)(de)(de)(de)編碼(ma)方(fang)式。

二、學習HTML和CSS代碼

在(zai)典型的(de)(de)(de)(de)HTML和(he)CSS課程中(zhong)(zhong)，學(xue)生(sheng)會系統學(xue)習(xi)標(biao)記和(he)樣式(shi)的(de)(de)(de)(de)定(ding)義。學(xue)生(sheng)將(jiang)學(xue)會從頭開始創(chuang)建(jian)網(wang)(wang)頁(ye)(ye)，編寫(xie)第一行網(wang)(wang)頁(ye)(ye)代碼(ma)(ma)(ma)，操作(zuo)HTML、CSS和(he)圖像文件。將(jiang)會對標(biao)簽(qian)、選擇器、盒(he)子模型以(yi)及(ji)盒(he)子的(de)(de)(de)(de)浮(fu)動和(he)定(ding)位(wei)得到充分了解(jie)。在(zai)此學(xue)習(xi)過程中(zhong)(zhong)也會對瀏覽器的(de)(de)(de)(de)兼(jian)容性問(wen)題有所(suo)涉及(ji)。從根本上講，這種教學(xue)安(an)排沒有問(wen)題。但學(xue)生(sheng)要知(zhi)道手動寫(xie)的(de)(de)(de)(de)代碼(ma)(ma)(ma)必需與HTML和(he)CSS標(biao)準兼(jian)容，要按照標(biao)準語(yu)言要求書寫(xie)代碼(ma)(ma)(ma)。同時，授課過程中(zhong)(zhong)注(zhu)意擴(kuo)展最新的(de)(de)(de)(de)知(zhi)識和(he)技術(shu)應(ying)用發展，教學(xue)中(zhong)(zhong)及(ji)早引入網(wang)(wang)頁(ye)(ye)布(bu)局(ju)的(de)(de)(de)(de)思想(xiang)，尤其(qi)是(shi)當(dang)學(xue)生(sheng)掌握了浮(fu)動和(he)定(ding)位(wei)以(yi)后，讓學(xue)生(sheng)在(zai)宏觀(guan)層面上對網(wang)(wang)頁(ye)(ye)布(bu)局(ju)進(jin)行規劃，防止過分糾(jiu)纏于(yu)某(mou)個技術(shu)細節的(de)(de)(de)(de)實現，要培養學(xue)生(sheng)由上及(ji)下的(de)(de)(de)(de)設(she)計(ji)思路。課堂教學(xue)中(zhong)(zhong)多做一些案例(li)，如(ru)設(she)計(ji)兩列和(he)三列的(de)(de)(de)(de)布(bu)局(ju)，或是(shi)更復(fu)雜的(de)(de)(de)(de)1-2-1、1-3-1等布(bu)局(ju)。當(dang)頁(ye)(ye)面布(bu)局(ju)完成后，再考慮(lv)在(zai)某(mou)個區塊內實現具體的(de)(de)(de)(de)內容和(he)完善細節。

三、如何對網頁設計的新生進行有效授課

許多(duo)教師教授新(xin)生(sheng)網頁(ye)(ye)設計(ji)課程有(you)些枯燥和困難(nan)。主(zhu)要(yao)原因(yin)是(shi)初學者對于語法(fa)、文件管(guan)理(li)、樣式表中樣式的順序、頁(ye)(ye)面的正確(que)標記等(deng)等(deng)接(jie)受起來(lai)有(you)一(yi)定難(nan)度，也(ye)需要(yao)一(yi)些時間。而(er)且開(kai)始階段(duan)設計(ji)的頁(ye)(ye)面也(ye)比較簡單，很難(nan)引(yin)起所有(you)學生(sheng)的興趣。建議(yi)可以(yi)從(cong)以(yi)下幾個方面入手。

(1)建(jian)立學(xue)生的(de)感性認識(shi)。找一些(xie)大(da)多(duo)數人(ren)都感興趣的(de)主題。例如，什么是HTML?縮(suo)寫(xie)代表(biao)什么?它在哪里開發的(de)?HTML可以獨立于(yu)網頁(ye)嗎?誰(shui)需要(yao)知道HTML?CSS如何與(yu)HTML匹配(pei)?這些(xie)問題不(bu)需要(yao)花太(tai)長時間，但是可以通(tong)過這些(xie)問題讓學(xue)生建(jian)立起一種“大(da)局觀(guan)”。對于(yu)具(ju)體的(de)技(ji)術細節當他(ta)們(men)在編(bian)寫(xie)頁(ye)面時，可以通(tong)過幻燈片或白板進行講授(shou)。一定要(yao)讓學(xue)生參與(yu)討論，提防(fang)在學(xue)習中出現大(da)的(de)方向上的(de)困惑(huo)。在用代碼(ma)具(ju)體實(shi)現設計之前，確保他(ta)們(men)了解最(zui)終目的(de)和規(gui)劃，否(fou)則(ze)代碼(ma)將毫無意義，學(xue)習也會(hui)陷入被動。

(2)一(yi)步步編(bian)寫(xie)代碼，慢慢地使示(shi)例更加復雜。教學(xue)(xue)時(shi)不要(yao)同(tong)時(shi)介(jie)紹太多的項目(mu)，以(yi)免失去重(zhong)點(dian)。例如(ru)，當引入CSS時(shi)，首先要(yao)為HTML標記編(bian)寫(xie)樣式。顯示(shi)樣式的BODY標記可以(yi)控(kong)制整個(ge)網頁，包括(kuo)背(bei)景(jing)顏色、字體、大小等。每次編(bian)寫(xie)一(yi)個(ge)屬性，保(bao)存(cun)更改(gai)并在瀏覽(lan)器中顯示(shi)它，這(zhe)樣學(xue)(xue)生(sheng)就(jiu)能準(zhun)確地看到(dao)哪一(yi)行CSS控(kong)制了頁面(mian)上的哪個(ge)元素。這(zhe)一(yi)點(dian)對于學(xue)(xue)生(sheng)準(zhun)確理(li)解知識(shi)點(dian)很重(zhong)要(yao)。

(3)課堂(tang)上要(yao)不時提問。在進行某(mou)項(xiang)技術(shu)的(de)具體操作(zuo)前(qian)，教師要(yao)先設置幾個疑問，并讓學(xue)生給出(chu)相對的(de)解(jie)決方案。如(ru)果(guo)(guo)他們(men)(men)可(ke)以從概念上解(jie)釋這個概念，那么代碼編寫就變得(de)簡(jian)單了。例如(ru)，如(ru)果(guo)(guo)你已用藍色文本(ben)(ben)樣式化(hua)了網(wang)頁的(de)正(zheng)文，請詢(xun)問學(xue)生如(ru)何(he)使主標題變為(wei)紅色，如(ru)果(guo)(guo)學(xue)生可(ke)以解(jie)釋，你需要(yao)以某(mou)種方式改變文本(ben)(ben)H1標記為(wei)紅色，并要(yao)向(xiang)他們(men)(men)展示(shi)如(ru)何(he)將其寫為(wei)代碼。

(4)及早規范語法規則。學(xue)(xue)生在(zai)剛開始(shi)學(xue)(xue)習時(shi)(shi)(shi)(shi)，會(hui)經常(chang)忘記(ji)關閉標簽，忘記(ji)分號(hao)(hao)(hao)，大括(kuo)(kuo)號(hao)(hao)(hao)和小括(kuo)(kuo)號(hao)(hao)(hao)弄混，甚至在(zai)中文(wen)輸入(ru)下寫入(ru)相關符號(hao)(hao)(hao)等(deng)等(deng)。發(fa)現這些錯誤有(you)時(shi)(shi)(shi)(shi)很(hen)(hen)容易，有(you)時(shi)(shi)(shi)(shi)候也很(hen)(hen)困(kun)難(nan)。這時(shi)(shi)(shi)(shi)一(yi)定要養(yang)成(cheng)一(yi)種良好(hao)(hao)的(de)(de)(de)(de)編碼習慣，比(bi)如在(zai)每(mei)寫完(wan)(wan)一(yi)部(bu)分功能(neng)時(shi)(shi)(shi)(shi)，就要查看輸出效果，有(you)問(wen)題(ti)早發(fa)現，也好(hao)(hao)解決，決不能(neng)等(deng)全(quan)部(bu)代碼輸入(ru)完(wan)(wan)畢再進行驗證，往往很(hen)(hen)難(nan)定位(wei)問(wen)題(ti)的(de)(de)(de)(de)所在(zai)。同(tong)時(shi)(shi)(shi)(shi)要規范編碼，嚴格按最(zui)嚴標準來(lai)寫，從一(yi)開始(shi)就養(yang)成(cheng)好(hao)(hao)的(de)(de)(de)(de)習慣，后(hou)面(mian)的(de)(de)(de)(de)學(xue)(xue)習可以節省不必(bi)要的(de)(de)(de)(de)時(shi)(shi)(shi)(shi)間浪費(fei)。教(jiao)(jiao)師教(jiao)(jiao)導(dao)學(xue)(xue)生的(de)(de)(de)(de)工作非常(chang)重要，要了(le)解不同(tong)教(jiao)(jiao)學(xue)(xue)方法對學(xue)(xue)生的(de)(de)(de)(de)影響(xiang)，并(bing)掌握(wo)新生的(de)(de)(de)(de)教(jiao)(jiao)學(xue)(xue)規律。平面(mian)設計、HTML和CSS是(shi)專業設計師每(mei)天(tian)工作的(de)(de)(de)(de)關鍵技能(neng)。編寫干凈、高效的(de)(de)(de)(de)代碼、了(le)解如何調(diao)試(shi)問(wen)題(ti)、研究解決問(wen)題(ti)的(de)(de)(de)(de)更好(hao)(hao)方法、解決跨瀏覽器兼容性問(wen)題(ti)-這些都是(shi)前端(duan)開發(fa)人員(yuan)生活中的(de)(de)(de)(de)基本概念。教(jiao)(jiao)師要用(yong)新鮮而又生動(dong)的(de)(de)(de)(de)素材，并(bing)確(que)保學(xue)(xue)生有(you)一(yi)個扎實的(de)(de)(de)(de)理解，然后(hou)再進入(ru)下一(yi)個主(zhu)題(ti)，為他們(men)的(de)(de)(de)(de)職(zhi)業打(da)開一(yi)個好(hao)(hao)的(de)(de)(de)(de)開端(duan)。