張彩虹

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

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；教學(xué)做一體化；教學(xué)方法

一、網(wǎng)頁(yè)制作課程的地位和作用

（一）網(wǎng)頁(yè)制作課程在生活中的地位和作用

互聯(lián)網(wǎng)是一個(gè)蘊(yùn)藏著無(wú)窮資源的寶庫(kù)，在資源共享和信息交互方面具有得天獨(dú)厚的優(yōu)勢(shì)，網(wǎng)頁(yè)正是傳遞這些資源和信息的重要載體。網(wǎng)頁(yè)不但可以用于瀏覽文字、圖片、多媒體信息，而且在娛樂(lè)、商務(wù)等領(lǐng)域都有重要應(yīng)用（如電子郵件、聊天室、搜索引擎、網(wǎng)上購(gòu)物、電子政務(wù)等）。

（二）網(wǎng)頁(yè)制作課程在藝術(shù)設(shè)計(jì)專業(yè)中的地位和作用

隨著時(shí)代的進(jìn)步，設(shè)計(jì)行業(yè)也在飛速的發(fā)展中。UI的設(shè)計(jì)是設(shè)計(jì)這一大行業(yè)中一個(gè)比較熱潮的行業(yè)，因?yàn)閁I設(shè)計(jì)師是設(shè)計(jì)行業(yè)中薪酬比較高的（新手設(shè)計(jì)師），一般剛剛參家UI設(shè)計(jì)師工作的工資都可以拿到5000左右，一二線城市可能會(huì)更高，而且這是個(gè)需要大量人才的行業(yè)，所以就業(yè)前景也是非常好。僅僅這兩點(diǎn)就已經(jīng)對(duì)這些剛畢業(yè)的設(shè)計(jì)專業(yè)大學(xué)生有著很大的誘惑。

而且UI設(shè)計(jì)這一行業(yè)，是一個(gè)不會(huì)過(guò)時(shí)和出現(xiàn)泡沫現(xiàn)象的行業(yè)。隨著時(shí)代的發(fā)展，手機(jī)越來(lái)越是我們生活中不可或缺的一部分了。當(dāng)人們解決了它的一些基礎(chǔ)運(yùn)用（例如：打電話、發(fā)信息等）又開始注重它的一些觀賞性了（例如：外觀、手機(jī)軟件的美觀性等）。而UI設(shè)計(jì)師則是對(duì)手機(jī)里的各種軟件進(jìn)行美化的。

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

Dreamweaver軟件同時(shí)也是一個(gè)優(yōu)秀的UI設(shè)計(jì)師必須掌握的基本軟件，因?yàn)橐粋€(gè)好的設(shè)計(jì)理念、想法，只有設(shè)計(jì)師本人最為清楚，讓別人去跟隨你的想法去設(shè)計(jì)網(wǎng)頁(yè)最終跟自己的想法會(huì)有一些出入。所以，一個(gè)好的UI設(shè)計(jì)師掌握網(wǎng)頁(yè)制作軟件是走向更高崗位的一個(gè)基礎(chǔ)。

二、網(wǎng)頁(yè)制作課程教學(xué)方法

網(wǎng)頁(yè)制作課程的教學(xué)方法采用的是教—學(xué)—做一體化方法。網(wǎng)頁(yè)制作課程使用的是Dreamweave cs6軟件，網(wǎng)頁(yè)制作課程在制作網(wǎng)站的過(guò)程中可以分別在兩個(gè)視圖下制作，一是在代碼視圖，用html語(yǔ)言來(lái)制作網(wǎng)頁(yè)，另一種在設(shè)計(jì)視圖制作網(wǎng)頁(yè)，相比較而言對(duì)于藝術(shù)專業(yè)的學(xué)生，第二種更容易掌握，代碼視圖制作網(wǎng)頁(yè)是要求學(xué)生要掌握一定的單詞，在代碼視圖下制作網(wǎng)頁(yè)的標(biāo)記是英文單詞要熟練掌握，對(duì)于藝術(shù)專業(yè)的學(xué)生來(lái)說(shuō)無(wú)疑增加了難度。藝術(shù)專業(yè)學(xué)生的英語(yǔ)底子薄，所以在進(jìn)行選擇時(shí)使用的是在設(shè)計(jì)視圖中制作網(wǎng)頁(yè)。

