HTML5+CSS3网页设计任务教程（第2版）教案-单元设计 单元1 HTML5静态网站开发概述.doc

PAGE5

PAGE1

XXXXXX学院

单

元

设

计

课程

课程：WEB开发基础

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

学时：2学时

设计摘要

教学 课题

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

课程

WEB开发基础

学时安排

2学时

年级

高职一年级

所选教材

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

一、教学背景

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

设计特色 ：

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

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

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

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

二、学习目标与内容

1.学习目标

知识目标：

了解开发工具HBuilderX以及相关使用技巧；

掌握网站文件及文件夹的存储路径；

了解网页的命名规则及四大命名规范；

掌握HTML5标签的组成结构；

了解并掌握HTML5代码注释的使用。

能力目标：

能够熟练、规范地新建网站及网页；

能够熟练书写HTML5标签及注释；

能够熟练使用HBuilderX及快捷键。

素质目标：

总体目标：熟悉代码编写规范。

掌握规范化、标准化的代码编写习惯；

具备勤学善问、举一反三的钻研精神；

提升自学能力，有效学习保持竞争力。

思政育人目标：

通过学习四种基本的编程命名规范，让学生明白规范行事将会事半功倍；

通过学习HBuilderX快捷键，可以熟练掌握工具，提高工作效率。

2.学习主要内容

（1）常用HTML5开发环境的搭建；

（2）完成第一个HTML5页面。

3.学习重点及难点

教学重点：

网页文件及子文件夹的存储路径；

HTML5标签的组成结构；

HTML5标签的语法结构。

教学难点：

网页的命名规则及变量的四大命名规范；

HTML5代码注释语法结构及其作用。

三、学情分析

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

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

1.学习环境

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

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

2.学习资源类型

（1）课程在线教学平台

（2）新形态一体化教材

（3）职教云课堂

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

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

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

五、学习情境创设

网站如今已经是现代化社会人们生活和工作的重要组成部分人们可以通过上网来查询搜索各种自己需要的信息资料可以在网上看到及时的时事新闻报道可以通过网络进行视频聊天和实现商务贸易以及在网上购物等等。网站有哪些类型？网站的开发工具是什么？网站的开发语言和Java语言、C语言有什么区别？网页的命名规范是怎样的？网页的文字、图片和视频又分别存放在哪里？这是我们这一章节需要解决的问题。

六、教法学法设计

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

2、教师教法

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

（2）巡回指导法：逐个检查学生的练习情