第8章 Dreamweaver 8行为与时间轴

（2）使用“高级”方式
通过8个不同的选项卡，对站点进行详细的设置
（在对话框左侧的“分类”选项中选择不同的类 别
，在右侧的“本地信息”中设置相应的参数）
。
hkj
13
创建网页文件
创建空白页面文件：从顶行“文件”菜单或在 文件面板中用右键快捷菜单中的命令。
保存文件：用“文件”菜单命令或标签上点右 键
打开页面：双击“文件”面板中的文件或从顶 行“文件”菜单中或从起始页中。
hkj
“属性”面板（属性检查器）
面板组 文件 面板
7
Dreamweaver 8的界面
标题栏：显示本软件及所打开文件的名称 菜单栏：共10项可完成Dreamweaver的所有功能 “插入”工具栏：放置了网页中可以插入的对 象，单击名称右边的下拉按钮切换（下拉列表 方式）亦可转换为选项卡方式（显示为制表符 ） 标签选择栏：切换页面的显示方式 页面区域：编辑页面的位置 “属性”面板：用来设置页面上内容的属性（ 选定的内容不同，面板上显示的属性也不同） hk面j 板组：在各面板名称上单击可展开或折叠8
hkj
3
网页制作基本概念（二）
网站是若干网页的集合，是由成百上千个 相互关联的网页所组成的一个整体。
在访问一个站点时，可以输入这个站点的 IP地址，也可输入它的域名。
当移动鼠标到页面上的某处时，如果指针 变成一只小手，该位置就是一个超链接。 通过超链接可以方便地访问网上的相关页 面，而不用输入难记的URL地址。超链接 是一种允许和其他网页或网站之间进行连 接的元素，是网页制作的精华。
允许多个连续的空格、历史步骤最多次数等。
“文件类型/编辑器”：用外部代码编辑器右边
的“浏览” 或右下角的“+”，为不同的文件类型 设置外部编辑器（之后在Dreamweaver中双击对象 或用右键快捷菜单可直接调出相应软件编辑此对象 ）。

创建层
层的首选参数设置 层的建立 层的嵌套
《中文Dreamweaver 8网页设计教程》
层的首选参数设置
在新建层之前，通过“首选参 数”对话框中的“层”选项来设 置层的默认属性。
《中文Dreamweaver 8网页设计教程》
层的建立
将插入点放置在“文档”编辑窗口中，然后 选择[插入] [布局对象] [层]菜单命令将自动 在插入点插入一个层。 在“插入栏”的“布局”插入栏中单击“绘 制层”按钮，拖动鼠标绘制一个层。 在“插入栏”的“布局”插入栏中单击“绘 制层”按钮，在文档编辑窗口中单击鼠标可 绘制一个层。 在“插入栏”的“布局”插入栏中单击“绘 制层”按钮，按住【Ctrl】键并拖动即可连 续绘制多个层。
《中文Dreamweaver 8网页设计教程》
层与表格的相互转换 将层转换为表格 将表格转换为层
《中文Dreamweaver 8网页设计教程》

将层转换为表格
层和表格都是对网页进行精确定位的工具， 用层定位比表格定位使用起来更加方便，但层 只有在Internet Explorer 4.0或Netscape Navigator 4.0以上的版本中才能够正确显示。表格对浏览 器的版本高低没有要求，如果要使设计的网页 在更低版本的浏览器中也能被正确显示，那么 可将用层设计的网页转换为表格形式。
设置单个层的大小 设置多个层的大小
层属性的设置
设置单个层的属性 设置多个层的属性
《中文Dreamweaver 8网页设计教程》
设置单个层的大小
在文档编辑区选择一个层，在出现的调整柄上按住鼠 标左键不放并拖动，当调整到适当的大小时释放鼠标 即可。 在文档编辑区选择一个层，按住【Ctrl】键的同时再 按键盘上的方向键即可按一次1个像素的步幅来调整 层大小。 在文档编辑区选择一个层，按住【Shift+Ctrl】键的同 时再按键盘上的方向键即可按一次10个像素的步幅来 调整层大小。 在文档编辑区选择一个层，以像素为单位在属性面板 中输入宽度和高度的值。

