网站设计基础--多媒体技术基础实验指导书.doc

《网站设计基础--多媒体技术基础实验指导书.doc》由会员分享，可在线阅读，更多相关《网站设计基础--多媒体技术基础实验指导书.doc（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、杭州师范大学 杭州国际服务工程学院网站设计基础（1）- 多媒体技术基础实验教学指导书（软 工）晏 明 编写2010 年 7 月 修订目 录第一部分 大纲和计划1、1 实验教学大纲 21、2 实验实施计划表 3第二部分 实验说明2、1 实验一：文字的设计、应用_1与静态界面的设计 62、2 实验二：文字的设计、应用_2与动态界面的设计 72、3 实验三：Photoshop与图形、图像处理（1） 82、4 实验四：Photoshop与图形与图像处理（2） 92、5 实验五：图形与图像处理（3）、声音技术 102、6 实验六：动画制作（Flash 动画制作） 112、7 实验七：多媒体软件脚本的设计

2、与Flash初步 122、8 实验八：Dreamweaver平台的使用 13第三部分 实验评分标准3、1 实验评分标准 14第一部分 大纲和计划1、1 实验教学大纲一、 课程中文名称： 网站设计基础（1）-多媒体技术基础二、 课程编码： ( 软件工程 )三、 课程总学时： 48 学时 理论： 24 学时；实验： 24 学时四、 课程总学分: 2、5 学分 五、 适用专业和年级：适用于软件工程专业 第1学期六、 实验的目的与任务：通过实验，应该掌握如下知识点：了解常用的图像文件格式。Windows上应用最广泛的BMP（Bitmap）位图格式、因特网上广泛使用的GIF（Graphics Inter

3、change Format）格式以及具有较高压缩比的JPEG格式。文字设计类。掌握文字素设计、制作工具COOL 3D 、Photoshop等的基本使用方法。图形图像处理。掌握如何设定与改变图形图像的尺寸、类型；学会图像提取与重组的基本方法；学会使用ImageReady工具制作简单GIF逐帧动画。动画制作。学会设计网页标题动画，动画要求是矢量多彩色变形动画；初步学会设计沿轨迹运动的动画；学会给Flash动画配上一段音频，会使动画变得更加生动。音频处理。能使用“录音大师”软件进行录音；能从CD（或网络）中截取一段音频文件，进行编辑、剪辑、合成。能使用“录音大师”软件从较长的音频文件中，截取、重组一

4、段音频文件，应用于自己的作品之中。多媒体著作工具。会用Flash 9 （或Dreamweaver平台）将各种媒体合成，会调试已制作的软件, 进行进一步修改。本实验课共安排了8个实验，近50个任务来帮助学习者进一步熟练掌握学过的知识，强化实际动手能力。七、 主要仪器设备及台（套）数：本实验需要计算机设备一套，需要安装的软件有：Flash 9、Photoshop CS 简体中文、各类播放器、录音大师、COOL 3D 、Powerpoint， 还有Dreamweaver。八、主要实验教材（指导书）及参考用书：1 晏明，网站设计基础（1）-多媒体技术基础实验指导讲义，自编讲义，2010、7 修订版2

5、徐帆等，Photoshop CS3图像处理简明教程，清华大学出版社，2008、9、九、成绩考核方式及评分标准：自编讲义多媒体技术基础实验指导讲义中已经明确规定每个实验的目的、任务、主要步骤。教师根据学生通过FTP上交的实验报告和实验作品确定其完成数量和质量、进行评分，占总分的40%。十、 实验开出率：100%十一、实验项目与要求：序号实验项目名称时数项目要求项目类型项目性质每台（套）仪器人数目的要求实验耗材定额（按自然班）1文字的设计、应用（1）与静态界面的设计3必修操作综合1浏览、学习多媒体作品范例，了解多媒体在实际生活、工作中的应用范围与方法。学习设计、制作多媒体作品的基本要求。2文字的设

6、计、应用（2）与动态界面的设计3必修操作设计1学会应用多媒体素材制作工具COOL 3D 、Photoshop等创意、制作文字素材的方法3Photoshop与图形、图像处理（1）3必修操作综合1初步掌握编辑图形、图像的基本要求。初步学会应用Photoshop创意、制作图像素材的方法。4Photoshop与图形、图像处理（2）3必修操作设计1熟练应用Photoshop软件, 对图像及图像素材进行放大、缩小、修改、叠加等操作。能应用Photoshop软件进行图像创意、设计5图形与图像处理（3）、声音技术3必修操作综合设计1用Photoshop进行图像创意、设计。了解声音文件的原理，会录制声音文件，会

