藝術設計專業網頁制作課程教—學—做一體化教學方法探討

張彩虹

摘要：互聯網的迅速發展與普及，為人們提供了更方便、快捷的信息交流平臺。上網已經成為很多人工作、生活中必不可少的一部分，這主要是由于網頁承載了其他任何一種媒介都無法比擬的豐富資源。網頁中的標志、圖形圖像的處理自然變得非常重要。作為有藝術基礎的學生，掌握網頁制作的基本方法可以拓寬就業面。本文在藝術設計專業網頁制作課程中使用教—學—做一體化方法所做闡述。

關鍵詞：網頁設計；教學做一體化；教學方法

一、網頁制作課程的地位和作用

（一）網頁制作課程在生活中的地位和作用

互聯網是一個蘊藏著無窮資源的寶庫，在資源共享和信息交互方面具有得天獨厚的優勢，網頁正是傳遞這些資源和信息的重要載體。網頁不但可以用于瀏覽文字、圖片、多媒體信息，而且在娛樂、商務等領域都有重要應用（如電子郵件、聊天室、搜索引擎、網上購物、電子政務等）。

（二）網頁制作課程在藝術設計專業中的地位和作用

隨著時代的進步，設計行業也在飛速的發展中。UI的設計是設計這一大行業中一個比較熱潮的行業，因為UI設計師是設計行業中薪酬比較高的（新手設計師），一般剛剛參家UI設計師工作的工資都可以拿到5000左右，一二線城市可能會更高，而且這是個需要大量人才的行業，所以就業前景也是非常好。僅僅這兩點就已經對這些剛畢業的設計專業大學生有著很大的誘惑。

而且UI設計這一行業，是一個不會過時和出現泡沫現象的行業。隨著時代的發展，手機越來越是我們生活中不可或缺的一部分了。當人們解決了它的一些基礎運用（例如：打電話、發信息等）又開始注重它的一些觀賞性了（例如：外觀、手機軟件的美觀性等）。而UI設計師則是對手機里的各種軟件進行美化的。

想要成為一個優秀的UI設計師，一些最為基礎的軟件是必須要會的，1.Photoshop主要處理以像素所構成的數字圖像。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。2.Adobe illustrator是一種應用于出版、多媒體和在線圖像的工業標準矢量插畫的軟件，作為一款非常好的圖片處理工具，Adobe Illustrator廣泛應用于印刷出版、海報書籍排版、專業插畫、多媒體圖像處理和互聯網頁面的制作等，也可以為線稿提供較高的精度和控制，適合生產任何小型設計到大型的復雜項目。而另外一個軟件感覺與藝術設計專業關聯不大，但是如果你想成為一個優秀的UI設計師，Dreamweaver網頁制作軟件也是必須要掌握的。

Dreamweaver軟件同時也是一個優秀的UI設計師必須掌握的基本軟件，因為一個好的設計理念、想法，只有設計師本人最為清楚，讓別人去跟隨你的想法去設計網頁最終跟自己的想法會有一些出入。所以，一個好的UI設計師掌握網頁制作軟件是走向更高崗位的一個基礎。

二、網頁制作課程教學方法

網頁制作課程的教學方法采用的是教—學—做一體化方法。網頁制作課程使用的是Dreamweave cs6軟件，網頁制作課程在制作網站的過程中可以分別在兩個視圖下制作，一是在代碼視圖，用html語言來制作網頁，另一種在設計視圖制作網頁，相比較而言對于藝術專業的學生，第二種更容易掌握，代碼視圖制作網頁是要求學生要掌握一定的單詞，在代碼視圖下制作網頁的標記是英文單詞要熟練掌握，對于藝術專業的學生來說無疑增加了難度。藝術專業學生的英語底子薄，所以在進行選擇時使用的是在設計視圖中制作網頁。

在整個網頁的設計中最主要的部分是網頁布局和CSS樣式設置。網頁布局定位準確且使用的頻率高的應歸為div布局。 設計視圖中的div布局定位相對于代碼視圖的布局定位，代碼視圖能準確、方便、快捷的定位到要布局的點。CSS 樣式設置主要用來修改屬性，CSS 樣式在設置屬性時，在代碼視圖和設計視圖內都要用英文。雖然在進行學習時選用設計視圖，可是對于網頁制作中用到的英文，也要求能靈活應用，這就需要老師選擇好的教學方法，學生選擇好的學習方法。

