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