HTML5 CSS3 Web前端设计基础教程（吴丰 第3版） 教案 教学设计 任务12--22 表单元素及其控制--- Web App页面的设计与实现.docx

《HTML5 CSS3 Web前端设计基础教程（吴丰 第3版） 教案 教学设计 任务12--22 表单元素及其控制--- Web App页面的设计与实现.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3 Web前端设计基础教程（吴丰 第3版） 教案 教学设计 任务12--22 表单元素及其控制--- Web App页面的设计与实现.docx（21页珍藏版）》请在优知文库上搜索。

1、课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料其他资源参考教材HTMI5*SS3Web前前设计基础教程（第3版（微课版）,人民邮电出版社,2024年专业教学标准Web前端开发课程标准职业技能标准WCb前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOoC(https:/www.icourse163.org)媒体资源智能课堂、微课、PPT,配套素材等环境资源多媒体教室教学目标里学重点教学难点学情分析知识目标了解表单的基本概念：掌握常用表单的使用方法：能力目标掌握CSS控制衣单外观的处理思路素质目标培养学生坚持

2、问题导向，科学分析问题、深入研究问题的能力：增强问题意识，既要见思想，更要见行动，从而指导自己的学习和工作。常见表单对象（文本字段、复选框、复选按钮、下拉列表、臼动验证等）CSS3按钮、开源样式库按钮学生能够熟练搭建HTV1.网页结构，能够完成基本CSS样式设计和布局，但遇到需要实际问题，仍然缺乏调试技巧和经效。学体计教总设依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比亚，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展教学环节（时间安排）有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学内容教学活动技术资源

3、教学随记（敦华it程中记录）教师学生课前准备（提前2-3天发布教学任务1,预习微课视须2.在智慈校园页面找出登录页和个人信息页中的表单个数及表任务下达、课前准备任务获取、课前准备PPT、微课、网络资源单对象有哪些？课堂教学（一）情境创设5分仲1.回顾上节课基本知识,引导学生树立实践是学习CSS布局与优化的关键。2 .利用教学平台随机抽查学生预习情况，鼓励学生提出感兴趣的知识点。3 .结合学生反馈，明确课程的学习目标：掌握常用表单的使用方法。让学生对学习路径有个清晰的认识。1.k*a顾上节课如识点12.抽杳学生H1.习恬况,引导学生提出表单对肉是具体使用和设J1.1.反燃预习情况：2.Hfft学

4、习任务I智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学（二）知识学习35分加1 .表单的基本知识2 .常见的表单对象（1）文本字段（2）更选框与豆选框组（3）单选按钮与单选按钮组（4）“提交”按钮（5）日期、颜色、滑块等（6）下拉菜单（7）跳转菜单（8）自动验证3.CSS控制表单（1）搜索栏（2）登录页（3）传统按钮、CSS3按钮与开源样式库按钮1.教帅演示文本字段、更选框（组八单选按钿（组）的具体使用和注意事项12.妙耐学生自己探索其他表单对象的使用场景和方法：3.引导学生掌握CSSiM表内的思路和方法t1,在褰敕师演示案例：2.主功探蜜教师预例表制对家的使用场景和方法、3.学刀

5、CSS设置表或的思路和方法1智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练40分钟1.根据教材内容上机演练各个示例，掌握CSS美化表单对象的思路，r解实际开发过程中开源样式库按钮。2 .鼓励学生.在上机演练时相讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3 .教师即时的反馈和指导,帮助学生及时纠正错误，加深理解“1 .鼓咐学生枳报时论并提供实践指导；2 .姐学生开展小祖内点评总结实现流程.1.分纲讨论后实践操作;2.楣互点评并及时总结.智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学（四）总结评价10分钟课堂小结，重申课堂里点难点，明确课Bg学习

6、任务,针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等.课后拓展1 .推荐学生阅读一些IITM1.5相关的书籍、教程和文章,以拓宽知识面和了解最新的HTM1.5应用趋势。2 .加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称WCb前端开发/网页电计与制作授课时数2授课班级授课时间授课地点参考资料授课形式多媒体教学参考教材W迎5KSS3Web前湖设计基础数程（第3版）（微课版），人民邮电出版社，2024年专业教学标准Web前端开发课

