計(jì)算機(jī)圖形學(xué)精品課程網(wǎng)站建設(shè)論文

1、計(jì)算機(jī)圖形學(xué)精品課程網(wǎng)站建設(shè)摘 要計(jì)算機(jī)圖形學(xué)(computer graphics，簡(jiǎn)稱cg)是一種使用數(shù)學(xué)算法將二維或三維圖形轉(zhuǎn)化為計(jì)算機(jī)顯示器的柵格形式的科學(xué)。簡(jiǎn)單地說，計(jì)算機(jī)圖形學(xué)的主要研究?jī)?nèi)容就是研究如何在計(jì)算機(jī)中表示圖形、以及利用計(jì)算機(jī)進(jìn)行圖形的計(jì)算、處理和顯示的相關(guān)原理與算法。圖形通常由點(diǎn)、線、面、體等幾何元素和灰度、色彩、線型、線寬等非幾何屬性組成。從處理技術(shù)上來看，圖形主要分為兩類，一類是基于線條信息表示的，如工程圖、等高線地圖、曲面的線框圖等，另一類是明暗圖，也就是通常所說的真實(shí)感圖形。本文介紹了建設(shè)計(jì)算機(jī)圖形學(xué)精品課程所用到的基本技術(shù)，及具體是網(wǎng)站設(shè)計(jì)及實(shí)現(xiàn)方法。該網(wǎng)站以d

2、reamweaver為開發(fā)工具，以iis為解釋服務(wù)器，以asp（active server page）為編程語言，以css+div為網(wǎng)站前臺(tái)網(wǎng)頁樣式設(shè)計(jì)及頁面框架搭建，以access為數(shù)據(jù)庫來建設(shè)的。內(nèi)容主要有：師資隊(duì)伍、課程描述、教學(xué)資源、師生交流、實(shí)驗(yàn)教學(xué)、成果展示、在線考試。關(guān)鍵詞：精品課程 網(wǎng)站建設(shè) dreamweaver css div javascriptthe construction of computer graphics excellent courses websiteabstractcomputer graphics (computer graphics, referr

3、ed to as cg) is a mathematical algorithm science which using two-dimensional or three-dimensional computer graphics display into a rid form . simply put, the main researched content of computer graphics was that how to display the computer graphics in the computer and the using of the calculation, p

4、rocessing and display the relevant principles and algorithms graphics are composed by that the non-geometric attributes , which such as point, line, face, body and other geometric elements, and gray, color, line, line width. in terms of processing technology , graphics is mainly divided into two kin

5、ds of graphics.one is based on the lines, such as engineering drawings, contour maps, surface wireframe map, and the other is a light map, which is usually called realistic graphics. this paper introduces the basic technology of the construction of cmputer graphics courses excellent courses website,

6、 the design of this web and the implementation of this web. in the construction of this web, i used the dreamweaver as the site development tools, used the iis server as web server, used asp(active server page) for the programming language,used css + div for the front web design of this website ,use

7、d access as the database for this website. this website is mainly included: the introduction of teachers, the description of computer graphics course, the resources of teaching,the exchange between teachers and students,the experiment teaching,the showing of the research achievements , the on-line e

8、xamination.key words: excellent courses，website，dreamweaver css div javascript目錄前言1第1章 計(jì)算機(jī)圖形學(xué)的發(fā)展及應(yīng)用21.1 計(jì)算機(jī)圖形學(xué)發(fā)展簡(jiǎn)史21.2 計(jì)算機(jī)圖形學(xué)的應(yīng)用及研究前沿31.3 計(jì)算機(jī)圖形學(xué)網(wǎng)絡(luò)教學(xué)特點(diǎn)及發(fā)展6第2章 精品課程網(wǎng)站需求分析82.18第3章 精品課程網(wǎng)站設(shè)計(jì)103.1 精品課程網(wǎng)站總體設(shè)計(jì)103.1.1 網(wǎng)站建設(shè)流程設(shè)計(jì)103.1.2 網(wǎng)站建設(shè)選用的編程語言123.1.3 網(wǎng)站建設(shè)開發(fā)工具123.1.4 網(wǎng)站建設(shè)使用服務(wù)器133.1.5 網(wǎng)站建設(shè)使用技術(shù)133.2 精品課程網(wǎng)站詳細(xì)設(shè)

9、計(jì)183.2.1 網(wǎng)站模塊劃分及設(shè)計(jì)183.2.1 網(wǎng)站主頁設(shè)計(jì)193.2.2 網(wǎng)站子頁設(shè)計(jì)22第4章 精品課程網(wǎng)站具體功能代碼實(shí)現(xiàn)234.1 網(wǎng)站子頁左側(cè)導(dǎo)航234.2 javascript 輸出日期時(shí)間254.3 div顯示和隱藏實(shí)現(xiàn)視頻播放26結(jié)論30謝 辭31參考文獻(xiàn)32前言計(jì)算機(jī)圖形學(xué)是利用計(jì)算機(jī)研究圖形的表示、生成、處理、顯示的學(xué)科。經(jīng)過30多年的發(fā)展 , 計(jì)算機(jī)圖形學(xué)已成為計(jì)算機(jī)科學(xué)中 , 最為活躍的分支之一 , 并得到廣泛的應(yīng)用。搭建計(jì)算機(jī)圖形學(xué)精品課程的目的是在計(jì)算機(jī)圖形學(xué)基本原則指導(dǎo)下，建立方便的在線瀏覽計(jì)算機(jī)圖形學(xué)方面的知識(shí)和在線管理一些圖形學(xué)方面的科學(xué)資料，通過師生互動(dòng)

10、環(huán)節(jié)提高學(xué)生計(jì)算機(jī)圖形學(xué)方面的專業(yè)知識(shí)。積極開發(fā)科技信息資源，及時(shí)、有效地提供圖形學(xué)方面的分享和利用,給各個(gè)科研部門提供一個(gè)標(biāo)準(zhǔn)化的、規(guī)范化、網(wǎng)絡(luò)化的科研成果信息交流的平臺(tái)。高度利用科研成果，提高我國(guó)的科技發(fā)展水平。通過網(wǎng)站，全面宣傳，展示計(jì)算機(jī)系圖形學(xué)的風(fēng)采、優(yōu)點(diǎn)與特色，發(fā)布計(jì)算機(jī)圖形學(xué)方面的知識(shí)和在線視頻教程等信息內(nèi)容，使學(xué)生對(duì)計(jì)算機(jī)圖形學(xué)有更深刻的了解，增強(qiáng)學(xué)生、老師之間的聯(lián)系，在internet網(wǎng)上，讓學(xué)生及時(shí)得到計(jì)算機(jī)圖行學(xué)方面的重要信息，同時(shí)也幫助了學(xué)校完成部分事務(wù)，提高辦事效率,給學(xué)生，學(xué)校最方便的聯(lián)系橋梁。在這里學(xué)生也可以提出意見及想法，互通教學(xué)之間的意見想法，更加有效的辦好教

