網(wǎng)頁(yè)設(shè)計(jì)與制作課程教學(xué)實(shí)踐與思考

網(wǎng)頁(yè)設(shè)計(jì)與制作課程教學(xué)實(shí)踐與思考

隨著計(jì)算機(jī)化進(jìn)程的推進(jìn)，人們通過(guò)互聯(lián)網(wǎng)信息披露信息，網(wǎng)絡(luò)信息是網(wǎng)絡(luò)信息傳播的載體。因此，掌握網(wǎng)站設(shè)計(jì)和生產(chǎn)已成為信息交流中不可或缺的計(jì)算機(jī)應(yīng)用技能。近年來(lái)，web生產(chǎn)課程也已成為中國(guó)高校開(kāi)設(shè)的課程。本課程包括平面設(shè)計(jì)、軟件和編程。內(nèi)容豐富，實(shí)用性強(qiáng)，深受學(xué)生歡迎。在這門課上，我們不僅要注重知識(shí)的傳授，還要注重技能的培養(yǎng)。如何在有限的時(shí)間內(nèi)掌握web設(shè)計(jì)的精髓，提高學(xué)生的實(shí)踐和創(chuàng)新能力，是教師在教育中必須解決的問(wèn)題。本文結(jié)合我校“web設(shè)計(jì)與生產(chǎn)”課程的教育經(jīng)驗(yàn)，從教育內(nèi)容設(shè)計(jì)和實(shí)驗(yàn)教學(xué)設(shè)計(jì)兩個(gè)方面探討了這一問(wèn)題。1以網(wǎng)站制作為學(xué)習(xí)任務(wù),以任務(wù)驅(qū)動(dòng)教學(xué).網(wǎng)頁(yè)設(shè)計(jì)與制作是計(jì)算機(jī)領(lǐng)域應(yīng)用最廣泛的技能之一,在云南大學(xué)教學(xué)體系中屬于全校素質(zhì)選修課的技能應(yīng)用系列課程,教學(xué)目標(biāo)是培養(yǎng)學(xué)生的網(wǎng)頁(yè)設(shè)計(jì)與制作能力、信息獲取和加工能力、自主學(xué)習(xí)和創(chuàng)新能力以及團(tuán)隊(duì)協(xié)作能力.該課程集知識(shí)與技能于一體,要求學(xué)生既要學(xué)好理論知識(shí),又要掌握網(wǎng)頁(yè)制作的操作技能,還要具備一定的設(shè)計(jì)創(chuàng)新能力,以及獨(dú)立收集信息、加工處理信息并解決實(shí)際問(wèn)題的能力.網(wǎng)頁(yè)制作的知識(shí)體系非常龐雜,包括網(wǎng)絡(luò)基礎(chǔ)知識(shí)、網(wǎng)頁(yè)制作技術(shù)、平面設(shè)計(jì)和動(dòng)畫制作等基本要素.具體涉及到網(wǎng)頁(yè)制作軟件、圖像處理軟件、動(dòng)畫軟件、數(shù)據(jù)庫(kù)知識(shí)、腳本語(yǔ)言、ASP動(dòng)態(tài)服務(wù)器編程技術(shù)等.教學(xué)內(nèi)容比較多,知識(shí)點(diǎn)比較分散,而周學(xué)時(shí)僅為2個(gè)學(xué)時(shí),為解決該課程學(xué)習(xí)內(nèi)容多、課時(shí)少這一突出的矛盾.在教學(xué)設(shè)計(jì)上以網(wǎng)站制作為學(xué)習(xí)任務(wù),以任務(wù)驅(qū)動(dòng)教學(xué)活動(dòng),針對(duì)每一章的知識(shí)點(diǎn),精心設(shè)計(jì)教學(xué)案例和與之配套的實(shí)驗(yàn)內(nèi)容,每次作業(yè)都是一個(gè)由若干頁(yè)面構(gòu)成的小型網(wǎng)站,學(xué)習(xí)內(nèi)容由淺入深,循序漸進(jìn)地完成網(wǎng)站的建設(shè),并且在獲取新知識(shí)的同時(shí)舊知識(shí)也得到了鞏固和強(qiáng)化,體現(xiàn)了任務(wù)驅(qū)動(dòng)法的教學(xué)本質(zhì).2教學(xué)內(nèi)容設(shè)計(jì)本課程性質(zhì)是全校性公共計(jì)算機(jī)選修課,教學(xué)對(duì)象是全校各專業(yè)的非計(jì)算機(jī)專業(yè)的大一學(xué)生,因此教學(xué)內(nèi)容定位于靜態(tài)網(wǎng)頁(yè)的制作,以Dreamweaver軟件為主線,介紹靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)和制作的基本技術(shù).目前很多網(wǎng)頁(yè)教材是基于網(wǎng)頁(yè)三劍客的(即Dreamweaver、Firworks和Flash),然而在周學(xué)時(shí)少以及大一非計(jì)算機(jī)專業(yè)學(xué)生的條件下,根本做不到三四個(gè)軟件都講到位,事實(shí)上每個(gè)軟件分開(kāi)都可成為一門選修課,而網(wǎng)頁(yè)設(shè)計(jì)課程只能以網(wǎng)頁(yè)制作軟件Dreamweaver為主,其他軟件為輔,并且其他軟件制作的作品要與網(wǎng)頁(yè)密切相關(guān).為了解決內(nèi)容多、學(xué)時(shí)少的矛盾,有利于教學(xué)的開(kāi)展和培養(yǎng)學(xué)生的動(dòng)手能力,作者對(duì)課程的教學(xué)內(nèi)容重新進(jìn)行了合理的調(diào)整:沒(méi)有單獨(dú)去講Fireworks和Flash這兩個(gè)軟件,而是圍繞Dreamweaver軟件講解網(wǎng)頁(yè)制作的方法和技巧,只有在制作圖像縮略圖、切片、按鈕、LOGO圖片等時(shí)候,才輔助其他軟件加工素材或者制作動(dòng)畫.作者將Dreamweaver教學(xué)內(nèi)容分為10個(gè)單元:網(wǎng)頁(yè)基礎(chǔ)知識(shí)、HTML語(yǔ)言基礎(chǔ)、初識(shí)Dreamweaver、網(wǎng)頁(yè)制作初步、網(wǎng)頁(yè)布局和排版、行為、CSS及其應(yīng)用、模板和庫(kù)、表單和動(dòng)態(tài)網(wǎng)頁(yè)、綜合實(shí)例.各個(gè)單元相對(duì)獨(dú)立,便于實(shí)現(xiàn)課程模塊動(dòng)態(tài)組合,實(shí)施分層次教學(xué).教學(xué)內(nèi)容設(shè)計(jì)的總體原則是:2.1案例教學(xué),從淺到深、從基本到綜合,技術(shù)與理論相結(jié)合根據(jù)教學(xué)目的和教學(xué)內(nèi)容選用典型案例,通過(guò)對(duì)案例的分析,講授案例中所用的理論知識(shí),融枯燥的理論學(xué)習(xí)于生動(dòng)的例子中.課程開(kāi)始首先展示一些網(wǎng)站給學(xué)生,引入網(wǎng)頁(yè)的基本概念和術(shù)語(yǔ),引起學(xué)生的興趣.然后介紹編寫網(wǎng)頁(yè)的基本語(yǔ)言HTML,通過(guò)Dreamweaver的拆分視圖讓學(xué)生同時(shí)看到網(wǎng)頁(yè)的設(shè)計(jì)效果與網(wǎng)頁(yè)的源程序,這樣對(duì)照著很容易理解和記住常用的HTML標(biāo)記符.HTML語(yǔ)言是進(jìn)一步學(xué)習(xí)CSS和動(dòng)態(tài)網(wǎng)頁(yè)編程的基礎(chǔ),一些網(wǎng)頁(yè)的特殊效果如背景音樂(lè)、滾動(dòng)字幕、嵌入式框架等都需要通過(guò)HTML代碼編寫來(lái)實(shí)現(xiàn).這也體現(xiàn)了技術(shù)與理論的結(jié)合.講解網(wǎng)頁(yè)制作時(shí)先講文字、圖像、超鏈接、列表、水平線等基本元素的使用方法,再講如何將各種元素合理地放置在網(wǎng)頁(yè)上,方便用戶瀏覽并產(chǎn)生美觀的界面,即網(wǎng)頁(yè)的布局,這也是網(wǎng)頁(yè)設(shè)計(jì)的難點(diǎn)和重點(diǎn)之一.然后利用CSS和行為美化網(wǎng)頁(yè)和實(shí)現(xiàn)特效,最后用模板和庫(kù)實(shí)現(xiàn)批量網(wǎng)頁(yè)的制作和修改.2.2以Dreamweaver網(wǎng)頁(yè)制作軟件為主,穿插圖像和動(dòng)畫軟件網(wǎng)頁(yè)制作通常需要網(wǎng)頁(yè)制作軟件、圖像處理軟件和網(wǎng)頁(yè)動(dòng)畫制作軟件的配合使用,才能制作出風(fēng)格獨(dú)特,美觀的網(wǎng)頁(yè),但學(xué)時(shí)有限,不可能面面俱到.為達(dá)到良好的教學(xué)效果,教學(xué)內(nèi)容的設(shè)計(jì)以用Dreamweaver軟件設(shè)計(jì)制作一個(gè)綜合網(wǎng)站為主線,將各個(gè)知識(shí)點(diǎn)、操作步驟和技巧的講解融入到各個(gè)章節(jié)和不同軟件當(dāng)中.以“夠用、實(shí)用”為原則,有針對(duì)性的講解Flash和Fireworks軟件,Fireworks中只講解與網(wǎng)頁(yè)密切相關(guān)的圖像處理,如LOGO圖片、按鈕、切片、濾鏡和陰影、導(dǎo)航欄的制作等.Flash中只講解動(dòng)畫基本制作方法和簡(jiǎn)單文字動(dòng)畫、逐幀動(dòng)畫,以突出教學(xué)重點(diǎn).2.3重視網(wǎng)頁(yè)的樣式和行為的高級(jí)應(yīng)用網(wǎng)頁(yè)設(shè)計(jì)入門容易,但要設(shè)計(jì)制作出技術(shù)與藝術(shù)性融合的網(wǎng)頁(yè)卻不是簡(jiǎn)單的事情,網(wǎng)頁(yè)除了掌握HTML語(yǔ)言和工具軟件之外,CSS(層疊樣式表)技術(shù)和行為特效在網(wǎng)頁(yè)設(shè)計(jì)中也是必不可少的,也是網(wǎng)頁(yè)學(xué)習(xí)的難點(diǎn).采用CSS技術(shù),可以對(duì)頁(yè)面的布局、字體、顏色、背景等實(shí)現(xiàn)更加精確的控制,使網(wǎng)頁(yè)代碼簡(jiǎn)練,不但實(shí)現(xiàn)了網(wǎng)頁(yè)內(nèi)容和格式的分離,還起到了統(tǒng)一網(wǎng)站不同頁(yè)面風(fēng)格的效果.設(shè)計(jì)者需要掌握CSS設(shè)置頁(yè)面元素特定的格式,美化頁(yè)面,實(shí)現(xiàn)HTML標(biāo)記本身無(wú)法實(shí)現(xiàn)的格式.另外CSS還可以與層配合實(shí)現(xiàn)網(wǎng)頁(yè)的精確布局.而且CSS樣式一旦更新,所有引用CSS的元素也自動(dòng)更新,這樣可大大提高網(wǎng)頁(yè)制作的效率.行為本質(zhì)上是當(dāng)用戶在對(duì)象上觸發(fā)了某個(gè)事件時(shí)所執(zhí)行的客戶端的Javascript程序,通過(guò)使用Dreamweaver自帶的多種行為,設(shè)計(jì)者無(wú)需編程就可以實(shí)現(xiàn)“打開(kāi)瀏覽器窗口”、“轉(zhuǎn)到URL”、“顯示/隱藏層”、“交換圖像”等多種網(wǎng)頁(yè)特效.3實(shí)驗(yàn)教學(xué)內(nèi)容對(duì)教學(xué)效果的作用“網(wǎng)頁(yè)設(shè)計(jì)與制作”是一門技術(shù)性和實(shí)踐性很強(qiáng)、極富創(chuàng)造性的課程,必須并且只有經(jīng)過(guò)實(shí)踐,才能真正掌握知識(shí)和技能.實(shí)驗(yàn)教學(xué)能夠幫助學(xué)生消化吸收課程內(nèi)容,使學(xué)生迅速抓住學(xué)習(xí)的重點(diǎn),并且通過(guò)實(shí)驗(yàn)教學(xué)的實(shí)施,一方面學(xué)生可以不斷地獲得成就感,從而更大地激發(fā)他們的求知欲望,另一方面促使學(xué)生掌握網(wǎng)頁(yè)設(shè)計(jì)與制作的知識(shí)與技能,提高學(xué)生的信息技術(shù)應(yīng)用水平,從而培養(yǎng)出獨(dú)立探索、勇于開(kāi)拓進(jìn)取的自學(xué)能力,因此,實(shí)驗(yàn)教學(xué)內(nèi)容的設(shè)計(jì)對(duì)教學(xué)效果起著至關(guān)重要的作用.3.11“學(xué)”學(xué)放我們以培養(yǎng)學(xué)生動(dòng)手能力為目標(biāo)來(lái)指導(dǎo)整個(gè)教改思路,為了使學(xué)生高效地掌握網(wǎng)頁(yè)設(shè)計(jì)制作的知識(shí)與技能,采取在機(jī)房上課,這種教學(xué)環(huán)境實(shí)現(xiàn)了“教”與“學(xué)”的同步,第一節(jié)課教師演示,第二節(jié)課布置實(shí)驗(yàn)作業(yè),要求學(xué)生當(dāng)場(chǎng)完成并通過(guò)網(wǎng)絡(luò)提交作業(yè).機(jī)房授課的好處一是學(xué)生可及時(shí)將學(xué)到的知識(shí)應(yīng)用于實(shí)踐中,在實(shí)踐中檢驗(yàn)知識(shí)和技能掌握情況;二是學(xué)生上機(jī)出現(xiàn)問(wèn)題時(shí)教師可及時(shí)指導(dǎo)學(xué)生;三是通過(guò)在機(jī)房安裝的紅蜘蛛等網(wǎng)絡(luò)教室軟件的教師機(jī)可以方便、快捷地發(fā)布講稿、課件、上機(jī)素材等學(xué)習(xí)資源,提高教學(xué)效率.這種邊講邊練的方式和案例教學(xué)法,鍛煉了學(xué)生解決實(shí)際問(wèn)題的能力、自主學(xué)習(xí)能力和協(xié)作學(xué)習(xí)能力.3.2案例介紹與設(shè)計(jì)案例展示目前的網(wǎng)頁(yè)教材通常只是給出每個(gè)知識(shí)點(diǎn)的簡(jiǎn)單案例,每一章提供的上機(jī)實(shí)驗(yàn)內(nèi)容并不多,實(shí)驗(yàn)題目沒(méi)有素材和說(shuō)明,不方便學(xué)生使用.并且每個(gè)高校的學(xué)生層次不同,為了體現(xiàn)因材施教學(xué)的教學(xué)原則,教師應(yīng)當(dāng)根據(jù)各個(gè)學(xué)校的教學(xué)特點(diǎn)來(lái)設(shè)計(jì)實(shí)驗(yàn)內(nèi)容,實(shí)驗(yàn)設(shè)計(jì)的原則是盡量多地覆蓋教學(xué)大綱的知識(shí)點(diǎn),每個(gè)實(shí)驗(yàn)給出基本要求和素材,實(shí)驗(yàn)內(nèi)容既要有典型性、基礎(chǔ)性、美觀性,還要有擴(kuò)展性和綜合性.作者結(jié)合課程內(nèi)容,精心設(shè)計(jì)了11個(gè)與教學(xué)內(nèi)容配套的實(shí)驗(yàn)內(nèi)容,期末考試則要求學(xué)生發(fā)揮創(chuàng)意,提交個(gè)人設(shè)計(jì)制作的一個(gè)網(wǎng)站作品.11個(gè)實(shí)驗(yàn)內(nèi)容分別是:(1)通過(guò)一個(gè)綜合網(wǎng)站案例體現(xiàn)站點(diǎn)的創(chuàng)建,文字、圖像、超鏈接、動(dòng)畫、音頻、視頻等網(wǎng)頁(yè)基本元素的用法.(2)通過(guò)網(wǎng)站相冊(cè)、圖像查看器、透明Flash作背景、導(dǎo)航條等案例,介紹各種網(wǎng)頁(yè)制作技巧,拓展設(shè)計(jì)思路.(3)利用表格嵌套或布局表格布局方法,實(shí)現(xiàn)并列的排版效果.并且在單元格內(nèi)通過(guò)<marquee>標(biāo)記符實(shí)現(xiàn)水平或垂直滾動(dòng)字幕.(4)表格布局案例,如圖1所示,通過(guò)該案例使學(xué)生了解表格布局的特點(diǎn)和實(shí)現(xiàn)步驟,該案例的制作體現(xiàn)了表格的創(chuàng)建、表格/行/列/單元格的屬性設(shè)置、細(xì)線表格制作技巧、超鏈接等諸多知識(shí)點(diǎn).(5)框架布局案例,通過(guò)該案例使學(xué)生了解框架布局的特點(diǎn)和實(shí)現(xiàn)功能,該案例的制作體現(xiàn)了框架網(wǎng)頁(yè)的創(chuàng)建、保存、屬性設(shè)置、設(shè)置超鏈接的目標(biāo)窗口、嵌入式框架、設(shè)置貫穿網(wǎng)站的背景音樂(lè)等諸多知識(shí)點(diǎn).(6)層布局案例,通過(guò)該案例使學(xué)生了解層布局的特點(diǎn)和使用方法,該案例的制作體現(xiàn)了層的操作、屬性設(shè)置、層布局的靈活性、層與行為相結(jié)合產(chǎn)生網(wǎng)頁(yè)特效等諸多知識(shí)點(diǎn).(7)行為綜合案例,通過(guò)該案例使學(xué)生了解行為的概念、要素和使用方法,該案例的制作體現(xiàn)了“打開(kāi)瀏覽器窗口”、“轉(zhuǎn)到URL”、“交換圖像”、“設(shè)置文本”、“顯示/隱藏層”、“彈出消息”、“檢查表單”等諸多行為的合理應(yīng)用.(8)層疊樣式表案例,通過(guò)為文字、圖片、列表、段落、超鏈接等應(yīng)用樣式,使學(xué)生了解CSS的概念,選擇器類型和Dreamweaver中的CSS樣式定義的方法,該案例的制作體現(xiàn)了CSS的新建、編輯、套用、導(dǎo)出、導(dǎo)入等知識(shí)點(diǎn).(9)層疊樣式表綜合案例,通過(guò)導(dǎo)出和導(dǎo)入外部層疊樣式表來(lái)統(tǒng)一網(wǎng)站不同網(wǎng)頁(yè)的文字、背景圖像、超鏈接特效、邊框、段落縮進(jìn)等格式.(10)表單案例,通過(guò)該案例使學(xué)生了解表單的概念、常用表單元素、表單的設(shè)計(jì)方法以及表單的功能,結(jié)合用戶登錄、注冊(cè)、注銷、修改密碼,以及留言本的制作(包括提交和顯示留言功能)這一綜合表單案例體現(xiàn)了利用Dreamweaver可視化地設(shè)計(jì)與制作動(dòng)態(tài)網(wǎng)頁(yè),實(shí)現(xiàn)了對(duì)網(wǎng)絡(luò)數(shù)據(jù)庫(kù)表的查詢、增加、刪除、修改操作.引入了網(wǎng)絡(luò)編程的概念,并為將來(lái)進(jìn)一步深入學(xué)習(xí)動(dòng)態(tài)網(wǎng)頁(yè)編程技術(shù)打下基礎(chǔ).(11)模板和庫(kù)案例,使學(xué)生了解模板和庫(kù)的概念、作用和用法,結(jié)合該案例的制作體現(xiàn)如何通過(guò)模板和庫(kù)快速開(kāi)發(fā)風(fēng)格統(tǒng)一的批量網(wǎng)頁(yè).圖2為實(shí)驗(yàn)“模板與庫(kù)”的最終效果,該實(shí)驗(yàn)主要知識(shí)點(diǎn)有設(shè)置表格布局、模板與庫(kù)文件的創(chuàng)建,縮略圖的制作、套用模板到頁(yè)面,