前端基础实战4_第1页
前端基础实战4_第2页
前端基础实战4_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

教学流程设计（理实一体化）教师姓名系部专业授课对象课程名称Web前端开发授课时间使用教材Web前端开发实战教程（HTML5+CSS3+JavaScript）（AI协同）（第2版）计划学时4学时教学形式及地点教学目标知识目标能力（技能）目标素质目标充分理解盒模型的基本用法与属性充分理解盒模型的绝对定位与相对定位充分理解盒模型的嵌套与应用充分理解CSS如何与盒模型配合使用充分理解CSS如何处理容器属性熟练掌握弹性布局在移动端的使用养成规范化页面布局编码习惯培养分析页面结构的思维能够独立排查浮动塌陷、定位错乱等布局问题教学内容模块4盒模型与弹性布局4.1盒模型基础知识4.2盒模型浮动4.3盒模型内容4.4盒模型嵌套4.5盒模型定位4.6弹性布局重点难点及解决方法重点难点：盒模型浮动使用与清除浮动处理盒模型不同定位方式的区分与使用弹性布局属性综合运用实现页面排版解决方法：针对三大重难点分别开展专题辅导，教师分步完整演示2、学生分阶段完成分层技能实践训练3、实操阶段巡回检查并记录完成情况，集中对浮动塌陷、定位偏移等共性问题专题辅导，启发学生独立排错学生自主改造页面代码，综合盒模型、浮动、定位、弹性布局完成页面案教学方法案例法、任务驱动法、鼓励创新法教学资源演示案例、案例素材、机房资源教学过程设计主要流程1．知识点引入介绍本次页面布局任务，展示盒模型拆解示意图，引出盒模型与弹性布局知识点。2．案例导入针对盒模型基础知识、浮动、内容、嵌套、定位、弹性布局知识点讲解，教师演示完整布局案例。3．案例分析示范布局综合案例，教师完整演示盒模型嵌套、浮动排版、定位设置、弹性布局实现全流程。学生梳理实施步骤，总结页面布局开发思路。4．专题辅导针对浮动清除、定位使用、弹性布局三大关键技术点专题辅导；普通操作学生自主讨论解决，难点教师分步演示操作步骤。教师活动学生活动分析讲解案例，应用知识点,培养学生的自我学习能力和创新革新能力；选择要点，作好笔记；听、思考，适时发问；归纳、总结；5．任务实施教师活动学生活动机房巡回答疑选择要点，作好笔记实操阶段案例设计、分析与应用分阶段检查实操进度，统一讲解集中报错案例设计、分析与应用6．总结点评抽查学生页面布局案例效果并记录成绩，梳理浮动塌陷、定位偏移等高频布局错误，再次强调本节课三大重难点。7．课后任务安排练习盒模型嵌套，利用浮动和定位完成简单排版，使用弹性布局重构之前的页面案例。教学后记（对课程设置、教学计划、

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论