1、<p><b>　　本科畢業(yè)設(shè)計(jì)</b></p><p><b>　?。?012屆）</b></p><p><b>　　摘 要</b></p><p>　　隨著全球信息化網(wǎng)路化的大潮，計(jì)算機(jī)逐步滲透到教育領(lǐng)域，以多媒體為主導(dǎo)的現(xiàn)代教學(xué)模式逐漸取代了傳統(tǒng)的"教師---黑板---教

2、科書---學(xué)生"的教學(xué)模式，其教學(xué)內(nèi)容集文字、圖像、聲音、動(dòng)畫、影視為一體，比傳統(tǒng)的教科書形象生動(dòng)，更能激發(fā)學(xué)生的學(xué)習(xí)樂趣。伴隨著互聯(lián)網(wǎng)的普及，愈來愈多的人開始利用互聯(lián)網(wǎng)學(xué)習(xí)，尤其是學(xué)生，對(duì)于互聯(lián)網(wǎng)更是情有獨(dú)鐘。同時(shí)，隨著數(shù)碼產(chǎn)品的更新?lián)Q代，愈來愈多的人擁有自己的攝影機(jī)，越來越多的人喜歡拍攝身邊的點(diǎn)點(diǎn)滴滴，但是他們卻并不一定擁有相對(duì)的攝影知識(shí)，未必能拍攝出自己滿意的作品。對(duì)于這樣的一種現(xiàn)狀，制作一個(gè)網(wǎng)頁(yè)形式的攝影課程CAI軟件

3、就顯得非常重要了，它不僅能滿足學(xué)生的學(xué)習(xí)需求，同時(shí)也能讓不是學(xué)生的攝影愛好者能學(xué)習(xí)到基礎(chǔ)的攝影知識(shí)。</p><p>　　本設(shè)計(jì)采用Dreamwear為主要設(shè)計(jì)工具，同時(shí)加入Javascript腳本語言，以及級(jí)聯(lián)樣式表（簡(jiǎn)稱CSS）排版模式，使網(wǎng)頁(yè)呈現(xiàn)出不同的靜態(tài)動(dòng)態(tài)效果，避免枯燥單調(diào)。同時(shí)插入Flash制作的swf格式視頻，以及PhotoShop處理后的圖片，使整個(gè)網(wǎng)頁(yè)內(nèi)容充實(shí)而且生動(dòng)活潑。</p>

4、<p>　　關(guān)鍵詞：Javascript；CSS；攝影；課程；網(wǎng)頁(yè)；</p><p><b>　　Abstract</b></p><p>　　As the tide of the global information network, the computer gradually penetrate into the field of educatio

5、n, multimedia-oriented teaching mode gradually replaced the teaching mode of traditional "teachers –blackboard--textbook --students", the teaching content of text, images, sound, animation, film and television

6、as a whole, which is more vivid than the traditional textbook image and can stimulate students' learning fun. With the development of the Internet, people more and more attention to th</p><p>　　This desi

7、gn uses Dreamwear as the main design tool, while adding the Javascript scripting language, as well as the CSS layout mode, the page shows the different static and dynamic effects, to avoid boring and monotonous. Meanwhil

8、e, it insert the video of swf format made by Flash, as well as the images dealed with by the Photoshop, which make the whole web content enrich and lively.</p><p>　　Key words: Javascript；CSS；photography；cour

9、se；web；</p><p><b>　　目錄</b></p><p><b>　　1 引言1</b></p><p><b>　　2 概論2</b></p><p>　　2.1 計(jì)算機(jī)輔助教學(xué)CAI2</p><p>　　2.2 多媒體

10、課件概述2</p><p>　　2.3 多媒體課件的五個(gè)特性3</p><p>　　2.4 多媒體課件制作工具4</p><p>　　2.5 本設(shè)計(jì)軟件制作工具6</p><p><b>　　3 總體設(shè)計(jì)8</b></p><p>　　3.1 跳轉(zhuǎn)頁(yè)面設(shè)計(jì)8</p>

11、;<p>　　3.2 主頁(yè)設(shè)計(jì)8</p><p>　　3.3 知識(shí)詳解頁(yè)面設(shè)計(jì)9</p><p>　　3.4 簡(jiǎn)單測(cè)試頁(yè)面設(shè)計(jì)9</p><p>　　3.5 作品展示頁(yè)面設(shè)計(jì)9</p><p>　　3.6 簡(jiǎn)單模擬頁(yè)面設(shè)計(jì)9</p><p>　　3.7 友情鏈接頁(yè)面設(shè)計(jì)9<

12、/p><p>　　4 具體實(shí)現(xiàn)10</p><p>　　4.1 跳轉(zhuǎn)頁(yè)面實(shí)現(xiàn)10</p><p>　　4.2 首頁(yè)實(shí)現(xiàn)11</p><p>　　4.3 知識(shí)詳解頁(yè)面實(shí)現(xiàn)11</p><p>　　4.4 簡(jiǎn)單測(cè)試頁(yè)面實(shí)現(xiàn)14</p><p>　　4.5 作品展示頁(yè)面實(shí)現(xiàn)15&l

13、t;/p><p>　　4.6 簡(jiǎn)單模擬頁(yè)面實(shí)現(xiàn)17</p><p>　　4.7 友情鏈接頁(yè)面實(shí)現(xiàn)18</p><p>　　5 軟件測(cè)試20</p><p>　　5.1 測(cè)試的目的20</p><p>　　5.2 本設(shè)計(jì)測(cè)試20</p><p><b>　　6 結(jié)論21

14、</b></p><p><b>　　致謝22</b></p><p><b>　　參考文獻(xiàn)23</b></p><p><b>　　1 引言</b></p><p>　　隨著時(shí)代的進(jìn)步，電子信息技術(shù)飛速發(fā)展，計(jì)算機(jī)的應(yīng)用已經(jīng)遍及到各行各業(yè)，教育領(lǐng)域也不例外。

15、世界各國(guó)都高度重視電子信息技術(shù)對(duì)教育的影響，推出一系列政策和舉措加快教育領(lǐng)域的信息化步伐。我國(guó)信息化教育發(fā)展也初具規(guī)模。我國(guó)的現(xiàn)代教育正逐步擺脫傳統(tǒng)的"教師---黑板---教科書---學(xué)生"的教學(xué)模式，提出大力發(fā)展素質(zhì)教育，提倡培養(yǎng)學(xué)生的積極主動(dòng)性，創(chuàng)新能力及自主學(xué)習(xí)的能力。目前，我國(guó)無論大學(xué)，中學(xué)，還是小學(xué)，計(jì)算機(jī)輔助教學(xué)的應(yīng)用越來越多,于傳統(tǒng)教學(xué)模式相比，計(jì)算機(jī)輔助教學(xué)綜合應(yīng)用多媒體、超文本、人工智能和知識(shí)庫(kù)等計(jì)

16、算機(jī)技術(shù)，克服了傳統(tǒng)教學(xué)方式單一、片面的缺點(diǎn)。它的使用有效地縮短了學(xué)習(xí)時(shí)間、提高了教學(xué)質(zhì)量和教學(xué)效率，實(shí)現(xiàn)了最優(yōu)化的教學(xué)目標(biāo)。所以受到了廣大師生的一致認(rèn)可和好評(píng)。正是基于這樣的一種發(fā)展現(xiàn)狀，計(jì)算機(jī)輔助教學(xué)在教育領(lǐng)域的作用越來越大，計(jì)算機(jī)輔助教學(xué)軟件開發(fā)也隨之水漲船高。</p><p>　　同時(shí)，隨著互聯(lián)網(wǎng)的高速發(fā)展，越來越多的人接觸并使用互聯(lián)網(wǎng)。中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）2012年1月在京發(fā)布《第29次中

17、國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》顯示，截至2011年12月底，中國(guó)網(wǎng)民規(guī)模突破5億。尤其是學(xué)生，都或多或少會(huì)通過互聯(lián)網(wǎng)學(xué)習(xí)。</p><p>　　攝影，像繪畫與速寫一樣表現(xiàn)著世界?，F(xiàn)在攝影已不是攝影大師的專利，已經(jīng)成為一種時(shí)尚，不管走到哪里，都能看見很多人拿著手機(jī)、照相機(jī)拍攝風(fēng)景、人物、以及一切他們所喜歡的事物。能這樣記錄生活中的點(diǎn)點(diǎn)滴滴是好事，是熱愛生活的表現(xiàn)。但是很多人缺乏攝影的相關(guān)知識(shí)，不能更好的表現(xiàn)被拍攝事物

