《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.回顾上节课基本知识,以体验访问图片类
14、网站的形式，引入站点是如何优化网页HTTP请求数垦的。2.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等.（二）知识学习1.通过展示一个网页，让学生观察网页中图片的加载过程,引导学生思号如何优化网页中的图片加载速度。案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资学【45分怦】2.讲解CSSSprites技术介绍CSSSPriteS技术的概念、作用和实现原理,让学生了解CSSSprites技术的优势和应用场景3.制作和使用CSSSprites图片讲解如何使用Photoshop等工具制作CSSS
15、prites图片，并使用CSS的背累定位属性显示所需部分。料等.课堂教学（三）仿真演练55分钟1.分组进行练习，尝试使用CSSSPriteS技术优化个网页中的图片。在此过程中，教师巡回指导，解答学生遇到的问题2.鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3.教师即时的反馈和指导,帮助学生及时纠正错误，加深理解。实践指导丈践训练智能课堂、微课、PPT多媒体电脑、互联网资料等。课堂教学（四）总结评价（25分仲1.观察学生在课堂上的表现，r解他们对CSSSprites技术的兴趣和掌握程度。2.课堂小结，强调CSSSprites技术在网页优化中的重要性，针对课堂教
16、学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等.课后拓展使用本节所掌握知识，仿照“太平洋电脑网”部分板块内容，使用CSSSPriteS技术,完成页面布局，做到温故而知新课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材（HTM1.5-KSS3Web前端设计基础教程（第3版）（微课版）,人民邮电出版社,2024年专业教学标准Web前端开发课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510
17、001）校本补充材料中国大学MooC(httpsuww.icourse1.63.org/)其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握CSS3有关渐变和动画的知识能力目标掌握CSS3有关渐变的实现方法；掌握CSS3动画设计的方法：素质目标进一步提升学生规范编写代码和独立分析问题的能力培养学生自主学习，探究问题的思维认知教学重点CSS3(transform属性和transition属性)教学难点CSS3选项卡学情分析学生能够熟练搭建HTm网页结构，能锅完成基本CSS样式设计和布局，但遇到需要实际问题，仍然缺乏调试技巧和经验。学体计教总设依据教学标准要求
18、，结合学生学情，动态调整应用“南转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节（时间安排）教学内容教学活动技术资源教学随记收学过程中记录）教师学生课前准备（提前2-3天发布教学任务:预习微课视频.卜课备务、准任达前获课备务、准任队前PPT、微课、网络资源课堂教学（一）情境创设5分削1 .回顾上节课基本知识,通过展示些网页中运用了transform属性和transition属性的实例，让学生观察并思考这些效果是如何实现的.2 .明确课程的学习目标和预期成
19、果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（一）知识学习35分的1. 讲解CSS3渐变和CSS3动画（transform属性、transition属性）,通过示例演示如何使用这些函数对元素进行旋转、缩放、倾斜和移动。2. CSS3动画的应用“幽灵按钮”3. CSS3选项卡案例教学知识获取智能课堂、微课、PPK多媒体电脑、互联网资料等.课堂教学（三）仿真演练【40分的1 .学生分组进行练习,嬖试使用transform属性、transition属性等内容，对一个元素进行加转、缩放、倾斜、移动和平滑过渡效果。2 .鼓励学生
20、在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智悬解决问题。3 .教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。实践指导义践训练智能课堂、微课、PPT,多媒体电脑、互联网资料等。课堂教学（四）总结评价【10分锌】课堂小结，重申谡堂重点难点，明确课题学习任务,针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。爆后拓展1,深入阅读你所学习的编程语言或框架的官方文档，以获得最准确和权威的信息.2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。
21、诊断改进课堂教学设计课程名称Wcb前端开发/网页设计与制作授课时数1授课班级授课时间授课地点授课形式多媒体教学参考教材HTM1.5iCSS3Web前端设计基础教程（第3版）人民邮电出版社,2024年（微课版）,参考资料专业教学标准Heb前端开发课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MooC(https:/WW.icourse163.org)其他资源媒体资源智能课常、微课、PPT、配套素材等环境资源多媒体教室知识目标了解HTC1.5绘图教学目标能力目标能够使用Canvas绘制简单图形：素质目标进步提升学生规范编写代码和独立分析问题的能力培
22、养学生自主学习，探究问题的思维认知教学重点HTM1.5Canvas基本概念教学难点Canvas绘制圆形学情分析学生能够热练搭建HTM1.网页结构,能够完成基本CSS样式设计和布局,但遇到需要实际问题，仍然缺乏调试技巧和经验。学体计教总设依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、进而提高综合素养。自主解决问题的意识和习惯，教学环节（时间安排）教学内容教学活动教师学生技术资源教学随记敕学过程中记录）课前准备（提前2-3天发布教学任务）预习微课视频任务下达、
23、课前准备任务获取、课前准备PPT,微课、网络资源课堂教学（一）情境创设（5分钟1.回顾上节课基本知识，展示一些使用Canvas制作的网页实例,让学生观察并思考这些效果是如何实现的。2.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学（二）知识学习35分铸I.讲解IITM1.oCanvas的概念和作用介绍HTM1.5Canvas的概念、作用和发展历程,让学生了解Canvas在网页设计和制作中的重要性.2 .创建画布并绘制简单图形3 .讲解CanvasAPI的基本用法:CanVaS坐标、线条与圆案例教
24、学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练40分仲1 .根据教材内容上机演练各个示例，尝试使用CanvasAPI绘制一个简单的图形或图像。2 .鼓励学生在上机演练时相比讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3 .教师巡回指导，解答学生遇到的问题。实践指导次践训练智能谡堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价【10分钟】课堂小结,蓝申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1.深入
25、阅读你所学习的编程语言或框架的官方文档，以获得最准确和权威的信息。2.加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。（时间安排）教师学生（教学过程中记录）课前准备（提前2-3天发布教学任务1 .在互联网上，查找界面设计类网站,阅读1篇网页设计类文章，并卜载IO张网页设计优秀作品。（推荐网站：优设、花就、U1.中国等）2 .预习微课视频3 .发布讨论话题任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设（20分钟1.回顾上节课基本知识。2 .挑选卜2位同学，上台分享深前优秀网页设计作品。3 .明确课程的学习目标
26、和预期成果，让学生.对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学（一）知识学习150分斡1.引入企业案例，对照即将完成制作的效果图，阐述背景和意义.按照网页开发流程，以边讲边练的形式,讲解Photoshop在Web前端的常见操作（1）创建空白文档C2）标尺与参考线（3）吸管工具及其简单操作（4）切片输出2 .课堂提问：Ieb前端开发中,图片常用的格式有哪些？3 .以U1.设计师角色，对拟进行实现的效果图进行页面布局规划分析，重点引导学生.对项目实践进行整体构思。（1）分析效果图版面布局（2）首页的实现（3）列表页的实现（4）内容
27、页的实现案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教（三）仿真演练1,认真聆听教师的演示操作讲解，上机操作Photoshop和DW,进行实践演练。对于出现的问题，首先更看做课视频，自行动实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资授课班级授课时间授课地点授课形式多媒体教学参考资料其他资源教学目标教学重点教学难点参考教材0M1.5KJSS3Web前前设计基基教程（第3版）（微课版）,人民邮电出版社,2024年专业教学标准Web前端开发课程标准职业技能标准WCb前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MoOC(https:/
28、www.icourse163.org)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室知识目标了解BOotStraP框架的基珈概念：掌握BOOtStraP框架中栅格系统的基础知识及其使用方法：掌握BISIrHP框架中表单、图片、导航栏等组件的使用方法；箱力目标能够使用BOOtStraP框架搭建简单页面综合运用知识，能够构建符合W3C标准的网页素质目标启发和培养学生合作共璐的职业精神：增强开源文化卜的人文社会科学素养和社会货任感。Bootstrap框架基本知识Bootstrap导航栏学情分析学生已经能够使用HTM1.CSS搭建基本页面，对于复杂页面布局和不同设备问的响应式设计缺乏知识
29、储备“学体计教总设依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程.课外拓展有针时性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节（时间安排）教学内容教学教师活动学生技术资源教学随记敕学过程中记录）课前准备（提前2-3天发布教学任务）1 .预习微课视频2 .访问Bootstrap中文网站,查阅相关资料，了解Bootstrap基本知识。任务下达、课前准备获课备务、准任取前PPT、微课、网络资源课堂教学(一)情境创设10分钟1 .回顾上节课基本知识，由演示BOOtStraP
30、官方网站实例,引出使用Bootstrap框架的发展历程和特点，让学生对BOOtS1.raP框架有个整体认识.2 .明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学(二)知识学习60分钟I.讲解BOOtStraP框架的基本概念、布局原理、响应式设计等理论知识，操作演示Bootstrap的环境配包。2.理论讲解与案例教学并行，讲解BOOtStraP框架的栅格系统、衣格、表羊、图片和导航栏等原理，让学生掌握BO(HStraP框架的布局方法。案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等
31、.课堂教学(三)仿真演练的分钟)1.根据教材内容上机演练各个示例，提示学生遵循代码编写规范。2 .鼓励学生在上机演练时相互讨论，分享学习心得和遇到的问题，通过集体的智悬解决问题。3 .教师即时的反馈和指导,帮助学生及时纠正错误，加深理解。4 .教师指派优秀学生作为课堂教学小助手，帮助同学解答疑难。实践指导实践训练智能课堂、微课、,n多媒体电脑、互联网资料等。课堂教学(四)总结评价20分钟课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等。课后拓展1 .访问BooiS1
32、.rap中文网站,欣赏优秀的网页案例，并通过在浏览器中按卜F12键进入开发者模式，观察页面结构与应用。2 .加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点参考资料其他资源教学目标授课形式多媒体教学参考教材（HTM1.5-KSS3Web前端设计基础教程（第3版）（微课版）,人民邮电出版社，2024年专业教学标准Web前端开发课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOoC(https:/WWw.
33、icourse163.org)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室知识目标能够使用BootStraP框架搭建简单.页面能力目标能够使用Bootstrap框架搭建简单页面综合运用知识，能够构建符合W3C标准的网页素质目标启发和培养学生合作共麻的职业精神：增强开源文化卜的人文社会科学素养和社会责任感。教学重点Bootstrap框架教学难点学情分析Bootstrap框架学生已经能够使用HTN1.CSS搭建基本页面，对于复杂页面布局和不同设备问的响应式设计缺乏知识储备。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组付论、实践
34、操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节教学内容教学活动教学随记(时间安排)教师学生(救学过程中记兼)课前准备(提前2-3天发布教学任务预习微课视频任务下达、课前准备获课备务、准鹏取前PPT、微课、网络资嫄课堂教学(一)情境创设5分仲1 .回顾上节课基本知识，2 .明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学(一)知识学习(35分钟1.布置一个实战项目,让学生运用所学的B。ISIrHP框架知识，
35、快速搭建一个网页。(1)页面结构分析(2)页面搭建过程案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学(三)仿真演练40分钟1.根据教材内容上机演练各个示例，理解不同类型的选择器的功能用法。2 .鼓励学生.在上机演练时相讨论，分享学习心得和遇到的问题，通过集体的智慧解决问题。3 .教师即时的反馈和指导,帮助学生及时绢正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等.课堂教学(四)总结评价10分仲课堂小结，重申课堂重点难点，明确课题学习任务，针对课堂教学内容，互动交流讨论，布置后续课预习知识.作业点评课程小结查漏补缺吸收整理智能课堂、微
36、课、PPT、多媒体电脑、互联网资料等。课后拓展1 .推荐学生阅读一些IITM1.5相关的书籍、教程和文章，以拓宽知识面和了解最新的HTM1.5应用趋势。2 .加入CSS和前端开发的社区，与其他开发者交流问题和学习经验。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数3授课班级授课时间授课地点参考资料其他资源教学目标教学重点授课形式多媒体教学参考教材（HTM1.5-KSS3Web前端设计基础教程（第3版）（微课版）,人民邮电出版社，2024年专业教学标准Web前端开发课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：5100
37、01）校本补充材料中国大学MOoC(https:/WWw.icourse163.org)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室知识目标掌握在Webpp项目开发中手机屏幕尺寸的鞋本知识；解SWiPer插件的使用方法：能力目标掌握WebAPP类型网站的制作流程具备良好的代码风格和编程习惯素质目标增强学生对“开放”“合作共羸”的深刻理解：培养学生综合应用能力，强化社会赤任搐。WebApp开发基础知识教学难点学情分析Swiper插件学生已经能够使用HTM1.+CSS搭建基本页面，对于复杂页面布同和不同设备间的响应式设计缺乏知识储备。依据教学标准要求,结合学生学情，动态调整应用“翻
38、花课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。教学环节时间安排）教学内容教学活动技术资源教学随记教学过程中记录）教师学生课前准备（提前2-3天发布教学任务）预习微课视频.卜课备务、准任达前一任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设UQ分的1 .回顾上节课基本知识，通过展示手机端多种应用实例,引入WebAPP开发模式的几种类型。2 .明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习45分*1.讲解WebAPP的基本概念、开
39、发模式、技术选型等理论知识：2.讲解手机屏幕基本知识（1）像素分辨率（2）像素密度（3）网点密度（4）逻辑分辨率与像素倍率3.以案例形式展示移动端开发时常见的触屏动作，引出Swiper插件4.WebAPP页面分析与环境准备案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练55分钟1.根据教材内容上机演练各个示例，继续完成后续学习。2 .鼓励学生.在上机演练时相讨论，分享学习心得和遇到的问题，通过集体的智超解决问题。3 .教师即时的反馈和指导,帮助学生及时绢正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等.课外拓展有针对性的
40、安排训东，同时培养学生发现问题、自主解决问题的意识和习惯,进而提高综合素养。课堂教学（四）总结评价25分钟课堂小结，重申课堂里点难点，明确课Bg学习任务,针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等.课后拓展1 .独立完善“WebApp”的其他页面。2 .使用Swiper插件制作一个可手动切换的图片轮播图。课外指导知识技能补充网络资源、即时通信等。诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数7授课班级授课时间授课地点授课形式多媒体教学参考费料其他资源教学目标教学至点教学难点参考教材HT
41、M1.5KSS3Web前端设计基础教程（第3版）（微课版），人民邮电出版社,2024年专业教学标准Web前端开发课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MoOC(https:/WWw.icourse163.org)媒体资源智能课堂、微课、PPT,配套素材等环境资源多媒体教室知识目标掌握在WcbAPP项目开发中的方法：能力目标掌握WebAPP类型网站的制作流程具备良好的代码风格和编程习惯素质目标增强学生对“开放”“合作共藤”的深刻理解：培养学生综合应用能力，强化社会货任感。页面实现过程页面实现过程当三4U;学生已经能够使用HTM1.+CSS搭建基本页面，对于宾杂页面布局和不同设备间子俯Tr祈的响应式设计缺乏知识储备。
