第3章 节 　表格和布局表格 实战Dreamweaver8网页制作教程电子教案.pptVIP

学习目标;3.1　表格的建立和编辑 3.2　表格在页面布局中的应用 3.3　布局表格的设置与应用;3.1　表格的建立和编辑;3.1　表格的建立和编辑;需要注意的是下面的设置项目： “表格宽度”的单位可以是百分比或像素。如果是百分比，则可分 为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口 而言；如果是嵌套表格，则百分比相对的是嵌套表格所在的单元格 宽度。 “边框粗细”设定表格边框的宽度，单位为像素。 “单元格边距”为表格内容和边框之间的空白区域，单位为像素。 “单元格间距”为单元格之间的距离，单位为像素。 ;3.1　表格的建立和编辑;3.1　表格的建立和编辑;3.1　表格的建立和编辑;3.1　表格的建立和编辑;3.1　表格的建立和编辑;3.1　表格的建立和编辑;3.1　表格的建立和编辑;3.2　表格在页面布局中的应用;3.2　表格在页面布局中的应用;2.表格的叠加 当使用表格进行排版定位时，整个网页的结构都应用表格，而不能仅局部使用表格。由于浏览器解析网页时，是将整个表格的结构下载完毕之后才显示表格。表格过大、过于复杂，影响浏览下载速度。我们可以将复杂的表格拆分成上下叠加各自独立的表格，每个表格中再嵌套表格。这样在布局网页时既减轻难度，增加了灵活性，又加快了浏览下载速度。下图所示的网页结构就是采用表格的嵌套和叠加技术实现的。;3.利用marquee/marquee标记符设置跑马灯效果 基本语法： marquee文字或图片/marquee 该语法只适用于IE浏览器中显示，只能在body标记中使用。作用是实现标记中的内容在页面中移动的效果。;3.2　表格在页面布局中的应用;3.2　表格在页面布局中的应用;3.3　布局表格的设置与应用;3.3　布局表格的设置与应用;3. 绘制布局表格和布局单元格 在“插入”面板的“布局”选项卡中单击“布局”按钮，进入布局视图模式。绘制布局表格时，单击“插入”面板上的布局表格按钮；绘制布局单元格时，单击“插入”面板上的绘制布局单元格按钮，光标变为十字形状。将鼠标放置在要绘制表格的区域，拖动鼠标绘制出所??的布局表格和布局单元格。布局表格的外框为绿色，左上角显示标签名称“布局表格”，其尺寸在表格下部显示。布局单元格的外框为蓝色。;4. 绘制嵌套表格 创建嵌套表格的绘制顺序为先绘制外部的表格，再绘制内部的嵌套表格。创建嵌套表格的步骤是： 在布局视图中，单击“布局表格”按钮，在页面中绘制出布局表格。再单击“布局表格”按钮，在已有的表格中绘制表格，形成嵌套表格。 5. 在单元格中添加内容 在布局单元格中可以插入任何类型的数据。在插入时，把光标移到要插入内容的单元格中，然后输入数据。在输入数据时，布局单元格的宽度会随着输入数据的长度而变化。在输入数据时，只能向布局单元格中输入数据，而不能向布局表格中输入数据。 ;3.1　表格的建立和编辑;6. 选择布局表格、布局单元格 选择布局单元格的方法：用鼠标单击单元格外框，当单元格外框出现8个控制点时即被选中。或按住Ctrl键后在单元格的任意位置单击鼠标，也可选中单元格。 选择布局表格的方法：用鼠标单击表格标签，当表格外框出现控制点时即被选中。 7. 调整布局表格、布局单元格大小 首先选中要改变大小的表格或单元格，用鼠标拖动控制点即可改变大小。 8. 移动布局表格、布局单元格 用户可以随意移动位于布局表格中的布局单元格和嵌入的布局表格。首先选中要移动的对象，将鼠标移到对象边缘，出现指针图标后，按下鼠标将其拖拽到新的位置即可。也可以使用方向键移动，每按一次方向键，移动1个像素的距离；如果按住Shift键，每按一次方向键，移动10个像素的距离。 ;9. 清除单元格高度 当在单元格中插入内容后，如果单元格的大小与所插入的内容不太匹配时，可以通过清除行高命令让单元格的高度匹配插入的内容。 清除单元格高度的步骤为：选中单元格所在的表格，点击属性面板中的清除行高按钮；或点击表格上端的列标题上的按钮，打开列标题菜单，选择“清除所有高度”命令，如图所示，单元格的高度会随着单元格内容而变化。;10.设置布局表格和布局单元格属性 ( 1）设置布局表格属性 “固定”：将表格设置为固定宽度 “自动伸展”：将表格设置为自动伸展 “高”：输入以像素为单位的数值，设置布局表格的高度 “填充”：设置表格中单元格内容与边界之间的距离 “间距”：设置表格中单元格之间的距离 清除行高按钮：清除布局表格中单元格的显示高度 使单