Web信息系统设计基础第5章网页布局和框架.ppt

《Web信息系统设计基础第5章网页布局和框架.ppt》由会员分享，可在线阅读，更多相关《Web信息系统设计基础第5章网页布局和框架.ppt（39页珍藏版）》请在三一办公上搜索。

1、第五章 网页布局和框架,内容提要,5.1 布局模式5.2 绘制布局表格和布局单元格5.3 使用标尺与网格5.4 调整布局表格及布局单元格5.5 设置布局模式的首选参数5.6 框架的使用,5.1 布局模式,法一：“查看”|“表格模式”|“布局模式”,法二：“插入”-“布局”按钮,1、切换到“布局”模式,5.2 绘制布局表格和布局单元格,5.2.1 绘制布局表格5.2.2 绘制布局单元格5.2.3 绘制嵌套布局表格,5.2.1 绘制布局表格,步骤一：在插入工具栏下方的“布局”类别中单击 按钮，该按钮位于工具栏倒数第二个，此时光标变成加号（+）形状。该布局按钮在“代码”状态下是不能使用的，建议切换到

2、“设计”模式，如：步骤二：将光标放在页面中要绘制布局表格的位置，按下鼠标左键并拖动，从而在页面上绘制出布局表格，如图5-3所示。在拖动过程中，表格的长和宽会动态地在Dreamweaver下方的状态栏中显示出来。,标签：辨别和选择表格,表格和单元格的宽度(像素),5.2.2 绘制布局单元格,步骤一：在插入工具栏上的“布局”类别中单击 按钮，该按钮位于工具栏最右边，此时光标变成加号（+）形状。步骤二：将光标放在布局表格中要绘制单元格的位置，按下鼠标左键并拖动，在表格中绘制出布局单元格，如左下图所示。布局单元格只能在布局表格内拖动显示，当鼠标在布局表格外的位子拖动是无法绘制布局单元格的。,步骤三：布

3、局单元格绘制完成后，在插入工具栏上的“布局”类别中单击“标准”按钮，切换到“标准”模式，布局表格变成普通表格，如右上图所示。用户可以在表格中插入各种页面对象。,5.2.3 绘制嵌套布局表格,步骤一：在插入工具栏上的“布局”类别中单击 按钮，光标变成加号（+）形状。步骤二：将光标放在现有布局表格中的空白区域，按下鼠标左键并拖动，在页面上绘制出嵌套布局表格，如下图所示。,5.3 使用标尺与网格(“布局”模式),1、使用标尺,查看”|“标尺”|“显示”,(1)“查看”|“网格”|“显示网格”,2、使用网络,(2)“查看”|“网格”|“网格设置”,(3)单击“确定”按钮应用更改并关闭对话框。,5.3

4、使用标尺与网格(“布局”模式),网格设置,颜色：指定网格线的颜色。,显示网格：选中该复选框可以使网格在“设计”视图中可见。,靠齐到网格：选中该复选框可以使页面对象和网格线靠齐。,间隔：控制网格线的间距。,网格设置,显示网格,5.4 调整布局表格及布局单元格,5.4.1 选择布局表格和布局单元格5.4.2 调整布局表格和布局单元格的大小5.4.3 移动嵌套布局表格和布局单元格 5.4.4 设置布局表格和布局单元格的属性5.4.5 设置列宽度,5.4.1 选择布局表格和布局单元格,单击两次布局表格顶部的标签，当表格边框上出现选择控制点时，该表格处于选中状态。另外，单击表格中的空白区域，也可以选中表

5、格。,单击单元格的边框，边框上出现8个选择控制点，可以确定该单元格处于选中状态。此外，在按住Ctrl键的同时，在单元格中的任意位置单击也可以选中单元格。,5.4.2 调整布局表格和布局单元格的大小,选中布局表格，将光标放在表格的选择控制点上，光标形状变成双向箭头，按下鼠标左键并拖动，可以调整表格的宽度和高度,选中单元格，可以拖动选择控制点来调整单元格的宽度和高度,5.4.3 移动嵌套布局表格和布局单元格,只有嵌套布局表格才能移动。首先选中嵌套表格边缘，然后按下鼠标左键拖动表格到合适的位置。选中嵌套表格后，使用方向键也可以移动表格。每按一次键盘上的方向键，表格就会在相应方向移动1个像素。如果在按

6、住Shift键的同时按一次方向键，表格就会在相应方向移动10个像素。,移动布局单元格和移动嵌套表格的方法。,5.4.4 设置布局表格和布局单元格的属性,1.设置布局表格的属性,布局表格，打开“属性”面板：,固定：将表格设置为固定宽度。,自动伸展：使表格最右边的列自动伸展，以布满屏幕。,高：设置表格的高度（以像素为单位）。,填充：设置单元格内容和单元格边框之间的间隔,间距：设置相邻单元格之间的间隔（以像素为单位）。,清除行高,删除所有间隔图像,使单元格宽度一致,删除嵌套,5.4.4 设置布局表格和布局单元格的属性,2.设置布局单元格的属性,单击布局单元格边缘，显“属性”为：,固定：将单元格设置为

