边做边学——Dreamweaver CS3网页设计案例教程教学课件 作者 官辛华 07.ppt

本章简介： 如果用户想在网页上实现多个元素重叠的效果，可以使用层。层是网页中的一个区域，并且游离在文档之上。利用层可精确定位和重叠网页元素。通过设置不同层的显示或隐藏，实现特殊的效果。因此，在掌握层技术之后，就可以给网页制作提供强大的页面控制能力。 Dreamweaver CS3提供了在网页上制作动态效果的功能，利用时间轴组织和控制层、图像等对象在一定时间内播放，从而产生动态效果。 * 第7章　使用层和时间轴 课堂学习目标 层的基本操作 应用层设计表格 时间轴动画 制作时间轴动画的技巧 7.1　绿色植物网页 案例分析 设计理念 操作步骤 相关工具 7.1.1　案例分析 绿色植物是生态平衡的支柱，因为植物能净化污水，能消除和减弱噪声，能耐旱固沙，能耐盐碱、耐涝，能监测二氧化硫、氟、氯、氨等的污染。本例是为绿色植物博览会制作的网页，希望在设计上表现出大自然中绿色植物的魅力。 7.1.2　设计理念 在网页设计过程中，采用绿色和植物叶子图案作为背景，使页面体现出生命和生长的寓意。菜单以弧型的样式显示，方便浏览者了解更多的植物信息。右上方的标题点明网页主题，右下方的芦荟图像摆放，感觉更加贴近自然。整个页面设计清新爽朗，颜色明快通透。 绿色植物网页效果图 7.1.3　操作步骤 1 2 3 4 7.1.4　相关工具 创建层 创建层 若想利用层来定位网页元素，先要创建层，再根据需要在层内插入其他表单元素。有时为了布局，还可以显示或隐藏层边框。 显示或隐藏层边框 若要显示或隐藏层边框，可选择“查看 可视化助理 隐藏所有”命令。 2.选择层 选择一个层 （1）利用层面板选择一个层。 （2）在文档窗口中选择一个层。 选定多个层 选择“窗口 AP元素”命令，弹出“AP元素”控制面板。在“AP 元素”控制面板中，按住Shift键并单击两个或更多的层名称。 3.设置层的默认属性 当层插入后，其属性为默认值，如果想查看或修改层的属性，选择“编辑 首选参数”命令，弹出“首选参数”对话框。在“分类”列表框中选择“AP元素”选项，此时可查看或修改层的默认属性。 4.AP元素面板 通过“AP元素”控制面板可以管理网页文档中的层。选择“窗口 AP元素”命令，调出“AP元素”控制面板。 使用“AP元素”控制面板可以防止层重叠，更改层的可见性，将层嵌套或层叠，以及选择一个或多个层。 AP元素面板 5.更改层的叠加顺序 排版时常需要控制叠放在一起的不同网页元素的显示顺序，以实现特殊的效果，这可通过修改选定层的Z轴属性值实现。 在“AP元素”控制面板中更改层的堆叠顺序 在“属性”面板中更改层的堆叠顺序 6.更改层的可见性 处理文档时，可以使用“AP元素”控制面板手动设置显示或隐藏层，来查看层在不同条件下的显示方式。更改层的可见性有以下两种方法。 （1）使用“AP元素”控制面板更改层的可见性 （2）使用“属性”面板更改层的可见性 7.调整层的大小 用户可以调整单个层的大小，也可以同时调整多个层的大小以使它们具有相同的宽度和高度。 调整单个层的大小 同时调整多个层的大小 8.嵌套层 嵌套层指代码包含在另一个层中的层。嵌套通常用于将层组织在一起。 创建嵌套层 将现有层嵌套在另一个层中 层嵌套的注意事项 9.移动层 移动层的操作非常简单，可以按照在大多数图形应用程序中移动对象的相同方法在“设计”视图中移动层。移动一个或多个选定层有以下两种方法。 拖曳选择柄来移动层 移动一个像素来移动层 10.对齐层 使用层对齐命令，以当前层的边框为基准对齐一个或多个层。当对选定层进行对齐时，未选定的子层可能会因为其父层被选定并移动而随之移动。为了避免这种情况，不要使用嵌套层。对齐两个或更多个层有以下两种方法。 应用菜单命令对齐层 应用“属性”面板对齐层 11.层靠齐到网格 在移动网页元素时可以让其自动靠齐到网格，还可以通过指定网格设置来更改网格或控制靠齐行为。无论网格是否可见，都可以使用靠齐。 应用Dreamweaver CS3中的靠齐功能，层与网格之间的关系如铁块与磁铁之间的关系。层与网格线之间靠齐的距离是可以设定的。 层靠齐到网格 更改网格设置 7.1.5 实战演练-数码科技前线网页 使用“绘制AP div”