第4章框架和表格

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

1、第4章 框架和层 学习目标：了解框架的含义，掌握框架的创建、保存 的过程，设置框架、框架集的属性，学会如 何建立框架页面，知道在什么情况下使用框 架及根椐不同情况设置框架的属性。了解层 的概念，掌握层的建立、编辑、使用。第4章 框架和层通常情况下，浏览器窗口一次只显示一个页面，使 用框架可以把窗口划分成几个子窗口，每个子窗口内显示 一个不同的页面。有时我们也会使用框架来布局网页，当网页的导航栏 不变，且导航栏出现在各个子页面时，可以使用框架来布 局：把不变的元素放在一个框架内作为单独的网页文档， 这个文档是不变的，其他经常更新的内容放在主框架内。框架的使用有一些缺点，框架页面在加入书签和打印

2、时，经常会出现错误，如果使用复杂的框架布局网页，链 接也容易发生错误。因此，不要频繁地使用框架，尽量用 表格来布局网页。4.1 框架的编辑在Dreamweaver中，提供了可视化的工具 来创建框架、拆分框架，设置框架属性，可 以 很方便地对框架进行各种操作。4.1 框架的编辑v4.1.1 创建框架和框架集v4.1.2 选中框架或框架集v4.1.3 保存框架和框架集文件v4.1.4 设置框架属性v4.1.5 设置框架集属性4.1.1 创建框架v 1框架的创建 有三种方法，可任选其中一种： （1）选择【文件】/【新建】命令，在弹出的【新 建】对话框中，单击【常规】选项卡，在左侧的【 类 别】列表框

3、中选择【框架集】选项，然后从中间的 【框架集】列表框中选择一种预设的框架集，框架 布 局可以通过右侧的【预览】窗口预览。 (2)切换到【布局】工具栏，点击【布局】工具栏上 的【框架】下拉列表，在列表中选择一个框架 （3） 【插入】 【HTML 】 【框架】下拉列 表4.1.1 创建框架v2.修改框架(1) 框架创建好后，如果不理想，可通过拆 分框架来达到目的。把光标定位于要拆分的 框架区，选择【修改】/【框架集】命令， 在其子菜单中选择任一分割命令，可对框架 进行拆分。(2) 【查看】 【 可视化助理】 【框架边框 】 按住ALT键可任意拆分。v3.删除框架若想删除一个框架，将其边界线拖到页面

4、 边缘或其母框架之外即可。4.1.2 选中框架或框架集如果想改变框架或框架集的属性，要先选定框 架或框架集，然后通过【属性】面板的参数进行 设置。选定操作的方法有两种。v1选择框架 （1）按下【ALT】键，在要选择的框架内单击鼠标 左键，则该框架边框内侧出现虚线，【属性】面 板显示该框架的参数。 （2）选择主菜单中的【窗口】/【框架】命令，把 【框架】面板打开，在面板中单击要选择的框架 ，被选中的框架边框会出现虚线。2选择框架集v（1）单击文档窗口中的框架边框，可选中 框架集，被选中的框架集的边框变为虚线， 【属性】面板显示该框架集的参数。v（2）在【框架】面板中单击框架集的边框 线，可以选择

5、整个框架集，此时框架集的边 框变为虚线。4.1.3 保存框架和框架集文件v当一个页面被划分为若干个框架时，Dreamweaver就建立 了一个未命名的框架集文件，同时为每一个框架建立一个 文档文件。也就是说，一个包含两个框架的页面实际上存 在三 个文件，一个框架集文件，另两个是分别存储每个框 架内容的文件。例如，一个左右框架的网页对应的代码为 ：vv v vv标签为框架集标签。包括所有框架的数量，大 小和方位信息，这里表示页面被分为左右两个框架，左侧 的框架宽为160像素。4.1.3 保存框架和框架集文件v标签为框架标签。包含有关显示在这个框 架中的页面的信息，这里表示在左侧的框架内打 开的文

6、件为“left.htm”，框架被命名为“leftFrame” ，框架没有滚动条，不可以改变大小。右侧的框 架内打开的文件为“main.htm”，框架被命名为 “mainFrame”v框架集标签和框架标签是配对使用的。我们在保 存带框架的网页时，要分别保存框架集文件和单 个的框架文件。这样才能把整个网页都保存下来 。以一个左侧框架的的网页为例,具体操作步骤如 下：4.1.3 保存框架和框架集文件v选择主菜单中的【文件】/【保存全部】命 令，整个框架边框的内侧会出现阴影框，同 时弹出【另存为】对话框。如图4-4所示。 框架集显现选中状态，表示要求保存的是框 架集文件。输入文件名，单击保存按钮，将

7、整个框架集保存为“index.htm”。4.1.3 保存框架和框架集文件v接着出现第2 个【另存为】对话框，要求保存右 侧框架的内容文件名，输入文件名“main.htm”,点 击保存按钮。如图4-5所示。v接着出现第3 个【另存为】对话框，要求保存左 侧框架的内容文件名，输入文件名“left.htm”，点 击保存按钮。这样整个窗口都已保存完毕，系统 不再提示，退出【另存为】对话框。如图4-6所示 。v如果已在某个子窗口内打开了一个已经存在的文 件，则该窗口不再需要保存。4.1.4 设置框架属性v框架是框架集的集成部分，在标签 中定义框架的各种属性，包括框架名称、在 框架窗口在打开的源文件，是否

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

