HTML5+CSS3网页设计任务教程（第2版）教案-单元设计 单元7 Bootstrap5框架简介 .pdfVIP

XXXXXX学院

单

元

设

计

课程：_______WEB开发基础

内容：单元7Bootstrap5框架简介

学时：12学时

设计摘要

教学课题单元1HTML5静态网站开发概述

课程WEB开发基础学时安排12学时年级高职一年级

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

所选教材

_________________________________2023年12月.________________________________

一、教学背景

创作思路针对传统教学无法解决的教学难题进行设计，课程依托信息化教学环境，整合数字

化教学资源，采用混合式教学模式，采用翻转课堂的有力手段，采用“有效学习时间”的理念进行

项目化考核。以学生为中心，教师做引导，在项目教学的各环节充分运用HbuilderX开发工具、智慧

职教MOOC、动画、在线教学平台等信息化手段解决教学重点难点问题。

设计特色

1.教学过程项目化依据“工学结合、职业情境、项目主导人才培养模式，通过创设情境、

针对实际问题精心设计单元引例，教师点评、小组互评，使学生自主探究，“做中学，“学中做，

降低了学生学习难度，提高学习兴趣和课堂参与度；

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

3.网络平台融合化紧紧围绕HbuilderX开发工具，融入智慧职教MOOC、动画、在线教学平台

等信息化手段进行教学完成教学目标，突破重点、难点；

4.学习评价多元化结合作品展示、小组汇报等多种方式，采用学生自评、师生互评，以及评

价平台等多种手段形成动态化、多元化的评价体系。

二、学习目标与内容

1.学习目标

知识目标

（1）掌握Bootstraps安装使用；

（2）了解并掌握栅格化布局；

（3）学会使用响应式导航栏；

（4）学会使用响应式轮播图；

（5）学会使用文字和图片排版；

（6）掌握完整的响应式网站开发流程；

（7）掌握Bootstraps常用类。

能力目标

（1）熟悉Bootstraps框架的常用类；

（2）能够熟练运用Bootstraps框架进行网站开发；

（3）能够熟练掌握响应式网站开发流程。

素质目标

2

总体目标培养继往开来的创新精神。

(1)新技术新框架不断涌现，需要不断学习；

(2)提升自学能力，打造个人核心竞争力；

(3)工作只是起点终身学习更能赢得未来。

思政育人目标

(1)通过学习Bootstraps框架知识，让学生明白“活到老学到老，当今社会发展日新月异，

如果我们不保持不断地学习，就会被社会所淘汰；

(2)通过学习响应式网站开发流程，让学生明白“按规律办事，按规矩做事，只要能做到顺

应规律，不强为不妄为，就什么事情都可以做，而且什么事都可以做成。

2.学习主要内容

(1)Bootstraps基础知识；

(2)制作栅格化布局页面；

(3)制作响应式导航栏；

(4)制作响应式轮播图；

(5)制作响应式文字和图片；

(6)制作完整的响应式网站。

3.学习重点及难点

教学重点

(1)Bootstraps框架使用方法；

(2)响应式网站的制作流程；

(3)Bootstraps常用类。

教学难点