11、學(xué)，和學(xué)生需要哪樣的教學(xué)方式能夠更好的吸收與接納，這些都能成為學(xué)校的參考，以便更好的提高學(xué)校的教學(xué)質(zhì)量。此計(jì)算機(jī)圖形學(xué)精品課程網(wǎng)站，是搭建一個(gè)以計(jì)算機(jī)圖形學(xué)為主要知識(shí)內(nèi)容的在線網(wǎng)絡(luò)教學(xué)平臺(tái)。所以它的基本技術(shù)要求是在網(wǎng)絡(luò)上要實(shí)現(xiàn)計(jì)算機(jī)圖形學(xué)理論知識(shí)以web頁面的形式呈現(xiàn)。還要有在線互動(dòng)的動(dòng)態(tài)技術(shù)的支持。 第1章 計(jì)算機(jī)圖形學(xué)的發(fā)展及應(yīng)用1.1 計(jì)算機(jī)圖形學(xué)發(fā)展簡(jiǎn)史1950年 ，第一臺(tái)圖形顯示器作為美國(guó)麻省理工學(xué)院(mit) 旋風(fēng) 號(hào) (whirlwind 1) 計(jì)算機(jī)的附件誕生了。該顯示器用1個(gè)類似于示波器的陰極射線管 (crt) 來顯示一些簡(jiǎn)單的圖形。1958 年美國(guó) calcomp 公司由聯(lián)

12、機(jī)的數(shù)字記錄儀發(fā)展成滾筒式繪圖儀 ， gerber 公司把數(shù)控機(jī)床發(fā)展成為平板式繪圖儀。在整個(gè)50年代 ，只有電子管計(jì)算機(jī) ， 用機(jī)器語言編程， 主要應(yīng)用于科學(xué)計(jì)算，為這些計(jì)算機(jī)配置的圖形設(shè)備僅具有輸出功能。計(jì)算機(jī)圖形學(xué)處于準(zhǔn)備和醞釀時(shí)期，并稱之為：“被動(dòng)式”圖形學(xué)。到 50 年代末期，mit的林肯實(shí)驗(yàn)室在“旋風(fēng)”計(jì)算機(jī)上開發(fā) sage空中防御體系， 第一次使用了具有指揮和控制功能的 crt顯示器，操作者可以用筆在屏幕上指出被確定的目標(biāo)。與此同時(shí)，類似的技術(shù)在設(shè)計(jì)和生產(chǎn)過程中也陸續(xù)得到了應(yīng)用，它預(yù)示著交互式計(jì)算機(jī)圖形學(xué)的誕生。1962年，mit林肯實(shí)驗(yàn)室的 ivan e1sutherland

13、發(fā)表了 1篇題為“sketchpad ： 一個(gè)人機(jī)交互通信的圖形系統(tǒng)”的博士論文，他在論文中首次使用了計(jì)算機(jī)圖形學(xué)“computer graphics”這個(gè)術(shù)語，證明了交互計(jì)算機(jī)圖形學(xué)是一個(gè)可行的、有用的研究領(lǐng)域，從而確定了計(jì)算機(jī)圖形學(xué)作為一個(gè)嶄新的科學(xué)分支的獨(dú)立地位。20世紀(jì)70年代是計(jì)算機(jī)圖形學(xué)發(fā)展過程中的一個(gè)重要的歷史時(shí)期。由于光柵顯示器的產(chǎn)生，在60 年代就已萌芽的光柵圖形學(xué)算法，迅速發(fā)展起來，區(qū)域填充、裁剪、消隱等基本圖形概念及其相應(yīng)算法紛紛誕生，圖形學(xué)進(jìn)入了第一個(gè)興盛的時(shí)期，并開始出現(xiàn)實(shí)用的 cad圖形系統(tǒng)。又因?yàn)橥ㄓ门c設(shè)備無關(guān)的圖形軟件的發(fā)展，圖形軟件功能的標(biāo)準(zhǔn)化問題被提了出來。

14、1974 年，美國(guó)國(guó)家標(biāo)準(zhǔn)化局(ansi ) 在 acm siggraph的一個(gè)“與機(jī)器無關(guān)的圖形技術(shù)”的工作會(huì)議上，提出了制定有關(guān)標(biāo)準(zhǔn)的基本規(guī)則。此后acm專門成立了一個(gè)圖形標(biāo)準(zhǔn)化委員會(huì)，開始制定有關(guān)標(biāo)準(zhǔn)。該委員會(huì)于 1977、1979 年先后制定和修改了“核心圖形系統(tǒng)” (core graphics system) 。iso隨后又發(fā)布了計(jì)算機(jī)圖形接口 cgi (computer graphics interface) 、計(jì)算機(jī)圖形元文件標(biāo)準(zhǔn) cgm (computer graphics metafile) 、計(jì)算機(jī)圖形核心系統(tǒng) gks (graphics kernel system) 、面

15、向程序員的層次交互圖形標(biāo)準(zhǔn) phigs ( programmerp s hierarchical interactivegraphics standard) 等。這些標(biāo)準(zhǔn)的制定，為計(jì)算機(jī)圖形學(xué)的推廣、應(yīng)用、資源信息共享，起了重要作用。 20世紀(jì)70年代 ，計(jì)算機(jī)圖形學(xué)另外兩個(gè)重要進(jìn)展是真實(shí)感圖形學(xué)和實(shí)體造型技術(shù)的產(chǎn)生。1970 年bouknight 提出了第一個(gè)光反射模型， 1971 年 gourand 提出“漫反射模型+插值”的思想，被稱為 gourand明暗處理。1975 年 phong提出了著名的簡(jiǎn)單光照模型 phong模型。這些可以算是真實(shí)感圖形學(xué)最早的開創(chuàng)性工作。另外，從 1973

16、年開始，相繼出現(xiàn)了英國(guó)劍橋大學(xué) cad 小組的 build 系統(tǒng)、美國(guó)羅徹斯特大學(xué)的 padl21系統(tǒng)等實(shí)體造型系統(tǒng)。1980年 whitted 提出了一個(gè)光透視模型whitted 模型，并第一次給出光線跟蹤算法的范例，實(shí)現(xiàn) whitted 模型；1984年，美國(guó) cornell大學(xué)和日本廣島大學(xué)的學(xué)者分別將熱輻射工程中的輻射度的方法引入到計(jì)算機(jī)圖形學(xué)中，用輻射度方法成功地模擬了理想漫反射表面間的多重漫反射效果；光線跟蹤算法和輻射度算法的提出，標(biāo)志著真實(shí)感圖形的顯示算法已逐漸成熟。從 20 世紀(jì) 80 年代中期以來，超大規(guī)模集成電路的發(fā)展，為圖形學(xué)的飛速發(fā)展奠定了物質(zhì)基礎(chǔ)。計(jì)算機(jī)的運(yùn)算能力的提

17、高，圖形處理速度的加快，使得圖形學(xué)的各個(gè)研究方向得到充分發(fā)展，圖形學(xué)已廣泛應(yīng)用于動(dòng)畫、科學(xué)計(jì)算可視化、cad/ can、影視娛樂等各個(gè)領(lǐng)域。 acm siggraph會(huì)議是計(jì)算機(jī)圖形學(xué)最權(quán)威的國(guó)際會(huì)議，每年在美國(guó)召開 , 參加會(huì)議的人在50 000人左右。sig 2graph會(huì)議很大程度上促進(jìn)了圖形學(xué)的發(fā)展，世界上不會(huì)有第二個(gè)領(lǐng)域會(huì)每年召開如此規(guī)模巨大的專業(yè)會(huì)議。到了 1997 年，參加會(huì)議的人數(shù)已經(jīng)增加到48 700。因?yàn)槊磕曛讳浫〈蠹s 50 篇論文，在computer graphics雜志上發(fā)表，因此論文的學(xué)術(shù)水平較高，基本上代表了圖形學(xué)發(fā)展的主流方向。1.2 計(jì)算機(jī)圖形學(xué)的應(yīng)用及研究前沿

