項目式教學(xué)在《網(wǎng)頁設(shè)計與制作》課程中的探索與實踐

段珊珊

摘要：高職教學(xué)中項目是課程知識點的載體，針對我校軟件技術(shù)專業(yè)學(xué)生的實際情況，在《網(wǎng)頁設(shè)計與制作》課程教學(xué)中以真實項目為教學(xué)項目;關(guān)注項目中所需要的知識點;激發(fā)學(xué)習(xí)的學(xué)習(xí)主動性進行課程教學(xué)改革與探索，提高了教學(xué)質(zhì)量培養(yǎng)了學(xué)生解決問題的能力。

關(guān)鍵詞：項目化教學(xué);課程改革;網(wǎng)頁設(shè)計;學(xué)習(xí)成就感

中圖分類號：G642 文獻標識碼：A

文章編號：1009-3044（2020）15-0148-03

1引言

項目式教學(xué)一直是高職教學(xué)中廣泛采用的行之有效的教學(xué)方式，教學(xué)項目的選取、來源與教學(xué)項目是否應(yīng)對了當(dāng)下畢業(yè)生的能力需求關(guān)乎了教學(xué)的成功與失敗。《網(wǎng)頁設(shè)計與制作》這門課程是信電工程學(xué)院軟件技術(shù)專業(yè)的二年級學(xué)生第一學(xué)期的重要的專業(yè)核心基礎(chǔ)課程，其目的是通過課程的學(xué)習(xí)掌握網(wǎng)頁設(shè)計的制作，掌握HTML5.0語言、CSS樣式、掌握網(wǎng)頁的基本架構(gòu)與設(shè)計與常用的動態(tài)腳本，是前端設(shè)計的專業(yè)基礎(chǔ)課程。通過對軟件專業(yè)歷屆的學(xué)生的調(diào)查和授課老師的總結(jié)，該課程教學(xué)效果不理想，主要原因是：課程教學(xué)基于知識點，知識點零碎繁多，教師授課過程中采用基于知識點的案例教學(xué)，學(xué)生學(xué)習(xí)了很多的案例，但是茫然不知道如何應(yīng)用這些知識，就好像認識了很多的漢字但是也不會寫出好的作文是一樣的道理，學(xué)生學(xué)習(xí)缺少成就感，疑惑這樣做的簡單的網(wǎng)頁沒有用處，容易失去學(xué)習(xí)的熱情。為了提高教學(xué)質(zhì)量讓學(xué)生學(xué)到有用的技能，我在軟件2017級和2018級學(xué)生中采用真實項目進行教學(xué)實踐與探索。

2教學(xué)實踐與探索

2.1高屋建瓴，思維先行

思維領(lǐng)導(dǎo)行動，我的思路是在教學(xué)中并不著急講解技術(shù)，而是首先要分析網(wǎng)站結(jié)構(gòu)，培養(yǎng)學(xué)生的思維意識。什么是一個網(wǎng)站項目？這個項目應(yīng)該由哪些要素組成？在上這門課之前學(xué)生可能沒這個意識，以前上網(wǎng)就是單純的上網(wǎng)，從上這門課開始我就要求上網(wǎng)時候多做一件事，就是要求學(xué)生注意每次瀏覽網(wǎng)頁的時候注意網(wǎng)頁的布局如LOGO，導(dǎo)航，輪播圖，那些是固定不動的（固定定位），固定不動的元素放在那個位置;哪些是動態(tài)的，如倒計時，TAB切換，導(dǎo)航;注意不同類型網(wǎng)頁的色彩搭配;注意網(wǎng)頁的圖片與文字的關(guān)系。有意識地讓學(xué)生帶著這些問題去瀏覽網(wǎng)頁，這些思維貫穿教學(xué)的始終，處處皆學(xué)問，瀏覽網(wǎng)頁時稍微用心，學(xué)生就對網(wǎng)頁的結(jié)構(gòu)，色彩，布局有所了解，增強了學(xué)生觀察能力和分類總結(jié)的能力。

2.2技術(shù)夠用，圍繞項目的需求

《網(wǎng)頁設(shè)計與制作》這門課程H5標簽眾多，我們選用的教材也多是按照標簽的順序來講，即便是項目式的教材也是如此。我在上課的時候給學(xué)生提出的要求是先學(xué)會做一個簡單的網(wǎng)頁，熟練掌握網(wǎng)頁的結(jié)構(gòu)。教學(xué)的第一個項目是學(xué)生最熟悉“我的校園”一個頁面的設(shè)計，這個網(wǎng)頁就是由上面LOGO+導(dǎo)航構(gòu)成，中間有內(nèi)容區(qū)，內(nèi)容區(qū)分為標題正文和圖片，下部版權(quán)所有的相關(guān)信息三個部分組成，頁面布局如圖2.1所示：

