HTML5CSS3Web前端设计基础教程（第3版）教案-教学设计 任务17 PC端页面布局规划与实现-8课时-课堂教学设计

课堂教学设计课程名称Web前端开发/网页设计与制作授课时数8授课班级授课时间授课地点授课形式多媒体教学参考资料参考教材《HTML5+CSS3Web前端设计基础教程（第3版）（微课版）》，人民邮电出版社，2024年专业教学标准《Web前端开发》课程标准职业技能标准Web前端开发职业技能等级标准（标准代码：510001）校本补充材料中国大学MOOC（/）其他资源媒体资源智能课堂、微课、PPT、配套素材等环境资源多媒体教室教学目标知识目标掌握Photoshop切片并输出的操作方法巩固导航和图文列表的实现方法技能目标掌握从效果图到Web页面的整个工作过程素质目标引导学生树立崇高的理想信念，促使学生不断提升思维能力引导学生打开思路，践行创新精神和创新思维方式教学重点页面布局规划分析教学难点页面的实现学情分析学生已经能够使用HTML+CSS搭建基本页面，但缺乏对岗位工作流程的认知。教学总体设计依据教学标准要求，结合学生学情，动态调整应用“翻转课堂”模式的教学比重，以边讲边练、分组讨论、实践操作、课堂小结的路径组织实施教学过程。课外拓展有针对性的安排训练，同时培养学生发现问题、自主解决问题的意识和习惯，进而提高综合素养。教学环节(时间安排)教学内容教学活动技术资源教学随记(教学过程中记录)教师学生课前准备(提前2-3天发布教学任务)1.在互联网上，查找界面设计类网站，阅读1篇网页设计类文章，并下载10张网页设计优秀作品。（推荐网站：优设、花瓣、UI中国等）2.预习微课视频3.发布讨论话题任务下达、课前准备任务获取、课前准备PPT、微课、网络资源课堂教学（一）情境创设[20分钟]1.回顾上节课基本知识。2.挑选1-2位同学，上台分享课前优秀网页设计作品。3.明确课程的学习目标和预期成果，让学生对学习路径有一个清晰的认识。理论讲授明确任务知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（二）知识学习[150分钟]1.引入企业案例，对照即将完成制作的效果图，阐述背景和意义。按照网页开发流程，以边讲边练的形式，讲解Photoshop在Web前端的常见操作（1）创建空白文档（2）标尺与参考线（3）吸管工具及其简单操作（4）切片输出2.课堂提问：Web前端开发中，图片常用的格式有哪些？3.以UI设计师角色，对拟进行实现的效果图进行页面布局规划分析，重点引导学生对项目实践进行整体构思。（1）分析效果图版面布局（2）首页的实现（3）列表页的实现（4）内容页的实现案例教学知识获取智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（三）仿真演练[170分钟]1.认真聆听教师的演示操作讲解，上机操作Photoshop和DW，进行实践演练。对于出现的问题，首先复看微课视频，自行动脑思考，再进行同学间帮助，解决不了的，由教师进行指导答疑。2.教师即时的反馈和指导，帮助学生及时纠正错误，加深理解。实践指导实践训练智能课堂、微课、PPT、多媒体电脑、互联网资料等。课堂教学（四）总结评价[20分钟]1.回顾本节知识点，对本章节的重点难点进行归纳和总结。2.点评同学在自主演练过程中大家的表现情况，对于出现较多的共性问题，再次统一讲解和演示。3.强调“讲诚信，强规范，保质量”的核心职业素养。作业点评课程小结查漏补缺吸收整理智能课堂、微课、PPT、多媒体电脑、互联网资