（一）教師的“教”

教師的“教”，教師的教學方法是否得當，直接決定了學生學習的質量。一個好的教師要懂得用恰當的教學方法來教授學生學習。在藝術專業學生學習網頁制作課程教學方法，與計算機專業學生學習網頁制作課程教學方法，由于專業的差距、前驅課程學習的差距，導致兩個專業不能用同一種教學方法。

藝術設計專業學生在學習網頁設計課程時，應該充分發揮藝術設計專業繪畫、顏色搭配、網頁布局等方面的優勢。在教學的過程中，先收集學生前期課程制作的標志和圖片，利用他們繪制的標志和圖片，制作教學所用案例。利用案例講授每節課程教學重點、難點，這樣可以提高學生的學習積極性，并且在教師教授完成本節課程后，給學生提供展示成就感的學生“教”的教學方法。

（二）學生的“學”

學生的“學”，在教師教授了知識點后，學生的主動學習和被動學習很重要，主動學習不經能聽懂老師講的知識點，還能夠靈活應用。會舉一反三，為了調動學生學習的積極性，對藝術設計專業的學生采用了有獎有罰的學習辦法。獎就是在講授完本節課的知識點后，有個別的學生帶著一起復習，愿意帶著復習的學生，可以根據知識點的多少、知識點的難易來設置獎勵的分值。注意聽的同學和提前預習的同學都會掌握。也就有自信可以掙到應得的分值。

對于不主動學習，也不學的學生采取罰的方法。在執行罰的過程中首先再給予學習的機會，如果能夠在另外一個同學做出來之后，能夠掌握本節課所學知識點，懲罰是可以取消的，但是對于現在的學生有很多從思想上就是不愿意學習的，這樣在給過機會也還是沒有把知識點掌握的。就只能采取懲罰了。懲罰也是根據知識點的多少、知識點的難易來確定懲罰的分值。懲罰不是最終目的，教師的最終目的是要調動學生學習的積極性。要把一部分學生被動的學習變成主動地學習。這樣才能更好的把這門課學好。

（三）學生的“做”

學生“做”的環節主要是針對在經過了老師的教和學生的學習環節之后，學生起主導作用的練習過程。網頁制作這門課程屬于操作性比較強的課程，所需要的學生動手能力也比較強，這就需要學生認真的做練習，為了提高學生的練習速度和效率，采取了現場批改作業的形式，并把作業練習批改分成幾個層次。程度好的相應的做的快，為了做照顧程度差的同學，讓程度好的輔導程度差的，另外根據輔導同學的多少，給程度好的同學加分，也可以充分調動程度好的學生的積極性。

上機練習的內容是把要掌握的知識點通過案例的形式展示出來，這樣對于學生在做的過程中不是單個的復習課程的知識點，而是有目的的綜合課程章節。學生練習中綜合案例，一方面可以加深對知識點的鞏固，另一方面能體會到如何將所學知識點融會貫通。

三、教—學—做一體化教學方法的達到的效果

在“教”的環節中利用學生制作的標志和圖片，可以教會學生進行課程的融合和提高學習的興趣。網頁制作這門課本身就要結合之前學過的Photoshop和flash等設計類課程，在學生“教”和“學”的環節，讓學生由被動的學習變成主動的學習。學生的主動性調動起來學習的動力就有了。興趣產生了，興趣是學習的根本，即使藝術專業的學生學習網頁設計這門課程也能夠掌握。

經過了教師的“教”和“學”生的學環節后，最重要還是把所學的知識能靈活應用。不僅能應用到上課所講的案例中，而是應用到以后的工作中。這就是教—學—做一體化的最后一個環節，學生通過所學知識可以做出自己的網頁，從而可以做出屬于自己的有意義的網站。

參考文獻：

[1]王春紅 王瑾瑜.Dreamweaver Cs6網頁設計案例教程[M].機械工業出版社，2014.

[2]庫波 汪曉青.HTML與CSS3網頁設計.北京理工大學出版社[M]，2013.

[3]邢彩霞 高艷云. Dreamweaver Cs6網頁設計與制作案例教程.中國工信出版社[M]，2016.