HTML+CSS+JavaScript网页制作案例教程(AI助学)(第3版)教案 第2章 构建HTML页面-教学设计_第1页
HTML+CSS+JavaScript网页制作案例教程(AI助学)(第3版)教案 第2章 构建HTML页面-教学设计_第2页
HTML+CSS+JavaScript网页制作案例教程(AI助学)(第3版)教案 第2章 构建HTML页面-教学设计_第3页
HTML+CSS+JavaScript网页制作案例教程(AI助学)(第3版)教案 第2章 构建HTML页面-教学设计_第4页
HTML+CSS+JavaScript网页制作案例教程(AI助学)(第3版)教案 第2章 构建HTML页面-教学设计_第5页
已阅读5页,还剩1页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第1章PHP开篇PAGE16《HTML+CSS+JavaScript网页制作案例教程(AI助学)(第3版)》教学设计课程名称:授课年级:授课学期:教师姓名:年月课题名称第2章构建HTML5页面计划课时4课时教学引入HTML作为一门标记语言,主要用来描述网页中的文字和图像等信息,目前HTML5已逐渐成为移动互联网的主流。但是什么是HTML,又该如何使用HTML标签控制网页中的文字和图像等信息呢?本章将对构建HTML5页面的基础知识进行详细讲解。教学目标使学生了解HTML文档的基本格式,能够遵循HTML结构规范使学生了解标签分类,能够描述单标签和双标签的特点使学生了解HTML文档头部标签,能够说出HTML文档头部各标签的作用使学生了解图像格式,能够描述常见图像格式的特点使学生熟悉相对路径和绝对路径,能够归纳相对路径和绝对路径的特点使学生熟悉标签的属性,能够通过标签的属性为网页元素设置差异化样式使学生掌握页面格式化标签的用法,能够灵活应用页面格式化标签定义网页元素使学生掌握HTML文档头部标签的用法,能够使用HTML文档头部标签设置页面基本信息使学生掌握文本格式化标签的用法,能够使用文本格式化标签为文字设置特殊的显示效果使学生掌握图像标签的用法,能够使用图像标签为网页添加图片使学生了解特殊字符的用法,能够为网页添加特殊字符教学重点页面格式化标签案例2-1剪纸介绍页面案例2-2新闻页面图像标签案例2-3图文混排页面教学难点HTML文档头部标签教学方式课堂教学以PPT讲授为主,并结合多媒体进行教学教学过程第一课时(HTML文档的基本格式、标签分类、标签属性、页面格式化标签、案例2-1剪纸介绍页面)一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课HTML作为一门标记语言,主要用来描述网页中的文字和图像等信息,目前HTML5已逐渐成为移动互联网的主流。但是什么是HTML,又该如何使用HTML标签控制网页中的文字和图像等信息呢?本节课将具体介绍HTML文档的基本格式、标签分类、标签属性等知识点。三、新课讲解知识点1-HTML文档的基本格式教师通过PPT的方式讲解认识HTML文档的基本格式。<!DOCTYPE><html><head><body>知识点2-标签分类教师通过PPT的方式讲解标签分类。单标签双标签注释标签知识点3-标签属性教师通过PPT的方式讲解标签属性。标签属性的作用HTML标签设置属性的语法格式演示如何使用标签的属性对网页进行修饰知识点4-页面格式化标签教师通过PPT的方式讲解页面格式化标签。标题标签段落标签水平线标签换行标签知识点5-案例2-1剪纸介绍页面教师通过PPT的方式讲解案例2-1剪纸介绍页面。分析效果图搭建页面结构四、归纳总结教师回顾本节课所讲的内容,并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课的预习作业。第二课时(HTML文档头部标签、文本格式化标签、案例2-2新闻页面)一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课不管网页内容如何丰富,文字自始至终都是网页中最基本的元素。为了使文字排版整齐、结构清晰,HTML中提供了一系列文本控制标签,如<h1>~<h6>、段落标签<p>等。本节课将具体介绍HTML文档头部标签和文本格式化标签知识点。三、新课讲解知识点1-HTML文档头部标签教师通过PPT的方式讲解认识HTML文档头部标签。<title>标签<meta>标签知识点2-文本格式化标签教师通过PPT的方式讲解文本格式化标签。介绍常用的文本样式标签通过代码演示文本格式化标签的使用知识点3-案例2-2新闻页面教师通过PPT的方式讲解案例2-2新闻页面。分析效果图结构分析搭建页面结构四、归纳总结教师回顾本节课所讲的内容,并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课的预习作业。第三课时(常见图像格式、图像标签、相对路径和绝对路径、特殊字符、案例2-3图文混排页面)一、复习巩固教师通过上节课作业的完成情况,对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课浏览网页时我们常常会被网页中的图像所吸引,巧妙地在网页中穿插图像可以让网页内容变得更加丰富多彩。本节课将为大家介绍几种常用的图像格式,以及在网页中插入图像的技巧。三、新课讲解知识点1-常见图像格式教师通过PPT的方式讲解常见图像格式。GIF格式PNG格式JPEG格式WebP格式知识点2-图像标签教师通过PPT的方式讲解常见图像格式。图像标签的语法<img>标签的常用属性介绍alt、title、width和height属性。知识点3-相对路径和绝对路径教师通过PPT的方式讲解相对路径和绝对路径。绝对路径相对路径知识点4-特殊字符教师通过PPT的方式讲解特殊字符。介绍特殊字符及对应的代码。知识点5-案例2-3图文混排页面教师通过PPT的方式讲解案例2-3图文混排页面。分析效果图搭建页面结构四、归纳总结教师回顾本节课所讲的内容,并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课的预习作业。第四课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点,以及在程序中容易出错的内容进行练习,通过上机练习可以考察同学对知识点的掌握情况,对代码的熟练程度。上机一:(考察知识点为:案例2-1剪纸介绍页面)形式:单独完成具体要求:按照HTML文档的基本格式,运用多种标签制作一个剪纸介绍页面。上机二:(考察知识点为

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论