全国“创新杯”说课大赛计算机专业类优秀作品：时间轴动画制作学案.doc

1、 - 1 - 学生实训手册 【任务描述】 任务一任务一：在网页呈现浮动窗口：使用层和时间轴动画。 将层添加到时间轴 添加关键帧 任务二：任务二： 提问 1：当鼠标经过时，如何停止动画？ 提问 2：当鼠标离开的时候，如何继续动画？ 提问 3：有多个对象（层）如何实现同时动画？ 提问 4：有多个时间轴如何实现控制？ 任务三任务三：自由创作，在网站中实现浮动窗口。 提示 1：查看知识链接 - 2 - 提示 2：试图添加多个层对象，完成更优的效果。 提示 3：针对多时间轴，利用行为对其进行有效控制，使得画面更丰富。 【知识链接】 经典再读：经典再读：F 形状网页浏览模式形状网页浏览模式 一、尼尔森的一

2、、尼尔森的 F 形状网页浏览模式形状网页浏览模式 在美国长期研究网站可用性的著名网站设计工程师杰柯伯 尼尔森在2006年4月发表了 一项眼睛轨迹的研究报告。报告发现，人们大多不由自主地以“F”字母形状的模式来阅 读网页。尼尔森指出，网页的阅读模式和人们从学校里养成的读书习惯迥异。这份研究报告 是从232名读者阅览几千张网页的实验中得出这个结论的。研究者发现，读者的阅读行为在 浏览不同性质的网站和肩负不同的阅读任务时候都表现出基本上恒定的习惯。 这种有压倒性 的阅读模式就宛如英文字母 F 的形状，并且包括下面三个方面： 第一， 读者的眼睛首先是水平运动，常常是扫过网页内容的最上半部分。这样就形成

3、 了一条横向的运动轨迹。这就是 F 字母的第一条横线。 第二， 读者的眼光略微下移，很典型地扫描比第一步范围较短的区域。这就又画了 F 字母中的第二条横线。 第三， 读者朝网页左边的部分进行垂直扫描。有时候，这个举动很慢而且很有系统性， 这样就画了 F 字母中的一条竖线。 下面这三张的热度图用来表明眼睛的运动轨迹并且用色彩来显示眼光聚焦程度的高低。 越高 的地方，颜色越热，分别为红色（最热） ，黄色（较热） ，蓝色（不热）和灰色（没有温度） ， 如图1，图2，图3所示。 - 3 - 这三张是三种不同性质的网页。 第一张是一般的说明性网页， 第二张是个电子商务网页， 而第三张则是 Google

4、搜索结果页。其结果都显示出 F 字母的轮廓。在第三张 Google 搜索 结果页面的第二条红色横线比较长， 是因为排名第二的标题比较长， 所以目光扫过的距离也 长，所以这个 F 的下面横线比上面长。 二、二、F 形状模式的意义形状模式的意义 F 形状模式对网页设计的含义很透彻，也就是网页的设计和推广要有下面五个重要考 虑。 第一， 读者不会非常仔细地一个字一个字看网页的内容。很少有人通篇在看。所以， 每页不一定要填充非常多的内容，也就是说，每个网页不要过长。 第二， 网页的头两段非常重要，读者们基本上最关注这个部分。所以，这两段的写作 好坏能直接影响读者是否有兴趣继续待在在此页吸收信息。 第三

5、， 将重要的关键词尽可能地及早在标题、副标题和段落的前部显示给读者。这个 安排内容的方法对搜索引擎也同样重要， 因为搜索引擎的阅读方式是在模仿人。 搜索引擎对 网页的标题和前面段落非常重要，所以，网页的优化要充分考虑这一点。 第四， 人们对搜索引擎，比如 Google 的搜索结果页面的反应也是 F 型的。在图3中， 我们可以看到，人们的眼光普遍注意搜索结果的自然排名（或者叫左侧排名）最前面13 个搜索结果，而对410的搜索结果是一带而过。就是人们往下看搜索结果，也是“勉强”的。 换句话说，将你网站排名在搜索结果页的前一两位直接决定了你网站受关注的程度。 第五， 搜索引擎竞价广告，除非能被放置在

6、搜索结果页的最顶端和右边广告区的第一 位， 否则无法得到搜索者的关注。 然而， 获得最顶端和右边第一， 往往点击的费用是很贵的。 如果资金不足，只能做到右边两位以下，广告不易受到关注。另外，即使竞价广告获得最顶 端和右边第一， 从图上看得出， 广告的关注度也远远不如搜索引擎结果的自然排名的前一两 位。所以，搜索引擎优化是最能提高网站曝光度的办法 Q。 - 4 - 【任务评价】 通过本任务的学习，给自己的学习打个分吧。 （一颗为 1 分） 评分内容 分值 组长评 教师评价 专家评价 （满分 10 分） 第一关 比快 （每组完成最快） 第二关 比好 （每组完成最好） 第三关 比 靓 行为控制 尚可

7、 好 多个对象 （多对象单个时间轴） （多对象多个时间轴） 创新突破 尚可 好 小计 总分 DW 时间轴动画在页面不显示时间轴动画在页面不显示 Q：先拖动层到时间轴里设置好第一帧的位置，再把指针拖到 15 帧上，然后把层拖到另一 个位置，点击自动播放和循环，按 F12 预览没效果？ A：拖动层时的关键帧有误。其他提示：所选时间轴实根据时间的流逝移动图层位置的方式 显示动画效果的一种动画编辑界面，在时间轴中包含了制作动画时所必须的各种功能。 1、时间轴的各项功能 （1）时间轴弹出菜单：表示当前的时间轴名称。 （2）时间轴指 针：在界面上显示当前位置的帧。 （3）不管时间轴在哪个位置，一直移动到第

8、一帧。 （4）表示时间指针的当前位置。 （5）表示每秒显示的帧数。默认值时 15 帧。增加帧 数值，则动画播放的速度将加快。 （6）自动不放：选中该项，则网页文档中应用动画后 自动运行。 （7）LOOP（循环） ：选中该项，则继续反复时间轴上的动画。 （8）行 为通道：在指定帧中选选择要运行的行为。 （9）关键帧：可以变化的帧。 （10）图 层条：意味着插入了“层”等对象。 （11）图层通道：它是用于编辑图层的空间。 2、在 DW8 中显示时间轴 选择菜单栏的窗口/时间轴或按快捷键 AltF9， 则显示时间轴。 9.3板书设计 - 5 - 1基本概念 时间轴 关键帧 2时间轴面板 打开方式： 【窗口】/【时间轴】 （ALT+F9） 3添加对象到时间轴 4. 创建动画方法 关键帧方法 录制层路径方法 5. 行为 onmouseover 停止时间轴 onmouseout 开始时间轴 6. 添加多个对象 7. 添加时间轴