第6课 使用表格构建网页布局（1）（教案）-《网页制作三合一案例教程》同步教学（航空工业出版社）

课题 第6课 使用表格构建网页布局（1） 课时 2课时（90 min） 教学目标 知识目标： （1）掌握在网页中创建表格以及选择表格和单元格的方法 （2）掌握设置表格和单元格常用属性的方法 技能目标： （1）能够完成表格的创建，选中表格和单元格 （2）能够对表格和单元格的各类属性进行修改 素质目标： 学习要徐徐渐进，戒骄戒躁，脚踏实地 教学重难点 教学重点：表格的创建，表格和单元格的选中 教学难点：表格和单元格属性的设置 教学方法 问答法、讨论法、讲授法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→  问题导入（3 min）→传授新知（28 min）→课堂实训（12 min） 第2节课：问题导入（3 min）→ 传授新知（27 min）→ 课堂实训（10 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 【教师】让学生上网查找一些高水准网页，总结其布局类型 【学生】按照要求完成课前任务 通过课前任务，让学生了解网页布局类型 考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （3min） 【教师】提出以下问题，并随机邀请学生进行回答 上个项目中设置网页内容的时候，我们将图像插入了表格中，那么我们如何创建表格？ 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课内容：创建并选择表格 通过上个项目中直接使用表格，引出表格布局，最多、最容易上手的网页布局工具 传授新知 （28 min） 【教师】讲解新知，介绍如何创建并选择表格 任务一 创建并选择表格 一、任务说明 本任务将介绍在Dreamweaver中创建表格，以及选择表格和单元格的方法。此外，还将应用所学知识为“天音”网站主页构建主体结构。 二、预备知识 （一）创建表格 表格（Table）是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在HTML语言中以<tr>标签开始，</tr>标签结束），垂直的多个单元格称为列（以<td>标签开始，</td>标签结束），行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中，如图4-1所示（详见教材）。 Dreamweaver CS5拥有非常完善的表格编辑功能，下面首先介绍如何在网页文档中创建表格。 【多媒体】演示在Dreamweaver CS5中创建表格的具体步骤 步骤1启动Dreamweaver CS5，新建一个网页文档。首先在文档页面中要插入表格的位置单击，以确定插入点位置。 步骤2单击“插入”面板“常用”类别中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格。 【知识库】 “插入”面板包含各种类型的对象按钮（如图像、表格和Flash动画等），通过单击这些按钮，可将相应的对象插入到文档中。默认状态下，“插入”面板中显示的是网页中最常用的对象按钮组，即“常用”类别。单击“常用”类别右侧的小三角符号，将打开一个下拉列表，其中包括布局、表单、数据等，单击这些选项，可切换到相应的类别。 下面简单介绍一下“表格”对话框中几个重要设置项的意义。 表格宽度：设置表格宽度值，如不设置该值，表格宽度将随其中内容而改变。在Dreamweaver中，最常用的单位是像素和百分比。像素使用0或大于0的整数来表示；百分比是相对于浏览器或其父级对象而言的，使用0或百分比来表示。二者的区别在于：当浏览器窗口或其父级对象的宽度发生变化时，使用百分比作为单位的表格的宽度将随浏览器窗口或其父级对象发生同比例的变化，而使用像素作为单位的表格的宽度将保持不变。 【知识库】 父级对象是指子对象所处的对象，假设有一个表格1，表格1的某一个单元格中又有一个表格2，那么此时表格1就是表格2的父级对象。 边框粗细：是指整个表格边框的粗细，标准单位是像素。整个表格外部的边框叫外边框，表格内部单元格周围的边框叫内边框。 单元格边距：也叫单元格填充，是指单元格内部的文本或图像与单元格边框之间的距离，标准单位是像素。 单元格间距：是指相邻单元格之间的距离，标准单位是像素。 （二）选择表格和单元格 1．选择表格 在Dreamweaver中选择表格的方法主要有以下几种。 将鼠标光标移至单元格边框线上，当鼠标光标变为或形状时单击鼠标左键。当表格外框显示为黑色粗实线时，就表示该表格被选中了，如图4-3所示（详见教材）。 将鼠标光标移至表格外框线上，当鼠标光标变为 形状时，单击鼠标左键即可将表格选中，如图4-4所示（详见教材）。 在表格内部任意单元格中单击