18、的本質(zhì)，所以攝影知識(shí)的普及就迫在眉睫。</p><p>　　雖然網(wǎng)上也有很多的攝影相關(guān)網(wǎng)站，但是對(duì)于教學(xué)基礎(chǔ)攝影知識(shí)這塊還是有所欠缺。正是基于以上情況，本設(shè)計(jì)攝影課程CAI軟件開發(fā)采用網(wǎng)頁(yè)的形式實(shí)現(xiàn)。無論是學(xué)生，還是攝影愛好者，都能通過互聯(lián)網(wǎng)訪問它。</p><p>　　本設(shè)計(jì)將原本抽象的概念具體化，知識(shí)詳解課堂以文字結(jié)合圖片的方式栩栩如生的向?qū)W生講訴了攝影基礎(chǔ)知識(shí)及攝影技巧。簡(jiǎn)單測(cè)試能讓

19、學(xué)生強(qiáng)化自己所學(xué)的知識(shí)，而拍照模擬則能使學(xué)生在課堂內(nèi)就有拍攝的感覺，提升學(xué)生的興趣，作品欣賞又能吸引學(xué)生的注意力，培養(yǎng)學(xué)生的審美。本設(shè)計(jì)的宗旨是使學(xué)生能更好，更有效地去學(xué)習(xí)，從而提升教學(xué)效率，提高教學(xué)質(zhì)量。</p><p><b>　　2 概論</b></p><p>　　2.1 計(jì)算機(jī)輔助教學(xué)CAI</p><p>　　計(jì)算機(jī)輔助教學(xué)(C

20、omputer Aided Instruction ，簡(jiǎn)稱CAI)是在計(jì)算機(jī)輔助下進(jìn)行的各種教學(xué)活動(dòng)，以對(duì)話方式與學(xué)生討論教學(xué)內(nèi)容、安排教學(xué)進(jìn)程、進(jìn)行教學(xué)訓(xùn)練的方法與技術(shù)。CAI為學(xué)生提供一個(gè)良好的個(gè)人化學(xué)習(xí)環(huán)境。綜合應(yīng)用多媒體、超文本、人工智能和知識(shí)庫(kù)等計(jì)算機(jī)技術(shù)，克服了傳統(tǒng)教學(xué)方式上單一、片面的缺點(diǎn)。它的使用能有效地縮短學(xué)習(xí)時(shí)間、提高教學(xué)質(zhì)量和教學(xué)效率，實(shí)現(xiàn)最優(yōu)化的教學(xué)目標(biāo)。</p><p>　　由于計(jì)算機(jī)在

21、程序的控制下可以通過輸出設(shè)備向人們傳遞各種信息，通過輸入設(shè)備接受使用者輸入的各種信息，并對(duì)輸入的信息進(jìn)行判斷，根據(jù)判斷結(jié)果進(jìn)行轉(zhuǎn)移和提供有針對(duì)性的提示信息。因此把具有教學(xué)功能的軟件配置到計(jì)算機(jī)中，計(jì)算機(jī)像教師一樣，與學(xué)生構(gòu)成教學(xué)系統(tǒng)，完成教學(xué)任務(wù)。計(jì)算機(jī)輔助教學(xué)可以起到與其他傳播媒體一樣的呈現(xiàn)知識(shí)，給予反饋等動(dòng)作，但是由于其有著存儲(chǔ)、處理信息及交互反饋等特殊性能，因此CAI具有如下特點(diǎn)：</p><p>　　（1

22、）大容量的信息呈現(xiàn)。</p><p>　?。?）學(xué)生可以控制學(xué)習(xí)內(nèi)容和學(xué)習(xí)進(jìn)度。</p><p>　?。?）CAI系統(tǒng)可以通過提問、判斷、轉(zhuǎn)移等交互活動(dòng)，分析學(xué)生的能力和學(xué)習(xí)狀況，調(diào)節(jié)學(xué)習(xí)過程，實(shí)現(xiàn)了因人施教的教學(xué)原則和及時(shí)反饋原則。通過與學(xué)生的交互活動(dòng)，調(diào)動(dòng)學(xué)生的學(xué)習(xí)積極性。</p><p>　　（4）因?yàn)榻虒W(xué)進(jìn)度由學(xué)生控制和并且保持和學(xué)生的交互活動(dòng)，學(xué)生在CAI

23、活動(dòng)中處于一種積極，主動(dòng)的精神狀態(tài)，不像被動(dòng)受教育時(shí)那么容易疲勞和受干擾，從而可以取得較好的教學(xué)效果。</p><p>　?。?）目前的網(wǎng)絡(luò)技術(shù)使CAI可獲得群體的支持，有著良好的人員基礎(chǔ)， CAI與傳統(tǒng)媒體的不同之處是：傳統(tǒng)媒體如投影、電視、電聲等媒體輔助教學(xué)，只能單向傳遞信息，沒有交互作用。而CAI具有很強(qiáng)的交互功能，人機(jī)交互方式也十分豐富。</p><p>　?。?）CAI實(shí)現(xiàn)了學(xué)科

24、教學(xué)、計(jì)算機(jī)技術(shù)學(xué)、教育學(xué)和藝術(shù)學(xué)的完美結(jié)合。</p><p>　　2.2 多媒體課件概述</p><p>　　多媒體課件簡(jiǎn)單來說就是老師用來輔助教學(xué)的工具，創(chuàng)作人員根據(jù)自己的創(chuàng)意，先從總體上對(duì)信息進(jìn)行分類組織，然后把文字、圖形、圖像、聲音、動(dòng)畫、影像等多種媒體素材在時(shí)間和空間兩方面進(jìn)行集成，使他們?nèi)跒橐惑w并賦予它們以交互特性，從而制作出各種精彩紛呈的多媒體應(yīng)用軟件作品。 </p&

25、gt;<p>　　多媒體課件具備以下特點(diǎn)： </p><p>　?。?）豐富的表現(xiàn)力：多媒體課件不僅可以更加自然、逼真地表現(xiàn)多姿多彩的視聽世界；還可以對(duì)宏觀和微觀事物進(jìn)行模擬，對(duì)抽象、無形事物進(jìn)行生動(dòng)、直觀的表現(xiàn)；對(duì)復(fù)雜過程進(jìn)行簡(jiǎn)化再現(xiàn)等等。這樣，就使原本艱難的教學(xué)活動(dòng)充滿了魅力。 </p><p>　?。?）良好的交互性：多媒體課件不僅可以在內(nèi)容的學(xué)習(xí)使用上提供良好的交互控

26、制，而且可以運(yùn)用適當(dāng)?shù)慕虒W(xué)策略，指導(dǎo)學(xué)生學(xué)習(xí)、更好地體現(xiàn)出“因材施教”的個(gè)別化教學(xué)。</p><p>　　（3）極大的共享性：網(wǎng)絡(luò)技術(shù)的發(fā)展，多媒體信息的自由傳輸，使得教育在全世界交換、共享成為可能。以網(wǎng)絡(luò)為載體的多媒體課件，提供了教學(xué)資源的共享。多媒體課件在教學(xué)中的使用，改善了教學(xué)媒體的表現(xiàn)力和交互性，促進(jìn)了課堂教學(xué)內(nèi)容、教學(xué)方法、教學(xué)過程的全面優(yōu)化，提高了教學(xué)效果。</p><p>　

27、　2.3 多媒體課件的五個(gè)特性</p><p><b>　?。?）教學(xué)性</b></p><p>　　在多媒體教學(xué)軟件系統(tǒng)中，通過多媒體信息的選擇與組織、系統(tǒng)結(jié)構(gòu)、教學(xué)程序、學(xué)習(xí)導(dǎo)航、問題設(shè)置、診斷評(píng)價(jià)等方式來反映教學(xué)過程和教學(xué)策略。所以在多媒體教學(xué)軟件系統(tǒng)中，大都包括知識(shí)講解、舉例說明、媒體演示、提問診斷、反饋評(píng)價(jià)等教學(xué)基本部分。</p><p

28、><b>　?。?）科學(xué)性</b></p><p>　　在多媒體教學(xué)軟件系統(tǒng)中，教學(xué)內(nèi)容是用多媒體信息來表達(dá)的，各種媒體信息都必須是為了表現(xiàn)某一個(gè)知識(shí)點(diǎn)的內(nèi)容，為達(dá)到某一層次的教學(xué)目標(biāo)而設(shè)計(jì)、選擇的。各個(gè)知識(shí)點(diǎn)之間應(yīng)建立一定的關(guān)系與聯(lián)系的形式，以形成具有學(xué)科特色的知識(shí)結(jié)構(gòu)體系。</p><p><b>　?。?）交互性</b></p&

