攝影課程cai軟件開發(fā)畢業(yè)論文

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

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

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

4、<p>　　關(guān)鍵詞：Javascript；CSS；攝影；課程；網(wǎng)頁；</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 計算機輔助教學(xué)CAI2</p><p>　　2.2 多媒體

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)點擊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)點擊下一頁時執(zhí)行if循環(huán)將num值加1，并通過this.gotoAndStop(num)語句跳轉(zhuǎn)到num值的那一幀。當(dāng)num值大于104也就是最后一張圖片時，

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

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

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

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

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

79、1，以此類推，這樣就實現(xiàn)了評分效果。重新測試則是調(diào)用clearquiz函數(shù)將每個選項的list值重置為0，相當(dāng)于清除了數(shù)據(jù)，這樣學(xué)生就可以重新做這套測試題了。</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時顯示txt對象，將其屬性設(shè)置為none時隱藏txt對象。</p><p>　　簡單測試頁面實現(xiàn)了習(xí)題練習(xí)批改的功能，能讓學(xué)生在練習(xí)中強化自己所學(xué)的攝影知識，進一步理

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

83、個頁面只放置一張，利用上一頁和下一頁兩個翻頁按鈕實現(xiàn)攝影作品翻頁，保持一個頁面一張攝影作品。這個頁面的翻頁功能不再是利用Flash將圖片制成swf格式的視頻插入網(wǎng)頁，而是將所有39張攝影圖片放置在img文件夾內(nèi)，并用數(shù)字由小到大依次對圖片命名：1.jpg、2.jpg、3.jpg……，通過計算圖片名稱數(shù)值來獲得圖片路徑的方法。在此方法中定義一個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ù)把對象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ào)用p(-1)函數(shù)，點擊下一頁則調(diào)用p(1)函數(shù)，比如當(dāng)前img.title為9，當(dāng)點擊下一頁時調(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張圖片，這樣就實現(xiàn)了從第9張到第10張的翻頁。當(dāng)n值大于39時將n值設(shè)為1，即重新開始循環(huán)。當(dāng)n值小于1時，將n值設(shè)為39，即實現(xiàn)倒著循環(huán)。</

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

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

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

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

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

93、pics[3]，即顯示數(shù)組內(nèi)的第3張圖片。隨機顯示背景可以增加拍攝的可玩性，不然一直是同一張背景學(xué)生很快就會厭倦。</p><p>　　攝影框大小為300*200，鼠標(biāo)移動時攝影框也隨著移動，代碼如下所示：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個變量n_left,和n_top

95、，通過pageX 屬性和pageX 屬性計算鼠標(biāo)指針位置，而offset() 方法是返回元素相對于文檔的偏移，settings.viewFinder.width為攝影框?qū)挾?，settings.viewFinder.height為攝影框高度，通過表達式可以計算出鼠標(biāo)移動時攝影框的位置，然后通過攝影框的位置以及攝影框的大小將攝影框顯示在鼠標(biāo)位置，這樣攝影框就隨著鼠標(biāo)移動而移動，當(dāng)鼠標(biāo)移出圖片外時則攝影框不再移動，代碼如下所示</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)點擊時會截取攝影框內(nèi)的圖片，通過left和top以及攝影框的寬度和高度確定截取位置，同時調(diào)用append()函數(shù)將截取的圖片插入到左下端的div模塊中，該模塊最多存放三張圖片，當(dāng)截取到第四張圖片是調(diào)用remove()函數(shù)清除第一張圖片。通過上面的步驟就實現(xiàn)了攝影模擬的功能。</p><p>　　4.7 友情鏈接頁面實現(xiàn)</p><p>　　

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

99、返回主頁的鏈接。左右兩邊是上下浮動的動態(tài)導(dǎo)航條，導(dǎo)航條也是國內(nèi)外熱門攝影網(wǎng)站的鏈接，點擊就能鏈接到相應(yīng)網(wǎng)站。上下滾動效果是利用marquee標(biāo)簽實現(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屬性表示滾動速度，數(shù)值越大滾動越快。Scrolldelay是延時屬性，表示每執(zhí)行一步中間停留的時間，directio

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

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

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

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

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

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

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

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