网页设计教程.ppt

第3章表格学习目标掌握用表格（普通表格、布局表格）制作修改表格属性掌握特殊表格的制作方法3.2利用表格3.2.1插入表格1．设置页面属性在插入页面内容前，一般先设置好页面的大小和页边距等属性，以达到最佳显示效果。2．插入表格在插入面板中选择“常用”标签，点击按钮，弹出“插入表格”对话框，设置相应的参数来插入表格。也可以通过选择“【插入】→【表格】”菜单命令打开“插入表格”对话框。单元格边距：单元格边框和单元格内容的间隔距离。单元格间距：单元格和单元格之间的间隔距离。页眉：把表格的第一行或第一列作为标题行或标题列 作为标题行或标题列的行或列的内容将以粗体的形式显示。标题：提供一个显示在表格外的表格标题。对齐标题：指定表格标题相对于表格的显示位置。摘要：给出表格的说明。该文本不会显示在用户的浏览器中。3.2.2表格的属性设置1.边框、填充、间距（1）边框一个“一行一列”的表格，至少有两个边框，表格外边框和单元格边框。边框颜色只有当边框值设置为非零值时才能显示。当未指定单元格边框颜色时，Dreamweaver会以表格的外边框颜色作为单元格的边框颜色。（1）选择选中一个单元格选中一行选中一列选中不相邻的单元格（2）拆分（3）合并和拆分相对，当我们插入的内容需要跨越多个单元格时，我们需要把这些单元格合并起来。（4）行、列的插入与删除插入行、列删除行、列4．表格、单元格的大小调整（1）设置表格大小（2）设置单元格大小3.表格的嵌套（1）拆分单元格（2）插入左表格（3）插入右表格（4）设置表格的对齐方式6．表格的背景图片和背景颜色（1）设置页脚表格属性（2）插入背景图片（3）输入内容（4）设置背景颜色3.2利用表格布局3.2.3利用“布局表格”布局网页在DreamweaverMX2004中，默认的视图为标准视图。在插入面板中选择“布局”标签，点击“布局视图”按钮就可以切换到布局视图模式。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-2-1“插入表格”对话框行数：新插入的表格的行数，可以更改数值来确定行数。列数：新插入的表格的列数，可以更改数值来确定列数，行、列数控制表格划分的区域个数（行×列）。表格宽度：表格的宽度可以选择是占页面宽度的百分比（单位为百分比）或者固定尺寸（单位为像素）。边框粗细：表格的边界宽度，单位为像素，表格的属性设置中将详细讲解边框、填充值和间距值的区别。图3-2-3（2）间距表格边框和单元格边框之间的距离或单元格边框与单元格边框之间的距离称为间距。（3）填充单元格边框和单元格内容之间的距离称为单元格填充，即单元格边距。2．表格的对齐方式3．单元格的操作（选择、拆分、合并