一体化全书教案教学设计.docx

资源描述

一体化全书教案完整版教学设计课程 HTML5 授课教师林晓仪课题项目1制作一个网页广告单页的内容分课题任务1.3 在网页中添加段落、文字和列表授课班级 16五年制电子商务2班授课日期 2022.02.28 2022.03.02 课时 8课时学习目标专业理论知识学生能够表述常见HTML格式化文本标签的含义实际操作技能学生能够在网页中按要求正确应用HTML文本标签重点能够在网页中按要求应用HTML文本标签难点能够在网页中按要求应用HTML文本标签教学对象分析授课班级为15五年制电子商务2班，因之前已学过网页相关知识，对网页制作有一定了解，在教学时应联系现实生活中的例子进行讲解。教学场地与教具教学场地：机房教具：计算机课后分析安全注意事项及其它说明 1、提醒学生注意用电安全。 2、提醒学生不要将食品饮料带入机房。审阅签名：年月日项目1 制作一个简单文章网页教学过程任务1.2 在网页中添加段落和文字教学环节教师活动学生活动时间分配备注说明组织教学 1、严格遵守上下课时间，上课铃响前5分钟进入教室； 2、检查学生的仪容仪表，严禁带食品和饮料进入教室； 3、检查教室线路布置，提醒学生注意用电安全； 4、按照固定座位清点人数； 5、提醒学生检查是否将电脑接入英特网； 6、利用红蜘蛛软件将教学资料“素材”文件夹发送到学生电脑的文件接收柜中，同时将文件放置在教师机共享文件夹供学生访问查阅。 1、提前5分钟按照固定座位就坐； 2、不带食品饮料进入教室（机房）； 3、开机，配置好IP地址，确保红蜘蛛软件运行并链接教师机，同时能够访问英特网； 4、注意电脑接电用电安全。课前5分钟营造上课环境，保证用电安全任务引入 1、讲解现实生活中网页制作的用处，明白本门课程的作用 2、明确本次任务在项目完成中的地位：（加▲为本次课任务）步骤一：制作一个网页广告单页的内容（本项目（即项目一））任务1 工作环境准备任务2 创建一个空白网页任务3 在网页中添加段落、文字和列表任务5 在网页中添加表格任务6 在网页中添加图片任务7 在网页中添加超链接任务8 在网页中添加表单 3、任务要求按HTML格式化文本标签要求，在新建的空白页面中添加《移动网页广告单页的内容》文字和段落内容。与教师一起回忆上次课的内容。理解本次课程任务要求 10分钟 1、明确本次课程要完成的任务在项目中的位置 2、明确本次课程任务要求预备知识【教师讲解理论知识，操作并演示课程练习，在学生操作课堂练习时巡视并辅导学生完成】 1、标题标签<h1>-<h6> 一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<hn>，其中n为标题的等级，HTML总共提供六个等级的标题，即h1~h6，h1定义最大的标题，h6定义最小的标题。其语法形式如下： 1级标题：<h1></h1> 2级标题：<h2></h2> …… 6级标题：<h6></h6> 【课堂练习1.1-1 显示6级标题的效果】打开Visual Studio Code软件，在<body>标签中输入如下代码： 1 2 3 4 5 6 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> 显示效果如下：图1.3-1显示6级标题效果 2、段落标签<p> 在网页制作的过程中，常常需要将一篇文章分成相应的段落，只需要在内容前加<p>内容后加</p>即可实现文章换段落。其语法形式如下： <p>段落文字</p> 【课堂练习1.3-2使用标题和段落的网页】打开Dreamweaver软件，在<body>标签中输入如下代码： 1 2 3 4 <h1>段落标签</h1> <p>我是第一段落</p> <p>我是第二段落</p> <p>我是第三段落</p> 显示效果如下：图1.3-2使用了标题和段落的网页 3、通用div块无素<div> div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 div是一个块级元素，也就是说，浏览器通常会在div元素前后放置一个换行符。其语法形式如下： <div>…任何网页元素（标签）</div> 注释：HTML中的元素可分为两种类型：块级元素和行级元素。块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如前面所讲过的p,h1,div等标签元素。行内元素：元素在一行内水平排列，高度由元素的内容决定，height属性不起作用，如后面要讲的span,a等元素。【课堂练习1.3-3使用div分割文档】打开Visual Studio Code软件，在<body>标签中输入如下代码： 1 2 3 4 5 6 7 8 <div> <h1>h1标题标签</h1> <p>我是第一段落</p> </div> <div> <h2>h2标题标签</h2> <p>我是第二段落</p> </div> 效果显示如下：图1.3-3使用div分割文档 4、通用内联元素<span> span标签是被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式（在后面的章节中会进行详细讲解）时，它才会产生视觉上的变化。 span标签在行内定义一个区域，也就是一行内可以被span划分成好几个区域，从而实现某种特定效果。span标签本身没有任何属性。其语法形式如下： <span>要修改样式的文字</span> 【课堂练习1.3-4使用span标签】打开Visual Studio Code软件，在<body>标签中输入如下代码： 1 2 3 4 5 6 7 8 <div> <h1>h1标题标签</h1> <p>我是第一段落中的<span>span</span></p> </div> <div> <h2>h2标题标签</h2> <p>我是第二段落<span>span</span></p> </div> 效果显示如下：图1.3-4使用span标签听讲根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。 130分钟边讲边练，完成理论知识的学习任务实施要求学生参考如下步骤完成任务：（教师巡视并辅导学生的任务完成）（1）打开任务2中的index.html文件。（2）完成网页广告单页中标题和段落的编写。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <body> <header> <nav> <nav> </header> <div> <h1>程序猿，攻城狮</h1> <p>是的，这是别人对我们的称呼。……</p> </div> <div> <h3>关于我们</h3> <p>信息工程系是华南工业大学建立较早的系，……</p> <h3>本科生招生计划</h3> </div> <div> <h2>本科专业介绍</h2> <hr /> <p>目前我校的信息工程系主要开设有……</p> <h3>计算机科学与技术</h3> <p>本专业分为嵌入式和物联网两个方向……</p> <h3>软件工程</h3> <p>本专主要培养具备良好科学素养……</p> </div> …… <footer>Copyright © 2015 信息工程系.华南工业大学</footer> </body> 学生在总结前面课堂练习知识的基础上，参考教师提供的操作步骤（左边）独立完成任务的实施。 200分钟 1、提供学生的知识迁移能力 2、提高学生的自学能力和问题解决能力任务总结 1、文字不仅是网页信息传达的一种常用方式，也是视觉传达最直接的方式，运用经过精心处理的文字材料完全可以制作出效果很好的版面。 2、在HTML语言中，使用<h1>～<h6>标签来定义页面上1～6级的标题；使用<p>标签来定义段落；使用<br>标签将文字进行软换行；还可以使用其它标签和特殊字符来制作网页中的各种元素。 3、根据学生任务完成的情况进行总结。听讲根据教师的总结找出自己在任务完成时存在的不足。 5分钟总结任务并回顾教学目标的知识和技能目标任务评价评价兴趣 √ √ √ （不感兴趣，没学会）学会（认知） √ √ 【评价】 9分钟建立评价机制：自评作业布置通过查看源代码的方式，查看部分网页的内容文本所使用的标签是否与我们所用的相同，不管是与不是，请将你查看的网页代码截图发教师邮箱：理解作业要求 1分钟加强课堂知识的巩固与迁移清洁整理１、设备恢复和整理。２、教学场地的清洁。３、人走五关（关门、关窗、关灯、关风扇，关电源）。清洁整理值日生打扫卫生课后5分钟清洁整理 - 1 - 7.5.1-13-j-02 课程 HTML5 授课教师林晓仪课题项目1制作一个网页广告单页的内容分课题任务1.2 创建空白网页授课班级 16五年制电子商务2班授课日期 2022.2.23 课时 4课时学习目标专业理论知识 1、学生能够了解HTML的概念 2、学生能够掌握HTML的基本结构实际操作技能 1、能够输入基本的网页结构标签 2、能够使用Visual Studio Code新建和保存页面重点 HTML基本的标签语法难点 HTML5新增结构标签教学对象分析授课班级为15五年制电子商务2班，因之前已学过网页相关知识，对网页制作有一定了解，在教学时应联系现实生活中的例子进行讲解。教学场地与教具教学场地：机房教具：计算机课后分析安全注意事项及其它说明 1、提醒学生注意用电安全。 2、提醒学生不要将食品饮料带入机房。审阅签名：年月日项目1 制作一个简单文章网页教学过程任务1.2 在网页中添加段落和文字教学环节教师活动学生活动时间分配备注说明组织教学 1、严格遵守上下课时间，上课铃响前5分钟进入教室； 2、检查学生的仪容仪表，严禁带食品和饮料进入教室； 3、检查教室线路布置，提醒学生注意用电安全； 4、按照固定座位清点人数； 5、提醒学生检查是否将电脑接入英特网； 6、利用红蜘蛛软件将教学资料“素材”文件夹发送到学生电脑的文件接收柜中，同时将文件放置在教师机共享文件夹供学生访问查阅。 1、提前5分钟按照固定座位就坐； 2、不带食品饮料进入教室（机房）； 3、开机，配置好IP地址，确保红蜘蛛软件运行并链接教师机，同时能够访问英特网； 4、注意电脑接电用电安全。课前5分钟营造上课环境，保证用电安全任务引入 1、讲解现实生活中网页制作的用处，明白本门课程的作用 2、明确本次任务在项目完成中的地位：（加▲为本次课任务）步骤一：制作一个网页广告单页的内容（本项目（即项目一））任务1 工作环境准备 u 任务2 创建一个空白网页任务3 在网页中添加段落和文字任务4 在网页中添加列表任务5 在网页中添加表格任务6 在网页中添加图片任务7 在网页中添加超链接任务8 在网页中添加表单 3、任务要求使用Visual Studio Code新建并保存一个简单的基本页面与教师回忆上次课的内容。理解本次课程任务要求 10分钟 1、明确本次课程要完成的任务在项目中的位置 2、明确本次课程任务要求预备知识【教师讲解理论知识，操作并演示课程练习，在学生操作课堂练习时巡视并辅导学生完成】 1、HTML概念 HTML（HyperText Mark-up Language，超文本标记语言或超文本链接标示语言），是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。 2、HTML文本基本结构一个网页对应于一个HTML文件，HTML文件以.htm或.html为扩展名。HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，主体部分包含网页所要说明的具体内容。其完整结构如下所示： 1 2 3 4 5 6 7 8 9 <！doctype html> <html> <head> <meta charset="gb2312"> <title>无标题文档</title> </head> <body> </body> </html> 其中<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。 <html></html>标签标识了文件的开头与结尾，表示这对标记间的内容是HTML文档。 <head></head>标记包含了文件的头部，标记内的内容不在浏览器中显示，主要用来说明文件的有关信息，如文件标题、作者、编写时间等。 <meta>标签没有结束标签，位于head元素内部，<meta>标签的属性定义了与文档相关联的名称和值。例如<meta charset="gb2312">表示使用的字符编码为简体中文编码，比较常见的还有国际化编码UTF-8。在head标记内最常用的标记是<title></title>，该标记是网页主题标记，提示网页内容和功能的文字，它将出现在浏览器的标题栏中。 <body></body>标记是HTML文档的主体部分，网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。【课题练习1.2-1：录入一个完整的网页结构标签】打开记事本，输入如下标签： 1 2 3 4 5 6 7 8 9 10 <！doctype html> <html> <head> <meta charset="gb2312"> <title>这是一个完整的网页结构标签</title> </head> <body> <p>欢迎光临我的网页！</p> </body> </html> 3、移动设备的HTML基本结构电脑经过多年的发展，现在显示器的屏幕分辨率已经能够达到1024x768及更高的1280x1024等。因此我们的移动设备无法将普通网页全屏显示在移动设备上，虽然通过屏幕放大缩小也可访问传统的网页，也由于用户体验不佳，很难得到实际的应用。为了增加对移动设备的友好，应该将针对移动设备的样式融合进框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。 <meta name="viewport" content="width=device-width, initial-scale=1"> 在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 【课题练习1.2-2：录入一个完整的移动设备网页结构标签】打开记事本，输入如下标签： <！doctype html> <html lang="zh-CN"> <head> <meta charset="gb2312"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>这是一个完整的网页结构标签</title> </head> <body> <p>欢迎光临我的网页！</p> </body> </html> 其中<html lang="zh-CN">主要是告诉各个浏览器用的这种字符集，如果没有，那么浏览器就按各自默认的字符来显示，这样各个浏览器显示就可能不一样了。听讲根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。 90分钟边讲边练，完成理论知识的学习任务实施要求学生参考如下步骤完成任务：（教师巡视并辅导学生的任务完成）（1）打开任务1中的index.html文件。（2）完成网页广告单页HTML结构的编写。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!doctype html > <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>信息工程系</title> </head> <body> <header> <nav> </nav> </header> <footer>Copyright © 2015 信息工程系.华南工业大学 </footer> </body> </html> 学生在总结前面课堂练习知识的基础上，参考教师提供的操作步骤（左边）独立完成任务的实施。 60分钟 3、提供学生的知识迁移能力 4、提高学生的自学能力和问题解决能力任务总结 1、HTML是网页主要的组成部分，基本上每一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。 2、HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，主体部分包含网页所要说明的具体内容。 3、根据学生任务完成的情况进行总结。听讲根据教师的总结找出自己在任务完成时存在的不足。 5分钟总结任务并回顾教学目标的知识和技能目标任务评价评价兴趣 √ √ √ （不感兴趣，没学会）学会（认知） √ √ 【评价】 9分钟建立评价机制：自评作业布置通过查看源代码的方式，查看部分网页的内容文本所使用的标签是否与我们所用的相同，不管是与不是，请将你查看的网页代码截图发教师邮箱：理解作业要求 1分钟加强课堂知识的巩固与迁移清洁整理１、设备恢复和整理。２、教学场地的清洁。３、人走五关（关门、关窗、关灯、关风扇，关电源）。清洁整理值日生打扫卫生课后5分钟清洁整理 - 14 - 7.5.1-13-j-02 课程 HTML5 授课教师林晓仪课题项目1制作一个网页广告单页的内容分课题任务1.3在网页中添加表格和图片授课班级 16五年制电子商务（2）班授课日期 2022.03.07 2022.03.09 课时 8课时学习目标专业理论知识 1、学生能够说出表格的三个基本标签 2、学生能够表述适合在网页中使用的图片格式实际操作技能 1、学生能够在网页中使用表格标签对表格的数据结构进行编排，从而呈现数据间的关系 2、学生能够区分绝对路径和相对路径 3、学生能够在网页中正确添加图片 4、学生能够正确设置图片属性重点能够按要求在网页中使用表格及正确添加图片难点学生能够区分绝对路径和相对路径教学对象分析授课班级为16五年制电子商务2班，因之前未学过网页基础知识，在教学时应根据教学实际适当调整教学进度和教学内容难度。教学场地与教具教学场地：机房教具：计算机课后分析安全注意事项及其它说明 1、提醒学生注意用电安全。 2、提醒学生不要将食品饮料带入机房。审阅签名：年月日教学环节教师活动学生活动备注说明组织教学（课前5分钟） 1.严格遵守上下课时间，上课铃响前走入班级。 2.课堂教学所需的用具齐全。 3.上课前要求学生准备好学习用品，上课时保证学生全身心投入。 4.强调关键知识和方法，让学生及时做好笔记。 5.禁止在课堂上做一些与教学无关的事。 1、提前5分钟按照固定座位就坐； 2、不带食品饮料进入教室（机房）； 3、注意电脑接电用电安全。营造上课环境，保证用电安全项目引入（5分钟） 1、回顾项目要求及上次课内容（1）项目要求：完成一个简单网页（2）上次课已完成任务：在网页中添加了列表（复习并讲解列表标签） 2、明确本次任务在项目完成中的地位：（加▲为本次课任务）步骤一：制作网页内容（本项目（即项目一））任务1.1 安装软件并创建空白页面任务1.2 在网页中添加段落文字和列表 ▲任务1.3 在网页中添加表格和图片任务1.4 在网页中添加超链接和表单步骤二：编辑内容格式（项目二使用CSS设置网页格式） 3、任务要求（1）根据《百度搜索引擎网页质量白皮书》效果图，制作该白皮书中的表格。（2）根据“网页广告单页”效果图，添加该网页中的相关图片。 1、与教师共同回顾之前学过的内容； 2、明确本次课程的任务。 1、明确本次课程要完成的任务在项目中的位置 2、明确本次课程任务要求预备知识1 （100分钟）预备知识1 （100分钟）预备知识1 （100分钟）预备知识1 （100分钟）预备知识1 （100分钟）表格的作用是组织信息。HTML表格就像是电子表格，由行和列构成，每个表格单元格处于行和列的交汇处。 1、表格由table元素来定义，以<table>标记开始，</table>标记结束。 2、表格中的行以tr元素来定义，每一行都以<tr>标记开始，</tr>标记结束。 3、表格中的单元格以td元素来定义，每个单元格都以<td>标记开始，</td>标记结束。 4、表格单元格的可包含文本、图片和其他的HTML元素。其语法形式如下： <table> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> …… </tr> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> …… </tr> …… </table> 【课堂练习1.5-1创建简单的两行两列表格】打开Visual Studio Code软件，在<body>标签中输入如下代码： 1 2 3 4 5 6 7 8 9 10 11  <table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> 显示效果如下：图1.5-1简单的两行两列表格默认情况下，表格没有边框线，可以使用样式表为其定义边框线，定义线条样式，粗细和边框颜色。这在后面的章节中会学到。 1、表格的标题（caption元素）每一个表格都可以通过caption元素来对表格的目的作一个简单的说明，caption元素的内容用来描述表格的特征，并且caption元素必须紧接着table元素开始标签后被定义，一个table元素中仅能包含一个caption元素。其语法形式如下： <table> <caption>东部地区的人均GDP增长</caption> …… </table> 【课堂练习1.5-2添加表格标题】打开Visual Studio Code软件，在<body>标签中输入如下代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16  <table> <caption>东部地区的人均GDP增长</caption> <tr> <td>第一季度</td> <td>第二季度</td> <td>第三季度</td> <td>第四季度</td> </tr> <tr> <td>20.4</td> <td>27.4</td> <td>90</td> <td>20.4</td> </tr> </table> 显示效果如下：图1.5-2添加表格标题 3、表格的表头（th元素）在表格中还有一种特殊的单元格，称为表头。表格的表头一般位于第1行和第1列，用来配置列标题或行标题，用<th>和</th>标签来表示。表格的表头与<td>标签使用方法相同，但表头元素中的文本居中和加粗显示。其语法形式如下： <table> <tr> <th>表格的表头</th> <th>表格的表头</th> …… </tr> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> …… </tr> …… </table> 【课堂练习1.5-3添加表格表头】打开Visual Studio Code软件，在<body>标签中输入如下代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18  <table> <caption>部分地区常住人口数据统计</caption> <tr> <th>部分地区</th> <th>北京</th> <th>天津</th> <th>河北</th> <th>山东</th> </tr> <tr> <td>人数</td> <td>1962368</td> <td>12938224</td> <td>71854202</td> <td>95793065</td> </tr> </table> 显示效果如下：图1.5-3添加表格表头 4、跨多行、多列的单元格单元格可以跨越多个竖列或横行的多个单元格，跨越竖列或横行的数量通过colspan或rowspan属性来对th或td元素进行设置。（1）colspan属性指定单元格所占的列数。其语法形式如下： <td rowspan=跨的行数> （2）rowspan属性指定单元格所占的行数。其语法形式如下： <td colspan=跨的列数> 根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有标题标签网页的课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有段落标签网页的课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有段落标签网页的课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有段落标签网页的课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有段落标签网页的课堂练习，并测试代码。边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习任务实施1 （88分钟）布置学生完成如下任务：（巡视并辅导学生的任务完成）（1）打开任务4中的index.html文件（2）完成网页广告单页中表格显示效果学生在总结前面课堂练习知识的基础上，独立完成任务的实施。 1、提供学生的知识迁移能力； 2、提高学生的自学能力和问题解决能力任务回顾1 （5分钟）在日常生活中，我们对表格式数据已经很熟悉了。这种数据有多种形式，如财务数据、调查数据、事

展开阅读全文