• 转到时间轴帧 ： 允许对指定的时间轴控制播放其指定的时间帧 以及循环的次数。
• 播放时间轴，停止时间轴 ： 允许用户通过某种事件来播放或停止播放时间轴
2019/4/25
21
四、时间轴应用实例
制作在网页上飘动的广告图片(gundong.html) 小广告在网页上飘动，当鼠标指向广告时广告停止
不动，当鼠标离开广告时，广告继续飘动
2019/4/25
11
时间轴弹出菜单
当
前
回
播
每秒
首 后 放 播 播放
帧 退 帧 放 帧数
二 、时间轴面板
自动 循环 播放 播放
行为频道 播放头
动画频道
动画栏
帧数
关键帧
自 循播动动关 总动环 画键放画帧时 回后播播播 栏帧间首放头频数退放放 （轴：：帧： 条： 道弹选是使 ）：择出值 ： 表将动页：将“菜是 显 示面即播画自播单在动页 示 每栏放：放播浏画指中面 动 个头头放览频定给”器 道移上画动向当复某中动前当层画选左右打 的个到框文前和栏开 蓝移对，档时时 色使显图占动的象间， 小当哪示像有指一当 条轴前个定页前 ，的帧的时面时 显了首间是栏帧在间 示属轴帧载时数轴 每显性入可 个间。浏示（以 对览在轴如无象器时限的的位时间循持自置哪轴动环续面）开一播时板的始放间帧中播帧。放。时间轴
7. 移动层，使运动轨迹呈曲线状
2019/4/25
19
（二）通过拖动路径创建时间轴动画
1. 插入一个层 2. 移动该层到动画的起始处，选中该层
3. 选择 修改时间轴录制层路径
4. 在页面上拖动层，创建想要运动的路径并在动 画结束的地方松开鼠标。
2019/4/25
20
（三）控制时间轴

创建时间轴动画，就是往时间通道上添加层，构建动 画条，创建关键帧，指定层在文档中处于关键帧时的位置， 再串联播放，从而实现动画。
利用时间轴和层创建动画有两种方法：关键帧方法和 录制层路径方法 。
2.3．关键帧方法
2.4．录制路径法
操作：将层添加到时间轴上选中层在右键快捷菜单中单击【记录 路径】命令项 在编辑窗口中按住鼠标左键拖动层录制路径录制完 成
第十四讲 时间轴
1、认识时间轴 2、创建时间轴动画
1、认识时间轴
➢ 1．基本概念 ➢ 2．显示时间轴 ➢ 3．时间轴面板 ➢ 4．播放选项 ➢ 5．添加对象到时间轴
1.1. 基本概念
• 动画的实现原理就是将不同的画面或者是不同位置的同一个画面串
连起来播放，让人产生运动的错觉。时间轴就是利用这个原理来实现 页面中层的动画效果的的，它的基本单位就是一个画面，或者叫做帧。 在这些画面中有些画面起着非常关键的作用，可以影响整个动画的， 这样的帧叫做关键帧。
2、 创建时间轴动画
• 2.1 • 2.2 • 2.3 • 2.3
基本操作 创建动画方法 关键帧方法帧 录制路径方法
2.1．基本操作
一、插入关键帧 插入关键帧方法：将鼠标光标移到时间轴，按住Ctrl键，鼠标
光标变成小圆圈状，左键单击需要插入关键帧的地方，此时在该 位置出现一个小圆圈，表示插入了一个关键帧。并且编辑窗口中 的层也自动移到与当前帧相对应的轨迹位置上。然后在编辑窗口 中将层拖动适当距离后，放开鼠标，即可改变层的运动路径。
如果要移动关键帧，可以直接左键单击选中关键帧，然后向左 右拖动。 二、添加/删除帧
如要在时间轴上添加或者删除帧，则执行【修改】/【时间轴】 /【添加帧】命令或者执行【修改】/【时间轴】/【删除帧】命令。