7、程标准职业技能标准Web前端开发职业技能等级标准标准代码：510001）校本补充材料中国大学MOOC(https:/WWw.icourse163.org)其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标了解表格的基本知识能力目标掌握细线表格、隔行换色表格的实现方法素质目标培养学生坚持问题导向，科学分析问题、深入研究问题的能力：增强问题意识，既要见思想，更要见行动，从而指导自己的学习和工作。教学至点细线表格教学难点隔行换色表格学情分析学生能够熟练搭建HT迎网页结构，能够完成基本CSS样式设计和布局，但遇到需要实际问题，仍然缺乏调试技巧和经验。学体计教总设依据教

8、学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程“有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，*外f展进而提悬综合素养。教学环节教学内容教学活动技术资源教学随记时间安排）教师学生教学过程中记录课前准备1.预习微课视颇任务下任务获PPT、微OS前2-3天发2.收集网页中不同样式的表格达、课取、课课、网络布教学任务）前准备前准备资源1.回顾上节课基本知识,强调表单整体性，集中讲解作业批改中的共性问题.1.知识知Bb强调共性险探1.关注表智能课课(一)2.结合Office表格的创建，综2.结合埴中

9、的共党微课、堂情境合学牛.收集的表格样式，引导学OfCCe中性向s：PPT、多媒生思考在网页上如何创建表格，的衣格,引2.反饿双教创设美化表格。入网页中习时收集体电脑、学5分仲3.明确课程的学习目标和预期衣格的创的网页发互联网资料等。成果会在网页中创建表格，美化表格，让学生对学习路径有一个清晰的认识。建和美化后的M得效果.格：1.表格的基本概念及其简易操作1.演东表格的创建和拆分、台课（二）介绍网页中表格的组成部分，引入表格中的常用标签，演示基本1.在春校智能课堂知识表格的创建及单元格拆分、合并师演示I堂、微课、PPT、多媒教并。2.引导学2.思考.总学习2.细线表格生思考、实站表格美F1.k

10、1.Bf1.w、互联网资学35分铸将创建的基本表格和学生收集到的表格进行对比，引导学生发现表格边框双线问题，进而提出表格细线化，并具体演示如何实现蒯找我格和隔行化流程料等.现。3.隔行换色表格教师演示两种方法进行隔行换色：标签选择器和伪类选择器课堂教学（三）仿真演练网分钟1 .根据教材内容上机演练表格案例，掌握常用表格美化流程。2 .鼓励学生在上机演练时相比讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题.3 .教师即时的反馈和指导，帮助学生及时绢正钳误，加深理解。1 .妙丽第生积极讨论井提供实践指导:2 .武织学生开展M机点评,总结实现淹程.1 .分姒讨论后实践操作：2 .自我点评并及

11、时总结.智能课堂、微课、PPT、多媒体电脑、互联网资料等。课（四）课堂小结，垂申课堂重点难点,作业查漏智能课堂、微课、堂总结明确课题学习任务,针对课堂教点评补缺PPT、多媒教评价学内容，互动交流讨论，布置后课程吸收体电脑、学【10分钟续谡预习知识。小结整理互联网资料等。1.推荐学生阅读些HTM1.5相关课的书籍、教程和文章，以拓宽知后拓识面和了解般新的HTM1.5应用趋势。2.加入CSS和前端开发的社区，课外指导知识技能补充网络资源、即时通信等。展与其他开发者交流问题和学习经验。诊断改进课堂教学设计课程名称WCb前端开发/网页设计与制作授课时数3授课班级授课地点授课时间授课形式多媒体教学参考资

12、料叁老加划WTM1.5ESS3Web前端设计基础教程（第3版（微课版），爹不教历人民邮电出版社，2024年专业教学标准Web前端开发课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOoC(https:/WWw.icourse163.org)其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室知识目标掌握CSSSPrite技术的原理教学目标能力目标掌握CSSSPrite技术的使用方法,能在实际项目中根据需求选择合适的优化方案方氏口4进步提升学生规范编写代码和独立分析问题的能力系质日杯培养学生自主学习，探究问题的思维认知教学重点CS

13、SSPrite技术教学难点CSSSPritC技术学情分析对Web前端有一定学习基础，但遇到问题，自身解决问题的能力不足。学体计教总设依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。有针刻性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节教学内容教学活动教学随记（时间安排）教师学生（教学过程中记录）课I（提才布，前准备2-3天发t学任务）预习微课视频任务下达、课前准备2而取前PPT、微课、网络资源课堂教学课堂教（一）情境创设1。分钟1.回顾上节课基本知识,以体验访问图片类网站的形式，引入站点是如何优化网页HTTP请求数垦的。2.明确课程的学习目标和预期成果，让学生对学习路