HTML5+CSS3网页设计任务教程（第2版）教案-单元设计 单元5 页面局部布局.doc

PAGE5

PAGE1

XXXXXX学院

单

元

设

计

课程

课程：WEB开发基础

内容：单元5页面局部布局

学时：12学时

设计摘要

教学 课题

单元1HTML5静态网站开发概述

课程

WEB开发基础

学时安排

12学时

年级

高职一年级

所选教材

汤佳陈晓男主编．《HTML5+CSS3网页设计任务教材（第2版）》．高等教育出版社，2023年12月．

一、教学背景

创作思路：针对传统教学无法解决的教学难题进行设计，课程依托信息化教学环境，整合数字化教学资源，采用混合式教学模式，采用翻转课堂的有力手段，采用“有效学习时间”的理念进行项目化考核。以学生为中心，教师做引导，在项目教学的各环节充分运用HbuilderX开发工具、智慧职教MOOC、动画、在线教学平台等信息化手段解决教学重点难点问题。

设计特色 ：

1．教学过程项目化：依据“工学结合、职业情境、项目主导”人才培养模式，通过创设情境、针对实际问题精心设计单元引例，教师点评、小组互评，使学生自主探究，“做中学”，“学中做”，降低了学生学习难度，提高学习兴趣和课堂参与度；

2．教学资源数字化：丰富的课件、经典作品、视频等资源可供学生在线平台学习；

3．网络平台融合化：紧紧围绕HbuilderX开发工具，融入智慧职教MOOC、动画、在线教学平台等信息化手段进行教学完成教学目标，突破重点、难点；

4．学习评价多元化：结合作品展示、小组汇报等多种方式，采用学生自评、师生互评，以及评价平台等多种手段形成动态化、多元化的评价体系。

二、学习目标与内容

1.学习目标

知识目标：

掌握常用的页面制作方法；

掌握常用的页面布局方法。

能力目标：

熟练掌握一行、多行文本溢出的处理方法；

熟练掌握各种导航条、列表的制作方法。

素质目标：

总体目标：深入理解局部和整体的关系。

加强代码复用性，模块化思维能力；

加强时间观念，提高工作效率；

尝试采用不同的方法实现同一个效果。

思政育人目标：

通过学习一行、多行文本溢出的处理方法，让学生明白“细节决定成败”的道理；

通过学习导航条、图文列表的多种制作方法，让学生明白台上一分钟，台下十年功。只有多年的努力付出，才能做到台上的灵巧自如，毫不费力。

2.学习主要内容

图文混排与文字溢出；

中英文混合标题；

阅读更多内容；

制作文字选项卡与图片选项卡；

制作内容折叠与菜单折叠；

制作导航条；

制作文字列表、图文混排列表和缩略图列表；

制作登录界面；

制作评论区。

3.学习重点及难点

教学重点：

一行、多行文本溢出的处理方法；

导航条、图文列表的多种制作方法。

教学难点：

文本溢出相关属性的基本含义；

CSS元素选择器、display属性、CSS3动画属性综合使用。

三、学情分析

授课对象是高职一年级的学生，通过一学期的学习，已系统学习了《计算机应用基础》《程序设计基础》课程，有一定的编程基础，但对软件开发基本流程的理解、自我规划和管理能力、团队协作交流能力、自我学习解决问题的能力还有所欠缺，基于“课堂不保证做，课后保证不做”的现状，需要采用翻转课堂的有力手段监督其课后学习情况，课堂主要用于作业检查、解惑答疑、交流讨论，从而达到更好的教学效果。

四、学习环境选择与学习资源设计

1.学习环境

（1）教学硬件：多媒体教室；

（2）教学软件：极域电子教室、PhotoShop、HBuilderX、谷歌浏览器等。

2.学习资源类型

（1）课程在线教学平台

（2）新形态一体化教材

（3）职教云课堂

3.学习资源内容简要说明

智慧职教平台《移动web开发》在线开放课程有多媒体课件、微视频、试题库等多种数字化资源；

高等职业教育新形态一体化规划教材《HTML5+CSS3网页设计任务教材（第2版）》中二维码标注微课、课件，实现移动终端随扫随学。

五、学习情境创设

常见网页是不同的功能模块组成的，常用的功能模块有文本、图文混排、标题、导航条、菜单、新闻列表、登录以及其他复杂列表等。如何制作图文混排模块、处理文本溢出、复杂标题模块、多种样式的导航条模块、多种样式的菜单模块、图文结合的列表模块、登录模块以及其他复杂模块，将是本单元学习的内容。

六、教法学法设计

1、项目化教学步骤：①创设情景、导入任务②演示录屏、学生笔记③学生练习、教师巡视④集中讲解，学生修改，上传作业⑤重复2-4步⑥课堂小结⑦布置作业。

2、教师教法

（1）分阶段演示法：将一个复杂案例分解成若干个步骤，分阶段演示。

（2）巡回指导法：逐个检查学生的练习情况，并进行答疑解惑。

（3）错误总结法：将检查巡视过程中发现的共性