教學(xué)網(wǎng)站課程設(shè)計(jì)

1、<p><b>　　緒論</b></p><p><b>　　引言</b></p><p>　　Internet是目前世界上最大的計(jì)算機(jī)網(wǎng)絡(luò)，它遍布全球，將全世界各種網(wǎng)絡(luò)連接成一個(gè)整體。我們的教學(xué)也有了長(zhǎng)足的發(fā)展和改革?，F(xiàn)代信息技術(shù)是網(wǎng)絡(luò)教學(xué)的標(biāo)志，教學(xué)活動(dòng)對(duì)于人才培養(yǎng)則是網(wǎng)絡(luò)教學(xué)的根本。網(wǎng)絡(luò)教學(xué)的問(wèn)題不僅僅是計(jì)算機(jī)技術(shù)的問(wèn)題，其本質(zhì)仍

2、然是教學(xué)的問(wèn)題，人才培養(yǎng)的問(wèn)題，現(xiàn)代信息技術(shù)與傳統(tǒng)教學(xué)相碰撞的人才培養(yǎng)問(wèn)題。對(duì)于這些根本問(wèn)題的把握，必須以科學(xué)為指導(dǎo)，實(shí)事求是的分析當(dāng)前教學(xué)存在的缺陷，結(jié)合新時(shí)代信息技術(shù)對(duì)網(wǎng)絡(luò)教學(xué)進(jìn)行探索、借鑒、發(fā)展、創(chuàng)新。聯(lián)系傳統(tǒng)教學(xué)，結(jié)合學(xué)校實(shí)際情況把教學(xué)模式多樣化，把教學(xué)資源、學(xué)生、老師練成一個(gè)互相的整體。</p><p><b>　　教學(xué)網(wǎng)站建設(shè)的背景</b></p><p>

3、;　　在網(wǎng)絡(luò)發(fā)展得如此迅速的情況下，大都高校的教師都已經(jīng)采用課件的形式教學(xué)，改變了傳統(tǒng)的教學(xué)方式，例如用PowerPoint或其他的教學(xué)軟件來(lái)豐富課堂，這樣大大的提高了課堂教學(xué)的效率，也使課堂氣氛得到了活躍，這樣的教學(xué)方式既方便老師，也使學(xué)生以最大的學(xué)校效率去學(xué)習(xí)。盡管這些措施在課堂內(nèi)帶來(lái)了很大的方便與好處，但對(duì)課下卻沒(méi)什么幫助。課下的復(fù)習(xí)對(duì)于學(xué)習(xí)來(lái)說(shuō)也是非常關(guān)鍵的，因而在網(wǎng)絡(luò)發(fā)展得如此發(fā)達(dá)的形勢(shì)下，對(duì)課下學(xué)習(xí)進(jìn)行改革是勢(shì)在必行。建立教

4、學(xué)網(wǎng)站是教學(xué)信息化，網(wǎng)絡(luò)化的最佳途徑，也是當(dāng)前教學(xué)輔助手段的大勢(shì)所趨。</p><p>　　XXXX工程是XX工程與XX工程的交叉學(xué)科，是XX技術(shù)在XX工程中的應(yīng)用，及應(yīng)用XX技術(shù)主要是微XX技術(shù)來(lái)處理XX問(wèn)題。使XX向著有利于人類和諧發(fā)展的方向轉(zhuǎn)變。同時(shí)應(yīng)用XX技術(shù)可以實(shí)現(xiàn)廢物資源化，保護(hù)生態(tài)XX。</p><p>　　結(jié)合本專業(yè)實(shí)驗(yàn)實(shí)踐要求高，聯(lián)系社會(huì)程度高的教學(xué)特點(diǎn)，設(shè)計(jì)本教學(xué)網(wǎng)站。

5、</p><p><b>　　教學(xué)網(wǎng)站發(fā)展的概況</b></p><p>　　近年來(lái)，國(guó)家大力推行高校教育改革，現(xiàn)代教育技術(shù)、現(xiàn)代教育手段的應(yīng)用與推廣已是變革中的重中之重?，F(xiàn)代教育技術(shù)作為國(guó)家推行素質(zhì)教育的重要手段，具體在計(jì)算機(jī)使用方面，已體現(xiàn)全面要求大學(xué)生必須通過(guò)等級(jí)考試，初步掌握計(jì)算機(jī)的使用，而網(wǎng)絡(luò)又是現(xiàn)代教育技術(shù)應(yīng)用的核心。在這樣形勢(shì)下，很多教學(xué)網(wǎng)站開(kāi)始涌現(xiàn)，給

6、傳統(tǒng)教學(xué)帶來(lái)了一次強(qiáng)力沖擊，新的一輪教學(xué)改革已經(jīng)展開(kāi)。教學(xué)網(wǎng)站作為一個(gè)學(xué)習(xí)的平臺(tái)，具有信息量大、交換便捷、易于互動(dòng)等優(yōu)點(diǎn)，它的應(yīng)用多少與好壞直接展示了教育提升的水平和檔次。但現(xiàn)如今的教學(xué)網(wǎng)站并沒(méi)能充分利用這一點(diǎn)。</p><p>　　教學(xué)網(wǎng)站一般有教師個(gè)人教學(xué)網(wǎng)站和單位的教學(xué)網(wǎng)站（例如專業(yè)教學(xué)網(wǎng)站），教師個(gè)人教學(xué)網(wǎng)站大都是自己建設(shè)或找人建立起來(lái)的；單位的教學(xué)網(wǎng)站是單位組織人員建立起來(lái)的。無(wú)論是哪種方式建立起來(lái)的，