18、 1、計(jì)算機(jī)輔助設(shè)計(jì)與制造 cad/ cau是計(jì)算機(jī)圖形學(xué)在工業(yè)界最廣泛、最活躍的應(yīng)用領(lǐng)域。計(jì)算機(jī)圖形學(xué)被用來進(jìn)行土建工程、機(jī)械結(jié)構(gòu)和產(chǎn)品的設(shè)計(jì), 包括設(shè)計(jì)飛機(jī)、汽車、船舶的外形和發(fā)電廠、化工廠等的布局以及電子線路、電子器件等。隨著計(jì)算機(jī)網(wǎng)絡(luò)的發(fā)展 , 在網(wǎng)絡(luò)環(huán)境下進(jìn)行異地異構(gòu)系統(tǒng)的協(xié)同設(shè)計(jì) , 已經(jīng)成為 cad領(lǐng)域最熱門的課題之一。cad領(lǐng)域另一個(gè)非常重要的研究領(lǐng)域是基于工程圖紙的三維形體重建。2、科學(xué)計(jì)算可視化 科學(xué)技術(shù)的迅猛發(fā)展 , 數(shù)據(jù)量的與日俱增使得人們對(duì)數(shù)據(jù)的分析和處理變得越來越難 , 人們無法從數(shù)據(jù)海洋中得到最有用的數(shù)據(jù) , 找到數(shù)據(jù)的變化規(guī)律, 提取最本質(zhì)的特征。但是如果能將這

19、些數(shù)據(jù)用圖形的形式表示出來 , 情況就不一樣了 , 事物的發(fā)展趨勢(shì)和本質(zhì)特征將會(huì)很清楚地呈現(xiàn)在人們面前。目前科學(xué)計(jì)算可視化廣泛應(yīng)用于醫(yī)學(xué)、流體力學(xué)、有限元分析、氣象分析當(dāng)中。3、圖形實(shí)時(shí)繪制與自然景物仿真 在計(jì)算機(jī)中重現(xiàn)真實(shí)世界的場(chǎng)景叫做真實(shí)感繪制。真實(shí)感繪制的主要任務(wù)是模擬真實(shí)物體的物理屬性,簡(jiǎn)單的說就是物體的形狀、光學(xué)性質(zhì)、表面的紋理和粗糙程度,以及物體間的相對(duì)位置、遮擋關(guān)系等等。這其中光照和表面屬性是最難模擬的。為了模擬光照 , 已有各種各樣的光照模型。從簡(jiǎn)單到復(fù)雜排列分別是: 簡(jiǎn)單光照模型、局部光照模型和整體光照模型。從繪制方法上看有模擬光的實(shí)際傳播過程的光線跟蹤法 , 也有模擬能量交

20、換的輻射度方法。除了建造計(jì)算機(jī)可實(shí)現(xiàn)的逼真物理模型外,真實(shí)感繪制還有一個(gè)研究重點(diǎn)是研究加速算法 , 力求能在最短時(shí)間內(nèi)繪制出最真實(shí)的場(chǎng)景。4、計(jì)算機(jī)動(dòng)畫 早期的計(jì)算機(jī)動(dòng)畫靈感來源于傳統(tǒng)的卡通片 , 在生成幾幅被稱做“關(guān)鍵幀”的畫面后 , 由計(jì)算機(jī)對(duì) 2 幅關(guān)鍵幀進(jìn)行插值生成若干“中間幀” , 連續(xù)播放時(shí)2個(gè)關(guān)鍵幀就被有機(jī)地結(jié)合起來了。計(jì)算機(jī)動(dòng)畫內(nèi)容豐富多彩 , 生成動(dòng)畫的方法也多種多樣,比如基于特征的圖像變形、二維形狀混合、軸變形方法、三維自由形體變形 ( ffd , free2formdeformation) 等。近年來人們普遍將注意力轉(zhuǎn)向基于物理模型的計(jì)算機(jī)動(dòng)畫生成方法。這是一種嶄新的方法

21、,該方法大量運(yùn)用彈性力學(xué)和流體力學(xué)的方程進(jìn)行計(jì)算,力求使動(dòng)畫過程體現(xiàn)出最適合真實(shí)世界的運(yùn)動(dòng)規(guī)律。然而要真正到達(dá)真實(shí)的運(yùn)動(dòng)是很難的 , 比如人的行走或跑步是全身的各個(gè)關(guān)節(jié)協(xié)調(diào)的結(jié)果 , 要實(shí)現(xiàn)很自然的人走路的動(dòng)畫 , 計(jì)算方程非常復(fù)雜和計(jì)算量極大 , 基于物理模型的計(jì)算機(jī)動(dòng)畫還有許多內(nèi)容需要進(jìn)一步研究。 20世紀(jì)90年代是計(jì)算機(jī)動(dòng)畫應(yīng)用輝煌的 10 年。disney公司每年都要出一部制作精美的卡通動(dòng)畫片 , 好萊塢的大片屢屢大量運(yùn)用計(jì)算機(jī)生成各種各樣精彩絕倫的特技效果。廣告設(shè)計(jì) , 電腦游戲也頻頻運(yùn)用計(jì)算機(jī)動(dòng)畫。計(jì)算機(jī)動(dòng)畫也因這些商業(yè)應(yīng)用的大力推動(dòng)而有了極大的發(fā)展。5、用戶接口 用戶接口是人們使

22、用計(jì)算機(jī)的第一觀感。一個(gè)友好的圖形化的用戶界面能夠大大提高軟件的易用性,在 dos時(shí)代,計(jì)算機(jī)的易用性很差 , 編寫一個(gè)圖形化的界面要費(fèi)去大量的勞動(dòng) , 過去傳統(tǒng)的軟件中有 60 %的程序是用來處理與用戶接口有關(guān)的問題和功能的。進(jìn)入 80 年代后 , 隨著xwindow標(biāo)準(zhǔn)的提出 , 蘋果公司圖形化操作系統(tǒng)的推出 , 特別是微軟公司 windows操作系統(tǒng)的普及 , 標(biāo)志著圖形學(xué)已經(jīng)全面融入計(jì)算機(jī)的方方面面。 目前幾個(gè)大的軟件公司都在研究下一代用戶界面,開發(fā)面向主流應(yīng)用的自然、高效多通道的用戶界面。研究多通道語義模型、多通道整合算法及其軟件結(jié)構(gòu)和界面范式是當(dāng)前用戶界面和接口方面研究的主流方向

