《Dreamweaver ,CS3网页设计案例教程 教学课件 ppt 作者 王春红 王瑾瑜主编 模块六 层时间轴框架》由会员分享，可在线阅读，更多相关《Dreamweaver ,CS3网页设计案例教程 教学课件 ppt 作者 王春红 王瑾瑜主编 模块六 层时间轴框架（24页珍藏版）》请在金锄头文库上搜索。
1、模块五使用层时间轴和框架,任务一 初识并使用层,子任务1 创建层,层（Div）是一种网页元素定位技术，使用层可以以像素为单位精确定位页面元素。层的位置比较随意可以放到网页的任意位置,创建层可以使用以下3种方法中的任何一种： 执行【插入记录】【布局对象】【AP div】命令 单击【插入】工具栏的“布局”面板上的【绘制层】按钮，如图6-3所示。鼠标左键按住此按钮把层按钮拖到文档窗口里。如图6-6所示。 单击【插入】工具栏的“布局”面板上的【绘制层】按钮，如图6-3所示。在文档窗口中拖动鼠标绘制一个层。,任务一 初识并使用层,在Dreamweaver CS3 中可以在网页中随意插入层，但是插入层后通
2、常还不能完全达到设计者的要求，还需要对其进行修改调整、移动、对齐、隐藏等操作。 层的基本操作： 选择层 调整层的大小 移动层 对齐层 在层中插入文本内容或者图像 嵌套层,子任务2 层的基本操作,任务一 初识并使用层,层的基本操作： 选择层的四种方法： 1、 将光标移动到需要选择的层边框上，当光标指针变成“十字双向箭头”光标时，单击鼠标左键即可选中该层。如图6-7所示。 2、直接单击层的内部，当出现显示层的选择柄图标时，如图6-8所示。接下来单击文档窗口左下角状态栏里的“”层标签，也可选择层。如图6-9所示。 3、 直接单击文档窗口中的层标记符 ，即可选中该层，如图6-10所示 4、在“层”面板
3、中选择层的名称，即可选择层。“层”面板如图6-12所示。选择多层时，可按住键，点选要选择的层的名称即可。,子任务2 层的基本操作,任务一 初识并使用层,层的基本操作： 选择层的四种方法： 1、 将光标移动到需要选择的层边框上，当光标指针变成“十字双向箭头”光标时，单击鼠标左键即可选中该层。如图6-7所示。 2、直接单击层的内部，当出现显示层的选择柄图标时，如图6-8所示。接下来单击文档窗口左下角状态栏里的“”层标签，也可选择层。如图6-9所示。 3、 直接单击文档窗口中的层标记符 ，即可选中该层，如图6-10所示 4、在“层”面板中选择层的名称，即可选择层。“层”面板如图6-12所示。选择多层
4、时，可按住键，点选要选择的层的名称即可。,子任务2 层的基本操作,任务一 初识并使用层,层的基本操作： 调整层的大小 移动层 对齐层 在层中插入文本内容或者图像 嵌套层,子任务2 层的基本操作,任务一 初识并使用层,在层“属性”面板中，查看和设置层的属性，只要选择一个层，执行【窗口】【属性】命令，就会打开如图6-19所示的“属性”面板，,子任务3 设置层属性,任务一 初识并使用层,层“属性” 层编号：在其右边的下拉列表中，可以指定一个名称来标识层，在文本框中可以输入层名。层名只能使用英文字母和数字，不能使用特殊字符。 左和上：在文本框中输入相应数值使得层进行位置定位，指定层相对与页面或者嵌套的
5、父层左上角的位置，左指定距左边的像素数，上指定距顶边的像素数。 宽和高：在文本框中，设置层的宽度和高度。 Z轴：指定层的堆叠顺序号。标号较大的层出现在标号较小的层上面。 可见性：在其右边的下拉列表中设置层的4种显示模式。Default表示默认值，即不指定层的可见性属性、inherit表示继承，当对嵌套层应用时，将使用父级层的可见性属性、visible表示可见，无条件显示、hidden表示隐藏，绝对隐藏层以及层中的内容 溢出：仅适用于CSS层，指定如果层中的内容超过了层的大小，将发生的事件。此处有4种选择模式。Visible 表示可见，增加层的大小，以便层里的所有内容都可见，层自动向下和向右扩大
6、。Hidden表示隐藏，保持层的大小不变，裁剪掉与层大小不符的任何内容。Scroll表示滚动，不管内容是否超出层的大小，为层添加滚动条。Auto表示自动，在层的内容超过层的大小时自动显示滚动条，否则不显示滚动条。 背景颜色：指定层的背景颜色。 背景图像：为该层指定背景图像。 剪辑： 左右上下：定义层的可见区即设置层的边距，分别通过左右上下属性值来设置。 类：表示对层应用CSS样式。,子任务3 设置层属性（层可见案例）,任务一 初识并使用层,我们在设计网页布局时，可以先用层来设计页面，然后使用“层到表格”功能，把层转化为表格。同样也可以通过“表格到层”功能把表格转化为层。选择菜单【修改】【转换】
7、【层到表格】命令，会弹出“转换层为表格”的对话框，如图6-33所示。,子任务3 转化表格和层,图6-33 “转换层为表格”对话框,任务一 初识并使用层,转换层为表格对话框各属性含义： 表格布局： 最精确：为每一层建立一个表格单元以及为保持层与层之间的间隔必须的附件单元格。 最小合并空白单元：指定如果几个层被定位在指定的像素数之内，这些层的边缘应该对齐。 使用透明GIF：用透明的GIF图像填充表格的最后一行。 置于页面中央：选择此项使生成的表格页面中居中对齐。默认为左对齐。 布局工具： 防止层重叠：选择此项可防止层重叠。 显示层面板：选择此项转换将完成层面板。 显示网格：选择此项转换完成将显示网
8、格。 靠齐到网格：选择此项将启用对齐网格功能。,子任务3 转化表格和层,子任务3 设置层属性 子任务4 转化表格和层 任务二 使用时间轴 子任务1 认识“时间轴”面板 子任务2 创建时间轴动画 子任务3 编辑时间轴 任务三 框架使用 子任务1 框架和框架集的工作方式 子任务2 框架和框架集的使用 子任务3 设置框架和框架集的属性 子任务4 使用框架创建网页实例,任务二 使用时间轴,子任务1 认识“时间轴”面板 时间轴是根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面，在时间轴中包含了制作动画时所必须的各种功能。时间轴只能移动分层对象，如果想移动文本或图像之类的对象，可以将其放在层
9、中。利用时间轴，您可以更改AP元素的位置、大小、可见性和堆叠顺序。 执行菜单栏的【窗口】【时间轴】命令或按快捷键，则显示时间轴面板。如图6-37所示。,子任务1 认识“时间轴”面板,任务二 使用时间轴,“时间轴”面板各属性含义： 时间轴弹出菜单：表示当前的时间轴名称。 时间轴指针：在界面上显示当前位置的帧。 至第一帧：不管时间轴在哪个位置，一直移动到第一帧。 指针当前位置：表示时间指针的当前位置。 帧数：表示每秒显示的帧数。默认值时15帧。增加帧数值，则动画播放的速 度将加快。 自动播放：选中该项，则网页文档中应用动画后自动运行。 LOOP（循环）：选中该项，则继续反复时间轴上的动画。 行为通
10、道：在指定帧中选选择要运行的行为。 关键帧：可以变化的帧。 图层条：意味着插入了【层】等对象。 图层通道：它是用于编辑图层的空间。,子任务1 认识“时间轴”面板,任务二 使用时间轴,步骤 1 打开“mdule062”文件夹下的“aboutme.htm”文件，创建层，在层中单击鼠标执行菜单【插入】【图像】，在弹出“选择图像源文件”对话框中选择“mdule062pic wel1.gif”图片，点击【确定】按钮，然后把层移动到动画的起始位置，如图6-38所示，执行菜单栏的【窗口】【时间轴】命令，显示“时间轴”面板。 步骤 2 选择要制作动画的层，单击层标记符或层边界，或用层面板选择一层， 选择【修改
11、】【时间轴】【添加对象到时间轴】，或直接把选定的对象拖入时间轴面板中，一个动画栏出现在时间轴的第一个频道内，相应的层名显示在该动画栏中。如图6-39所示。,子任务2 创建时间轴动画,任务二 使用时间轴,步骤 3 执行【修改】【时间轴】【录制AP元素路径】，在页面上拖动层，创建想要的运动路径。在动画应停止的位置点释放鼠标。如图6-40所示。 步骤 4 Dreamweaver添加一个动画栏到时间轴中，同时也添加了适当数量的关键帧。 步骤 5 按下播放按钮，预览页面上的动画。按照本操作过程，添加另外的层和图像到时间轴中，可以创建更为复杂的动画。,子任务2 创建时间轴动画,任务二 使用时间轴,修改时间
12、轴 定义完时间轴的基本组件后，可以进行一些更改，如添加和移除帧、更改动画开始时间等。 使用时间轴更改图像和 AP 元素的属性 除了用时间轴移动AP元素之外，还可以更改AP元素的可见性、大小和堆叠顺序并更改图像的源文件。通过执行以下操作之一定义对象的新属性：,子任务2编辑时间轴,子任务3 编辑时间轴,任务三 框架使用,框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。框架的作用就是把浏览器窗口分割成若干个区域，每个区域可以分别显示不同的网页内容。框架有两个部分组成，即框架集和单个框架。框架集是一个文档内定义的一组框架结构的HTML网页，它定义了一个网页
13、中所包含的框架的数目，每一个框架的大小、载入框架的网页源和每个框架的其他属性等等。单个框架指在网页中定义的一个区域，每个框架可以分别显示不同的网页。 。,子任务1 框架和框架集的工作方式,任务三 框架使用,使用框架的优点： 访问者的浏览器不需要为每个页面重新加载与导航相关的图形。 每个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下），因此访问者可以独立滚动这些框架。例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么滚动到页面底部的访问者不需要再滚动回顶部就能使用导航条。 使用框架的缺点： 可能难以实现不同框架中各元素的精确图形对齐。 对导航进行测试可能很耗时间。 框架中加
14、载的每个页面的URL不显示在浏览器中，因此访问者可能难以将特定页面设为书签（除非您提供了服务器代码，使访问者可以加载特定页面的框架版本。,子任务1 框架和框架集的工作方式,任务三 框架使用,创建预定义框架集 步骤 1 启动Dreamweaver，显示如图6-41示的初始页界面。这里我们选择【从范例创建】下面的【框架集】，这时会弹出“新建文档”对话框，如图6-42所示。 步骤 2 在对话框中切换到“常规”选项卡，在“常规”选项卡中选择“类别”下面的“框架集”，从“框架集”下面选择一种系统预设的15中框架集，我们选择“上方固定，左侧嵌套”，这时会弹出“框架标签辅助功能属性”对话框。如图6-43所示
15、。我们可以为几个框架重新命名新名字。点【确定】按钮后，嵌套框架我们已经建成。如图6-44所示。 创建自定义框架集 如果系统预定义的框架集都无法满足设计者的要求，我们也可以通过自定义方式创建框架集，在创建框架集前，需要执行下面工作：,子任务2 框架和框架集的使用,任务三 框架使用,单击菜单【查看】【可视化助理】【框架边框】，使框架边框在文档窗口可以显示。如图6-45所示。 步骤 2 单击要拆分的框架内，执行【修改】【框架页】【拆分左框架/右框架/上框架/下框架】命令，如图6-46所示。用户可以根据需求随意拆分框架。 3. 选择框架和框架集 选择框架和框架集有2种方法，一种是在“框架”面板中选择或
16、框架集；另一种是在文档窗口中选择框架和框架集。 4. 保存框架和框架集文件 保存框架文件：框架文件实际上就是在框架内打开的网页文件。要保存框架文件，在框架内单击，然后选择菜单【文件】【保存】即可 保存框架集文件：只保存框架集文件，可以选择菜单【文件】【保存框架集】；或选择菜单【文件】【框架集另存为】，把框架集另存为新文件。,子任务2 框架和框架集的使用,任务三 框架使用,设置框架集属性 创建框架集以后，可以通过“属性”面板设置框架集的属性，选中一个框架集后，打开“属性”面板，如图6-54所示。 设置框架的基本属性 目录案例,子任务3 设置框架和框架集的属性,任务三 框架使用,如何运用框架技术进行网页的布局排版,创建完整框架网页的具体操作步骤： 心情驿站案例,子任务4 使用框架创建网页实例,学材小结,页面布局是进行网页设计最基本的，也是最重要的工作，层（Div）和框架也是页面布局进行排版的另一工具。本章从层的概念入手，详细讲述了如何使用Dreamweaver CS3 建立层以及设置层属性、层的基本操作以
