《网页开发工具》第七讲层和框架

《《网页开发工具》第七讲层和框架》由会员分享，可在线阅读，更多相关《《网页开发工具》第七讲层和框架（19页珍藏版）》请在金锄头文库上搜索。

1、第七讲 层和框架网页开发工具第七讲 层和框架7.1 层在以前的网页中，元素是无法重叠出现的，除 非将重叠的元素制作成背景图像，而有了层以后 ，就可以将元素放置在层中，因为层可以重叠， 所以也就产生了许多重叠的效果。在层中可以放置文字、图像、插件或其他层， 层可以放在网页的任意未知，并且可以移动和隐 藏。当在一个页面上创建多个层时，可以将这些层产 生平铺、重叠或嵌入的效果。所谓平铺式层，是指绘制的多个层之间没有重复 交叠，平铺在页面上。在层的面板中选中“放置重 叠”复选框即可。重叠式层正好与平铺式层相反，即多个层之间是 相互重复交叠的。嵌入式层是指新建的层包含在其他层（父层）中 ，移动父层时子层

2、也随之移动，而移动子层时父层 却不会移动。当光标放置在父层中，使用平铺式层 或重叠式层的方法都可以创建嵌入式层。 网页开发工具第七讲 层和框架7.1.1 层的种类p 方法一：使用“插入”面板 打开“插入面板”，选择“布局”选项卡，直接将“绘 制层”按钮 拖到页面中。 p方法二：使用菜单命令 单击“插入”|“层”命令，就可以插入一个层了。 p方法三：插入多个层 按住Ctrl键的同时，单击“插入”面板上的“绘制层” 按钮，可在页面中一次插入多个层。网页开发工具第七讲 层和框架7.1.2 插入层并设置属性网页开发工具第七讲 层和框架多个层的插入及排列操作步骤如下： 1)单击“编辑”|“首选参数”命令

3、，选择分类列 表中的“层”选项，对层的参数进行设置。 2)选择插入面板中布局选项卡的“绘制层”按 钮，按住Ctrl键，画出四个层。 3)按住shift键同时单击各个层，可同时选中 多个层。 单击“修改”|“排列顺序”命令，再选择“对齐上 缘”、“设成宽度相同”、“设成高度相同”命令 ，可对多个层进行排列。 4)如果想将多个层的间距设置为等距，选中 任意一个层，在层的属性面板中对“左对齐” 参数进行设置即可。1)层的缩放：单个层的缩放只需拖拽缩放手柄（层周 围出现的小方块）即可；如果是多个层，则先同时 选中多个层，然后在属性面板的“宽”|“高”中输入 以像素为单位的数值就可以对多个层进行统一的调

4、 整。 2)层的移动：通过鼠标拖动进行，也可通过上下左右 四个方向键进行。按一次方向键，层移动一个像素 位置；按住shift键再按方向键则一次移动10个像素 位置。 3)层的对齐：选中多个层，单击“修改”|“排列顺序”中 的左对齐、右对齐等方式即可。 网页开发工具第七讲 层和框架7.1.3 层的操作(缩放移动对齐改变Z轴顺序等)4)改变层的可见性：单击“窗口”|“层”命令打开层面板 ，单击眼睛图标可以修改层的可见性；在层的属性 面板中将可见性参数选为hidden，也可将层设为不 可见。 5)层的Z轴顺序：Z轴值最大的层在最上面，在层面板 中拖动层或是在属性面板中输入Z轴数值都可以改 变层的Z轴

5、顺序。例：阴影文字制作。 6)层的嵌套：将光标置于一个层内，再继续插入一个 层，就得到了嵌套层。子层与父层的Z轴顺序是一 样的，父层移动时子层也将移动，而子层移动时父 层不会移动。嵌套层之间存在继承的关系(inherit)， 即子层的可见性和父层保持一致以及保持与父层的 相对位置不变。网页开发工具第七讲 层和框架网页开发工具第七讲 层和框架7.1.4 层与表格的相互转换1.层到表格：层能够精确定位页面元素，在定 位完成后可以将层转换为表格，以免在低版本 的浏览器中不能精确显示页面。插入层后，单 击“修改”|“转换”|“层到表格”命令，在打开的对 话框中设置有关表格的参数，点击确定按钮即 可。网

6、页开发工具第七讲 层和框架p参数说明如下： p最精确：将所有层转换为表格，如果层之间 有间距，则插入适当的单元格。 p最小：如果层之间的距离很小，会将这些层 转换为相邻的单元格，可以在后面的文本框中 输入层之间的最小距离，单位为像素。 p使用透明GIF：将转换后的表格最后移行填 充为透明的GIF图像，这样在所有的浏览器中 ，表格后具有相同的显示效果，此时不能拖动 表格的边框来改变表格的大小。 p置于页面中央：转换后的表格在页面中居中 对齐，否则居左对齐。网页开发工具第七讲 层和框架2.表格到层布局时使用表格灵活性要受到一定的限制，如果 要改变网页中各元素的布局， 需要将表格转换为层 ，然后通过