23、, 而圖形學(xué)在其中起主導(dǎo)作用。6、計(jì)算機(jī)藝術(shù) 現(xiàn)在的美術(shù)人員、尤其是商業(yè)藝術(shù)人員都熱衷于用計(jì)算機(jī)軟件從事藝術(shù)創(chuàng)作。可用于美術(shù)創(chuàng)作的軟件很多,如二維平面的畫筆程序 (如 coreldraw,photoshop , paintshop)、專門的圖表繪制軟件 (如 visio) 、三維建模和渲染軟件包(如 3dmax, maya) 以及一些專門生成動(dòng)畫的軟件 (如alias , softimage) 等 , 可以說是數(shù)不勝數(shù)。當(dāng)然,傳統(tǒng)藝術(shù)的一些效果也是上述軟件所不能達(dá)到的,比如鋼筆素描的效果,中國(guó)毛筆書法的效果,而且在傳統(tǒng)繪畫中有許多個(gè)人風(fēng)格化的效果也是上述軟件所無法企及的。然而圖形學(xué)工作者們是不

24、甘失敗的,就在真實(shí)感圖形學(xué)如火如荼發(fā)展的同時(shí),模擬藝術(shù)效果的非真實(shí)感繪制 (npr nonphotoreal rendering) 也在逐漸發(fā)展。鋼筆素描是非真實(shí)感繪制的一個(gè)重要內(nèi)容 , 目前仍然是一個(gè)非?；钴S的研究領(lǐng)域。1.3 計(jì)算機(jī)圖形學(xué)網(wǎng)絡(luò)教學(xué)特點(diǎn)及發(fā)展計(jì)算機(jī)圖形學(xué)精品課程網(wǎng)站的教學(xué)屬于網(wǎng)絡(luò)教學(xué)，由于網(wǎng)絡(luò)具有遠(yuǎn)程、實(shí)時(shí)、異步、海量信息的特點(diǎn)，因此，跨時(shí)空、大信息量、交互性和個(gè)性化，是網(wǎng)絡(luò)教學(xué)的主要優(yōu)勢(shì)；豐富的信息資源和方便的獲取方式是網(wǎng)絡(luò)教學(xué)的主要標(biāo)志。網(wǎng)絡(luò)教學(xué)資源包括按照一定的教學(xué)目標(biāo)、網(wǎng)絡(luò)教學(xué)策略組織起來的教學(xué)內(nèi)容和網(wǎng)絡(luò)教學(xué)支撐環(huán)境，教師與學(xué)生在地理空間上的分離，其具有以下特點(diǎn)。1.

25、信息傳遞的遠(yuǎn)程性internet是個(gè)連接著世界各地的巨大網(wǎng)絡(luò)，它突破了時(shí)間和空間的限制，任何學(xué)習(xí)者無論身處何時(shí)何地，只要通過網(wǎng)絡(luò)就能獲得教學(xué)信息。2.教學(xué)的交互性通過網(wǎng)絡(luò)，教師和學(xué)習(xí)者可以及時(shí)地交換信息。這樣，一方面，利于學(xué)習(xí)者學(xué)習(xí)，另一方面，有利于教師教學(xué)，使教和學(xué)互相促進(jìn)，達(dá)到良好的教學(xué)效果。3.信息共享性任何信息一旦上網(wǎng)，就能被全球的用戶所接收。對(duì)學(xué)習(xí)者來說，網(wǎng)絡(luò)資源的共享性，一方面，使他們能夠最大限度的占有教學(xué)資源，有利于開闊他們的視野；另一方面，有利于他們正確地理解和整合教學(xué)信息，因?yàn)樗麄兛蓪⑾嚓P(guān)的教學(xué)信息進(jìn)行對(duì)比、對(duì)照，取長(zhǎng)補(bǔ)短，以促進(jìn)學(xué)習(xí)。4.學(xué)習(xí)的個(gè)別化在網(wǎng)絡(luò)教學(xué)資源中，學(xué)習(xí)者

26、的學(xué)習(xí)可以不再受課時(shí)和教學(xué)進(jìn)度的限制，他們可以根據(jù)自己的情況，自主地確定學(xué)習(xí)內(nèi)容和學(xué)習(xí)進(jìn)度，根據(jù)自己的時(shí)間安排各學(xué)科學(xué)習(xí)的時(shí)間。學(xué)習(xí)者能與教師共享各種信息知識(shí)資源，教學(xué)的時(shí)空擴(kuò)展后，學(xué)習(xí)者可以在internet上就某一教學(xué)內(nèi)容向自己欣賞的老師請(qǐng)教，展開討論，以求個(gè)別指導(dǎo)，實(shí)現(xiàn)個(gè)別化學(xué)習(xí)。因此，基于網(wǎng)絡(luò)的教學(xué)是以學(xué)習(xí)者為中心的學(xué)習(xí)者對(duì)自己的行為負(fù)責(zé)，學(xué)習(xí)是一種高度個(gè)人化的行為。5.教學(xué)的時(shí)效性在網(wǎng)絡(luò)教學(xué)資源中，學(xué)習(xí)者通過網(wǎng)絡(luò)接收的教學(xué)信息既可以是實(shí)時(shí)的，也可以是非實(shí)時(shí)的。一方面，有利于學(xué)習(xí)者及時(shí)地接受學(xué)習(xí)信息，另一方面，它支持學(xué)習(xí)者的重復(fù)信息，保證學(xué)習(xí)效果，故帶有很強(qiáng)的實(shí)效性。網(wǎng)絡(luò)教學(xué)資源的建設(shè)

27、決不是教學(xué)手段和教學(xué)方式的變化，而是要推動(dòng)人才培養(yǎng)模式的變革，不是把書本內(nèi)容電子化和把音像教材數(shù)字化，其內(nèi)容和形式必須發(fā)揮網(wǎng)絡(luò)的特點(diǎn)和優(yōu)勢(shì)，進(jìn)行教學(xué)資源的再設(shè)計(jì)和開發(fā)，不能僅僅停留在內(nèi)容或教學(xué)資源的分析上，應(yīng)該以系統(tǒng)的觀點(diǎn)，從過程的角度分析網(wǎng)絡(luò)課程的活動(dòng)和實(shí)施過程，也就是對(duì)網(wǎng)絡(luò)課程的教學(xué)過程進(jìn)行分析，使之符合學(xué)習(xí)規(guī)律，體現(xiàn)教學(xué)活動(dòng)過程，具有遠(yuǎn)程性、交互性、共享性、適應(yīng)性和時(shí)效性等基本特征，能夠促進(jìn)學(xué)生的有效學(xué)習(xí)。第2章 精品課程網(wǎng)站需求分析2.1 精品課程網(wǎng)站的建設(shè)可以響應(yīng)國(guó)家的號(hào)召，它的最終目的是提高教學(xué)質(zhì)量。精品課程建設(shè)工程的適時(shí)推出，不僅具有極強(qiáng)的針對(duì)性，還是一個(gè)具有戰(zhàn)略意義的重大舉措。