29、gt;<p>　　多媒體教學(xué)軟件必須具有友好的人機(jī)交互界面。交互界面是學(xué)生和計(jì)算機(jī)進(jìn)行信息交換的通道，在教學(xué)軟件系統(tǒng)中，交互界面的形式有圖形菜單、圖標(biāo)、按鈕、窗口、熱鍵等。</p><p><b>　?。?）集成性</b></p><p>　　多媒體教學(xué)軟件是由文本、圖形、動(dòng)畫、聲音、視頻等多種媒體信息集成在一起，經(jīng)過加工和處理所形成的教學(xué)系統(tǒng)。具有多種

30、媒體的集成性，圖文聲像并茂及較強(qiáng)的表現(xiàn)力和感染力，能引起學(xué)生的學(xué)習(xí)興趣和提高學(xué)生的學(xué)習(xí)積極性</p><p><b>　?。?）診斷性 </b></p><p>　　多媒體教學(xué)軟件必須具有診斷評(píng)價(jià)、反饋強(qiáng)化的功能。在多媒體教學(xué)軟件系統(tǒng)中，通常設(shè)置一些問題作為形成性練習(xí)，向?qū)W生提問并要求學(xué)生做出反應(yīng)。對(duì)于學(xué)生的學(xué)習(xí)反應(yīng)，多媒體教學(xué)軟件應(yīng)做出相應(yīng)的反饋，給出評(píng)價(jià)信息。&l

31、t;/p><p>　　2.4 多媒體課件制作工具</p><p>　?。?）PowerPoint</p><p>　　微軟公司出品的制作幻燈片的軟件，此軟件制作的電子文稿廣泛地應(yīng)用于學(xué)術(shù)報(bào)告，會(huì)議等場(chǎng)所，有好多教師也在用此軟件制作課件，就此軟件來說，他的優(yōu)點(diǎn)是做課件比較方便，不用多學(xué)，很容易上手，制作的課件可以在網(wǎng)上通過IE來進(jìn)行演示文稿的播放；但就其功能來說就相對(duì)差

32、了一點(diǎn)，圖片、視頻、文字資料的展示制作較為方便，很容易起到資料展示的作用，單在交互性上就略顯不足。盡管如此，它還是現(xiàn)階段使用最廣泛的軟件。</p><p>　?。?）Authorware </p><p>　　Authorware是Macromedia公司推出的多媒體開發(fā)工具，由于它具有強(qiáng)大的創(chuàng)作能力、簡(jiǎn)便的用戶界面及良好的可擴(kuò)展性，所以深為廣大用戶的歡迎，成為應(yīng)用最廣泛的多媒體開發(fā)工具，

33、一度被譽(yù)為多媒體大師，此軟件的主要特點(diǎn)是：Authorware是基于圖標(biāo)和流線的多媒體創(chuàng)作工具，具有豐富的交互方式及大量的系統(tǒng)變量的函數(shù)、跨平臺(tái)的體系結(jié)構(gòu)、高效的多媒體集成環(huán)境和標(biāo)準(zhǔn)的應(yīng)用程序接口等。可用于制作網(wǎng)頁(yè)和在線學(xué)習(xí)的應(yīng)用軟件。Authorware的交互比較強(qiáng)大，就是不會(huì)編程也可以做出一些交互比較好的課件。但是做起動(dòng)畫來比較困難，如果不借助其他的軟件，做一些好的動(dòng)畫來說是根本不可能的（畢竟這不是專業(yè)的動(dòng)畫制作軟件）。雖然有很多插

34、件，但打包以后還要帶著走，所以對(duì)于制作一些生動(dòng)有趣的課件還是比較困難的。另一個(gè)缺點(diǎn)就是打包后的文件比較大，不利于傳播。</p><p>　?。?）Director</p><p>　　Director是Macromedia公司推出的多媒體開發(fā)工具，是全球多媒體開發(fā)市場(chǎng)的重量級(jí)工具，據(jù)統(tǒng)計(jì)，它在美國(guó)專業(yè)CDROM開發(fā)市場(chǎng)占據(jù)85%以上的份額。它不僅具備直觀易用的用戶界面，而且擁有很強(qiáng)的編程能

35、力（它本身集成了自己Lingo語言），全稱是：Macromedia Director Shockwave Studio。用Director制作多媒體動(dòng)畫，無論是演示性質(zhì)的還是交互性質(zhì)的，都顯出其專業(yè)級(jí)的制作能力和高效的多媒體處理技術(shù)。圖像，文本，聲音，動(dòng)畫等等這些多媒體元素，在Director中都可以非常方便而有機(jī)地結(jié)合起來，創(chuàng)造出精美的動(dòng)畫。因?yàn)榉浅I(yè)，所以教師用此軟件制作課件的不多，但界面非常漂亮，交互也比較好。特點(diǎn)：幀動(dòng)畫與編程

36、相結(jié)合的多媒體編制軟件，用幀可以做出很多漂亮的動(dòng)畫，有Lingo語言可以編出你想要的交互，引入的外部的多媒體元素非常豐富?？墒巧傻奈募容^大，在網(wǎng)絡(luò)傳輸方面做得還不是很理想。對(duì)于初學(xué)者來說，用它來做課件比較困難。</p><p><b>　?。?）Flash</b></p><p>　　Flash是Macromedia公司出品的，用在互聯(lián)網(wǎng)上動(dòng)態(tài)的、可互動(dòng)的shoc

37、kwave。它的優(yōu)點(diǎn)是體積小，可一邊下載一邊播放，這樣就避免了用戶長(zhǎng)時(shí)間的等待。Flash可以用其生成動(dòng)畫，還可在網(wǎng)頁(yè)中加入聲音。這樣你就能生成多媒體的圖形和界面，而使文件的體積卻很小。Flash雖然不可以像一門語言一樣進(jìn)行編程，但用其內(nèi)置的語句并結(jié)合Javascripe，也可做出互動(dòng)性很強(qiáng)的主頁(yè)來。Flash另外一個(gè)特點(diǎn)就是必須安裝插件PLUG-IN，才能在瀏覽器上使用，這就避免了瀏覽器不同而引起的差異。</p><

38、;p>　　（5）FrontPage</p><p>　　FrontPage是制作基于Web風(fēng)格的多媒體CAI課件的軟件，它可以設(shè)計(jì)頁(yè)面的背景色和標(biāo)題字體，快速建立超級(jí)鏈接，插入圖像及其他教學(xué)素材。FrontPage在使用和操作各方面都與Office非常相似，而且對(duì)一般教師來說，不需要了解任何HTML程序即可使用FrontPage輕松地制作網(wǎng)絡(luò)式多媒體CAI課件。FrontPage制作課件的不足和PowerP

39、oint一樣，不能設(shè)計(jì)復(fù)雜的交互性練習(xí)題，其優(yōu)勢(shì)在于網(wǎng)絡(luò)功能，教師在自己的計(jì)算機(jī)上制作好網(wǎng)頁(yè)課件，上課時(shí)，通過校園局域網(wǎng)，在多媒體教室可以訪問該網(wǎng)頁(yè)，甚至還可以通過Internet與其他學(xué)校的教師交流。</p><p><b>　　（6）Action</b></p><p>　　Action是面向?qū)ο蟮亩嗝襟wCAI制作軟件，具有較強(qiáng)的時(shí)間控制特性，它在組織連接對(duì)象時(shí)，

40、除了考慮其內(nèi)容和順序外，還要考慮它們的同步問題。例如，定義每個(gè)教學(xué)媒體素材的起止時(shí)間、重疊片段、演播長(zhǎng)度等。也可以制作簡(jiǎn)單的動(dòng)畫，操作方法比較簡(jiǎn)單。</p><p>　　（7）Visual Basic</p><p>　　Visual Basic是一種基于程序語言的集成包，在多媒體CAI課件制作中提供對(duì)窗口及其內(nèi)容的圖形創(chuàng)作方式。對(duì)于從未使用過多媒體編輯軟件的教師來說，可選擇操作相對(duì)容易的

41、洪圖（Hong Tool）或Action，這類軟件不需要編程，而且操作界面及制作工具簡(jiǎn)單直觀；如果教師對(duì)使用多媒體編輯軟件已有一定的經(jīng)驗(yàn)，但不會(huì)編程，則可選擇Authorware這類不需要編程即可生成課件的軟件；對(duì)于有編程能力的計(jì)算機(jī)教師則可用Visual Basic制作課件。</p><p>　　2.5 本設(shè)計(jì)軟件制作工具</p><p>　　隨著互聯(lián)網(wǎng)的繼續(xù)發(fā)展，網(wǎng)絡(luò)教學(xué)必定會(huì)成為將