圖1是網(wǎng)頁中常用的上中下的布局，上中下通欄式的設(shè)計，版心居中（中間點畫線區(qū)為版心區(qū)，下同），而logo區(qū)、導(dǎo)航欄和FOOTER部分的背景色往往是占據(jù)瀏覽器的從左到右占據(jù)整個寬度，教學(xué)一開始我們就以此布局圖為例來講解項目，并沒有遵循教材的順序先講解標簽后講樣式，而是項目需要什么我們就講什么。所用到的標簽有div（布局用），h1-h5標題，p正文，img圖像，a超鏈接用來布局導(dǎo)航;所用到的樣式有內(nèi)部樣式style，背景顏色background_color，margin邊距。

教學(xué)的知識點的選取緊緊圍繞教學(xué)項目的需要，重點講項目需要的，實際工作中很少用到的建議學(xué)生自學(xué)。所以在教學(xué)中我們并沒有遵循教材的順序，比如內(nèi)聯(lián)式樣式往往是安排在教材的中部之后，在這之前用到的樣式都是嵌入式樣式，而我在教學(xué)中第一個教學(xué)項目就用到了內(nèi)聯(lián)式樣式忽略了嵌入式樣式，是因為內(nèi)聯(lián)式樣式遵循了內(nèi)容與樣式分離的原則在實際的工作中更需要，而嵌人式樣式只有在很少的情況下才用到。所以我在上課的過程基本上只關(guān)注工作中學(xué)生會用什么，很少用的地方或者不會用的知識點學(xué)生可以自己在課外了解。

再如之前的教學(xué)采用的軟件式是傳統(tǒng)的可見即可得的dreamweaver 6.0，從17級學(xué)生教學(xué)我采用的軟件式HBUILD-ERX，是因為在專業(yè)調(diào)研時我們了解到在實際的工作環(huán)境中從來不用dreamweaver 6.0，為了對接工作需求讓學(xué)生在畢業(yè)后快速使用工作環(huán)境我們更換為HBUILDERX要求學(xué)生在智能提示下自己寫代碼。根據(jù)學(xué)生在學(xué)習(xí)的過程中的反饋，這樣的直接奔著目標去學(xué)習(xí)也最容易有學(xué)習(xí)成效。

2.3遵循認知規(guī)律，項目先易后難

教學(xué)我們選定的第二個進階的項目是來自互聯(lián)網(wǎng)上真實存在的“鮮花銷售網(wǎng)站”，由老師帶領(lǐng)學(xué)生對該網(wǎng)站的網(wǎng)頁分析制作模仿，對學(xué)生進行技能與素養(yǎng)的訓(xùn)練。

“鮮花銷售網(wǎng)站”主要有三個頁面，主頁，商品詳情頁和注冊登錄頁面，下面展示的主頁的結(jié)構(gòu)圖，這個項目的主頁由上部區(qū)域，中間內(nèi)容分為左右兩欄，下面FOOTER部分組成;除了中間部分比第一個項目復(fù)雜之外，頁面右下角采用了固定定位導(dǎo)航，在商品的展示頁面由于需要打熱賣等標簽還用到了相對定位和絕對定位的混合使用;限時搶購和動態(tài)輪播圖用到了_a_vascript腳本。所以比第一個項目增加了很多的難度。鮮花銷售網(wǎng)站主頁結(jié)構(gòu)如圖2所示：

“鮮花銷售網(wǎng)站”詳情頁是我們慣?？吹降纳唐讽撁鎴D，上面有一個大圖，下面有四張小圖，單擊大圖時候右側(cè)會出現(xiàn)放大鏡，這個效果要用腳本實現(xiàn)，右側(cè)的技術(shù)難點是出現(xiàn)了三個TAB切換項，詳情，用戶評價和購物保障，當(dāng)選擇對應(yīng)的TAB時候，下面的區(qū)域顯示對應(yīng)的內(nèi)容。商品詳情頁結(jié)構(gòu)如圖2.3所示：

2.4把握方向，增強學(xué)生的學(xué)習(xí)成就感

我們可以看到“鮮花銷售網(wǎng)站”項目中的主頁和詳情頁我們在網(wǎng)上經(jīng)?？吹降木W(wǎng)頁都是這樣的，學(xué)生只要學(xué)會設(shè)計這兩個網(wǎng)頁那么前端的技術(shù)學(xué)生已經(jīng)基本達到了夠用的原則。在教學(xué)中我把握了一個方向，網(wǎng)頁的基本結(jié)構(gòu)學(xué)生是一定要掌握的，在此基礎(chǔ)上也就是項目的有效性，商品網(wǎng)站是什么樣的我們就學(xué)著做什么樣的。對于眾多的學(xué)生而言做出來的項目能夠和商品網(wǎng)站中的很類似學(xué)生就很有信心和成就感。