28、它是一項(xiàng)以點(diǎn)帶面的改革，即以精品課程建設(shè)為突破點(diǎn)，著力打造一批具有時(shí)代特征的高水平課程；以整體教學(xué)內(nèi)容改革為面，推進(jìn)高校教學(xué)質(zhì)量的全面提升。我系為了更好的辦學(xué)，提高系里面計(jì)算機(jī)圖形學(xué)的知名度，為老師和學(xué)生提供一個(gè)友誼的橋梁，增加同學(xué)們對(duì)計(jì)算機(jī)圖形學(xué)的了解，建構(gòu)計(jì)算機(jī)圖形學(xué)精品課程網(wǎng)站。計(jì)算機(jī)圖形學(xué)知識(shí)是純理論的知識(shí)，如果通過傳統(tǒng)的老師在課堂上授課的方式來講授圖形學(xué)知識(shí)，就會(huì)很枯燥，可能會(huì)達(dá)不到預(yù)想的授課的效果。現(xiàn)在通過建設(shè)計(jì)算機(jī)圖形學(xué)網(wǎng)站，就可以解決枯燥乏味的問題。并且，在網(wǎng)站上有生動(dòng)的圖形演示、flash動(dòng)畫、師生在線交流、教學(xué)課件等。與傳統(tǒng)的教室授課方式相比，網(wǎng)絡(luò)教學(xué)更具有優(yōu)勢(shì)。尤其是在計(jì)

29、算機(jī)較難較抽象的理論知識(shí)的講解方面。傳統(tǒng)的授課方式比較直白、枯燥，難于理解。而通過網(wǎng)絡(luò)教學(xué)可以很大程度的上的解決這方面的問題，并且還有自己本身的優(yōu)點(diǎn)。網(wǎng)絡(luò)教學(xué)可以通過實(shí)例圖片、視頻等多媒體材料，展示豐富的效果，來增加講解理論知識(shí)的生動(dòng)性，讓學(xué)習(xí)者更直觀的學(xué)習(xí)知識(shí)，更容易理解和掌握知識(shí)。通過網(wǎng)站進(jìn)行網(wǎng)絡(luò)教學(xué)，還可以通過在線交流，在線問答等方式增加學(xué)習(xí)知識(shí)時(shí)的互動(dòng)性，也可以及時(shí)解決遇到的問題，當(dāng)然了，這些交流不只是限于學(xué)生和老師之間。此外，網(wǎng)站還可以提供教學(xué)課件、教學(xué)錄像下載。另外一個(gè)優(yōu)點(diǎn)是：理論上網(wǎng)絡(luò)教學(xué)不受地域限制。計(jì)算機(jī)圖形學(xué)精品課程的基本任務(wù)是在計(jì)算機(jī)圖形學(xué)基本原則指導(dǎo)下，建立方便的在線瀏

30、覽計(jì)算機(jī)圖形學(xué)方面的知識(shí)和在線管理一些圖形學(xué)方面的科學(xué)資料，通過師生互動(dòng)環(huán)節(jié)提高學(xué)生計(jì)算機(jī)圖形學(xué)方面的專業(yè)知識(shí)。積極開發(fā)科技信息資源，及時(shí)、有效地提供圖形學(xué)方面的分享和利用,給各個(gè)科研部門提供一個(gè)標(biāo)準(zhǔn)化的、規(guī)范化、網(wǎng)絡(luò)化的科研成果信息交流的平臺(tái)。高度利用科研成果，提高我國(guó)的科技發(fā)展。根據(jù)可行性研究的結(jié)果，分析現(xiàn)有情況和問題，針對(duì)在校老師和學(xué)生的需求，決定采用b/s層次結(jié)構(gòu)，將計(jì)算機(jī)圖形學(xué)系統(tǒng)分為兩個(gè)子系統(tǒng)，即在線計(jì)算機(jī)圖形學(xué)知識(shí)瀏覽系統(tǒng)和師生互動(dòng)系統(tǒng)。其中，在線計(jì)算機(jī)圖形學(xué)知識(shí)瀏覽子系統(tǒng)的功能是給學(xué)生提供一些關(guān)于計(jì)算機(jī)圖形學(xué)發(fā)面的技術(shù)支持及一些圖形學(xué)方面的文檔和視頻供學(xué)生下載及學(xué)習(xí)，他以網(wǎng)站形

31、式體現(xiàn)，主要實(shí)現(xiàn)計(jì)算機(jī)圖形學(xué)師資隊(duì)伍概況的介紹、計(jì)算機(jī)圖形方面的課程描述和一些關(guān)于圖形學(xué)方面的科技文章及視頻資源，學(xué)生進(jìn)入網(wǎng)站后可以根據(jù)自己的需要很方便的從網(wǎng)站導(dǎo)航處訪問到。師生互動(dòng)是采用論壇的形式實(shí)現(xiàn)師生間的交流的。系統(tǒng)的功能是通過計(jì)算機(jī)網(wǎng)絡(luò)將客戶端與服務(wù)器數(shù)據(jù)庫相連，學(xué)生通過在線提出問題，老師在線回答問題或在線提供一些關(guān)于圖形學(xué)方面的資料。第3章 精品課程網(wǎng)站設(shè)計(jì)3.1 精品課程網(wǎng)站總體設(shè)計(jì)3.1.1 網(wǎng)站建設(shè)流程設(shè)計(jì)根據(jù)需求分析，計(jì)算機(jī)圖形學(xué)精品課程網(wǎng)站可以分為：師資信息、在線計(jì)算機(jī)圖形學(xué)知識(shí)瀏覽和師生互動(dòng)兩個(gè)功能模塊。當(dāng)學(xué)生打開網(wǎng)站首頁時(shí)就可以瀏覽師資信息、計(jì)算機(jī)圖形學(xué)知識(shí)的瀏覽。當(dāng)?shù)?/p>

32、錄到師生互動(dòng)的論壇時(shí)，就可以提出自己的問題，或解答別人提出的問題。退出時(shí)會(huì)進(jìn)入論壇首頁。網(wǎng)站流程圖如下圖：師資隊(duì)伍課程描述教學(xué)資源師生交流試驗(yàn)教學(xué)成果展示在線考試網(wǎng)站首頁課程負(fù)責(zé)人課程組成人員教學(xué)大綱教學(xué)課件教學(xué)視頻在線教學(xué)在線交流教學(xué)答疑科研成果習(xí)題選編在線考試學(xué)生設(shè)計(jì)試驗(yàn)大綱試驗(yàn)指導(dǎo)算法演示圖3-1 網(wǎng)站主流程圖由于在線交流業(yè)務(wù)邏輯比較復(fù)雜，為了對(duì)其進(jìn)行詳細(xì)說明，因此將其提取進(jìn)行詳細(xì)描述，如下圖所示：在線交流論壇首頁登錄論壇用戶信息驗(yàn)證論壇會(huì)員用戶注冊(cè)解答問題管理問題發(fā)布問題會(huì)員中心會(huì)員問題管理問題解答管理會(huì)員管理論壇管理個(gè)人信息管理操作數(shù)據(jù)庫access退出論壇用戶類型是否是否普通會(huì)員管