7、对声音文件进行剪接、混音等操作。能对*、wav、*、mp3、*、mid文件进行编辑、互相转换。6动画制作（Flash 动画制作）3必修操作综合设计1初步掌握使用Flash 制作Flash 软件界面的技巧与方法，应用Flash 制作按钮、元件的基本方法，沿轨迹运动动画的技巧与方法。7多媒体软件脚本的设计与Flash 初步3必修操作综合1掌握Flash的基本功能：能熟练的将文字、图像、声音组合在文件之中；能应用Flash的功能编制二维动画，并将动画与配音同步播放；会用Flash将各部件合成， 会调试已制作的软件, 进行进一步修改。8Dreamweaver平台的使用3必修操作综合设计1学习Dream

8、weaver平台下网站框架的设计与制作，多媒体元件的组合与各种素材的调用及库与模块的应用。注：1、项目要求：必修、选修、其他；2、项目类型：演示、操作、模拟；3、项目性质：验证、综合、设计、研究。撰稿人： 晏明 审稿人： 1、2 网站设计基础（1）-多媒体技术基础实验大纲及其实施计划课程综述本课程要求学生经过学习，掌握多媒体基本理论知识，掌握编制应用软件的基本技能, 内容涉及：文字设计与组织、图形图像的绘制与编辑、 声音的录制与剪接、动画基础知识、多媒体制作平台（包括网站设计平台）的使用、多媒体软件脚本的设计六个部分。并要求学生能独立完成教学软件、产品宣传、广告设计、网站等（其中之一）应用软件

9、的一个片段的设计与实现。实验设置总体说明本实验旨在提高学生实际多媒体作品设计能力，其中包括各类媒体的素材的采集、编辑、设计、创作，要求每位学生都能掌握编制应用软件的基本技能。实验重在消化吸收范例的技术特点、自己动手操作，和个性化创作。本大纲的实验内容与设置可以根据多媒体技术实际发展的情况进行调整。实验名称(选做实验后面加*号)1文字的设计、应用（1）与静态界面的设计2文字的设计、应用（2）与动态界面的设计3Photoshop与图形、图像处理（1）4Photoshop与图形、图像处理（2）5图形与图像处理（3）、声音技术6动画制作（Flash 动画制作）7多媒体软件脚本的设计与Flash平台8D

10、reamweaver平台的用法实验占课程总课时、学分比例情况实验课时占24课时/48课时实验资料存档形式(纸质/光盘)光盘注：该表由课程负责人或任课教师填写，并于每学期初随教学进度表一起交教务科。 填写人：晏明 2010年 9月 13日第二部分 实验说明2、1 实验 一 文字的设计、应用（1）与静态界面的设计实验目的：1、浏览、学习多媒体作品范例，了解多媒体在实际生活、工作中的应用范围与方法。2、学习设计、制作多媒体作品的基本要求。3、初步学习多媒体素材制作工具COOL 3D、Photoshop等的基本使用方法。实验环境（硬/软件要求）：本实验需要计算机设备一套，需要安装的软件有：Flash

11、9、Photoshop CS 简体中文、各类播放器、录音大师、COOL 3D 、Powerpoint， 还有Dreamweaver 或Frontpage。实验内容：1、学习上届同学的作品，初步规划自己作品的形式。作品可以是：多媒体课件设计、动画设计、网页设计、平面设计、DV设计。2 用Flash 9软件创建一作品的封面，工作窗口为800600像素，从素材库中选择一幅图像作为背景，同时设计相应的文字标题，标题文字要有个性与特色。3 用Flash 9软件创建第二个封面，工作窗口为800600像素，从素材库中选择图像作为背景，同时设计相应带阴影的文字标题，并要求文字标题有动感。4、用Flash 9软

12、件创建第三个封面，工作窗口为800600像素，从素材库中选择图像作为背景，标题文字要有个性与特色，参考上课例题，要求文字标题从图像中渐出再渐入。（利用Alpha通道）5 自己创意作品12份，充分展示自己的基础与爱好。实验报告形式(电子)：实验报告 ： 分析所浏览范例的可取之处，举例说明。上交实验内容： 23份自己设计的封面。 注意： 以上每份作品应该采用不同的图像作为背景。把以上作品（包括实验报告）存入文件夹中，文件夹的命名要求是：学号最后三位+姓名，并上传到服务器上FTP：/192、168、101、220中，“软工100*-网站设计基础（1）-作业”文件夹中，要求每次实验都要书写实验报告。2

