第5章网页布局和框架.ppt
- 文档编号:18627893
- 上传时间:2023-08-21
- 格式:PPT
- 页数:35
- 大小:1.38MB
第5章网页布局和框架.ppt
《第5章网页布局和框架.ppt》由会员分享,可在线阅读,更多相关《第5章网页布局和框架.ppt(35页珍藏版)》请在冰点文库上搜索。
第五章网页布局和框架,内容提要,布局模式绘制布局表格和布局单元格使用标尺与网格调整布局表格及布局单元格框架的使用,网页布局和框架,5.1布局模式5.1.1引例右图页面分成了四个不同的区域:
页面顶部的单元格内放置标题图形;顶部下方的单元格内放置局部导航条;页面左侧的单元格内放置导航条;页面右侧的单元格内放置文字内容,网页布局和框架,5.2绘制布局表格和布局单元格在绘制布局表格和布局单元格之前,必须从“标准”模式切换到“布局”模式,执行下列操作之一,切换到“布局模式”:
选择“查看”|“表格模式”|“布局模式”命令在插入工具栏的“布局”类别中单击“布局模式”按钮,网页布局和框架,绘制布局表格绘制布局表格的步骤如下:
(1)在插入工具栏上的“布局”类别中单击按钮,光标变成加号(+)形状。
(2)将光标放在页面中要绘制布局表格的位置,按下鼠标左键并拖动,在页面上绘制出布局表格。
网页布局和框架,绘制布局单元格绘制布局单元格的步骤如下:
(1)在插入工具栏上的“布局”类别中单击按钮,光标变成加号(+)形状。
(2)将光标放在布局表格中要绘制单元格的位置,按下鼠标左键并拖动,在表格中绘制出布局单元格。
(3)布局单元格绘制完成后,在插入工具栏上的“布局”类别中单击“标准”按钮,切换到“标准”模式,布局表格变成普通表格。
网页布局和框架,绘制嵌套布局表格用户可以将一个布局表格绘制在另一个布局表格中,创建嵌套表格。
具体步骤如下:
(1)在插入工具栏上的“布局”类别中单击按钮,光标变成加号(+)形状。
(2)将光标放在现有布局表格中的空白区域,按下鼠标左键并拖动,在页面上绘制出嵌套布局表格,网页布局和框架,5.3使用标尺与网格使用标尺当处于“布局”模式中时,选择“查看”|“标尺”|“显示”命令,显示标尺。
使用网格
(1)选择“查看”|“网格”|“显示网格”命令,显示网格。
(2)若要设置网格属性,选择“查看”|“网格”|“网格设置”命令,打开“网格设置”对话框。
(3)单击“确定”按钮应用更改并关闭对话框,在“布局”模式下的文档窗口中显示网格线。
网页布局和框架,网格设置,网页布局和框架,颜色:
指定网格线的颜色。
单击拾色器右下方的三角箭头并从颜色选择器中选择一种颜色,或者在文本框中输入一个十六进制数字。
显示网格:
选中该复选框可以使网格在“设计”视图中可见。
靠齐到网格:
选中该复选框可以使页面对象和网格线靠齐。
间隔:
控制网格线的间距。
在文本框中输入一个数字,并从右侧的下拉列表框中选择“像素”、“英寸”或“厘米”作为间距的单位。
显示:
指定网格线是显示为线条还是显示为点。
网页布局和框架,5.4调整布局表格及布局单元格单击两次布局表格顶部的标签,当表格边框上出现选择控制点时,表格处于选中状态。
将光标放在表格的选择控制点上,光标形状变成双向箭头,按下鼠标左键并拖动,可以调整表格的宽度和高度。
单击单元格的边框,边框上出现8个选择控制点,单元格处于选中状态。
拖动选择控制点可以调整单元格的宽度和高度,操作与表格相似。
网页布局和框架,设置布局表格的属性选中布局表格,打开“属性”面板各选项的含义如下:
固定:
将表格设置为固定宽度,在后面的文本框中输入宽度(以像素为单位)。
自动伸展:
使表格最右边的列自动伸展。
高:
设置表格的高度(以像素为单位)。
背景颜色:
设置表格的背景颜色。
单击拾色器右下方的三角箭头并从颜色选择器中选择一种颜色,或者在文本框中输入一个十六进制数字。
网页布局和框架,填充:
设置单元格内容和单元格边框之间的间隔(以像素为单位)。
间距:
设置相邻单元格之间的间隔(以像素为单位)。
清除行高:
删除表格中所有单元格的显式高度设置。
使单元格宽度一致:
如果表格中有固定宽度的单元格,则该选项使HTML代码中的单元格宽度与它们在屏幕上的外观宽度匹配。
删除所有间隔图像:
从表格中删除间隔图像。
删除嵌套:
删除绘制在一个布局表格中的嵌套表格,而不丢失它的任何内容。
此时嵌套表格消失,它包含的单元格成为外部表格的一部分。
网页布局和框架,设置布局单元格的属性各选项的含义如下:
固定:
将单元格设置为固定宽度,在后面的文本框中输入宽度(以像素为单位)。
自动伸展:
使单元格自动伸展。
高:
设置单元格的高度(以像素为单位)。
背景颜色:
设置单元格的背景颜色。
单击拾色器右下方的三角箭头并从颜色选择器中选择一种颜色,或者在文本框中输入一个十六进制数字。
网页布局和框架,水平:
设置单元格内容的水平对齐方式,可供选择的选项包括“左对齐”、“居中对齐”、“右对齐”和“默认”。
垂直:
设置单元格内容的垂直对齐方式,可供选择的选项包括“顶端”、“居中”、“底部”、“基线”或“默认”。
不换行:
禁止文字换行。
如果选中了此复选框,布局单元格按需要加宽以适应文本,而不是在新的一行上继续该文本。
网页布局和框架,设置列宽度在“布局”模式中,可以为表格的列指定一个特定的宽度,或者让其自动伸展以填充浏览器窗口尽量大的部分。
也可以使用间隔图像为列指定一个最小宽度。
使用间隔图像若要将列的最小宽度限制到某一特定值,可在该列中插入一个间隔图像。
具体执行步骤如下:
(1)单击列标题菜单,选择“添加间隔图像”命令
(2)如果尚未给站点设置间隔图像,将打开“选择占位图像”对话框。
(3)如果选择“创建占位图像文件”单选按钮,将打开“保存间隔图像文件为”对话框,指定间隔图像文件名和存储该文件的文件夹,完成后单击“保存”按钮。
(4)间隔图像插入到列中,该图像是不可见的,列的底部会显示双横线以表明它包含一个间隔图像。
网页布局和框架,2列设置为自动伸展自动伸展列可根据浏览器窗口的宽度自动进行调整。
设置自动伸展列的具体步骤如下:
(1)单击列标题菜单,选择“列设置为自动伸展”命令。
(2)如果尚未给站点设置间隔图像,将打开“选择占位图像”对话框,该对话框与图5-19所示类似,新增了“对于自动伸展表格不要使用间隔图像”单选按钮,选中该选项表示避免向表格中自动添加间隔图像。
选择对话框中的某个选项,单击“确定”按钮,完成相应设置。
(3)自动伸展列的底部出现波浪线。
其余列的底部出现双横线,表明自动添加了间隔图像。
网页布局和框架,3.列设置为固定宽度若要将列设置为固定宽度,执行以下步骤:
(1)选择列中的一个单元格,打开“属性”面板。
(2)选择“固定”单选按钮,在后面的文本框中输入单元格(列)的宽度。
网页布局和框架,5.5设置布局模式的首选参数选择“编辑”菜单中的“首选参数”命令,打开“首选参数”对话框,在“分类”列表中选择“布局模式”选项:
网页布局和框架,各选项含义如下:
自动插入间隔符:
指定是否应该在将列设置为自动伸展时自动插入间隔图像。
站点的间隔图像:
指定要设置间隔图像的站点。
图像文件:
指定要设置为间隔图像的图像文件。
单元格外框:
设置布局单元格边框的颜色。
表格外框:
设置布局表格边框的颜色。
表格背景:
设置布局表格中没有布局单元格的区域的颜色。
网页布局和框架,5.6框架的使用框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口其余部分所显示内容无关的HTML文档。
框架集是HTML文件,它定义了一组框架的布局和属性,包括框架的数目、大小和位置,以及在每个框架中初始显示的页面的URL。
在一个框架集之内的框架集称作嵌套的框架集。
一个框架集文件可以包含多个嵌套的框架集。
网页布局和框架,创建框架和框架集在Dreamweaver中有两种创建框架集的方法:
既可以从若干预定义的框架集中选择,也可以自己设计框架集。
1.使用预定义的框架集创建预定义的框架集有两种方法:
(1)新建选择“文件”菜单中的“新建”命令,打开“新建文档”对话框,在“常规”选项卡的“类别”列表中选择“框架集”选项,在“框架集”列表中选择想要创建的框架集类型,单击“创建”按钮,框架集出现在文档窗口中,网页布局和框架,
(2)插入将光标放置在文档窗口中,选择“插入”|“HTML”|“框架”命令,从打开的子菜单中选择预定义的框架集。
也可以在“插入”工具栏的“布局”类别中,单击“框架”按钮上的下拉箭头,从弹出的菜单列表中选择预定义的框架集。
网页布局和框架,2.设计框架集用户可以通过对当前文档窗口的修改、拆分,创建自己的框架集。
选择“修改”菜单中的“框架页”命令,然后从子菜单选择拆分项。
在创建框架集或使用框架前,如果当前设计视图的框架边框不可见,可通过选择“查看”|“可视化助理”|“框架边框”命令,使框架边框在设计视图中可见。
网页布局和框架,选择框架和框架集要更改框架或框架集的属性,首先要选择欲更改的框架或框架集。
用户既可以在文档窗口中选择框架或框架集,也可以通过“框架”面板进行选择。
1.在文档窗口中选择框架和框架集要选择不同的框架或框架集,可执行以下操作之一:
要在当前选定内容的同一层次级别上选择下一框架(框架集)或前一框架(框架集),在按住Alt键的同时按下左箭头键或右箭头键,就可以按照框架和框架集在框架集文件中定义的顺序依次选择这些框架和框架集。
要选择父框架集(包含当前选定内容的框架集),在按住Alt键的同时按上箭头键。
要选择当前选定框架集的第一个子框架或框架集(即,按在框架集文件中定义顺序中的第一个),按住Alt键的同时按下箭头键。
网页布局和框架,保存框架和框架集文件框架集是定义一组框架结构的HTML网页;单个框架是网页上定义的一个区域,可用来显示任意一个文档。
1.保存框架集文件和所有带框架的文档选择“文件”菜单中的“保存全部”命令,该命令将保存框架集文件和所有带框架的文档。
2.保存框架集文件如果想单独保存框架集文件,可以在“框架”面板或文档窗口中选择框架集,然后选择“文件”菜单中的“保存框架页”或“框架集另存为”命令,将框架集文件另存为新文件。
3.保存带框架的文档如果想单独保存在框架中显示的文档,可以将光标放置在目标框架内,然后选择“文件”菜单中的“保存框架”或“框架另存为”命令,将框架中显示的文档另存为新文件。
网页布局和框架,4.改变带框架的文档改变带框架的文档就是改变在框架中显示的文档,用户可以将新内容插入框架的文档中,或者在框架中显示新的文档。
操作步骤如下:
(1)将光标放置在右框架中。
(2)选择“文件”菜单中的“在框架中打开”命令,打开“选择HTML文件”对话框。
(3)选择要在右框架中显示的文档,然后单击“确定”按钮,该文档随即显示在框架中。
(4)如果要使该文档成为在浏览器中打开框架集时在框架中显示的默认文档,保存该框架集。
网页布局和框架,设置框架和框架集属性1框架属性及其设置方法使用框架的“属性”面板可以查看和设置框架属性,包括命名框架、设置边框和边距等等,具体操作步骤如下:
(1)选择框架在文档窗口的设计视图中,按住Alt键的同时单击一个框架;或者选择“窗口”菜单中的“框架”命令,打开“框架”面板,在“框架”面板中单击一个框架。
(2)打开“属性”面板选择“窗口”菜单中的“属性”命令,打开“属性”面板,单击右下角的展开箭头,可以查看所有框架属性,网页布局和框架,(3)命名框架在“框架名称”文本框中输入名称。
在这里输入的框架名,将被超链接和脚本引用。
命名框架必须符合下列条件:
框架名应以字母开头,允许使用下划线(_),但不能使用横杠(-)、句号(。
)和空格,不能使用JavaScript的保留字(例如top或navigator等)。
(4)设置其他框架属性源文件:
用来指定在当前框架中打开的网页文件。
可以直接在文本框中输入文件名;或者单击文件夹图标,浏览并选择一个文件;也可以把光标置于框架内,选择“文件”菜单中的“在框架中打开”命令来打开一个文件。
滚动:
用来设置当没有足够的空间来显示当前框架的内容时是否显示滚动条。
本项属性有4种选择:
“是”表示显示滚动条;“否”表示不显示滚动条;“自动”表示当没有足够的空间来显示当前框架的内容时自动显示滚动条;“默认”表示采用浏览器的默认值(大多数浏览器默认为自动)。
网页布局和框架,不能调整大小:
选择此复选框,可防止用户浏览时拖动框架边框来调整当前框架的大小。
边框:
决定当前框架是否显示边框,有“是”、“否”和“默认”三种选择,大多浏览器默认为“是”。
此项选择覆盖框架集的边框设置。
注意:
只有所有相邻的框架此项属性都设置为“否”时(或父框架集的边框设置为“否”,本项设置为“默认”),才能取消当前框架边框的显示。
边框颜色:
设置与当前框架相邻的所有边框的颜色,此项选择覆盖框架集的边框颜色设置,默认为灰色。
边界宽度:
以像素为单位设置左边距和右边距(框架边框与内容之间的距离)。
边界高度:
以像素为单位设置上边距和下边距(框架边框与内容之间的距离)。
网页布局和框架,框架集属性及其设置方法要设置选定框架集的属性,执行以下步骤:
(1)选择框架集在文档窗口的设计视图中,单击两框架之间的边框;或者选择“窗口”菜单中的“框架”命令,打开“框架”面板,在“框架”面板中单击框架集边框。
(2)打开“属性”面板选择“窗口”菜单中的“属性”命令,打开“属性”面板,单击右下角的展开箭头,可以查看框架集的所有属性,网页布局和框架,(3)设置框架集属性在“边框”下拉列表框中,设置浏览文档时是否显示框架边框。
要显示边框,选择“是”;不显示边框,选择“否”;让浏览器决定是否显示边框,选择“默认”。
在“边框宽度”文本框中,输入一个数字以指定当前框架集的边框宽度。
输入0,指定无边框。
在“边框颜色”文本框中,输入颜色的十六进制值,或使用拾色器为边框选择颜色。
要设置框架大小,可以首先在“行列选定范围”中单击行/列选择标签选择行或列,然后在“值”文本框中输入一个数字,设置选定行或列的大小,并在“单位”下拉列表框中选择输入数值的度量单位。
网页布局和框架,度量单位有三个选项:
像素:
以像素为单位设置列宽度或行高度。
这个选项对总是要保持一样大小的框架(如导航栏)是最好的选择。
如果为其他框架设置了不同的单位,这些框架的空间只能在以像素为单位的框架完全达到指定大小之后才分配。
百分比:
选定行(或列)占所属框架集高度(或宽度)的百分比。
设置以百分比为单位的行(或列)的空间分配在设置以像素为单位的行(或列)之后,在以相对为单位的行(或列)之前。
相对:
选定行(或列)相对于其他行(或列)所占的比例。
以相对为单位的行(或列)的空间分配在以像素和百分比为单位的行(或列)之后,但它们占据浏览器窗口所有的剩余空间。
为框架设置链接具体的操作步骤如下:
(1)在设计视图中,选择文本或对象。
(2)打开“属性”面板,在“链接”文本框中输入要链接的文件名,或者单击文件夹图标选择要链接的文件。
(3)在“属性”面板的“目标”下拉列表框中,选择显示链接文档的框架或窗口:
_blank:
在新的浏览器窗口中打开链接文档,同时保持当前窗口不变。
_parent:
在显示链接的框架的父框架集中打开链接文档,同时替换整个框架集。
_self:
在当前框架中打开链接文档,同时替换该框架中的内容。
_top:
在当前浏览器窗口中打开链接文档,同时替换所有框架。
网页布局和框架,处理不能显示框架的浏览器框架页面最大的局限性在于不兼容低版本的浏览器,即在IE3.0以下版本的浏览器中不能正确显示。
为了避免这一点,需要使用无框架选项。
若要为不支持框架的浏览器创建替换页,执行以下操作:
(1)选择“修改”|“框架页”|“编辑无框架内容”命令,此时Dreamweaver将清除设计视图中的内容,并且在设计视图顶部显示“无框架内容”字样。
(2)在文档窗口中,像处理普通文档一样输入或插入内容,如图5-41所示。
或者选择“窗口”菜单中的“代码检查器”命令,将光标置于noframes标签中的body标签之间,然后输入内容的HTML代码。
(3)再次选择“修改”|“框架页”|“编辑无框架内容”命令,返回到框架集文档的普通视图中。
网页布局和框架,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 布局 框架
![提示](https://static.bingdoc.com/images/bang_tan.gif)