段珊珊

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

關鍵詞：項目化教學;課程改革;網(wǎng)頁設計;學習成就感

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

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

1引言

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

2教學實踐與探索

2.1高屋建瓴，思維先行

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

2.2技術夠用，圍繞項目的需求

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

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

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

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

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

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

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

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

2.4把握方向，增強學生的學習成就感

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

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

2.5激發(fā)學生的學習主動性

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

1）高屋建瓴，明確學習目的

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

2）肯定學生的學習能力。

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

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

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

4）以賽促學

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

3總結(jié)

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