1004-网页设计课件.ppt

上海理工大学计算机基础教研室;网页布局;学习目标; 1.布局的实质; 表格是现代网页制作的一个重要组成部分，表格是最常用页面布局元素，制作网页经常借助表格进行排版。在表格布局方面，表格可谓起着举足轻重的作用，通过设置表格及单元格的属性，对页面中的元素进行准确定位，表格既能够有序排列数据，又能够对页面进行更加合理地布局。灵活地使用表格的背景、框线等属性可以得到更加美观的效果。; 表格的介绍;2??表格的基本操作;“常用”插入工具栏;理解单元格，表格，间距，填充，边框。;行数：新插入的表格的行数，可以更改数值来确定行数。 列数：新插入的表格的列数，可以更改数值来确定列数，行、列数控制表格划分的区域个数（行×列）。 表格宽度：表格的宽度可以选择是占页面宽度的百分比（单位为百分比）或者固定尺寸（单位为像素）。 边框粗细：表格的边界宽度，单位为像素，表格的属性设置中将详细讲解边框、填充值和间距值的区别。;单元格边距：单元格边框和单元格内容的间隔距离。 单元格间距：单元格和单元格之间的间隔距离。 标题：提供一个显示在表格外的表格标题。 对齐标题：指定表格标题相对于表格的显示位置。 摘要：给出表格的说明。该文本不会显示在用户的浏览器中。;1）边框、填充、间距 边框 一个“一行一列”的表格，至少有两个边框，表格外边框和单元格边框。边框颜色只有当边框值设置为非零值时才能显示。当未指定单元格边框颜色时，Dreamweaver会以表格的外边框颜色作为单元格的边框颜色。;　理解表格、单元格：;2??表格的基本操作;;;;2、调整行和列的宽度 ;2.4 设置表格和单元格的属性 1.设置表格属性 ;2.4 设置表格的属性 1.在标签检查器中设置表格和单元格属性 ;“插入行或列” 对话框;删除行或列 ? 单击要删除的行或列中的一个单元格，然后选择“ 修改”“ 表格”“ 删除行” 或“ 修改”“ 表格”“ 删除列”。 ? 选择完整的一行或列，然后选择“ 编辑”“ 清除” 或按 Delete;使用属性检查器添加或删除行或列 1 选择表格。 2 在属性检查器（“ 窗???”“ 属性”）中，执行下列操作之一： ? 若要添加或删除行，请增加或减小“ 行” 值。 ? 若要添加或删除列，请增加或减小“ 列” 值。 注： 当删除包含数据的行和列时， Dreamweaver 不发出警告。;2??表格的基本操作;2??表格的基本操作;2??表格的基本操作;2??表格的基本操作;2??表格的基本操作;2??表格的基本操作;3??网页的页面布局 ;3??网页的页面布局 ;3??网页的页面布局 ;3??网页的页面布局 ;3??网页的页面布局;3??网页的页面布局;3??网页的页面布局;3??网页的页面布局;3??网页的页面布局;四、表格布局要领 完全下载一个表格的内容，才能在IE中显示出来。 如果页面文件小，可以只有一个表格放内容。 如果页面文件很大，则从上到下放几个宽度相同的表格，分别放不同的内容，如图所示;4??使用表格的其他视图 ;A. 标准模式下的表格;5??表格标签;表格table标签的属性 ;表格的边框显示状态 frame 表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态 语法格式：table frame=边框显示值 ;四、 设置分隔线的显示状态 rules 语法格式：table rules=值 ;五、 表格行的设定;六、 单元格的设定;谢谢