实验内容制作图片放大效果制作拼图游戏制作漂浮.ppt

,实验内容1、制作图片放大效果2、制作拼图游戏3、制作漂浮公告拦,实验目的、熟练在DW中运用层,实验重点 1、制作漂浮公告拦,实验难点、制作拼图游戏,第一个实验：制作图片放大效果实验步骤：第一步：新建普通页面并保存。第二步：在此页面里插入一个一行一列的表格，并设置高和宽，这里我们输入高66像素，宽44像素的表格，如下图所示。,第三步：在表格中插入相应的图片，这里我们插入111.jpg，如下图所示：,第四步：绘制层，层要刚好盖住上一步输入的表格。如下图所示,第五步：在层内插入这张小图的原始大图第六步：把上一步绘制的层设置为隐藏。如下图所示：,第七步：选中第二步输入的表格，然后设置行为中的“显示-隐藏层”，如下图所示,第八步：点击“显示”后再按“确定”,行为面板中将显示：,第九步：类似操作，点击“隐藏”后再按“确定”,然后在行为面板中设置成下图所示：,第十步：将第七步中的选中对象改成“Layer1”然后重复后面的操作。,第二个实验：制作拼图游戏实验步骤：第一步：准备好下面的页面，为放入相应的图片做准备。,第二步：在这四个单元格上分别绘制大小一致的四个层。如下图所示：,第三步：分别在这四个层内插入准备好的四张图片，并用键盘上的方向键调整这四个层的相对位置，使四张图片看起来是无缝拼合在一起的。如下图所示：,第四步：在行为面板中选择“拖动层”如下图：,第五步：在“拖动层”对话框中点击“取得目前位置”按钮。,然后选择“高级”选中“恢复Z轴”点击“确定”,再来设置行为面板中的动作，如下图所示：,第六步：与第五步相同的方法设置好其他三个层。第七步：将这四个层都拖离它们所在的四个单元格。,第三个实验：制作漂浮公告拦实验步骤：第一步：在准备好的页面上绘制一个层，并给层加上背景，如下图：,第二步：在层中插入一行一列的表格，宽和高同时设置成100%，并加入“公告栏”，再给它加一个链接。如下图：,第三步：打开时间轴面板，右键点击层边缘，弹出属性菜单，点击“添加到时间轴”如下图所示：,第四步：点中15帧进行拖动到400帧。,第五步：然后把层从起点拖到终点，这就是这400帧层的运动轨迹。,第六步：为了让层运动轨迹更加自然，我们在先200帧处分别添加关键帧，如下图所示：,第七步：然后拖动层到理想的位置，如下图，那么它的运动轨迹成了一个抛物线，看起来就比较自然了。,第八步：为了使层的运动轨迹更加自然，我们可以依照上一步的方法添加多个关键帧来设置层的运动轨迹。第九步：把时间轴面板上的“自动播放”和“循环”都选上，它们分别表示当页面一打开就运行运动和层运动到了终点后，再到起点循环播放。,【实验小结】通过这三个实验，大家要对层有一定认识，层在网页制作中是非常有用的，希望大家引起重视，在以后的作品中多用到灵活的层元素。,谢 谢！,