在整個(gè)網(wǎng)頁(yè)的設(shè)計(jì)中最主要的部分是網(wǎng)頁(yè)布局和CSS樣式設(shè)置。網(wǎng)頁(yè)布局定位準(zhǔn)確且使用的頻率高的應(yīng)歸為div布局。 設(shè)計(jì)視圖中的div布局定位相對(duì)于代碼視圖的布局定位，代碼視圖能準(zhǔn)確、方便、快捷的定位到要布局的點(diǎn)。CSS 樣式設(shè)置主要用來(lái)修改屬性，CSS 樣式在設(shè)置屬性時(shí)，在代碼視圖和設(shè)計(jì)視圖內(nèi)都要用英文。雖然在進(jìn)行學(xué)習(xí)時(shí)選用設(shè)計(jì)視圖，可是對(duì)于網(wǎng)頁(yè)制作中用到的英文，也要求能靈活應(yīng)用，這就需要老師選擇好的教學(xué)方法，學(xué)生選擇好的學(xué)習(xí)方法。

（一）教師的“教”

教師的“教”，教師的教學(xué)方法是否得當(dāng)，直接決定了學(xué)生學(xué)習(xí)的質(zhì)量。一個(gè)好的教師要懂得用恰當(dāng)?shù)慕虒W(xué)方法來(lái)教授學(xué)生學(xué)習(xí)。在藝術(shù)專業(yè)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)制作課程教學(xué)方法，與計(jì)算機(jī)專業(yè)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)制作課程教學(xué)方法，由于專業(yè)的差距、前驅(qū)課程學(xué)習(xí)的差距，導(dǎo)致兩個(gè)專業(yè)不能用同一種教學(xué)方法。

藝術(shù)設(shè)計(jì)專業(yè)學(xué)生在學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)課程時(shí)，應(yīng)該充分發(fā)揮藝術(shù)設(shè)計(jì)專業(yè)繪畫、顏色搭配、網(wǎng)頁(yè)布局等方面的優(yōu)勢(shì)。在教學(xué)的過(guò)程中，先收集學(xué)生前期課程制作的標(biāo)志和圖片，利用他們繪制的標(biāo)志和圖片，制作教學(xué)所用案例。利用案例講授每節(jié)課程教學(xué)重點(diǎn)、難點(diǎn)，這樣可以提高學(xué)生的學(xué)習(xí)積極性，并且在教師教授完成本節(jié)課程后，給學(xué)生提供展示成就感的學(xué)生“教”的教學(xué)方法。

（二）學(xué)生的“學(xué)”

學(xué)生的“學(xué)”，在教師教授了知識(shí)點(diǎn)后，學(xué)生的主動(dòng)學(xué)習(xí)和被動(dòng)學(xué)習(xí)很重要，主動(dòng)學(xué)習(xí)不經(jīng)能聽(tīng)懂老師講的知識(shí)點(diǎn)，還能夠靈活應(yīng)用。會(huì)舉一反三，為了調(diào)動(dòng)學(xué)生學(xué)習(xí)的積極性，對(duì)藝術(shù)設(shè)計(jì)專業(yè)的學(xué)生采用了有獎(jiǎng)有罰的學(xué)習(xí)辦法。獎(jiǎng)就是在講授完本節(jié)課的知識(shí)點(diǎn)后，有個(gè)別的學(xué)生帶著一起復(fù)習(xí)，愿意帶著復(fù)習(xí)的學(xué)生，可以根據(jù)知識(shí)點(diǎn)的多少、知識(shí)點(diǎn)的難易來(lái)設(shè)置獎(jiǎng)勵(lì)的分值。注意聽(tīng)的同學(xué)和提前預(yù)習(xí)的同學(xué)都會(huì)掌握。也就有自信可以掙到應(yīng)得的分值。