9、寸大小。v【边框】：设置框架是否有边框，其下拉列表中包括3个 选项：【是】、【否】、【默认】。v【边框颜色】：用来设置框架边框的颜色。v【边框宽度】：以像素为单位设置页面的左边距和右边距 ，即用来设置框架的内容与框架边框之间的距离。 v【边界高度】：以像素为单位设置页面的上边距和下边距 。4.1.5 设置框架集属性v选定框架集后打开其【属性】面板，如图4-8所示。【属 性】面板显示该框架集是一个1行2列的框架集成。各参数 的含义如下。v【边框】：用来设置是否有边框，其下拉列表中包括3个 选项：【是】、【否】、【默认】。选择【是】，以灰色 三维立方体效果显示框架边框；选择【否】，以灰色平面 体效

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

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

12、 层的创建v4.3.1 创建层v4.3.2 【层】面板v4.3.3 嵌套层v4.3.4 层的操作4.3 层的创建Dreamweaver MX 2004 中的层相当于一个容器，它可以包含所有的网页元素，可以将这个容器放在页面的任何位置，从而简单又精确的定位页面元素。4.3 层的创建Dreamweaver MX 2004 中的层的主要功能：我们知道网页元素是不能重叠，除非将重叠的元素制 作成背景图像。而层可以重叠，因此把元素放在层中，可 以实现网页元素的重叠。由于层可以游离在文档之上，因此使用层可以精确定位网 页元素。使用层定位可以精确到像素级。层还可以显示和隐藏，运用层的这一功能，结合 Drea

13、mweaver中的【行为】事件，可以制作出下拉菜单 ，拼图游戏等一些特殊效果。层可以转换成表格，为不支持层的浏览器提供了解决方法 。层分为两种类型：CSS层和Netscape层。前者在 HTML文件中层标签使用DIV和SPAN，被浏览器Internet Explorer 4.0和支持；后者使用LAYER和ILAYER，仅被 Netscape 4.0支持，而Dreamweaver MX 2004则对 4种 层标签都支持。4.3.1 创建层可以使用插入、拖动或绘制等方法创建一个层，层一 旦被创建，就可以使用【层】面板选定它，或将它嵌套在 其他层中，或改变它的叠放顺序。要创建层，可选用以下任意一种方

14、法。v选择主菜单【插入】/【布局对象】/【层】，在当前光标 所在位置插入层，层的大小为200*115，这个参数可以改 变，选择【编辑】/【首选参数】/【层】，打开【首选 参数】对话框，在分类列表选择【层】，对默认参数重新 进行设置。如图4-19所示。再次插入层时，将按新的参数 设置。v单击【布局】工具栏中描绘层按钮，鼠标变为“+”字形，将 其移至要插入层的位置的左上角，按住鼠标左键，在页面 上拖动鼠标，画出层。v将【布局】工具栏中描绘层按钮拖到页面所在的位置。v要绘制多个层，单击【布局】工具栏中描绘层按钮，按住 ctrl键，在页面中所需位置拖动鼠标。可绘制多个层。4.3.2 【层】面板【层】面

15、板是一个用于管理文档中的层的工具。选择 主菜单中的【窗口】/【层】命令，或按F2键，可打开【 层】面板。在【层】面板中，显示层的可见性、层的名称、Z轴 顺序3项属性。层是按照Z轴的顺序排列的。嵌套层会以连 接符与父层相连，以表明从属关系。【层】面板有这几个功能：v 选定一个或多个层。v 修改层的Z轴顺序v 修改可见属性v 禁止层重叠。v 改变层的嵌套关系。4.3.3 嵌套层嵌套层就是一个层和另一个层之间存在父子关系。使用 【层】面板或插入、绘制等方法均可以创建嵌套层。具体步 骤如下：v选择菜单【编辑】/【首选参数】命令，在【首选参数】对 话框的【分类】列表框中选择【层】选项，再选中【嵌套 】项

16、后的【如果在层中则使用嵌套】复选框。v光标定位于层中，把【布局】工具栏上的【绘制层】按钮 拖动到层中，即可创建一个嵌套的层。v光标定位于层中，选择菜单【插入】/【布局对象】/【层 】，也可创建一个嵌套层。v单击【布局】工具栏上的【描绘层】按钮，然后在一个已 有的层内拖动鼠标，绘制一个嵌套层。v打开【层】面板，选中一个层，按住ctrl键，把它拖到目标 层上，当目标层出现一个方框时，释放鼠标，则两个层变 为嵌套关系。4.3.3 嵌套层v从【层】面板中可以看出，嵌套层呈现树形结构 ，而且子层和父层的Z轴顺序是一样的。v不过嵌套层和嵌套表格不一样，表格嵌套时，子 表格是完全包含在父表格中的；而嵌套的子层并 不一定要包含在父层中，它不受父层的限制。当 移动子层时，父层没有变化；而当移动父层时， 子层会随父层发生位移，并且位移的量都必须是 一样的，也就是说二者的相对位置不发生变化。 可以把这一特点，运用在用层精确定位网页元素 中。4.3.4