7、移动层来改变网页的布局。选中表格， 单击“修改”|“转换”|“表格到层”命令，在出现的对话框 中设置完毕，单击“确定”按钮，表格就转换为层了。在一个网站中，通常会有许多元素重复地出现在 不同的网页文档中，如网页标题、导航栏等。如果 在每个网页都添加这些相同的部分，就会浪费很多 的时间，而访问者在浏览网页时也要付出重复的等 待时间。使用框架将很好的解决以上问题。框架将显示窗 口划分成许多子窗口，每个窗口内显示独立的文档 ，当浏览一个网页时，网页的某部分区域（如标题 或导航栏）的内容不变化，而其他区域不断地更新 。网页开发工具第七讲 层和框架7. 2 框架当一个页面被划分为若干个框架，DREAMW

8、EAVER 就建立一个未命名的框架组文件，同时为每个框架建 立一个文档文件。也就是说，对于一个包含两个框架的页面，实际上 存在三个文件，一个是框架集文件，另外两个是分别 存储每个框架内容的文件。网页开发工具第七讲 层和框架网页开发工具第七讲 层和框架7.2.1 建立框架并保存方法一：单击插入面板上的“布局”选项卡， 单击“框架”按钮，在下拉列表中可以看到许 多预先定义的框架结构，选择一种结构即可 。 方法二：单击“文件”|“新建”命令，在打开的 对话框中选择“框架集”，在“框架集”列表中选 择一种框架集，单击“创建”按钮。 框架建立后，每一个框架里都是一个文档， 可以直接添加内容，也可以用“文

9、件”|“在框架 中打开”命令打开一个已经存在的文档。网页开发工具第七讲 层和框架在一个框架集中包含多个文档，当保存文档 时，要将整个网页文档都保存下来。选择“文件”|“保存全部”命令，在出现的对话 框中输入一个文件名作为整个框架集的的文件 ，然后在后面的对话框中依次输入各个框架的 文件名，整个框架集才保存完毕。网页开发工具第七讲 层和框架7.2.2 选取框架并设置属性p按下alt键，在要选定的框架中单击鼠标将该框 架选中，被选中的框架边框内侧出现虚线。单击 框架集的边框则选定整个框架集。 p选择“窗口”|“框架”命令，打开框架面板，在面 板中单击要选定的框架也可选中一个框架。在框 架面板中单击

10、框架集的边框则可选中整个框架集 。 p框架是框架集的组成部分，框架属性面板中可 以设置该框架内文件名、边距、是否滚动等。 p框架集则用来设置整个框架集的各个框架之间 的边框颜色和宽度。网页开发工具第七讲 层和框架网页开发工具第七讲 层和框架7.2.3 编辑框架(拆分改变大小)通过拆分框架，可以增加几个框架集内的框架数 量而不增加框架集的数量。将光标移到要拆分的框架内，然后选择主菜单 中的“修改”|“框架页”命令，选择要拆分的形式， 如“拆分右框架”，将右框架拆分成两个框架。结合其他3个命令：拆分左框架、拆分上框架 、拆分下框架可以将框架沿4个方向拆分。在窗口中，拖动框架边框可以改变框架的尺寸

11、，如果要精确设置尺寸就要使用框架集属性面板 。在没有框架的文档中，按照指向的对象窗口不同 ，链接分为4种形式：_blank、 _parent 、_self、 _top，在使用框架的文档中，又增加与框架有关的 目标如top、mainframe、left等，可以在一个框架内 使用链接改变另一个框架的内容。网页开发工具第七讲 层和框架7.2.4 与框架有关的链接网页开发工具第七讲 层和框架1）建立一个框架文档，左框架中列有文章的主题，而右 框架中则有与主题相关的内容；在顶部框架单击，然后单 击“文件”|“保存框架”命令，讲其保存为top.html，同样保存 左侧框架和右侧框架（left.html /main.html）；然后讲整个 框架集保存为.html.。 2)建立dlh.html文档，在其中输入诗词内容； 建立changzheng.html文档，在其中输入相关诗词内容； 3)设置左侧导航栏的链接：选中“蝶恋花”文字，在属性面 板中讲链接指向dlh.html文档，在目标下拉菜单中选择 mainFrame，指定在右框架中打开链接；用同样的方法为“ 长征”设置链接指向changzheng.html。 4)单击“文件”|“保存全部”命令保存整个框架文件组，按F12 预览网页。