Bootstrap响应式Web开发（第2版）第1章 初识Bootstrap 教学设计.doc

第1章PHP开篇

PAGE16

《Bootstrap响应式Web开发（第2版）》

教学设计

课程名称：

授课年级：

授课学期：

教师姓名：

年月

课题名称

第1章初识Bootstrap

计划课时

5课时

教学引入

近年来，随着移动互联网的持续发展，不断涌现出各种移动设备，这些设备的屏幕尺寸多种多样，而网页需要根据用户使用的具体设备进行适配，以确保用户可以具有最佳的浏览体验。为了解决网页在不同设备中的适配问题，Bootstrap应运而生。为了使读者对Bootstrap有一个初步的认识，本章将对Bootstrap、浏览器、VisualStudioCode编辑器、移动Web开发的主流方案等内容进行详细讲解。

教学目标

使学生了解Bootstrap的概念，能够说出什么是Bootstrap

使学生熟悉Bootstrap的特点，能够归纳Bootstrap的特点

使学生熟悉Bootstrap的组成，能够归纳Bootstrap的组成部分

使学生了解PC端浏览器，能够列举常见的PC端浏览器

使学生了解移动端浏览器，能够列举常见的移动端浏览器

使学生掌握VisualStudioCode编辑器的下载和安装，能够独立完成VisualStudioCode编辑器的下载和安装

使学生掌握中文扩展包的安装，能够在VisualStudioCode编辑器中安装中文扩展包

使学生掌握VisualStudioCode编辑器的使用方法，能够在项目中创建HTML5文档

使学生了解移动Web开发的主流方案，能够说出两种主流的移动Web开发方案

教学重点

下载和安装VisualStudioCode编辑器

使用VisualStudioCode编辑器

教学难点

无

教学方式

课堂教学以PPT讲授为主，并结合多媒体进行教学

教

学

过

程

第一课时

（Bootstrap概述、Bootstrap的特点、Bootstrap的组成）

一、通过直接引入的方式导入新课

Bootstrap是一款开源的前端UI框架，用于构建响应式、移动设备优先的项目，因其学习成本低、上手容易等优势，深受开发者的欢迎。本节课将详细讲解Bootstrap概述、Bootstrap的特点和Bootstrap的组成。

二、新课讲解

知识点1-Bootstrap概述

教师通过PPT的方式讲解Bootstrap概述。

什么是Bootstrap。

Bootstrap发展经历的5个大版本。

1.x版本。

2.x版本。

3.x版本。

4.x版本。

5.x版本。

知识点2-Bootstrap的特点

教师通过PPT的方式讲解Bootstrap的特点。

Bootstrap的特点。

移动设备优先。

浏览器支持。

学习成本低、容易上手。

响应式设计。

快速开发。

方便定制。

知识点3-Bootstrap的组成

教师通过PPT的方式讲解Bootstrap的组成。

Bootstrap的组成。

CSS样式。

布局组件。

JavaScript插件。

图标库。

三、归纳总结

教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。

四、布置作业

教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。

第二课时

（PC端浏览器、移动端浏览器）

一、复习巩固

教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。

二、通过直接引入的方式导入新课

浏览器（WebBrowser）是一种用于检索、展示以及传递万维网信息资源的应用程序，它是互联网时代的产物，可以用来显示网页、图像、影音及其他内容，以便用户与网页进行交互。按照设备类型划分，可以将浏览器分为PC端浏览器和移动端浏览器两大类。本节课将详细讲解PC端浏览器和移动端浏览器。

三、新课讲解

知识点1-PC端浏览器

教师通过PPT的方式讲解PC端浏览器。

什么是PC端浏览器。

常见的PC端浏览器。

Chrome浏览器。

InternetExplorer（简称IE）浏览器。

Edge浏览器。

Firefox浏览器。

Safari浏览器。

Chrome浏览器的主要优势。

高速浏览。

安全性。

扩展生态系统。

跨平台同步。

开发者工具。

知识点2-移动端浏览器

教师通过PPT的方式讲解移动端浏览器。

什么是移动端浏览器。

什么是移动设备。

常见的移动设备。

手机。

平板电脑。

可穿戴设备，如智能手表和智能眼镜等。

常见的移动端浏览器。

Android浏览器。

Safari浏览器。

UC浏览器。

QQ浏览器。

百度浏览器