基于心智技能理論的網頁設計教學研究

摘要：本文在分析了心智技能理論的基礎上，結合網頁設計教學的實際情況，發現學生在心智技能上的缺乏制約了網頁設計水平的提高。因此，本文將心智技能形成的三階段理論應用于網頁設計教學，提出了網頁設計心智技能的形成過程，并進行了相關教學實踐，對提高學生的網頁設計能力起到了積極作用。

關鍵詞：心智技能；網頁設計；教學研究

中圖分類號：G434 文獻標志碼：A 文章編號：1674-9324（2013）37-0154-03

一、心智技能理論概述

技能分為操作技能和心智技能，操作技能是一種動作技能，培養操作技能使學生“知其然”，比如網頁設計中建立頁面布局、插入表格這些功能如何實現。而心智技能是一種思維的技能，是調節和控制心智活動的經驗，培養心智技能使學生“知其所以然”，比如為何要使用網頁布局、使用何種布局更好、網頁元素如何搭配更美觀等，從而使學生能夠更合理地應用其所具備的操作技能。

對于課程教學而言，不僅要培養學生的操作技能，還應更注重心智技能的培養。比如制作一個完整網站項目，不僅需要操作Dreamweaver、Fireworks等設計軟件的技能，更需要需求分析、網站規劃、風格設計和色彩搭配等心智技能。

因此，要提高學生的技能水平，就必須在教學中加強心智技能的培養，培養學生的創造性思維，提高學生學習創造能力以及解決實際問題的能力。

二、網頁設計教學中存在的問題分析

目前，案例教學法是較為主流的網頁設計課程教學方式，在教學過程中，往往以軟件操作為主要內容，針對其中的各個功能設計教學案例并進行講解。這種方式雖然能使學生在短時間內掌握軟件使用技能，但學生對各個功能適用的場景和條件卻不甚了解，不能真正做到學以致用，在獨立面對一個完整的設計任務時會有無從下手的感覺。筆者采用課堂觀察、學生訪談及學生作品指導等途徑，開展調查研究之后發現，學生設計的網頁作品普遍存在一些共性問題，主要體現在以下幾個方面。

1.網頁主題策劃。當要求學生為某個網站主題制作一系列網頁時，某些作品主題定位不準確，比如原本網站主題是品牌產品宣傳，最后的作品卻是購物網站。有的作品則是主題不統一，想展現的內容太多，多個主題拼湊在一起。出現上述問題的主要原因是需求分析不準確、提煉設計主旨的能力不足。

2.網頁風格設計。在網頁布局及風格設計方面，常出現頁面風格不統一、頁面風格與內容不協調等的問題。比如某些作品的多個頁面之間在風格、模式和色彩上差異較大，影響了網站的整體風格。這是由于學生對形式與內容的協調把握不足，不能在內容不同時實現形式上的統一。

3.網頁元素的編排。網頁元素的編排，主要是框架、表格、文字、圖片、動畫等內容在單個網頁內的排版。學生作品在網頁元素的編排方面的問題主要有：（1）文字的處理。網頁中使用的字體太多，造成頁面混亂；字體、字號過于單一，標題或重點不突出；行距過大或過小等。（2）圖片的處理。圖片過度拉伸造成顯示模糊；圖片過大造成頁面加載速度緩慢；并排顯示的圖片尺寸不統一等。（3）網頁布局。頁面寬度過大，在一屏內無法顯示，造成瀏覽困難；頁面內容多而雜，各部分跨度太大，整體可讀性不好，重點內容不突出等。

4.網頁色彩搭配。網頁的色彩搭配應該均衡、協調，使人感覺舒適、美觀，又不至于視覺疲勞。學生在網頁色彩搭配上出現的問題主要有：網頁色彩過于單一，無吸引力；色彩過于花哨，容易造成視覺疲勞；文字顏色與背景顏色相似，造成閱讀困難等。

5.交互性設計。用戶瀏覽網頁是一個人與網頁信息交互的過程，交互性好的網頁應該功能實用、操作便捷。學生在交互性設計上出現的問題主要有：網頁無標題；導航欄不全，引導性不佳；鏈接層次過深，造成連續瀏覽不便捷等。

6.網站文件結構。網站文件結構是指儲存在硬盤上的目錄結構，雖然不會影響到網頁的功能和外觀，但是良好的目錄結構能夠提高網頁設計和后續維護工作的效率。學生設計的網頁作品往往忽視網頁文件結構的合理性，存在著網頁命名隨意無規則，不同層次的網頁文件存放在同級目錄，圖片文件隨意存放等問題。

綜合上述問題分析可以看出，學生在創造能力及設計思維上相對較弱，實際上通過操作實踐，學生基本都能完全掌握網頁設計軟件操作，比如插入文字和圖片、設置字體和顏色、插入超鏈接等，但卻在需要整合運用這些操作時出現了問題。這實際上就是心智技能缺乏的表現，因此培養心智技能是提高學生網頁設計能力的關鍵。

三、心智技能階段性理論在網頁設計教學中的應用

