网页布局.pptVIP

第3章 网页布局 学习目标 理解网页布局的原理 掌握用表格（普通表格、布局表格）进行布局的方法 掌握特殊表格的制作方法 掌握用层进行布局的方法 掌握用框架进行布局的方法 3.1 布局的实质 布局: 就是在页面上划分出不同的区域，按照设计的原则和方法，把不同的内容放置到不同的位置上，并通过色彩调和出不同的网站基调，使网页内容形成一个有机的整体，充分表达网站主题的过程。 布局的实质 :表格 3.2 利用表格布局 3.2.1插入表格 1．设置页面属性 在插入页面内容前，一般先设置好页面的大小和页边距等属性，以达到最佳显示效果。 2．插入表格 在插入面板中选择“常用”标签，点击按钮，弹出 “插入表格”对话框，设置相应的参数来插入表格。也可以通过选择“【插入】→【表格】”菜单命令打开“插入表格”对话框。 单元格边距：单元格边框和单元格内容的间隔距离。 单元格间距：单元格和单元格之间的间隔距离。 页眉：把表格的第一行或第一列作为标题行或标题列 作为标题行或标题列的行或列的内容将以粗体的形式显示。 标题：提供一个显示在表格外的表格标题。 对齐标题：指定表格标题相对于表格的显示位置。 摘要：给出表格的说明。该文本不会显示在用户的浏览器中。 3.2.2 表格的属性设置 1.边框、填充、间距 （1）边框 一个“一行一列”的表格，至少有两个边框，表格外边框和单元格边框。边框颜色只有当边框值设置为非零值时才能显示。当未指定单元格边框颜色时，Dreamweaver会以表格的外边框颜色作为单元格的边框颜色。 （1）选择 选中一个单元格 选中一行 选中一列 选中不相邻的单元格 （2）拆分 （3）合并 和拆分相对，当我们插入的内容需要跨越多个单元格时，我们需要把这些单元格合并起来。 （4）行、列的插入与删除 插入行、列 删除行、列 4．表格、单元格的大小调整 （1）设置表格大小 （2）设置单元格大小 5．表格的嵌套 （1）拆分单元格 （2）插入左表格 （3）插入右表格 （4）设置表格的对齐方式 6．表格的背景图片和背景颜色 （1）设置页脚表格属性 （2）插入背景图片 （3）输入内容 （4）设置背景颜色 3.2 利用表格布局 3.2.3 利用“布局表格”布局网页 在Dreamweaver MX 2004中，默认的视图为标准视图。在插入面板中选择“布局”标签，点击“布局视图”按钮就可以切换到布局视图模式。 1．设置页面属性 2．绘制布局表格、布局单元格 （1）绘制布局表格 （2）绘制布局单元格 （3）绘制嵌套表格 3．布局表格和布局单元格的操作 （1）选择布局表格、布局单元格 （2）添加页面内容 （3）改变布局表格、布局单元格的大小 （4）移动布局表格、布局单元格 4．设置布局表格和布局单元格的格式 选中需设置属性的布局表格（单元格），出现如图所示的属性面板。 自动伸展：布局表格或布局单元格的宽度会自动适应页面的宽度。 水平：页面内容在布局单元格内的水平对齐方式。 垂直：页面内容在布局单元格内的垂直对齐方式。 背景颜色：布局表格或布局单元格的背景颜色，可以选择颜色，或输入颜色的16进制值，或输入16种预定义颜色的名称，如“red”，“blue”，“black”，“yellow”，“gray”等。 不换行：勾选此复选框，在布局单元格中输入的内容不会换行；不勾选，单元格中输入的内容将自动换行。 3.3 特殊表格布局 1．实例创意 该实例用横竖分隔线制作一个简约的诗词欣赏页面，名称是“诗词欣赏”。通过大量的留白和简约的布局营造一种高雅的格调。实例效果所示。 2．制作步骤 （1）启动Dreamweaver，定义站点根目录。 （2）插入表格 （3）设置表格属性 （4）制作横竖分隔线 （5）插入内容 3.3.2 实例2：细线表格的制作 3.3.3 实例3：立体表格的制作 3.4 用层进行布局 3.4.1 创建层 1．创建独立的层 插入层的方法有2种，一种是通过菜单创建，一种是通过插入面板创建。 2．创建嵌套层 在图层中可以放置网页中的任何元素，因此在层中可以包含其他层，称为层的嵌套。嵌套的层成为父层，被嵌套的层成为子层。在“层”浮动面板中可以清晰查看层与层之间的嵌套关系。 3.4.2 操作层 1．选中层 2．缩放层 当层的尺寸大于层中的页面内容尺寸时，我们可以缩放层的大小以使二者匹配。 3．移动层 层最大的特点就是可以自由移动，因此我们可以移动层的位置来布局层中的内容。 由于层在页面中是可以自由放置的，因此在移动时层是可以相互堆叠和遮挡的。有时在进行页面布局时需要将页面内容完整显示出来，这时需要使层禁止重叠。 3.4.3层的属性设置 高、宽：设置层的高度和宽度，