7、一般都沒(méi)有對(duì)如何利用網(wǎng)絡(luò)或者說(shuō)網(wǎng)站來(lái)達(dá)到教學(xué)互動(dòng)交流這個(gè)問(wèn)題。這樣就造成了教學(xué)網(wǎng)站的發(fā)展良莠不齊的狀況，且大部分教學(xué)網(wǎng)站的利用效果都不盡人意，甚至有些學(xué)生都不知道它們的存在。</p><p>　　教學(xué)網(wǎng)站的建設(shè)對(duì)于教育事業(yè)方面的需要還遠(yuǎn)遠(yuǎn)不能滿足，我國(guó)的教育機(jī)構(gòu)的龐大以及網(wǎng)絡(luò)的發(fā)展是教學(xué)網(wǎng)站建設(shè)程度不能滿足需要的主要原因。而且教學(xué)網(wǎng)站到如今，國(guó)內(nèi)還沒(méi)有一個(gè)好的評(píng)價(jià)體系。</p><p>　

8、　很多教學(xué)網(wǎng)站都是的用文章發(fā)布系統(tǒng)加留言板建設(shè)而成，有的可能會(huì)加上個(gè)論壇來(lái)加深交流。文章發(fā)布系統(tǒng)一般作為課件發(fā)布用，供學(xué)生下載課件用，而留言板作為答疑工具來(lái)用，當(dāng)學(xué)生有疑問(wèn)時(shí)可以發(fā)帖向老師提問(wèn)。論壇的作用和留言板差不多。這種網(wǎng)站在一定程度上滿足了教學(xué)網(wǎng)站的要求，但這遠(yuǎn)遠(yuǎn)不夠。</p><p>　　在交流手段上，老師會(huì)在教學(xué)網(wǎng)站上發(fā)布自己的電子郵件，以供學(xué)生向自己提問(wèn)，以解決學(xué)生自己獨(dú)立解決不了的問(wèn)題。 但這一切

9、都必須建立在學(xué)生和老師的計(jì)算機(jī)水平的基礎(chǔ)上，這樣操作都需要他們對(duì)計(jì)算機(jī)操作很熟悉才行，這也是教學(xué)網(wǎng)站應(yīng)用推廣難的一個(gè)原因。</p><p><b>　　教學(xué)網(wǎng)站建設(shè)現(xiàn)狀</b></p><p>　　教學(xué)網(wǎng)站以個(gè)人教學(xué)網(wǎng)站居多，且很多都只是以信息發(fā)布系統(tǒng)建立起來(lái)的課件發(fā)布系統(tǒng)而已，還遠(yuǎn)遠(yuǎn)不符合教學(xué)的要求。在很多高校都是教務(wù)處建立的，這些教學(xué)網(wǎng)站在功能上就有些偏了，不是很

10、符合教學(xué)的要求。教學(xué)網(wǎng)站的建設(shè)現(xiàn)狀整體來(lái)說(shuō)還很差，無(wú)論是從規(guī)模還是質(zhì)量上都還不能承擔(dān)教學(xué)中的課下學(xué)習(xí)環(huán)節(jié)的補(bǔ)充。</p><p>　　教學(xué)網(wǎng)站發(fā)展中出現(xiàn)的問(wèn)題及原因</p><p>　　出現(xiàn)的問(wèn)題有很多，教學(xué)網(wǎng)站到現(xiàn)在為止發(fā)展不是很好。這主要表現(xiàn)在兩個(gè)方面：</p><p>　　教學(xué)內(nèi)容在教學(xué)網(wǎng)站上的組織形式?jīng)]能讓它們發(fā)揮他們應(yīng)有的作用。例如，在課件上 不應(yīng)該只是課

11、件下載而已，而是一個(gè)知識(shí)庫(kù)，根據(jù)知識(shí)點(diǎn)組織起來(lái)的知識(shí)庫(kù)，這個(gè)知識(shí)庫(kù)也不是簡(jiǎn)單數(shù)字化的數(shù)據(jù)庫(kù)，而是已經(jīng)把各個(gè)知識(shí)點(diǎn)關(guān)聯(lián)起來(lái)的知識(shí)庫(kù)。</p><p>　　教學(xué)網(wǎng)站在交互設(shè)計(jì)上陷入了瓶頸。在交互設(shè)計(jì)上，國(guó)內(nèi)很多教學(xué)網(wǎng)站都只是停 留在留言板答疑的水平上，并沒(méi)有把 Web 2.0 的理念融進(jìn)去。出現(xiàn)這些問(wèn)題的原因：很多教學(xué)單位或個(gè)人并沒(méi)有真正把教學(xué)網(wǎng)站重視起來(lái)，而是簡(jiǎn)單的把它當(dāng)作一種可有可無(wú)的教學(xué)手段，這樣的想法到了網(wǎng)站

12、設(shè)計(jì)者那，當(dāng)然也就不會(huì)設(shè)計(jì)出多好的教學(xué)網(wǎng)站來(lái)了。教師和老師的計(jì)算機(jī)操作水平也是一個(gè)制約因素，例如一個(gè)小學(xué)生可能他會(huì)網(wǎng)上聊天，但不一定會(huì)在網(wǎng)上看電子書。這些因素在教學(xué)網(wǎng)站的設(shè)計(jì)上，是不能忽略的。當(dāng)然啦，這也是和當(dāng)今的網(wǎng)絡(luò)發(fā)展水平密切相關(guān)的，試想，給一個(gè)沒(méi)有網(wǎng)絡(luò)的山村小學(xué)建設(shè)教學(xué)網(wǎng)站，這就完全沒(méi)有必要，建了也是浪費(fèi)。還有一個(gè)原因是，中國(guó)在教育教學(xué)網(wǎng)站上缺乏一種評(píng)價(jià)策略。目前，我國(guó)相關(guān)的研究也只局限于介紹評(píng)價(jià)方法、評(píng)價(jià)實(shí)施過(guò)程以及如何量化調(diào)查

13、結(jié)果等。至于具體的評(píng)價(jià)要素、評(píng)價(jià)指標(biāo) 體系可以說(shuō)還是空白，而這些在國(guó)外已經(jīng)開(kāi)始建設(shè)這一評(píng)價(jià)體系。即使在美國(guó)等遠(yuǎn)程教育發(fā)展較完善的國(guó)家，通行的認(rèn)證原則也是一些定性的指導(dǎo)思想，進(jìn)行有效性評(píng)價(jià)指標(biāo)體系的研究。為了促進(jìn)教學(xué)網(wǎng)站不斷改進(jìn)質(zhì)量，為公眾提供滿意的教育服務(wù)。</p><p><b>　　建設(shè)教學(xué)網(wǎng)站的意義</b></p><p>　　在校園網(wǎng)上構(gòu)建教學(xué)網(wǎng)站為教師和學(xué)生

