網(wǎng)頁(yè)設(shè)計(jì)與制作課程教學(xué)內(nèi)容設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)與制作課程教學(xué)內(nèi)容設(shè)計(jì)

與其他課程相比，“web設(shè)計(jì)與生產(chǎn)”課程有著更獨(dú)特的特點(diǎn)。這是一門(mén)內(nèi)容廣泛、用于工具和實(shí)用性的實(shí)踐課程。它內(nèi)容廣泛，包括計(jì)算機(jī)圖紙?zhí)幚?、?jì)算機(jī)科學(xué)生產(chǎn)、文本編輯、數(shù)據(jù)庫(kù)訪問(wèn)、藝術(shù)設(shè)計(jì)與網(wǎng)絡(luò)編程等相關(guān)知識(shí)。這門(mén)課程集面積大大，理論與實(shí)踐相結(jié)合，對(duì)教師提出了更高的要求。1教學(xué)內(nèi)容設(shè)計(jì)網(wǎng)頁(yè)制作綜合了多門(mén)學(xué)科知識(shí),在教學(xué)中不可能面面俱到,不同學(xué)?？筛鶕?jù)學(xué)生的層次和課時(shí)安排有所側(cè)重,組織適當(dāng)?shù)慕虒W(xué)資源如課件、素材、源代碼、實(shí)例等進(jìn)行教學(xué),力求學(xué)為所用,重點(diǎn)突出.下面結(jié)合實(shí)際教學(xué)經(jīng)驗(yàn),介紹“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程的教學(xué)內(nèi)容設(shè)計(jì).1.1功能強(qiáng)大的網(wǎng)頁(yè)編輯制作工具早期由于制作工具的缺乏,網(wǎng)頁(yè)制作人員必須精通HTML語(yǔ)言.記事本成了設(shè)計(jì)制作網(wǎng)頁(yè)的工具,撰寫(xiě)HTML源代碼,效率低且對(duì)Web設(shè)計(jì)者要求高,隨著Frontpage與Dreamweaver及Homesite等功能強(qiáng)大的網(wǎng)頁(yè)編輯制作工具的誕生,使得操作簡(jiǎn)單化,即使不懂HTML也可以生成極富生動(dòng)效果的網(wǎng)頁(yè).因此這2個(gè)工具的使用是該門(mén)課程的基礎(chǔ)內(nèi)容和核心.Frontpage是微軟公司的產(chǎn)品,學(xué)生學(xué)習(xí)起來(lái)容易上手,但Dreamweaver更專(zhuān)業(yè)功能更強(qiáng)大,還支持?jǐn)?shù)據(jù)庫(kù)訪問(wèn),老師可選擇其一或兩種軟件都介紹,通過(guò)實(shí)例講解如何建立站點(diǎn)、如何使用網(wǎng)頁(yè)對(duì)象、網(wǎng)頁(yè)布局、動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)、模板和庫(kù)項(xiàng)目的使用、站點(diǎn)的管理和上傳等.1.2制作網(wǎng)頁(yè)時(shí)的圖物關(guān)系HTML語(yǔ)言是編寫(xiě)網(wǎng)頁(yè)的標(biāo)記語(yǔ)言,包括很多標(biāo)記符如TABLE,HEAD,P,BR,A,IMG,DIV,SPAN,LI,BGSOUND,BODY,TITLE,FONT,H1,R,TD,HR.學(xué)習(xí)THML的難點(diǎn)在于了解這些標(biāo)記的功能及其參數(shù).要做出好的網(wǎng)頁(yè)單是掌握Dreamweaver工具是不夠的,網(wǎng)頁(yè)的本質(zhì)是HTML代碼,了解HTML中常用標(biāo)記符的作用及相關(guān)屬性的設(shè)置,可以幫助我們更好的制作網(wǎng)頁(yè).例如:在網(wǎng)頁(yè)中制作一個(gè)滾動(dòng)字幕效果,HTML代碼為:<marqueedirection=“up”width=“500”height=“500”onmouseout=this.start()onmouseover=this.stop()scrollamount=20scrolldelay=500>滾動(dòng)的相關(guān)內(nèi)容</marquee>,此時(shí)網(wǎng)頁(yè)上字符會(huì)從下向上滾動(dòng),滾動(dòng)區(qū)域長(zhǎng)為500像素,寬為500像素.鼠標(biāo)指向滾動(dòng)字幕時(shí),字符停止?jié)L動(dòng),鼠標(biāo)移出字幕又開(kāi)始滾動(dòng).若想在網(wǎng)頁(yè)上添加背景音樂(lè)必須手工添加代碼:<bgsoundsrc=”音樂(lè)文件路徑及文件名”loop=”循環(huán)次數(shù)”>,另外如果鏈接的圖片或網(wǎng)頁(yè)若是中文名稱會(huì)發(fā)生無(wú)法瀏覽的情況,如果通曉HTML代碼的話,直接編輯一下源代碼即可解決問(wèn)題.因此Dreamweaver雖然能夠幫我們簡(jiǎn)單快捷的制作出網(wǎng)頁(yè),但是一些如滾動(dòng)字幕、背景音樂(lè)等效果的制作還是要借助HTML源代碼.通過(guò)HTML標(biāo)記符和相關(guān)屬性與Dreamweaver相結(jié)合才能更好地實(shí)現(xiàn)網(wǎng)頁(yè)效果.因此在“網(wǎng)頁(yè)設(shè)計(jì)與制作”的教學(xué)中,教師不僅要講授制作網(wǎng)頁(yè)的相關(guān)工具,還要適當(dāng)介紹HTML源代碼,讓學(xué)生了解網(wǎng)頁(yè)中常用的HTML標(biāo)記符及相關(guān)的屬性,為學(xué)生講解一些特效的制作,這樣既豐富了學(xué)生的知識(shí),又能提高學(xué)生的學(xué)習(xí)興趣.1.3腳本語(yǔ)言的特點(diǎn)腳本語(yǔ)言出現(xiàn)的原因是基于HTML不能很好地解決動(dòng)態(tài)交互這個(gè)缺點(diǎn),用HTML編寫(xiě)的網(wǎng)頁(yè)普遍缺乏動(dòng)態(tài)特性,出現(xiàn)在Web頁(yè)上的內(nèi)容不會(huì)改變,文字和圖片都不會(huì)運(yùn)動(dòng),為了對(duì)Web元素進(jìn)行控制以產(chǎn)生動(dòng)態(tài)效果,出現(xiàn)了通過(guò)<script>標(biāo)記嵌入HTML頁(yè)中編程的腳本語(yǔ)言,如Vbscript和Javascript.腳本語(yǔ)言是一種簡(jiǎn)單的描述性語(yǔ)言,但它卻是HTML最重要的一個(gè)補(bǔ)充.腳本語(yǔ)言分客戶端和服務(wù)器端兩種版本,客戶端版本實(shí)現(xiàn)控制頁(yè)面元素來(lái)達(dá)到改變Web頁(yè)外觀的功能;服務(wù)器版本則代替CGI語(yǔ)言的服務(wù)器編程,完成服務(wù)器端的諸多功能,如輸入驗(yàn)證、表單處理、數(shù)據(jù)庫(kù)查詢、表單生成、輸出定向等一系列服務(wù)器端與客戶端交流的功能.網(wǎng)頁(yè)上的很多特效都是通過(guò)在網(wǎng)頁(yè)中嵌入腳本程序?qū)崿F(xiàn)的,為了使網(wǎng)頁(yè)更加生動(dòng),在教學(xué)中也應(yīng)當(dāng)講解一些特效的程序代碼,如雪花飛舞,日期時(shí)間的顯示等.這部分內(nèi)容涉及到編程,對(duì)于非計(jì)算機(jī)專(zhuān)業(yè)學(xué)生先講如何將開(kāi)放的特效源程序用于自己的網(wǎng)頁(yè),編程細(xì)節(jié)可以先省略不講.通過(guò)實(shí)現(xiàn)各種網(wǎng)頁(yè)特效可大大增強(qiáng)學(xué)生的學(xué)習(xí)興趣和成就感.1.4web服務(wù)器設(shè)計(jì)靜態(tài)網(wǎng)頁(yè)的制作可以用軟件直接生成,但完全靜態(tài)的網(wǎng)頁(yè)目前除了個(gè)人網(wǎng)站以外已經(jīng)很少見(jiàn)了,而動(dòng)態(tài)網(wǎng)頁(yè)涉及到站點(diǎn)的配置與管理,Web服務(wù)器的安裝與配置,服務(wù)器端編程語(yǔ)言ASP,PHP,JSP,ASP.NET,還涉及到網(wǎng)絡(luò)數(shù)據(jù)庫(kù)的交互式訪問(wèn)等內(nèi)容.教師可以以一個(gè)實(shí)用的小例子如留言本來(lái)建立一個(gè)訪問(wèn)Access數(shù)據(jù)庫(kù)的動(dòng)態(tài)網(wǎng)頁(yè),通過(guò)表單實(shí)現(xiàn)記錄的查詢、刪除、更新與插入,動(dòng)態(tài)網(wǎng)頁(yè)制作需要綜合運(yùn)用網(wǎng)絡(luò)、數(shù)據(jù)庫(kù)、編程和軟件工具,可以擴(kuò)展學(xué)生思維,培養(yǎng)解決問(wèn)題、綜合運(yùn)用各種知識(shí)的能力.1.5樣式定義的應(yīng)用HTML是一種順序解釋性的語(yǔ)言,沒(méi)有通觀全局,統(tǒng)一結(jié)構(gòu)的功能,更沒(méi)有網(wǎng)頁(yè)繼承的功能,隨著人們對(duì)網(wǎng)頁(yè)外觀要求的提高,頁(yè)面越來(lái)越復(fù)雜,為彌補(bǔ)網(wǎng)頁(yè)格式化功能的不足,產(chǎn)生了CSS技術(shù).它為Web頁(yè)中的對(duì)象的性質(zhì)定義類(lèi)似高級(jí)語(yǔ)言中“類(lèi)”的概念,不同的對(duì)象可以共享一個(gè)樣式類(lèi).CSS還提供了繼承功能,這種原來(lái)屬于結(jié)構(gòu)化程序設(shè)計(jì)語(yǔ)言的性質(zhì)被移植到了Web程序中.CSS的出現(xiàn)使得Web頁(yè)的編寫(xiě)逐漸趨近于高級(jí)結(jié)構(gòu)化語(yǔ)言.同時(shí)CSS還可以被JavaScript等腳本語(yǔ)言所調(diào)用,以實(shí)現(xiàn)更廣泛意義上的Web頁(yè)面的動(dòng)態(tài)改變,構(gòu)成了DHTML的基本骨架.樣式定義可以用代碼編寫(xiě),也可以借助樣式生成器可視化生成.在教學(xué)中要通過(guò)具體的案例來(lái)啟發(fā)學(xué)生用CSS完成各種網(wǎng)頁(yè)特效,如圖片和文字濾鏡、彩色滾動(dòng)條、邊框效果、超鏈接特效、浮動(dòng)效果等,在網(wǎng)頁(yè)制作中要靈活、充分使用CSS,以美化網(wǎng)頁(yè),導(dǎo)入外部樣式表統(tǒng)一網(wǎng)站內(nèi)各網(wǎng)頁(yè)的風(fēng)格.1.6網(wǎng)頁(yè)設(shè)計(jì)課程一般的網(wǎng)頁(yè)制作課程都可分為Dreamweaver、Flash和Fireworks3大部分.一個(gè)精彩的網(wǎng)頁(yè)是缺少不了圖片的,如圖片按鈕、翻轉(zhuǎn)圖片、濾鏡、透明圖、導(dǎo)航圖等,圖片往往在網(wǎng)頁(yè)中起到畫(huà)龍點(diǎn)睛的作用,所以在網(wǎng)頁(yè)制作過(guò)程中一定會(huì)涉及到圖片的處理.同時(shí)網(wǎng)頁(yè)布局是決定網(wǎng)頁(yè)是否美觀的關(guān)鍵,版面設(shè)計(jì)的元素有布局表格、框架和圖層等,要制作出精美的網(wǎng)站版面設(shè)計(jì)效果,往往要借助Firework將一個(gè)完整的圖片進(jìn)行分割,制作成切片,再用切片配合其他布局方法制作出具有整體感的版面效果,如圖1所示.因此,網(wǎng)頁(yè)設(shè)計(jì)課程時(shí)也要結(jié)合網(wǎng)頁(yè)圖像處理的教學(xué),講解圖形圖像的基本理論、矢量圖和位圖圖像的處理、GIF動(dòng)畫(huà)制作、圖像的優(yōu)化、切片、圖層、熱點(diǎn)等.由于時(shí)間所限,可重點(diǎn)講解用Photoshop,Fireworks制作導(dǎo)航菜單、特效文字、切片和LOGO標(biāo)志等.動(dòng)畫(huà)制作則講解動(dòng)畫(huà)制作的原理、Flash動(dòng)畫(huà)制作的步驟、不同類(lèi)型基本動(dòng)畫(huà)的制作技術(shù)、動(dòng)畫(huà)中添加聲音、影片的導(dǎo)出等.圖像處理與動(dòng)畫(huà)這部分內(nèi)容可根據(jù)課時(shí)量進(jìn)行增減.2網(wǎng)絡(luò)設(shè)計(jì)和生產(chǎn)的特點(diǎn)“計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)”主要是面對(duì)非計(jì)算機(jī)專(zhuān)業(yè)學(xué)生開(kāi)設(shè)的一門(mén)計(jì)算機(jī)公共課,但它和其他的計(jì)算機(jī)常規(guī)課程有幾點(diǎn)不同.2.1計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)的課程體系很多人認(rèn)為網(wǎng)頁(yè)制作很簡(jiǎn)單,事實(shí)則不然,“網(wǎng)頁(yè)設(shè)計(jì)與制作”是一門(mén)綜合性的課程,需要靠多門(mén)學(xué)科的知識(shí)給予支撐.它們相互滲透和依賴,構(gòu)成一個(gè)科學(xué)的、完整的課程體系.具體來(lái)說(shuō)包括:靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)、動(dòng)畫(huà)制作、圖像處理、網(wǎng)站管理、數(shù)據(jù)庫(kù)技術(shù)、腳本編程等內(nèi)容.其中,動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)的內(nèi)容,既是重點(diǎn)又是難點(diǎn),由此可以看出,“計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)”課程涉及到的學(xué)科內(nèi)容很多,這就對(duì)老師提出了很高的要求.2.2注意網(wǎng)絡(luò)數(shù)據(jù)庫(kù)的使用,不斷提高網(wǎng)絡(luò)數(shù)據(jù)庫(kù)的使用能力網(wǎng)頁(yè)制作實(shí)踐性很強(qiáng),但同樣不能忽視理論知識(shí)的學(xué)習(xí).一方面HTML源程序、層疊樣式表CSS、腳本程序JScript、ASP動(dòng)態(tài)網(wǎng)頁(yè)無(wú)一不要求掌握專(zhuān)業(yè)的計(jì)算機(jī)編程知識(shí).由于網(wǎng)頁(yè)設(shè)計(jì)的主流技術(shù)在于動(dòng)態(tài)網(wǎng)頁(yè)的開(kāi)發(fā)與設(shè)計(jì),諸如用戶注冊(cè)、登錄、在線調(diào)查、電子商店、訂單管理、在線考試等動(dòng)態(tài)網(wǎng)頁(yè),這些與數(shù)據(jù)庫(kù)的交互功能要通過(guò)動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)才能實(shí)現(xiàn),因此程序開(kāi)發(fā)型網(wǎng)頁(yè)也是網(wǎng)頁(yè)制作的重要內(nèi)容.另一方面若在頁(yè)面上要實(shí)現(xiàn)網(wǎng)絡(luò)數(shù)據(jù)庫(kù)訪問(wèn),還要懂得數(shù)據(jù)庫(kù)的配置與使用,包括建立和刪除數(shù)據(jù)庫(kù)、建立和刪除表、建立索引、創(chuàng)建存儲(chǔ)過(guò)程、創(chuàng)建觸發(fā)器、結(jié)構(gòu)化查詢語(yǔ)言SQL.只有掌握了相關(guān)理論才能更好地制作出效果美觀的網(wǎng)站和功能強(qiáng)大的Web應(yīng)用程序.2.3網(wǎng)頁(yè)設(shè)計(jì)與制作網(wǎng)頁(yè)設(shè)計(jì)是藝術(shù)與技術(shù)的融合,既要美觀,又要實(shí)現(xiàn)一定的功能如查詢、用戶登錄與注冊(cè)等,技術(shù)與創(chuàng)意兩大要素對(duì)于網(wǎng)頁(yè)制作者來(lái)說(shuō)具有同等的重要性.網(wǎng)頁(yè)一方面是傳遞信息的載體,同時(shí)也是一件藝術(shù)作品,“網(wǎng)頁(yè)設(shè)計(jì)與制作”是一門(mén)審美需求較高、操作性很強(qiáng)的課程,網(wǎng)頁(yè)不光是內(nèi)容的堆砌,還要考慮如何讓瀏覽者能更有效地獲取網(wǎng)頁(yè)上的信息,并對(duì)網(wǎng)站留下印象.這就需要從審美的方面入手,用表格或框架合理布局,制作出清晰,整體性好的頁(yè)面.使人瀏覽起來(lái)賞心閱目,接收信息也會(huì)更加容易,同時(shí)提升網(wǎng)站的形象.2.4站域和網(wǎng)站建設(shè)與維護(hù)不論靜態(tài)還是動(dòng)態(tài)網(wǎng)站制作完畢后都要發(fā)布,供用戶訪問(wèn),并且需要不定期對(duì)網(wǎng)站進(jìn)行更新和維護(hù).網(wǎng)站管理涉及到多種技術(shù),既要懂得一般性網(wǎng)頁(yè)設(shè)計(jì),還要懂得網(wǎng)站的建設(shè)和維護(hù).網(wǎng)站建設(shè)與管理涉及到的主要內(nèi)容有:虛擬主機(jī),IIS,WWW,FTP服務(wù)器的配置、新建虛擬目錄、DNS服務(wù)器、安全管理技術(shù)等.3網(wǎng)頁(yè)設(shè)計(jì)方面網(wǎng)頁(yè)設(shè)計(jì)課程內(nèi)容眾多,如何有針對(duì)性、有選擇,又最有效地為學(xué)生開(kāi)設(shè)計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)課程,根據(jù)不同專(zhuān)業(yè)的培養(yǎng)目標(biāo),可將“網(wǎng)頁(yè)設(shè)計(jì)與制作”分成下面幾種類(lèi)型:3.1全校素質(zhì)選修課程作為一個(gè)非計(jì)算機(jī)專(zhuān)業(yè)的學(xué)生,不可能花大量的時(shí)間用在學(xué)習(xí)圖像處理、動(dòng)畫(huà)設(shè)計(jì)和程序設(shè)計(jì)等知識(shí)上,為了在短時(shí)間內(nèi)掌握基本而實(shí)用的網(wǎng)頁(yè)設(shè)計(jì)技能,這類(lèi)課程可以只講授Frontpage或Dreamweaver即可,掌握靜態(tài)網(wǎng)頁(yè)的基本制作方法,針對(duì)這類(lèi)學(xué)生群體講授時(shí)盡量采用直觀的方式而避免用代碼方式.3.2網(wǎng)頁(yè)設(shè)計(jì)師網(wǎng)頁(yè)設(shè)計(jì)師崗位要求工作人員最重要的是要有非凡的創(chuàng)意,即設(shè)計(jì)出醒目的網(wǎng)站整體版面效果,所以網(wǎng)頁(yè)設(shè)計(jì)以頁(yè)面設(shè)計(jì)內(nèi)容為教學(xué)主線,側(cè)重于網(wǎng)頁(yè)圖形圖像方面的教學(xué),首先了解網(wǎng)站的目標(biāo)、對(duì)象、定位、風(fēng)格要求、功能等基本需求,然后用Photoshop畫(huà)出效果圖,用戶滿意后再轉(zhuǎn)變成具體的頁(yè)面.針對(duì)網(wǎng)頁(yè)設(shè)計(jì)師主要學(xué)習(xí)以下課程:①Dreamweaver;②Fireworks;③Flash;④Photoshop.適合于計(jì)算機(jī)專(zhuān)業(yè)、電子商務(wù)專(zhuān)業(yè)、平面設(shè)計(jì)的學(xué)生,利用這些軟件可以在網(wǎng)頁(yè)設(shè)計(jì)方面實(shí)現(xiàn)技術(shù)與藝術(shù)的完美結(jié)合.3.3Web應(yīng)用程序開(kāi)發(fā)對(duì)于計(jì)算機(jī)專(zhuān)業(yè)的學(xué)生,可以側(cè)重于Web程序開(kāi)發(fā),深入學(xué)習(xí)動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)