13、、2 实验 二 文字的设计、应用（2）与动态界面的设计实验目的：1、初步掌握设计、制作多媒体文字素材的基本要求。2、学会应用多媒体素材制作工具COOL 3D 、Photoshop等创意、制作文字素材的方法。实验环境（硬/软件要求）：本实验需要计算机设备一套，需要安装的软件有：Flash 9、Photoshop CS 简体中文、各类播放器、录音大师、COOL 3D 、Powerpoint， 还有Dreamweaver 或Frontpage。实验内容：1、规划自己作品的形式,作品可以是：多媒体课件设计、动画设计、网页设计、平面设计、DV设计。已规划的同学将规划上传。2、用Photoshop软件创建

14、一份作品的封面，工作窗口为800600像素，从素材库中选择一幅图像作为背景，同时使用“变形文字”工具设计相应的美术文字标题，用“画笔”工具给文字上彩色，标题文字要有个性与特色。3、用Photoshop软件创建第二份作品的封面，工作窗口为1024768像素，从素材库中选择一幅图像作为背景，使用“图层”“图层样式”“混合选项”菜单项，用“图层样式”设计带阴影的美术文字标题，参数自己设定。4、用Photoshop软件创建第三份作品的封面，工作窗口为800600像素，从素材库中选择图像作为背景，美术文字标题的设计时应用“滤镜”工具，并附上说明用了哪几个“滤镜”工具。5、用Photoshop软件创建第四

15、份作品的封面，工作窗口为1024768像素，从素材库中选择图像作为背景，美术文字标题的设计时应用素材库中的动作文件即“ATN1-150，ATN2-150”，并附上说明用了哪个“动作”（注意Alpha通道的使用）。6、使用COOL 3D软件设计三维立体美术字体，工作窗口为785250像素，保存为GIF动画。7、根据已学习的知识创意作品一到二份，充分展示自己的基础与爱好。注意：以上每份作品应该采用不同的图像作为背景。实验报告形式(电子)：实验报告 ： 分析作品设计、制作特点、要点。 上交实验内容： 用Photoshop创建的二 三份文字素材作品。2、3 实验 三 Photoshop与图形、图像处理

16、（1）实验目的：1、初步掌握编辑图形、图像的基本要求。2、初步学会应用Photoshop创意、制作图像素材的方法。3、初步掌握Photoshop中图层、通道的使用方法与技巧实验环境（硬/软件要求）：本实验需要计算机设备一套，需要安装的软件有：Flash 9、Photoshop CS 简体中文、各类播放器、录音大师、COOL 3D 、Powerpoint， 还有Dreamweaver 或Frontpage。实验内容：1、验证基础理论部分：图像的颜色深度、图像大小与字节等。2、制作：牵手字 （充分发挥想象）。3、制作：奥运五环。4、利用已有图像的进行再创作出1 到3幅作品，既进行图像的裁剪、编辑。

17、5、制作：小鸟在云层中飞翔(用Flash 9 平台)。6、参考信息科学与工程学院网站的素材，构思创意主页界面的部分画面。实验报告形式(电子)：实验报告 ： 分析作品创作思路，制作技术要点，举例说明。上交实验内容： 自己创意、制作的Photoshop图形、图像作品。2、4 实验 四 Photoshop与图形与图像处理（2）实验目的：1 能熟练的应用Windows 系统的画图功能绘制简单图形并上色。2 能绘制二维动画的基本素材。3 熟练应用Photoshop软件, 对图像及图像素材进行放大、缩小、修改、叠加等操作。4 能应用Photoshop软件进行图像创意、设计。实验环境（硬/软件要求）：本实验

18、需要计算机设备一套，需要安装的软件有：Flash 9、Photoshop CS 简体中文、各类播放器、录音大师、COOL 3D 、Powerpoint， 还有Dreamweaver 或Frontpage。实验内容：1、验证基础理论部分：BMP、GIF、JPG图像的文件的特点。2、制作：数字光盘。3、制作：图像的边框（镜框）。4、提取：花朵图像或带绒毛的动物（应用滤镜抽取工具），制作镜像等。5、制作： 2幅应用蒙板的图像(人物站在水中、坐入汽车，鸭子吃鱼等)。6、制作：1-2幅GIF图形、图像动画。7、参考信息科学与工程学院网站的素材，构思创意主页界面的部分画面。实验报告形式(电子)：实验报告