14、們提供全新的教學(xué)工具，是改革教學(xué)模式、實(shí)現(xiàn)學(xué)科交叉，XX專業(yè)與信息技術(shù)的融合，培養(yǎng)學(xué)生學(xué)習(xí)興趣的重要途徑，實(shí)現(xiàn)跨越式輻射式教學(xué)。構(gòu)建教學(xué)網(wǎng)站符合實(shí)際需要，時(shí)代需求，具有十分重大的意義。</p><p><b>　　改變傳統(tǒng)教學(xué)模式</b></p><p>　　從教學(xué)模式來(lái)看，建設(shè)出好的教學(xué)網(wǎng)站能讓教學(xué)充分體現(xiàn)“以學(xué)生為主，教師為輔”的現(xiàn)代教學(xué)模式，徹底改變了傳統(tǒng)教學(xué)中

15、“以課堂教學(xué)為中心，以書本為中心，以教師為中心”的“三中心”教學(xué)模式。</p><p><b>　　引導(dǎo)學(xué)生自主學(xué)習(xí)</b></p><p>　　從學(xué)生的學(xué)習(xí)來(lái)看，建設(shè)出好的教學(xué)網(wǎng)站將是學(xué)生課堂學(xué)習(xí)強(qiáng)有力的補(bǔ)充，利用網(wǎng)站，教師發(fā)布課程學(xué)習(xí)資料、布置作業(yè)、進(jìn)行網(wǎng)上答疑，學(xué)生和老師之間、學(xué)生和學(xué)生之間可使用電子郵件、BBS、討論討論等進(jìn)行在線或非在線信息交流，學(xué)生之間亦可

16、以相互討論。</p><p><b>　　促進(jìn)師生交流</b></p><p>　　從學(xué)生和老師的交流來(lái)看，建設(shè)出好的教學(xué)網(wǎng)站將為學(xué)生和老師在情感交流方面架起情感的橋梁。利用現(xiàn)代的信息技術(shù)手段，建設(shè)好的教學(xué)網(wǎng)站，推進(jìn)國(guó)家的教育事業(yè)，此任務(wù)是教育以及國(guó)家對(duì)于網(wǎng)絡(luò)建設(shè)工作著來(lái)說(shuō)是迫不及待的。</p><p><b>　　建設(shè)教學(xué)網(wǎng)站的目的

17、</b></p><p>　　基于上述的信息技術(shù)迅猛發(fā)展的時(shí)代背景，傳統(tǒng)教學(xué)對(duì)人才培養(yǎng)的片面化以及教學(xué)網(wǎng)站對(duì)新時(shí)代教育改革的迫切需要。結(jié)合本工科專業(yè)緊密聯(lián)系社會(huì)實(shí)際的需要建設(shè)本。教學(xué)網(wǎng)站。</p><p>　　建設(shè)教學(xué)網(wǎng)站的基本原則</p><p>　　教學(xué)網(wǎng)站建設(shè)的基本原則除了要遵循網(wǎng)站設(shè)計(jì)的一些基本原則外，我們網(wǎng)站設(shè)計(jì)者應(yīng)該充分考慮教學(xué)網(wǎng)站的特點(diǎn)，應(yīng)

18、該遵循下列原則：</p><p>　　教學(xué)網(wǎng)站的整體規(guī)劃在動(dòng)手建設(shè)之前。對(duì)網(wǎng)頁(yè)的整體規(guī)劃至關(guān)重要。</p><p>　　以“以學(xué)習(xí)為中心”理論指導(dǎo)，規(guī)范教學(xué)網(wǎng)站的設(shè)計(jì)，時(shí)刻以學(xué)生為中心，強(qiáng)調(diào)學(xué)生的“學(xué)”，要充分考慮學(xué)生對(duì)哪些知識(shí)的需要，從教學(xué)實(shí)際出發(fā)，建設(shè)符合教學(xué)需求的教學(xué)網(wǎng)站。</p><p>　　內(nèi)容豐富、重點(diǎn)突出網(wǎng)站內(nèi)容。強(qiáng)調(diào)網(wǎng)頁(yè)的針對(duì)性和突出性。網(wǎng)頁(yè)設(shè)計(jì)者

19、設(shè)計(jì)時(shí)一定要牢記對(duì)象是學(xué)生，辦出學(xué)生好奇，追求，理解，接受的特點(diǎn)來(lái)。有且只有這樣才會(huì)讓更多的學(xué)生關(guān)注這個(gè)教學(xué)網(wǎng)站。</p><p>　　及時(shí)反饋。設(shè)計(jì)評(píng)價(jià)反饋系統(tǒng)，便于教師與學(xué)生之間了解自己掌握知識(shí)的情況，有利于改進(jìn)網(wǎng)頁(yè)和各方的設(shè)計(jì)學(xué)習(xí)。</p><p>　　及時(shí)更新維護(hù)，去粗取精。網(wǎng)站的成功與否，取決于網(wǎng)站的質(zhì)量。網(wǎng)站使用與運(yùn)行一段時(shí)間后，一些過(guò)時(shí)的信息就要及時(shí)的刪除，保持整個(gè)網(wǎng)站的先進(jìn)

20、性。</p><p><b>　　課題研究?jī)?nèi)容</b></p><p>　　本設(shè)計(jì)是利用adobe dreamweaver cs5.5軟件對(duì)XXXX工程的網(wǎng)站進(jìn)行設(shè)計(jì)，布局方式主要是表格布局和div+css布局。利用adobe fireword cs5.5和adobe flash cs5.5、adobe photoshop cs5.5這三款軟件對(duì)網(wǎng)站的圖片動(dòng)畫進(jìn)行美化