1.網頁設計心智技能形成分析。根據馮忠良教授的研究，心智技能的形成是階段性的，其過程分為原型定向、原型操作和原型內化三個階段[1]。原型定向階段以理論知識傳授為主，讓主體掌握技能操作的原理；原型操作階段通過實踐讓主體熟練掌握操作技能，為原型內化奠定基礎；在主體大腦中形成內化的思維模式，使主體能夠靈活運用操作技能解決實際問題[1-3]。

根據上述理論，結合網頁設計教學的實際過程，網頁設計心智技能的形成階段如圖1所示。

網頁設計心智技能的形成可分為：掌握基本理論、熟練實踐操作和總結設計模式三個階段。這三個階段不僅體現在整個學期的教學過程，更應該體現在每一章節的教學中，甚至在每次課的教學中不斷重復，才能強化鞏固心智技能。在整個學期的網頁設計教學過程中，基本理論、熟練實踐操作和總結設計模式三個階段的主要教學內容是：（1）網站和網頁的組成、網頁設計的一般過程、HTML原理和常用設計工具。（2）網頁設計工具Dreamweaver、Firewoks及Flash的操作和使用。（3）指導學生綜合應用設計工具進行完整設計，總結網頁設計中的經驗和模式。而在某項軟件操作的教學過程中也應遵循三階段原則。教師首先結合HTML語言講解此項操作的后臺原理。然后教師進行演示，學生操作，期間教師不斷進行指導。最后教師總結該操作中應當注意的一些原則，以及常用的一些設計模式，可通過展示優秀的設計作品進行對比講解。

2.教學實踐。在前述理論研究的基礎上，筆者進行了教學實踐。根據課程教材，首先設置了“網頁設計概述”、“HTML基礎”、“Dreamweaver CS 4應用”、“Firewoks CS 4應用”、“Flash CS 4應用”、“綜合實例”六章課程內容[4]。其中第一、二章以純理論教學為主，難點在于HTML基礎知識，須重點講解。第三至六章均采用三階段原則進行教學。最后為了加強心智技能原型內化階段的效果，增加了第七章“網頁設計模式精講”，對網頁設計中的常見問題進行總結，介紹設計原則和方法。下面以第三章“Dreamweaver CS 4應用”和第七章“網頁設計模式精講”為例介紹教學思路。

“Dreamweaver CS 4應用”主要分為表格的使用、框架的使用、DIV元素的使用、文本的插入與編輯、圖像的插入與編輯、超鏈接的插入與編輯、其他多媒體對象的插入與編輯七項主要內容。在正式講解軟件應用前，應使學生明白網頁的本質是HTML代碼，Dreamweaver本質是輔助設計工具，其作用是自動生成HTML代碼，比如在Dreamweaver中執行插入表格的命令，就會在源文件中加入表格的HTML代碼。在此后的講課過程中，幫助學生理解操作的原理，為心智技能的建立奠定基礎。以文本的插入和編輯為例，在教學中首先向學生講解文本編輯中HTML標簽

與

的作用和使用方法。然后在Dreamweaver中執行文本插入和編輯操作，并對比源文件中的代碼變化。最后結合教學用例介紹文字排版的一些原則，比如長文本使用標準字號、在文本周圍留出足夠空間、增加文本和背景的對比度等。幫助學生建立文本編輯的心智技能，使學生在自主設計時能夠編排出美觀的、可讀性強的文本效果。

“網頁設計模式精講”根據本文中對學生作品中常見問題的分類進行集中講解，主要分為網頁主題策劃、網頁風格設計、網頁元素的編排、網頁色彩搭配、交互性設計、網站文件結構六項主要內容。設計模式教學是一種經驗的傳授，目的是教會學生某一場景下問題的解決方法，因此在教學中，必須要明確模式適用的場景，以及模式如何實現，如表1所示是幾個網頁設計的模式。

在教學過程中仍主要依靠案例講解進行，并在過程中要求學生在總結和思考之后進行相似模擬，但不能與原例一致。學生掌握正確的網頁設計模式后，網頁設計質量得到了一定改善，從側面證明了學生網頁設計心智技能的提升。

四、小結

筆者通過教學實踐發現，結合心智技能形成的階段性理論進行網頁設計課程教學，確實對提高學生的網頁設計能力起到了積極作用，但由于課時限制、教師經驗等因素，教學質量仍有很大的上升空間。在后續教學過程中，仍需要不斷地進行嘗試和總結，探索更高效的心智技能教學方法，培養出更高素質的網頁設計人才。

參考文獻：

[1]馮忠良.教育心理學[M].北京：人民教育出版社，2000.

[2]丁清.論高職高專學生的心智技能培養[J].昆明冶金高等專科學校學報，2004，（1）：81-84.

[3]陳軍民.高職生心智技能培養探討[J].新課程學習，2012，（03）：77.

[4]詹青龍，郭永燦.網頁設計與制作[M].北京：清華大學出版社，北京交通大學出版社，2010.

作者簡介：寧艷（1986-），女，廣西靖西人，碩士，助教，主要從事計算機多媒體技術，網頁設計及網站建設等課程教學與研究。