第4章框架和表格

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

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

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

4、v4.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【滚动】：指定在当前框架中的内容超过框架范围时，是否显示滚动条以显示框架的所有内容。其下拉列表中包括

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

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

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

13、的操作及用法： 1.我的个人网站 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.

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

15、weaver中的【行为】事件，可以制作出下拉菜单，中的【行为】事件，可以制作出下拉菜单，拼图游戏等一些特殊效果。拼图游戏等一些特殊效果。层可以转换成表格，为不支持层的浏览器提供了解决方法。层可以转换成表格，为不支持层的浏览器提供了解决方法。 层分为两种类型：层分为两种类型：css层和层和netscape层。前者在层。前者在html文件中层标签使用文件中层标签使用div和和span，被浏览器，被浏览器internet explorer 4.0和支持；后者使用和支持；后者使用layer和和ilayer，仅被，仅被netscape 4.0支持，而支持，而dreamweaver mx 2004则对则对

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

17、鼠标，画出层。v将【布局】工具栏中描绘层按钮拖到页面所在的位置。v要绘制多个层，单击【布局】工具栏中描绘层按钮，按住ctrl键，在页面中所需位置拖动鼠标。可绘制多个层。4.3.2 【层】面板 【层】面板是一个用于管理文档中的层的工具。选择主【层】面板是一个用于管理文档中的层的工具。选择主菜单中的【窗口】菜单中的【窗口】/【层】命令，或按【层】命令，或按f2键，可打开【层】键，可打开【层】面板。面板。 在【层】面板中，显示层的可见性、层的名称、在【层】面板中，显示层的可见性、层的名称、z轴顺轴顺序序3项属性。层是按照项属性。层是按照z轴的顺序排列的。嵌套层会以连接符轴的顺序排列的。嵌套层会以连接

18、符与父层相连，以表明从属关系。与父层相连，以表明从属关系。 【层】面板有这几个功能：【层】面板有这几个功能：v 选定一个或多个层。选定一个或多个层。v 修改层的修改层的z轴顺序轴顺序v 修改可见属性修改可见属性v 禁止层重叠。禁止层重叠。v 改变层的嵌套关系。改变层的嵌套关系。4.3.3 嵌套层 嵌套层就是一个层和另一个层之间存在父子关系。使用【层】面板或插入、绘制等方法均可以创建嵌套层。具体步骤如下：v选择菜单【编辑】/【首选参数】命令，在【首选参数】对话框的【分类】列表框中选择【层】选项，再选中【嵌套】项后的【如果在层中则使用嵌套】复选框。v光标定位于层中，把【布局】工具栏上的【绘制层】按

19、钮拖动到层中，即可创建一个嵌套的层。v光标定位于层中，选择菜单【插入】/【布局对象】/【层】，也可创建一个嵌套层。v单击【布局】工具栏上的【描绘层】按钮，然后在一个已有的层内拖动鼠标，绘制一个嵌套层。v打开【层】面板，选中一个层，按住ctrl键，把它拖到目标层上，当目标层出现一个方框时，释放鼠标，则两个层变为嵌套关系。4.3.3 嵌套层v从【层】面板中可以看出，嵌套层呈现树形结构，而且子层和父层的z轴顺序是一样的。v不过嵌套层和嵌套表格不一样，表格嵌套时，子表格是完全包含在父表格中的；而嵌套的子层并不一定要包含在父层中，它不受父层的限制。当移动子层时，父层没有变化；而当移动父层时，子层会随父层

20、发生位移，并且位移的量都必须是一样的，也就是说二者的相对位置不发生变化。可以把这一特点，运用在用层精确定位网页元素中。4.3.4 层的操作1、选定层 在dreamweaver mx 2004 中要想对一个元素进行编辑，首先要选定该元素，层也是如此。以下方法都可以选定层。v选定层的边框线。v单击【层】面板中的层名称。v单击状态栏的层标签。v如果要选定多个层，按住shift键，逐个单击层的边框线。2、改变层的大小v调整单个层的大小或同时调整多个层的大小，可使其具有相调整单个层的大小或同时调整多个层的大小，可使其具有相同的高度及宽度。如果在【层】面板中选中【防止重叠】复同的高度及宽度。如果在【层】面

21、板中选中【防止重叠】复选框，调整层大小时层不会重叠。选框，调整层大小时层不会重叠。v调整单个层的大小：调整单个层的大小：v选定一个层，拖动层边框上的控制点，调整层的大小。选定一个层，拖动层边框上的控制点，调整层的大小。v选定一个层，在【层】面板中重新设置层的高度和宽度。选定一个层，在【层】面板中重新设置层的高度和宽度。v选定层，按住选定层，按住ctrl键，单击方向键，每次以键，单击方向键，每次以1个像素为单个像素为单位调整层的大小。位调整层的大小。v选定层，按住选定层，按住ctrl+shift键，单击方向键，每次以键，单击方向键，每次以10个个像素为单位调整层的大小。像素为单位调整层的大小。v

22、调整多个层的大小：调整多个层的大小：v选定多层，选择【修改】选定多层，选择【修改】/【对齐】【对齐】/【设定宽度相同】和【设定宽度相同】和【修改】【修改】/【对齐】【对齐】/【设定高度相同】命令，先选定的层的【设定高度相同】命令，先选定的层的大小会与最后选定的层的大小保持一致。大小会与最后选定的层的大小保持一致。v选定多层，在【属性】面板中输入选定的多个层的高度和宽选定多层，在【属性】面板中输入选定的多个层的高度和宽度。度。3、移动层v层的移动是经常要进行的操作，在层移动时，我们应注意一层的移动是经常要进行的操作，在层移动时，我们应注意一个问题：因为层可以重叠的，所以不勾选【层】面板中的个问题

