《Web信息系统设计基础第5章网页布局和框架.ppt》由会员分享,可在线阅读,更多相关《Web信息系统设计基础第5章网页布局和框架.ppt(39页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第五章第五章 网页布局和框架网页布局和框架内容提要内容提要p5.1 布局模式布局模式p5.2 绘制布局表格和布局单元格绘制布局表格和布局单元格p5.3 使用标尺与网格使用标尺与网格p5.4 调整布局表格及布局单元格调整布局表格及布局单元格p5.5 设置布局模式的首选参数设置布局模式的首选参数p5.6 框架的使用框架的使用5.1 布局模式布局模式法一:法一:“查看查看”|“|“表格模式表格模式”|“|“布局模式布局模式”法二:法二:“插入插入”-“-“布局布局”按钮按钮 11、切换到、切换到、切换到、切换到“布局布局布局布局”模模模模式式式式5.2 绘制布局表格和布局单元格绘制布局表格和布局单元
2、格p5.2.1 绘制布局表格绘制布局表格p5.2.2 绘制布局单元格绘制布局单元格p5.2.3 绘制嵌套布局表格绘制嵌套布局表格5.2.1 绘制布局表格绘制布局表格步骤一:步骤一:在插入工具栏下方的在插入工具栏下方的“布局布局”类别中单击类别中单击 按钮,该按钮位于工具栏倒数第二个,此时光标变成加按钮,该按钮位于工具栏倒数第二个,此时光标变成加号(号(+)形状。该布局按钮在)形状。该布局按钮在“代码代码”状态下是不能使状态下是不能使用的,建议切换到用的,建议切换到“设计设计”模式,如:模式,如:步骤二:步骤二:将光标放在页面中要绘制布局表格的位置,将光标放在页面中要绘制布局表格的位置,按下鼠标
3、左键并拖动,从而在页面上绘制出布局表格,按下鼠标左键并拖动,从而在页面上绘制出布局表格,如图如图5-3所示。在拖动过程中,表格的长和宽会动态地所示。在拖动过程中,表格的长和宽会动态地在在Dreamweaver下方的状态栏中显示出来。下方的状态栏中显示出来。标签:辨别和选择表格标签:辨别和选择表格 表格和单元格的宽度表格和单元格的宽度 (像素像素)5.2.2 绘制布局单元格绘制布局单元格步骤一:步骤一:在插入工具栏上的在插入工具栏上的“布局布局”类别中单击类别中单击 按钮,该按钮按钮,该按钮位于工具栏最右边,此时光标变成加号(位于工具栏最右边,此时光标变成加号(+)形状。)形状。步骤二:步骤二:
4、将光标放在布局表格中要绘制单元格的位置,按下鼠标将光标放在布局表格中要绘制单元格的位置,按下鼠标左键并拖动,在表格中绘制出布局单元格,如左下图所示。布局单左键并拖动,在表格中绘制出布局单元格,如左下图所示。布局单元格只能在布局表格内拖动显示,当鼠标在布局表格外的位子拖动元格只能在布局表格内拖动显示,当鼠标在布局表格外的位子拖动是无法绘制布局单元格的。是无法绘制布局单元格的。步骤三:步骤三:布局单元格绘制完成后,在插入工具栏上的布局单元格绘制完成后,在插入工具栏上的“布局布局”类类别中单击别中单击“标准标准”按钮,切换到按钮,切换到“标准标准”模式,布局表格变成普通模式,布局表格变成普通表格,如
5、右上图所示。用户可以在表格中插入各种页面对象。表格,如右上图所示。用户可以在表格中插入各种页面对象。5.2.3 绘制嵌套布局表格绘制嵌套布局表格步骤一:步骤一:在插入工具栏上的在插入工具栏上的“布局布局”类别中单击类别中单击 按钮,光标变成加号(按钮,光标变成加号(+)形状。)形状。步骤二:步骤二:将光标放在现有布局表格中的空白区域,将光标放在现有布局表格中的空白区域,按下鼠标左键并拖动,在页面上绘制出嵌套布局表格,按下鼠标左键并拖动,在页面上绘制出嵌套布局表格,如下图所示。如下图所示。5.3 使用标尺与网格使用标尺与网格(“布局”模式 )p1、使用标尺、使用标尺 查看查看”|“|“标尺标尺”
6、|“|“显示显示”(1)“(1)“查看查看”|“|“网格网格”|“|“显示显示网格网格”p2、使用网络、使用网络(2)“(2)“查看查看”|“|“网格网格”|“|“网格网格设置设置”(3)单击“确定”按钮应用更改并关闭对话框。5.3 使用标尺与网格使用标尺与网格(“布局”模式 )p网格设置网格设置颜色:指定网格线的颜色。颜色:指定网格线的颜色。显示网格:选中该复选框可以使网格在显示网格:选中该复选框可以使网格在“设计设计”视图中可见。视图中可见。靠齐到网格:选中该复选框可以使页面对象和网格线靠齐。靠齐到网格:选中该复选框可以使页面对象和网格线靠齐。间隔:控制网格线的间距。间隔:控制网格线的间距
7、。网格设置网格设置 显示网格显示网格 5.4 调整布局表格及布局单元格调整布局表格及布局单元格p5.4.1 选择布局表格和布局单元格选择布局表格和布局单元格p5.4.2 调整布局表格和布局单元格的大小调整布局表格和布局单元格的大小p5.4.3 移动嵌套布局表格和布局单元格移动嵌套布局表格和布局单元格 p5.4.4 设置布局表格和布局单元格的属性设置布局表格和布局单元格的属性p5.4.5 设置列宽度设置列宽度 5.4.1 选择布局表格和布局单元格选择布局表格和布局单元格单击两次布局表格顶部的标签,当表格边框上出现选择控制点时,单击两次布局表格顶部的标签,当表格边框上出现选择控制点时,该表格处于选
8、中状态。另外,单击表格中的空白区域,也可以选中该表格处于选中状态。另外,单击表格中的空白区域,也可以选中表格。表格。单击单元格的边框,边框上出现单击单元格的边框,边框上出现8个选择控制点,可以确定该单元个选择控制点,可以确定该单元格处于选中状态。此外,在按住格处于选中状态。此外,在按住Ctrl键的同时,在单元格中的任意键的同时,在单元格中的任意位置单击也可以选中单元格。位置单击也可以选中单元格。5.4.2 调整布局表格和布局单元格的大小调整布局表格和布局单元格的大小选中布局表格,将光标放在表格的选择控制点上,光标选中布局表格,将光标放在表格的选择控制点上,光标形状变成双向箭头,按下鼠标左键并拖
9、动,可以调整表形状变成双向箭头,按下鼠标左键并拖动,可以调整表格的宽度和高度格的宽度和高度 选中单元格,可以拖动选择控制点来调整单元格的宽度选中单元格,可以拖动选择控制点来调整单元格的宽度和高度和高度 5.4.3 移动嵌套布局表格和布局单元格移动嵌套布局表格和布局单元格只有嵌套布局表格才能移动。首先选中嵌套表格边缘,然后按下鼠只有嵌套布局表格才能移动。首先选中嵌套表格边缘,然后按下鼠标左键拖动表格到合适的位置。标左键拖动表格到合适的位置。选中嵌套表格后,使用方向键也可以移动表格。每按一次键盘上的选中嵌套表格后,使用方向键也可以移动表格。每按一次键盘上的方向键,表格就会在相应方向移动方向键,表格
10、就会在相应方向移动1个像素。如果在按住个像素。如果在按住Shift键的键的同时按一次方向键,表格就会在相应方向移动同时按一次方向键,表格就会在相应方向移动10个像素。个像素。移动布局单元格和移动嵌套表格的方法移动布局单元格和移动嵌套表格的方法。5.4.4 设置布局表格和布局单元格的属性设置布局表格和布局单元格的属性p1.设置布局表格的属性设置布局表格的属性布局表格,打开布局表格,打开“属性属性”面面板:板:ll固定:将表格设置为固定宽度。固定:将表格设置为固定宽度。ll自动伸展:使表格最右边的列自动伸展,以布满屏幕。自动伸展:使表格最右边的列自动伸展,以布满屏幕。ll高:设置表格的高度(以像素
11、为单位)。高:设置表格的高度(以像素为单位)。ll填充:设置单元格内容和单元格边框之间的间隔填充:设置单元格内容和单元格边框之间的间隔 l间距:设置相邻单元格之间的间隔(以像素为单位)。清除行高清除行高 删除所有间隔图像删除所有间隔图像 使单元格宽使单元格宽度一致度一致 删除嵌套删除嵌套 5.4.4 设置布局表格和布局单元格的属性设置布局表格和布局单元格的属性p2.设置布局单元格的属性设置布局单元格的属性单击布局单元格边缘,显单击布局单元格边缘,显“属性属性”为:为:ll固定:将单元格设置为固定宽度。固定:将单元格设置为固定宽度。ll高:设置单元格的高度(以像素为单位)。高:设置单元格的高度(
12、以像素为单位)。l背景颜色:设置单元格的背景颜色。ll水平:设置单元格内容的水平水平:设置单元格内容的水平对齐方式对齐方式,“,“左对齐左对齐”、“居中对居中对齐齐”、“右对齐右对齐”和和“默认默认”ll垂直:设置单元格内容的垂直对齐垂直:设置单元格内容的垂直对齐方式方式,“,“顶端顶端”、“居中居中”、“底部底部”、“基线基线”或或“默认默认”l不换行:禁止文字换行。ll自动伸展:使单元格自动伸展,以布满屏幕自动伸展:使单元格自动伸展,以布满屏幕 。5.4.5 设置列宽度设置列宽度p1.使用间隔图像使用间隔图像 步骤一:步骤一:单击列标题菜单,选择单击列标题菜单,选择“添加间隔图像添加间隔图
13、像”命令命令 步骤二:步骤二:步骤二:步骤二:如果尚未给站点设置间隔图像,将打开如果尚未给站点设置间隔图像,将打开如果尚未给站点设置间隔图像,将打开如果尚未给站点设置间隔图像,将打开“选选选选择占位图像择占位图像择占位图像择占位图像”对话框。对话框。对话框。对话框。创建一个创建一个GIFGIF图像作为间图像作为间隔图像,并允许用户隔图像,并允许用户选择一个存储该间隔选择一个存储该间隔图像文件的文件夹。图像文件的文件夹。使用现有的图像文件使用现有的图像文件作为间隔图像作为间隔图像5.4.5 设置列宽度设置列宽度步骤三:步骤三:如果选择如果选择“创建占位图像文件创建占位图像文件”单选按钮,将打开单
14、选按钮,将打开“保保存间隔图像文件为存间隔图像文件为”对话框,指定间隔图像文件名和存储该文件的对话框,指定间隔图像文件名和存储该文件的文件夹,完成后单击文件夹,完成后单击“保存保存”按钮。如果选择按钮。如果选择“使用现存的占位图使用现存的占位图像文件像文件”单选按钮,将打开单选按钮,将打开“选择间隔图像文件选择间隔图像文件”对话框,选择现对话框,选择现有的图像文件作为间隔图像,完成后单击有的图像文件作为间隔图像,完成后单击“确定确定”按钮。按钮。步骤四:步骤四:间隔图像插入到列中,该图像是不可见的,列的底部会间隔图像插入到列中,该图像是不可见的,列的底部会显示双横线以表明它包含一个间隔图像,如
15、下图显示双横线以表明它包含一个间隔图像,如下图。若要从单个列中删除间隔图像,单击列标题菜单,选择若要从单个列中删除间隔图像,单击列标题菜单,选择若要从单个列中删除间隔图像,单击列标题菜单,选择若要从单个列中删除间隔图像,单击列标题菜单,选择“删除间隔图像删除间隔图像删除间隔图像删除间隔图像”命令。若要从表格中删除所有的间隔图像,单击表格标题菜单,选择命令。若要从表格中删除所有的间隔图像,单击表格标题菜单,选择命令。若要从表格中删除所有的间隔图像,单击表格标题菜单,选择命令。若要从表格中删除所有的间隔图像,单击表格标题菜单,选择“移除所有分隔符图像移除所有分隔符图像移除所有分隔符图像移除所有分隔
16、符图像”命令:命令:命令:命令:5.4.5 设置列宽度设置列宽度p2.列设置为自动伸展列设置为自动伸展步骤一:步骤一:单击列标题菜单,选择单击列标题菜单,选择“列设置为自动伸展列设置为自动伸展”命令。命令。步骤二:步骤二:如果尚未给站点设置间隔图像,将打开如果尚未给站点设置间隔图像,将打开“选择占位图像选择占位图像”对话框,新增了对话框,新增了“对于自动伸展表格不要使用间隔图像对于自动伸展表格不要使用间隔图像”单选按单选按钮,选中该选项表示避免向表格中自动添加间隔图像。选择对话框钮,选中该选项表示避免向表格中自动添加间隔图像。选择对话框中的某个选项,单击中的某个选项,单击“确定确定”按钮,完成
17、相应设置。按钮,完成相应设置。步骤三:步骤三:自动伸展列的底部出现波浪线。其余列的底部出现双横自动伸展列的底部出现波浪线。其余列的底部出现双横线,表明自动添加了间隔图像。线,表明自动添加了间隔图像。若要取消列的自动若要取消列的自动若要取消列的自动若要取消列的自动伸展,单击自动伸伸展,单击自动伸伸展,单击自动伸伸展,单击自动伸展列的标题菜单,展列的标题菜单,展列的标题菜单,展列的标题菜单,选择选择选择选择“列设置为固列设置为固列设置为固列设置为固定宽度定宽度定宽度定宽度”命令即可命令即可命令即可命令即可 5.4.5 设置列宽度设置列宽度p3.列设置为固定宽度列设置为固定宽度步骤一:步骤一:选择列
18、中的一个单元格,打开选择列中的一个单元格,打开“属性属性”面面板。板。步骤二:步骤二:选择选择“固定固定”单选按钮,在后面的文本框单选按钮,在后面的文本框中输入单元格(列)的宽度。中输入单元格(列)的宽度。当在当在“布局布局”模式中设置好布局表格和布局单元格后,模式中设置好布局表格和布局单元格后,就可以在单元格中输入文本或插入其他页面对象了,表就可以在单元格中输入文本或插入其他页面对象了,表格的空白区域不能插入内容。格的空白区域不能插入内容。当用户添加宽度大于布局单元格的内容时,该单元格将当用户添加宽度大于布局单元格的内容时,该单元格将自动扩展。当单元格扩展时,该单元格所在的列随之扩自动扩展。
19、当单元格扩展时,该单元格所在的列随之扩展,周围单元格的大小也会相应地自动调整。展,周围单元格的大小也会相应地自动调整。5.5 设置布局模式的首选参数设置布局模式的首选参数“编辑编辑”-“-“首选参数首选参数”-“-“分类分类”-“-“布局模式布局模式”ll自动插入间隔符:自动插入间隔符:指定是否应该在将列指定是否应该在将列设置为自动伸展时自设置为自动伸展时自动插入间隔图像动插入间隔图像ll站点的间隔图像:站点的间隔图像:指定要设置间隔图像指定要设置间隔图像的站点的站点。5.6 框架的使用框架的使用p5.6.1 关于框架和框架集关于框架和框架集p5.6.2 创建框架和框架集创建框架和框架集p5.
20、6.3 选择框架和框架集选择框架和框架集p5.6.4 保存框架和框架集文件保存框架和框架集文件p5.6.5 设置框架和框架集属性设置框架和框架集属性p5.6.6 为框架设置链接为框架设置链接p5.6.7 处理不能显示框架的浏览器处理不能显示框架的浏览器5.6.1 关于框架和框架集关于框架和框架集p框架是浏览器窗口中的一个区域,它可以框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口其余部分所显示内容无显示与浏览器窗口其余部分所显示内容无关的关的HTML文档。文档。p框架集是框架集是HTML文件,它定义了一组框架文件,它定义了一组框架的布局和属性,包括框架的数目、大小和的布局和属性,包括框架的
21、数目、大小和位置,以及在每个框架中初始显示的页面位置,以及在每个框架中初始显示的页面的的URL。框架集文件本身不包含要在浏览。框架集文件本身不包含要在浏览器中显示的器中显示的HTML内容,它只是向浏览器内容,它只是向浏览器提供应如何显示一组框架以及在这些框架提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。中应显示哪些文档的有关信息。5.6.2 创建框架和框架集创建框架和框架集p1.使用预定义的框架集使用预定义的框架集法一:文件法一:文件”-“-“新建新建”-“-“新建文档新建文档”-“-“示例中的页示例中的页”-“-“框架集框架集”-“-“创建创建”法二:法二:“插入记录插入记
22、录”|“HTML”|“|“HTML”|“框架框架”-选择预定义的框架集选择预定义的框架集 5.6.2 创建框架和框架集创建框架和框架集法三:法三:“插入插入”-“-“布局布局”-“-“框架框架”-选择预定义的框选择预定义的框架集架集 创建好的框架页创建好的框架页 5.6.2 创建框架和框架集创建框架和框架集p2.设计框架集设计框架集1)1)创建框架集:创建框架集:创建框架集:创建框架集:“修改修改”-“-“框架集框架集”-选择拆分项选择拆分项 注:注:如果当前设计视图如果当前设计视图的框架边框不可见,可的框架边框不可见,可通过选择通过选择“查看查看”|“|“可可视化助理视化助理”|“|“框架边
23、框框架边框”命令,使框架边框在命令,使框架边框在设计视图中可见。设计视图中可见。5.6.2 创建框架和框架集创建框架和框架集p2)拆分框架:拆分框架:将光标放置在要拆分的框架内,选择“修改”菜单中的“框架集”命令,从子菜单中选择拆分项。要以垂直或水平方式拆分一个框架或一组框架,可将框架边框从设计视图的边缘拖入设计视图的中间。要将不在设计视图边缘的框架边框拆分成一个框架,可在按住Alt键的同时拖动框架边框。要将一个框架拆分成四个框架,可将框架边框从设计视图的一角拖入框架的中间。5.6.2 创建框架和框架集创建框架和框架集单独拆分一个框架,首先选择“窗口”菜单中的“框架”命令,然后在显示的“框架”
24、面板上单击待拆分的框架,再用光标拖动相应框架的边框,此时就可将单独的框架拆分成两部分。3)3)删除框架删除框架删除框架删除框架:直接将框架直接将框架边框拖离页边框拖离页面或拖到父面或拖到父框架的边框框架的边框上上5.6.3 选择框架和框架集选择框架和框架集p1.在文档窗口中选择框架和框架集在文档窗口中选择框架和框架集选择框架:在设计视图中,按住选择框架:在设计视图中,按住AltAlt键的同时单击框架内部,这时键的同时单击框架内部,这时在框架周围会显示一个选择轮廓在框架周围会显示一个选择轮廓 选择框架集:单击框架集的某一内部框架边框,则在框架集周围选择框架集:单击框架集的某一内部框架边框,则在框
25、架集周围显示一个选择轮廓。显示一个选择轮廓。选择不同的选择不同的框架或框架集框架或框架集 ll当前选定内容的同一层次级别选择下一框架当前选定内容的同一层次级别选择下一框架(框架集)或前一框架(框架集),按住(框架集)或前一框架(框架集),按住AltAlt键的键的同时按下左箭头键或右箭头键。同时按下左箭头键或右箭头键。ll要选择父框架集(包含当前选定内容的框架集)要选择父框架集(包含当前选定内容的框架集),在按住,在按住AltAlt键的同时按上箭头键。键的同时按上箭头键。ll要选择当前选定框架集的第一个子框架或框架要选择当前选定框架集的第一个子框架或框架集集 5.6.3 选择框架和框架集选择框架
26、和框架集p2.在在“框架框架”面板中选择框架和框架集面板中选择框架和框架集“框架框架”面板提供框架集内各框架的可视化表示形式,它能够非常面板提供框架集内各框架的可视化表示形式,它能够非常直观地显示框架集的层次结构。直观地显示框架集的层次结构。在在“框架框架”面面板中选择框架板中选择框架集:集:在在“框架框架”面面板中选择框架:板中选择框架:“窗口窗口”-“-“框框架架”5.6.4 保存框架和框架集文件保存框架和框架集文件p1.保存框架集文件和所有带框架的文档保存框架集文件和所有带框架的文档“文件文件”-“保存全部保存全部”p2.保存框架集文件保存框架集文件如果想单独保存框架集文件,可以在如果想
27、单独保存框架集文件,可以在“框架框架”面板或文档窗口中选面板或文档窗口中选择框架集,然后选择择框架集,然后选择“文件文件”菜单中的菜单中的“保存框架页保存框架页”或或“框架集框架集另存为另存为”命令,将框架集文件另存为新文件。命令,将框架集文件另存为新文件。p3.保存带框架的文档保存带框架的文档如果想单独保存在框架中显示的文档,可以将光标放置在目标框架如果想单独保存在框架中显示的文档,可以将光标放置在目标框架内,然后选择内,然后选择“文件文件”菜单中的菜单中的“保存框架保存框架”或或“框架另存为框架另存为”命命令,将框架中显示的文档另存为新文件。令,将框架中显示的文档另存为新文件。5.6.4
28、保存框架和框架集文件保存框架和框架集文件p4.改变带框架的文档改变带框架的文档(1)将光标放置在右框)将光标放置在右框架中。架中。(2)选择)选择“文件文件”菜单菜单中的中的“在框架中打开在框架中打开”命命令,打开令,打开“选择选择HTML文文件件”对话框。对话框。(3)选择要在右框架中)选择要在右框架中显示的文档,然后单击显示的文档,然后单击“确定确定”按钮,该文档随即按钮,该文档随即显示在框架中。如右图。显示在框架中。如右图。5.6.5 设置框架和框架集属性设置框架和框架集属性p1框架属性及其设置方法框架属性及其设置方法(1)选择框架)选择框架在文档窗口的设计视图中,按住在文档窗口的设计视
29、图中,按住Alt键的同时单击一个框架;或者键的同时单击一个框架;或者选择选择“窗口窗口”菜单中的菜单中的“框架框架”命令,打开命令,打开“框架框架”面板,在面板,在“框框架架”面板中单击一个框架。面板中单击一个框架。(2)打开)打开“属性属性”面板面板选择选择“窗口窗口”菜单中的菜单中的“属性属性”命令,命令,打开打开“属性属性”面板,单击面板,单击右下角的展开箭头,可以查看所有框架属性,如下图所示。右下角的展开箭头,可以查看所有框架属性,如下图所示。5.6.5 设置框架和框架集属性设置框架和框架集属性(3)命名框架)命名框架在在“框架名称框架名称”文本框中输入名称。在这里输入的框架名,将被超
30、文本框中输入名称。在这里输入的框架名,将被超链接和脚本引用。命名框架必须符合下列条件:框架名应以字母开链接和脚本引用。命名框架必须符合下列条件:框架名应以字母开头,允许使用下划线(头,允许使用下划线(_),但不能使用横杠(),但不能使用横杠(-)、句号(。)和)、句号(。)和空格,不能使用空格,不能使用JavaScript的保留字(例如的保留字(例如top或或navigator等)等)(4)设置其他框架属性)设置其他框架属性ll源文件源文件 ll滚动滚动 ll不能调整大小不能调整大小 ll边框边框 ll边框颜色边框颜色 ll边界宽度边界宽度 ll边界高度边界高度 其他框架属性其他框架属性5.6
31、.5 设置框架和框架集属性设置框架和框架集属性p2.框架集属性及其设置方法框架集属性及其设置方法(1)选择框架集)选择框架集在文档窗口的设计视图中,单击两框架之间的边框;或者选择在文档窗口的设计视图中,单击两框架之间的边框;或者选择“窗窗口口”菜单中的菜单中的“框架框架”命令,打开命令,打开“框架框架”面板,在面板,在“框架框架”面板面板中单击框架集边框。中单击框架集边框。(2)打开)打开“属性属性”面板面板选择选择“窗口窗口”菜单中的菜单中的“属性属性”命令,命令,打开打开“属性属性”面板,单击面板,单击右下角的展开箭头,可以查看框架集的所有属性,如图右下角的展开箭头,可以查看框架集的所有属
32、性,如图5-37所示。所示。5.6.6 为框架设置链接为框架设置链接步骤一:步骤一:在设计视图中,选择文本或对象。在设计视图中,选择文本或对象。步骤二:步骤二:打开打开“属性属性”面板,在面板,在“链接链接”文本框中输入要链接的文本框中输入要链接的文件名,或者单击文件夹图标选择要链接的文件。文件名,或者单击文件夹图标选择要链接的文件。步骤三:步骤三:在在“属性属性”面板的面板的“目标目标”下拉列表框中,选择显示链下拉列表框中,选择显示链接文档的框架或窗口:接文档的框架或窗口:ll_parent_parent:在显示链接的框架的父框架集中打开链接文档,同时替换整:在显示链接的框架的父框架集中打开
33、链接文档,同时替换整个框架集。个框架集。ll_blank_blank:在新的浏览器窗口中打开链接文档,同时保持当前窗口不变:在新的浏览器窗口中打开链接文档,同时保持当前窗口不变ll_self_self:在当前框架中打开链接文档,同时替换该框架中的内容。:在当前框架中打开链接文档,同时替换该框架中的内容。l_top:在当前浏览器窗口中打开链接文档,同时替换所有框架。5.6.7 处理不能显示框架的浏览器处理不能显示框架的浏览器步骤一:步骤一:选择选择“修改修改”|“框架页框架页”|“编辑无框架内容编辑无框架内容”命令,命令,此时此时Dreamweaver将清除设计视图中的内容,并且在设计视图顶将清
34、除设计视图中的内容,并且在设计视图顶部显示部显示“无框架内容无框架内容”字样。字样。步骤二:步骤二:在文档窗口中,像处理普通文档一样输入或插入内容,在文档窗口中,像处理普通文档一样输入或插入内容,如右下所示。或者选择如右下所示。或者选择“窗口窗口”菜单中的菜单中的“代码检查器代码检查器”命令,命令,将光标置于将光标置于noframes标签中的标签中的body标签之间,然后输入内容的标签之间,然后输入内容的HTML代码。代码。步骤三:步骤三:步骤三:步骤三:再次选择再次选择再次选择再次选择“修修修修改改改改”|“|“框架页框架页框架页框架页”|“|“编辑无编辑无编辑无编辑无框架内容框架内容框架内
35、容框架内容”命令,返回到框命令,返回到框命令,返回到框命令,返回到框架集文档的普通视图中。架集文档的普通视图中。架集文档的普通视图中。架集文档的普通视图中。习题习题5-1、请简述布局视图的功能。请简述布局视图的功能。5-2、请简述添加间隔图像的作用。请简述添加间隔图像的作用。5-3、请简述调整布局表格大小的方法。请简述调整布局表格大小的方法。5-4、什么是框架和框架集?什么是框架和框架集?5-5、保存框架和框架集文件的方法是什么?保存框架和框架集文件的方法是什么?实习实习 嵌套使用嵌套使用“顶部框架顶部框架”和和“布局表格布局表格”两种布两种布局,设计局,设计“我的网站我的网站”。设网页结构及其布局如图:。设网页结构及其布局如图:页面宽高可用页面宽高可用“标尺标尺”上像素个数确定;上像素个数确定;超出屏幕的部分可用超出屏幕的部分可用下边的下边的“抓手工具抓手工具”拖动查看。拖动查看。The End