“網(wǎng)頁設(shè)計與制作課程”涉及的技術(shù)繁多，真實的商業(yè)網(wǎng)站一定少不了優(yōu)秀的腳本，網(wǎng)頁中用到的腳本技術(shù)，網(wǎng)頁的特效，這些方向有很多，但是我們只關(guān)注了一個方向，就是常見到的網(wǎng)站中用到的腳本技術(shù)。簡單的腳本要求學(xué)生能寫會改，比如網(wǎng)頁中用到的TAB切換項，倒計時，商品數(shù)量的增減;難度大的腳本基本要求在會用的基礎(chǔ)上爭取能改比如“商品詳情”頁面中的放大鏡。放大鏡的腳本對初學(xué)者很有難度，我是把放大鏡的腳本發(fā)給學(xué)生帶領(lǐng)學(xué)生看懂會用，學(xué)有余力的學(xué)生則在能看懂的基礎(chǔ)上能進行修改，能修改的學(xué)生則就有了創(chuàng)新，剛剛結(jié)束的這學(xué)期課程中就有學(xué)生對放大鏡的代碼做了改進?？傊虒W(xué)過程中要把握當(dāng)下學(xué)生需要掌握什么技術(shù)，圍繞這些技術(shù)進行項目化的組織教學(xué)。

2.5激發(fā)學(xué)生的學(xué)習(xí)主動性

高職生的生源中每個班總有三五個同學(xué)學(xué)習(xí)非常具有主動性，當(dāng)然也有個別同學(xué)家中有礦，上學(xué)只是過來經(jīng)歷一下，大多數(shù)同學(xué)還是想學(xué)一門技能到畢業(yè)走到社會上時可以傍身，同學(xué)們多有學(xué)習(xí)的愿望;擁有學(xué)習(xí)的愿望但是在學(xué)習(xí)的過程中每個人的情況都不同，加上班級氛圍的影響并不是每個同學(xué)都能取得理想的學(xué)習(xí)效果。要讓學(xué)生主動學(xué)，要有技巧來激發(fā)學(xué)生學(xué)習(xí)的主動性。在教學(xué)改革中我們主要通過以下手段來激發(fā)學(xué)生學(xué)習(xí)的積極性。

1）高屋建瓴，明確學(xué)習(xí)目的

教學(xué)很重要的是讓學(xué)生明白通過課程的學(xué)習(xí)達到什么樣的教學(xué)目的，做到心中有數(shù)。教學(xué)的第一次課我就把教學(xué)項目展示給學(xué)生看，同時把學(xué)長的作業(yè)展示給學(xué)生看，讓學(xué)生清楚知道這門課程學(xué)完之后自己可以做什么能夠做到什么樣子。增強學(xué)生的學(xué)習(xí)的信心與學(xué)習(xí)興趣。

2）肯定學(xué)生的學(xué)習(xí)能力。

每一個階段性的學(xué)習(xí)項目驗收時充分肯定學(xué)生的學(xué)習(xí)成果;總緒性項目驗收時邀請優(yōu)秀的學(xué)生在全班同學(xué)面前展示并匯報自己的項目，鍛煉學(xué)生的表達能力;總結(jié)性項目總評時候邀請課題組所有老師做評委進行點評，這樣可以讓學(xué)生對課程足夠重視，為了獲得教師同學(xué)的認可與對自己的肯等會付出更多的努力，另一方面模擬了畢業(yè)答辯得到多一次的歷練。

2）學(xué)業(yè)幫扶拓展學(xué)生的思維

我們學(xué)院歷來有一個學(xué)業(yè)的幫扶活動，就是選擇上一屆課程優(yōu)秀的同學(xué)做助教在晚自習(xí)時幫助下一屆的同學(xué)輔導(dǎo)作業(yè)，眾所周知能做出來和能講出來有很大的差距，通過指導(dǎo)低年級同學(xué)的作業(yè)，部分的學(xué)生得到了思維上的鍛煉，表達能力的鍛煉也擴大了自己的交友面。

4）以賽促學(xué)

學(xué)院通過社團把有強烈學(xué)習(xí)愿望和學(xué)習(xí)主動性學(xué)習(xí)技術(shù)的學(xué)生組織起來，依托信電工程學(xué)院所有的老師進行輔導(dǎo)，社團每學(xué)期在全院范圍內(nèi)組織網(wǎng)頁設(shè)計與制作大賽。大賽雖然只是校級別小但學(xué)生也積極參與，賽項每年賽出的作品也使學(xué)生可以看到自己的差距，每一次前進也都增強了學(xué)生的學(xué)習(xí)的信心與動力。

3總結(jié)

我們在2017級與2018級軟件專業(yè)學(xué)生的《網(wǎng)頁設(shè)計與制作》課程中采用了項目化教學(xué)實踐，第一采用真實的商業(yè)項目作為載體把知識點串起來，提高教學(xué)的有效性;第二是精簡知識點，關(guān)注真實項目中用的頻率高的知識點，提高教學(xué)效率;第三，用有效的方法激發(fā)學(xué)生的學(xué)習(xí)主動性。增強學(xué)生的信心與學(xué)習(xí)成就感，相對于傳統(tǒng)以內(nèi)容技術(shù)為主知識結(jié)構(gòu)的案例式教學(xué)方法教學(xué)質(zhì)量得到了很大的提高。