網頁設計課程中教學方法探析

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了網頁設計課程中教學方法探析范文，希望能給你帶來靈感和參考，敬請閱讀。

摘要:網絡前端開發技術發展迅速，正如前端開發技術的快速發展以及對前端開發人員的要求已經發生了巨大變化一樣，在高等教育中的網頁設計課程也必須做出相應調整，教師在進行網頁設計的教學時要從帶領學生建立感性認識，展示好的代碼，一步步編寫代碼，慢慢地使示例更加復雜等幾個方面入手。

關鍵詞:網頁設計;教學方法;高等教育

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

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

在大多數大學的網頁設計課程設計中，學生將會在PHO-TOSHOP或FIRWORKS等可視化軟件中，以圖形化的形象創建網站布局。學生可能會從一個現有網站的截圖開始，在他們自己的圖片和內容上分層，以創建一個獨特的頁面設計。這種課程安排首先是學生掌握使用軟件的基本知識，課程學習中也會涉及到可用性、色彩、布局、字體、負空間、圖像質量和位置等方面的內容，而并不涉及代碼。這種授課安排能使學生在他們的腦海中勾畫出一個網頁并在編寫第一行代碼之前清楚他們想要構建的內容，而不太關心網頁的編碼方式。［2］

二、學習HTML和CSS代碼

在典型的HTML和CSS課程中，學生會系統學習標記和樣式的定義。學生將學會從頭開始創建網頁，編寫第一行網頁代碼，操作HTML、CSS和圖像文件。將會對標簽、選擇器、盒子模型以及盒子的浮動和定位得到充分了解。在此學習過程中也會對瀏覽器的兼容性問題有所涉及。從根本上講，這種教學安排沒有問題。但學生要知道手動寫的代碼必需與HTML和CSS標準兼容，要按照標準語言要求書寫代碼。同時，授課過程中注意擴展最新的知識和技術應用發展，教學中及早引入網頁布局的思想，尤其是當學生掌握了浮動和定位以后，讓學生在宏觀層面上對網頁布局進行規劃，防止過分糾纏于某個技術細節的實現，要培養學生由上及下的設計思路。課堂教學中多做一些案例，如設計兩列和三列的布局，或是更復雜的1-2-1、1-3-1等布局。當頁面布局完成后，再考慮在某個區塊內實現具體的內容和完善細節。［3］［4］

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

許多教師教授新生網頁設計課程有些枯燥和困難。主要原因是初學者對于語法、文件管理、樣式表中樣式的順序、頁面的正確標記等等接受起來有一定難度，也需要一些時間。而且開始階段設計的頁面也比較簡單，很難引起所有學生的興趣。建議可以從以下幾個方面入手。

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

(2)一步步編寫代碼，慢慢地使示例更加復雜。教學時不要同時介紹太多的項目，以免失去重點。例如，當引入CSS時，首先要為HTML標記編寫樣式。顯示樣式的BODY標記可以控制整個網頁，包括背景顏色、字體、大小等。每次編寫一個屬性，保存更改并在瀏覽器中顯示它，這樣學生就能準確地看到哪一行CSS控制了頁面上的哪個元素。這一點對于學生準確理解知識點很重要。［5］

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

(4)及早規范語法規則。學生在剛開始學習時，會經常忘記關閉標簽，忘記分號，大括號和小括號弄混，甚至在中文輸入下寫入相關符號等等。發現這些錯誤有時很容易，有時候也很困難。這時一定要養成一種良好的編碼習慣，比如在每寫完一部分功能時，就要查看輸出效果，有問題早發現，也好解決，決不能等全部代碼輸入完畢再進行驗證，往往很難定位問題的所在。同時要規范編碼，嚴格按最嚴標準來寫，從一開始就養成好的習慣，后面的學習可以節省不必要的時間浪費。教師教導學生的工作非常重要，要了解不同教學方法對學生的影響，并掌握新生的教學規律。平面設計、HTML和CSS是專業設計師每天工作的關鍵技能。編寫干凈、高效的代碼、了解如何調試問題、研究解決問題的更好方法、解決跨瀏覽器兼容性問題-這些都是前端開發人員生活中的基本概念。教師要用新鮮而又生動的素材，并確保學生有一個扎實的理解，然后再進入下一個主題，為他們的職業打開一個好的開端。

參考文獻:

［1］任翠池，姜晗．《網頁設計與制作》課程教學改革研究與實踐．課程教育研究，2013(22):217-217．

［2］韓陵宜．《網頁制作》課程教學及考核方式的研究與探索．電腦知識與技術，2008，2(14):122-124．

［3］張翔，賈雪倩．《網頁設計》課程教學改革的研究和探索．福建電腦，2011，27(1):39-40．

［4］李偉，鄧紅濤．《網頁設計》課程實踐性教學改革與創新研究．新課程研究:高等教育，2011(12):103-104．

［5］任雪蓮．高職《網頁設計與制作》課程教學改革的實踐與探索．職業技術，2011(2):14．

作者:王新儒 劉慧娟 趙秋紅 單位：天津廣播影視職業學院