42、來的主流教學(xué)之一。本設(shè)計(jì)著眼于將來，制成網(wǎng)頁(yè)形式的多媒體CAI課件，即有PPT良好的展示功能，更有Authorware極強(qiáng)的互動(dòng)性，還有Director漂亮的動(dòng)畫效果，同時(shí)有很強(qiáng)的傳播性。如果有服務(wù)器的支持，每個(gè)人都能通過互聯(lián)網(wǎng)訪問它。當(dāng)然這種形式的課件也有一定的缺點(diǎn)：如果要通過互聯(lián)網(wǎng)訪問，必須有服務(wù)器，這是一筆不小的開支。同時(shí)，制作這樣的課件需要一定的編程基礎(chǔ)。</p><p>　　本設(shè)計(jì)是采用Dreamwea

43、r為主要設(shè)計(jì)工具。 Dreamwear是由Macromedia公司所開發(fā)的著名網(wǎng)站開發(fā)工具。它使用所見即所得的接口，亦有HTML編輯的功能。Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)reeHand，或Photoshop等檔案移至網(wǎng)頁(yè)上。對(duì)于選單，快捷鍵與格式控制，都只要一個(gè)簡(jiǎn)單步驟便可完成。Dreamweaver能與其他的設(shè)計(jì)工具，如Playback Flash，Shockwave和外掛模組等搭配，不需離開Drea

44、mweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動(dòng)開啟Firework或Photoshop來進(jìn)行編輯與設(shè)定圖檔的最佳化。最主要的是Dreamwear是一款結(jié)合可視化和代碼的雙操作工具，對(duì)于一些HTML標(biāo)簽，Dreamwear完全可以采用可視化操作來實(shí)現(xiàn)，對(duì)于不懂HTML的人來說也比較容易上手。</p><p>　　HTML（Hypertext Markup Langu

45、age），即超文本標(biāo)記語言，是用于描述網(wǎng)頁(yè)文檔的一種標(biāo)記語言。HTML是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)簽來標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè)本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁(yè)文件，然后根據(jù)標(biāo)簽解釋和顯示其標(biāo)記的內(nèi)容，對(duì)書寫出錯(cuò)的標(biāo)簽將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯(cuò)原因和出錯(cuò)部位。但需

46、要注意的是，對(duì)于不同的瀏覽器，對(duì)同一標(biāo)簽可能會(huì)有不完全相同的解釋，因而可能會(huì)有不同的顯示效果。 HTML之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。所謂超級(jí)鏈接，就是一種URL指針，通過激活（點(diǎn)擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁(yè)。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。 網(wǎng)頁(yè)的本質(zhì)就是HTML，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、CSS、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，HTML是Web編程的

47、基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。HTML文檔制作不是</p><p>　　本設(shè)計(jì)主要采用HTML為基本編程語言，對(duì)于一些交互性活動(dòng)和動(dòng)態(tài)效果，則需要依靠Javascript實(shí)現(xiàn)，Javascript是由Nombas開發(fā)的一種可以嵌入網(wǎng)頁(yè)中的腳本語言，是一種動(dòng)態(tài)、弱類型、基于原型的語言，通過瀏覽器可以直接執(zhí)行。是目前網(wǎng)頁(yè)設(shè)計(jì)中最容易學(xué)又最方便的語言?？梢岳肑avascript輕易的做出親切的歡迎信息

48、、漂亮的數(shù)字鐘、有廣告效果的跑馬燈及簡(jiǎn)易的選舉等效果，還可以顯示瀏覽器停留的時(shí)間，這些特殊效果提高網(wǎng)頁(yè)的可觀性。同時(shí)，網(wǎng)上有很多很好的Javascript源碼供使用，可以減少一定的工作量。</p><p>　　而網(wǎng)頁(yè)的排版則通過級(jí)聯(lián)樣式表（Cascading Style Sheet 簡(jiǎn)稱CSS）實(shí)現(xiàn)，它是一種用來表現(xiàn)HTML或 XML 等文件式樣的計(jì)算機(jī)語言，是用來進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)

49、是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)簽的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁(yè)外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象盒模型的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。通過

50、CSS樣式，能讓網(wǎng)頁(yè)課程更加生動(dòng)活潑，吸引學(xué)生的注意力，激發(fā)學(xué)生的學(xué)習(xí)積極性，提高學(xué)習(xí)效率</p><p><b>　　3 總體設(shè)計(jì)</b></p><p>　　本設(shè)計(jì)基本結(jié)構(gòu)如圖3-1所示，共分為7個(gè)頁(yè)面，分別是：跳轉(zhuǎn)頁(yè)面、首頁(yè)、知識(shí)詳解頁(yè)面、簡(jiǎn)單測(cè)試頁(yè)面、作品展示頁(yè)面、簡(jiǎn)單模擬頁(yè)面、友情鏈接頁(yè)面。</p><p>　　圖3-1 設(shè)計(jì)總體

51、結(jié)構(gòu)圖</p><p>　　3.1 跳轉(zhuǎn)頁(yè)面設(shè)計(jì)</p><p>　　跳轉(zhuǎn)頁(yè)面背景是藍(lán)天白云下的一條陽光大道，大道盡頭寫著歡迎進(jìn)入攝影課堂，表示這是一條通往攝影知識(shí)殿堂的康莊大道。在頁(yè)面上端滾動(dòng)著一幅幅漂亮的風(fēng)景照，預(yù)示著攝影知識(shí)殿堂就如同畫上一樣絢麗多彩，引人入勝。當(dāng)鼠標(biāo)指針停留在圖片上時(shí)圖片就停止?jié)L動(dòng)，當(dāng)鼠標(biāo)離開圖片時(shí)又恢復(fù)滾動(dòng)。點(diǎn)擊歡迎進(jìn)入攝影課堂就能進(jìn)入主頁(yè)面。</p>

52、;<p><b>　　3.2 主頁(yè)設(shè)計(jì)</b></p><p>　　主頁(yè)面是一個(gè)扇形的導(dǎo)航欄，導(dǎo)航欄一共分為5個(gè)菜單，分別是：知識(shí)詳解、簡(jiǎn)單測(cè)試、作品展示、簡(jiǎn)單模擬、友情鏈接。點(diǎn)擊菜單就能進(jìn)入相應(yīng)的模塊。本設(shè)計(jì)的主頁(yè)最大的特點(diǎn)就是簡(jiǎn)潔明了，一目了然，但卻不單調(diào)。配上淡綠色的背景，給人一看就有耳目一新的感覺，從而激發(fā)學(xué)生學(xué)習(xí)該課程的興趣。</p><p>

53、;　　3.3 知識(shí)詳解頁(yè)面設(shè)計(jì)</p><p>　　知識(shí)詳解頁(yè)面以老師的PPT為主要內(nèi)容，如果將PPT直接導(dǎo)出為網(wǎng)頁(yè)，它的排版顯得很亂，讓人產(chǎn)生一種煩亂的錯(cuò)覺，不適合作為課程內(nèi)容。所以將PPT導(dǎo)出為圖片，通過Flash將圖片制作成swf格式的視頻，在視頻中添加上一頁(yè)和下一頁(yè)兩個(gè)按鈕，實(shí)現(xiàn)翻頁(yè)功能。然后將視頻導(dǎo)入到網(wǎng)頁(yè)中，通過CSS將目錄和視頻進(jìn)行排版，使整個(gè)頁(yè)面布局整潔有序，是學(xué)生在一種輕松愉快的狀態(tài)下學(xué)習(xí)。

54、整個(gè)知識(shí)詳解模塊以圖片結(jié)合文字的形式向?qū)W生介紹攝影技術(shù)概論和攝影發(fā)展史，以及一些攝影技法，讓同學(xué)們初步了解關(guān)于攝影方面的知識(shí)。</p><p>　　3.4 簡(jiǎn)單測(cè)試頁(yè)面設(shè)計(jì)</p><p>　　簡(jiǎn)單測(cè)試頁(yè)面羅列了一些基本的攝影知識(shí)選擇題，每個(gè)選擇題有四個(gè)選項(xiàng)，選擇完后有得分批改按鈕，點(diǎn)擊之后可以顯示你的得分。如果想重新測(cè)試，點(diǎn)擊重新測(cè)試按鈕就能開始重測(cè)。另外還有正確答案按鈕，點(diǎn)擊之后顯示

