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

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实验七：多媒体软件脚本的设计与Flash初步

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

3、缩比的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 徐帆等，Photoshop CS

5、3图像处理简明教程，清华大学出版社，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必修操作综合设

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

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

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

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

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

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

14、计。已规划的同学将规划上传。2、用Photoshop软件创建一份作品的封面，工作窗口为 800 >600像素，从素材库中 选择一幅图像作为背景，同时使用“变形文字”工具设计相应的美术文字标题，用“画笔”工具给文字上彩色，标题文字要有个性与特色。3、 用Photoshop软件创建第二份作品的封面，工作窗口为1024>768像素，从素材 库中选择一幅图像作为背景，使用“图层图层样式混合选项”菜单项，用“图层样式”设计带阴影的美术文字标题，参数自己设定。4、 用Photoshop软件创建第三份作品的封面，工作窗口为800 >00像素，从素材库 中选择图像作为背景，美术文字标题的设计

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

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

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

18、。4. 能应用Photoshop软件进行图像创意、设计。实验环境（硬/软件要求）：本实验需要计算机设备一套，需要安装的软件有： Flash 9、Photoshop CS简 体中文、各类播放器、录音大师、 COOL 3D、Powerpoint，还有Dreamweaver或 Fron tpageo实验内容：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或 Fron tpageo实验内容：1、制作：图像或美术字体的手撕效果图像。2、制作：电池剥皮效果图（或苹果）。3、应用“ Creative WaveStudiS软件录制、编辑声音文件（包括录音、剪辑、编辑、 合成、混音等）。4、制作声音播放控制程序（参考例题：一个程序由Authorware制作，另一个用Flash 9制作，可以自己选择背景与其他相应的内容）。5、运行“音乐

21、欣赏”作品，学习、分析如何进行音乐文件的选择，音量的控制（选 做）。6、参考信息科学与工程学院网站的素材，构思创意主页界面的部分画面实验报告形式（电子）:实验报告：分析应用Photoshop中蒙板、滤镜对图像及图像素材处理方法，举 例说明。上交实验内容：应用Photoshop蒙板、滤镜处理的图像，声音播放控制程序、构思创意主页界面。2、6 实验六动画制作（Flash 9动画制作）实验目的：1、掌握应用Flash 9制作动画的基本功能，初步掌握使用 Flash 9制作Flash软件 界面的技巧与方法。2、初步掌握应用Flash 9制作按钮、元件的基本方法，初步掌握沿轨迹运动动画的技巧与方法。实验

22、环境（硬/软件要求）：本实验需要计算机设备一套，需要安装的软件有： Flash 9、Photoshop CS简 体中文、各类播放器、录音大师、 COOL 3D、Powerpoint，还有Dreamweaver或 Fron tpageo实验内容：浏览Flash 9范例，学习、了解Flash 9在多媒体软件中的应用范围与方法。参考范例制作以下内容：1、设计Flash多媒体软件界面2 3份，尺寸要求800 >600。2、创作带不同背景图像的形变动画1 2份，尺寸要求400>300。3、设计网页一份标题动画，尺寸要求 785 >300,动画要求是矢量多彩色变形动画。4、Flash 9

23、中蒙板层的应用练习。5、制作沿轨迹运动的动画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或 Fron tpageo实验内容：1、学习多媒体软件脚本范例，编写自己所选题目的方案细节。2、在Flash 9环境下，设计、制作以下内容：(1) 根据自己的选题模块设计在 Flash环境下，创建相应的场景，并加入对应 的背景图像。在库中创建与场景对应的素材文件夹，并导入与主题相关的图像、声音等素材，在每个主场景的首页都需要在第一帧下加入代码：

25、stop();。以便让界面停止在每个场景的首页，接着可以进行交互。(2) Flash环境下的按钮交互，使用公用库自带的按钮，场景界面尺寸要求800 >600。在按钮下加入以下代码：on( release)gotoAndPlay("场景名称","帧标签");实现场景之间的跳转。(3) 自定义按钮的设计，根据自己作品的特点来设计。(4) 基本功能：文字的闪烁、下划线的闪烁、重点文本框的闪烁、随机显示的 制作， random 函数用法： Math、random(1) ，产生 0 1 之间的随机数。(5) 控制声音播放的习题，具体内容见以下代码。图1 控制

26、声音播放的元件1) 声音对象层代码：mySound = new Sound();mySound、attachSound("myMusic");mySound、start("", 999);2) 声音位置层：两个位置变量： vol1At 、vol2At3) 影片剪辑对象： vol1 中代码onClipEvent (enterFrame) pan = 2*_parent、 vol1、drag、_x;_parent、mySound、setPan(pan);_parent、vol1At = Math 、round(pan);4) 影片剪辑对象： vol2 中代码

27、onClipEvent (load) _parent、vol2、 drag、_x += 50;onClipEvent (enterFrame) vol = _parent、vol2、 drag、_x+50;_parent、mySound、setVolume(vol);_parent、vol2At = Math 、round(vol);5) 拖动按钮下代码：on (press) startDrag("", false, -50, 0, 50, 0);on (release, dragOut) stopDrag（）;6）声音文件导入库中，并设置“链接属性”。注意标识符是mySo

28、und、attachSound（"myMusic"）;中调用的名称。图2链接属性窗口（6）模仿例题，制作用变量控制小球运动速度。以上习题场景的制作尺寸要求 800X600像素。实验报告形式（电子）:实验报告：分析编写软件脚本的基本要求与特点，与在Flash 9环境下制作多媒体软件的方法，举例说明。上交实验内容：在Flash 9环境下制作的习题。2.8 实验八 Dreamweaver平台的使用实验目的：1、学习Dreamweaver平台的基本用法。2、 学习在Dreamweaver平台中组合各种素材及和其他 HTML的连接。3、学习Dreamweaver与HTML、CSS间的

29、关系4、通过实际操作，了解网站布局中的框架、层的概念。5、 会用Flash 9将各部件合成，会调试已制作的软件,进行进一步修改。实验环境（硬/软件要求）：本实验需要计算机设备一套，需要安装的软件有： Flash 9、Photoshop CS简 体中文、各类播放器、录音大师、 COOL 3D、Powerpoint，还有Dreamweaver或 Fron tpageo实验内容：1、学习Dreamweaver平台的基本用法。2、通过实际操作，了解网站布局中的框架、层的概念。3、学习在Dreamweaver平台中组合各种素材及和其他 HTML的连接。4、验证 Dreamweaver与 HTML、CSS 间的关系。5、搭建基本的网站架构（大作业是网站的同学） 。选做：（1）制作： 把“attachSound fla控制声音播放的基本代码，加入自己的大