19、：分析应用Photoshop软件, 对图像及图像素材进行放大、缩小、修改、叠加等操作的方法，举例说明。上交实验内容： 用Photoshop软件制作的图形、图像作业。2、5 实验 五 图形与图像处理（3）、声音技术实验目的：1 能较熟练地应用Photoshop软件的蒙板、滤镜, 对图像及图像素材进行操作。2、能应用Photoshop软件对多媒体应用软件中的内容进行图像创意、设计。3、了解声音文件的原理，会录制声音文件，会对声音文件进行剪接、混音等操作。能对*、wav、*、mp3 文件进行编辑、互相转换。能制作简单声音控制程序。实验环境（硬/软件要求）：本实验需要计算机设备一套，需要安装的软件有：

20、Flash 9、Photoshop CS 简体中文、各类播放器、录音大师、COOL 3D 、Powerpoint， 还有Dreamweaver 或Frontpage。实验内容：1、制作：图像或美术字体的手撕效果图像。2、制作：电池剥皮效果图（或苹果）。3、应用“Creative WaveStudio”软件录制、编辑声音文件（包括录音、剪辑、编辑、合成、混音等）。4、制作声音播放控制程序（参考例题：一个程序由Authorware制作，另一个用Flash 9 制作，可以自己选择背景与其他相应的内容）。5、运行“音乐欣赏”作品，学习、分析如何进行音乐文件的选择，音量的控制（选做）。6、参考信息科学与

21、工程学院网站的素材，构思创意主页界面的部分画面。实验报告形式(电子)：实验报告 ：分析应用Photoshop中蒙板、滤镜对图像及图像素材处理方法，举例说明。上交实验内容： 应用Photoshop蒙板、滤镜处理的图像，声音播放控制程序、构思创意主页界面。2、6 实验 六 动画制作（Flash 9 动画制作）实验目的：1、掌握应用Flash 9 制作动画的基本功能，初步掌握使用Flash 9制作Flash 软件界面的技巧与方法。2、初步掌握应用Flash 9 制作按钮、元件的基本方法，初步掌握沿轨迹运动动画的技巧与方法。实验环境（硬/软件要求）：本实验需要计算机设备一套，需要安装的软件有：Flas

22、h 9、Photoshop CS 简体中文、各类播放器、录音大师、COOL 3D 、Powerpoint， 还有Dreamweaver 或Frontpage。实验内容：浏览Flash 9范例，学习、了解Flash 9在多媒体软件中的应用范围与方法。参考范例制作以下内容：1、 设计Flash 多媒体软件界面2 3份，尺寸要求800600。2、 创作带不同背景图像的形变动画1 2份，尺寸要求400300。3、 设计网页一份标题动画，尺寸要求785300，动画要求是矢量多彩色变形动画。4. Flash 9中蒙板层的应用练习。5. 制作沿轨迹运动的动画23份。实验报告形式(电子)：实验报告 ：分析应用

23、Flash 9编制多媒体软件的特点与制作的Flash 9动画的方法，举例说明。上交实验内容： 用Flash 9制作的多媒体软件界面、动画习题。2、7 实验 七 多媒体软件脚本的设计与Flash平台实验目的：1、初步掌握应用多媒体技术进行软件设计的基本思想与方法；学会软件脚本的设计、编写；能根据脚本制作各个软件的部件( 文字、说明、图像等 )。2、掌握Flash 9的基本功能：能熟练的将文字、图像、声音组合在文件之中；能应用Flash 9的功能编制二维动画，并将动画与配音同步播放；会用Flash 9将各部件合成， 会调试已制作的软件, 进行进一步修改。实验环境（硬/软件要求）：本实验需要计算机设

24、备一套，需要安装的软件有：Flash 9、Photoshop CS 简体中文、各类播放器、录音大师、COOL 3D 、Powerpoint， 还有Dreamweaver 或Frontpage。实验内容：1、学习多媒体软件脚本范例，编写自己所选题目的方案细节。2、在Flash 9环境下，设计、制作以下内容：（1）根据自己的选题模块设计在Flash 环境下，创建相应的场景，并加入对应的背景图像。在库中创建与场景对应的素材文件夹，并导入与主题相关的图像、声音等素材，在每个主场景的首页都需要在第一帧下加入代码：stop(); 。以便让界面停止在每个场景的首页，接着可以进行交互。（2）Flash 环境下