23、：因为层可以重叠的，所以不勾选【层】面板中的【防止重叠】选项，这样层的移动就可以不受限制。下面的【防止重叠】选项，这样层的移动就可以不受限制。下面的操作都可以实现层的移动。操作都可以实现层的移动。v选定层后，鼠标指针放在层的边框线上，变为十字箭头，拖选定层后，鼠标指针放在层的边框线上，变为十字箭头，拖动层到目标位置。动层到目标位置。v选定层，按方向键，每按一次移动一个像素。选定层，按方向键，每按一次移动一个像素。v选定层，先按住选定层，先按住shift键不放，再按住方向键，每按一次移键不放，再按住方向键，每按一次移动动10个像素。个像素。v选定层，在【属性】面板的【左】、【上】选项中输入值，选

24、定层，在【属性】面板的【左】、【上】选项中输入值，精确定位层。精确定位层。4、对齐层v使用层对齐命令，可将两个或多个层与最后选定的层边界对使用层对齐命令，可将两个或多个层与最后选定的层边界对齐。齐。v选定多个层，选择【修改】选定多个层，选择【修改】/【对齐】子菜单中任一对齐命【对齐】子菜单中任一对齐命令。有令。有4 种对齐方式：种对齐方式：v【左对齐】：以最后选定的层的左边线为标准，对齐排列。【左对齐】：以最后选定的层的左边线为标准，对齐排列。v【右对齐】：以最后选定的层的右边线为标准，对齐排列。【右对齐】：以最后选定的层的右边线为标准，对齐排列。v【对齐上缘】：以最后选定的层的顶边为标准，对

25、齐排列。【对齐上缘】：以最后选定的层的顶边为标准，对齐排列。v【对齐下缘】：以最后选定的层的底边为标准，对齐排列【对齐下缘】：以最后选定的层的底边为标准，对齐排列。5、将层对齐网格v在文档窗口中，可以使网格成为一个可视化的向导，在文档窗口中，可以使网格成为一个可视化的向导，用于层的定位及大小调整。如果使用对齐功能，则用于层的定位及大小调整。如果使用对齐功能，则在移动层或调整层的大小时，层会被自动定位在最在移动层或调整层的大小时，层会被自动定位在最近的网格位置。具体操作如下：近的网格位置。具体操作如下：v选择【查看】选择【查看】/【网格】【网格】/【显示网格】，在网页中【显示网格】，在网页中显示

26、出网格。显示出网格。v选择【查看】选择【查看】/【网格】【网格】/【靠齐到网格】命令，打【靠齐到网格】命令，打开对齐网格的功能。开对齐网格的功能。v选定并拖动一个层，在释放鼠标后，如果层与网格选定并拖动一个层，在释放鼠标后，如果层与网格靠得很近，则会自动跳至最近的网格位置。靠得很近，则会自动跳至最近的网格位置。4.4 格式化层格式化层4.4.1 设置层的属性设置层的属性 选定层后，【属性】面板显示层的各项参数，如图4-21所示。可以对它们重新设置。v【层编号】：用于给层命名，如果以后在使用行为或javascript控制层，就要用到这个名称。v【左】与【上】：指定层与页面或其父层左上角的相对位置

27、。v【宽】与【高】：指定层的宽度与高度。v【z轴】：层的堆栈顺序，使用【层】面板可以改变层的堆栈顺序。v【可见性】：指层的可见性，其下拉列表中包括4个选项。vdefault：不指定可见性的属性，但大多数浏览器将其解释为inherit,即继承父层的可见性属性。vinherit：继承父层的可见性属性。vvisible：显示层的内容，而忽略父层的属性值。vhidden：隐藏层的内容，而忽略父层的属性。4.4.1 设置层的属性v【背景图】：设置层的背景图像。v【背景颜色】：设置层的背景颜色。v【溢出】：指的层的内容超过层的大小时的显示方式，其下拉列表包括以下4个选项。vvisible：按照内容的尺寸向

28、右、向下扩大层，以显示层的全部内容。vhidden：只显示层尺寸以内的内容。vscroll：不改变层的大小，但增加滚动条，用户可以通过滚动来浏览整个层。该选项只在支持滚动条的浏览器中才有效，而且无论层是否够大，都必须会显示滚动条。vauto：只在层不够大时才出现滚动条，该选项也是在支持滚动条的浏览器中才有效。v【剪辑】：用来指定层的哪一部分是可见的，在【左】、【右】、【上】、【下】4个选项的文本框内输入的数值是距离层的4个边界的距离。4.4.2 改变层的可见性v层内可以包含所有的网页元素，通过改变层的可见性，可以控制层内元素的显示与隐藏。这就是层的可见性。可以通过【层】面板或【属性】面板来改变层的可见性。具体操作如下：v选择【窗口】/【层】命令或按f2打开【层】面板。v在要操作的层的那一行，单击眼睛图标，可显示或隐藏层。v睁开的眼睛表示层是可见的，这时【属性】面板中的【显示】选项为“visible”。v闭着的眼睛表示层不可见的，这时【属性】面板中的【显示】选项为“hidden”。v层的图标列无图标，则可见性为默认，这时【属性】面板中的【显示】选项为“default”。v若要同时改变所有层的可见性，在【层】面板中单击图标列最顶端的图标，原来所有的层均变为不可见或可见。4.4.3 层与表格的转换 我们有时也用层来布局页面，但不是所有的浏览器都有效地支持层，而浏览器对表格支持是比较好的