HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）教案 第1章 HTML5+CSS3网页设计概述-教学设计

第1章PHP开篇PAGE16《HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第1章HTML5+CSS3网页设计概述计划课时4课时教学引入随着移动互联网的发展，人们可以通过手机、平板电脑等移动设备来浏览网页，包括查看新闻、观看图像和视频等。网页已经成为人们获取信息的重要媒介，它可以展示文本、图像和视频等可视化内容。在学习网页制作之前，了解网页的相关知识是非常重要的，这将为初学者学习后面的内容打下坚实的基础。本章将对网页的相关知识进行讲解。教学目标使学生了解网页的组成，能够描述网页的各个组成部分使学生了解网页的相关名词，能够解释常见的网页名词使学生熟悉Web标准，能够阐明Web标准的概念使学生熟悉网页制作技术，能够说明HTML、CSS和JavaScript在网页制作中的作用使学生熟悉浏览器的基本概念，能够归纳浏览器的功能和Chrome浏览器的主要优势使学生掌握VisualStudioCode编辑器的下载和安装，能够独立下载和安装VisualStudioCode编辑器使学生掌握扩展的安装，能够独立完成中文语言扩展和LiveServer扩展的安装使学生掌握VisualStudioCode编辑器的简单使用，能够使用VisualStudioCode编辑器进行代码开发教学重点VisualStudioCode编辑器的简单使用教学难点无教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（网页的组成、网页的相关名词、Web标准）一、通过直接引入的方式导入新课说到网页和网站其实大家并不陌生，我们用计算机在网上浏览新闻、查询信息、查看图片等都是在浏览网页，同时我们也会登录淘宝、京东等网站购物。但是，对于网页制作的初学者来说，还是有必要了解网页和网站的相关知识。本节课将对网页的组成、网页的相关名词、Web标准知识点进行具体讲解。二、新课讲解知识点1-网页的组成教师通过PPT的方式讲解网页的组成。认识网页认识网站知识点2-网页的相关名词教师通过PPT的方式讲解网页的相关名词。InternetWWWURLDNSHTTP和HTTPSWebW3C知识点3-Web标准教师通过PPT的方式讲解Web标准。结构表现行为三、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。四、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（HTML、CSS、JavaScript、浏览器）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课HTML、CSS和JavaScript作为网页制作的核心技术，支撑着绝大多数网页的构建与运行。本节将对它们进行简单介绍，让大家能够快速了解其各自特点，对网页制作有一个简单认识。三、新课讲解知识点1-HTML教师通过PPT的方式讲解HTML。介绍什么是HTML。介绍HTML5的主要优势。跨设备和平台的兼容性更好语义化标签的增强视频和音频支持的改进图形功能的优化表知识点2-CSS教师通过PPT的方式讲解CSS。介绍什么是CSS。介绍CSS的发展历程。知识点3-JavaScript教师通过PPT的方式讲解JavaScript。介绍JavaScript。介绍JavaScript的发展历程。知识点4-浏览器教师通过PPT的方式讲解浏览器。介绍浏览器介绍3种常用的浏览器Edge浏览器Firefox浏览器Chrome浏览器速度快安全性高跨平台支持四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（下载和安装VisualStudioCode编辑器、安装扩展、VisualStudioCode编辑器的简单使用）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课HTML、CSS和JavaScript作为网页制作的核心技术，支撑着绝大多数网页的构建与运行。本节将对它们进行简单介绍，让大家能够快速了解其各自特点，对网页制作有一个简单认识。三、新课讲解知识点1-下载和安装VisualStudioCode编辑器教师通过PPT的方式讲解下载和安装VisualStudioCode编辑器。介绍VSCode演示下载和安装VSCode编辑器。知识点2-安装扩展教师通过PPT的方式讲解安装扩展。演示如何在VSCode编辑器中安装中文语言扩展和LiveServer扩展。安装中文语言扩展安装LiveServer扩展知识点3-VisualStudioCode编辑器的简单使用教师通过PPT的方式讲解VisualStudioCode编辑器的简单使用。使用VSCode编辑器进行HTML代码的开发为例进行讲解。创建项目文件夹打开项目文件夹创建HTML文档生成HTML文档结构编写页面代码第四课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情