33、理員信息驗(yàn)證成功失敗圖 3-2 在線互動(dòng)論壇流程圖3.1.2 網(wǎng)站建設(shè)選用的編程語言本站選用的編程語言是asp。asp 為activeserverpags(動(dòng)態(tài)服務(wù)器頁面)的簡(jiǎn)稱。active server pages主要就是scipts腳本環(huán)境，主要結(jié)合的是vbscript腳本。它是microsoft公司推出的用于web應(yīng)用開發(fā)的一種編程技術(shù)。因其簡(jiǎn)單的語法和嵌入html的編輯方法在很短的時(shí)間內(nèi)便取得了巨大的成功，成為windows平臺(tái)上web開發(fā)技術(shù)的霸主，在當(dāng)時(shí)地位難以動(dòng)搖。雖然asp技術(shù)取得了極大的成功，但是隨著php，jsp的技術(shù)的出現(xiàn)，asp的王者地位受到了嚴(yán)峻的挑戰(zhàn)。asp的開發(fā)

34、、維護(hù)快速簡(jiǎn)便，編程語言通用，多種功能強(qiáng)大的內(nèi)置對(duì)象和組件，而且與瀏覽器無關(guān)性，加上iis的功能支持，是比較簡(jiǎn)易快速的開發(fā)技術(shù)。3.1.3 網(wǎng)站建設(shè)開發(fā)工具本站選用的開發(fā)工具為dreamweaver。dreamweaver是一款有著多年歷史和良好口碑的可視化網(wǎng)頁編輯工具（簡(jiǎn)稱dw），他最大的優(yōu)點(diǎn)就是所見即所得，對(duì)w3c網(wǎng)頁標(biāo)準(zhǔn)化支持十分到位，同時(shí)它還支持網(wǎng)站管理，包含html檢查、html格式控制、html格式化選項(xiàng)、homesite/bbedit捆綁、圖像編輯、全局查找替換、全ftp功能、處理flash和shockwave等富媒體格式和動(dòng)態(tài)html，而且還支持asp、jsp、php、asp.

35、net、xml等程序語言的編寫與調(diào)試。dreamweaver 有三種視圖模式，即代碼、拆分、設(shè)計(jì)三種模式。1) 代碼視圖模式 該模式是全代碼視圖，在工作區(qū)域里是正在編輯文件的全部代碼。2) 拆分視圖模式 該模式是代碼和設(shè)計(jì)視圖的綜合。在工組區(qū)域的上部分是代碼顯示部分，下部分是設(shè)計(jì)視圖部分，在下部分一個(gè)元素，上部分會(huì)自動(dòng)轉(zhuǎn)到相應(yīng)的代碼部分。3) 設(shè)計(jì)視圖模式 該模式可以在工組區(qū)域里進(jìn)行布局設(shè)計(jì)，通過工具條里的工具，即可設(shè)計(jì)出自己想要的web頁面。所見即所得。很方便，不過冗余代碼比較多。3.1.4 網(wǎng)站建設(shè)使用服務(wù)器本站選用的服務(wù)器是microsoft公司的iis。internet informa

36、tion server（iis）是windows nt 提供的internet服務(wù)的核心。微軟有大批的產(chǎn)品是為internet連接而設(shè)計(jì)的。實(shí)際上可用的軟件很多很多，以至于很難選擇。internet information server 是一個(gè)在internet 上提供信息發(fā)布功能的軟件。微軟公司也有為個(gè)人發(fā)布信息的工具例如，personal web server ，但是internet information server微軟為企業(yè)和部門發(fā)布信息而設(shè)計(jì)的。 iis這個(gè)軟件是用來運(yùn)行大型的站點(diǎn)，例如，, , 和。iis現(xiàn)在

37、已經(jīng)是第六版了。iis 1.0在1995，但是iis3.0直到1996年夏天才正式推出。微軟在1997年夏天推出了iis4.0 的beta版。 在iis4.0中，微軟推出了許多新特征。確切地說，iis4.0使internet成為了一個(gè)正規(guī)的應(yīng)用程序開發(fā)環(huán)境。 許多基于iis4.0的應(yīng)用程序， 核心由c編寫，然后用vbscipts連接起來。 現(xiàn)在的開發(fā)者仍然使用iis3.0介紹的老的vbscipts和html的混合編程，iis4.0的這些新特征會(huì)使他們收益不少。3.1.5 網(wǎng)站建設(shè)使用技術(shù)1div+cssdiv即通常在網(wǎng)頁制作領(lǐng)域里所說的層。它是用來為html文檔內(nèi)大塊 (block-level

38、) 的內(nèi)容提供結(jié)構(gòu)和背景的元素。div的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的特性由div標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。傳統(tǒng)的網(wǎng)頁布局是基于table的布局方式，但近些年來，css+div的構(gòu)架方式已經(jīng)幾乎取代了傳統(tǒng)的方式。傳統(tǒng)table布局方式實(shí)際上是利用了html table表格元素具有的無邊框特性，由于table元素可以在顯示時(shí)使得單元格的邊框和間距為0，即不顯示邊框，因此可以將網(wǎng)頁中的各個(gè)元素按版式劃分放入表格的各個(gè)單元格中，從而實(shí)現(xiàn)復(fù)雜的排版組合。 css是cascading style sheets(層疊樣式表)的簡(jiǎn)稱

39、。css語言是一種標(biāo)記語言，它不需要編譯，可以直接由瀏覽器執(zhí)行 (屬于瀏覽器解釋型語言)。css是有w3c (world wide web consortium，萬維網(wǎng)聯(lián)盟) 的css工作組定制和維護(hù)的。通過css，可以將使用html (即超文本標(biāo)記語言)創(chuàng)建的網(wǎng)頁上顯示的文本與用于描述如何顯示和表示該文本 (使用css進(jìn)行定義) 的信息完全分隔開。css旨在解決問題并可幫助節(jié)省時(shí)間，同時(shí)它還可以讓css編寫者以更多的方式設(shè)計(jì)網(wǎng)頁外觀。通過css，可以對(duì)整個(gè)網(wǎng)頁頁面設(shè)置樣式屬性，例如：字體的大小、顏色、鏈接的樣式等；還可以對(duì)單個(gè)的html標(biāo)簽設(shè)置樣式屬性，例如：對(duì)頁面內(nèi)的某個(gè)段落設(shè)置字間距、行

40、間距、字體顏色等。通過修改部分css就可以達(dá)到修改整個(gè)頁面或是其中某個(gè)部分的樣式的目的，從而提高工作效率。在本站中，使用了css定義了字體的大小、頁面布局等。如下css代碼所示：bodyfont-family: 微軟雅黑, /*定義字體*/backgound: #f9f9f9; /*定義頁面背景顏色*/font-size: 12px; /*定義字體大小*/ div+css的構(gòu)架方式從總體上而言： 1)、符合w3c標(biāo)準(zhǔn)。微軟等公司均為w3c支持者。這一點(diǎn)是最重要的，因?yàn)檫@保證您的網(wǎng)站不會(huì)因?yàn)閷砭W(wǎng)絡(luò)應(yīng)用的升級(jí)而被淘汰。 2)、支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是ie7或者是

41、火狐，您的網(wǎng)站都能很好的兼容。 3)、搜索引擎更加友好。相對(duì)與傳統(tǒng)的table, 采用div+css技術(shù)的網(wǎng)頁，對(duì)于搜索引擎的收錄更加友好。4)、樣式的調(diào)整更加方便。內(nèi)容和樣式的分離，使頁面和樣式的調(diào)整變得更加方便?，F(xiàn)在yahoo,msn等國(guó)際門戶網(wǎng)站，網(wǎng)易，新浪等國(guó)內(nèi)門戶網(wǎng)站，和主流的web2.0網(wǎng)站，均采用div+css的框架模式，更加印證了 div+css是大勢(shì)所趨。5)、css的極大優(yōu)勢(shì)表現(xiàn)在簡(jiǎn)潔的代碼，對(duì)于一個(gè)大型網(wǎng)站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。div+css布局比table布局節(jié)省頁面代碼，代碼結(jié)構(gòu)也更清晰明了。6)、div+css布局使網(wǎng)站版面布

