《网页设计与制作》教案-第7讲-布局技术之一-表格一.doc

1、第7讲 布局技术之一-表格一 1.1教学目标：u 知识目标1. 掌握表格的基本操作2. 掌握表格各项属性设置的作用u 技能目标能合理运用表格进行页面布局，能合理设置表格属性u 品质目标培养学生认真细致、踏实进取的精神1.2教学重点：掌握表格的插入和表格属性的设置。1.3 教学难点理解表格进行页面布局的好处和表格各属性的作用。1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创

2、作意识。1.7教学过程：一、激趣导入，揭示课题表格是网页设计制作时不可缺少的重要元素。无论是用于对齐数据还是在页面上对文本进行排版，表格都体现出强大的功能。它以简洁明了和高效快捷的方式将数据、文本、图像、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。对于使用表格绘制页面布局，而非着重文字数据编排的设计来说，手动绘制表格布局是最佳方法，虽然这种方法极其容易建立表格，但不容易掌握尺度，因为其手动操作的特性，所以非常适合于制作网页版面，但对于内容的编排，就不如标准模式的标准那么方便。标准表格是表格应用的另一种方法，它以几行几列的方式插入到页面，然后将图像、文字等内容插入表格，即可定位和编排

3、这些内容。二、使用表格在Dreamweaver MX 2004中，可以导入外部数据文件，还可以将网页中的数据表格导出为纯文本的数据文件。表格的格式控制能力使设计者可以使用表格来构造网页的框架。先用较大的表格对网页的版面进行大致的控制，再使用嵌套的表格对细节进行刻画。使用表格排版的页面在不同的平台、不同的分辨率的浏览器里都能保持布局，所以表格是网页中常用的版面控制和制作模板的强有力的工具。0.1插入表格Dreamweaver MX 2004提供了强大的工具进行表格编辑，使网页设计者可以对几乎所有的表格属性进行控制。1. 在页面中插入表格，步骤如下：1) 在“文档”窗口的“设计”视图中，将插入点放

4、在需要表格出现的位置。 若文档是空白的，则只能将插入点放置在文档的开头。2) 选择“插入/表格”命令或 在“插入”栏的“常用”类别中，单击“表格”按钮。 此时弹出“插入表格”对话框指定相应选项，如图2-64所示。图2-64插入表格对话框l 行数：确定表格具有的行的数目。l 列数：确定表格具有的列的数目。l 表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。l 边框粗细：指定表格边框的宽度（以像素为单位）。l 单元格边距确定单元格边框和单元格内容之间的像素数。l 单元格间距确定相邻的表格单元格之间的像素数。在“页眉”部分定义表头样式 ：无、左侧、顶部。在“辅助功能”部分指定以下选

5、项： 标题、对齐标题、摘要。3) 设置完成后单击“确定”。 表格即出现在文档中。如图2-65所示，我们插入了一个3行4列，宽度为80%，边框为1的表格，无表头，标题字为Dreamweaver，对齐方式为默认。图2-65插入表格在默认状态下，表格宽度是75%，这个比例是相对于网页大小而言的。如果要精确地指定表格宽度的话，可以选择“像素”作为表格的宽度单位。2. 选择表格元素要对表格进行编辑，首先要选择编辑的对象。可以一次选择整个表、行或列。也可以选择一个或多个单独的单元格。一旦选择了表格就可以通过属性检查器设置其属性。1) 选取整个表格可以使用以下几种方法一次选择整个表格：l 单击表格的左上角、

6、表格的顶边缘或底边缘的任何位置或者行或列的边框。 l 单击某个表格单元格，然后在“文档”窗口左下角的标签选择器中选择 标签。 l 单击某个表格单元格，然后选择“修改/表格/选择表格”。 l 在表格内右击鼠标，在弹出的快捷菜单的“表格”子菜单中选择 “选择表格”命令l 当光标在表格中时，打开“编辑”菜单，执行两次“全选”命令。l 将光标放在表格中的单元格内，连续按两次“Ctrl+A”，可以快速选择整个表格。 所选表格的下边缘和右边缘出现选择柄。 如图2-66所示。图2-66选中的表格2) 选择行或列用以下方法可以选择行或列。l 若要选择整行，用鼠标指向该行的右侧单元格边框，当指针形状变成 时单击

