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

第七讲层和框架《网页开发工具》第七讲层和框架7.1层在以前的网页中，元素是无法重叠出现的，除非将重叠的元素制作成背景图像，而有了层以后，就可以将元素放置在层中，因为层可以重叠，所以也就产生了许多重叠的效果。在层中可以放置文字、图像、插件或其他层，层可以放在网页的任意未知，并且可以移动和隐藏。当在一个页面上创建多个层时，可以将这些层产生平铺、重叠或嵌入的效果。所谓平铺式层，是指绘制的多个层之间没有重复交叠，平铺在页面上。在层的面板中选中“放置重叠”复选框即可。重叠式层正好与平铺式层相反，即多个层之间是相互重复交叠的。嵌入式层是指新建的层包含在其他层（父层）中，移动父层时子层也随之移动，而移动子层时父层却不会移动。当光标放置在父层中，使用平铺式层或重叠式层的方法都可以创建嵌入式层。《网页开发工具》第七讲层和框架7.1.1层的种类方法一：使用“插入”面板打开“插入面板”，选择“布局”选项卡，直接将“绘制层”按钮拖到页面中。方法二：使用菜单命令单击“插入”|“层”命令，就可以插入一个层了。方法三：插入多个层按住Ctrl键的同时，单击“插入”面板上的“绘制层”按钮，可在页面中一次插入多个层。《网页开发工具》第七讲层和框架7.1.2插入层并设置属性《网页开发工具》第七讲层和框架多个层的插入及排列操作步骤如下：1)单击“编辑”|“首选参数”命令，选择分类列表中的“层”选项，对层的参数进行设置。2)选择插入面板中布局选项卡的“绘制层”按钮，按住Ctrl键，画出四个层。3)按住shift键同时单击各个层，可同时选中多个层。单击“修改”|“排列顺序”命令，再选择“对齐上缘”、“设成宽度相同”、“设成高度相同”命令，可对多个层进行排列。4)如果想将多个层的间距设置为等距，选中任意一个层，在层的属性面板中对“左对齐”参数进行设置即可。1)层的缩放：单个层的缩放只需拖拽缩放手柄（层周围出现的小方块）即可；如果是多个层，则先同时选中多个层，然后在属性面板的“宽”|“高”中输入以像素为单位的数值就可以对多个层进行统一的调整。2)层的移动：通过鼠标拖动进行，也可通过上下左右四个方向键进行。按一次方向键，层移动一个像素位置；按住shift键再按方向键则一次移动10个像素位置。3)层的对齐：选中多个层，单击“修改”|“排列顺序”中的左对齐、右对齐等方式即可。《网页开发工具》第七讲层和框架7.1.3层的操作(缩放\移动\对齐\改变Z轴顺序等)4)改变层的可见性：单击“窗口”|“层”命令打开层面板，单击眼睛图标可以修改层的可见性；在层的属性面板中将可见性参数选为hidden，也可将层设为不可见。5)层的Z轴顺序：Z轴值最大的层在最上面，在层面板中拖动层或是在属性面板中输入Z轴数值都可以改变层的Z轴顺序。例：阴影文字制作。6)层的嵌套：将光标置于一个层内，再继续插入一个层，就得到了嵌套层。子层与父层的Z轴顺序是一样的，父层移动时子层也将移动，而子层移动时父层不会移动。嵌套层之间存在继承的关系(inherit)，即子层的可见性和父层保持一致以及保持与父层的相对位置不变。《网页开发工具》第七讲层和框架《网页开发工具》第七讲层和框架7.1.4层与表格的相互转换1.层到表格：层能够精确定位页面元素，在定位完成后可以将层转换为表格，以免在低版本的浏览器中不能精确显示页面。插入层后，单击“修改”|“转换”|“层到表格”命令，在打开的对话框中设置有关表格的参数，点击确定按钮即可。《网页开发工具》第七讲层和框架参数说明如下：最精确：将所有层转换为表格，如果层之间有间距，则插入适当的单元格。最小：如果层之间的距离很小，会将这些层转换为相邻的单元格，可以在后面的文本框中输入层之间的最小距离，单位为像素。使用透明GIF：将转换后的表格最后移行填充为透明的GIF图像，这样在所有的浏览器中，表格后具有相同的显示效果，此时不能拖动表格的边框来改变表格的大小。置于页面中央：转换后的表格在页面中居中对齐，否则居左对齐。《网页开发工具》第七讲层和框架2.表格到层布局时使用表格灵活性要受到一定的限制，如果要改变网页中各元素的布局，需要将表格转换为层，然后通过移动层来改变网页的布局。选中表格，单击“修改”|“转换”|“表格到层”命令，在出现的对话框中设置完毕，单击“确定”按钮，表格就转换为层了。在一个网站中，通常会有许多元素重复地出现在不同的网页文档中，如网页标题、导航栏等。如果在每个网页都添加这些相同的部分，就会浪费很多的时间，而访问者在浏览网页时也要付出重复的等待时间。使用框架将很好的解决以上问题。框架将显示窗口划分成许多子窗口，每个窗口内显示独立的文档，当浏览一个网页时，网页的某部分区域（如标题或导航栏）的内容不变化，而其他区域不断地更新。《网页开发工具》第七讲层和框架7.2框架当一个页面被划分为若干个框架，DREAMWEAVER就建立一个未命名的框架组文件，同时为每个框架建立一个文档文件。也就是说，对于一个包含两个框架的页面，实际上存在三个文件，一个是框架集文件，另外两个是分别存储每个框架内容的文件。《网页开发工具》第七讲层和框架《网页开发工具》第七讲层和框架7.2.1建立框架并保存方法一：单击插入面板上的“布局”选项卡，单击“框架”按钮，在下拉列表中可以看到许多预先定义的框架结构，选择一种结构即可。方法二：单击“文件”|“新建”命令，在打开的对话框中选择“框架集”，在“框架集”列表中选择一种框架集，单击“创建”按钮。框架建立后，每一个框架里都是一个文档，可以直接添加内容，也可以用“文件”|“在框架中打开”命令打开一个已经存在的文档。《网页开发工具》第七讲层和框架在一个框架集中包含多个文档，当保存文档时，要将整个网页文档都保存下来。选择“文件”|“保存全部”命令，在出现的对话框中输入一个文件名作为整个框架集的的文件，然后在后面的对话框中依次输入各个框架的文件名，整个框架集才保存完毕。《网页开发工具》第七讲层和框架7.2.2选取框架并设置属性按下alt键，在要选定的框架中单击鼠标将该框架选中，被选中的框架边框内侧出现虚线。单击框架集的边框则选定整个框架集。选择“窗口”|“框架”命令，打开框架面板，在面板中单击要选定的框架也可选中一个框架。在框架面板中单击框架集的边框则可选中整个框架集。框架是框架集的组成部分，框架属性面板中可以设置该框架内文件名、边距、是否滚动等。框架集则用来设置整个框架集的各个框架之间的边框颜色和宽度。《网页开发工具》第七讲层和框架《网页开发工具》第七讲层和框架7.2.3编辑框架(拆分\改变大小)通过拆分框架，可以增加几个框架集内的框架数量而不增加框架集的数量。将光标移到要拆分的框架内，然后选择主菜单中的“修改”|“框架页”命令，选择要拆分的形式，如“拆分右框架”，将右框架拆分成两个框架。结合其他3个命令：拆分左框架、拆分上框架、拆分下框架可以将框架沿4个方向拆分。在窗口中，拖动框架边框可以改变框架的尺寸，如果要精确设置尺寸就要使用框架集属性面板。在没有框架的文档中，按照指向的对象窗口不同，链接分为4种形式：_blank、_parent、_self、_top，在使用框架的文档中，又增加与框架有关的目标如top、mainframe、left等，可以在一个框架内使用链接改变另一个框架的内容。《网页开发工具》第七讲层和框架7.2.4与框架有关的链接《网页开发工具》第七讲层和框架1）建立一个框架文档，左框架中列有文章的主题，而右框架中则有与主题相关的内容；在顶部框架单击，然后单击“文件”|“保存框架”命令，讲其保存为top.html，同样保存左侧框架和右侧框架（left.html/main.html）；然后讲整个框架集保存为mzd.html.。2)建立dlh.html文档，在其中输入诗词内容；建立changzheng.html文档，在其中输入相关诗词内容；3)设置左侧导航栏的链接：选中“蝶恋花”文字，在属性面板中讲链接指向dlh.html文档，在目标下拉菜单中选择mainFrame，指定在右框架中打开链接；用同样的方法为“长征”设置链接指向changzheng.html。4)单击“文件”|“保存全部”命令保存整个框架文件组，按F12预览网页。