第4章框架和表格.ppt

《第4章框架和表格.ppt》由会员分享，可在线阅读，更多相关《第4章框架和表格.ppt（37页珍藏版）》请在第壹文秘上搜索。

1、第第4章章 框架和层框架和层 学习目标：学习目标：了解框架的含义，掌握框架的创建、保存了解框架的含义，掌握框架的创建、保存的过程，设置框架、框架集的属性，学会如的过程，设置框架、框架集的属性，学会如何建立框架页面，知道在什么情况下使用框何建立框架页面，知道在什么情况下使用框架及根椐不同情况设置框架的属性。了解层架及根椐不同情况设置框架的属性。了解层的概念，掌握层的建立、编辑、使用。的概念，掌握层的建立、编辑、使用。第第4章章 框架和层框架和层 通常情况下，浏览器窗口一次只显示一个页面，使用通常情况下，浏览器窗口一次只显示一个页面，使用框架可以把窗口划分成几个子窗口，每个子窗口内显示一框架可以把

2、窗口划分成几个子窗口，每个子窗口内显示一个不同的页面。个不同的页面。有时我们也会使用框架来布局网页，当网页的导航栏不有时我们也会使用框架来布局网页，当网页的导航栏不变，且导航栏出现在各个子页面时，可以使用框架来布局：变，且导航栏出现在各个子页面时，可以使用框架来布局：把不变的元素放在一个框架内作为单独的网页文档，这个把不变的元素放在一个框架内作为单独的网页文档，这个文档是不变的，其他经常更新的内容放在主框架内。文档是不变的，其他经常更新的内容放在主框架内。框架的使用有一些缺点，框架页面在加入书签和打印时，框架的使用有一些缺点，框架页面在加入书签和打印时，经常会出现错误，如果使用复杂的框架布局网

3、页，链接也经常会出现错误，如果使用复杂的框架布局网页，链接也容易发生错误。因此，不要频繁地使用框架，尽量用表格容易发生错误。因此，不要频繁地使用框架，尽量用表格来布局网页。来布局网页。4.1 框架的编辑框架的编辑 在在Dreamweaver中，提供了可视化的工具中，提供了可视化的工具来创建框架、拆分框架，设置框架属性，可以来创建框架、拆分框架，设置框架属性，可以很方便地对框架进行各种操作。很方便地对框架进行各种操作。4.1 框架的编辑框架的编辑v4.1.1 创建框架和框架集创建框架和框架集v4.1.2 选中框架或框架集选中框架或框架集v4.1.3 保存框架和框架集文件保存框架和框架集文件v4.

4、1.4 设置框架属性设置框架属性v4.1.5 设置框架集属性设置框架集属性4.1.1 创建框架v 1框架的创建框架的创建有三种方法，可任选其中一种：（1）选择【文件】/【新建】命令，在弹出的【新建】对话框中，单击【常规】选项卡，在左侧的【类别】列表框中选择【框架集】选项，然后从中间的【框架集】列表框中选择一种预设的框架集，框架布局可以通过右侧的【预览】窗口预览。(2)切换到【布局】工具栏，点击【布局】工具栏上的【框架】下拉列表，在列表中选择一个框架（3）【插入】【HTML】【框架】下拉列表4.1.1 创建框架v2.修改框架 (1)框架创建好后，如果不理想，可通过拆分框架来达到目的。把光标定位于

5、要拆分的框架区，选择【修改】/【框架集】命令，在其子菜单中选择任一分割命令，可对框架进行拆分。(2)【查看】【可视化助理】【框架边框】按住ALT键可任意拆分。v3.删除框架 若想删除一个框架，将其边界线拖到页面边缘或其母框架之外即可。4.1.2 选中框架或框架集 如果想改变框架或框架集的属性，要先选定框架或框架集，然后通过【属性】面板的参数进行设置。选定操作的方法有两种。v1选择框架选择框架（1）按下【ALT】键，在要选择的框架内单击鼠标左键，则该框架边框内侧出现虚线，【属性】面板显示该框架的参数。（2）选择主菜单中的【窗口】/【框架】命令，把【框架】面板打开，在面板中单击要选择的框架，被选中

