dreamweaver教程第4章

第4章运用框架和层框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页，而且替换窗口中的内容时，各个窗口之间没有影响。层是一种HTML页面元素，可以将它定位在页面上的任意位置，层可以包含文本、图像或其他任何可在HTML文档中放入的内容。可以使用【行为】面板控制层的显示与隐藏，还可以使用【时间轴】面板使层移动或随着时间发生变化。本章将深入学习框架和层的应用知识。本章学习目标：创建框架设置框架和框架集属性运用框架制作页面层的创建与属性设置利用层设计页面94Dreamweaver8网页制作与网站开发标准教程4.1使用框架前面已经介绍了利用表格进行网页布局的方法，但是在利用表格制作网页布局时，需要反复制作与各个菜单相对应的网页文档，而且每个网页文档若要设置链接，还要分别进行操作，当制作网页数量较多的网页文档时，整个操作过程比较繁琐。而利用框架设计页面布局时，只要在单击相应的链接时，在可变更的窗口显示链接文档的相应内容就可以了。因此，可以认为框架是为了在浏览器内显示多个网页文档而分割的主页模块。4.1.1创建框架集4.1.2保存框架及框架集4.1.3创建嵌套框架集4.2设置框架与框架集创建好框架后，就可以对框架和框架集进行设置了，包括选中、添加内容和属性设置。框架的属性确定框架集内各个框架的名称、源文件、边距、滚动、边框和能否调整大小。框架集属性控制框架的大小和框架之间边框的颜色和宽度。每个框架和框架集都有自己的属性面板，使用属性面板可以设置框架和框架集的属性。4.2.1选中及调整框架或框架集第4章第4章运用框架和层954.2.2为框架设置背景颜色并添加内容4.2.3设置框架和框架集的属性4.2.4使用链接控制框架的内容4.3课堂练习4-1：利用框架设计页面实验目标本练习利用框架制作一个站点的首页，在框架中插入表格以组织框架内的页面元素，并为框架设置背景颜色。另外还用到插入框架、插入嵌套框架、命名框架、保存框架、为框架设置链接等操作，通过将前面所讲的内容进行一个综合运用，加深对运用框架设计页面特点的理解。其中要注意到在框架集中，每一个框架都是独立的，对其中的设置不影响其他的框架。4.4创建与管理层文本、图像、表格等页面元素只能放置在固定位置，不能相互叠加在一起。但是使用层，无论将其放置到网页文档中的哪一个位置，都可以随意移动。层是一种HTML页面元素，在一个网页中可以创建多个层，它最大的魅力在于各个图层可以重叠，并且可以决定每个图层是否可见，同时也能够自定义各图层之间的层次关系。而配合时间轴来使用，可同时移动一个或者多个层，轻松制作出动态效果。96Dreamweaver8网页制作与网站开发标准教程4.4.1创建层4.4.2创建嵌套层4.4.3使用层面板4.4.4层的参数设置4.5设置与应用层在进行页面设计时，可以激活层、选中层或调整层的大小。只有激活层后，才能够向层内加入内容；选中层可以对层进行对齐、定位。同其他网页元素一样，对层的许多设置是通过属性面板完成的。调整层的大小操作既可以改变单个层的大小；也可以将选中的几个层设置为同一大小。4.5.1激活与选择层4.5.2设置层属性4.5.3调整层的大小4.5.4层的对齐与叠放4.6课堂练习4-2：利用层制作阴影字实验目标在网站中经常会看到一些阴影字，阴影字从视觉上给浏览者一种厚重感、立体感。通常在网页中见到的阴影字都是用图片或是用CSS定义的，而这次使用“层”来实现这一效果。这个实例说明，层第4章第4章运用框架和层97是可以叠加的，并且叠加在一起的层是通过Z轴来确定位置的，Z轴的值可以是正数、负数和零，数值大的层在上面。合理的使用层和Z轴可以变换出各种效果。4.7层与表格的互相转换使用层可以定位一个页面中的元素。与表格和单元格相比，层更易于操作和更改设计。可以用层快速设计一个页面，再将层转换为表格，以适合不支持层的浏览器。另外，还可以通过对层与表格的相互转换优化页面设计。4.7.1层转换为表格4.7.2表格转换为层4.8课堂练习4-3：利用层设计网页实验目标在Dreamweaver中，可以使用层来设计网页的布局。可以将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层。下拉菜单是网上最常见到的效果之一，它可以有效地节省网页排版上的空间，使得网页布局显得清爽简洁，下面的例子讲述了利用层制作网页的过程，并利用层制作下拉菜单，当将鼠标指针移到一个菜单时，弹出另一个菜单。4.9思考与练习