《中文版Dreamweaver CS3网页制作实用教程》课件第6章.ppt

中文版Dreamweaver CS3实用教程 第6章使用框架、层和时间轴 在制作网页时，可以使用框架进行定位。使用框架可以把网页分成几个部分，每个部分都是一个独立的HTML页，将这些HTML页聚集在一起，就形成了框架集。而使用层可以定位在页面上的任意位置，可以并存、重叠层，可以在层上插入文本、图像、表单等对象。与层密切相关的另一项功能是时间轴功能，使用时间轴可以创建动画效果。 教学重点与难点 使用捕捉、栅格和正交功能定位点的方法 认识框架 使用框架设置网页布局 使用层 使用时间轴 6.1 认识框架 在网络带宽十分有限的情况下，如何提高网页的下载速度，是设计网页时必须考虑的问题。如果多个网页拥有相同的导航区，只是内容有所不同，则可以考虑使用框架来设计网页布局。这样浏览者在查看不同内容时，便无需每次都下载整个页面，而可以保持导航部分不变，只下载网页中需要更新的内容部分即可，从而能够极大提高网页的下载速度。这样的网页也称为框架页，其最典型的应用便是当前十分流行的各种论坛(如天涯、搜狐论坛等)。 框架网页的概念 使用框架 设置框架和框架集的属性 6.1.1 框架网页的概念 框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同的网页，每个区域可以独立翻滚。正是基于框架页面的这种特点，使用框架可以极大丰富网页设计的自由度，在不同的页面部分设置不同的网页属性，尤其是对于页面间的链接，可以使页面的结构变化自如。 6.1.2 使用框架 使用框架可以方便地实际网页的定位，与其他定位方式不同的是，使用框架可以将一个浏览器窗口划分为多个区域，在每个区域都可以显示不同的HTML文档。一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档，这是使用框架的一个极其典型的例子。 6.1.3 设置框架和框架集的属性 在制作网页的过程中，使用框架的属性检查器可以定义框架名称、源文件、页边距等属性，使用“框架集属性检查器”可以定义框架集边线颜色、宽度等属性。 6.2 框架的其他操作 创建好框架网页后，可以在框架中创建链接，还可以建立noframes和/noframes标记之间的提示信息，提示如何访问基于框架的网页。 6.3 使用Iframe Iframe是Inline Frame的缩写，也是框架的一种形式。但它与框架不同的是，Iframe可以嵌在网页的任意部分，因而也被称作内联框架或者浮动框架。 插入Iframe 编辑Iframe 6.3.1 插入Iframe 在Dreamweaver CS3环境中插入Iframe，通常可以通过三种方法。 将光标定位在准备插入的目标区域，选择“插入记录”|HTML|“框架”|IFRAME命令即可。 将光标定位在准备插入的目标区域，选择“插入”栏中的“布局”选项卡，单击Iframe按钮即可。 进入页面代码视图，在需要插入Iframe的标签中间输入Iframe标记。例如，如图6-24所示，在一个目标单元格标签内插入Iframe，输入： tdiframe src=/ name=iframe width=600 height=30 scrolling=auto/iframe?/td 6.3.2 编辑Iframe 在Dreamweaver中，编辑Iframe最常用作法是在代码视图中直接编辑Iframe标签。如果不熟悉HTML环境，可以在“标签编辑器”对话框中对Iframe标签进行编辑设置。在代码视图中右击需要编辑的标签，在弹出菜单中选择“编辑标签”命令，或者选择选择“修改”|“编辑标签”命令，打开“标签编辑器”对话框，如图所示。 6.4 使用层 层在Dreamweaver CS3中指的是带有CSS样式的Div或Span代码，用于网页元素的精确定位。由于一个页面中可以拥有多个层，而不同的层之间可以相互重叠，通过设置透明度来决定每个层是否可见或者可见的程度，因而层可用来实现许多特效。例如新浪、163等许多网站都采用层来定位广告和分屏显示。 启用指针输入。 层的概念 创建层 层的基本操作 转换表格和层 设置层参数 6.4.1 层的概念 层就像是包含文字或图像等元素的胶片，按顺序叠放在一起，组合成页面的最终效果。层可以精确地定位页面上的元素，并且在层中可以加入文本、图像、表格、插件等元素，还可以嵌套层。 在Dreamweaver中运用成，为设计者提供了强大的网页控制能力。层不但可以作为一种网页定位技术，也可以作为一