6、的框架边框会出现虚线。2选择框架集v（1）单击文档窗口中的框架边框，可选中框架集，被选中的框架集的边框变为虚线，【属性】面板显示该框架集的参数。v（2）在【框架】面板中单击框架集的边框线，可以选择整个框架集，此时框架集的边框变为虚线。4.1.3 保存框架和框架集文件v当一个页面被划分为若干个框架时，Dreamweaver就建立了一个未命名的框架集文件，同时为每一个框架建立一个文档文件。也就是说，一个包含两个框架的页面实际上存在三 个文件，一个框架集文件，另两个是分别存储每个框架内容的文件。例如，一个左右框架的网页对应的代码为：vv v vv标签为框架集标签。包括所有框架的数量，大小和方位信息，

7、这里表示页面被分为左右两个框架，左侧的框架宽为160像素。4.1.3 保存框架和框架集文件v标签为框架标签。包含有关显示在这个框架中的页面的信息，这里表示在左侧的框架内打开的文件为“left.htm”，框架被命名为“leftFrame”，框架没有滚动条，不可以改变大小。右侧的框架内打开的文件为“main.htm”，框架被命名为“mainFrame”v框架集标签和框架标签是配对使用的。我们在保存带框架的网页时，要分别保存框架集文件和单个的框架文件。这样才能把整个网页都保存下来。以一个左侧框架的的网页为例,具体操作步骤如下：4.1.3 保存框架和框架集文件v选择主菜单中的【文件】/【保存全部】命令

8、，整个框架边框的内侧会出现阴影框，同时弹出【另存为】对话框。如图4-4所示。框架集显现选中状态，表示要求保存的是框架集文件。输入文件名，单击保存按钮，将整个框架集保存为“index.htm”。4.1.3 保存框架和框架集文件v接着出现第2 个【另存为】对话框，要求保存右侧框架的内容文件名，输入文件名“main.htm”,点击保存按钮。如图4-5所示。v接着出现第3 个【另存为】对话框，要求保存左侧框架的内容文件名，输入文件名“left.htm”，点击保存按钮。这样整个窗口都已保存完毕，系统不再提示，退出【另存为】对话框。如图4-6所示。v如果已在某个子窗口内打开了一个已经存在的文件，则该窗口不

9、再需要保存。4.1.4 设置框架属性v框架是框架集的集成部分，在标签中定义框架的各种属性，包括框架名称、在框架窗口在打开的源文件，是否有边框，是否加滚动条等。可以通过【属性】面板对框架的各种参数重新进行设置，v选定一个框架后打开【属性】面板，如图4-7所示。4.1.4 设置框架属性v【框架名称】：用于超级链接指向的目标，框架名称应该是一个单词，可以加下划线，不允许使用连字符（-），句号及空格。v【源文件】：指定要在框架窗口内打开的文件名。旁边的图标用来寻找所需的文件。v【滚动】：指定在当前框架中的内容超过框架范围时，是否显示滚动条以显示框架的所有内容。其下拉列表中包括4个选项：【是】、【否】、

10、【自动】、【默认】。选择【默认】，将由浏览器来决定。v【不能调整大小】：用来设置用户在浏览器中是否允许调整框架的尺寸大小。v【边框】：设置框架是否有边框，其下拉列表中包括3个选项：【是】、【否】、【默认】。v【边框颜色】：用来设置框架边框的颜色。v【边框宽度】：以像素为单位设置页面的左边距和右边距，即用来设置框架的内容与框架边框之间的距离。v【边界高度】：以像素为单位设置页面的上边距和下边距。4.1.5 设置框架集属性v选定框架集后打开其【属性】面板，如图4-8所示。【属性】面板显示该框架集是一个1行2列的框架集成。各参数的含义如下。v【边框】：用来设置是否有边框，其下拉列表中包括3个选项：【

11、是】、【否】、【默认】。选择【是】，以灰色三维立方体效果显示框架边框；选择【否】，以灰色平面体效果显示框架边框；选择【默认】，由浏览器决定是否显示框架。v【边框宽度】：设置框架集的边框宽度，以像素为单位。v【边框颜色】：设置框架集的边框颜色。v【值】：指定选中的行或列的尺寸。4.1.5 设置框架集属性v【单位】：用来设置行、列的尺寸单位，其下拉列表中包括【像素】、【百分比】、【相对】3个选项。单位为“像素”时，用像素为单位设置框架大小尺寸是绝对的，即这种框架的大小永远是固定的，若网页中其他框架用不同单位设置框架的大小，则浏览器首先为这种框架分配屏幕空间，将剩余空间分配给其他类型的框架。单位“百

