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

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