25、的按钮交互，使用公用库自带的按钮，场景界面尺寸要求800600。在按钮下加入以下代码：on(release)gotoAndPlay(场景名称,帧标签);实现场景之间的跳转。（3）自定义按钮的设计，根据自己作品的特点来设计。（4）基本功能：文字的闪烁、下划线的闪烁、重点文本框的闪烁、随机显示的制作，random 函数用法：Math、random(1) ，产生0 1之间的随机数。（5）控制声音播放的习题，具体内容见以下代码。图1 控制声音播放的元件1）声音对象层代码：mySound = new Sound();mySound、attachSound(myMusic);mySound、start(,

26、 999);2）声音位置层：两个位置变量：vol1At、vol2At3）影片剪辑对象：vol1中代码onClipEvent (enterFrame) pan = 2*_parent、vol1、drag、_x;_parent、mySound、setPan(pan);_parent、vol1At = Math、round(pan);4）影片剪辑对象：vol2中代码onClipEvent (load) _parent、vol2、drag、_x += 50;onClipEvent (enterFrame) vol = _parent、vol2、drag、_x+50;_parent、mySound、se

27、tVolume(vol);_parent、vol2At = Math、round(vol);5）拖动按钮下代码：on (press) startDrag(, false, -50, 0, 50, 0);on (release, dragOut) stopDrag();6）声音文件导入库中，并设置“链接属性”。注意标识符是mySound、attachSound(myMusic); 中调用的名称。图2链接属性窗口（6）模仿例题，制作用变量控制小球运动速度。以上习题场景的制作尺寸要求800600像素。实验报告形式(电子)：实验报告 ：分析编写软件脚本的基本要求与特点，与在Flash 9环境下制作多媒

28、体软件的方法，举例说明。上交实验内容： 在Flash 9环境下制作的习题。2.8 实验 八 Dreamweaver平台的使用实验目的：1、 学习Dreamweaver平台的基本用法。2、 学习在Dreamweaver平台中组合各种素材及和其他HTML的连接。3、 学习Dreamweaver与HTML、CSS间的关系4、 通过实际操作，了解网站布局中的框架、层的概念。5、 会用Flash 9将各部件合成，会调试已制作的软件, 进行进一步修改。实验环境（硬/软件要求）：本实验需要计算机设备一套，需要安装的软件有：Flash 9、Photoshop CS 简体中文、各类播放器、录音大师、COOL 3

29、D 、Powerpoint， 还有Dreamweaver 或Frontpage。实验内容：1、学习Dreamweaver平台的基本用法。2、通过实际操作，了解网站布局中的框架、层的概念。3、学习在Dreamweaver平台中组合各种素材及和其他HTML的连接。4、验证Dreamweaver与HTML、CSS间的关系。5、搭建基本的网站架构（大作业是网站的同学）。选做：（1）制作： 把“attachSound、fla”控制声音播放的基本代码，加入自己的大作业中，并进行调试（参考范例）。（2）运行“loadSound、fla”作品，学习、分析如何把外部的音乐文件载入到Flash中播放。基本代码如下

30、：mysound = new Sound();mysound、loadSound(稻香剪切、mp3,true);mysound、start(0,999);关于start（Sound、start 方法）的说明：public start(secondOffset:Number, loops:Number) : Void说明：1） 从开头开始播放（如果未指定参数）最后附加的声音，或者从由 secondOffset 参数指定的声音点处开始播放。2）secondOffset:Number 可选 ，通过它可以从特定点开始播放声音。例如，如果有一个 30 秒的声音，而希望该声音从中间开始播放，可将 seco

31、ndOffset 参数指定为 15。并非声音延迟 15 秒，而是从 15 秒标记处开始播放。3）loops:Number 可选 ，通过它可以指定声音应该连续播放的次数。（3）运行“音乐控制的代码、fla”作品，学习、分析如何控制音乐文件播放点（选做）。实验报告形式(电子)：实验报告 ：分析Dreamweaver平台基本用法的特点，及用函数、变量控制多媒体软件功能的方法，举例说明。上交实验内容： 有交互功能的习题，用函数、变量控制多媒体软件功能的习题。第三部分 实验评分标准说明：实验总分为本门课程的 40%，既40分（实验报告和实验作品的评分），平均到每次实验为5 分。评分标准：1、 在指定的时间内完成所规定的实验内容，完成的实验内容有个性（有新意、原创作品），实验报告上交，评分为 5 分。2、 在指定的时间内完成所规定的实验内容，实验报告上交，实验结果一般，评分为 4 分。3、 没有在指定的时间内完成所规定的实验内容（后补交完整），实验报告上交，实验结果一般，评分为 3 分。4、 没有在指定的时间内完成所规定的实验内容（未补交完整），实验报告上交，实验结果一般，评分为 2 分。5、 没有在指定的时间内完成所规定的实验内容（未补交完整），实验报告未上交，实验结果一般，评分为 1 分。6、 没有上交实验内容、实验报告，评分为 0 分。