7、鼠标就可以选择该行；若要选择整列，用鼠标指向该列顶端单元格的上边框，当指针形状变成 时，单击鼠标就可以选中该列。如图2-67所示。图2-67用鼠标选择一列l 将鼠标定位在行或列的起始单元格中，沿着一行或列中所有的单元格进行单击并拖动。3) 选择单元格可以选择单个单元格、一行单元格或单元格块或者不相邻的单元格。选择单个单元格：单击单元格，然后选择“编辑/全选”命令或按住 Ctrl 键单击该单元格。 选择一行或矩形的单元格块：在单元格中任何位置单击，并且拖动鼠标至另一个单元格。 或者单击一个单元格，在同一个单元格中按住 Ctrl 键的同时单击以选中它，然后按住 Shift 键单击另一个单元格。 这

8、两个单元格定义的直线或矩形区域中的所有单元格都将被选中。 如图2-68所示。图2-68选择单元格若要选择不相邻的单元格：在按住 Ctrl键的同时单击要选择的单元格、行或列。 如果按住 Ctrl 键单击尚未选中的单元格、行或列，则会将其选中。如果它已经被选中，则再次单击会将其从选择中删除。0.2设置表格属性1. 设置表格属性在表格的外框单击，可以选择表格。利用属性检查器可以设置整个表格的属性。如图2-69所示。此属性检查器允许设置表格的各项属性。图2-69显示表格属性l 表格 Id：可以设置表格的名称。l 行和列：是表格中行和列的数目。l 宽和高：是以像素为单位或按占浏览器窗口宽度的百分比计算的

9、表格宽度和高度。l 填充：是单元格内容和单元格边框之间的像素数。l 间距：是相邻的表格单元格之间的像素数。若没有明确指定单元格间距和单元格边距的值，则大多数浏览器按填充设置为 1，间距设置为 2 显示表格。若要确保浏览器不显示表格中的边距和间距，则将“填充”和“间距”设置为 0。l 对齐：确定表格相对于同一段落中其他元素（例如文本或图像）的显示位置。 l 边框指定表格边框的宽度（以像素为单位）。图2-70显示虚拟边框l 清除列宽和清除行高：从表格中删除所有明确指定的列宽和行高。l 将表格宽度转换成像素按钮和将表格高度转换成像素按钮：将表格的宽度或高度设置为以像素为单位的当前宽度。l 将表格宽度

10、转换成百分比按钮和将表格高度转换成百分比按钮：将表格的宽度或高度设置为按占“文档”窗口宽度百分比表示的当前宽度）。l 背景颜色：设置表格的背景颜色。 l 边框颜色：设置表格边框的颜色。 l 背景图像：设置表格的背景图像。2. 设置单元格属性在单元格的任意地方单击鼠标左键，在属性检查器上会显示当前单元的属性，如图2-71所示。此属性检查器允许设置表格的各项属性。图2-71显示单元格属性l 水平：指定单元格、行或列内容的水平对齐方式。可以将内容对齐到单元格的左侧、右侧或使之居中对齐，也可以指示浏览器使用其默认的对齐方式（通常常规单元格为左对齐，标题单元格为居中对齐）。l 垂直：指定单元格、行或列内

11、容的垂直对齐方式。可以将内容对齐到单元格的顶端、中间、底部或基线，或者指示浏览器使用其默认的对齐方式（通常是居中对齐）。l 宽和高：是以像素为单位或按占整个表格宽度或高度百分比计算的所选单元格的宽度和高度。l 背景：在文本框内输入单元格、列或行的背景图像的文件名。或单击文件夹图标浏览到某个图像，或使用“指向文件”图标选择某个图像文件。l 背景颜色：使用颜色选择器选择的单元格、列或行的背景颜色。l 边框：设置单元格的边框颜色。l 合并单元格按钮：可以将所选的单元格、行或列合并为一个单元格，只有当单元格形成矩形或直线的块时才可以合并这些单元格。l 拆分单元格按钮：可以将一个单元格分成两个或更多单元

12、格。一次只能拆分一个单元格；如果选择的单元格多于一个，则此按钮将禁用。l 不换行：勾选该复选框可以防止换行，从而使给定单元格中的所有文本都在一行上。l 标题：勾选该复选框，可以将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中。 0.3编辑表格在插入表格时，我们可能对表格的行数、列数和样式等没有确切的预计，我们根据需要对表格进行编辑。1. 添加行和列用以下方法可以添加一行或一列：l 将光标定位在单元格中，选择“修改/表格/插入行”或“修改/表格/插入列”命令。可在该单元格的上面或后面添加一行或一列。l 将光标定位在单元格中，选择“插入/表格对象/在上/下面插