7、固定宽度。,高：设置单元格的高度（以像素为单位）。,背景颜色：设置单元格的背景颜色。,水平：设置单元格内容的水平对齐方式,“左对齐”、“居中对齐”、“右对齐”和“默认”,垂直：设置单元格内容的垂直对齐方式,“顶端”、“居中”、“底部”、“基线”或“默认”,不换行：禁止文字换行。,自动伸展：使单元格自动伸展，以布满屏幕。,5.4.5 设置列宽度,1.使用间隔图像 步骤一：单击列标题菜单，选择“添加间隔图像”命令,步骤二：如果尚未给站点设置间隔图像，将打开“选择占位图像”对话框。,创建一个GIF图像作为间隔图像，并允许用户选择一个存储该间隔图像文件的文件夹。,使用现有的图像文件作为间隔图像,5.4

8、.5 设置列宽度,步骤三：如果选择“创建占位图像文件”单选按钮，将打开“保存间隔图像文件为”对话框，指定间隔图像文件名和存储该文件的文件夹，完成后单击“保存”按钮。如果选择“使用现存的占位图像文件”单选按钮，将打开“选择间隔图像文件”对话框，选择现有的图像文件作为间隔图像，完成后单击“确定”按钮。步骤四：间隔图像插入到列中，该图像是不可见的，列的底部会显示双横线以表明它包含一个间隔图像，如下图。,若要从单个列中删除间隔图像，单击列标题菜单，选择“删除间隔图像”命令。若要从表格中删除所有的间隔图像，单击表格标题菜单，选择“移除所有分隔符图像”命令：,5.4.5 设置列宽度,2.列设置为自动伸展步

9、骤一：单击列标题菜单，选择“列设置为自动伸展”命令。步骤二：如果尚未给站点设置间隔图像，将打开“选择占位图像”对话框，新增了“对于自动伸展表格不要使用间隔图像”单选按钮，选中该选项表示避免向表格中自动添加间隔图像。选择对话框中的某个选项，单击“确定”按钮，完成相应设置。步骤三：自动伸展列的底部出现波浪线。其余列的底部出现双横线，表明自动添加了间隔图像。,若要取消列的自动伸展，单击自动伸展列的标题菜单，选择“列设置为固定宽度”命令即可,5.4.5 设置列宽度,3.列设置为固定宽度步骤一：选择列中的一个单元格，打开“属性”面板。步骤二：选择“固定”单选按钮，在后面的文本框中输入单元格（列）的宽度。

10、当在“布局”模式中设置好布局表格和布局单元格后，就可以在单元格中输入文本或插入其他页面对象了，表格的空白区域不能插入内容。当用户添加宽度大于布局单元格的内容时，该单元格将自动扩展。当单元格扩展时，该单元格所在的列随之扩展，周围单元格的大小也会相应地自动调整。,5.5 设置布局模式的首选参数,“编辑”-“首选参数”-“分类”-“布局模式”,自动插入间隔符：指定是否应该在将列设置为自动伸展时自动插入间隔图像,站点的间隔图像：指定要设置间隔图像的站点。,5.6 框架的使用,5.6.1 关于框架和框架集5.6.2 创建框架和框架集5.6.3 选择框架和框架集5.6.4 保存框架和框架集文件5.6.5

11、设置框架和框架集属性5.6.6 为框架设置链接5.6.7 处理不能显示框架的浏览器,5.6.1 关于框架和框架集,框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分所显示内容无关的HTML文档。框架集是HTML文件，它定义了一组框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面的URL。框架集文件本身不包含要在浏览器中显示的HTML内容，它只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。,5.6.2 创建框架和框架集,1.使用预定义的框架集,法一：文件”-“新建”-“新建文档”-“示例中的页”-“框架集”-“创建”,法二：“插入记

12、录”|“HTML”|“框架”-选择预定义的框架集,5.6.2 创建框架和框架集,法三：“插入”-“布局”-“框架”-选择预定义的框架集,创建好的框架页,5.6.2 创建框架和框架集,2.设计框架集,1)创建框架集：“修改”-“框架集”-选择拆分项,注：如果当前设计视图的框架边框不可见，可通过选择“查看”|“可视化助理”|“框架边框”命令，使框架边框在设计视图中可见。,5.6.2 创建框架和框架集,2)拆分框架：将光标放置在要拆分的框架内，选择“修改”菜单中的“框架集”命令，从子菜单中选择拆分项。要以垂直或水平方式拆分一个框架或一组框架，可将框架边框从设计视图的边缘拖入设计视图的中间。要将不在设

13、计视图边缘的框架边框拆分成一个框架，可在按住Alt键的同时拖动框架边框。要将一个框架拆分成四个框架，可将框架边框从设计视图的一角拖入框架的中间。,5.6.2 创建框架和框架集,单独拆分一个框架，首先选择“窗口”菜单中的“框架”命令，然后在显示的“框架”面板上单击待拆分的框架，再用光标拖动相应框架的边框，此时就可将单独的框架拆分成两部分。,3)删除框架:直接将框架边框拖离页面或拖到父框架的边框上,5.6.3 选择框架和框架集,1.在文档窗口中选择框架和框架集,选择框架：在设计视图中，按住Alt键的同时单击框架内部，这时在框架周围会显示一个选择轮廓,选择框架集：单击框架集的某一内部框架边框，则在框