21、。使用activex控件、php腳本語(yǔ)言制作網(wǎng)頁(yè)特殊效果。本文主要闡述網(wǎng)站的設(shè)計(jì)理念、設(shè)計(jì)方法和規(guī)劃方案，對(duì)建設(shè)XXXX工程教學(xué)網(wǎng)站的具體步驟進(jìn)行描述和分析。</p><p><b>　　網(wǎng)站規(guī)劃</b></p><p><b>　　網(wǎng)站的定位分析</b></p><p><b>　　網(wǎng)站類型定位</b&g

22、t;</p><p>　　靜態(tài)網(wǎng)頁(yè)有時(shí)也被稱為平面頁(yè)。靜態(tài)網(wǎng)頁(yè)的網(wǎng)址形式通常為htm（超文本標(biāo)記語(yǔ)言）結(jié)尾 ，還有就是以超文本標(biāo)記語(yǔ)言（.htm、.html）、.shtml、.xml（可擴(kuò)展標(biāo)記語(yǔ)言）等為后綴的。在超文本標(biāo)記語(yǔ)言格式的網(wǎng)頁(yè)上，也可以出現(xiàn)各種動(dòng)態(tài)的效果，如.GIF格式的動(dòng)畫flash、滾動(dòng)字幕等，這些“動(dòng)態(tài)效果”只是視覺(jué)上的，與下面將要介紹的動(dòng)態(tài)網(wǎng)頁(yè)是不同的概念。靜態(tài)網(wǎng)頁(yè)面通常是超文本標(biāo)記語(yǔ)言文檔存

23、儲(chǔ)為文件在文件系統(tǒng)里頭，并且可以通過(guò)HTTP訪問(wèn)網(wǎng)絡(luò)服務(wù)器。</p><p>　　靜態(tài)網(wǎng)頁(yè)對(duì)用戶有多重要呢？普通用戶通過(guò)多瀏覽器發(fā)送制定的URL請(qǐng)求，Web服務(wù)器收到請(qǐng)求后定位到指定的文件，或者根據(jù)程序從數(shù)據(jù)庫(kù)中調(diào)出相應(yīng)的數(shù)據(jù)返回到瀏覽器，經(jīng)過(guò)瀏覽器請(qǐng)求處理后，用戶就可以看到一個(gè)完整的文件。整個(gè)過(guò)程中，動(dòng)態(tài)頁(yè)面的話還需要多一個(gè)步驟，就是發(fā)送命令從數(shù)據(jù)庫(kù)中調(diào)出文件，如果用戶一多的時(shí)候，就會(huì)造成數(shù)據(jù)庫(kù)運(yùn)行過(guò)慢，這樣就

24、嚴(yán)重影響了用戶體驗(yàn)；用戶體驗(yàn)被影響了，也就影響了搜索引擎優(yōu)化中的一個(gè)最重要步驟，要記得網(wǎng)站優(yōu)化用戶體驗(yàn)最重要。</p><p>　　靜態(tài)網(wǎng)頁(yè)每個(gè)網(wǎng)頁(yè)都有一個(gè)固定的URL，且網(wǎng)頁(yè)URL以.htm、.html、.shtml等常見(jiàn)形式為后綴，而不含有“?”；（動(dòng)態(tài)網(wǎng)頁(yè)中的“？”對(duì)搜索引擎檢索存在一定的問(wèn)題，搜索引擎一般不可能從一個(gè)網(wǎng)站的數(shù)據(jù)庫(kù)中訪問(wèn)全部網(wǎng)頁(yè)，或者出于技術(shù)方面的考慮，搜索引擎不去抓取網(wǎng)址中“？”后面的內(nèi)容

25、。）；</p><p>　　網(wǎng)頁(yè)內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無(wú)論是否有用戶訪問(wèn)，每個(gè)靜態(tài)網(wǎng)頁(yè)的內(nèi)容都是保存在網(wǎng)站服務(wù)器上的，也就是說(shuō)，靜態(tài)網(wǎng)頁(yè)是實(shí)實(shí)在在保存在服務(wù)器上的文件，每個(gè)網(wǎng)頁(yè)都是一個(gè)獨(dú)立的文件；</p><p>　　靜態(tài)網(wǎng)頁(yè)的內(nèi)容相對(duì)穩(wěn)定，因此容易被搜索引擎檢索；</p><p>　　靜態(tài)網(wǎng)頁(yè)沒(méi)有數(shù)據(jù)庫(kù)的支持，在網(wǎng)站制作和維護(hù)方面工作量較大，因此當(dāng)網(wǎng)站信息量

26、很大時(shí)完全依靠靜態(tài)網(wǎng)頁(yè)制作方式比較困難；</p><p>　　靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有較大的限制；</p><p>　　頁(yè)面瀏覽速度迅速，過(guò)程無(wú)需連接數(shù)據(jù)庫(kù)，開(kāi)啟頁(yè)面速度快于動(dòng)態(tài)頁(yè)面；</p><p>　　減輕了服務(wù)器的負(fù)擔(dān)，工作量減少，也就降低了數(shù)據(jù)庫(kù)的成本；</p><p>　　可以公開(kāi)（即副本可以證明給任何人）；</p&

27、gt;<p>　　托管沒(méi)得任何特殊的要求。（不需要特殊的中間軟件比如超文本預(yù)處理器、公共網(wǎng)關(guān)接口）；</p><p>　　沒(méi)得網(wǎng)絡(luò)服務(wù)器或應(yīng)用服務(wù)器，比如直接從CD-ROM（激光唱片-只讀存儲(chǔ)器）或USB閃存驅(qū)動(dòng)器讀取內(nèi)容，可以通過(guò)網(wǎng)絡(luò)瀏覽器直接訪問(wèn)；</p><p>　　網(wǎng)站更安全，HTML頁(yè)面不會(huì)受Asp相關(guān)漏洞的影響；而且可以減少攻擊，防sol注入。數(shù)據(jù)庫(kù)出錯(cuò)時(shí)，不影響