55、正確答案。當(dāng)然，如果不想顯示正確答案，那么點(diǎn)擊隱藏答案按鈕就能隱藏正確答案。雖然題目只是攝影知識(shí)海洋中的一個(gè)小水滴，但是或多或少能讓學(xué)習(xí)者檢測(cè)下自己的攝影基礎(chǔ)知識(shí)扎實(shí)程度。</p><p>　　3.5 作品展示頁(yè)面設(shè)計(jì)</p><p>　　作品展示頁(yè)面收集了一些世界攝影史上著名的攝影作品供學(xué)生欣賞，有社會(huì)寫實(shí)照，人物動(dòng)態(tài)照，靜態(tài)風(fēng)景照。有攝影大師思索良久的經(jīng)典拍攝，也有心血來潮抓拍的瞬間

56、，通過不同類型的大師作品，吸引學(xué)生的眼球，讓學(xué)生揣摩及體會(huì)大師的攝影作品，從大師的作品中感悟出屬于自己的東西，培養(yǎng)學(xué)生的審美以及取景技巧。</p><p>　　3.6 簡(jiǎn)單模擬頁(yè)面設(shè)計(jì)</p><p>　　簡(jiǎn)單模擬頁(yè)面制作了一個(gè)簡(jiǎn)單的鏡頭框架，可以通過鼠標(biāo)實(shí)現(xiàn)上下左右移動(dòng)，需要拍攝時(shí)點(diǎn)擊鼠標(biāo)左鍵就能拍攝下該鏡頭框架里面的圖片，拍攝后的圖片會(huì)顯示在左下角。通過這樣的一個(gè)簡(jiǎn)單模擬實(shí)驗(yàn)，讓學(xué)生

57、在室內(nèi)就能身臨其境的感受拍攝的樂趣，提高學(xué)生的學(xué)習(xí)積極性，幫助學(xué)生了解拍攝過程中怎么對(duì)拍攝內(nèi)容進(jìn)行切割才能達(dá)到一個(gè)更好的效果。</p><p>　　3.7 友情鏈接頁(yè)面設(shè)計(jì)</p><p>　　友情鏈接頁(yè)面提供了很多國(guó)內(nèi)外知名的攝影網(wǎng)站，學(xué)生可以根據(jù)自己的興趣有選擇的點(diǎn)擊鏈接就能訪問這些網(wǎng)站，而不需要自己去輸入網(wǎng)址或者是百度谷歌。該模塊有助于加強(qiáng)學(xué)生學(xué)習(xí)的自主性，拓展學(xué)生的學(xué)習(xí)面，補(bǔ)充學(xué)

58、生的課外知識(shí)。</p><p><b>　　4 具體實(shí)現(xiàn)</b></p><p>　　4.1 跳轉(zhuǎn)頁(yè)面實(shí)現(xiàn)</p><p>　　本設(shè)計(jì)的第一個(gè)頁(yè)面就是跳轉(zhuǎn)頁(yè)面，如圖4-1所示</p><p><b>　　圖4-1 跳轉(zhuǎn)頁(yè)面</b></p><p>　　跳轉(zhuǎn)頁(yè)面通過back

59、ground標(biāo)簽插入存放在img文件夾中的背景圖片1.jpg，然后以“<a href="index.html">歡迎進(jìn)入攝影課堂</a>”語句將攝影課堂知識(shí)鏈接到首頁(yè)，這些都是簡(jiǎn)單的HTML代碼。通過Dreamwear的設(shè)計(jì)模塊直接插入圖片和鏈接就能實(shí)現(xiàn)。</p><p>　　頂端的滾動(dòng)圖片是依靠Javascript代碼實(shí)現(xiàn)的。滾動(dòng)圖片公有7張，圖片寬度為325px,為

60、了實(shí)現(xiàn)無縫滾動(dòng)，先獲得7張圖片的引用，然后將7張圖片重復(fù)調(diào)用2次，所以總的圖片為14張。然后通過圖片寬度乘以圖片組數(shù)確定兩組圖片的寬度，即為4550px。確定好這些數(shù)據(jù)后調(diào)用setInterval函數(shù)以30毫秒為周期執(zhí)行setInterval里的代碼，每執(zhí)行一次，圖片的左邊界到框架左邊界的偏移量加-1px，超出框架的圖片被隱藏，如此循環(huán)，直到圖片的左邊界到框架左邊界為一組圖片的寬度2275px，也就是7張圖片滾動(dòng)一次完成時(shí)，將圖片的左邊

61、界到框架左邊界的偏移量重置為0，即重新開始滾動(dòng)，這樣就實(shí)現(xiàn)了圖片的無縫循環(huán)滾動(dòng)。如果不將圖片重復(fù)調(diào)用，最后一張圖片從右邊向左邊滾動(dòng)時(shí)，它后面就不會(huì)出現(xiàn)圖片滾動(dòng)，產(chǎn)生斷檔。所以必須重復(fù)調(diào)用一次圖片。</p><p>　　當(dāng)鼠標(biāo)停留在滾動(dòng)圖片上時(shí)，圖片就停止?jié)L動(dòng)，這是調(diào)用clearInterval()函數(shù)實(shí)現(xiàn)的，鼠標(biāo)指針移到圖片模塊時(shí)調(diào)用clearInterval()清除setInterval創(chuàng)建的循環(huán)，當(dāng)鼠標(biāo)移開時(shí)

62、又重新執(zhí)行setInterval創(chuàng)建的循環(huán)，即移開鼠標(biāo)后圖片又開始滾動(dòng)了。</p><p><b>　　4.2 首頁(yè)實(shí)現(xiàn)</b></p><p>　　點(diǎn)擊歡迎進(jìn)入攝影課堂就進(jìn)入了首頁(yè)，其界面如圖4-2所示</p><p><b>　　圖4-2 首頁(yè)</b></p><p>　　整個(gè)首頁(yè)以綠色和黃色

63、作為背景色，簡(jiǎn)單明了，一目了然，給人一種清爽整潔的感覺，而不像其他主頁(yè)那樣花樣繁多，令人眼花繚亂。因?yàn)槿说乃季S有一種先入為主的概念，如果一開始就顯示太多的內(nèi)容，會(huì)讓學(xué)生尤其是初學(xué)者產(chǎn)生一種畏懼心理，畏懼自己一下子接受不了那么多的內(nèi)容,滋生對(duì)學(xué)習(xí)的消極態(tài)度，從而影響學(xué)生的后續(xù)學(xué)習(xí)。所以本設(shè)計(jì)盡量的將首頁(yè)精簡(jiǎn)化，不放置太多雜碎的內(nèi)容。整個(gè)首頁(yè)其實(shí)就是一個(gè)導(dǎo)航欄，利用CSS將其排列成一個(gè)扇形，具體的實(shí)現(xiàn)方式就是設(shè)置每個(gè)菜單的位置屬性，計(jì)算左邊

64、距和上邊距將其定位在合適的位置。當(dāng)鼠標(biāo)停留在菜單選項(xiàng)上時(shí)會(huì)淡入一個(gè)圓形的填充框，同時(shí)菜單圖案背景亮度變高，表示你選中了該菜單選項(xiàng)，將鼠標(biāo)移出時(shí)圓形的填充框會(huì)逐漸淡出。這樣的效果是通過fadeIn和fadeOut兩個(gè)函數(shù)實(shí)現(xiàn)的。具體是利用hover類在鼠標(biāo)移到菜單元素上時(shí)向此菜單元素添加特殊的樣式，并調(diào)用animate函數(shù)設(shè)置屬性，即圓形填充框，然后通過fadeIn函數(shù)淡入的顯示這個(gè)樣式，當(dāng)鼠標(biāo)移出時(shí)調(diào)用fadeOut函數(shù)淡出隱藏這個(gè)樣式

65、，同時(shí)再一次調(diào)用animate函數(shù)，將菜單屬性圖片換成高亮度背景的圖片。</p><p>　　4.3 知識(shí)詳解頁(yè)面實(shí)現(xiàn)</p><p>　　在首頁(yè)中點(diǎn)擊知識(shí)詳解菜單，就開始真正的進(jìn)入攝影課堂了。知識(shí)詳解所有內(nèi)容均來自攝影課件PPT，是老師課堂上所用的課件，共分為12章，每一章是一個(gè)swf格式的視頻，是利用PPT導(dǎo)出為圖片，然后將圖片導(dǎo)入到Flash中制成視頻再插入到網(wǎng)頁(yè)中實(shí)現(xiàn)的。視頻內(nèi)容

66、從初步認(rèn)識(shí)攝影到攝影技術(shù)技法，從黑白膠卷沖洗到數(shù)字圖像的后期制作，由易而難，由始而終，深入淺出的講解了基本的攝影知識(shí)和一些攝影技巧以及膠卷的沖洗和圖像的后期制作，讓同學(xué)們初步了解關(guān)于攝影方面的知識(shí)，通過所學(xué)的攝影技法運(yùn)用到實(shí)際拍攝中，提高自己的拍攝技巧，更提升自己的攝影品味。 </p><p>　　知識(shí)詳解頁(yè)面采用了上方固定，左側(cè)嵌套的框架頁(yè)，其整體布局圖4-3所示</p><p>　　圖