對(duì)于不主動(dòng)學(xué)習(xí)，也不學(xué)的學(xué)生采取罰的方法。在執(zhí)行罰的過(guò)程中首先再給予學(xué)習(xí)的機(jī)會(huì)，如果能夠在另外一個(gè)同學(xué)做出來(lái)之后，能夠掌握本節(jié)課所學(xué)知識(shí)點(diǎn)，懲罰是可以取消的，但是對(duì)于現(xiàn)在的學(xué)生有很多從思想上就是不愿意學(xué)習(xí)的，這樣在給過(guò)機(jī)會(huì)也還是沒(méi)有把知識(shí)點(diǎn)掌握的。就只能采取懲罰了。懲罰也是根據(jù)知識(shí)點(diǎn)的多少、知識(shí)點(diǎn)的難易來(lái)確定懲罰的分值。懲罰不是最終目的，教師的最終目的是要調(diào)動(dòng)學(xué)生學(xué)習(xí)的積極性。要把一部分學(xué)生被動(dòng)的學(xué)習(xí)變成主動(dòng)地學(xué)習(xí)。這樣才能更好的把這門課學(xué)好。

（三）學(xué)生的“做”

學(xué)生“做”的環(huán)節(jié)主要是針對(duì)在經(jīng)過(guò)了老師的教和學(xué)生的學(xué)習(xí)環(huán)節(jié)之后，學(xué)生起主導(dǎo)作用的練習(xí)過(guò)程。網(wǎng)頁(yè)制作這門課程屬于操作性比較強(qiáng)的課程，所需要的學(xué)生動(dòng)手能力也比較強(qiáng)，這就需要學(xué)生認(rèn)真的做練習(xí)，為了提高學(xué)生的練習(xí)速度和效率，采取了現(xiàn)場(chǎng)批改作業(yè)的形式，并把作業(yè)練習(xí)批改分成幾個(gè)層次。程度好的相應(yīng)的做的快，為了做照顧程度差的同學(xué)，讓程度好的輔導(dǎo)程度差的，另外根據(jù)輔導(dǎo)同學(xué)的多少，給程度好的同學(xué)加分，也可以充分調(diào)動(dòng)程度好的學(xué)生的積極性。

上機(jī)練習(xí)的內(nèi)容是把要掌握的知識(shí)點(diǎn)通過(guò)案例的形式展示出來(lái)，這樣對(duì)于學(xué)生在做的過(guò)程中不是單個(gè)的復(fù)習(xí)課程的知識(shí)點(diǎn)，而是有目的的綜合課程章節(jié)。學(xué)生練習(xí)中綜合案例，一方面可以加深對(duì)知識(shí)點(diǎn)的鞏固，另一方面能體會(huì)到如何將所學(xué)知識(shí)點(diǎn)融會(huì)貫通。

三、教—學(xué)—做一體化教學(xué)方法的達(dá)到的效果

在“教”的環(huán)節(jié)中利用學(xué)生制作的標(biāo)志和圖片，可以教會(huì)學(xué)生進(jìn)行課程的融合和提高學(xué)習(xí)的興趣。網(wǎng)頁(yè)制作這門課本身就要結(jié)合之前學(xué)過(guò)的Photoshop和flash等設(shè)計(jì)類課程，在學(xué)生“教”和“學(xué)”的環(huán)節(jié)，讓學(xué)生由被動(dòng)的學(xué)習(xí)變成主動(dòng)的學(xué)習(xí)。學(xué)生的主動(dòng)性調(diào)動(dòng)起來(lái)學(xué)習(xí)的動(dòng)力就有了。興趣產(chǎn)生了，興趣是學(xué)習(xí)的根本，即使藝術(shù)專業(yè)的學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)這門課程也能夠掌握。

經(jīng)過(guò)了教師的“教”和“學(xué)”生的學(xué)環(huán)節(jié)后，最重要還是把所學(xué)的知識(shí)能靈活應(yīng)用。不僅能應(yīng)用到上課所講的案例中，而是應(yīng)用到以后的工作中。這就是教—學(xué)—做一體化的最后一個(gè)環(huán)節(jié)，學(xué)生通過(guò)所學(xué)知識(shí)可以做出自己的網(wǎng)頁(yè)，從而可以做出屬于自己的有意義的網(wǎng)站。

參考文獻(xiàn)：

[1]王春紅 王瑾瑜.Dreamweaver Cs6網(wǎng)頁(yè)設(shè)計(jì)案例教程[M].機(jī)械工業(yè)出版社，2014.

[2]庫(kù)波 汪曉青.HTML與CSS3網(wǎng)頁(yè)設(shè)計(jì).北京理工大學(xué)出版社[M]，2013.

[3]邢彩霞 高艷云. Dreamweaver Cs6網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程.中國(guó)工信出版社[M]，2016.