14、架集周围显示一个选择轮廓。,选择不同的框架或框架集,当前选定内容的同一层次级别选择下一框架（框架集）或前一框架（框架集），按住Alt键的同时按下左箭头键或右箭头键。,要选择父框架集（包含当前选定内容的框架集），在按住Alt键的同时按上箭头键。,要选择当前选定框架集的第一个子框架或框架集,5.6.3 选择框架和框架集,2.在“框架”面板中选择框架和框架集“框架”面板提供框架集内各框架的可视化表示形式，它能够非常直观地显示框架集的层次结构。,在“框架”面板中选择框架集：,在“框架”面板中选择框架：,“窗口”-“框架”,5.6.4 保存框架和框架集文件,1.保存框架集文件和所有带框架的文档“文件”-

15、“保存全部”2.保存框架集文件如果想单独保存框架集文件，可以在“框架”面板或文档窗口中选择框架集，然后选择“文件”菜单中的“保存框架页”或“框架集另存为”命令，将框架集文件另存为新文件。3.保存带框架的文档如果想单独保存在框架中显示的文档，可以将光标放置在目标框架内，然后选择“文件”菜单中的“保存框架”或“框架另存为”命令，将框架中显示的文档另存为新文件。,5.6.4 保存框架和框架集文件,4.改变带框架的文档（1）将光标放置在右框架中。（2）选择“文件”菜单中的“在框架中打开”命令，打开“选择HTML文件”对话框。（3）选择要在右框架中显示的文档，然后单击“确定”按钮，该文档随即显示在框架中

16、。如右图。,5.6.5 设置框架和框架集属性,1框架属性及其设置方法（1）选择框架在文档窗口的设计视图中，按住Alt键的同时单击一个框架；或者选择“窗口”菜单中的“框架”命令，打开“框架”面板，在“框架”面板中单击一个框架。（2）打开“属性”面板选择“窗口”菜单中的“属性”命令，打开“属性”面板，单击右下角的展开箭头，可以查看所有框架属性，如下图所示。,5.6.5 设置框架和框架集属性,（3）命名框架在“框架名称”文本框中输入名称。在这里输入的框架名，将被超链接和脚本引用。命名框架必须符合下列条件：框架名应以字母开头，允许使用下划线（_），但不能使用横杠（-）、句号（。）和空格，不能使用Jav

17、aScript的保留字（例如top或navigator等）（4）设置其他框架属性,源文件,滚动,不能调整大小,边框,边框颜色,边界宽度,边界高度,其他框架属性,5.6.5 设置框架和框架集属性,2.框架集属性及其设置方法（1）选择框架集在文档窗口的设计视图中，单击两框架之间的边框；或者选择“窗口”菜单中的“框架”命令，打开“框架”面板，在“框架”面板中单击框架集边框。（2）打开“属性”面板选择“窗口”菜单中的“属性”命令，打开“属性”面板，单击右下角的展开箭头，可以查看框架集的所有属性，如图5-37所示。,5.6.6 为框架设置链接,步骤一：在设计视图中，选择文本或对象。步骤二：打开“属性”面

18、板，在“链接”文本框中输入要链接的文件名，或者单击文件夹图标选择要链接的文件。步骤三：在“属性”面板的“目标”下拉列表框中，选择显示链接文档的框架或窗口：,_parent：在显示链接的框架的父框架集中打开链接文档，同时替换整个框架集。,_blank：在新的浏览器窗口中打开链接文档，同时保持当前窗口不变,_self：在当前框架中打开链接文档，同时替换该框架中的内容。,_top：在当前浏览器窗口中打开链接文档，同时替换所有框架。,5.6.7 处理不能显示框架的浏览器,步骤一：选择“修改”|“框架页”|“编辑无框架内容”命令，此时Dreamweaver将清除设计视图中的内容，并且在设计视图顶部显示“

19、无框架内容”字样。步骤二：在文档窗口中，像处理普通文档一样输入或插入内容，如右下所示。或者选择“窗口”菜单中的“代码检查器”命令，将光标置于noframes标签中的body标签之间，然后输入内容的HTML代码。,步骤三：再次选择“修改”|“框架页”|“编辑无框架内容”命令，返回到框架集文档的普通视图中。,习题,5-1、请简述布局视图的功能。5-2、请简述添加间隔图像的作用。5-3、请简述调整布局表格大小的方法。5-4、什么是框架和框架集？5-5、保存框架和框架集文件的方法是什么？,实习,嵌套使用“顶部框架”和“布局表格”两种布局，设计“我的网站”。设网页结构及其布局如图：,页面宽高可用“标尺”上像素个数确定；超出屏幕的部分可用下边的“抓手工具”拖动查看。,The End,