《第4章框架和表格》由会员分享，可在线阅读，更多相关《第4章框架和表格（37页珍藏版）》请在金锄头文库上搜索。
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则对则对 4种层
16、种层标签都支持。标签都支持。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【对齐上缘对齐上缘】：以最后选定的层的顶边为标准，对齐排列。：以最后选定的层的顶边为标准，对齐排列。v【对齐下缘
25、对齐下缘】：以最后选定的层的底边为标准，对齐排列：以最后选定的层的底边为标准，对齐排列。5、将层对齐网格v在文档窗口中，可以使网格成为一个可视化的向导，在文档窗口中，可以使网格成为一个可视化的向导，用于层的定位及大小调整。如果使用对齐功能，则用于层的定位及大小调整。如果使用对齐功能，则在移动层或调整层的大小时，层会被自动定位在最在移动层或调整层的大小时，层会被自动定位在最近的网格位置。具体操作如下：近的网格位置。具体操作如下：v选择选择【查看查看】/【网格网格】/【显示网格显示网格】，在网页中，在网页中显示出网格。显示出网格。v选择选择【查看查看】/【网格网格】/【靠齐到网格靠齐到网格】命令，
26、打命令，打开对齐网格的功能。开对齐网格的功能。v选定并拖动一个层，在释放鼠标后，如果层与网格选定并拖动一个层，在释放鼠标后，如果层与网格靠得很近，则会自动跳至最近的网格位置。靠得很近，则会自动跳至最近的网格位置。4.4 格式化层格式化层4.4.1 设置层的属性设置层的属性 选定层后，【属性】面板显示层的各项参数，如图4-21所示。可以对它们重新设置。v【层编号】：用于给层命名，如果以后在使用行为或JavaScript控制层，就要用到这个名称。v【左】与【上】：指定层与页面或其父层左上角的相对位置。v【宽】与【高】：指定层的宽度与高度。v【Z轴】：层的堆栈顺序，使用【层】面板可以改变层的堆栈顺序
27、。v【可见性】：指层的可见性，其下拉列表中包括4个选项。vdefault：不指定可见性的属性，但大多数浏览器将其解释为Inherit,即继承父层的可见性属性。vInherit：继承父层的可见性属性。vVisible：显示层的内容，而忽略父层的属性值。vhidden：隐藏层的内容，而忽略父层的属性。4.4.1 设置层的属性v【背景图】：设置层的背景图像。v【背景颜色】：设置层的背景颜色。v【溢出】：指的层的内容超过层的大小时的显示方式，其下拉列表包括以下4个选项。vVisible：按照内容的尺寸向右、向下扩大层，以显示层的全部内容。vHidden：只显示层尺寸以内的内容。vScroll：不改变层
28、的大小，但增加滚动条，用户可以通过滚动来浏览整个层。该选项只在支持滚动条的浏览器中才有效，而且无论层是否够大，都必须会显示滚动条。vAuto：只在层不够大时才出现滚动条，该选项也是在支持滚动条的浏览器中才有效。v【剪辑】：用来指定层的哪一部分是可见的，在【左】、【右】、【上】、【下】4个选项的文本框内输入的数值是距离层的4个边界的距离。4.4.2 改变层的可见性v层内可以包含所有的网页元素，通过改变层的可见性，可以控制层内元素的显示与隐藏。这就是层的可见性。可以通过【层】面板或【属性】面板来改变层的可见性。具体操作如下：v选择【窗口】/【层】命令或按F2打开【层】面板。v在要操作的层的那一行，
29、单击眼睛图标，可显示或隐藏层。v睁开的眼睛表示层是可见的，这时【属性】面板中的【显示】选项为“visible”。v闭着的眼睛表示层不可见的，这时【属性】面板中的【显示】选项为“hidden”。v层的图标列无图标，则可见性为默认，这时【属性】面板中的【显示】选项为“default”。v若要同时改变所有层的可见性，在【层】面板中单击图标列最顶端的图标，原来所有的层均变为不可见或可见。4.4.3 层与表格的转换 我们有时也用层来布局页面，但不是所有的浏览器都有效地支持层，而浏览器对表格支持是比较好的。在Dreamweaver MX 2004 中提供了层与表格相互转换的功能，我们简单介绍一下。 现在有
30、一个使用层布局的页面，我们把它转换成用表格来布局。具体操作如下：v选择【修改】/【转换】/【层到表格】命令，打开【转换层为表格】对话框。v在对话框中根椐实际情况设置以下选项。4.4.3 层与表格的转换 在对话框中根椐实际情况设置以下选项:v【最精确】：以精确方式转换，为每个层生成一个单元格，并创建所有附加单元格，以保证各单元格之间的距离。v【最小】：以最小方式转换，去掉宽度或高度小于指定像素的空单元格，也就是说，当某些层的位置坐标比较接近时，使它们对齐，这样可以使空单元格数目减少，从而减少文件的大小，但这样转换后页面与原来页面的一些差别。v【使用透明GIF】：使用透明背景GIF图像填充表格，这
31、样可以确保此表格在所有的浏览器中显示情况是一样的。如果使用了透明GIF图像，将不能拖曳表格线来调整表格。如果不选择此项，不可以编辑表格，但不能保证在所有的浏览器中有相同的外观。v【置于页面中央】：选择该项，转换后的表格将居中对齐，否则左对齐。v【防止重叠】：该项一般要选中，如果层发生重叠，将无法进行转换。v【显示层面板】，【显示网格】、【靠齐到网络】：这3个选项根椐需要选择。v按照图4-23所示设置好选项后，单击【确定】按钮。完成转换。4.4.3 层与表格的转换 将表格转换为层的操作方法如下：将表格转换为层的操作方法如下：v选择选择【修改修改】/【转换转换】/【表格到层表格到层】命令，打开命令，打开【转换表转换表格到层格到层】对话框。如图对话框。如图4-24所示。所示。 根椐需要设置选项：根椐需要设置选项：v【防止层重叠防止层重叠】：确定转换以后生成的层，在进行编辑时是：确定转换以后生成的层，在进行编辑时是否可以重叠。否可以重叠。v【显示层面板显示层面板】：是否显示：是否显示【层】【层】面板。面板。v【显示网格显示网格】和【】和【靠齐到网格靠齐到网格】：确定是否使用网格来帮助：确定是否使用网格来帮助层定位。层定位。v单击单击【确定确定】按钮。按钮。v表格被转换为层时，空的单元格不会生成层。表格外的内容表格被转换为层时，空的单元格不会生成层。表格外的内容会被置于层中。会被置于层中。
