《摄影课程CAI软件开发毕业论文.doc》由会员分享，可在线阅读，更多相关《摄影课程CAI软件开发毕业论文.doc（28页珍藏版）》请在三一办公上搜索。
1、本科毕业设计（2012届）题 目摄影课程CAI软件开发学 院计算机学院专 业数字媒体技术班 级08052512学 号08054215学生姓名陈奇斌指导教师胡志凌完成日期2012年5月诚 信 承 诺我谨在此承诺：本人所写的毕业论文摄影课程CAI软件开发均系本人独立完成，没有抄袭行为，凡涉及其他作者的观点和材料，均作了注释，若有不实，后果由本人承担。 承诺人（签名）： 年 月 日摘 要随着全球信息化网路化的大潮，计算机逐步渗透到教育领域，以多媒体为主导的现代教学模式逐渐取代了传统的教师-黑板-教科书-学生的教学模式，其教学内容集文字、图像、声音、动画、影视为一体，比传统的教科书形象生动，更能激发学
2、生的学习乐趣。伴随着互联网的普及，愈来愈多的人开始利用互联网学习，尤其是学生，对于互联网更是情有独钟。同时，随着数码产品的更新换代，愈来愈多的人拥有自己的摄影机，越来越多的人喜欢拍摄身边的点点滴滴，但是他们却并不一定拥有相对的摄影知识，未必能拍摄出自己满意的作品。对于这样的一种现状，制作一个网页形式的摄影课程CAI软件就显得非常重要了，它不仅能满足学生的学习需求，同时也能让不是学生的摄影爱好者能学习到基础的摄影知识。本设计采用Dreamwear为主要设计工具，同时加入Javascript脚本语言，以及级联样式表（简称CSS）排版模式，使网页呈现出不同的静态动态效果，避免枯燥单调。同时插入Fla
3、sh制作的swf格式视频，以及PhotoShop处理后的图片，使整个网页内容充实而且生动活泼。关键词：Javascript；CSS；摄影；课程；网页；AbstractAs the tide of the global information network, the computer gradually penetrate into the field of education, multimedia-oriented teaching mode gradually replaced the teaching mode of traditional teachers blackboard-te
4、xtbook -students, the teaching content of text, images, sound, animation, film and television 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 the Internet, as a group
5、of University students has a special liking for the Internet. Meanwhile, with the upgrading of digital products, more and more people own their own cameras, more and more people love to take photos for everything arounds us, but they not necessarily have relative knowledge of photography, and may no
6、t be able to shoot their satisfactory work. Photography course CAI software is very important to make a web form for such a situation, it can not only meet the learning needs of students, and also make enthusiasts that not the students of photography learn basic photography knowledge. This design us
7、es 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. Meanwhile, it insert the video of swf format made by Flash, as well as the images dealed with
8、 by the Photoshop, which make the whole web content enrich and lively.Key words: Javascript；CSS；photography；course；web；目录1 引言12 概论22.1 计算机辅助教学CAI22.2 多媒体课件概述22.3 多媒体课件的五个特性32.4 多媒体课件制作工具42.5 本设计软件制作工具63 总体设计83.1 跳转页面设计83.2 主页设计83.3 知识详解页面设计93.4 简单测试页面设计93.5 作品展示页面设计93.6 简单模拟页面设计93.7 友情链接页面设计94 具体实现1
9、04.1 跳转页面实现104.2 首页实现114.3 知识详解页面实现114.4 简单测试页面实现144.5 作品展示页面实现154.6 简单模拟页面实现174.7 友情链接页面实现185 软件测试205.1 测试的目的205.2 本设计测试206 结论21致谢22参考文献231 引言随着时代的进步，电子信息技术飞速发展，计算机的应用已经遍及到各行各业，教育领域也不例外。世界各国都高度重视电子信息技术对教育的影响，推出一系列政策和举措加快教育领域的信息化步伐。我国信息化教育发展也初具规模。我国的现代教育正逐步摆脱传统的教师-黑板-教科书-学生的教学模式，提出大力发展素质教育，提倡培养学生的积极
10、主动性，创新能力及自主学习的能力。目前，我国无论大学，中学，还是小学，计算机辅助教学的应用越来越多,于传统教学模式相比，计算机辅助教学综合应用多媒体、超文本、人工智能和知识库等计算机技术，克服了传统教学方式单一、片面的缺点。它的使用有效地缩短了学习时间、提高了教学质量和教学效率，实现了最优化的教学目标。所以受到了广大师生的一致认可和好评。正是基于这样的一种发展现状，计算机辅助教学在教育领域的作用越来越大，计算机辅助教学软件开发也随之水涨船高。同时，随着互联网的高速发展，越来越多的人接触并使用互联网。中国互联网络信息中心（CNNIC）2012年1月在京发布第29次中国互联网络发展状况统计报告显示
11、，截至2011年12月底，中国网民规模突破5亿。尤其是学生，都或多或少会通过互联网学习。摄影，像绘画与速写一样表现着世界。现在摄影已不是摄影大师的专利，已经成为一种时尚，不管走到哪里，都能看见很多人拿着手机、照相机拍摄风景、人物、以及一切他们所喜欢的事物。能这样记录生活中的点点滴滴是好事，是热爱生活的表现。但是很多人缺乏摄影的相关知识，不能更好的表现被拍摄事物的本质，所以摄影知识的普及就迫在眉睫。虽然网上也有很多的摄影相关网站，但是对于教学基础摄影知识这块还是有所欠缺。正是基于以上情况，本设计摄影课程CAI软件开发采用网页的形式实现。无论是学生，还是摄影爱好者，都能通过互联网访问它。本设计将原
12、本抽象的概念具体化，知识详解课堂以文字结合图片的方式栩栩如生的向学生讲诉了摄影基础知识及摄影技巧。简单测试能让学生强化自己所学的知识，而拍照模拟则能使学生在课堂内就有拍摄的感觉，提升学生的兴趣，作品欣赏又能吸引学生的注意力，培养学生的审美。本设计的宗旨是使学生能更好，更有效地去学习，从而提升教学效率，提高教学质量。2 概论2.1 计算机辅助教学CAI计算机辅助教学(Computer Aided Instruction ，简称CAI)是在计算机辅助下进行的各种教学活动，以对话方式与学生讨论教学内容、安排教学进程、进行教学训练的方法与技术。CAI为学生提供一个良好的个人化学习环境。综合应用多媒体、
13、超文本、人工智能和知识库等计算机技术，克服了传统教学方式上单一、片面的缺点。它的使用能有效地缩短学习时间、提高教学质量和教学效率，实现最优化的教学目标。由于计算机在程序的控制下可以通过输出设备向人们传递各种信息，通过输入设备接受使用者输入的各种信息，并对输入的信息进行判断，根据判断结果进行转移和提供有针对性的提示信息。因此把具有教学功能的软件配置到计算机中，计算机像教师一样，与学生构成教学系统，完成教学任务。计算机辅助教学可以起到与其他传播媒体一样的呈现知识，给予反馈等动作，但是由于其有着存储、处理信息及交互反馈等特殊性能，因此CAI具有如下特点：（1）大容量的信息呈现。（2）学生可以控制学习
14、内容和学习进度。（3）CAI系统可以通过提问、判断、转移等交互活动，分析学生的能力和学习状况，调节学习过程，实现了因人施教的教学原则和及时反馈原则。通过与学生的交互活动，调动学生的学习积极性。（4）因为教学进度由学生控制和并且保持和学生的交互活动，学生在CAI活动中处于一种积极，主动的精神状态，不像被动受教育时那么容易疲劳和受干扰，从而可以取得较好的教学效果。（5）目前的网络技术使CAI可获得群体的支持，有着良好的人员基础， CAI与传统媒体的不同之处是：传统媒体如投影、电视、电声等媒体辅助教学，只能单向传递信息，没有交互作用。而CAI具有很强的交互功能，人机交互方式也十分丰富。（6）CAI实
15、现了学科教学、计算机技术学、教育学和艺术学的完美结合。2.2 多媒体课件概述多媒体课件简单来说就是老师用来辅助教学的工具，创作人员根据自己的创意，先从总体上对信息进行分类组织，然后把文字、图形、图像、声音、动画、影像等多种媒体素材在时间和空间两方面进行集成，使他们融为一体并赋予它们以交互特性，从而制作出各种精彩纷呈的多媒体应用软件作品。 多媒体课件具备以下特点： （1）丰富的表现力：多媒体课件不仅可以更加自然、逼真地表现多姿多彩的视听世界；还可以对宏观和微观事物进行模拟，对抽象、无形事物进行生动、直观的表现；对复杂过程进行简化再现等等。这样，就使原本艰难的教学活动充满了魅力。 （2）良好的交互
16、性：多媒体课件不仅可以在内容的学习使用上提供良好的交互控制，而且可以运用适当的教学策略，指导学生学习、更好地体现出“因材施教”的个别化教学。（3）极大的共享性：网络技术的发展，多媒体信息的自由传输，使得教育在全世界交换、共享成为可能。以网络为载体的多媒体课件，提供了教学资源的共享。多媒体课件在教学中的使用，改善了教学媒体的表现力和交互性，促进了课堂教学内容、教学方法、教学过程的全面优化，提高了教学效果。2.3 多媒体课件的五个特性（1）教学性 在多媒体教学软件系统中，通过多媒体信息的选择与组织、系统结构、教学程序、学习导航、问题设置、诊断评价等方式来反映教学过程和教学策略。所以在多媒体教学软件
17、系统中，大都包括知识讲解、举例说明、媒体演示、提问诊断、反馈评价等教学基本部分。（2）科学性在多媒体教学软件系统中，教学内容是用多媒体信息来表达的，各种媒体信息都必须是为了表现某一个知识点的内容，为达到某一层次的教学目标而设计、选择的。各个知识点之间应建立一定的关系与联系的形式，以形成具有学科特色的知识结构体系。（3）交互性多媒体教学软件必须具有友好的人机交互界面。交互界面是学生和计算机进行信息交换的通道，在教学软件系统中，交互界面的形式有图形菜单、图标、按钮、窗口、热键等。（4）集成性多媒体教学软件是由文本、图形、动画、声音、视频等多种媒体信息集成在一起，经过加工和处理所形成的教学系统。具有
18、多种媒体的集成性，图文声像并茂及较强的表现力和感染力，能引起学生的学习兴趣和提高学生的学习积极性（5）诊断性 多媒体教学软件必须具有诊断评价、反馈强化的功能。在多媒体教学软件系统中，通常设置一些问题作为形成性练习，向学生提问并要求学生做出反应。对于学生的学习反应，多媒体教学软件应做出相应的反馈，给出评价信息。2.4 多媒体课件制作工具（1）PowerPoint微软公司出品的制作幻灯片的软件，此软件制作的电子文稿广泛地应用于学术报告，会议等场所，有好多教师也在用此软件制作课件，就此软件来说，他的优点是做课件比较方便，不用多学，很容易上手，制作的课件可以在网上通过IE来进行演示文稿的播放；但就其功
19、能来说就相对差了一点，图片、视频、文字资料的展示制作较为方便，很容易起到资料展示的作用，单在交互性上就略显不足。尽管如此，它还是现阶段使用最广泛的软件。（2）Authorware Authorware是Macromedia公司推出的多媒体开发工具，由于它具有强大的创作能力、简便的用户界面及良好的可扩展性，所以深为广大用户的欢迎，成为应用最广泛的多媒体开发工具，一度被誉为多媒体大师，此软件的主要特点是：Authorware是基于图标和流线的多媒体创作工具，具有丰富的交互方式及大量的系统变量的函数、跨平台的体系结构、高效的多媒体集成环境和标准的应用程序接口等。可用于制作网页和在线学习的应用软件。A
20、uthorware的交互比较强大，就是不会编程也可以做出一些交互比较好的课件。但是做起动画来比较困难，如果不借助其他的软件，做一些好的动画来说是根本不可能的（毕竟这不是专业的动画制作软件）。虽然有很多插件，但打包以后还要带着走，所以对于制作一些生动有趣的课件还是比较困难的。另一个缺点就是打包后的文件比较大，不利于传播。（3）DirectorDirector是Macromedia公司推出的多媒体开发工具，是全球多媒体开发市场的重量级工具，据统计，它在美国专业CDROM开发市场占据85%以上的份额。它不仅具备直观易用的用户界面，而且拥有很强的编程能力（它本身集成了自己Lingo语言），全称是：Ma
21、cromedia Director Shockwave Studio。用Director制作多媒体动画，无论是演示性质的还是交互性质的，都显出其专业级的制作能力和高效的多媒体处理技术。图像，文本，声音，动画等等这些多媒体元素，在Director中都可以非常方便而有机地结合起来，创造出精美的动画。因为非常专业，所以教师用此软件制作课件的不多，但界面非常漂亮，交互也比较好。特点：帧动画与编程相结合的多媒体编制软件，用帧可以做出很多漂亮的动画，有Lingo语言可以编出你想要的交互，引入的外部的多媒体元素非常丰富。可是生成的文件比较大，在网络传输方面做得还不是很理想。对于初学者来说，用它来做课件比较困
22、难。（4）FlashFlash是Macromedia公司出品的，用在互联网上动态的、可互动的shockwave。它的优点是体积小，可一边下载一边播放，这样就避免了用户长时间的等待。Flash可以用其生成动画，还可在网页中加入声音。这样你就能生成多媒体的图形和界面，而使文件的体积却很小。Flash虽然不可以像一门语言一样进行编程，但用其内置的语句并结合Javascripe，也可做出互动性很强的主页来。Flash另外一个特点就是必须安装插件PLUG-IN，才能在浏览器上使用，这就避免了浏览器不同而引起的差异。（5）FrontPageFrontPage是制作基于Web风格的多媒体CAI课件的软件，它
23、可以设计页面的背景色和标题字体，快速建立超级链接，插入图像及其他教学素材。FrontPage在使用和操作各方面都与Office非常相似，而且对一般教师来说，不需要了解任何HTML程序即可使用FrontPage轻松地制作网络式多媒体CAI课件。FrontPage制作课件的不足和PowerPoint一样，不能设计复杂的交互性练习题，其优势在于网络功能，教师在自己的计算机上制作好网页课件，上课时，通过校园局域网，在多媒体教室可以访问该网页，甚至还可以通过Internet与其他学校的教师交流。（6）ActionAction是面向对象的多媒体CAI制作软件，具有较强的时间控制特性，它在组织连接对象时，除
24、了考虑其内容和顺序外，还要考虑它们的同步问题。例如，定义每个教学媒体素材的起止时间、重叠片段、演播长度等。也可以制作简单的动画，操作方法比较简单。（7）Visual BasicVisual Basic是一种基于程序语言的集成包，在多媒体CAI课件制作中提供对窗口及其内容的图形创作方式。对于从未使用过多媒体编辑软件的教师来说，可选择操作相对容易的洪图（Hong Tool）或Action，这类软件不需要编程，而且操作界面及制作工具简单直观；如果教师对使用多媒体编辑软件已有一定的经验，但不会编程，则可选择Authorware这类不需要编程即可生成课件的软件；对于有编程能力的计算机教师则可用Visua
25、l Basic制作课件。2.5 本设计软件制作工具随着互联网的继续发展，网络教学必定会成为将来的主流教学之一。本设计着眼于将来，制成网页形式的多媒体CAI课件，即有PPT良好的展示功能，更有Authorware极强的互动性，还有Director漂亮的动画效果，同时有很强的传播性。如果有服务器的支持，每个人都能通过互联网访问它。当然这种形式的课件也有一定的缺点：如果要通过互联网访问，必须有服务器，这是一笔不小的开支。同时，制作这样的课件需要一定的编程基础。本设计是采用Dreamwear为主要设计工具。 Dreamwear是由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口
26、，亦有HTML编辑的功能。Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与其他的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。最主要的是Dreamwear是一款结合可视化和代码的双操作工具，对于一些HTML标签，Dreamwear完全
27、可以采用可视化操作来实现，对于不懂HTML的人来说也比较容易上手。HTML（Hypertext Markup Language），即超文本标记语言，是用于描述网页文档的一种标记语言。HTML是一种规范，一种标准，它通过标签来标记要显示的网页中的各个部分。网页本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标签解释和显示其标记的内容，对书写出错的标签将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标签
28、可能会有不完全相同的解释，因而可能会有不同的显示效果。 HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。 网页的本质就是HTML，通过结合使用其他的Web技术（如：脚本语言、CSS、组件等），可以创造出功能强大的网页。因而，HTML是Web编程的基础，也就是说万维网是建立在超文本基础之上的。HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，主要特点有简易性、可扩展性、平台无关性3个主要特点。本设计
29、主要采用HTML为基本编程语言，对于一些交互性活动和动态效果，则需要依靠Javascript实现，Javascript是由Nombas开发的一种可以嵌入网页中的脚本语言，是一种动态、弱类型、基于原型的语言，通过浏览器可以直接执行。是目前网页设计中最容易学又最方便的语言。可以利用Javascript轻易的做出亲切的欢迎信息、漂亮的数字钟、有广告效果的跑马灯及简易的选举等效果，还可以显示浏览器停留的时间，这些特殊效果提高网页的可观性。同时，网上有很多很好的Javascript源码供使用，可以减少一定的工作量。而网页的排版则通过级联样式表（Cascading Style Sheet 简称CSS）实现
30、，它是一种用来表现HTML或 XML 等文件式样的计算机语言，是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标签的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。通过CSS样式，能让网页课程更加生动活泼，吸引学
31、生的注意力，激发学生的学习积极性，提高学习效率3 总体设计本设计基本结构如图3-1所示，共分为7个页面，分别是：跳转页面、首页、知识详解页面、简单测试页面、作品展示页面、简单模拟页面、友情链接页面。图3-1 设计总体结构图3.1 跳转页面设计跳转页面背景是蓝天白云下的一条阳光大道，大道尽头写着欢迎进入摄影课堂，表示这是一条通往摄影知识殿堂的康庄大道。在页面上端滚动着一幅幅漂亮的风景照，预示着摄影知识殿堂就如同画上一样绚丽多彩，引人入胜。当鼠标指针停留在图片上时图片就停止滚动，当鼠标离开图片时又恢复滚动。点击欢迎进入摄影课堂就能进入主页面。3.2 主页设计主页面是一个扇形的导航栏，导航栏一共分为
32、5个菜单，分别是：知识详解、简单测试、作品展示、简单模拟、友情链接。点击菜单就能进入相应的模块。本设计的主页最大的特点就是简洁明了，一目了然，但却不单调。配上淡绿色的背景，给人一看就有耳目一新的感觉，从而激发学生学习该课程的兴趣。3.3 知识详解页面设计知识详解页面以老师的PPT为主要内容，如果将PPT直接导出为网页，它的排版显得很乱，让人产生一种烦乱的错觉，不适合作为课程内容。所以将PPT导出为图片，通过Flash将图片制作成swf格式的视频，在视频中添加上一页和下一页两个按钮，实现翻页功能。然后将视频导入到网页中，通过CSS将目录和视频进行排版，使整个页面布局整洁有序，是学生在一种轻松愉快
33、的状态下学习。整个知识详解模块以图片结合文字的形式向学生介绍摄影技术概论和摄影发展史，以及一些摄影技法，让同学们初步了解关于摄影方面的知识。3.4 简单测试页面设计简单测试页面罗列了一些基本的摄影知识选择题，每个选择题有四个选项，选择完后有得分批改按钮，点击之后可以显示你的得分。如果想重新测试，点击重新测试按钮就能开始重测。另外还有正确答案按钮，点击之后显示正确答案。当然，如果不想显示正确答案，那么点击隐藏答案按钮就能隐藏正确答案。虽然题目只是摄影知识海洋中的一个小水滴，但是或多或少能让学习者检测下自己的摄影基础知识扎实程度。3.5 作品展示页面设计作品展示页面收集了一些世界摄影史上著名的摄影
34、作品供学生欣赏，有社会写实照，人物动态照，静态风景照。有摄影大师思索良久的经典拍摄，也有心血来潮抓拍的瞬间，通过不同类型的大师作品，吸引学生的眼球，让学生揣摩及体会大师的摄影作品，从大师的作品中感悟出属于自己的东西，培养学生的审美以及取景技巧。3.6 简单模拟页面设计简单模拟页面制作了一个简单的镜头框架，可以通过鼠标实现上下左右移动，需要拍摄时点击鼠标左键就能拍摄下该镜头框架里面的图片，拍摄后的图片会显示在左下角。通过这样的一个简单模拟实验，让学生在室内就能身临其境的感受拍摄的乐趣，提高学生的学习积极性，帮助学生了解拍摄过程中怎么对拍摄内容进行切割才能达到一个更好的效果。3.7 友情链接页面设
35、计友情链接页面提供了很多国内外知名的摄影网站，学生可以根据自己的兴趣有选择的点击链接就能访问这些网站，而不需要自己去输入网址或者是百度谷歌。该模块有助于加强学生学习的自主性，拓展学生的学习面，补充学生的课外知识。4 具体实现4.1 跳转页面实现本设计的第一个页面就是跳转页面，如图4-1所示图4-1 跳转页面跳转页面通过background标签插入存放在img文件夹中的背景图片1.jpg，然后以“欢迎进入摄影课堂”语句将摄影课堂知识链接到首页，这些都是简单的HTML代码。通过Dreamwear的设计模块直接插入图片和链接就能实现。顶端的滚动图片是依靠Javascript代码实现的。滚动图片公有7
36、张，图片宽度为325px,为了实现无缝滚动，先获得7张图片的引用，然后将7张图片重复调用2次，所以总的图片为14张。然后通过图片宽度乘以图片组数确定两组图片的宽度，即为4550px。确定好这些数据后调用setInterval函数以30毫秒为周期执行setInterval里的代码，每执行一次，图片的左边界到框架左边界的偏移量加-1px，超出框架的图片被隐藏，如此循环，直到图片的左边界到框架左边界为一组图片的宽度2275px，也就是7张图片滚动一次完成时，将图片的左边界到框架左边界的偏移量重置为0，即重新开始滚动，这样就实现了图片的无缝循环滚动。如果不将图片重复调用，最后一张图片从右边向左边滚动时
37、，它后面就不会出现图片滚动，产生断档。所以必须重复调用一次图片。当鼠标停留在滚动图片上时，图片就停止滚动，这是调用clearInterval()函数实现的，鼠标指针移到图片模块时调用clearInterval()清除setInterval创建的循环，当鼠标移开时又重新执行setInterval创建的循环，即移开鼠标后图片又开始滚动了。4.2 首页实现点击欢迎进入摄影课堂就进入了首页，其界面如图4-2所示图4-2 首页整个首页以绿色和黄色作为背景色，简单明了，一目了然，给人一种清爽整洁的感觉，而不像其他主页那样花样繁多，令人眼花缭乱。因为人的思维有一种先入为主的概念，如果一开始就显示太多的内容，
38、会让学生尤其是初学者产生一种畏惧心理，畏惧自己一下子接受不了那么多的内容,滋生对学习的消极态度，从而影响学生的后续学习。所以本设计尽量的将首页精简化，不放置太多杂碎的内容。整个首页其实就是一个导航栏，利用CSS将其排列成一个扇形，具体的实现方式就是设置每个菜单的位置属性，计算左边距和上边距将其定位在合适的位置。当鼠标停留在菜单选项上时会淡入一个圆形的填充框，同时菜单图案背景亮度变高，表示你选中了该菜单选项，将鼠标移出时圆形的填充框会逐渐淡出。这样的效果是通过fadeIn和fadeOut两个函数实现的。具体是利用hover类在鼠标移到菜单元素上时向此菜单元素添加特殊的样式，并调用animate函
39、数设置属性，即圆形填充框，然后通过fadeIn函数淡入的显示这个样式，当鼠标移出时调用fadeOut函数淡出隐藏这个样式，同时再一次调用animate函数，将菜单属性图片换成高亮度背景的图片。4.3 知识详解页面实现在首页中点击知识详解菜单，就开始真正的进入摄影课堂了。知识详解所有内容均来自摄影课件PPT，是老师课堂上所用的课件，共分为12章，每一章是一个swf格式的视频，是利用PPT导出为图片，然后将图片导入到Flash中制成视频再插入到网页中实现的。视频内容从初步认识摄影到摄影技术技法，从黑白胶卷冲洗到数字图像的后期制作，由易而难，由始而终，深入浅出的讲解了基本的摄影知识和一些摄影技巧以及
40、胶卷的冲洗和图像的后期制作，让同学们初步了解关于摄影方面的知识，通过所学的摄影技法运用到实际拍摄中，提高自己的拍摄技巧，更提升自己的摄影品味。 知识详解页面采用了上方固定，左侧嵌套的框架页，其整体布局图4-3所示图4-3 知识详解页面整个页面采用黄色作为背景色，给人一种轻快、热情、充满希望和活力的印象，让学生在学习中有一种积极向上，奋发拼搏的心态。上方是一个标题栏， 标题栏右侧有返回首页四个字，点击就能返回到首页。左侧是一个课程的导航菜单，用HTML的table标签绘制了一个1列12行的边框宽度为1的表格，每一行都是一节课程的表题。每一行的内容都是对应摄影课程的一个链接，点击之后就会跳转到相应
41、页面。右侧则是插入的swf格式的视频。视频是由Flash制作的，以第一章视频制作为列，将第一章的PPT内容导出为图片，然后全部导入到Flash库中，将Flash的文档大小改成和图片大小一致，这样就不会出现空白场景，在场景中将所有图片依顺序导入到图层的每一帧，每一帧都为关键帧。再利用按钮组件创建上一页和下一页两个按钮，将上一页按钮命名为btP，下一页按钮命名为bt。新建一个图层，将按钮放置在新建的图层的合适位置，然后在按钮处插入如下代码：import flash.events.MouseEvent;this.stop();var num =1;bt.addEventListener(MouseE
42、vent.CLICK , onClick);function onClick(e:MouseEvent):void /鼠标点击bt按钮是执行下列操作num+;trace(num);this.gotoAndStop(num);if(num 104)num = 104;btP.addEventListener(MouseEvent.CLICK , onClickP);function onClickP(e:MouseEvent):voidif(num3)num =2;num-;trace(num);this.gotoAndStop(num)先将num初始值置为1，每当鼠标点击下一页时执行if循环将
43、num值加1，并通过this.gotoAndStop(num)语句跳转到num值的那一帧。当num值大于104也就是最后一张图片时，将num置为104，则点击下一页时num值始终104，即始终停留在104帧。同理，当num值小于3，也就是num值为2时，将num值设置为2，在自减减后为1然后跳转到第一页，接下来继续执行循环，所以始终停留在第一页。这就是翻页功能的具体实现。上一页按钮也是如此。当然还有一种方法就是直接将PPT课件导出为网页形式，其排版效果如图4-4所示图4-4 PPT导出的网页显示图它是通过点击左侧的导航栏链接到文件里的图片，在右侧显示。整个排版杂乱无章，容易让人心浮气躁，不适合
44、作为课程。相比较之下，本设计采用了第一种方法，将每一章课程内容制作为一个视频插入到右边的网页中，通过左边的导航栏链接到相应的课程视频，在视频里通过上一页下一页实现翻页，布局清爽，条理清晰，思路明确，很适合作为课程。4.4 简单测试页面实现在首页中点击简单测试菜单就能进入简单测试页面，其界面如图4-5所示图4-5 简单测试页面布局和知识详解页面一样，也是采用了上方固定，左侧嵌套的框架页。同样上方也是一个标题栏， 标题栏右侧有返回首页四个字，点击就能返回到首页。左侧则是五套习题的导航栏，点击就能在右侧显示测试题，如图4-6所示 图4-6 简单测试习题显示图每套测试题共有十个选择题，每个选择题分4个
45、选项，在页面底部有如图4-7所示的按钮图4-7 按钮点击开始评分按钮能对学生做的测试题进行批改并显示分数，每一题为一分。重新测试按钮则能清除成绩，方便学生再测一次。如果想知道正确答案则可以点击正确答案按钮，就会在下方显示正确答案，方便学生比对找出自己的错误并改正。点击隐藏答案则能将答案隐藏。简单测试模块具体实现是对测试题的每个选项设置一个人value值，鼠标点击选择答案，如果选择的是正确答案则设置value=1，否则取得value=0。然后将分数属性list初始值设为0，通过if语句判断测试题，如果value值不为空并且等于1，即学生做了选择题而且选择的是正确答案，将list加1，以此类推，这
46、样就实现了评分效果。重新测试则是调用clearquiz函数将每个选项的list值重置为0，相当于清除了数据，这样学生就可以重新做这套测试题了。显示隐藏答案功能调用了Object. style.display属性，具体代码如下所示：1 C ; 2 B; 3C; 4 A; 5 B; 6 B; 7 A; 8 A; 9 B; 10 D。将display属性设置为block时显示txt对象，将其属性设置为none时隐藏txt对象。简单测试页面实现了习题练习批改的功能，能让学生在练习中强化自己所学的摄影知识，进一步理解摄影的真谛。4.5 作品展示页面实现在首页中点击作品展示菜单就进入了作品展示页面，页面显
47、示如图4-8所示图4-8 作品展示页面整个页面只放置一张摄影作品，这是因为考虑到如果一个页面放置太多摄影作品，可能会让学生眼花缭乱，不能静心慢慢欣赏一幅作品，所以整个页面只放置一张，利用上一页和下一页两个翻页按钮实现摄影作品翻页，保持一个页面一张摄影作品。这个页面的翻页功能不再是利用Flash将图片制成swf格式的视频插入网页，而是将所有39张摄影图片放置在img文件夹内，并用数字由小到大依次对图片命名：1.jpg、2.jpg、3.jpg，通过计算图片名称数值来获得图片路径的方法。在此方法中定义一个p(n)函数，如下所示：function p(n)var img = document.getElementById(img);var n = Number(img.title)