67、4-3 知識(shí)詳解頁(yè)面</p><p>　　整個(gè)頁(yè)面采用黃色作為背景色，給人一種輕快、熱情、充滿希望和活力的印象，讓學(xué)生在學(xué)習(xí)中有一種積極向上，奮發(fā)拼搏的心態(tài)。上方是一個(gè)標(biāo)題欄， 標(biāo)題欄右側(cè)有返回首頁(yè)四個(gè)字，點(diǎn)擊就能返回到首頁(yè)。左側(cè)是一個(gè)課程的導(dǎo)航菜單，用HTML的table標(biāo)簽繪制了一個(gè)1列12行的邊框?qū)挾葹?的表格，每一行都是一節(jié)課程的表題。每一行的內(nèi)容都是對(duì)應(yīng)攝影課程的一個(gè)鏈接，點(diǎn)擊之后就會(huì)跳轉(zhuǎn)到相應(yīng)頁(yè)面。右

68、側(cè)則是插入的swf格式的視頻。視頻是由Flash制作的，以第一章視頻制作為列，將第一章的PPT內(nèi)容導(dǎo)出為圖片，然后全部導(dǎo)入到Flash庫(kù)中，將Flash的文檔大小改成和圖片大小一致，這樣就不會(huì)出現(xiàn)空白場(chǎng)景，在場(chǎng)景中將所有圖片依順序?qū)氲綀D層的每一幀，每一幀都為關(guān)鍵幀。再利用按鈕組件創(chuàng)建上一頁(yè)和下一頁(yè)兩個(gè)按鈕，將上一頁(yè)按鈕命名為btP，下一頁(yè)按鈕命名為bt。新建一個(gè)圖層，將按鈕放置在新建的圖層的合適位置，然后在按鈕處插入如下代碼：<

69、/p><p>　　import flash.events.MouseEvent;</p><p>　　this.stop();</p><p>　　var num =1;</p><p>　　bt.addEventListener(MouseEvent.CLICK , onClick);</p><p>　　functio

70、n onClick(e:MouseEvent):void{ //鼠標(biāo)點(diǎn)擊bt按鈕是執(zhí)行下列操作</p><p><b>　　num++;</b></p><p>　　trace(num);</p><p>　　this.gotoAndStop(num);</p><p>　　if(num >104){</p&

71、gt;<p>　　num = 104;</p><p><b>　　}</b></p><p><b>　　}</b></p><p>　　btP.addEventListener(MouseEvent.CLICK , onClickP);</p><p>　　function onC

72、lickP(e:MouseEvent):void{</p><p>　　if(num<3){</p><p><b>　　num =2;</b></p><p><b>　　}</b></p><p><b>　　num--;</b></p><p&g

73、t;　　trace(num);</p><p>　　this.gotoAndStop(num)</p><p><b>　　}</b></p><p>　　先將num初始值置為1，每當(dāng)鼠標(biāo)點(diǎn)擊下一頁(yè)時(shí)執(zhí)行if循環(huán)將num值加1，并通過this.gotoAndStop(num)語句跳轉(zhuǎn)到num值的那一幀。當(dāng)num值大于104也就是最后一張圖片時(shí)，

74、將num置為104，則點(diǎn)擊下一頁(yè)時(shí)num值始終104，即始終停留在104幀。同理，當(dāng)num值小于3，也就是num值為2時(shí)，將num值設(shè)置為2，在自減減后為1然后跳轉(zhuǎn)到第一頁(yè)，接下來繼續(xù)執(zhí)行循環(huán)，所以始終停留在第一頁(yè)。這就是翻頁(yè)功能的具體實(shí)現(xiàn)。上一頁(yè)按鈕也是如此。</p><p>　　當(dāng)然還有一種方法就是直接將PPT課件導(dǎo)出為網(wǎng)頁(yè)形式，其排版效果如圖4-4所示</p><p>　　圖4-4

75、 PPT導(dǎo)出的網(wǎng)頁(yè)顯示圖</p><p>　　它是通過點(diǎn)擊左側(cè)的導(dǎo)航欄鏈接到文件里的圖片，在右側(cè)顯示。整個(gè)排版雜亂無章，容易讓人心浮氣躁，不適合作為課程。相比較之下，本設(shè)計(jì)采用了第一種方法，將每一章課程內(nèi)容制作為一個(gè)視頻插入到右邊的網(wǎng)頁(yè)中，通過左邊的導(dǎo)航欄鏈接到相應(yīng)的課程視頻，在視頻里通過上一頁(yè)下一頁(yè)實(shí)現(xiàn)翻頁(yè)，布局清爽，條理清晰，思路明確，很適合作為課程。</p><p>　　4.4 簡(jiǎn)

76、單測(cè)試頁(yè)面實(shí)現(xiàn)</p><p>　　在首頁(yè)中點(diǎn)擊簡(jiǎn)單測(cè)試菜單就能進(jìn)入簡(jiǎn)單測(cè)試頁(yè)面，其界面如圖4-5所示</p><p>　　圖4-5 簡(jiǎn)單測(cè)試頁(yè)面</p><p>　　布局和知識(shí)詳解頁(yè)面一樣，也是采用了上方固定，左側(cè)嵌套的框架頁(yè)。同樣上方也是一個(gè)標(biāo)題欄， 標(biāo)題欄右側(cè)有返回首頁(yè)四個(gè)字，點(diǎn)擊就能返回到首頁(yè)。左側(cè)則是五套習(xí)題的導(dǎo)航欄，點(diǎn)擊就能在右側(cè)顯示測(cè)試題，如圖4-6所

77、示 </p><p>　　圖4-6 簡(jiǎn)單測(cè)試習(xí)題顯示圖</p><p>　　每套測(cè)試題共有十個(gè)選擇題，每個(gè)選擇題分4個(gè)選項(xiàng)，在頁(yè)面底部有如圖4-7所示的按鈕</p><p><b>　　圖4-7 按鈕</b></p><p>　　點(diǎn)擊開始評(píng)分按鈕能對(duì)學(xué)生做的測(cè)試題進(jìn)行批改并顯示分?jǐn)?shù)，每一題為一分。重新測(cè)試按鈕則能清除成績(jī)

78、，方便學(xué)生再測(cè)一次。如果想知道正確答案則可以點(diǎn)擊正確答案按鈕，就會(huì)在下方顯示正確答案，方便學(xué)生比對(duì)找出自己的錯(cuò)誤并改正。點(diǎn)擊隱藏答案則能將答案隱藏。簡(jiǎn)單測(cè)試模塊具體實(shí)現(xiàn)是對(duì)測(cè)試題的每個(gè)選項(xiàng)設(shè)置一個(gè)人value值，鼠標(biāo)點(diǎn)擊選擇答案，如果選擇的是正確答案則設(shè)置value=1，否則取得value=0。然后將分?jǐn)?shù)屬性list初始值設(shè)為0，通過if語句判斷測(cè)試題，如果value值不為空并且等于1，即學(xué)生做了選擇題而且選擇的是正確答案，將list加

79、1，以此類推，這樣就實(shí)現(xiàn)了評(píng)分效果。重新測(cè)試則是調(diào)用clearquiz函數(shù)將每個(gè)選項(xiàng)的list值重置為0，相當(dāng)于清除了數(shù)據(jù)，這樣學(xué)生就可以重新做這套測(cè)試題了。</p><p>　　顯示隱藏答案功能調(diào)用了Object. style.display屬性，具體代碼如下所示：<input type="button" value="正確答案" onClick="txt

80、.style.display= 'block'"></p><p>　　<input type="button" value="隱藏答案" onClick="txt.style.display= 'none'"></p><p>　　<div id="tx

81、t" style="display:none" >1 C ; 2 B; 3C; 4 A; 5 B; 6 B; 7 A; 8 A; 9 B; 10 D</div>。將display屬性設(shè)置為block時(shí)顯示txt對(duì)象，將其屬性設(shè)置為none時(shí)隱藏txt對(duì)象。</p><p>　　簡(jiǎn)單測(cè)試頁(yè)面實(shí)現(xiàn)了習(xí)題練習(xí)批改的功能，能讓學(xué)生在練習(xí)中強(qiáng)化自己所學(xué)的攝影知識(shí)，進(jìn)一步理

