专题2 表格、模板及DIV页面布局与排版（课件）-《网页设计与制作》（电子工业出版社）高考备考讲练测(山东省)

专题二、表格、模板及DIV页面布局与排版 网页设计与制作课程 专题复习讲练测 考纲要求 1、掌握表格的创建、编辑等基本操作。 2、掌握使用表格布局页面的方法与技巧。 3、理解模板的概念及作用。 4、掌握使用模板文档统一网页风格和布局的方法。 5、掌握Div基本操作、属性设置及在排版中的应用方法。 知识点梳理 一 第一讲 表格布局 知识点一 表格组成 表格布局是目前最常见的网页布局方式之一 一、 表格的组成 表格由行和列组成 每行或每列又由单元格组成 当将某行或某列设为标题行或标题列后， 默认情况下，标题单元格中的内容将自动加粗并居中显示。 单元格间距，指的是单元格和单元格之间的距离。 单元格边距(也称为填充)，指的是单元格中的内容与单元格边框之间的距离。 知识点梳理 一 第一讲 表格布局 知识点二 创建表格 创建表格（3种） (1)将光标定位到要插入表格的位置 (2)执行以下操作之一，打开“表格”对话框。 方法一：选择菜单“插入→表格”命令。 方法二：单击“插入”面板“常用”类别中的“表格”按钮。 方法三：按【Ctrl+Alt+T】组合键。 (3)在“表格”对话框中进行相应设置，单击“确定”按钮，即可创建一个表格。 注意： 设置表格宽度时，其单位可以选择像素或百分比。当单位为像素时，表格的宽度时一个绝对值；当单位为百分比时，表格的宽度则为一个相对值，大小会随父元素的改变而改变。 知识点梳理 一 第一讲 表格布局 知识点二 创建表格 2、表格对话框设置： “行数”和“列”——设置表格的行数和列数。 (rowspan) (colspan) 像素：绝对值 px “表格宽度”——设置表格的宽度，单位 (width) 百分比：相对值，大小会随其父元素的改变而改变。 “边框粗细”——设置表格边框宽度（单位像素）。浏览不显示表格边框，值设置为0。(border) “单元格边距”——设置单元格内容和单元格边框之间的距离（以像素为单位）。(cellpadding) “单元格间距”：设置相邻单元格之间的距离（以像素为单位）。(cellspacing) “标题”选项组：系统提供了4种选择(无、左、顶部、两者)，用来设置标题单元格的位置。 “标题”：用来设置整个表格的标题，标题将显示在表格的外部。 知识点梳理 一 第一讲 表格布局 知识点二 创建表格 3、创建嵌套表格 在已有表格的某单元格中插入新的表格 提示： (1)嵌套层数最多不要超过3层，嵌套层数越多，浏览网页时下载时间越长。 (2)创建表格时，若没有明确值，大多数浏览器按边框粗细和单元格边距为1，单元格间距为2来显示表格。 (3)创建表格时，最外层表格宽度单位最好采用像素，嵌套表格宽度单位采用百分比，这样能够让其跟随所在单元格大小的改变而改变。 800*600分辨率下表格宽度最大778像素。 (4)为防止浏览过程中出现水平方向的滚动条， 1024*768分辨率下表格宽度最大1002像素。 (5)设置空白—让浏览器根据单元格的内容以及其他行和列的宽和高确定适当的宽度和高度。 知识点梳理 一 第一讲 表格布局 1、选择整个表格 （7种） 单击表格的边框线。 将光标定位到表格中，在标签选择器中单击<table>标签。 鼠标移到表格左上角或边框线附近敏感区域，当右下角出现缩略图时，单击鼠标左键。 将光标定位到表格中，选择菜单“修改→表格→选择表格”命令。 将光标定位到表格中，在“表格标题”菜单中选择“选择表格”命令。 将光标定位到表格中，按两次【Ctrl+A】组合键。（按3次【Ctrl+A】，选择网页中所有元素） 将光标定位到表格中，单击鼠标右键，弹出选择菜单“表格→选择表格”命令 知识点三 选择表格 知识点梳理 一 第一讲 表格布局 2、选择行 （3种） 直接用鼠标拖动选中该行中的所有单元格。 将光标定位到要选择行的某个单元格中，在标签选择器中单击<tr>标签。 将鼠标指向要选择行的左边缘，当鼠标指针变为右箭头“→”时，单击鼠标左键。 3、选择列 （3种） 直接用鼠标拖动选中该列中的所有单元格。 将鼠标指向要选择列的上边缘，当