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

山东理工职业学院单元教学过程设计首页 课程所属院（部）：软件工程学院 2016--- 2017学年 第二学期 课程名称 《Web前端开发》 任课教师 单元标题 HTML5中的表格 上课地点 8208微机室 学时 2 授课班级 授课时间 第 周 第 周 第 周 第 周 第 周 第 周 星期 星期 星期 星期 星期 星期 第 节 第 节 第 节 第 节 第 节 第 节 月 日 月 日 月 日 月 日 月 日 月 日 教学目标 能力目标 知识目标 1. HTML5中的表格的创建； 1.理解并掌握利用表格进行页面布局的方法； 教学任务 1.掌握表格的基础知识，理解并掌握表格的创建方法 2.掌握利用表格进行页面布局的方法 教学重、难点 重点：HTML5中的表格的创建 难点：利用表格进行页面布局 教学材料或用具 教材、教案、课程标准、案例素材、DreamWeaver CS6软件及微机室 课后任务 网页制作软件对比 山东理工职业学院单元教学过程设计 步骤及时间 教学内容 教师活动 学生活动 5分钟 5分钟 20分钟 30分钟 25分钟 5分钟 【组织教学】 1、检查学生出勤，作好学生考勤记录。 2、课堂提问，了解学生掌握所学知识情况。 3、强调课堂纪律，加强互动，活跃课堂气氛。 【讲授新课】 HTML的表格标记 使用成对的table/table标记就可以定义一个表格，定义表格常常会用到如表3-7所示的标记。 标签 说明 table 表格标记 tr 行标记 td 单元格标记 th 表头标记 !-- demo0315.html -- !DOCTYPE HTML html head meta charset=utf-8 title表格示例/title /head body h2课程表/h2 table border=1 style=width:400px; tr td节/星期/td td星期一/td td星期二/td td星期三/td td星期四/td td星期五/td /tr tr td第一节/td td语文/td td数学/td td英语/td td化学/td td物理/td /tr tr td第二节/td td数学/td td英语/td td数学/td td语文/td td数学/td /tr …… /table /body /html 实现商品布局 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title设置表格的背景颜色/title link rel=stylesheet type=text/css href=css/mr-style.css /head body div class=mr-box table bgcolor=#ccc align=centerheight=445width=1080 tr td rowspan=4 class=mr-imgimg src=images/1.jpg height=508/td tdimg src=images/2.jpg/td tdimg src=images/3.jpg/td tdimg src=images/4.jpg/td tdimg src=images/5.jpg/td tdimg src=images/6.jpg/td tdimg src=images/7.jpg/td /tr tr class=mr-img1 tdimg src=images/8.jpg/td tdimg src=images/9.jpg/td tdimg src=images/10.jpg/td tdimg src=images/11.jpg/td tdimg src=images/12.jpg/td tdimg src=images/13.jpg/td /tr tr class=mr-img1