12、分比”，用于设置所选择的框架大小在整个框架集大小中所占的百分比，这种框架的大小随框架集大小所设百分比而变化。“相对”类型最后分配空间。4.2 用框架设计页面用框架设计页面v前面我们介绍了框架的含义，以及如何创建、修改、保存框架，设置框架属性，现在我们两个实例，来讲解框架的链接应用。v4.2.1 在框架中编辑文件在框架中编辑文件v选择主菜单中的【文件】/【新建】命令，在新建文件对话框中选择左侧固定的框架集。v选中框架集，在【属性】面板中设置左列的宽度为170像素，边框设为“否”，边框宽度为0。如图4-9所示。4.2 用框架设计页面用框架设计页面结合两个实例综合讲解框架的操作及用法：1.我的个人网

13、站 2.影视网站第第4章章 框架和层框架和层 v 4.3 层的创建层的创建v4.4 格式化层格式化层v4.5结合实例：如何用层布局页面结合实例：如何用层布局页面 4.3 层的创建层的创建v4.3.1 创建层v4.3.2 【层】面板v4.3.3 嵌套层v4.3.4 层的操作 4.3 层的创建层的创建 Dreamweaver MX 2004 中的层相当于一中的层相当于一个容器，它可以包含所有的网页元素，可以将这个容器，它可以包含所有的网页元素，可以将这个容器放在页面的任何位置，从而简单又精确的个容器放在页面的任何位置，从而简单又精确的定位页面元素。定位页面元素。4.3 层的创建层的创建Dreamw

14、eaver MX 2004 中的中的层的主要功能：层的主要功能：我们知道网页元素是不能重叠，除非将重叠的元素制作我们知道网页元素是不能重叠，除非将重叠的元素制作成背景图像。而层可以重叠，因此把元素放在层中，可以成背景图像。而层可以重叠，因此把元素放在层中，可以实现网页元素的重叠。实现网页元素的重叠。由于层可以游离在文档之上，因此使用层可以精确定位网由于层可以游离在文档之上，因此使用层可以精确定位网页元素。使用层定位可以精确到像素级。页元素。使用层定位可以精确到像素级。层还可以显示和隐藏，运用层的这一功能，结合层还可以显示和隐藏，运用层的这一功能，结合Dreamweaver中的【行为】事件，可以

15、制作出下拉菜单，中的【行为】事件，可以制作出下拉菜单，拼图游戏等一些特殊效果。拼图游戏等一些特殊效果。层可以转换成表格，为不支持层的浏览器提供了解决方法。层可以转换成表格，为不支持层的浏览器提供了解决方法。层分为两种类型：层分为两种类型：CSS层和层和Netscape层。前者在层。前者在HTML文件中层标签使用文件中层标签使用DIV和和SPAN，被浏览器，被浏览器Internet Explorer 4.0和支持；后者使用和支持；后者使用LAYER和和ILAYER，仅被，仅被Netscape 4.0支持，而支持，而Dreamweaver MX 2004则对则对 4种层种层标签都支持。标签都支持。

16、4.3.1 创建层 可以使用插入、拖动或绘制等方法创建一个层，层一旦被创建，就可以使用【层】面板选定它，或将它嵌套在其他层中，或改变它的叠放顺序。要创建层，可选用以下任意一种方法。v选择主菜单【插入】/【布局对象】/【层】，在当前光标所在位置插入层，层的大小为200*115，这个参数可以改变，选择【编辑】/【首选参数】/【层】，打开【首选参数】对话框，在分类列表选择【层】，对默认参数重新进行设置。如图4-19所示。再次插入层时，将按新的参数设置。v单击【布局】工具栏中描绘层按钮，鼠标变为“+”字形，将其移至要插入层的位置的左上角，按住鼠标左键，在页面上拖动鼠标，画出层。v将【布局】工具栏中描绘层按钮拖到页面所在的位置。v要绘制多个层，单击【布局】工具栏中描绘层按钮，按住ctrl键，在页面中所需位置拖动鼠标。可绘制多个层。4.3.2 【层】面板 【层】面板是一个用于管理文档中的层的工具。选择主【层】面板是一个用于管理文档中的层的工具。选择主菜单中的【窗口】菜单中的【窗口】/【层】命令，或按【层】命令，或按F2键，可打开【层】键，可打开【层】面板。面板。在【层】面板中，显示层的可见性、层的