5.3 层的运用（课件）-高二《网页设计与制作》同步教学（人民邮电版）

层是一种网页元素定位技术，使用它可以为页面 元素精确定位。层可以放置在页面上的任意位置，也就 是说，层可以在页面中随意移动和定位，比表格更加灵 活方便。在层里面，可以放置文本、图像等对象。而 且，利用层还可以实现网页的部分重叠效果，这在表格 中是不能做到的。除了可以定位外，利用层还可以控制 页面元素的显示和隐藏。在Dreamweaver 9 中，“层”又 被称为“AP元素”。在本节内容中，将通过两个案例来学 习层在进行页面设计时的使用方法和技巧。 5.3 层的运用 案例5-4 使用层实现网页中图片的显示与隐藏 制作一个与旅游相关的网页，单击页面下方的每 一个小图片，都会在中间显示出放大后的效果。 5.3 层的运用 案例5-4 使用层实现网页中图片的显示与隐藏 【案例分析】在这个案例中，依然可以用表格或者布 局表来对页面进行布局，不同的是，因为中间的大图 片是会随着浏览者单击不同的小图片而发生变化，所 以这里简单的使用表格是不够的，要使用层来处理图 片的显示和隐藏的效果。 5.3 层的运用 案例5-4 使用层实现网页中图片的显示与隐藏 【操作步骤】（演示操作） 1．新建文档 2．绘制表格,插入图片 3．绘制层，设置层属性 4．添加行为 5．保存网页，预览效果 5.3 层的运用 案例5-4 使用层实现网页中图片的显示与隐藏 案例小结： 通过这个案例，了解层的概念，掌握如何创建层 和使用层的方法，也练习通过层的显示和隐藏来实现 页面的切换效果。那么，大家开动脑筋想一想，在平 时浏览网页时，还有哪些效果是可以用层来实现的？ 课堂小练习：你最喜欢的景色是哪里的？将本节实例 内容换成你喜欢的风景图片，动手练习框架的使用。 5.3 层的运用 案例5-5 使用层实现网页中图片的显示与隐藏 相信大家都玩过拼图游戏，把一张张小卡片拼 在一起，组合成一个完整的图像。今天这个案例的 目标就是利用层在网页中制作出拼图游戏来。 【案例分析】通过观察图片可以看出，这个拼图游戏是把4个图片拼合起来，而且要实现在页面内的自由移动。为了实现这个目的，需要绘制4个层用来分别放置这些图片。 5.3 层的运用 案例5-5 使用层实现网页中图片的显示与隐藏 【操作步骤】（演示操作） 1．新建文档 2．绘制表格，插入图片 3．绘制层，插入图片 4．添加行为 5．保存网页，预览效果 课堂小练习：结合上面这个案例，自己学做一个类似 的拼图游戏，练习层的使用方法。 5.3 层的运用 框架的作用就是把一个页面划分为若干个小窗口， 每个窗口中显示不同的网页，并且在替换窗口中的网页 时，对其他窗口不会有影响。 框架主要由两个部分组成：框架集和单个框架。框 架集定义了一个框架结构的页面中显示的框架数、框架 的大小、框架的位置以及各个框架的网页文件和其他属 性。框架是指在框架页面中定义的一个区域。 5.4 框架的使用 案例5-6 使用框架工具制作网上商店页面 相信大家都知道网上开店吧，下面做一个用来 展示商品的页面，名为“丁铛的店”，如图所示。 5.4 框架的使用 案例5-6 使用框架工具制作网上商店页面 【案例分析】在这个页面中，可以通过单击左侧的 不同分类，来查看对应的不同商品。每次出现的页 面，上部和左部都不会改变，只是右侧的内容变 化。如果在每一个页面中都要做出整个网页来，是 件很麻烦的事情。不过，在这个例子中，只需要利 用框架，就简单多了。 5.4 框架的使用 案例5-6 使用框架工具制作网上商店页面 【操作步骤】（演示操作） 1．新建文档 2．插入框架，保存 3．设置框架属性 4．在框架内添加表格，插入图片和文字 5．设置链接 6．保存网页，预览效果 5.4 框架的使用 案例5-6 使用框架工具制作网上商店页面 案例小结： 框架页面常被用于信息导航，浏览者单击某一 个项目，相应的内容就会显示在内容框架中，查找 信息非常方便，而且通过这种方法制作网页，避免 了相同部分的重复操作，给设计者带来了便利。 5.4 框架的使用 本章内容是学习Dreamweaver进行网页设计的基础，分别 具体介绍了页面布局、表格、层和框架的使用方法。 表格主要用来构建网页的结构，控制文本和图形在页面上出现的位置，使网页上的各个元素排列的合理美观。其中需要熟练掌握编辑表格的各种操作及使用表格布局页面的方法。 层可以用来实现一些移动的效果，而且可以随意的往层中放入文字、图片及其他层。用它可以制作出页面中浮动的广告、动态显示的菜单等。用户应掌握层的基本操作方法，如层的创建、编辑、相关属性的