第3章 网页布局　.pptVIP

第3章 网页布局;学习目标;3.1 布局的实质;3.2 利用表格布局;图3-2-1 “插入表格”对话框 ;单元格边距：单元格边框和单元格内容的间隔距离。 单元格间距：单元格和单元格之间的间隔距离。 页眉：把表格的第一行或第一列作为标题行或标题列 作为标题行或标题列的行或列的内容将以粗体的形式显示。 标题：提供一个显示在表格外的表格标题。 对齐标题：指定表格标题相对于表格的显示位置。 摘要：给出表格的说明。该文本不会显示在用户的浏览器中。;3.2.2 表格的属性设置;（2）间距 表格边框和单元格边框之间的距离或单元格边框与单元格边框之间的距离称为间距。 （3）填充 单元格边框和单元格内容之间的距离称为单元格填充，即单元格边距。 2．表格的对齐方式 3．单元格的操作 （选择、拆分、合并、行或列的插入与删除）;（1）选择 选中一个单元格 选中一行 选中一列 ???中不相邻的单元格 （2）拆分;（3）合并 和拆分相对，当我们插入的内容需要跨越多个单元格时，我们需要把这些单元格合并起来。 （4）行、列的插入与删除 插入行、列 删除行、列 4．表格、单元格的大小调整 （1）设置表格大小 （2）设置单元格大小;5．表格的嵌套 （1）拆分单元格 （2）插入左表格 （3）插入右表格 （4）设置表格的对齐方式 6．表格的背景图片和背景颜色 （1）设置页脚表格属性 （2）插入背景图片 （3）输入内容 （4）设置背景颜色;3.2 利用表格布局;1．设置页面属性 2．绘制布局表格、布局单元格 （1）绘制布局表格 （2）绘制布局单元格 （3）绘制嵌套表格 3．布局表格和布局单元格的操作 （1）选择布局表格、布局单元格 （2）添加页面内容 （3）改变布局表格、布局单元格的大小 （4）移动布局表格、布局单元格 ;4．设置布局表格和布局单元格的格式;自动伸展：布局表格或布局单元格的宽度会自动适应页面的宽度。 水平：页面内容在布局单元格内的水平对齐方式。 垂直：页面内容在布局单元格内的垂直对齐方式。 背景颜色：布局表格或布局单元格的背景颜色，可以选择颜色，或输入颜色的16进制值，或输入16种预定义颜色的名称，如“red”，“blue”，“black”，“yellow”，“gray”等。 不换行：勾选此复选框，在布局单元格中输入的内容不会换行；不勾选，单元格中输入的内容将自动换行。;3.3 特殊表格布局;2．制作步骤 （1）启动Dreamweaver，定义站点根目录。 （2）插入表格 （3）设置表格属性 （4）制作横竖分隔线 （5）插入内容 3.3.2 实例2：细线表格的制作 3.3.3 实例3：立体表格的制作 ;3.4 用层进行布局;3.4.2 操作层;3.4.3层的属性设置;高、宽：设置层的高度和宽度，单位为像素。 背景图像：设置层的背景图像，单击右边的文件夹图标可以选择图片的来源。 背景颜色：设置层的背景颜色。 显示：指定层最初是否可见，共有4种模式可以设置。 Default（默认）：大多数浏览器都默认为“inherit”属性。 Inherit（继承）：使用该层的父层的可见性属性。 Visible（可见）：总是显示层的内容。 Hidden（隐藏）：隐藏层中的内容。 溢出：当层所包含的内容尺寸大于层本身的尺寸时，多余的部分在浏览器中怎么显示。 剪辑：设置层的可见区域的大小。;3.4.4层和表格的转换;最精确：选择此项，为每一个层创建一个单元格，并保留层之间的空隙所必需的任何单元格。 最小：如果层之间的距离在指定数目的像素范围内，层会自动对齐。即转换成表格后，保留层之间的间隙所需的空白单元格将被合并掉，因此可能不与您的布局精确匹配。 使用透明GIF：用透明的GIF图像填充表的最后一行。这将确保该表在所有浏览器中都以相同的列宽显示。 置于页面中央：将转换的表格放在页面的中央。;2．表格转换为层 选中需要转换成层的表格，选择“【修改】→【转换】→【表格到层】”菜单命令，打开如图所示的“转换表格为层”对话框。;防止层重叠。选择此项，可以在建立，移动和调整层大小时防止层互相重叠。 显示层面板。选择此项，转换后将显示层面板。 显示网格，靠齐到网格。选择此项，转换后页面将显示网格，并启用吸附功能，使层对齐到网格。;3.5 用框架进行布局;3.5.1创建框架;3.5.2框架的基本操作;框架最终效果图 ;3．框架与框架集的保存 在浏览器中预览框架效果前，必须先保存框架集文件。一个框架集包含多个框架，每个框架区域包含一个独立的网页文档，因此，在保存框架网页时，必须将所有文档都保存下来。 选择“【文件】→【保存全部】”菜单命令，如果整个框架网页从未保存过，将弹出【保存为】对话框，并在文档窗口中框架集的四周都显示粗边框，表明首先保存的是框架集文件。然后每保存一个框