28、網(wǎng)站正常訪問(wèn)。</p><p>　　由于XXXX工程的教學(xué)網(wǎng)站的功能相對(duì)較少、內(nèi)容更新量不大，網(wǎng)站訪問(wèn)速度要求較快，沒(méi)有涉及較多的商業(yè)機(jī)密，根據(jù)靜態(tài)網(wǎng)頁(yè)的特點(diǎn)，采用靜態(tài)網(wǎng)頁(yè)。其優(yōu)勢(shì)是不需要數(shù)據(jù)庫(kù)的支持。</p><p><b>　　網(wǎng)站主題的定位</b></p><p>　　XXXX工程教學(xué)網(wǎng)站的開(kāi)發(fā)是基于學(xué)生和教學(xué)的需要，所以建設(shè)網(wǎng)站的主題必

29、須適合這一需求?；诜?wù)對(duì)象是教師和學(xué)生，所以在商業(yè)上，市場(chǎng)競(jìng)爭(zhēng)上，資源競(jìng)爭(zhēng)上沒(méi)有過(guò)多的要求，或者說(shuō)沒(méi)有考慮。本教學(xué)網(wǎng)站主要以提高教學(xué)效率與教學(xué)質(zhì)量為目的，以開(kāi)設(shè)教學(xué)資源庫(kù)，創(chuàng)建網(wǎng)絡(luò)協(xié)作學(xué)習(xí)XX為手段，以學(xué)習(xí)者為中心的一種課程學(xué)習(xí)網(wǎng)站。</p><p><b>　　網(wǎng)站的功能定位</b></p><p>　　教學(xué)網(wǎng)站主要是實(shí)現(xiàn)把豐富的課程資源通過(guò)網(wǎng)絡(luò)信息平臺(tái)共享到互聯(lián)

30、網(wǎng)上，向所有用戶提供視頻觀看、課程介紹，教材簡(jiǎn)介等功能，同時(shí)也提供網(wǎng)絡(luò)互動(dòng)交流和上傳課件、視頻，提交作業(yè)的功能。</p><p>　　網(wǎng)站導(dǎo)航：網(wǎng)站提供了導(dǎo)航功能，在網(wǎng)站的首頁(yè)設(shè)計(jì)一個(gè)導(dǎo)航，把站內(nèi)各種資源分門別類。這樣可以為用戶大大的節(jié)省精力和時(shí)間。</p><p>　　課程信息：對(duì)用戶提供課程介紹，上課時(shí)間，課件資料等。</p><p>　　信息交流：本網(wǎng)站系統(tǒng)會(huì)

31、給用戶提供一個(gè)良好的在線交流的平臺(tái)，便于用戶進(jìn)行互動(dòng)交流，向用戶提供留言板與回復(fù)的功能。</p><p>　　資源共享：主要實(shí)現(xiàn)上傳下載功能，用戶能在資源共享界面上傳教學(xué)相關(guān)視頻、題庫(kù)、課件，提交作業(yè)等功能，并在網(wǎng)上顯示，為多人共享。</p><p><b>　　教學(xué)網(wǎng)站的規(guī)劃</b></p><p>　　教學(xué)網(wǎng)站的內(nèi)容設(shè)計(jì)與組織是網(wǎng)站規(guī)劃中重

32、要的一部分，是網(wǎng)站瀏覽者最看重的因素。</p><p><b>　　網(wǎng)站內(nèi)容的設(shè)計(jì)規(guī)劃</b></p><p>　　本站的功能模塊包括專業(yè)前景、教師簡(jiǎn)介、課程體系、實(shí)踐環(huán)節(jié)、校友風(fēng)采、資料下載、專業(yè)動(dòng)態(tài)、特色教學(xué)、課程體系、實(shí)踐環(huán)節(jié)以及具體的各老師的教學(xué)網(wǎng)站、各課程的學(xué)習(xí)網(wǎng)站、相關(guān)網(wǎng)站鏈接等。</p><p><b>　　軟件選擇&l

33、t;/b></p><p>　　從本站的需求與特點(diǎn)考慮，采用靜態(tài)網(wǎng)頁(yè)的方式制作。網(wǎng)站制作采用主流的網(wǎng)站制作軟件adobe dreamweaver cs5.5。</p><p><b>　　網(wǎng)站風(fēng)格的確定</b></p><p>　　由于XXXX工程是環(huán)保類的學(xué)科，主題與綠色比較符合。本站采用綠色的色調(diào)作為網(wǎng)頁(yè)的基色。網(wǎng)頁(yè)風(fēng)格較為樸素、簡(jiǎn)潔

34、，突出環(huán)保的風(fēng)格。在清新的背景下使學(xué)生更加愉快的瀏覽網(wǎng)頁(yè)。</p><p><b>　　素材的收集</b></p><p>　　本站圖片素材是大多是自己制作的，通過(guò)photoshop和firework等制作的。主要的其他素材有相關(guān)老師的教學(xué)積累提供。</p><p><b>　　網(wǎng)站總體設(shè)計(jì)</b></p>

35、<p>　　網(wǎng)站經(jīng)過(guò)初步的整體規(guī)劃,從細(xì)節(jié)入手,對(duì)網(wǎng)站進(jìn)行總體設(shè)計(jì)。</p><p><b>　　首頁(yè)設(shè)計(jì)</b></p><p>　　首頁(yè)設(shè)計(jì)是一個(gè)網(wǎng)站成功與否的關(guān)鍵。本站的首頁(yè)根據(jù)網(wǎng)站的風(fēng)格采取簡(jiǎn)單的排版，模塊分布比較有規(guī)律，網(wǎng)站的思路較為清晰。網(wǎng)站的首頁(yè)的設(shè)計(jì)圖如圖2.1所示。</p><p>　　圖 2.1 首頁(yè)網(wǎng)站欄目規(guī)劃