42、局修改變的更簡(jiǎn)單,因?yàn)榘婷娲a都寫在獨(dú)立的css文件里修改起來方便多了,不象table要在頁面中修改很多信息。表現(xiàn)和結(jié)構(gòu)分離，在團(tuán)隊(duì)開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。2javascriptjavascript是一種基于對(duì)象(object)和事件驅(qū)動(dòng)(event driven)并具有安全性能的腳本語言。使用它的目的是與html超文本標(biāo)記語言、java 腳本語言（java小程序）一起實(shí)現(xiàn)在一個(gè)web頁面中鏈接多個(gè)對(duì)象，與web客戶交互作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的html語言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了html語言的缺陷，它是java與html折衷的選擇，具有以下

43、幾個(gè)基本特點(diǎn)：1) 腳本編寫語言javascript是一種腳本語言，它采用小程序段的方式實(shí)現(xiàn)編程。像其它腳本語言一樣,javascript同樣已是一種解釋性語言，它提供了一個(gè)易的開發(fā)過程。它的基本結(jié)構(gòu)形式與c、c+、vb、delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運(yùn)行過程中被逐行地解釋。它與html標(biāo)識(shí)結(jié)合在一起，從而方便用戶的使用操作。 2) 基于對(duì)象的語言javascript是一種基于對(duì)象的語言，同時(shí)可以看作一種面向?qū)ο蟮摹＿@意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對(duì)象。因此，許多功能可以來自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用。2) 簡(jiǎn)單性javascript的簡(jiǎn)單性主要體

44、現(xiàn)在：首先它是一種基于java基本語句和控制流之上的簡(jiǎn)單而緊湊的設(shè)計(jì), 從而對(duì)于學(xué)習(xí)java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。 3) 安全性javascript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。 4) 動(dòng)態(tài)性javascript是動(dòng)態(tài)的，它可以直接對(duì)用戶或客戶輸入做出響應(yīng)，無須經(jīng)過web服務(wù)程序。它對(duì)用戶的反映響應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng)，就是指在主頁(home page)中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作，就

45、稱為“事件”(event)。比如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會(huì)引起相應(yīng)的事件響應(yīng)。 5) 跨平臺(tái)性javascript是依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持javascript的瀏覽器就可正確執(zhí)行。從而實(shí)現(xiàn)了“編寫一次，走遍天下”的夢(mèng)想。綜合所述javascript 是一種新的描述語言，它可以被箝入到 html 的文件之中。 javascript語言可以做到回應(yīng)使用者的需求事件 (如： form 的輸入) ，而不用任何的網(wǎng)路來回傳輸資料，所以當(dāng)一位使用者輸入一項(xiàng)資料時(shí)，它不用經(jīng)過傳給伺服端 (server)處理，再傳回來的過程，

46、而直接可以被客戶端 (client) 的應(yīng)用程式所處理。javascript可以通過以下兩種方式應(yīng)用到網(wǎng)頁中：1) 直接加入html文檔這是最常用的方法，大部分含有javascript的網(wǎng)頁都采用這種方法，如：在這個(gè)例子中，我們可看到一個(gè)新的標(biāo)簽：，而 用來告訴瀏覽器這是用javascript編寫的程序，需要調(diào)動(dòng)相應(yīng)的解釋程序進(jìn)行解釋。（w3c已經(jīng)建議使用新的標(biāo)準(zhǔn)：)html的注釋標(biāo)簽：用來去掉瀏覽器所不能識(shí)別的javascript源代碼的，這對(duì)不支持 javascript 語言的瀏覽器來說是很有用的。/-javascript結(jié)束：雙斜杠表示 javascript的注釋部分，即從/開始到行尾的

47、字符都被忽略。至于程序中所用到的documentwrite（）函數(shù)則表示將括號(hào)中的文字輸出到窗口中去。另外一點(diǎn)需要注意的是，的位置并不是固定的，可以包含在. 或.中的任何地方。還有一個(gè)更高級(jí)版本的嵌入腳本，它使用了html中的cdata語法（character data，就是把cdata中的文本全部當(dāng)作純文本處理，除非遇到cdata的結(jié)束）。2) 引用方式如果已經(jīng)存在一個(gè)javascript源文件（以js為擴(kuò)展名），則可以采用這種引用的方式，以提高程序代碼的利用率。其基本格式如下：其中的url就是程序文件的地址。同樣的，這樣的語句可以放在html文檔頭部或主體的任何部分。 如果要實(shí)現(xiàn)“直接插入

48、方式”中所舉例子的效果，可以首先創(chuàng)建一個(gè)javascript源代碼文件“script.js”，其內(nèi)容如下：document.writeln(這是javascript！采用直接插入的方法！);在網(wǎng)頁中可以這樣調(diào)用程序： 也可以同時(shí)在導(dǎo)入文件時(shí)制定javascript的版本，例如：3.2 精品課程網(wǎng)站詳細(xì)設(shè)計(jì)3.2.1 網(wǎng)站模塊劃分及設(shè)計(jì)根據(jù)需求分析，可以將該網(wǎng)站按功能化分為：內(nèi)容介紹型模塊和在線互動(dòng)型模塊兩大模塊。1內(nèi)容介紹性模塊該模塊主要是介紹網(wǎng)站的靜態(tài)信息。主要包括：師資隊(duì)伍、課程介紹、在線教學(xué)的內(nèi)容等。師資隊(duì)伍是介紹的教師的基本信息等內(nèi)容。主要使用的table表格，其中也包括教師的照片信息

49、。課程介紹的內(nèi)容是關(guān)于計(jì)算機(jī)圖形學(xué)的內(nèi)容介紹。在線教學(xué)的內(nèi)容是計(jì)算機(jī)圖形學(xué)的理論知識(shí)和圖形示例的綜合。其中使用了html的框架frameset，使用了javascript來動(dòng)態(tài)調(diào)用內(nèi)容頁面，實(shí)現(xiàn)在線教學(xué)的功能。在線教學(xué)效果圖如下圖所示：圖 3-3 在線教學(xué)頁面縮略圖2在線互動(dòng)性模塊此模塊的主要功能是實(shí)現(xiàn)在線的考試、提問、回答等具有互動(dòng)的環(huán)節(jié)。在線考試是通過javascript調(diào)用頁面來實(shí)現(xiàn)的。在線提問或回答是通過內(nèi)含的學(xué)習(xí)論壇（bbs）實(shí)現(xiàn)的。學(xué)生通過登錄到論壇可以提出自己的問題，等待老師或其他學(xué)生的回答，也可以回答他人的問題。界面如下圖：圖 3-4 在線交流論壇縮略圖3.2.1 網(wǎng)站主頁設(shè)計(jì)