82、解攝影的真諦。</p><p>　　4.5 作品展示頁(yè)面實(shí)現(xiàn)</p><p>　　在首頁(yè)中點(diǎn)擊作品展示菜單就進(jìn)入了作品展示頁(yè)面，頁(yè)面顯示如圖4-8所示</p><p>　　圖4-8 作品展示頁(yè)面</p><p>　　整個(gè)頁(yè)面只放置一張攝影作品，這是因?yàn)榭紤]到如果一個(gè)頁(yè)面放置太多攝影作品，可能會(huì)讓學(xué)生眼花繚亂，不能靜心慢慢欣賞一幅作品，所以整

83、個(gè)頁(yè)面只放置一張，利用上一頁(yè)和下一頁(yè)兩個(gè)翻頁(yè)按鈕實(shí)現(xiàn)攝影作品翻頁(yè)，保持一個(gè)頁(yè)面一張攝影作品。這個(gè)頁(yè)面的翻頁(yè)功能不再是利用Flash將圖片制成swf格式的視頻插入網(wǎng)頁(yè)，而是將所有39張攝影圖片放置在img文件夾內(nèi)，并用數(shù)字由小到大依次對(duì)圖片命名：1.jpg、2.jpg、3.jpg……，通過計(jì)算圖片名稱數(shù)值來獲得圖片路徑的方法。在此方法中定義一個(gè)p(n)函數(shù)，如下所示：</p><p>　　function p(n)