36、</p><p><b>　　課程設(shè)計(jì)首頁(yè)設(shè)計(jì)</b></p><p>　　課程設(shè)計(jì)首頁(yè)與教學(xué)網(wǎng)站首頁(yè)相呼應(yīng)。具體如下圖2.2所示。</p><p>　　圖 2.2 課程設(shè)計(jì)首頁(yè)欄目規(guī)劃</p><p><b>　　網(wǎng)頁(yè)版式的設(shè)計(jì)</b></p><p>　　版式的布局在網(wǎng)

37、頁(yè)制作中也是比較重要的一項(xiàng)。既要符合瀏覽者的一般興趣，也要有自己的特色，符合瀏覽器的兼容需求。本站采用混合排版，采取傳統(tǒng)的上中下布局，左右列液固定的方法。基本布局如下圖2.3所示。</p><p>　　圖2.3 網(wǎng)站模板布局</p><p><b>　　網(wǎng)頁(yè)色彩搭配</b></p><p>　　對(duì)于做網(wǎng)頁(yè)的初學(xué)者可能更習(xí)慣于使用一些漂亮的圖片

38、作為自己網(wǎng)頁(yè)的背景，但是，瀏覽一下大型的商業(yè)網(wǎng)站，你會(huì)發(fā)現(xiàn)他們更多運(yùn)用的是白色、藍(lán)色、黃色等，使得網(wǎng)頁(yè)顯得典雅，大方和溫馨。更重要的是，這樣可以大大加快瀏覽者打開(kāi)網(wǎng)頁(yè)的速度。</p><p>　　一般來(lái)說(shuō)，網(wǎng)頁(yè)的背景色應(yīng)該柔和一些、素一些、淡一些，再配上深色的文字，使人看起來(lái)自然、舒暢。而為了追求醒目的視覺(jué)效果，可以為標(biāo)題使用較深的顏色。</p><p><b>　　網(wǎng)頁(yè)文字的搭

39、配</b></p><p>　　字號(hào)大小可以用不同的方式來(lái)計(jì)算，例如磅#quotel.quoter#或像素(Pixel)。因?yàn)橐韵袼丶夹g(shù)為基礎(chǔ)單位打印時(shí)需要轉(zhuǎn)換為磅，所以，建議采用磅為單位。</p><p>　　最適合于網(wǎng)頁(yè)正文顯示的字體大小為12磅左右，現(xiàn)在很多的綜合性站點(diǎn)，由于在一個(gè)頁(yè)面中需要安排的內(nèi)容較多，通常采用9磅的字號(hào)。較大的字體可用于標(biāo)題或其他需要強(qiáng)調(diào)的地方，小一

40、些的字體可以用于頁(yè)腳和輔助信息。需要注意的是，小字號(hào)容易產(chǎn)生整體感和精致感，但可讀性較差。</p><p>　　網(wǎng)頁(yè)設(shè)計(jì)者可以用字體來(lái)更充分地體現(xiàn)設(shè)計(jì)中要表達(dá)的情感。字體選擇是一種感性、直觀的行為。但是，無(wú)論選擇什么字體，都要依據(jù)網(wǎng)頁(yè)的總體設(shè)想和瀏覽者的需要。例如：粗體字強(qiáng)壯有力，有男性特點(diǎn)，適合機(jī)械、建筑業(yè)等內(nèi)容；細(xì)體字高雅細(xì)致，有女性特點(diǎn)，更適合服裝、化妝品、食品等行業(yè)的內(nèi)容。在同一頁(yè)面中，字體種類少，版面雅

41、致，有穩(wěn)定感；字體種類多，則版面活躍，豐富多彩。關(guān)鍵是如何根據(jù)頁(yè)面內(nèi)容來(lái)掌握這個(gè)比例關(guān)系。</p><p>　　從加強(qiáng)平臺(tái)無(wú)關(guān)性的角度來(lái)考慮，正文內(nèi)容最好采用缺省字體。因?yàn)闉g覽器是用本地機(jī)器上的字庫(kù)顯示頁(yè)面內(nèi)容的。作為網(wǎng)頁(yè)設(shè)計(jì)者必須考慮到大多數(shù)瀏覽者的機(jī)器里只裝有三種字體類型及一些相應(yīng)的特定字體。而你指定的字體在瀏覽者的機(jī)器里并不一定能夠找到，這給網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)很大的局限。解決問(wèn)題的辦法是：在確有必要使用特殊字體的

42、地方，可以將文字制成圖像，然后插入頁(yè)面中。</p><p>　　行距的變化也會(huì)對(duì)文本的可讀性產(chǎn)生很大影響。一般情況下，接近字體尺寸的行距設(shè)置比較適合正文。行距的常規(guī)比例為10:12，即用字10點(diǎn)，則行距 12點(diǎn)。這主要是出于以下考慮：適當(dāng)?shù)男芯鄷?huì)形成一條明顯的水平空白帶，以引導(dǎo)瀏覽者的目光，而行距過(guò)寬會(huì)使一行文字失去較好的延續(xù)性。</p><p>　　除了對(duì)于可讀性的影響，行距本身也是具有

43、很強(qiáng)表現(xiàn)力的設(shè)計(jì)語(yǔ)言，為了加強(qiáng)版式的裝飾效果，可以有意識(shí)地加寬或縮窄行距，體現(xiàn)獨(dú)特的審美意趣。例如，加寬行距可以體現(xiàn)輕松、舒展的情緒，應(yīng)用于娛樂(lè)性、抒情性的內(nèi)容恰如其分。另外，通過(guò)精心安排，使寬、窄行距并存，可增強(qiáng)版面的空間層次與彈性，表現(xiàn)出獨(dú)到的匠心。</p><p>　　行距可以用行高(line-height)屬性來(lái)設(shè)置，建議以磅或默認(rèn)行高的百分?jǐn)?shù)為單位。例如：｛line-height：20pt｝、｛line

