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

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

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

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

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

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

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

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

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

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

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

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

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

13、結(jié)果等。至于具體的評價要素、評價指標(biāo) 體系可以說還是空白，而這些在國外已經(jīng)開始建設(shè)這一評價體系。即使在美國等遠(yuǎn)程教育發(fā)展較完善的國家，通行的認(rèn)證原則也是一些定性的指導(dǎo)思想，進(jìn)行有效性評價指標(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é)模式、實現(xiàn)學(xué)科交叉，XX專業(yè)與信息技術(shù)的融合，培養(yǎng)學(xué)生學(xué)習(xí)興趣的重要途徑，實現(xiàn)跨越式輻射式教學(xué)。構(gòu)建教學(xué)網(wǎng)站符合實際需要，時代需求，具有十分重大的意義。</p><p><b>　　改變傳統(tǒng)教學(xué)模式</b></p><p>　　從教學(xué)模式來看，建設(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í)來看，建設(shè)出好的教學(xué)網(wǎng)站將是學(xué)生課堂學(xué)習(xí)強有力的補充，利用網(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é)生和老師的交流來看，建設(shè)出好的教學(xué)網(wǎng)站將為學(xué)生和老師在情感交流方面架起情感的橋梁。利用現(xiàn)代的信息技術(shù)手段，建設(shè)好的教學(xué)網(wǎng)站，推進(jìn)國家的教育事業(yè)，此任務(wù)是教育以及國家對于網(wǎng)絡(luò)建設(shè)工作著來說是迫不及待的。</p><p><b>　　建設(shè)教學(xué)網(wǎng)站的目的

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

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

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

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

21、。使用activex控件、php腳本語言制作網(wǎng)頁特殊效果。本文主要闡述網(wǎng)站的設(shè)計理念、設(shè)計方法和規(guī)劃方案，對建設(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)頁有時也被稱為平面頁。靜態(tài)網(wǎng)頁的網(wǎng)址形式通常為htm（超文本標(biāo)記語言）結(jié)尾 ，還有就是以超文本標(biāo)記語言（.htm、.html）、.shtml、.xml（可擴展標(biāo)記語言）等為后綴的。在超文本標(biāo)記語言格式的網(wǎng)頁上，也可以出現(xiàn)各種動態(tài)的效果，如.GIF格式的動畫flash、滾動字幕等，這些“動態(tài)效果”只是視覺上的，與下面將要介紹的動態(tài)網(wǎng)頁是不同的概念。靜態(tài)網(wǎng)頁面通常是超文本標(biāo)記語言文檔存

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

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

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

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

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

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

29、須適合這一需求?；诜?wù)對象是教師和學(xué)生，所以在商業(yè)上，市場競爭上，資源競爭上沒有過多的要求，或者說沒有考慮。本教學(xué)網(wǎng)站主要以提高教學(xué)效率與教學(xué)質(zhì)量為目的，以開設(shè)教學(xué)資源庫，創(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)站主要是實現(xiàn)把豐富的課程資源通過網(wǎng)絡(luò)信息平臺共享到互聯(lián)

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

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

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

33、t;/b></p><p>　　從本站的需求與特點考慮，采用靜態(tài)網(wǎng)頁的方式制作。網(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)頁的基色。網(wǎng)頁風(fēng)格較為樸素、簡潔

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

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

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

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

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

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

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

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

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

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

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

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

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

47、　　從功能上看，該軟件可分為圖像編輯、圖像合成、校色調(diào)色及特效制作部分等。 圖像編輯是圖像處理的基礎(chǔ)，可以對圖像做各種變換如放大、縮小、旋轉(zhuǎn)、傾斜、鏡像、透視等。也可進(jìn)行復(fù)制、去除斑點、修補、修飾圖像的殘損等。最重要的是該軟件可以進(jìn)行網(wǎng)頁布局。</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ù)語之一，div+css 是一種網(wǎng)頁的布局方法，這一種網(wǎng)頁布局方法有別于傳統(tǒng)的HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式，可實現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。XHTML是The Extensible HyperText Markup Language（可擴展超文本標(biāo)識語言）的縮

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

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

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

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

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

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

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

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

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

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

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

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

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