DW教程--八、层与时间轴的应用
Dreamweaver 8中文版网页制作第10章 使用层和时间轴
10.1.2 创建层
4、单击层的边框线选中层。
10.1.2 创建层
三、缩放层 1、选定层，然后拖动缩放手柄（层周围出现的小方块） 来改变层的尺寸。拖动上或下手柄改变层的高度，拖动左或右 手柄改变层的宽度，拖动4个角的任意一个缩放点同时改变层 的宽度和高度。
10.1.2 创建层
2、选定层，然后按住Ctrl键，每按一次方向键，层就被 改变一个像素值。 3、选定层，然后同时按住Shift＋Ctrl键，每按一次方向 键，层就被改变10个像素值。 如果同时对多个层的大小进行统一调整，方法是，按住 Shift键，将所有的层逐一选定，然后在【属性】面板的【宽】 文本框内输入数值，按Enter键确认。此时文档窗口中所有层 的宽度全部变成了指定的宽度。 还可以使用【修改】/【排列顺序】/【设成宽度相同】命 令来统一宽度，利用这种方法将以最后选定的层的宽度为标准。
10.2.2 创建时间轴动画
二、将对象添加到【时间轴】面板的方法 • 选择【修改】/【时间轴】/【增加对象到时间轴】命令。 • 将层直接拖曳到【时间轴】面板中。 • 单击【时间轴】面板右上角的 按钮，在快捷菜单中选 择【添加对象】命令。 三、在时间轴中添加或移除帧的方法 • 选择【修改】/【时间轴】/【添加帧】或【删除帧】命令， 在播放头右边加入或删除1帧。也可以使用右键菜单命令进行操 作。 • 选择【修改】/【时间轴】/【增加关键帧】命令，在当前 播放头位置增加关键帧；选定关键帧，选择【修改】 /【时间轴】 /【删除关键帧】命令，将当前关键帧删除。也可以使用右键菜 单命令进行操作。
10.1.2 创建层
四、移动层 • 选定层后，当光标靠近缩放手柄出现 时，按住 鼠标左键不放并进行拖动，层将跟着鼠标的移动而发生位 移。 • 选定层，然后按4个方向键向4个方向移动层。每按 一次方向键，将使层移动1个像素值的距离。 • 选定层，按住Shift键，然后按4个方向键，向4个 方向移动层。每按一次方向键，将使层移动10个像素值的 距离。
Dreamweaver8和Flash8案例教程时间轴和行为详解
动画条：表示一个动画所占的帧数，上面
标有该动画所在层的名字。它的起始处和 终止处各有一个小圆，表示首帧和终止帧。 如果设置了关键帧，则关键帧也会有一个 小圆。 动画通道：它由许多图层组成，表示可以 在一个页面内加入多个时间轴动画，但最 多只可以加32个。它的左边标有图层的编 号，图层编号大的动画在图层编号小的动 画之上。
事件是指引发动作产生的事情，例如， 鼠标移到某对象上、鼠标单击某对象、 “时间轴”面板中的回放头播放到某一帧 等。要创建一个行为，就是要指定一个动 作，再确定触发该动作的事件。有时，某 几个动作可以被相同的事件触发，则需要 指定动作发生的顺序。
Dreamweaver 8采用“行为”面板 （也叫做行为控制器）来完成行为中的动 作和事件的设置，从而实现动态交互效果。
（2）动画的删除
删除动画条：选中要删除的动画条，再单
击“编辑”→“剪切”菜单命令。 删除动画的移动路径：选中要删除的动画 条，再按Delete按键。 删除所有动画条：单击时间轴菜单中的 “删除时间轴”菜单命令。
（3）动画的复制
单击选中要复制的动画条。再单击时间轴
菜单中的“复制”菜单命令。 调整回放头的位置。再单击时间轴菜单中 的“粘贴”菜单命令，即可在选中的动画 条的右边复制一个动画条。而且可以复制 到其他页面的“时间轴”面板中。
（4）“向下移动”按钮 ：单击此 按钮，将选中的行为在“行为”面板 中向底部移动。 （5）“显示所有事件”按钮 ：单 击此按钮后，在“行为”面板中将显 示出此对象所能使用的所有事件，如 图5-2-4所示。
（4）动画的移动
单击选中要移动的动画条。再单击时间轴
菜单中的“剪切”菜单命令。 调整回放头的位置，再单击时间轴菜单中 的“粘贴”菜单命令，即可将动画条移到 回放头所处的位置处。利用此方法，还可 以移动到其他页面的“时间轴”面板中。
第三章 Dreamweaver 8基础知识-第3章Dreamweaver 8基础知识
4
5.3 创建网页 5.3.1 页面属性的设定 1．设置“外观”页面属性 2．设置“链接”页面属性 3．设置“标题”页面属性 4．设置“标题/编码”页面属性 5．设置“跟踪图像”页面属性
《网页设计与制作》
5
5.3.2 网页文字的处理 在网页中输入文本是最基本的操作。在 “文档窗口”中可以直接输入文字，一般 Dreamweaver 8中的文本段落是自动换行的， 即在输入文字时，若一行文字超过了窗口显示 范围时，会自动换到下一行。如果在文本输入 的过程中需要划分段落，可以用Enter键进行 换行，用Enter键换行后上下段落的行间距为 一行。如果用Shift+Enter键进行强制换行，换 行所产生的行间距为用Enter键换行所产生的 行间距的一半。另外“文档窗口”也支持 Word的复制、粘贴等功能。
第3章 Dreamweaver 8基础知识
《网页设计与制作》
1
5.1 Dreamweaver 8概述 5.1.1 Dreamweaver 8的新增功能 Dreamweaver 8新增了许多功能，大大改 善了软件的易用性，使用户无论处于设计环 境还是编码环境都可以方便地制作页面。新 增的主要功能有： 1. 用户界面的改进 2．多种样式呈现面板 3．新的标准CSS面板 4．与最新技术和标准集成 5．缩放功能 6．改进的WebDAV
《网页设计与制作》
6
5.3.3 网页图像的处理 1．图像的添加和编辑 2．插入其它图像元素 1）插入“图像占位符” 2）插入“鼠标经过图像” 5.3.4 制作多媒体页面 为了增强网页的表现力，丰富文档的显示效果，可以 向其Flash动画、Java小程序、音频播放插件等多媒体内容。 1．插入Flash动画 2．插入Flash按钮 3．插入声音
dreamweaver第9章
图 9-3 行为面板
9.1.3 动作 动作是由预先编写的JavaScript代码组成的，这些代码能够执行某种特定 的任务，如弹出信息，打开浏览器窗口等。单击行为面板中的按钮 ，弹 出如图9-4所示的内置动作（灰色显示的动作表示作用对象不可用或所选 的【显示事件】项中浏览器版本较低）。
图 9-4 动作菜单 交换图像：“交换图像”动作通过更改img标签的src属性将一个图像和 另一个图像进行交换。 弹出消息：“弹出消息”动作显示一个带有指定消息的 JavaScript 警 告。 恢复图像交换：“恢复交换图像”动作将最后一组交换的图像恢复为它
图 9-1 层属性面板
在层属性面板中： • 层编号：用于指定一个名称，用于识别不同的层。 • 左和上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位 置。 • 宽和高：指定层的宽度和高度。 • Z 轴：确定层的z轴顺序（即堆叠顺序）。 • 可见性：指定该层最初是否是可见的，有4个选项： • “默认”：不指定可见性属性，默认为“继承”。 • “继承”：使用该层父级的可见性属性。 • “可见”：显示这些层的内容。 • “隐藏”：隐藏这些层的内容。 • 背景图像：指定层的背景图像。 • 背景颜色：指定层的背景颜色。 • 溢出：控制当层的内容超过层的指定大小时如何在浏览器中显示层。 • “可见”：指示在层中显示额外的内容。 • “隐藏”：指定不在浏览器中显示额外的内容。 • “滚动”：指定浏览器应在层上添加滚动条，而不管是否需要滚动条。 • “自动”：使浏览器仅在需要时才显示层的滚动条。 • 剪辑：定义层的可见区域。指定左侧、顶部、右侧和底边坐标可在层的坐 标空间中定义一个矩形。层经过“剪辑”后，只有指定的矩形区域才是可 见的。
在时间轴面板中： 时间轴选单：显示目前所编辑的时间轴名称。 播放头： 红色的播放头指示在网页中显示的是哪一帧。 动画条：即图中的Layer11，Layer12，可显示每个层对象的持续时间。 关键帧：动画条中的小圆圈是关键帧。 帧数：显示播放头的位置。 ：回转，可将播放头移到时间轴的初始帧。 ：后退，将播放头往左移动一帧。 ：前进，将播放头往右移动一帧。 FPS：播放速度。每秒种播放的帧数。 自动播放：当网页载入到浏览器时使当前时间轴自动播放。 循环：当网页载入到浏览器时使当前时间轴循环播放。
第3章Dreamweaver8网页制作
3.1 Dreamweaver8简介 3.2 网页文本及媒体的应用 3.3 表格的应用 3.4 布局表格的应用 3.5 超级链接 3.6 框架的应用 3.7 CSS样式的应用 3.8 层和行为的应用 3.9 时间轴的应用 3.10 表单的应用 3.11 模板的应用
3.1
本节知识
认识Dreamweaver8
在需要添加特殊字符的位置单击鼠标，设置插入点。 选择插入栏的“文本”类别（如图所示），单击最右边的
下三角
按钮，在弹出的下拉菜单中选择“其他字符”命令，弹出如图所示的 对话框，可在其中选择要输入的对象。
3.2.2
文本的编辑操作
也可通过软键盘来输入“★、■、※、【】”等特殊字符符号。
3.2.2
选择“关闭”命令。
在Dreamweaver 8窗口中选择“文件”|“退出”菜单命令。 在当前窗口为Dreamweaver 8工作界面时，按“Alt+F4”键退出
Dreamweaver 8。
3.1.3 Dreamweaver 8工作界面介绍
知识要点
插入栏
文档工具栏 文档编辑区 网页标签 扩展按钮 浮动面板组 属性面板 标签选择器 水平标尺和垂直标尺
3.1.1
知识要点
系统要求
Dreamweaver8的认识
在安装Dreamweaver8之前请确保硬件和软件环境满足以下条件： ① Intel Pentium III 600MHz或更快的处理器和等效的处理器 ② Windows 2000、Windows XP或Windows Server 2003 ③ 至少128MB的可用内存（建议采用256MB内存或更大内存） ④ 能达到1024×768像素分辨率或更高分辨率的监视器
dreamweaver8网页设计教程
《dreamweaver8网页设计》目录第一章遨游DREAMWEA VER8精彩世界1第二章创建与规划站点3第三章文本及其格式化10第四章表格13第五章图像15第六章框架18第七章页面布局视图的使用21第八章链接24第九章层与时间轴 28第十章表单32第十一章行为35第十二章制作动态页面38第十三章代码片断、库项目和模板 42第十四章网页的制作45第十五章网站的测试与上传49第十六章使用FIREWORKS 8处理网页图像 52第一章遨游Dreamweaver8精彩世界课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：2个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。
（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。
2、讲授新课（1） Dreamweaver的界面a．文档窗口：主菜单、工具栏、底部启动条、文档编辑区b．对象面板：标准、表格、表单、框架、特殊、文件廷冖隐藏、字符c．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理d．属性面板：随目前对象不同而内容不同(2)创建HTML网页(3)在网页中插入图像输入文字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状态。
dreamweaver8.0入门图文教程：Dreamweaver 8 操作
dreamweaver8.0入门图文教程：Dreamweaver 8 操作环境第一天的内容可能让你觉得枯燥乏味，不过，“工欲善其事，必先利其器”，让我们一起来了解Dreamweaver8的操作环境，完成站点的创建。
一、Dreamweaver8 的操作环境在首次启动Dreamweaver8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。
Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。
我们选择面向设计者的设计视图布局。
在Dreamweave 8 中首先将显示一个起始页，可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。
在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目，建议大家保留。
新建或打开一个文档，进入Dreamweaver8的标准工作界面。
Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。
1、标题显示栏启动Macromedia Dreamweave 8后，标题栏将显示文字Macromedia Dreamweave 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。
2、菜单栏Dreamweave 8的菜单共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。
其中，编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。
文件：用来管理文件。
例如新建，打开，保存，另存为，导入，输出打印等。
编辑：用来编辑文本。
例如剪切，复制，粘贴，查找，替换和参数设置等。
查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。
插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。
修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格，对其对象等。
dw操作技巧
Dreamweaver操作,看了第一行，想关了。
继续看下去...结果....哎,还是把全文复制过来吧第一章Dreamweaver的操作基础一、打开Dreamweaver的方法步骤：1.单击“开始”→所有程序→Dreamweaver→单击鼠标左键2．将鼠标指向桌面上Dreamweaver图标→双击鼠标左键3．将鼠标指向桌面上Dreamweaver图标→单击鼠标左键→在快捷菜单中单击打开。
二、认识Dreamweaver的界面三、Dreamweaver的操作基础1．新建步骤：文件→新建→基本页→创建2．打开步骤：文件→打开→查找范围→选定所需文件→打开3．保存步骤：文件→保存→另存为→保存在（地址）→输入（文件名）→保存4．复制步骤：打开所需文档→文件→另存为→保存在（地址）→输入新的（文件名）→保存四、属性栏的操作1．属性栏的打开方法步骤：窗口→属性（单击鼠标左键）2．文本的编辑步骤：选定→单击所需命令选项即可本章练习：第二章文字、图像与Flash动画一、使用文字1．设置文本属性步骤：打开原本文件→选定所需文字→字体下拉列表→选中所需字体（注：在属性面板中还可以分别设置字号、颜色、粗体、斜体等）2．插入常用文字元素（插入日期）步骤：常用→日期→日期格式→确定二、使用图像1．插入并设置图像步骤：常用→图像（按钮）→图像→选择图像源文件→查找范围→选定文件夹→选定所需图像→确定2．使用鼠标经过图像步骤：常用→图像→鼠标经过图像→原始图像（浏览）→选择所需图像→确定→鼠标经过图像（浏览）→选择所需图像→确定三、使用Flash动画1．插入动画步骤：常用→（媒体）Flash→选择所需文件→确定2．插入Flash按钮和文本步骤：（1）常用→（媒体）Flash→Flash按钮→选择样式→输入按钮文本→设置字体/字号→另存为（浏览）→保存在所需位置→输入文件名→保存→应用步骤：（2）常用→（媒体）Flash→Flash文本→输入方本→设置字体/字号→另存为（浏览）→保存在所需位置→输入文件名→保存→应用第三章建立网页超链接一、建立普通链接1．步骤：选中网页中的文字或图片→在属性面板中单击“链接” →浏览→选择文件→确定二、建立邮件链接步骤：打开原始文件→常用→电子邮件链接→输入文本→E-mail→确定三、建立锚点链接步骤：打开原始文件→常用→命名锚记→锚记名称→确定第四章使用表格排版一、表格的基本操作1．插入表格步骤：常用→表格→表格大小→输入行数/列数→表格宽度→确定二．设置边框和颜色步骤：选定表格→属性→边框颜色三．设置间距和填充步骤：（1）选定表格→属性→间距→输入数值（2）选定表格→属性→背景颜色四、单元格内文字对齐方式1．文字对齐方式步骤：选定表格→属性→格式栏→左对齐/居中对齐/右对齐/两端对齐2．表格对齐方式步骤：选定表格→属性→对齐五、拆分和合并拆分单元格1．步骤：选定→属性→合并单元格2．步骤：选定→属性→拆分单元格→输入行数/列数→确定六、插入和删除表格的行列步骤：修改→表格→插入行或列→位置→确定七、表格的布局视图步骤：选定→查看→表格模式→布局模式第五章使用表单元素一、关于表单/创建表单1．表单的应用范围非常广泛，如常见的留言板、讨论区、会员注册/登陆、在线查询等。
DW教程--八、层与时间轴的应用
第八节层与时间轴的应用层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。
文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。
一、创建层1、创建普通层（1）插入层选择菜单栏>插入>布局对象>层命令，即可将层插入到页面中去。
使用这种方法插入层，层的位置由光标所在的位置决定，光标放置在什么位置，层就在什么位置出现。
选中层会出现六个小手柄，拖动小手柄可以改变层的大小。
（2）拖放层打开快捷栏的“布局”选项，单击“绘制层”按钮，单击鼠标左键，并且按住不放，拖动图标到文档窗口中，然后释放鼠标，这是层就会出现在页面中了。
（3）绘制层打开快捷栏的“布局”选项，单击“绘制层”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是层的大小，释放鼠标猴层就会出现在页面中。
2、创建嵌套层创建嵌套层就是在一个层内插入另外的层。
方法一：将光标放才某层内，选择菜单栏>插入>布局对象>层命令，即可在改层内插入一个层。
方法二：打开层面板，从中选择需要嵌套的层，此时按住Ctrl键同时拖动改层到另外一个层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样普通层就转换为嵌套层了。
二、设置层的属性选中要设置的层，就可以在属性面板中设置层的属性了。
层编号：给层命名，以便在“层”面板和 JavaScript 代码中标识该层。
左、上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。
宽、高：指定层的宽度和高度。
如果层的内容超过指定大小，层的底边缘（按照在 Dreamweaver设计视图中的显示）会延伸以容纳这些内容。
（如果“溢出”属性没有设置为“可见”，那么当层在浏览器中出现时，底边缘将不会延伸。
DwMX第7章使用层和时间轴05_1
设置层的参数 “宽”和“高”：指定插入层时，默认宽度
和高度(以像素为单位)。 “背景颜色”：指定默认的背景颜色，
❖从颜色选择器中选择颜色。
“背景图像”：指定默认的背景图像，
❖单击“浏览”按钮选择一个图像文件。
设置层的参数 “嵌套”:设置在层中创建的层是否为嵌套
层。
❖绘制层时，按下Alt键可临时更改此设置。
还可以为层设置时间轴，
❖控制层的运动时间和路线。
创建层
7.1 创建层
▪ 层的HTML标记可以是div或span，
Dreamweaver 默认使用div标记创建层。
▪ 层的属性主要包括:
x 坐标、y 坐标、z 轴(层叠顺序)、宽度、 高度以及可见性。
在页面上创建层
7.1.1 在页面上创建层
“层”面板
7.1.2 “层”面板
▪ 通过“层”面板可以管理页面中的层。
可防止层重叠； 更改层的可见性； 将层嵌套或层叠； 以及选择一个或多个层。
▪ 要打开“层”面板，可选择菜单“窗
口”>“其他”>“层”命令。
“层”面板
▪ 在“层”面板层按 z 轴顺序排列，并显示
名称列表；
先创建的层显示在列表的底部，
也可以使用“层”面板创建嵌套层。
嵌套层
▪ 除了嵌套层以外，还可以将一个层创建在
另一个层之上，
而不是创建在另一个层之内。
▪ 若要在一个层内绘制另一个层时，进行强
制性嵌套，
可以在设置层参数时选择“嵌套”选项，
否则需要按住Alt键创建嵌套层 。
嵌套层
要创建嵌套层，可执行以下一种操作：
▪ (1) 插入嵌套层
最新创建的层出现列表的顶部。
Dreamweaver8层的使用
Dreamweaver8层的应用层是一种HTML页面元素，它可以准确地定位在页面上的任何位置，并可以设置大小。
通过层可以对页面进行准确的定位。
一、创建层使用层可以以像素为单位精确定位页面元素，层对于制作网页的重叠部分更具有特殊作用。
把页面元素放入层中，可以控制元素的显示顺序，也能控制哪个显示，哪个隐藏。
1、方法：（1）选择菜单中的【插入】【布局对象】【层】命令，插入层。
（2）在【布局】插入栏中直接用鼠标拖曳【绘制层】按钮，插入层。
（3）单击【绘制层】按钮，在文档窗口中按住鼠标不放拖动，可以绘制一个层。
按住ctrl键不放，可以绘制多个层2、层的相关属性：●【层编号】：指定层的名称。
●【左和上】：指定层相对于页面或被嵌入层的左上角的位置。
●【宽和高】：●【Z轴】：指定层的叠放顺序。
●【可见性】：确定初始化层的可见性情况。
●【背景图像】：●【背景颜色】：●【溢出】：用来设置当层的内容超过层的指定大小时，对层的内容的显示方法。
●【剪辑】：用来设置层的可见区域。
二、层的基本操作。
1、在层中插入对象层可以放置任意的文本、图像、插件及其他层，插入方法与在普通网页中插入这些元素的方法相同。
2、选择层（1）、选择一个层●在文档中单击层标记图标，即可选中该层。
●在激活层的基础上，单击层左上角的选择柄。
●在文档中单击层的边框●打开层面板，在面板中单击目标层名称。
●如果层没有被激活，可以按住Shift键，然后单击层中任意位置。
提示：如果在文档中没有出现层标记，可以选择菜单中的【查看】【可视化助理】【不可见元素】命令，将显示层标记。
（2）、选择多个层●按住Shift键，依次单击每个要选中的层的边框。
●按住Shift键，依次在【层】面板上单击每个目标层的名称。
●如果选择两个以上的连续层，选中连续层的第一个层，按住Shift键，单击连续层的最后一个层。
提示：当多个层被选中以后，，最后一个选中的层的控制柄显示为黑色，其它层的控制柄显示为白色。
Dreamweaver8教程(三)
Dreamweaver8.0创建模板在我们制作网站的过程中，为了统一风格，很多页面会用到相同的布局、图片和文字元素。
为了避免大量的重复劳动，可以使用Dreamweaver8提供的模板功能，将具有相同版面结构的页面制作为模板，将相同的元素（如导航栏）制作为库项目，并存放在库中可以随时调用。
一、创建模板模板的创建有三种方式。
1、直接创建模板选择“窗口/资源”命令，打开“资源”面板，切换到模板子面板，如下图所示。
单击模板面板上的“扩展”按钮，在弹出菜单中选择“新建模板”这是在浏览窗口出现一个未命名的模板文件，给模板命名。
然后单击“编辑”按钮，打开模板进行编辑。
编辑完成后，保存模板，完成模板建立。
2、将普通网页另存为模板打开一个已经制作完成的网页，删除网页中不需要的部分，保留几个网页共同需要的区域。
选择“文件/另存为模板”命令将网页另存为模板。
在弹出的“另存模板”对话框中，“站点”下拉列表框用来设置模板保存的站点，课选择一个选项。
“现存的模板”选框显示了当前站点的所有模板。
“另存为”文本框用来设置模板的命名。
单击“另存模板”对话框中的“保存”按钮，就把当前网页转换为了模板，同时将模板另存到选择的站点。
单击“保存”按钮，保存模板。
系统将自动在根目录下创建Template文件夹，并将创建的模板文件保存在该文件夹中。
在保存模板时，如果模板中没有定义任何可编辑区域，系统将显示警告信息。
我们可以先单击“确定”，以后再定义可编辑区域。
3、从文件菜单新建模板选择“文件/新建”命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。
Dreamweaver8.0定义可编辑区域模板创建好后，要在模板中建立可编辑区，只有在可编辑区里，我们才可以编辑网页内容。
可以将网页上任意选中的区域设置为可编辑区域，但是最好是基于HTML代码的，这样在制作的时候更加清楚。
在文档窗口中，选中需要设置为可编辑区域的部分，单击常用快捷栏的“模板”按钮，在弹出菜单中选择“可编辑区域”项。
10_层和时间轴
设置属性
单个层
首先要选择层：在层面板中单击该层的名称、单击 一个层的边框、在一个层中按住Ctrl+shift键并单击。 (若已选定多个层，此操作会取消选定其他所有层而 只选择您所单击的层)、在设计视图中单击层代码标 记，它表示层在HTML代码中的位置。 左、上：指定层的左上角相对于页页左上角的位置。 （如果嵌套，则为父层） Z轴：当层重叠时，用以设置层之间的前后排列顺 序。值越大，显示越靠前。（使用层面板更方便操 作）
层和时间轴
层
“层”是Dreamweaver中另一种可以进行排版 的工具.它可以被定位在页面的任意位置,并且 其中可以包含文本、图像等所有可直接插入至 网页的对象。 层拥有很多表格所不具备的特点，比如可以重 叠、便于移动、可以隐藏等。
层的创建与删除
显示层面板：窗口/层 插入栏/布局/绘制层(产生相应的CSS) 将绘制层图标拖到页面中 插入菜单/布局对象/层 嵌套层:alt+绘制 或 在层面板中ctrl+拖动
层转表格，不能有重叠
表格到层，必须有内容
层与行为结合
拖动层：绘制好后，选中<body>中行为 显示与隐藏层
时间轴的使用
显示时间轴：窗口/时间轴 alt+F9 只有图像 和层才能添加到时间轴 作用：显示层和图像的属性在一段时间内如何更改 时间轴下拉菜单 帧比较适当的平均速 率，适用于大多数浏览器，较快的速率可能不会提高 性能。 自动插入、循环、上下文菜单（面板右上角，包含与 时间轴相关的命令） 行为通道、动画条、关键帧
层的属性
Dreamweaver8ppt教程第08章PPT教学课件
8.6 思考与练习
8.1层的基础知识
层在Dreamweaver中有其特殊的意义，使用过Photoshop的用户或许会联想到 Photoshop中的层，但是Dreamweaver中的层与其不用。在众多的网页编辑软件 中，只有Dreamweaver拥有层这一功能。下面列举出Dreamweaver中的层的一 些主要功能。
2020/12/12
PPT教学课件
谢谢观看
Thank You For Watching
2020/12/12
Dreamweaver 8 入门与实例教程
第08章 使用层
2020/12/12
主 讲：—— 祝：大家学习愉快
□ 本章知识点及学习目标
本章从层的基础知识开始讲起，为读者 介绍了层的创建、层的基本操作和属性设 置。另外还介绍了表格与层的关系，表格 与层的相互转换是网页的布局更加灵活、 高效。关于层的相关内容本章没有完全讲 完，还有一部分讲在本书的第12章中接续 介绍与层相关的内容。
8.3.1选择层
8.3.2调整层大小
8.3.3插入层对象
8.3.4移动层
8.3.5对齐层
8.3.6把层转换成表格
8.3.7把表格转换成层
8.4设置层属性
8.4.1单个层的属性
8.4.2多个层的属性
8.5实战演练
8.5.1 范例1 阴影文字
8.5.2 范例2 利用层制作个人简介
8.6 思考与练习
1. 简答题 （1）简述层的概念及其使用特点是什么？ （2）简述层都有那些基本操作？ （3）简述实现层与表格相互转换的方法是什
么？ （4）层的嵌套和表格的嵌套有什么不同？ 2. 操作题 （1）画出多个层，并将多个层对齐。 （2）利用层布局一个首页面的框架结构，然
Dreamweaver 8中文版网页制作-教学大纲第10章 使用层和时间轴-电子教案
难点
创建和编辑层的基本方法
使用层和时间轴创建动画的方法
要求掌握
的知识点
【层】面板、创建层、选定层、层【属性】面板、移动层、调整层的大小、层的对齐操作、【时间轴】面板、增加对象到时间轴、添加或删除帧、录制层路径、用时间轴改变图像与层的属性
1、教学思路
2、教学手段
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
中等职业学校教案
教研室：
课程名称：Dreamweaver 8中文版网页制作
任课教师：
XXXX学校教务处制
中等职业学校教案
第10次课讲授2学时实践2学时
章节
第10章使用层和时间轴
讲授主
要内容
1.层的概念和【层】面板的使用方法。
2.创建和编辑层的基本方法。
3.【时间轴】面板的使用方法。
4.使用层和时间轴创建动画的方法。
3、让学生自己动手重新制作教学案例。
作业布置
作业：
图层与时间线
Z-Index ：图层顺序号。前面我们说过，图层的一大功能在于多个图层的重叠，为了确定哪个图层在最上面，哪个图层在下面，就得给图层添加一个顺序。默认情况为，数值大的图层在上面。如图
提示：图层顺序可以不按 Z-Index 顺序进行显示，要改变其顺序，得通过图层面板（ Window/Layer ）来进行，操作方法很简单，只需在图层面板上点住要改变顺序的图层不放，然后将其拖上或拖下就行了。如图 但是，我们强烈建议，图层顺序最好遵循 Z-Index 规律，它对于网页文件的可读性是非常重要的。
提示：图层面板上有个 Prevent Overlaps （图四中勾选出来的参数），这个选项旨在避免图层重叠，常常用在将图层转换成表格的操作过程中，同时，对于精确的网页定位，也是很有帮助的。 BG Image与 BG Color：图层的背景图片与背景色。 VIS：共有三个重要的属性可供选择，Inherit （继承），本属性主要用于图层的嵌套，子图层可以继承父图层，当父图层发生位移，或者可见性发生改变等等情况时，子图层也跟着发生同样的变化； Visible （可见），将图层设为可见； Hidden （隐藏），将图层隐藏起来。
等时线基础：
第一帧。 进一帧。 。 FPS：动画的播放速度，即每秒播放多少帧的意思。 Autoplay：自动播放，也就是网页打开后动画自动播放。 Loop：循环，也就是动画播放完毕后又重新开始播放。 道目前处于哪一帧（红色块状）。
等时线示例： 最终效果如图 其中，"欢迎光临本站"几个字会从左上角自动向中下方移动，然后又自动向右上角移动。
图层的属性面板（Window/Properties）如图 Layer ID ：图层的名称，不要用中文。 L 与 T ：图层左边界/上边界距离浏览器窗口左边界/上边界的距离，它决定了图层在网页中的显示位置，应该加以重视。 W 与 H ：图层的宽度与高度，输入数值可以精确控制其大小，如果不需很精确，也可以用鼠标拖动图层边框改变其大小。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第八节层与时间轴的应用
层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。
文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。
一、创建层
1、创建普通层
（1）插入层
选择菜单栏>插入>布局对象>层命令，即可将层插入到页面中去。
使用这种方法插入层，层的位置由光标所在的位置决定，光标放置在什么位置，层就在什么位置出现。
选中层会出现六个小手柄，拖动小手柄可以改变层的大小。
（2）拖放层
打开快捷栏的“布局”选项，单击“绘制层”按钮，单击鼠标左键，并且按住不放，拖动图标到文档窗口中，然后释放鼠标，这是层就会出现在页面中了。
（3）绘制层
打开快捷栏的“布局”选项，单击“绘制层”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是层的大小，释放鼠标猴层就会出现在页面中。
2、创建嵌套层
创建嵌套层就是在一个层内插入另外的层。
方法一：将光标放才某层内，选择菜单栏>插入>布局对象>层命令，即可在改层内插入一个层。
方法二：打开层面板，从中选择需要嵌套的层，此时按住Ctrl键同时拖动改层到另外一个层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样普通层就转换为嵌套层了。
二、设置层的属性
选中要设置的层，就可以在属性面板中设置层的属性了。
层编号：给层命名，以便在“层”面板和 JavaScript 代码中标识该层。
左、上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。
宽、高：指定层的宽度和高度。
如果层的内容超过指定大小，层的底边缘（按照在 Dreamweaver设计视图中的显示）会延伸以容纳这些内容。
（如果“溢出”属性没有设置为“可见”，那么当层在浏览器中出现时，底边缘将不会延伸。
Z轴：设置层的层次属性。
在浏览器中，编号较大的层出现在编号较小的层的前面。
值可以为正，也可以为负。
当更改层的堆叠顺序时，使用“层”面板要比输入特定的 z 轴值更为简便
可见性：在“可见性”下拉列表中，设置层的可见性。
使用教本语言
如JavaScrip可以控制层的动态显示和隐藏。
有四个选项：
Default——选择该选项，则不指明层的可见性。
Inherit——选择该选项，可以继承父层的可见性。
Visible——选择该选项，可以显示层及其包含的内容，无论其父级层是否可见。
Hidden——选择该选项，可以隐藏层及其包含的内容，无论其父级层是否可见。
背景颜色：用来设置层的背景颜色。
背景图像——用来设置层的背景图像。
溢出——选择当层内容超过层的大小时的处理方式。
有四个选项：
Visible（显示）：选择该选项，当层内容超出层的范围时，可自动增加层尺寸。
hidden（隐藏）: 选择该选项，，当层内容超出层的范围时，保持层尺寸不变，隐藏超出部分的内容。
scroll（滚动条）: 选择该选项，则层内容无论是否超出层的范围，都会自动增加滚动条。
auto（自动）: 选择该选项，，当层内容超出层的范围时，自动增加滚动条（默认）
剪辑：设置层的可视区域。
通过上、下、左、右文本框设置可视区域与层边界的像素值。
层经过“剪辑”后，只有指定的矩形区域才是可见的。
类：在类的下拉列表中，可以选择已经设置好的CSS样式或新建CSS 样式。
注意：位置和大小的默认单位为像素 (px)。
也可以指定以下单位：pc (pica)、pt（点）、in（英寸）、mm（毫米）、cm（厘米）或 %（父层相应值的百分比）。
缩写必须紧跟在值之后，中间不留空格：
使用层制作特效我们在创建网页的时候，可以发现层可以在网页上随意改变位置，在设定层的属性的时，可以知道层有显示隐藏的功能，通过这两个特点可以实现很多令人激动的网页动态效果。
三、时间轴
时间轴实根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面，在时间轴中包含了制作动画时所必须的各种功能。
1、时间轴的各项功能
（1）时间轴弹出菜单：表示当前的时间轴名称。
（2）时间轴指针：在界面上显示当前位置的帧。
（3）不管时间轴在哪个位置，一直移动到第一帧。
（4）表示时间指针的当前位置。
（5）表示每秒显示的帧数。
默认值时15帧。
增加帧数值，则动画播放的速度将加快。
（6）自动不放：选中该项，则网页文档中应用动画后自动运行。
（7）LOOP（循环）：选中该项，则继续反复时间轴上的动画。
（8）行为通道：在指定帧中选选择要运行的行为。
（9）关键帧：可以变化的帧。
（10）图层条：意味着插入了“层”等对象。
（11）图层通道：它是用于编辑图层的空间。
2、在DW8中显示时间轴
选择菜单栏的窗口/时间轴或按快捷键Alt＋F9，则显示时间轴。
四、创建时间轴动画
时间线只能移动分层对象，如果想移动文本或图像之类的对象，可以将其放在层中。
1、打开09.html文件，
把光标放到页面左上方的位置，在插入面板选择布局>绘制层，创建六个层。
分别输入文字“小”、“木”、“web”、“欢”、“迎”、“你”，将图层排列在适当的位置。
2、打开时间轴。
选择层1后，拖动到时间轴的第一行上。
3、用同样的方法，把包含有其它文字的层也根据文字的顺序拖动到时间轴的第2－6行上。
4、为了减慢文字移动的速度，把时间轴中的15帧全部扩展为25帧。
5、在时间轴中选择Layer1的第一帧，在属性面板的顶端坐标值（T）中输入（－50），这样，可以把文字放置到上侧。
6、用同样的方法选择其余层的第一帧后，把顶端坐标值（T）统一设定为（－50）。
7、为了每个一段时间下落一个文字，从第二个动画条开始向后移动5帧。
勾选“自动播放选项”。
8、按F12浏览效果。