13、入行”或“插入/表格对象/在左/右边插入列”命令。可在该单元格的相应位置插入行或列。l 将光标定位在单元格中，单击鼠标右键，在弹出的快捷采单中选择“表格/插入行”或“表格/插入列”命令，可以在相应位置添加一行或一列。l 将光标定位在表格中的最后一个单元格中，按下Tab键，可在当前行下添加一行。l 用以下方法可以添加多行或多列：l 将光标定位在单元格中，选择“修改/表格/插入行或列”命令，弹出“插入行或列”对话框。如图2-72所示。图2-72插入行或列对话框此对话框允许将一或多行或列插入到表格中。根据需要设置要插入的是行还是列，及需插入的行数或列数，并指定需要插入的位置。l 也可以选中整个表格，

14、在属性检查器中重新指定行数和列数。如图2-73所示。图2-73显示表格属性2. 删除行和列若要删除某行或列，可在行和列中单击鼠标右键打开快捷菜单，选择“表格/删除行”或“表格/删除列”命令，可以将整行或整列从表格中删除。或者在表格中选中需要删除的一整行或一整列，然后按Delete键进行删除。当删除包含数据的行和列时，Dreamweaver 不发出警。3. 合并/拆分单元格在网页设计过程中可能会按照不同的版面需要将单元格合并、拆分或其他操作。如图2-74所示为合并单元格前后的表格。若单个单元格的内容放置在最终的合并单元格中。合并前第一个单元格的属性将应用于合并的单元格。 图2-84合并单元格前后

15、的表格用以下方法可以拆分单元格，弹出如图2-75所示拆分单元格对话框。图2-75拆分单元格对话框中“把单元格拆分”选项区中选择“行”，表示水平拆分单元格；选择“列”表示垂直拆分单元格。在下面的文本框内输入数字，指定拆分的数目。如图2-76所示为垂直拆分单元格前后的表格。 图2-76拆分单元格前后的表格4. 增加或减少单元格所跨的行或列的数目选中某个单元格。 执行“修改/表格/加行宽”或“修改/表格/增加列宽”命令，可以增加单元格所跨的行数；执行“修改/表格/减少行宽”或“修改/表格/减少列宽”命令，可以减少单元格所跨的行或列的数目。5. 复制、粘贴和删除单元格用户可以一次对单个表格单元格或多个

16、单元格进行复制、粘贴或删除删除操作，既可以选择在复制和粘贴时保留单元格的格式设置，也可以选择仅对单元格的内容进行操作。用户可以在插入点或替换现有表格中的所选部分粘贴单元格。若要粘贴多个表格单元格，剪贴板的内容必须和表格的结构或表格中将粘贴这些单元格的所选部分兼容。6. 剪切或复制表格单元格选择要复制或剪切的单元格。既可以选择一个单元格，也可以选择多个单元格，但必需保证选中的单元格区域呈矩形。如图2-77所示对选中单元格进行剪切后的效果。 图2-77原始表格和剪切后的表格执行“编辑/剪切”命令或按快捷键Ctrl+X，即可将选中的单元格剪切到剪贴板上。执行“编辑/复制”命令或按快捷键Ctrl+C，

17、即可将选中的单元格复制到剪贴板上。粘贴表格单元格，请执行以下操作：l 选择要粘贴单元格的位置 若要用正在粘贴的单元格替换现有的单元格，则选择一组与剪贴板上的单元格具有相同布局的现有单元格。 l 选择“编辑/粘贴”命令或按快捷键Ctrl+V 如果将整个行或列粘贴到现有的表格中，则这些行或列将被添加到该表格中。如果您粘贴单个单元格，则将替换所选单元格的内容。如果在表格外进行粘贴，则这些行、列或单元格用于定义一个新表格。如图2-78所示为将所剪切的单元格在表格外进行粘贴的效果。 图2-78单元格的剪切粘贴效果7. 删除单元格内容，并使单元格保持原样1) 选择一个或多个单元格。所选部分不能完全由完整的行或列组成。2) 选择“编辑/清除”命令或按 Delete 键。 若选择“编辑/清除”或按 Delete 键时只选择了完整的行或列，则将从表格中删除整个行或列，而不仅仅是它们的内容。8. 嵌套表格l 嵌套表格是在另一个表格的单元格中的表格。可以像对任何其他表格一样对嵌套表格进行格式设置；但是，其宽度受它所在单元格的宽度的限制。如图2-79所示，在一个两行两列的表格中嵌套了一个两行三列的表格。图2-79嵌套表格1.8归纳总结：本讲主要是让同学们掌握表格的基本操作，掌握表格各项属性设置的作用。1.9课后作业题：1. 表格的作用？2. 表格的属性如何设置？3. 表格各属性的作用？