84、{</p><p>　　var img = document.getElementById('img');</p><p>　　var n = Number(img.title) + n;//Number() 函數(shù)把對(duì)象img的值轉(zhuǎn)換為數(shù)字</p><p>　　if(n < 1) n = 39;</p><p>　　if

85、(n > 39) n = 1;</p><p>　　img.src = 'img/'+n+'.jpg';//獲得n.jpg圖片路徑</p><p>　　img.title = n;//將n賦予img.title，相當(dāng)于保存當(dāng)前圖片數(shù)字，以便下次調(diào)用</p><p>　　var a = img.parentNode;</p&

86、gt;<p>　　a.href = img.src;//跳到img.src</p><p>　　return false;</p><p><b>　　}</b></p><p>　　其中img.title初始值為0，點(diǎn)擊上一頁(yè)則調(diào)用p(-1)函數(shù)，點(diǎn)擊下一頁(yè)則調(diào)用p(1)函數(shù)，比如當(dāng)前img.title為9，當(dāng)點(diǎn)擊下一頁(yè)時(shí)調(diào)用p

87、(1)函數(shù)，var n = Number(img.title) + n，即var n = 9 + 1，你為10。則獲得的圖片路徑img.src = 'img/'+n+'.jpg'為img/10.jpg，然后將第10張圖片的路徑賦給a.href。從而顯示第10張圖片，這樣就實(shí)現(xiàn)了從第9張到第10張的翻頁(yè)。當(dāng)n值大于39時(shí)將n值設(shè)為1，即重新開始循環(huán)。當(dāng)n值小于1時(shí)，將n值設(shè)為39，即實(shí)現(xiàn)倒著循環(huán)。</

88、p><p>　　整個(gè)頁(yè)面還是以簡(jiǎn)潔有序，條理清晰為主，少了些花里胡哨，多了些簡(jiǎn)潔樸素。始終貫徹本設(shè)計(jì)簡(jiǎn)潔有序的作風(fēng)。本頁(yè)面雖然只有一小部分的攝影作品，但是都是精選自世界攝影史上的知名作品。比如第一幅作品《瞬間的力量》（同名《勝利之吻》），是二戰(zhàn)結(jié)束后，一名回國(guó)的士兵激動(dòng)的抱著路邊的一名女性接吻以表達(dá)自己對(duì)勝利的喜悅和對(duì)回家的渴望，這幅作品從側(cè)面反映了人們對(duì)和平的渴望和向往，痛斥了法西斯的丑陋行徑。雖然只是一幅圖片，但

89、是它所表達(dá)的意思遠(yuǎn)遠(yuǎn)不止那么一點(diǎn)，只有通過學(xué)生對(duì)背景的認(rèn)識(shí)，對(duì)主人公的心態(tài)的揣摩，才能發(fā)掘更深層的含義。正是通過世界攝影史上最著名的攝影作品，才能更好的啟發(fā)學(xué)生的攝影靈感。</p><p>　　4.6 簡(jiǎn)單模擬頁(yè)面實(shí)現(xiàn)</p><p>　　在首頁(yè)中點(diǎn)擊簡(jiǎn)單模擬菜單就進(jìn)入了簡(jiǎn)單模擬頁(yè)面，該頁(yè)面如圖4-9所示</p><p>　　圖4-9 簡(jiǎn)單模擬界面</p&g

90、t;<p>　　簡(jiǎn)單模擬界面是一個(gè)簡(jiǎn)易的攝影模擬，界面內(nèi)有一張分辨率為1024*768的圖片作為拍攝背景，圖片內(nèi)有一個(gè)分辨率為300*200的攝影框，攝影框隨著鼠標(biāo)移動(dòng)，當(dāng)鼠標(biāo)停留在圖片內(nèi)點(diǎn)擊鼠標(biāo)時(shí)就會(huì)拍攝下攝影框內(nèi)的圖片，并以150*100的分辨率顯示在右下角。通過這樣的一個(gè)簡(jiǎn)易模擬，讓學(xué)生每個(gè)學(xué)生都能在課堂上進(jìn)行拍攝訓(xùn)練，體會(huì)攝影的樂趣，了解攝影的魅力，學(xué)習(xí)攝影的取景技巧，增加學(xué)習(xí)的趣味性。</p>&l

91、t;p>　　攝影模擬共有5張不同的圖片作為拍攝背景，打開簡(jiǎn)單模擬界面時(shí)圖片是從5張中隨機(jī)出現(xiàn)的。具體步驟是先在div中定義一個(gè)id為mian的div塊，即攝影模擬的框架，利用main.width(Math.min(1024,$(document).width()))設(shè)置框架寬度，調(diào)用了一個(gè)min函數(shù)取最小值，如果瀏覽器的寬度小于1024px，則框架寬度為瀏覽器的寬度，反之框架寬度為1024px。再新建一個(gè)數(shù)組，將五張圖片放進(jìn)數(shù)組內(nèi)

92、，然后通過代碼var bg = pics[parseInt(Math.random()*5)]來隨機(jī)顯示圖片，其中Math.random()是用來做隨機(jī)數(shù)的，它的范圍是0-1（實(shí)際上是(0-0.999999)，parseInt()函數(shù)是返回一個(gè)相應(yīng)的整數(shù)。parseInt(Math.random()*5)就是截取整數(shù)部分，實(shí)際結(jié)果就是0-4(包括0和4)。而pics為前面新建數(shù)組的名稱，例如這次隨機(jī)函數(shù)結(jié)果是3，代碼為var bg =

93、pics[3]，即顯示數(shù)組內(nèi)的第3張圖片。隨機(jī)顯示背景可以增加拍攝的可玩性，不然一直是同一張背景學(xué)生很快就會(huì)厭倦。</p><p>　　攝影框大小為300*200，鼠標(biāo)移動(dòng)時(shí)攝影框也隨著移動(dòng)，代碼如下所示：var n_left, n_top;</p><p>　　var offSet = main.offset();</p><p>　　main.mousemove

94、(function(e){</p><p>　　n_left = (e.pageX-offSet.left)-settings.viewFinder.width/2;</p><p>　　n_top = (e.pageY-offSet.top)-settings.viewFinder.height/2;</p><p>　　首先定義2個(gè)變量n_left,和n_top

95、，通過pageX 屬性和pageX 屬性計(jì)算鼠標(biāo)指針位置，而offset() 方法是返回元素相對(duì)于文檔的偏移，settings.viewFinder.width為攝影框?qū)挾?，settings.viewFinder.height為攝影框高度，通過表達(dá)式可以計(jì)算出鼠標(biāo)移動(dòng)時(shí)攝影框的位置，然后通過攝影框的位置以及攝影框的大小將攝影框顯示在鼠標(biāo)位置，這樣攝影框就隨著鼠標(biāo)移動(dòng)而移動(dòng)，當(dāng)鼠標(biāo)移出圖片外時(shí)則攝影框不再移動(dòng)，代碼如下所示</p&g

96、t;<p>　　if(n_left<0 || n_top<0) return false; </p><p>　　if(n_left+settings.viewFinder.width>=settings.stage.width||n_top+settings.viewFinder.height >= settings.stage.height) return false;&

97、lt;/p><p>　　當(dāng)鼠標(biāo)點(diǎn)擊時(shí)會(huì)截取攝影框內(nèi)的圖片，通過left和top以及攝影框的寬度和高度確定截取位置，同時(shí)調(diào)用append()函數(shù)將截取的圖片插入到左下端的div模塊中，該模塊最多存放三張圖片，當(dāng)截取到第四張圖片是調(diào)用remove()函數(shù)清除第一張圖片。通過上面的步驟就實(shí)現(xiàn)了攝影模擬的功能。</p><p>　　4.7 友情鏈接頁(yè)面實(shí)現(xiàn)</p><p>　　

98、在首頁(yè)中點(diǎn)擊友情鏈接選項(xiàng)就能進(jìn)入到友情鏈接界面，界面顯示如圖4-10所示</p><p>　　圖4-10 友情鏈接界面</p><p>　　整個(gè)界面以綠色樹葉作為背景，并點(diǎn)綴以黃色，給人一種清新自然的感覺，秉承了本設(shè)計(jì)簡(jiǎn)潔有序的一貫作風(fēng)。整個(gè)界面分為3塊，中間一塊是固定不動(dòng)的，創(chuàng)建了一個(gè)九行三列的表格，每個(gè)表格內(nèi)容都是國(guó)內(nèi)外知名攝影網(wǎng)站的鏈接，點(diǎn)擊就能鏈接到相應(yīng)網(wǎng)站。第九行表格只有一列，是

99、返回主頁(yè)的鏈接。左右兩邊是上下浮動(dòng)的動(dòng)態(tài)導(dǎo)航條，導(dǎo)航條也是國(guó)內(nèi)外熱門攝影網(wǎng)站的鏈接，點(diǎn)擊就能鏈接到相應(yīng)網(wǎng)站。上下滾動(dòng)效果是利用marquee標(biāo)簽實(shí)現(xiàn)的：</p><p>　　<marquee scrollamount='1' scrolldelay='50' direction='down' behavior="alternate" wid

100、th='150' height='450' onMouseOver='this.stop()' onMouseOut='this.start()'></marguee></p><p>　　其中scrollamount屬性表示滾動(dòng)速度，數(shù)值越大滾動(dòng)越快。Scrolldelay是延時(shí)屬性，表示每執(zhí)行一步中間停留的時(shí)間，directio

101、n屬性是指滾動(dòng)方向，這里設(shè)置為向下滾動(dòng)，behavior屬性表示滾動(dòng)方式，alternate是指來回滾動(dòng)。Width和height是滾動(dòng)的寬度和高度。當(dāng)鼠標(biāo)停留在滾動(dòng)條時(shí)調(diào)用this.stop()停止?jié)L動(dòng)，鼠標(biāo)離開滾動(dòng)條時(shí)調(diào)用this.start()繼續(xù)滾動(dòng)。</p><p>　　本頁(yè)面設(shè)計(jì)意在加強(qiáng)學(xué)生學(xué)習(xí)的自主性，拓展學(xué)生的學(xué)習(xí)面，補(bǔ)充學(xué)生的課外知識(shí)，讓學(xué)生在課外時(shí)間能快速瀏覽國(guó)內(nèi)外知名攝影網(wǎng)站。學(xué)生學(xué)習(xí)不僅僅

102、停留在課堂上，應(yīng)該利用空余時(shí)間瀏覽一下這些攝影網(wǎng)站，里面有很多攝影知識(shí)和攝影技巧，更有攝影器材相關(guān)的知識(shí)，還有不同層次的攝影作品，有專業(yè)攝影師的作品，也有攝影愛好者的作品，通過學(xué)習(xí)比較借鑒，學(xué)生能從中體會(huì)到更多攝影的意義。</p><p><b>　　5 軟件測(cè)試</b></p><p>　　5.1 測(cè)試的目的</p><p>　　軟件測(cè)試

103、就是利用測(cè)試工具按照測(cè)試方案和流程對(duì)產(chǎn)品進(jìn)行功能和性能測(cè)試，甚至根據(jù)需要編寫不同的測(cè)試工具，設(shè)計(jì)和維護(hù)測(cè)試系統(tǒng)，對(duì)測(cè)試方案可能出現(xiàn)的問題進(jìn)行分析和評(píng)估。執(zhí)行測(cè)試用例后，需要跟蹤故障，以確保開發(fā)的產(chǎn)品適合需求。其的目的是為了保證產(chǎn)品的最終質(zhì)量。在軟件開發(fā)的過程中，可能會(huì)出現(xiàn)很多的bug，但是開發(fā)人員未必知道，如果不經(jīng)過軟件測(cè)試，則產(chǎn)品質(zhì)量得不到保證。一般來說軟件測(cè)試應(yīng)由獨(dú)立的產(chǎn)品評(píng)測(cè)中心負(fù)責(zé)，嚴(yán)格按照軟件測(cè)試流程，制定測(cè)試計(jì)劃、測(cè)試方案、

104、測(cè)試規(guī)范，實(shí)施測(cè)試，對(duì)測(cè)試記錄進(jìn)行分析，并根據(jù)回歸測(cè)試情況撰寫測(cè)試報(bào)告。將測(cè)試報(bào)告反饋給開發(fā)人員，讓他們解決存在的bug。</p><p>　　5.2 本設(shè)計(jì)測(cè)試</p><p>　　表5.1 本設(shè)計(jì)軟件測(cè)試表</p><p><b>　　6 結(jié)論</b></p><p>　　本設(shè)計(jì)是圍繞《攝影技術(shù)》課件PPT中的內(nèi)

105、容進(jìn)行設(shè)計(jì)和開發(fā)的，達(dá)到了開題報(bào)告中的任務(wù)目標(biāo)。將教學(xué)內(nèi)容較為準(zhǔn)確、直觀、形象地展現(xiàn)在設(shè)計(jì)之中。另外，在本設(shè)計(jì)中還添加了習(xí)題測(cè)試、簡(jiǎn)單模擬、作品展示、友情鏈接四個(gè)板塊，豐富了攝影課程內(nèi)容，學(xué)生在學(xué)習(xí)之余，可以做一些題目強(qiáng)化自己所學(xué)到的知識(shí)，也可以模擬攝影，體會(huì)攝影的樂趣。還可以欣賞一些攝影大師的作品，提高自己的審美觀。學(xué)生不再是枯燥無味的學(xué)習(xí)，而是通過互動(dòng)活動(dòng)調(diào)動(dòng)學(xué)生積極性，激發(fā)學(xué)生學(xué)習(xí)該課程的興趣，使學(xué)生更加配合教師的教學(xué)，從而讓教學(xué)

106、更為容易地進(jìn)行。</p><p>　　作為HTML和Javascript的初學(xué)者，在制作過程之中，遇到了很多問題，通過努力，解決了其中的大部分，但還是有小部分遺留。所以本設(shè)計(jì)中存在著不足之處，例如習(xí)題測(cè)試就只有選擇題而沒有解答題，主要是對(duì)于解答題不知道如何進(jìn)行關(guān)鍵字的得分批改。簡(jiǎn)單模擬也只是簡(jiǎn)單的一個(gè)畫面截圖，而不能通過按鈕調(diào)節(jié)遠(yuǎn)近，更沒有實(shí)現(xiàn)3D的拍照效果，不能讓學(xué)生體會(huì)到真正的攝影效果。</p>

107、<p>　　這次畢業(yè)設(shè)計(jì)對(duì)于我來說，既是一次機(jī)遇，又是一次挑戰(zhàn)。這是一次證明我能行的機(jī)會(huì)，我把握住了這次機(jī)會(huì)。通過這次的畢業(yè)設(shè)計(jì)，我學(xué)到了很多東西，包括攝影知識(shí)，也包括HTML和Javascript的知識(shí)。更讓我找到了很多很好的攝影網(wǎng)站和編程網(wǎng)站。通過這次畢業(yè)設(shè)計(jì)實(shí)踐，增強(qiáng)了自己的思考能力，解決問題能力和動(dòng)手能力。也增強(qiáng)了自己的信心和耐心。同時(shí)，我也明白了遇到問題著急并不是辦法，只有靜下心來，慢慢分析問題才能找到解決方法。&

108、lt;/p><p><b>　　致謝</b></p><p>　　在這幾個(gè)月的時(shí)間里，從對(duì)課題的理解，方案的設(shè)計(jì)，到設(shè)計(jì)的實(shí)現(xiàn)，再到論文的寫作，中間有著自己的努力，更有著老師和同學(xué)的關(guān)心和巨大的幫助。</p><p>　　感謝胡志凌老師的指導(dǎo)與引領(lǐng)。攝影課件就是由胡老師提供的，他精益求精的工作作風(fēng)，細(xì)心嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度以及對(duì)我們不厭其煩的指導(dǎo)，深深地