第一篇：实验七：动画与视频制作实践
实验七：动画与视频制作实践
学号：201213210127姓名：***
一、实验目的1.了解动画和视频的基本原理
2.熟悉和掌握制作网页动画、变形动画和视频处理
3.培养创新意识，不拘泥于常规方法和设计理念，捕捉突发奇想的灵感
二、实验内容
1、制作变形动画
a)用ps打开光盘“练习素材动画素材变形动画素材”中的两个文件：Demo-5a.bmp和demo-5b.bmp。
b)将demo_5b复制并粘贴在demo_5a之上，点击“时间轴”，点击“创建帧动画”，点击右上角小三角形，点“从图层建立帧”。
c)动画完成，存储为“实验7_变形动画.gif”。
2、在ppt中使用动画
a)打开ppt，把刚做好的“实验7_变形动画.gif”动画插入到演示页中。b)插入光盘“练习素材声音素材wav简短音乐”中的“托卡塔.wav”到演示页中。
c)保存演示文稿为“实验7_配乐动画.pps”
3、制作网页动画
a)用PS工具打开配套光盘“练习素材动画素材网页动画素材”文件夹中的“兔子01.bmp至兔子08.bmp”图像。
b)按顺序添加到时间轴。
c)动画完成，存储为“实验7_GIF动画.gif”。
4、绘制动画
a)打开flash软件，输入“welcome”，用关键帧制作动画。
b)保存动画为“实验7_flash动画.gif”。
三、思考题
1、动画节奏是有时间帧来控制。
2、格式统一。
3、不能。
4、pal制式每秒25帧，ntsc制式每秒30帧。
第二篇：制作Authorware视频动画(精)
在目前的多媒体课件制作中，经常需要调用视频片段，在Authorware中使用视频动画一般通过数字电影图标来导入，但数字电影图标所提供的控制功能比较简单，不能完全满足实际教学的需要。不过随着Authorware版本的提高（5.2及以上），我们可以用各种方法来实现对数字电影的控制，以下是实现控制的不同方法。
基本型
启动Authorware，新建一文件，命名为“电影控制”（下同）。在主流程线上拖入一数字电影图标，双击数字电影图标，在属性对话框中选择“计时”，在“播放”中选择“直到为真”，在下面的文本框中输入一个变量或表达式来实现对电影的控制。例如输入“MouseDown”，则数字电影在播放过程中，只要单击鼠标左键，数字电影就会停止播放。这种方法适合于要求不高的制作，控制也是最简单的。
傻瓜型
之所以称为“傻瓜型”，是因为并不需要太多复杂的设置就可以实现对数字电影的控制。
方法一：在主菜单栏中单击[插入]，选择[Media控件]下的[DirectMedia Xtra]，在出现的对话框中点击[浏览文件]，选择所需要的电影文件，并在播放选项中勾选“滑杆控制”，单击[确定]。运行程序，可以看到出现了一个类似Windows媒体播放器的播放界面，可以很方便地进行播放、停止、继续等操作，并可以用滑杆任意调整播放进度（图1为思想教育课播放的视频片段）。
方法二：在知识对象对话框中选择“电影控制器”，并将之拖到主流程线上，在随后出现的对话框中对“电影控制器”进行设置：首先出现“电影控制器”的简要说明，单击[下一步]→选择所需的电影文件，也可以文本框中直接输入路径，单击[下一步]→选择电影控制器所需的控制按钮，默认状态下提供了播放、暂停、快进、快退和退出，可根据所需选择，单击[下一步]→对所需的电影进行大小的设置，单击[下一步]→调整电影在屏幕中的位置，单击[下一步]→单击[完成]。至此，一个电影控制器就做成了，运行程序，界面如图2所示，控制也很方便。
函数控制型
主要运用Authorware自带的一些内部函数来实现对电影的控制。
方法一：在主流程线上拖入一个电影图标，命名为“电影”，双击电影图标，导入所需的电影→在主流程线上拖入一交互图标，命名为“电影控制”→在交互图标右侧分别拖入3个计算图标，分别命名为“播放”、“暂停”、“退出”，响应类型都选择“按钮”响应→在计算图标中分别输入如图3所示的内容（注意：在关闭“暂停”计算图标窗口时，由于使用了一个自定义变量“Pause”，系统会出现一个对话框，要求输入自定义变量的初始值，这里把初始值定为1），整个程序流程图如图所示。
方法二：在主流程线上拖入一个计算图标，双击计算图标，在其中输入“JumpOutReturn(“D:hero2001sthsdvd.exe”,“F: emp1.rm”)”，其中“D:hero2001sthsdvd.exe”为笔者所安装的豪杰超级解霸2001的路径，“F: emp1.rm”为所要播放的RM格式的文件所在路径，利用这种调用外部程序的方法，我们可以用来播放Authorware本身不支持的一些电影格式（当然，你调用的外部程序必须支持），并且也可实现全面控制。
第三篇：多媒体作品制作_动画、视频
多媒体作品制作＿动画、视频
所属科目：多媒体技术应用
课 时：一课时
课 型：新授课
教学方法：
1、演示教学法
2、分析讨论法
3、作品点评法
教学目标：
（一）在知识、技能方面
1、能通过分析作品，揭示动画、视频信息在表达中的作用。
2、了解动画、视频表达主题的特点。
（二）过程、方法方面
1、能根据主题和表达目标的需求选择动画、视频信息。
2、明确运用动画、视频信息能够更好地表达事物的变化过程的思想。
（三）情感态度与价值观方面
1、体会计算机动画在表达主题中的效果与特点。
2、增强对计算机动画应用的进一步认识。
3、渗透德育内容，培养学生良好的思想情操。
重点难点：
1、动画、视频在表达思想上的特点
2、动画、视频的选择
3、理解动画、视频在表达思想上的特点
教学媒体：网络电脑室
在线资源：（1）互联网教学资源；（2）学校个性资源
学生分析：大部分学生已经具备了一定信息技术基础知识，如上网、玩游戏等。
教材分析：《信息技术基础》（科学出版社）
教学过程：
一、新课引入
〖教师〗演示：图文和一段视频
内容：刘翔获得奥运金牌的报道
〖学生〗观看
二、动画、视频的视觉特征
〖教师〗演示动画与源文件：太阳脸谱
〖教师〗讲解“视觉暂留特性”：
为什么一幅幅图片连续播放就会形成动画呢？它是利用了视觉暂留特征。每一幅图像从我们的眼前消失时，留在我们眼睛视网膜上的图像并不会马上清除，还会延迟大约70毫秒，如果在这段时间内，下一幅图像又出现了，就会在我们眼睛里形成连续的画面。如果画面的内容是有关联的，我们看到是一个动态的过程。
一般情况下，如果动画每秒播放12幅以上画面，视频每秒放映25幅画面以上，则人眼看到的就是连续的画面。
注：此内容并非重点，且学生容易理解，故学生实践安排在课外。
三、动画、视频的特点
动画、视频的共同特点
与文字、图片相比，动画、视频素材适于表达事物的动态变化过程，渲染效果更强，在表达思想上具有更直观、具体的特点。
1、视频的特点
是将多幅实地拍摄的图像信息按照一定的速度连续播放，要体会真实画面变化时，要用视频信息来完成。
如历史课上的一些史实的讲解，语文课上人物性格的刻画等，用视频表达可以加深学生的理解。因为是现场的真实记录，使观众有如身临其境之感，感染力非常强。
如视频作品《刘翔获得跨栏奥运冠军》，你们看了有什么感想？
真实地再现了刘翔的整个比赛过程，记录了一个非常重要的历史时刻，感染力非常强，每一个中国人看了都会很兴奋、很自豪、很激动。这是动画或其它媒体无法比拟的。
2、动画的特点
（1）动画的技术特点
〖教师〗演示模拟动画：气刹车
引导学生得出技术特点：
动画主要是对真实的物体进行模型化、抽象化、线条化后，生成再造动画，主要用来动态模拟，展示虚拟现实等。如化学反应过程、有毒物质实验；物理学中原理、规律、现象的展示；地理课中白昼、黑夜的形成，海洋中洋流的走向，锋面雨的形成等，都可以用动画来仿真或模拟出来。
（2）动画的表达特点
〖教师〗演示动画：《游戏》
〖学生〗观看动画，感受动画表达事物的动态过程。
〖教师〗引导学生分析动画的技术特点：
动画可以采取幽默的手法，或采取真实与夸张、简化与细腻等手法使要表达的思想或意图更形象、深刻，具更具有情趣。
附：作品分析如下：
作品主题：为了虚拟世界而忘了现实世界
通过窗外的太阳与月亮的不断交替，重复出现的游戏及人物的表情，反映一个青少年昼夜不分地玩游戏，沉溺于虚拟的游戏世界中。
此作品是对广大青少年的一种警醒，一定要把握好玩游戏（或上网）的尺度，不要为了虚拟世界而忘了现实世界。
四、动画、视频的应用
1、动画、视频媒体的选择
〖教师〗演示一：《水循环》的动画
演示二：《水循环》的图片
提问：你希望地理老师选择哪一个讲解，为什么？ 突出动画与图片的表达特点。
〖学生〗分析讨论
〖教师〗演示图片：王熙凤
播放视频：林黛玉进贾府片断
〖学生〗分析：在刻画王熙凤这个人物性格上，两者效果有何不同？
突出视频、动画、图片表达的特点。
小结：根据主题和表达的需求，恰当地选择图片、动画、视频，才能达到最佳效果。
2、学生实践：
任选一个动画作品进行分析，两个人一组，进行交流讨论，并填写作品分析报告表,并上传。
学生姓名
作品名称 表达了什么主题？如何表达主题？（从哪些画面的变化进行体现）
如果是你，你会如何去表达主题？（写出你的设想）
《无偿献血》
《美丽的回忆》
3、点评
学生介绍作品设想；学生之间交流作品；教师点评。
五、小结
1、动画、视频的视觉特征
2、动画、视频的特点
3、动画、视频的应用
动画、视频有很好的表达效果，但是我们在选择时，一定要根据主题和表达的需求，恰当地选择媒体，才能达到最佳效果。有些用文字、图片能表达清楚的，就不一定非要动画或视频，避免造成资源的浪费。
第四篇：《视频网站制作》实验教案
网 页 制 作
授课教师：熊伶俐
授课班级：广播电视编导
授课时间：
教 案
2008级B方向 2011——2012学第一学期
目 录
实验一：基本网页元素的使用 ··························································· 1 实验二：插入多媒体对象··································································· 2 实验三：超级链接的使用实验四：页面布局实验五：实验六：模板的使用实验七：制作表单网页实验八：设计并制作一个视频网站··································································· 4 ·············································································· 5 CSS样式的使用··································································· 7 ·········································································· 9 ···································································· 10 ···················································11 实验一：基本网页元素的使用
实验内容：
1、插入文字；
2、插入图像。实验目的：熟练掌握基本网页元素的使用 实验器材：装有Dreamweaver的PC机一台 实验步骤：
1、插入文字 1.1输入文字
鼠标在文档工作区单击，当出现闪烁的光标后，选择合适的输入法即可输入文字。1.2改变文本属性
选中文字后，可以在属性面板上改变文字的大小、粗细、样式、对齐方式等，还可以为文字建立超级链接。1.3增加字体
打开字体选项列表，单击最后一行的“编辑字体列表”，弹出“编辑字体列表”对话框。单击“＋”按钮，在“可用字体”列表中选择字体，单击向左的箭头，即可将所选择的字体添加到字体列表中。1.4添加项目编号
在属性面板上单击“项目列表”按钮，输入几行文字，每行文字均带有强调性的圆形小黑点
单击“编号列表”按钮，输入几行文字，每行文字均带有数字编号。
单击“列表项目”按钮，在打开的“列表属性”对话框中可以对项目符号进行详细设计。2插入图像
2.1常用图像格式：GIF、JPEG 和 PNG。2.2插入图像
（1）将光标置于要插入图像的位置，在“插入”栏的“常用”选项卡中单击“图像”按钮或选择“插入”菜单中的“图像”命令。
（2）此时将打开“选择图像源”对话框，选取存放在站点中的图像文件，最后单击“确认”按钮即可将图片插入到指定区域。
（3）如果所选择的图像文件不是站点中的文件，则将打开“Macromedia Dreamweaver MX”对话框。提示是否将图像文件保存到根目录下，单击“是”按钮，然后打开“拷贝文件为”对话框，定位到站点中用于存放图像文件的文件夹，最后单击“保存”按钮即可。
2.3修改图像尺寸
1、自由缩放
单击图片，在图片的下方和右侧出现3个黑色的控制柄。分别拖动这3个控制柄可以改变图片的尺寸。若要等比例缩放图片，可以按住shift键，用鼠标左键拖动右下角的控制柄。
2、精确缩放
如果已经确定了图片的具体缩放尺寸，单击图片，在其属性面板中输入宽和高的具体数值，可以精确地改变图片的尺寸。2.4为图片增加说明文字
单击图片，在属性面板的替代框输入图片的说明文字，按下F12键，打开浏览器窗口，将光标移动到图片上就可以看到为其添加的说明文字。2.5鼠标经过图像
（1）将插入点定位到要插入鼠标经过图像的区域，然后在“插入”栏的“常用”选项卡中单击“鼠标经过图像”按钮。
（2）打开“插入鼠标经过图像”对话框。
在“图像名称”文字框内输入翻转图像的名称；单击“原始图像”文本框后的“浏览”按钮，然后在“原始图像”对话框中，选取作为初始图像的图片文件后按“确认”按钮；单击“鼠标经过图像”文本框后的“浏览”按钮，然后在“鼠标经过图像”对话框中，选取作为鼠标经过图像的图片文件后按“确认”按钮；确保选中“预载鼠标经过图像”复选框；在“替换文本”文本框内输入替换文字；在“按下时，前往的 URL”文本框中指定目标文件的地址，最后单击“确定”按钮。
（3）按【F12】键在浏览器窗口中查看鼠标经过图像效果。2.6插入图像映射（热区）
1、先选中图像，此时可以在图像属性面板上看见一个“地图”区域，在其下方有三个淡蓝色的工具图标，即矩形、圆形和多边形。
2、根据需要用鼠标选中其中的一个，再把鼠标移到图像上拖拽出一块淡蓝色的区域。实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）
实验二：插入多媒体对象
实验内容：
1、插入声音；
2、插入视频；
3、插入Flash。实验目的：熟练使用各种多媒体素材丰富网页 实验器材：装有Dreamweaver的PC机一台，耳麦一副 实验步骤：
1、在页面中插入背景音乐。方法一：通过手工编写代码
（1）打开要添加背景音乐的网页，切换到代码视图或拆分视图。
（2）在
和 之间添加以下代码：bgsound 标记符的基本属性是 src，用于指定背景音乐的源文件。
loop，用于指定背景音乐重复的次数；如果不指定该属性，或者loop值为-1或者true时，背景音乐无限循环。方法二：通过行为来实现
（1）打开一个网页文档，在文档左下角的“标签选择器”中选择“ body ”标签。（2）打开行为面板，点击“＋”按钮添加行为“播放声音”。（3）选择声音文件。一个网页的背景音乐就添加好了。（4）在文档中选择背景音乐的图标。（5）在属性面板中，点击“参数”按钮。（6）修改参数Autostart为true。2、链接声音与视频
（1）选择要用作超链接的文本或图像。
（2）在属性面板中，单击链接文本框后的“浏览文件”按钮，选择站点中的音频文件或视频文件。
注：如果原来的文件名为中文，应事先将其改为英文。
3、嵌入声音与视频
（1）在文档窗口中，将插入点定位到要嵌入文件的地方，然后在“插入”栏的“媒体”选项卡中单击“插件”图标。
（2）在“选择文件”对话框中选择嵌入的音频文件或视频文件（文件名称必须是英文，不能插入汉字名称的文件）。
（3）通过在“高”和“宽”文本框中输入数值或者通过在“文档”窗口中拖动调整插件占位符的大小，可以确定播放器控件在浏览器中的显示大小。
4、插入Flash动画
将光标置于要插入Flash动画的位置，执行“插入/媒体/Flash”命令，从弹出的“选择文件”对话框中选择Flash文件，单击“确定”按钮即可。注：插入的Flash文档只能是.swf格式文件。
5、插入Flash文本
（1）执行“插入/媒体/Flash文本”命令，弹出“插入Flash文本”对话框，设置文本字体、大小、对齐方式、粗体、斜体、颜色、背景色、链接URL等参数。（2）在“另存为”对话框中指定Flash文本的存盘文件名。
注：若Flash文本设置了链接，则必须将该文件与HTML文档保存在相同的文件夹下。*文件的路径和文件名都不能含有中文。
6、插入Flash按钮
（1）执行“插入/媒体/Flash按钮”命令，弹出“插入Flash按钮”对话框。
（2）选择按钮样式（有多达40余种样式可供选择），然后输入按钮文本，选择文本字体、大小、背景色、链接URL等参数。
（3）在“另存为”对话框中指定Flash按钮的存盘文件名。（注意事项同Flash文本）
7、制作图象查看器
（1）执行“插入/媒体/图象查看器”命令（或者单击插入工具栏的Flash元素选项卡中的图象查看器命令），弹出“保存Flash元素”对话框，设置将图象浏览器Flash影片保存在 站点下面，单击“保存”按钮在页面中插入一个Flash对象。
（2）在面板组合区中找到标签面板，单击将其展开（或者用F9键直接打开标签面板），可以看到Flash元素具有很多属性值。
（3）在属性列表框中打开frameShow，单击右方的下拉箭头，选择是。
（4）打开属性imageURLs，单击右侧的按钮，打开“编辑‘imageURLs’数组”对话框。（5）系统默认加了3各图象在列表中，单击上方的减号按钮将其全部删除。
（6）单击加号按钮，但后单击列表框右侧的打开文件按钮，在弹出的“选择文件”对话框中选择需要显示的图片。
（7）重复上一步操作，直到将所有需要显示的图片全部加入列表框中。
（8）如果需要对图片设置链接，在属性列表中选中imageLinks属性，单击右侧的按钮，弹出“编辑‘imageLinks’数组”对话框，按顺序设计各图片的链接URL即可。（9）在属性列表框中找到title，在后面输入图片的标题。
（10）在属性列表框中找到transitionsType，设置其值为Random，让图片之间的切换效果为随机效果。
（11）按F12键预览最后的效果。
实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）
实验三：超级链接的使用
实验内容：插入超级链接 实验目的：熟练使用超级链接
实验器材：装有Dreamweaver的PC机一台 实验步骤：
1、创建锚记
锚记是在文档中设置位置标记，并给该位置一个名称以便引用。通过创建锚记，可以使链接指向当前文档或不同文档中的指定位置。锚记常常被用来跳转到特定的主题或文档的顶部，使访问者能够快速浏览到选定的位置，从而加快信息的检索速度。
（1）在需要设置锚记的位置单击，在插入工具栏的常用选项卡中选择命名锚记按钮，打开“命名锚记”对话框。
（2）在对话框的“锚记”名称框中输入锚记名（区分大小写），单击确定按钮，锚记标记出现在光标插入点。如果锚记标记没有出现，执行“查看/可视化助理/不可见元素”命令即可。
2、文字或图片的链接
（1）单击需要创建超级链接的文字或者图片，然后在属性面板的“链接”文本框旁单击“浏览文件”按钮。
（2）打开“选择文件”对话框，定位到要跳转的文件后单击“确认”按钮即可。
3、电子邮件链接
方法一：在链接文本框中输入“mailto：电子邮件地址”。
方法二：单击插入工具栏的常用选项卡中的“电子邮件链接”按钮，弹出“电子邮件链接”对话框，在文本输入框中输入作为电子邮件链接显示在文档中的文本，在E－Mail栏中输入电子邮件地址。如果不输入文本，则在文档中直接显示电子邮件地址。
4、锚链接
直接在链接文本框中输入“＃锚记名”即可。
5、快速检查网页链接
（1）在Dreamweaver 8中运行“站点→检查站点范围的链接”命令，此时将会激活链接检查面板。
（2）从面板左上部的“显示”下拉菜单中可以选择“断掉的链接”、“外部的链接”、“孤立文件”三种，比如我们选取“孤立文件”之后，Dreamweaver 8将对当前链接情况进行检查，并且将孤立的文件列表显示出来。
（3）对于有问题的文件，直接双击鼠标左键即可打开进行修改。
提示：外部链接是链接到外部网站的链接地址，Dreamweaver无法对其正确性进行检查。在为网页建立链接的时候需要提醒大家一定要格外小心，因为网站通常都有数百个页面，稍不留神就会导致空链接或者是链接错误的情况，这对你的网站形象可是有很不好的影响哟！
6、删除超级链接
在属性面板的链接对话框中删除链接路径，该链接便消失了。
实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）
实验四：页面布局
实验内容：
1、利用框架进行布局；
2、使用表格进行页面布局；
3、使用图层进行页面布局。
实验目的：熟练掌握和使用各种方法进行页面布局 实验器材：装有Dreamweaver的PC机一台 实验步骤：
1、利用框架进行布局
（1）选择“文件”菜单中的“新建”命令，打开“新建文档”对话框，在“常规”选项中的类别框内选择“框架集”，在“框架集”框内选择“左侧固定，上方嵌套”结构，单击“创建”按钮。
（2）选择“文件”菜单中的“保存全部”命令，之后将出现 4 个“保存为”对话框，分别将框架集和各框架网页保存在站点中的同一文件夹中。
（3）按【Shift + F2】键打开“框架”面板，单击该面板中的最外层边框，选择整个框架 集，在其“属性检查器”中的“列值”文本框内输入“170”，在“单位”框内选择“像素”，其他属性保持不变。再选择包含上下结构的框架集，在其“属性检查器”中设置“行值”为 80 像素，其他属性保持不变。
（4）将插入点定位在左侧框架内，按【Ctrl + J】键打开“页面属性”对话框，分别设置网页的背景色为“黑色”、文本颜色为“#d1c598”、链接颜色为“#d1c598”、活动链接颜色为“#993300”、访问过链接颜色为“#006600”，单击“确定”按钮。
（5）继续将插入点定位在左侧框架内，单击“插入表格”按钮，插入一个 3 行 2 列，宽度为“140”像素，适当高度，单元格填充、单元格间距、边框都为“0”的表格。对单元格进行适当合并，然后在各单元格内添加内容，并使用“属性检查器”进行修饰，制作出左侧框架中的网页。
（6）分别制作出另外两个框架中的网页，使用“全部保存”命令保存对文档的修改。（7）制作要作为超链接目标、在右下框架内显示的各网页，注意其风格与尺寸应与原来右下框架中的网页相似。
（8）在左侧框架内，为导航栏中的文字设置超链接，并将其链接“目标”指定为右下框架（即 mainFrame），保存对文档的修改，在浏览器窗口中预览网页。
2、使用表格进行页面布局
（1）在空白文档窗口中，按【Ctrl + J】键打开“页面属性”对话框，在“标题”文本框内输入网页的标题，在“背景”文本框内选择黑色作为网页的背景，在“文本”文本框内选择白色作文本颜色，设置完成后单击“确定”按钮。
（2）将“插入栏”切换到“布局”选项卡，单击“布局视图”按钮切换到布局视图模式下，按【Ctrl + S】键将网页保存到站点中。
（3）在“插入栏”中单击“绘制布局单元格”按钮，绘制一个宽为 600 像素，高为 24 像素的布局单元格，然后添加若干文字。
（4）按住【Alt】键不放，多次单击“绘制布局单元格”按钮，连续绘制4个宽度相等的单元格，分别在第二与第三个布局单元格内插入若干文本，在第四个布局单元格内插入一条宽度为 600 像素，高度为 1 像素的水平线，并使用属性检查器对添加的文本与水平线进行修饰。
（5）将绘制的第二个布局单元格的高度调整为 120 像素，适当调整其他三个单元格的高度与宽度，在适当调整布局表格的宽度。
（6）单击“标准视图”按钮，将文档窗口切换到标准视图模式，将插入点定位在绘制的第四个单元格内，单击“插入表格”按钮，在打开的“插入表格”对话框中，设置表格“行”为
8、“列”为
5、“单元格填充”为0、“单元格边距”为0、“宽度”为100%（即所在单元格的宽度600像素）、“边框”为0，完成后单击“确定”按钮。
（7）在插入表格中的第一、三、五、七行与一、三、五列交界处的单元格内，分别插入尺寸相等的图像，在图像下方的单元格内输入一些文字并进行修饰。
（8）使用单元格的“属性检查器”，将插入图像单元格的宽度设置为 150 像素，高度为 100 像素，文字所在单元格高度为 80 像素，没有内容的单元格宽度为 75 像素。
（9）另外将插入图像单元格的对齐方式设置为水平“居中对齐”、垂直“中间”对齐，此 时的文档窗口。
（10）选取包含图像的单元格，然后使用 CSS 样式为该单元格设置一种边框效果。（11）在第一个单元格与第二个单元格内设置一个背景图像，按【Ctrl + S】键保存对文档的修改，按【F12】键在浏览器窗口中预览网页效果。
3、使用图层进行页面布局
（1）在空白文档窗口中，确保文档窗口处于“标准视图”模式下，按【Ctrl + J】键打开“页面属性”对话框，在“标题”文本框内输入网页的标题，在“背景”文本框内选择黑色作为网页的背景颜色，单击“确定”按钮，再按【Ctrl + S】键将网页保存到站点中。（2）单击“绘制层”按钮，在文档窗口中顶部绘制一个层，设置以下层属性：左 20、上 20、宽度 600、高度 20、指定一个背景图像作为第一层的背景。
（3）在该层中添加若干文本，然后使用“属性检查器”对文本进行修饰。使用相同方法在下面继续绘制一个层，添加若干文本并进行修饰，之后适当调整该层的位置与大小。（4）按住【Alt】键不放，单击“绘制层”按钮，在文档窗口中连续绘制三个层，将其中的一个层的宽度设置为 150、高度为 115，然后同时选取它们（注意最后选择有精确尺寸的层），选择“修改”菜单“对齐”选项中的“设成宽度相等”与“设成高度相等”命令，将这三个层设置为大小相等的层。此时这三个层仍然处于选中状态。
（5）按【Shift】键选取绘制的第一个层，选择“修改”菜单“对齐”选择中的“左对齐”命令，使这三个层与第一层对齐，最后适当调整它们所在的上下位置，使用“插入栏”中的“图像”按钮分别插入尺寸相同的三个图像。
（6）使用相同方法分别在文档中绘制其他层，并插入若干图像与文字。
（7）按【Ctrl + S】键，保存对文档的修改，按【F12】键在浏览器窗口中预览网页。实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）
实验五：CSS样式的使用
实验内容：使用CSS样式创建风格统一的网页 实验目的：熟练使用内部样式表和外部样式表 实验器材：装有Dreamweaver的PC机一台 实验步骤：
1、使用“CSS 样式”面板
在网站或网页中创建和应用 CSS 样式时，需要使用“CSS 样式”面板。选择“窗口”菜单中的“CSS 样式”命令或按【Shift + F11】键，可以打开“CSS 样式”面板。
在文档窗口中，class 类样式将出现在 “CSS 样式面板”中。而对于创建的其他两种样式，将直接包含在网页代码或 CSS 外部样式表中，而不会显示在“CSS 样式”面板。
2、创建 CSS 样式
在文档中要创建 CSS 样式，首先将“CSS 样式”面板打开，然后执行以下步骤。
（1）在 CSS 样式面板中，单击“新建 CSS 样式”按钮，打开“新建 CSS 样式”对话框。（2）在“新建 CSS 样式”对话框中进行如下设置：如果选择“创建自定义样式（class）”样式类型，则在“名称”文本框中输入样式名称；如果选择“重定义HTML 标签”或“使用 CSS 选择器”样式类型，则在“名称”文本框中选择相应的样式名称。
（3）在“定义在”框中选择，如果选择“新建样式表文件”选项，如果曾经定义过样式表文件，则可以从列表中选择一个文件；如果选择“仅对该文档”单选按钮，表示样式将直接定义在当前文档中。
（4）单击“确定”按钮，如果选择“新建样式表文件”选项，则打开“保存样式表文件”对话框，进行保存设置即可后弹出“样式名称的CSS 样式定义”对话框；则直接弹出“样式名称的 CSS 样式定义”对话框。
（5）用户可以在“分类”列表框中选择 8 种 CSS 样式属性，Dreamweaver 选择相应属性分类后则在对话框右部会显示相应的选项，可以根据需要设置。（6）最后单击“确定”按钮，则样式定义完毕。
3、应用CSS样式
在文档窗口，不论是内部样式还是外部样式表文件，对于出现在“CSS 样式”面板中的自定义 class 类样式，应首先选取要应用样式的文本、段落或其他对象，然后单击面板中的样式图标或样式名称。如果要取消样式，选取对象后，单击面板中的“无 CSS 样式”选项即可。
对于“重新定义 HTML 标签”样式与“使用 CSS 选择器”样式，网页自动应用该样式而无须用户指定。
4、自定义CSS样式实例
本实例定义一种网页中常用的正文样式，效果为“文字大小16 px，行高120%，首行缩进两个字符”。
（1）打开一个包含段落文本的文档，确保打开“CSS 样式”面板，单击“新建 CSS 样式”按钮，打开“新建CSS样式”对话框，在“名称”文本框中输入样式名称“test”，在“类型”选项中选择“创建自定义样式（class）（M）”单选按钮，选择“仅对该文档”单选按钮，设置完成后单击“确定”按钮。
（2）在打开的“.test 的CSS 样式定义”对话框中，设置字体为“宋体”、大小为 16 像素（px）、行高为 120%。
（3）然后在“分类”列表框中选择“区块”选项，设置文字缩进为 32 像素（相当于两个字符），单击“确定”按钮，则新建的“test”样式出现在“CSS 样式”面板中。
（4）在文档窗口中选择取要应用样式的文本，然后在单击“test”样式，即可应用该样式。
5、重新定义 HTML 标签样式实例
本实例定义一种常见的效果，即网页中的所有超链接都没有下划线。
（1）打开一个包含有超链接的文档，确保打开“CSS 样式”面板，单击“新建 CSS 样式”按钮，打开“新建 CSS 样式”对话框，在“类型”框内选择“重新定义 HTML 标签（R）”选项，然后在“名称”框内选择 a 标签（即超链接标签），选择“仅对该文档”选 项，单击“确定”按钮。
（2）在打开“a 的 CSS 定义”对话框中的“修饰”选项中选择“无”，单击“确定”按钮。
（3）此时样式被自动应用，网页中的所有超链接都没有下划线。
实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）
实验六：模板的使用
实验内容：利用模板创建风格统一的网页
实验目的：掌握模板的创建和编辑方法；熟练利用模板创建网页 实验器材：装有Dreamweaver的PC机一台 实验步骤：
1、新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，切换到“布局”模式，单击“布局表格” 按钮，绘制一个宽：780px，高：636px的表格。
2、单击“布局表格” 按钮，从该表格的左上角起，绘制一个宽：780，高：120的表格。
3、单击“布局单元格” 按钮，从表格的左上角开始绘制一个宽：140，高：120的单元格.4、将光标定位在单元格内，选择[插入]/[图像]菜单命令，打开“选择图像源”文件对话框，选择图像logo.gif。
5、单击“布局单元格” 按钮，接着上面的单元格的右边绘制一个宽：640，高：120的单元格.6、将光标定位在单元格内，选择[插入]/[媒体]/[Flash]菜单命令，打开“选择文件”对话框，选择文件banner.swf。
7、接着往下绘制一个宽：780，高：21，水平：居中对齐，垂直;居中，背景颜色：#CC3333的单元格，输入文字：首页 个人简介 文学作品 绘画作品 动画作品 视频作品 学习心得 给我留言 写信给我，设置文字格式：字体“宋体”，大小“14px”。
8、接着再往下绘制一个宽：140，高：470，水平：居中对齐，垂直;居中，背景颜色：#0066FF的单元格。
9、接着上面表格的右边绘制一个宽：640，高：470，水平：居中对齐，垂直;居中，背景图像：back.gif的单元格。
10、接着上面的两个表格的下面绘制一个高：18，水平：居中对齐，垂直;居中，背景颜色：#000000的单元格，输入文字：2006年12月20日最后更新 © Copyright 2006 小慧版权所有，设置文字格式：字体：宋体，大小：12px，颜色：白色。
11、回到“标准”模式，将光标定位到第8步创建的单元格内，选择[插入]/[模板对象]/[可编辑区域]菜单命令，弹出如图2-10-11所示的对话框，单击“确定”按钮，则在该单元格内就出现了一个名为“EditRegion1”的可编辑区域。
实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）
实验七：制作表单网页
实验内容：使用表单制作一个注册页面
实验目的：掌握表单的建立和使用；熟练使用表单提交相关数据 实验器材：装有Dreamweaver的PC机一台 实验步骤：
1、新建一个文档，将“插入”栏中的“常用”选项卡改为“表单”选项卡。
2、将光标定位在文档页面中需要插入表单的位置，单击 “表单” 按钮，此时光标定位处出现一个红色的虚线框，它表示表单的范围，所有表单对象都在该区域内插入。
3、在表单中插入一个9行2列的表格的表格，设置表格的背景图像为”bg1.gif”，表格“居中”。
4、合并第1行的单元格，输入文字”用户注册表”，文字之间空一格，格式：字体“宋体”，大小“16pt”，颜色：“红色”。
5、在第2行第1个单元格内输入“你的用户名：” 将光标定位到第2个单元格，单击 “文本字段” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮。
6、在第3行第1个单元格内输入“你的密码：” 将光标定位到第2个单元格，单击 “文本字段” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，打开“属性”面板，在“最多字数符”中输入“6”，将“类型”改为“密码域”。
7、在第4行第1个单元格内输入“你的性别：” 将光标定位到第2个单元格，单击 “单选按钮” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“男”，“位置”改为“在表单项前”，单击“确定”按钮，敲一个空格，再单击 “单选按钮” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“女”，位置”改为“在表单项前”，单击“确定”按钮，选择“男”前面的单选钮，打开“属性”面板，将“初始状态”改为“已勾选”。
8、在第5行第1个单元格内输入“你的生日：” 将光标定位到第2个单元格，单击 “列表/菜单” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“年”，“位置”为“在表单项后”，单击“确定”按钮，再单击 “列表/菜单” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“月”，“位置”为“在表单项后”，单击“确定”按钮，再单击 “列表/菜单” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“日”，“位置”为“在表单项后”，单击“确定”按钮；选择“年”前的列表，打开“属性”面板，将“类型”设为“菜单”，单击 按钮，在弹出的“列表值”对话框中的“项目标签”中输入“1990”，单击 按钮，添加第二个项目标签，输入“1991”，重复上面的操作，输入后面的数字，单击“确定”按钮，回到“属性”面板，将“初始化选定”设为“1990”，同理对后面的列表进行相同的操作。
9、在第6行第1个单元格内输入“你的生日：” 将光标定位到第2个单元格，单击 “复选框” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“唱歌”，同理插入后面的复选框。
10、在第7行第1个单元格内输入“个人近照：” 将光标定位到第2个单元格，单击 “文件域” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮。
11、在第8行第1个单元格内输入“个人简介：” 将光标定位到第2个单元格单击 “文本字段” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，打开“属性”面板，将“类型”改为“多行”。
12、将光标定位到第9行第2个单元格，单击 “按钮” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，连续插入几个“不换行空格”，再单击 “按钮” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，打开“属性”面板，将“动作”改为“重设表单”。
13、选择“提交”按钮，打开行为“面板”，添加行为“检查表单”，打开“检查表单”对话框，将文本“text1在表单中，text2在表单中”都设为“必需的”，单击“确定”按钮。
14、选择整个表单，打开“属性”面板，在“动作”中输入“mailto：你的邮箱地址”。
15、按【Ctrl+S】保存该网页为form.htm，按【F12】键预览。
实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）
实验八：设计并制作一个视频网站
实验内容：制作一个视频网站
实验目的：掌握和了解网站制作的流程，熟练使用网页制作的各种技巧 实验器材：装有Dreamweaver的PC机一台，耳麦一副 实验步骤：
（一）制作首页
1、定义网页基本属性
（1）在空白文档窗口中，按【Ctrl + J】键打开“页面属性”对话框，在“标题”文本框内输入网页标题“游戏王国”，设置网页的背景色为“黑色”，文本色为“白色”，在“跟踪图像”框内选取绘制好的草图作为网页的“跟踪图像”，单击“确定”按钮。（2）按【Ctrl + S】键将文档保存到站点中。
2、页面布局
（1）在文档窗口中，将“插入栏”切换到“布局”选项卡，再单击“布局视图”按钮，将文档窗口切换到布局视图模式。
（2）单击“插入栏”中的“绘制布局单元格”按钮，在文档窗口顶部沿着跟踪图像绘制一个适当尺寸的布局单元格（用于放置标志图案），按住【Ctrl】键不放，继续使用“绘制布局单元格”按钮，在文档窗口中的两侧分别绘制两个布局单元格（用于放置页面两侧的边 框图案），在左侧沿着跟踪图像继续绘制三个布局单元格（左右两个单元格用于放置竖线效果，中间单元格用于放置“友情链接”等内容），适当调整各单元格的尺寸与位置。（3）将插入点分别定位到刚绘制的 6 个单元格内，然后按【Ctrl + Alt + I】组合键分别插入图像，适当调整布局单元格尺寸与图像匹配，并调整它们的位置。
（4）单击“插入栏”中的“绘制布局表格”按钮，在文档窗口右侧绘制第二个布局表格（嵌套在第一个布局表格中）。
（5）在该布局表格顶部沿着跟踪图像绘制一个用于插入金黄色细线的布局单元格，然后在其中插入这个图像，并适当调整它的尺寸与位置。
（6）按住【Ctrl】键不放，单击“插入栏”中“绘制布局单元格”按钮，在刚插入金黄色细线图像布局单元格下方的一行中绘制两个高度为 24 像素的布局单元格（左边单元格用于放小标题），然后使用“绘制布局表格”按钮，绘制一个包含这两个布局单元格的第三个布局表格。
（7）单击“绘制布局单元格”按钮，沿着跟踪图像继续绘制三个布局单元格（分别用于包含文字、图片和子栏目超链接）。
（8）分别在右侧布局单元格内添加图像与文字，并适当调整布局单元格与布局表格的尺寸与位置。为了看清楚在单元格中添加的文字，可按下【Ctrl + J】键打开“页面属性”对话框，将跟踪图像的透明度调整为“30%”。
（9）按照步骤（5）~（8）的方法添加另外两部分的内容（“Diablo”和“石器时代”）。（10）在最大的布局表格底部绘制一个布局单元格，并在其中插入图像（即最底端的图案，此处用作占位符），调整该布局单元格的尺寸与位置，使其与上面的内容相匹配。（11）在文档窗口中的左侧位于两个“细线”图像之间的区域按住【Ctrl】键不放，连续绘制 7 个大小相等的布局单元格。
（12）在其中插入图像、文字、日期、电子邮件链接和表单对象中的“列表/菜单”等网页内容，调整各单元格的尺寸与位置。
（13）单击“绘制布局表格”按钮，绘制一个布局表格，使其包含页面左侧除最左边的布局单元格之外的 10 个单元格。
（14）分别将左右两侧的4个布局单元格，即用来放置左右边框和左边两条竖线的单元格，适当调整高度与内容相匹配，并将其他布局表格与布局单元格的尺寸与位置适当调整。
（15）按【Ctrl + S】键保存对文档的修改。
3、进一步排版
接下来使用表格对页面进一步排版，具体步骤如下。（1）将文档窗口切换到“标准视图”模式下。
（2）将最后一个布局表格中的列表/菜单、日期与电子邮件链接所在单元格的对齐方式设置为水平“居中对齐”、垂直“中间”对齐，将包含文字与图像的单元格设置为水平“左对齐”、垂直“中间”对齐。
（3）在靠近边缘的两个单元格中设置背景图像，作为整个网页界面中的边框，在包含有细线的单元格内设置背景图像，最后选中左边用于放置“友情链接”的表格，为其设置背景 图像。
（4）将包含文字“Counter-Strike”、“Diable II”和“石器时代”所在单元格的对齐方式设置为水平“居中对齐”、垂直“中间”对齐，分别选择这三个单元格，然后设置一个背景图像，适当调整单元格的尺寸与位置。然后选取包含该单元格的表格，设置其背景图像。（5）将包含有文本“Counter-Strike”、“Diable II”和“石器时代”单元格下方的三个单元格的对齐方式设置为垂直“中间”对齐。
（6）将底部单元格的图像设置成为该单元格的背景图像，并适当调整单元格的尺寸。（7）设置完成后，在浏览器窗口中预览网页，然后适当调整各个表格与单元格的尺寸，按【Ctrl + S】键保存对文档的修改。
4、完善页面
最后设置页面中的超链接，并使用 CSS 技术对网页中的内容进行格式修饰，具体步骤如下。
（1）分别为文档窗口中的文本添加超链接（暂时没有制作目标文件的可以用“#”指定空链接），然后按【Shift + F11】键打开“CSS 样式”面板。
（2）在“CSS 样式”面板中，单击“新建 CSS 样式”按钮，在打开的“新建 CSS 样式”对话框中的“名称”文本框中输入“test”，在“类型”框中选择“创建自定义样式（class）”单选按钮，在“定义在”框内选择“新建样式表文件”，单击“确定”按钮。（3）在打开的“保存样式表文件为”对话框中选择站点根目录，在名称框中输入“mystyle”，单击“保存”按钮。
（4）在打开的“.test 的 CSS 样式定义（在 mystyle.css 中）”对话框，设置字体为“宋体”、大小为“16”像素（px）、颜色为“#CCCCCC”、行高为“150%”，单击“确定”按钮。在文档窗口中分别选择描述游戏栏目的正文文字，在“CSS 样式”面板中单击“test”将段落文本应用该样式。
（5）单击“新建 CSS 样式”按钮，在“新建 CSS 样式”对话框中的“名称”文本框内输入“gold”，在“定义在”框内选择“mystyle.css”样式表文件，单击“确定”按钮，打开“.gold 的CSS样式定义（在 mystyle.css 中）”对话框，设置字体为“宋体”、大小为“16”像素（px）、颜色为“#d1c598”、行高为“120%”，单击“确定”按钮，在文档窗口将左侧插入了小图标的文本应用该样式。
（6）单击“新建CSS样式”按钮，在“mystyle.css”中定义一个名为“title”的样式，定义该样式时，设置字体族列表“宋体、Arial”，大小为“16”像素，行高为“150%”，颜色为“#d1c598”。然后为标题文本“Counter-Strike”、“Diable II”和“石器时代”应用该样式。
（7）单击“新建 CSS 样式”按钮，在“mystyle.css”中定义一个名为“border”的样式，定义该样式时，设置边框样式为“凸出”、宽度为“细”、颜色为“#990033”，选中“全部相同”复选框，单击“确定”按钮。在文档窗口中，将包含超链接的单元格选中，然后应用该样式。
（8）在该样式表文件中，新建4个“使用CSS 选择器”样式。在 a:link 样式中，设置字体为“宋体”、大小为“16 像素”、行高为“120%”、颜色为“#D1C598”、修饰为“无”；在
a:visited 样式中，设置与 a:link 相同；在 a:hover 样式中，设置颜色为“#FFF9CC”，修饰为“下划线”，其他相同；在 a:active 样式中设置颜色为“#990033”，修饰为“无”，此时网页的中的超链接自动应用了 CSS 选择器样式。
（9）在该样式表文件中，新建一个名称为“button”的“创建自定义样式”，在“类型”选项中设置字体为“宋体”、大小为“16”像素、颜色为“#FFEFC6”；在“背景”选项中设置背景颜色为“#333333”；在“边框”选项中设置边框样式为“实线”、宽度为“细”、颜色分别为“#d1c598”、“#333333”、“#333333”、“#d1c598”（需先将“全部相同”选项清除），最后将文档窗口中插入的“列表/菜单”应用该样式。
（10）适当调整各个表格与单元格的尺寸与位置，按【Ctrl + S】键保存对文档的修改。
（二）制作其它页面
插入文字、图片、声音、动画、视频
（三）测试发布
1、Dreamweaver 中打开站点首页，然后按【F12】键预览页面，在浏览器中测试每一个页面，看内容是否能正确显示，尤其要测试超链接是否能正确工作。
2、将整个站点目录复制到另外一个位置，然后在浏览器中打开站点首页，测试是否所有的超链接都能正确工作。使用这种方法能够检测出使用绝对路径创建出的不正确的超链接。如果碰上无法正确跳转的超链接，应回到原来的站点中，打开相应页面重新设置超链接。
3、为了确保不同的浏览者能够看到一致的页面效果，制作好的网站还应在不同的显示分辨率下进行测试，至少要在 800×600像素和1024×768像素两种分辨率下进行测试。另外，还需要在不同字体显示大小情况下进行测试（即在“大字体”和“小字体”两种方式下测试），以确保不同字体设置的浏览者能够看到一致的字体效果。
4、测试完成之后，就可以将网站发布到远程站点上。
实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）
第五篇：《Flash动画制作》实践教学大纲讲解
《Flash动画制作》实践教学大纲
中文名称：Flash动画制作
英文名称：Flash Animation
面向专业（层次）：动漫设计与制作专科 开设学期：第二学期 考核方式：考试
一、教学目标
通过实践课程教学，使学生能熟练掌握Flash动画的制作技术，并能融合自己的思维及创意，设计制作出具有完整主题要求的Flash作品，使学生成为符合网站开发、广告设计、电子杂志制作等岗位需求的高级平面动画制作技术人才。
二、基本要求
使学生在掌握Flash动画基本原理和技术的基础上，能理性地、有针对性地选择使用Flash提供的动画表现技术创作动画作品，激发学生的创新精神和创新能力，缩短理论和实践的距离。具体应达到下列基本要求。
1.能够制作运动补间动画、形状补间动画和逐帧动画；
2.能够制作基本层动画、具有遮罩特效的动画和具有链接引导特效的动画； 3.能够制作按钮并能够为按钮设置控制动画播放的动作脚本； 4.能为Flash作品添加声音。
三、实践项目内容及学时分配
序 号 实践项目名称
每组人数
实践 学时
实践 类型
必做选做
主要内容
使用Flash工具箱中的图形动画图形的1 绘制与编辑工具设计制作动绘制与编辑
画场景和动画角色 6 设计 必做
熟悉Flash动画的制作流2 简单动画制作 程，设计制作简单的小动1 6 设计 画。在动画中应制作包含不同类型元件的动用元件 画作品 6 设计 设计创作高级动画作品，包4 高级动画制作 含引导层、遮罩层、多个场1 6 设计 景。动画配乐 为动画导入声音并实现声音与动画的同步 验证6 交互式动画为动画作品制作播放按钮，制作 制作简单的动画编程特效 验证7 期末课程设综合运用动画制作技术创作计 一个完整的动画作品 1
验证
四、实验教材、参考书
（一）教材
《Flash 8中文版实用教程》，李如超，人民邮电出版社，2009.10
（二）参考书
《中文版Flash 8实例与操作》，孙志义，航空工业出版社，2010.6 说明：
本大纲规定学生应做6个项目，合计28学时；选做1个项目，合计2学时； 总计30学时。
撰写人：张琳 审核人：周改云
必做
必做
必做
选做
必做
必做
点击咨询 