50、一個(gè)網(wǎng)站是否能吸引住人，和主頁的設(shè)計(jì)關(guān)系相當(dāng)?shù)拿芮?，主頁上的每一部分可以說在設(shè)計(jì)中都是很重要的，一個(gè)網(wǎng)站不僅要從美觀上能給人以吸引的感覺，還要有內(nèi)容上的吸引，華而不實(shí)的網(wǎng)站是不能得到好的評(píng)價(jià)的，相反，雖然內(nèi)容好特別的豐富但界面不好，瀏覽者進(jìn)入的時(shí)候都沒興趣往下繼續(xù)瀏覽，顯然也不是我們?cè)O(shè)計(jì)網(wǎng)頁時(shí)所追求的。網(wǎng)頁設(shè)計(jì)要注意下面幾點(diǎn)：1. 關(guān)鍵字：關(guān)鍵字對(duì)網(wǎng)站來說都是至關(guān)重要的，很多網(wǎng)站的流量也是來至于這些關(guān)鍵字搜索。一個(gè)網(wǎng)站關(guān)鍵字的設(shè)置在很大程度上決定了這個(gè)站排名和流量。首頁的關(guān)鍵字設(shè)計(jì)更是重要，應(yīng)該是主要關(guān)鍵字加長(zhǎng)尾關(guān)鍵字，title description keywords三包含原則。關(guān)鍵字的布

51、局，首頁關(guān)鍵字采用主關(guān)鍵字其他的則因分布各個(gè)欄目和其他頁面，比如，把首頁關(guān)鍵字寫做“精品課程”這一個(gè)詞，而像其他“計(jì)算機(jī)圖形學(xué)”等關(guān)鍵字則分布到其他頁面或是二級(jí)目錄里。2. 代碼設(shè)計(jì)：網(wǎng)站首頁代碼采用div+css設(shè)計(jì)，這樣做的目的是網(wǎng)頁改版方便，代碼比較簡(jiǎn)潔，對(duì)搜索引擎友好。另外一個(gè)主要因素也就是采用div+css設(shè)計(jì)的首頁在添加首頁廣告時(shí)就變得簡(jiǎn)單，既不破壞機(jī)構(gòu)又比較方便，主要目的不破壞頁面的效果，這一點(diǎn)相信很多用table做首頁設(shè)計(jì)的站長(zhǎng)都深有體會(huì)，想在首頁加些廣告卻發(fā)現(xiàn)加上去之后整個(gè)頁面都發(fā)生了變化。3. 導(dǎo)航設(shè)計(jì)：導(dǎo)航的設(shè)計(jì)，好的網(wǎng)站導(dǎo)航不但可以讓用戶方便的到達(dá)網(wǎng)站的主要頁面，而且方

52、便搜索引擎對(duì)網(wǎng)站的收錄以及其他頁面的權(quán)重。在設(shè)計(jì)導(dǎo)航時(shí)盡量少使用圖片導(dǎo)航，少使用js下拉菜單或是其他特效導(dǎo)航。使用div+css在背景圖片的形式再結(jié)合網(wǎng)站整體效果也可以設(shè)計(jì)出好看實(shí)用的導(dǎo)航。4. 首頁樣式結(jié)構(gòu)：網(wǎng)站的結(jié)構(gòu)這里我用的是三列式的布局方式。這種方式比較簡(jiǎn)潔大方，可以讓用戶更方面更直觀的瀏覽頁面信息。5. 用戶友好性:一個(gè)網(wǎng)站能帶來多少客戶是網(wǎng)站優(yōu)化和推廣產(chǎn)生的效果，可最終能帶來多少的忠實(shí)用戶靠的就是網(wǎng)站對(duì)用戶的黏性和友好性。再結(jié)合網(wǎng)站結(jié)構(gòu)模型把用戶最需要的東西很方便的呈現(xiàn)，在細(xì)節(jié)上做到細(xì)致入微。結(jié)合以上幾點(diǎn)內(nèi)容，我設(shè)計(jì)的首頁如下圖所示：圖 計(jì)算機(jī)圖形學(xué)精品課程網(wǎng)站首頁從該圖可以明顯看

53、出三列式的布局方式。最上部是頭部，包括一個(gè)flash和橫向下拉式導(dǎo)航，以及當(dāng)前日期的顯示。下部是版權(quán)信息。中間的部分分成豎向三列。最左側(cè)是網(wǎng)站的快速導(dǎo)航，也是使用頻率最大的導(dǎo)航，它的下部是用javascript來實(shí)現(xiàn)的圖片切換效果，圖片是涉及計(jì)算機(jī)圖形學(xué)領(lǐng)域的圖片。中部是“計(jì)算機(jī)圖形學(xué)的簡(jiǎn)介”。右側(cè)的頂部是計(jì)算機(jī)圖形學(xué)教材的縮略圖。下部是從下向上滾動(dòng)的關(guān)于計(jì)算機(jī)圖形學(xué)教師的部分信息簡(jiǎn)介。該頁面的結(jié)構(gòu)布局全部采用div+css布局，摒棄了原先用表格布局的不方便性，用層布局你可以任意的控制頁面的結(jié)構(gòu)和各方面的元素，使各方面的元素很容易的適合你的構(gòu)想的那種布局。字體和結(jié)構(gòu)統(tǒng)一用css控制，當(dāng)需要修改

54、的時(shí)候可以直接對(duì)css樣式表進(jìn)行修改，而不用像以前用表格布局時(shí)那樣在本頁面里修改，實(shí)現(xiàn)了結(jié)構(gòu)和樣式的分離，更適合最新的web. 2.0要求，而且這種好處在做大型系統(tǒng)時(shí)可以明確的分工，使各部門各做各的，減少了個(gè)部門之間的影響。3.2.2 網(wǎng)站子頁設(shè)計(jì)該網(wǎng)站的內(nèi)容頁采用的是t型的網(wǎng)頁頁面設(shè)計(jì)。同樣也是采用了div+css結(jié)構(gòu)。頭部和首頁的頭部一樣。中間分為左中兩個(gè)部分。左側(cè)是一個(gè)欄目的小導(dǎo)航，右側(cè)是內(nèi)容的顯示區(qū)域。底部和首頁的底部一樣，也是版權(quán)信息。如下圖所示：圖4.2 內(nèi)容頁頁面瀏覽左側(cè)是子欄目的導(dǎo)航，有css+div代碼實(shí)現(xiàn)，效果是顏色邊框變化效果。右側(cè)是內(nèi)容的顯示區(qū)域，有css+table實(shí)現(xiàn)。因?yàn)榭紤]到內(nèi)容多以表格的形式表現(xiàn)，所以選擇table來實(shí)現(xiàn)，這樣比較容易、明了的表現(xiàn)內(nèi)容。 第4章 精品課程網(wǎng)站具體功能代碼實(shí)現(xiàn)4.1 網(wǎng)站子頁左側(cè)導(dǎo)航內(nèi)容頁左側(cè)導(dǎo)航是用css作出的效果，如下圖所示：圖4-1 內(nèi)容頁左側(cè)導(dǎo)航默認(rèn)的效果是：圖 4-2 導(dǎo)航默認(rèn)效果圖當(dāng)鼠標(biāo)移動(dòng)到他上