《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程優(yōu)化與教學(xué)方法探索
2011-12-09 05:14丁海燕袁國(guó)武張春紅白孟堯
丁海燕，袁國(guó)武，張春紅，白孟堯，邱 莎
(1.云南大學(xué) 信息學(xué)院，云南 昆明 650091；2.云南師范大學(xué) 文理學(xué)院 信息工程學(xué)院，云南 昆明 650222；3.昆明學(xué)院 計(jì)算機(jī)系，云南 昆明 650031)
隨著Internet的迅速發(fā)展與普及，人們通過(guò)瀏覽網(wǎng)頁(yè)可方便地獲取信息，并且越來(lái)越多的個(gè)人、公司、企業(yè)、政府和學(xué)校建立了自己的網(wǎng)站。一個(gè)完整的網(wǎng)站并不是由一個(gè)單獨(dú)的軟件制作而成的，它需要多方面的配合，包括：網(wǎng)絡(luò)知識(shí)、網(wǎng)頁(yè)制作技術(shù)、網(wǎng)頁(yè)布局、網(wǎng)頁(yè)配色，以及相關(guān)的網(wǎng)頁(yè)制作軟件、圖形圖像處理軟件、動(dòng)畫(huà)軟件、數(shù)據(jù)庫(kù)編程等。因此在教學(xué)實(shí)踐方面需要多學(xué)科地綜合，需要在理論教學(xué)和實(shí)踐教學(xué)模式與方法上進(jìn)行探索。
“網(wǎng)頁(yè)制作”課程通常作為計(jì)算機(jī)公共選修課程，或者數(shù)字媒體專(zhuān)業(yè)的選修課程，在教學(xué)中主要存在以下三方面的問(wèn)題：一是學(xué)生對(duì)網(wǎng)頁(yè)技術(shù)的綜合應(yīng)用能力不強(qiáng)，不能合理應(yīng)用各個(gè)章節(jié)的知識(shí)點(diǎn)，達(dá)不到融會(huì)貫通的效果；二是由于涉及的軟件和計(jì)算機(jī)知識(shí)多，學(xué)生缺乏網(wǎng)頁(yè)布局、色彩美學(xué)、動(dòng)畫(huà)制作、圖像處理、美工設(shè)計(jì)等知識(shí)，導(dǎo)致制作的網(wǎng)頁(yè)布局和版面不佳，缺乏設(shè)計(jì)美感。三是創(chuàng)造性不高，多是簡(jiǎn)單內(nèi)容的堆砌，技術(shù)含量不高。作為計(jì)算機(jī)公共選修課，周學(xué)時(shí)僅2節(jié)，因此，在學(xué)時(shí)較少的情況下，如何讓學(xué)生高效掌握網(wǎng)頁(yè)制作的知識(shí)和技能，是教學(xué)改革的目標(biāo)。以下從教學(xué)內(nèi)容、教學(xué)方法和層次化教學(xué)模式三方面闡述如何提高學(xué)生的興趣和實(shí)踐技能。
一、優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)的理論教學(xué)內(nèi)容
由于網(wǎng)頁(yè)設(shè)計(jì)涉及到網(wǎng)頁(yè)制作軟件、圖像處理軟件、動(dòng)畫(huà)軟件、數(shù)據(jù)庫(kù)知識(shí)、腳本語(yǔ)言、ASP動(dòng)態(tài)服務(wù)器編程技術(shù)等,因此,內(nèi)容比較雜,知識(shí)點(diǎn)比較分散,目前的教材通常根據(jù)網(wǎng)頁(yè)三劍客這三款軟件的使用,將內(nèi)容分為三個(gè)大部分,一是“所見(jiàn)即所得”的可視化網(wǎng)站開(kāi)發(fā)工具DreamweaverMX,二是處理網(wǎng)頁(yè)圖片的圖像軟件Fireworks，三是制作網(wǎng)頁(yè)動(dòng)畫(huà)的軟件Flash。但是如果按部就班地按照這三部分來(lái)講解，學(xué)時(shí)遠(yuǎn)遠(yuǎn)不夠，F(xiàn)ireworks和Flash軟件只好蜻蜓點(diǎn)水、一帶而過(guò)，這樣一來(lái)學(xué)生的綜合能力無(wú)法提高。因此，為了有利于教學(xué)的開(kāi)展和培養(yǎng)學(xué)生分析、解決問(wèn)題的能力，我們應(yīng)當(dāng)本著“從淺到深、從基本到綜合，技術(shù)與理論相結(jié)合”的原則，對(duì)教學(xué)內(nèi)容重新進(jìn)行合理地整合和模塊的劃分?？梢詫ⅰ毒W(wǎng)頁(yè)設(shè)計(jì)》課程的理論教學(xué)內(nèi)容劃分為以下九個(gè)知識(shí)單元, 各個(gè)單元相對(duì)獨(dú)立，便于實(shí)現(xiàn)課程模塊動(dòng)態(tài)組合，實(shí)施分層次教學(xué)。
單元一:介紹網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)。介紹網(wǎng)絡(luò)基本術(shù)語(yǔ)，網(wǎng)頁(yè)瀏覽原理，網(wǎng)頁(yè)制作語(yǔ)言，網(wǎng)站開(kāi)發(fā)的原則、網(wǎng)頁(yè)制作軟件等知識(shí)。
單元二：網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言HTML。主要介紹HTML頁(yè)面基本結(jié)構(gòu)，以及常用的標(biāo)記符，如文本修飾、超鏈接、圖像、表格、框架、層、層疊樣式表CSS的標(biāo)記符及屬性等。
單元三:在Dreamverver中創(chuàng)建站點(diǎn)。網(wǎng)頁(yè)設(shè)計(jì)的第一步就是創(chuàng)建站點(diǎn)。所謂站點(diǎn)是Dreamweaver提供的一種組織所有和Web有關(guān)文檔的方法。在制作站點(diǎn)時(shí)對(duì)網(wǎng)站的整體架構(gòu)要有一個(gè)明確的把握，即首先要進(jìn)行網(wǎng)站規(guī)劃工作。即將所有的網(wǎng)頁(yè)文件、圖片、聲音、視頻等資源分門(mén)別類(lèi)地放在各自的文件夾中[1]。
單元四:輸入和編輯頁(yè)面元素。頁(yè)面元素包括文本、圖像、超級(jí)鏈接、表格、框架、圖層、音樂(lè)、動(dòng)畫(huà)、視頻、網(wǎng)站的標(biāo)志性圖標(biāo)Logo、導(dǎo)航欄等。要求學(xué)生以各種各樣的頁(yè)面元素的形式將網(wǎng)站內(nèi)容展現(xiàn)在網(wǎng)頁(yè)中,用Photoshop等圖像軟件設(shè)計(jì)出網(wǎng)站獨(dú)特的Logo圖標(biāo)。
單元五: 設(shè)計(jì)網(wǎng)頁(yè)布局。所謂網(wǎng)頁(yè)布局，是指將網(wǎng)頁(yè)中的所有元素進(jìn)行定位，即將各種不同的頁(yè)面元素有機(jī)地組織在網(wǎng)頁(yè)中,網(wǎng)頁(yè)的外觀風(fēng)格便決定了網(wǎng)頁(yè)設(shè)計(jì)的好壞。網(wǎng)頁(yè)的具體布局與網(wǎng)頁(yè)內(nèi)容、網(wǎng)頁(yè)風(fēng)格、網(wǎng)頁(yè)大小等因素有關(guān)，可以采用表格或布局表格布局、框架布局、圖層布局、DIV+CSS布局種等多種手段來(lái)布局網(wǎng)頁(yè)元素[1]。
單元六: 利用樣式表美化網(wǎng)頁(yè)。層疊樣式表CSS是網(wǎng)頁(yè)元素外觀屬性的集合，它可以定義文字、表格、圖像、表單等網(wǎng)頁(yè)元素的屬性。CSS樣式可以控制許多僅使用HTML無(wú)法控制的屬性，教學(xué)的重點(diǎn)是通過(guò)對(duì)CSS規(guī)則的定義和套用來(lái)統(tǒng)一整個(gè)網(wǎng)站的風(fēng)格。CSS最大的好處是更新CSS樣式時(shí)，使用該樣式的所有文檔的格式都會(huì)自動(dòng)更新，極大地提高了格式化網(wǎng)頁(yè)的效率[1]。
單元七: 制作網(wǎng)頁(yè)特效。利用行為，實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖像、顯示隱藏層、彈出窗口等特效，利用JavaScript語(yǔ)言編寫(xiě)腳本程序?qū)崿F(xiàn)圖片倒影、雪花飛舞、彈跳文字等特效,利用
單元八:服務(wù)器端編程及其它相關(guān)知識(shí)。通過(guò)表單從客戶(hù)端收集信息到服務(wù)器端，從靜態(tài)網(wǎng)頁(yè)擴(kuò)展到動(dòng)態(tài)網(wǎng)頁(yè)，利用ASP技術(shù)訪問(wèn)網(wǎng)絡(luò)數(shù)據(jù)庫(kù)，實(shí)現(xiàn)實(shí)時(shí)、動(dòng)態(tài)、交互的頁(yè)面效果；通過(guò)庫(kù)項(xiàng)目和模板復(fù)用頁(yè)面資源等。
單元九：動(dòng)畫(huà)制作和網(wǎng)頁(yè)圖像處理軟件。重點(diǎn)介紹動(dòng)畫(huà)制作基本方法，以及Fireworks中與網(wǎng)頁(yè)密切相關(guān)的圖像處理，如LOGO圖標(biāo)、按鈕的制作，切片的生成、濾鏡和陰影、光暈特效等，導(dǎo)航欄的制作等[1]。
總之,這幾個(gè)單元是對(duì)教學(xué)內(nèi)容的提煉和升華，它們覆蓋了網(wǎng)頁(yè)設(shè)計(jì)與制作的基本技術(shù)與理論。而且從簡(jiǎn)單到復(fù)雜，由局部到整體，符合學(xué)生的認(rèn)知規(guī)律，這些模塊相互獨(dú)立，在應(yīng)用上可以交叉，形成多層次、立體化的教學(xué)體系。
二、任務(wù)驅(qū)動(dòng)法的應(yīng)用
《網(wǎng)頁(yè)設(shè)計(jì)》是一門(mén)技術(shù)性和實(shí)踐性很強(qiáng)、極富創(chuàng)造性的課程,必須并且只有經(jīng)過(guò)實(shí)踐,才能真正掌握知識(shí)和技能[2]。在傳統(tǒng)的教學(xué)過(guò)程中,知識(shí)點(diǎn)分散,有的案例僅僅說(shuō)明個(gè)別知識(shí)點(diǎn),學(xué)生只見(jiàn)樹(shù)木不見(jiàn)森林,無(wú)法將各種網(wǎng)站制作方法和技術(shù)融會(huì)貫通。因此在網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中,特別適合采用任務(wù)驅(qū)動(dòng)法進(jìn)行教學(xué)。任務(wù)驅(qū)動(dòng)教學(xué)法就是讓學(xué)生在一個(gè)典型的任務(wù)驅(qū)動(dòng)下展開(kāi)教學(xué)活動(dòng),從網(wǎng)頁(yè)設(shè)計(jì)實(shí)際工作過(guò)程出發(fā),抓住重點(diǎn)和難點(diǎn)問(wèn)題進(jìn)行任務(wù)設(shè)計(jì)[3]。這就對(duì)教師的業(yè)務(wù)水平提出了更高要求，教師不僅要轉(zhuǎn)變教學(xué)觀念, 而且對(duì)課程需要有很深的理解。教師通過(guò)精心設(shè)計(jì)一個(gè)綜合案例,盡量將所有章節(jié)的知識(shí)點(diǎn)涵蓋進(jìn)去, 在教學(xué)過(guò)程中不斷地運(yùn)用“新任務(wù)”來(lái)引導(dǎo)學(xué)生學(xué)習(xí)，并按照上面所述的模塊化教學(xué)內(nèi)容,層層深入學(xué)習(xí), 教師邊實(shí)際操作邊講解涉及到的新知識(shí),以前學(xué)過(guò)的舊知識(shí)也在這一過(guò)程中得以鞏固。通過(guò)綜合性案例的學(xué)習(xí),學(xué)生能夠輕松掌握網(wǎng)頁(yè)制作方法并能夠創(chuàng)作形式生動(dòng)的網(wǎng)站。
任務(wù)驅(qū)動(dòng)法不同于簡(jiǎn)單的案例教學(xué),它是采用項(xiàng)目化教學(xué)方式，即教師不是圍繞知識(shí)點(diǎn)去設(shè)計(jì)每個(gè)單獨(dú)的案例, 而是針對(duì)整個(gè)課程設(shè)計(jì)一個(gè)貫穿項(xiàng)目, 這個(gè)貫穿項(xiàng)目由若干模塊組成, 并能夠覆蓋課程的所有理論知識(shí)[4]。任務(wù)驅(qū)動(dòng)法符合循序漸進(jìn)的原則,由簡(jiǎn)單到復(fù)雜,由表及里。另處在完成任務(wù)的過(guò)程中,向?qū)W生傳授了分析和解決問(wèn)題的方法,在創(chuàng)作過(guò)程中,成就感激發(fā)了求知欲,從而培養(yǎng)出獨(dú)立探索、勇于創(chuàng)新的能力。例如，設(shè)計(jì)一個(gè)綜合的風(fēng)景網(wǎng)站，講解單元三時(shí)建一風(fēng)景站點(diǎn)，講解單元四時(shí)制作一兩個(gè)風(fēng)景網(wǎng)頁(yè)，其中用到文本、超鏈接、背景音樂(lè)、圖像、熱點(diǎn)等基本網(wǎng)頁(yè)元素，講解單元五時(shí)用表格布局、框架布局、圖層布局來(lái)制作頁(yè)面。講解單元六時(shí)新建若干樣式表，統(tǒng)一該風(fēng)景網(wǎng)站各頁(yè)面的顯示風(fēng)格，如統(tǒng)一的背景圖、字體、字號(hào)、邊框等。講解單元七時(shí)給頁(yè)面上的對(duì)象加上一些特效，如滾動(dòng)字幕、圖片翻轉(zhuǎn)、圖層與行為特效等。講解單元八時(shí)制作一個(gè)留言簿，制作表單供用戶(hù)填寫(xiě)和選擇信息，提交時(shí)通過(guò)ASP的ADO組件連接數(shù)據(jù)庫(kù)，執(zhí)行查詢(xún)、插入、刪除、更新操作，實(shí)現(xiàn)瀏覽者與服務(wù)器端的交互。講解單元九時(shí)，利用Flash為首頁(yè)制作幾個(gè)文字或圖片動(dòng)畫(huà)，用Fireworks制作導(dǎo)向欄和按鈕，用切片分割圖片制作出整體感強(qiáng)烈、渾然一體的版面效果。通過(guò)為網(wǎng)站不斷添磚加瓦的方式，提出新任務(wù)，引導(dǎo)學(xué)生思考新問(wèn)題，這樣學(xué)生圍繞著如何解決任務(wù)去掌握各個(gè)知識(shí)要點(diǎn),并可以舉一反三,靈活應(yīng)用所學(xué)知識(shí)[2]。
三、層次化教學(xué)體系
網(wǎng)頁(yè)設(shè)計(jì)不同于抽象的理論學(xué)習(xí)，教學(xué)目的是學(xué)生動(dòng)手和創(chuàng)新能力的培養(yǎng)。網(wǎng)頁(yè)本身就是一個(gè)繪聲繪色的多媒體綜合產(chǎn)物，興趣是最好的老師，因此,要采用直觀式教學(xué)，充分發(fā)揮多媒體計(jì)算機(jī)處理文字、圖像、聲音、動(dòng)畫(huà)、視頻、音樂(lè)等多種信息的功能,讓學(xué)生在一種愉悅的學(xué)習(xí)氛圍和教學(xué)環(huán)境中,從而激發(fā)起學(xué)生的學(xué)習(xí)興趣和求知欲[2]。另外教師可以通過(guò)展示一些經(jīng)典的、美觀的網(wǎng)站和學(xué)生的優(yōu)秀設(shè)計(jì)作品,引導(dǎo)學(xué)生根據(jù)個(gè)人的興趣愛(ài)好設(shè)計(jì)網(wǎng)頁(yè),激發(fā)學(xué)生創(chuàng)作的熱情，培養(yǎng)學(xué)生的動(dòng)手能力，一個(gè)學(xué)期總的來(lái)說(shuō)，教學(xué)過(guò)程包括4個(gè)層次：
(1)課堂講解示范。通過(guò)綜合案例將網(wǎng)頁(yè)制作的知識(shí)點(diǎn)和操作方法融入其中，以任務(wù)驅(qū)動(dòng)法進(jìn)行講解示范[5]。
(2)課后作業(yè)。模仿課堂上講解的方法，舉一反三，發(fā)揮創(chuàng)意，上機(jī)實(shí)踐，做出比課堂實(shí)例更豐富的網(wǎng)頁(yè)。
(3)期中考試。在進(jìn)行期中考試時(shí)，為考查學(xué)生知識(shí)點(diǎn)掌握情況，可以采用隨堂考試的方式，以Word文檔給出一個(gè)小型綜合網(wǎng)站的首頁(yè)及主要頁(yè)面的截圖效果，并提供部分圖片、動(dòng)畫(huà)和音樂(lè)素材，該網(wǎng)站涉及所學(xué)的文本、日期、圖像、超鏈接、動(dòng)畫(huà)、音樂(lè)、表格、框架等知識(shí)點(diǎn)，注意只給出大致要求即可，不要太細(xì)，如制作一個(gè)左右框架，點(diǎn)擊左邊的超鏈接在右邊打開(kāi)目標(biāo)頁(yè)面等，讓學(xué)生按照指定要求自己設(shè)計(jì)頁(yè)面布局結(jié)構(gòu)、網(wǎng)頁(yè)具體內(nèi)容、色彩搭配、導(dǎo)航條、網(wǎng)頁(yè)多媒體效果等[5]。
(4)期末作品。根據(jù)整個(gè)學(xué)期所學(xué)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，結(jié)合自身興趣愛(ài)好確定一個(gè)主題，獨(dú)立完成制作一個(gè)不少于5個(gè)頁(yè)面的網(wǎng)站作為作品，要求合理運(yùn)用文本、圖像、多媒體、布局合理美觀、有生動(dòng)的網(wǎng)頁(yè)特效，內(nèi)容豐富，有一定的交互性和獨(dú)創(chuàng)性，根據(jù)平時(shí)占30%,作品占70%計(jì)算總評(píng)成績(jī)，還可以采用答辯的方式讓學(xué)生展示自己的綜合作品，相互交流學(xué)習(xí)心得，促使學(xué)生產(chǎn)生學(xué)習(xí)成就感和競(jìng)爭(zhēng)意識(shí)。
《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程的教學(xué)目標(biāo)是培養(yǎng)學(xué)生的創(chuàng)新思維能力和思維方法,使學(xué)生的動(dòng)手能力、分析和解決問(wèn)題的能力、獲取新知識(shí)的能力、團(tuán)結(jié)協(xié)作的能力得以提高[6]。根據(jù)網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)新性、實(shí)踐性強(qiáng)等特點(diǎn)，通過(guò)優(yōu)化教學(xué)內(nèi)容、采用任務(wù)驅(qū)動(dòng)教學(xué)方法和層次化教學(xué)體系等幾個(gè)方面的改革和嘗試，學(xué)生既掌握了網(wǎng)頁(yè)設(shè)計(jì)與制作的知識(shí)和技能，而且培養(yǎng)了學(xué)生動(dòng)手解決問(wèn)題和創(chuàng)新的能力。實(shí)踐證明，任務(wù)式教學(xué)方法極大地激發(fā)了學(xué)生的學(xué)習(xí)熱情，教學(xué)效果顯著改善，教師的學(xué)科水平也得到了提高,促進(jìn)了該門(mén)課程的規(guī)范化和系統(tǒng)化，符合專(zhuān)業(yè)培養(yǎng)目標(biāo)和社會(huì)對(duì)數(shù)字媒體專(zhuān)業(yè)人才的需求。
[參考文獻(xiàn)]
[1]王秀麗. 網(wǎng)頁(yè)設(shè)計(jì)與制作[M].北京：清華大學(xué)出版社，2006.
[2] 蔣秀玲,鄒淑英,陳文東.“任務(wù)驅(qū)動(dòng)”教學(xué)法在Dreamweaver教學(xué)中的運(yùn)用[J].通化師范學(xué)院學(xué)報(bào)，2009,30(10): 88-89.
[3] 殷兆燕，崔毓娟.《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教學(xué)改革探索與實(shí)踐[J]. 常州信息職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2009, 8(4): 64-66.
[4] 陳義文.《網(wǎng)頁(yè)設(shè)計(jì)》項(xiàng)目化教學(xué)的實(shí)踐與思考[J]. 安順學(xué)院學(xué)報(bào)，2009,11(4): 94-96.
[5] 謝曉能.“層次化”任務(wù)驅(qū)動(dòng)教學(xué)模式提升高職學(xué)生網(wǎng)頁(yè)制作能力的實(shí)踐[J].南京廣播電視大學(xué)學(xué)報(bào)，2009(3): 65-67.
[6]王曉紅,周立.《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教學(xué)改革[J].北京聯(lián)合大學(xué)學(xué)報(bào)：自然科學(xué)版 ，2006, 20(4): 90-92.
猜你喜歡
保健醫(yī)苑(2022年1期)2022-08-30
動(dòng)漫界·幼教365(中班)(2021年4期)2021-05-23
成都信息工程大學(xué)學(xué)報(bào)(2021年6期)2021-02-12
電腦愛(ài)好者(2020年17期)2020-09-14
魅力中國(guó)(2018年5期)2018-07-30
中學(xué)科技(2016年7期)2017-05-16
科學(xué)與財(cái)富(2016年18期)2016-12-22
電腦知識(shí)與技術(shù)(2016年21期)2016-10-18
科技視界(2016年17期)2016-07-15
科技視界(2016年9期)2016-04-26
云南農(nóng)業(yè)大學(xué)學(xué)報(bào)(社會(huì)科學(xué))2011年3期
- 云南農(nóng)業(yè)大學(xué)學(xué)報(bào)(社會(huì)科學(xué))的其它文章
- 西雙版納州農(nóng)村土地流轉(zhuǎn)制約因素探析
- 特許經(jīng)營(yíng)理論研究的文獻(xiàn)綜述
- 試析費(fèi)孝通西部大開(kāi)發(fā)的人文生態(tài)思想
- 甘肅省種糧補(bǔ)貼政策實(shí)施現(xiàn)狀和效果的調(diào)查分析
- 半導(dǎo)體物理學(xué)的發(fā)展及啟示
- 20世紀(jì)50年代以來(lái)云南民族識(shí)別研究回顧與反思