44、-height：150%｝。</p><p>　　文字的整體編排。頁(yè)面里的正文部分是由許多單個(gè)文字經(jīng)過(guò)編排組成的群體，要充分發(fā)揮這個(gè)群體形狀在版面整體布局中的作用。從藝術(shù)的角度可以將字體本身看成是一種藝術(shù)形式，它在個(gè)性和情感方面對(duì)人們有著很大影響。在網(wǎng)頁(yè)設(shè)計(jì)中，字體的處理與顏色、版式、圖形等其他設(shè)計(jì)元素的處理一樣非常關(guān)鍵。從某種意義上來(lái)講，所有的設(shè)計(jì)元素都可以理解為圖形。</p><p>

45、<b>　　建設(shè)網(wǎng)站的工具</b></p><p>　　網(wǎng)頁(yè)布局軟件adobe dreamweaver cs5.5</p><p>　　Dreamweaver可以用最快速的方式將Fireworks或Photoshop等檔案移至網(wǎng)頁(yè)上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁(yè)安全色。對(duì)于選單，快捷鍵與格式控制，都只要一個(gè)簡(jiǎn)單步驟便可完成。Dreamweaver

46、能與您喜愛(ài)的設(shè)計(jì)工具，如Playback Flash，Shockwave和外掛模組等搭配，不需離開(kāi)Dreamweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動(dòng)開(kāi)啟Firework或Photoshop來(lái)進(jìn)行編輯與設(shè)定圖檔的最佳化。所見(jiàn)即所得的操作非常實(shí)用。</p><p>　　圖片美化軟件adobe photoshop cs5.5</p><p>

47、　　從功能上看，該軟件可分為圖像編輯、圖像合成、校色調(diào)色及特效制作部分等。 圖像編輯是圖像處理的基礎(chǔ)，可以對(duì)圖像做各種變換如放大、縮小、旋轉(zhuǎn)、傾斜、鏡像、透視等。也可進(jìn)行復(fù)制、去除斑點(diǎn)、修補(bǔ)、修飾圖像的殘損等。最重要的是該軟件可以進(jìn)行網(wǎng)頁(yè)布局。</p><p>　　還有其他工具如flash等用于制作導(dǎo)航條等。</p><p><b>　　網(wǎng)站建設(shè)的技術(shù)</b><

48、/p><p>　　Div+css布局方法</p><p>　　DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用術(shù)語(yǔ)之一，div+css 是一種網(wǎng)頁(yè)的布局方法，這一種網(wǎng)頁(yè)布局方法有別于傳統(tǒng)的HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格（table）定位方式，可實(shí)現(xiàn)網(wǎng)頁(yè)頁(yè)面內(nèi)容與表現(xiàn)相分離。XHTML是The Extensible HyperText Markup Language（可擴(kuò)展超文本標(biāo)識(shí)語(yǔ)言）的縮

49、寫。XHTML基于可擴(kuò)展標(biāo)記語(yǔ)言（XML），是一種在HTML 基礎(chǔ)上優(yōu)化和改進(jìn)的的新語(yǔ)言，目的是基于XML應(yīng)用與強(qiáng)大的數(shù)據(jù)轉(zhuǎn)換能力，適應(yīng)未來(lái)網(wǎng)絡(luò)應(yīng)用更多的需求。在XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。</p><p>　　這種方法由以下優(yōu)點(diǎn)：大多數(shù)瀏覽器兼容；瀏覽器翻譯速度快；排版簡(jiǎn)單方便；更加便于維護(hù)。</p><p><b>

50、;　　PHP語(yǔ)言使用技術(shù)</b></p><p>　　PHP，一個(gè)嵌套的縮寫名稱，是英文超級(jí)文本預(yù)處理語(yǔ)言（PHP:Hypertext Preprocessor）的縮寫。PHP 是一種 HTML 內(nèi)嵌式的語(yǔ)言，PHP與微軟的ASP頗有幾分相似，都是一種在服務(wù)器端執(zhí)行的嵌入HTML文檔的腳本語(yǔ)言，語(yǔ)言的風(fēng)格有類似于C語(yǔ)言，現(xiàn)在被很多的網(wǎng)站編程人員廣泛的運(yùn)用。PHP 獨(dú)特的語(yǔ)法混合了C、Java、Perl

51、 以及 PHP 自創(chuàng)新的語(yǔ)法。有以下特點(diǎn)：</p><p>　　開(kāi)放的源代碼：所有的PHP源代碼事實(shí)上都可以得到。</p><p>　　PHP是免費(fèi)的，和其它技術(shù)相比，PHP本身免費(fèi)。</p><p>　　php的快捷性：程序開(kāi)發(fā)快，運(yùn)行快，技術(shù)本身學(xué)習(xí)快。嵌入于HTML：因?yàn)镻HP可以被嵌入于HTML語(yǔ)言，它相對(duì)于其他語(yǔ)言，編輯簡(jiǎn)單，實(shí)用性強(qiáng)，更適合初學(xué)者。<

52、;/p><p>　　跨平臺(tái)性強(qiáng)：由于PHP是運(yùn)行在服務(wù)器端的腳本,可以運(yùn)行在UNIX、LINUX、WINDOWS下。</p><p>　　效率高：PHP消耗相當(dāng)少的系統(tǒng)資源。</p><p>　　圖像處理：用PHP動(dòng)態(tài)創(chuàng)建圖像。</p><p>　　面向?qū)ο螅涸趐hp4、php5 中，面向?qū)ο蠓矫娑加辛撕艽蟮母倪M(jìn)，現(xiàn)在php完全可以用來(lái)開(kāi)發(fā)大型商

53、業(yè)程序。</p><p><b>　　鏈接及其他技術(shù)</b></p><p>　　網(wǎng)頁(yè)上的超鏈接一般分為三種：一種是絕對(duì)URL的超鏈接。URL（Uniform. Resource Locator）就是統(tǒng)一資源定位符，簡(jiǎn)單地講就是網(wǎng)絡(luò)上的一個(gè)站點(diǎn)、網(wǎng)頁(yè)的完整路徑。</p><p>　　第二種是相對(duì)URL的超鏈接。如將自己網(wǎng)頁(yè)上的某一段文字或某標(biāo)題

