web前端开发 知识点1：html表格属性 电子教案.docVIP

山东理工职业学院单元教学过程设计首页 课程所属院（部）：软件工程学院 2016--- 2017学年 第二学期 课程名称 《Web前端开发》 任课教师 单元标题 HTML5中表格的属性设置 上课地点 8208微机室 学时 2 授课班级 授课时间 第 周 第 周 第 周 第 周 第 周 第 周 星期 星期 星期 星期 星期 星期 第 节 第 节 第 节 第 节 第 节 第 节 月 日 月 日 月 日 月 日 月 日 月 日 教学目标 能力目标 知识目标 1. 掌握HTML5中表格的属性设置方法； 2. 表格的嵌套方法 3. 理解并掌握利用表格进行页面布局的方法； 1.理解并掌握HTML5中表格的属性； 2. 表格的嵌套知识。 教学任务 1. 掌握HTML5中表格的属性设置方法 2. 掌握利用表格进行页面布局的方法 教学重、难点 重点：掌握HTML5中表格的属性设置 难点：利用表格进行页面布局 教学材料或用具 教材、教案、课程标准、案例素材、DreamWeaver CS6软件及微机室 课后任务 网页制作软件对比 山东理工职业学院单元教学过程设计 步骤及时间 教学内容 教师活动 学生活动 5分钟 5分钟 20分钟 30分钟 25分钟 5分钟 【组织教学】 1、检查学生出勤，作好学生考勤记录。 2、课堂提问，了解学生掌握所学知识情况。 3、强调课堂纪律，加强互动，活跃课堂气氛。 【新课导入】 在HTML文档中，有许多文字、图片等元素，如何把这些元素组织起来，使网页更加美观并便于阅读。表格是一种数据组织和简单网页布局工具。 【讲授新课】 2. HTML表格的属性 HTML5支持的表格属性 设置表格边框宽度——border 设置单元格跨列——colspan 设置单元格跨行——rowspan ?表格的其他属性 属性名 说明 width 设置表格宽度 height 设置表格高度 bordercolor 设置表格边框颜色 bgcolor 设置表格的背景颜色 background 设置表格背景图像 align/ valign 设置表格对齐方式 cellspacing 设置单元格间距 cellpadding 设置单元格边距 表格示例 !-- demo0316.html -- !DOCTYPE HTML html title表格属性示例/title meta charset=utf-8 body table style=width:600px; border=1 bordercolor=blue cellspacing=6 cellpadding=10 align=center tr td colspan=3 bgcolor=#CCCC00 align=center 欢迎来自世界各地的朋友，祝您旅途愉快！ /td /tr tr td img src=images/tu.jpg /td td rowspan=2 valign=top width=15 bgcolor=CCCC66 旅顺口 /td td nbspnbspnbspnbsp旅顺口地处辽东半岛最南端，三面环海，…… /td /tr tr td img src=images/tu2.jpg /td td nbspnbspnbspnbsp旅顺口历史悠久，最早名称叫将军山，将军山是老铁山的一部分。…… /td /tr /table /body /html 3.表格嵌套 在网页制作过程中，有时会用到嵌套的表格，即在表格的一个单元格中嵌套使用一个或者多个表格。 !-- demo0317.html -- !DOCTYPE HTML html head meta charset=utf-8 title嵌套表格示例/title /head body h2嵌套表格/h2 table width=400 height=160 border=1 tr td width=200 height=160 table width=200 border=2 bgcolor=#EAFFB7 tr td width=100我是嵌入的两行两列表格/td tdnbsp;/td