HTML5 CSS3 Web前端设计基础教程（吴丰 第3版） 教案 教学设计 任务1--11 Web前端工程师职业前景与开发流程--- 列表.docx

《HTML5 CSS3 Web前端设计基础教程（吴丰 第3版） 教案 教学设计 任务1--11 Web前端工程师职业前景与开发流程--- 列表.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3 Web前端设计基础教程（吴丰 第3版） 教案 教学设计 任务1--11 Web前端工程师职业前景与开发流程--- 列表.docx（22页珍藏版）》请在优知文库上搜索。

1、课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料其他资源教学目标参考教材4HTM1.5KSS3Web前前设计基础教程（第3版（微课版）,人民邮电出版社,2024年专业教学标准Web前端开发课程标准职业技能标准Web前端开发职业技能等级标准标准代码：510001）校本补充材料中国大学MOOC(https:/Aw.icourse163.org)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室知识目标了解Web前端工程新的行业前景；认识网页构成的堪本元素，掌握相关专业术语；掌握“表现与结构相分离”的重要理念：熟悉Web前端开发的工作流程：

2、了解常用的开发软件，能够简单创建一个IITM1.5页面。能力目标初步掌握创建简单HTM1.5页面的方法：具有“表现与结构相分离”的理念认知：素质目标引导学生既要学习专业技能知识，也要逐步树立职业理想；坚持诬育为先，培养良好的职业道德（货任感）和个人品德：教学重点Web前湍开发的相关专业术语与工作流程教学难点表现与结构相分尚学情分析课外拓展初学者对Web前端课程的重要性认识不够，对初次接触代码类课程容易产牛.倦怠。依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比揖，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。有针对性的安排训练，同时培养学生发现问题、自主解

3、决问题的意识和习惯，进而提高综合素养。教学环节（时间安排）教学内容教学活动教师学生技术资源教学随记（教学过程中记录）课前准备（提前2-3天发Web前端行企业调研（杳找网络任务下达、课任务获取、课PPT、微课、网络课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料其他资源教学目标参考教材4HTM1.5KSS3Web前前设计基础教程（第3版（微课版）,人民邮电出版社,2024年专业教学标准Web前端开发课程标准职业技能标准Web前端开发职业技能等级标准标准代码：510001）校本补充材料中国大学MOOC(https:/Aw.icourse163.or

4、g)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室知识目标了解Web前端工程新的行业前景；认识网页构成的堪本元素，掌握相关专业术语；掌握“表现与结构相分离”的重要理念：熟悉Web前端开发的工作流程：了解常用的开发软件，能够简单创建一个IITM1.5页面。能力目标初步掌握创建简单HTM1.5页面的方法：具有“表现与结构相分离”的理念认知：素质目标引导学生既要学习专业技能知识，也要逐步树立职业理想；坚持诬育为先，培养良好的职业道德（货任感）和个人品德：教学重点Web前湍开发的相关专业术语与工作流程教学难点表现与结构相分尚学情分析课外拓展初学者对Web前端课程的重要性认识不够，对初次接

5、触代码类课程容易产牛.倦怠。依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比揖，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节（时间安排）教学内容教学活动教师学生技术资源教学随记（教学过程中记录）课前准备（提前2-3天发Web前端行企业调研（杳找网络任务下达、课任务获取、课PPT、微课、网络布教学任务）资料）、预习微课视频前准备前准备资源课堂教学（一）情境创设（5分钟通过让同学分享Web前端企业调研结果，引入Web前端工程师的行业前景，激发学生学习兴趣。理论讲授明

6、确任务知识获取智能课堂、微课、PPT.多媒体电脑、互联网资料等。课堂教学（二）知识学习网分钟1.Web前端开发的必要认知与发展前景2 .认识网页的构成元素3 .了解专业术语4 .认识Web标准5 .Web前端开发基本流程6 .常用开发软件介绍理论讲授知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练（35分仲1.围绕”表现和结构相分离”等内容，通过互联网杳找资料，进一步强化学生对课堂知识的理解。2 .使用记事本创建IITM1.5页面。3 .查找有关“网页设计”“网页U1”的资料，欣赏优秀的网页设计作品。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料

7、等.课堂教学（四）总结评价1。分钟课堂小结，重申课堂盘点难点,明确课题学习任务,针对课堂教学内容，互动交流讨论，布置后续课预习知识。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资料等.课后拓展为巩固课堂学习效果，有计划、有重点的安排拓展知识学习与训练，培养学生学习习惯，进步提升专业技能和综合素养。课外指导知识技能补充网络资源、即时通信等。诊断改进课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考教材HTMIJ5+CSS3Web前端设计基即教程（第3版）人民邮电出版社,2024年（微课版）,参考资料专业教学标准Web前湍开