54、鏈接到同一網(wǎng)站的其他網(wǎng)頁(yè)上面去。</p><p>　　第三種稱為同一網(wǎng)頁(yè)的超鏈接，這就要使用到書簽的超鏈接,一般用#號(hào)加上名稱鏈接到同 一頁(yè)面的指定地方。在網(wǎng)頁(yè)中，一般文字上的超鏈接都是藍(lán)色（當(dāng)然，用戶也可以自己設(shè)置成其他顏色），文字下面有一條下劃線。當(dāng)移動(dòng)鼠標(biāo)指針到該超鏈接上時(shí)，鼠標(biāo)指針就會(huì)變成一只手的形狀，這時(shí)候用鼠標(biāo)左鍵單擊，就可以直接跳到與這個(gè)超鏈接相連接的網(wǎng)頁(yè)或WWW網(wǎng)站上去。如果用戶已經(jīng)瀏覽過(guò)某個(gè)超鏈

55、接，這個(gè)超鏈接的文本顏色就會(huì)發(fā)生改變。只有圖像的超鏈接訪問(wèn)后顏色不會(huì)發(fā)生變化。</p><p>　　其他技術(shù)包括文本的格式對(duì)齊，導(dǎo)航條的制作，插入多媒體，插入圖片等技術(shù)由于涉及較細(xì)不一一介紹。</p><p><b>　　網(wǎng)站的實(shí)現(xiàn)</b></p><p><b>　　網(wǎng)站實(shí)現(xiàn)過(guò)程概述</b></p><

56、;p>　　教學(xué)網(wǎng)站建設(shè)是一個(gè)系統(tǒng)建設(shè)的過(guò)程，需要統(tǒng)籌兼顧，整體把握，注重細(xì)節(jié)、認(rèn)真考慮、階段實(shí)現(xiàn)的過(guò)程。</p><p>　　首先選擇成熟的dreamweaver網(wǎng)頁(yè)制作平臺(tái)。利用photoshop制作背景圖像以及相關(guān)的布局圖像。利用flash動(dòng)畫制作軟件制作導(dǎo)航條。用切片的方法實(shí)現(xiàn)css+div的布局。把所有布局對(duì)象和素材整合到dreamweaver，利用dreamweaver軟件的相關(guān)工具進(jìn)行美化。結(jié)合

57、dreamweaver軟件里的代碼視圖對(duì)格式及一些特定的效果進(jìn)行編程。最后利用多種版本的瀏覽器進(jìn)行測(cè)試，IIS進(jìn)行網(wǎng)頁(yè)調(diào)試，直到網(wǎng)頁(yè)效果達(dá)到自己的預(yù)期。</p><p><b>　　頁(yè)面設(shè)置</b></p><p><b>　　教師個(gè)人網(wǎng)站</b></p><p>　　首頁(yè)背景使用灰白色，其他顏色均為亮藍(lán)色，突出顏色的對(duì)比

58、度。網(wǎng)站風(fēng)格簡(jiǎn)單樸素。采用左中右三欄的布局方式，網(wǎng)站的各項(xiàng)一目了然。具體如下圖5.1所示。</p><p>　　圖 5.1 教師個(gè)人網(wǎng)站</p><p><b>　　綠旋風(fēng)團(tuán)隊(duì)網(wǎng)站</b></p><p>　　綠旋風(fēng)團(tuán)隊(duì)，注重現(xiàn)代工業(yè)與人文精神的融合，倡導(dǎo)綠色設(shè)計(jì)、推動(dòng)清潔生產(chǎn)，加強(qiáng)學(xué)生的工程實(shí)踐能力。以“運(yùn)動(dòng)、守時(shí)、細(xì)節(jié)、專攻”作為團(tuán)隊(duì)精神

59、，推動(dòng)本科素質(zhì)教育與校園文化建設(shè)，探索廣東工業(yè)大學(xué)專業(yè)建設(shè)特色。</p><p>　　繼承采用左中右的布局方法，各項(xiàng)欄目?jī)?nèi)容一目了然，具體布局如下圖5.2所示。</p><p>　　圖 5.2 綠旋風(fēng)團(tuán)隊(duì)網(wǎng)站</p><p><b>　　綠色設(shè)計(jì)學(xué)習(xí)網(wǎng)站</b></p><p>　　本網(wǎng)頁(yè)為讀者提供一個(gè)生態(tài)工業(yè)園區(qū)20

60、萬(wàn)噸啤酒XX工廠及工業(yè)園區(qū)設(shè)計(jì)的案例。網(wǎng)頁(yè)布局采用上下結(jié)構(gòu)，提供各項(xiàng)設(shè)計(jì)的相關(guān)鏈接。具體如下圖5.3所示。</p><p>　　圖5.3 綠色設(shè)計(jì)學(xué)習(xí)網(wǎng)站</p><p>　　XX工廠課程設(shè)計(jì)網(wǎng)站</p><p>　　使學(xué)習(xí)者綜合運(yùn)用工程制圖、AutoCAD、微XX學(xué)、XX化學(xué)、物理化學(xué)和化工原理、XX工程設(shè)備及工廠設(shè)計(jì)等知識(shí)進(jìn)行工廠的初步設(shè)計(jì)，進(jìn)一步掌握常用XX

61、反應(yīng)器和設(shè)備的結(jié)構(gòu)、性能、適用范圍及選型計(jì)算。網(wǎng)頁(yè)采用一貫的左右布局，添加了豐富的動(dòng)畫。簡(jiǎn)約的頁(yè)面清新自然。具體如下圖5.4所示。</p><p>　　圖4 XX工廠課程設(shè)計(jì)網(wǎng)站</p><p><b>　　小結(jié)</b></p><p>　　本次課程設(shè)計(jì)我承擔(dān)了制作網(wǎng)頁(yè)的角色，與大多數(shù)同學(xué)的設(shè)計(jì)是不一樣的，這增加了挑戰(zhàn)性。網(wǎng)頁(yè)的設(shè)計(jì)和制作是本