8、发课程标准职业技能标准Web前端开发职业技能等级标准标准代码：510001）校本补充材料中国大学MOOC(https:/Aw.icourse163.org)其他资源媒体资源智能课堂、微课、PPI、配套素材等环境资源多媒体教室知识目标掌握Dreamweaver的基本使用方法：掌握站点的相关概念及其堪本操作：掌握HBui1.derX的基本使用方法：教学目标能力目标掌握Dreamweaver和HBUi1.derX的基本使用方法：能够创建简单的HTM1.5网页，并实现简单的控制：素质目标培养学生的实践思维，提升勇于探索实践的能力：培养学生枳极研究探索的科学习惯：教学重点工具栏、CSS面板、属性检查器教

9、学难点创建与管理站点学情分析初学者对WCb前湍课程的重要性认识不够，对初次接触代码类课程容易产生倦怠。学体计教总设依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组付论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、进而提高综合素养。自主解决问题的意识和习惯，教学环节教学内容教学活动技术资源教学随记时间安排）教师学生教学过程中记录）课前准备（提前2-3天发布教学任务）预习微课视频任务下达、课前准备获课备务准取前PPT、微课、网络资源课堂(一)情境回顾上节课基本知识，引出“工欲善其事，必先利其器”，引导学生树立任

10、何代码编辑器仅是理论明确任务智能课堂、微课、PPT,多媒教创设解决问题的工具，Web前端的学讲授知识体电脑、学(5分钟习重点应放在代码编写逻辑的获取互联网资学习。料等。课(二)1.Dreamweaver界面介绍智能课2.DW常用工具栏和面板堂、微课、堂知识3.创建和管理站点案例知识PPT、多媒教学习4.各类面板的使用方法教学获取体电脑、学网分南5.Hbui1.derX基本操作互联网资6.标签、元素、属性和值料等。课(三)1.学生熟悉Dreamweaver环智能课堂、微课、堂仿真境，上机演练创建与管理站点。实践实践PPT、多媒教演练2.安装与启动HBUiIderX,创建指导训练体电脑、学(35分

11、州并保存一个项目，熟悉环境。互联网资料等.课(四)课堂小结，重申课堂重点难点，作业查漏智能课堂、微课、堂总结明确课题学习任务，针对课堂教点评补缺PPT、多媒教评价学内容，互动交流讨论，布置后课程吸收体电脑、续课预习知识。小结整理互联网资学10分钟料等.课后为巩固课堂学习效果，有计划、有重点的安排拓展知识学习与课外知识技网络资源、即时拓训练，培养学生学习习惯，进一指导能补充步提升专业技能和综合素养.通信等。展诊断改进课堂教学设计课程名称Web前端开发/网页设计与制作授课时数2授课班级授课时间授课地点授课形式多媒体教学参考资料其他资源参考教材W迎5KSS3Web前前设计基础数程（第3版）（微课版）

12、，人民邮电出版社，2024年专业教学标准Web前湍开发课程标准职业技能标准Web前端开发职业技能等级标准标准代码：510001）校本补充材料中国大学MOoC(https:/Www.icourse163.org)媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标教学束点教学难点学情分析知识目标掌握IITM1.5文档结构，认识HTM1.5中常见的标签含义：能力目标掌握DreHmWeaVer和HBUi1.derX的基本使用方法：能够创建简单的HTM1.5网页，并实现简单的控制：素质目标培养学生的实践思维，提升勇于探索实践的能力：培养学生积极研究探索的科学习惯；HTM1.5的文档结构

13、和编写规范HTM1.5常见元素初学者对Web前端课程的重要性认识不够，对初次接触代码类课程容易产生催怠依据教学标准要求，结合学生.学情，动态调整应用“翻转课堂”模式的教学比盎，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现何巡、自主解决问题的意识和习惯，进而提高综合素养。教学环节（时间安排）教学内容教学活动技术资源教学随记（教华H程中记录）教师学生课前准备（提前2-3天发布教学任务预习微课视频可课备务、准他区前获课备务、准住取前微联1、源Pp课资课堂教学（一）情境创设5分仲1 .回顾上节课基本知识,通过展示些有趣的HTM1.5应用实例,如互动游戏、动画效果等，激发学生的学习兴健。2 .明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等.