一体化全书教案完整版教学设计

1、一体化全书教案完整版教学设计课 程HTML5授课教师林晓仪课 题项目1制作一个网页广告单页的内容分课题任务1.3 在网页中添加段落、文字和列表授课班级16五年制电子商务2班授课日期2022.02.282022.03.02课时8课时学习目标专业理论知识学生能够表述常见HTML格式化文本标签的含义实际操作技能学生能够在网页中按要求正确应用HTML文本标签重 点能够在网页中按要求应用HTML文本标签难 点能够在网页中按要求应用HTML文本标签教学对象分析授课班级为15五年制电子商务2班，因之前已学过网页相关知识，对网页制作有一定了解，在教学时应联系现实生活中的例子进行讲解。教学场地与教具教学场地：机

2、房 教具：计算机课后分析安全注意事项及其它说明1、提醒学生注意用电安全。2、提醒学生不要将食品饮料带入机房。审阅签名： 年 月 日项目1 制作一个简单文章网页教 学 过 程任务1.2 在网页中添加段落和文字- -教学环节教师活动学生活动时间分配备注说明组织教学1、严格遵守上下课时间，上课铃响前5分钟进入教室；2、检查学生的仪容仪表，严禁带食品和饮料进入教室；3、检查教室线路布置，提醒学生注意用电安全；4、按照固定座位清点人数；5、提醒学生检查是否将电脑接入英特网；6、利用红蜘蛛软件将教学资料“素材”文件夹发送到学生电脑的文件接收柜中，同时将文件放置在教师机共享文件夹供学生访问查阅。1、提前5分

3、钟按照固定座位就坐；2、不带食品饮料进入教室（机房）；3、开机，配置好IP地址，确保红蜘蛛软件运行并链接教师机，同时能够访问英特网；4、注意电脑接电用电安全。课前5分钟营造上课环境，保证用电安全任务引入1、讲解现实生活中网页制作的用处，明白本门课程的作用2、明确本次任务在项目完成中的地位：（加为本次课任务）步骤一：制作一个网页广告单页的内容（本项目（即项目一）任务1 工作环境准备任务2 创建一个空白网页任务3 在网页中添加段落、文字和列表任务5 在网页中添加表格任务6 在网页中添加图片任务7 在网页中添加超链接任务8 在网页中添加表单3、任务要求按HTML格式化文本标签要求，在新建的空白页面中

4、添加移动网页广告单页的内容文字和段落内容。与教师一起回忆上次课的内容。理解本次课程任务要求10分钟1、明确本次课程要完成的任务在项目中的位置2、明确本次课程任务要求预备知识【教师讲解理论知识，操作并演示课程练习，在学生操作课堂练习时巡视并辅导学生完成】1、 标题标签-一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签，其中n为标题的等级，HTML总共提供六个等级的标题，即h1h6，h1定义最大的标题，h6定义最小的标题。其语法形式如下：1级标题：2级标题：6级标题：【课堂练习1.1-1 显示6级标题的效果】打开Visual Studio Code软件，在标签中输入如下代码

5、：123456一级标题二级标题三级标题四级标题五级标题六级标题显示效果如下：图1.3-1显示6级标题效果2、段落标签在网页制作的过程中，常常需要将一篇文章分成相应的段落，只需要在内容前加内容后加即可实现文章换段落。其语法形式如下：段落文字【课堂练习1.3-2使用标题和段落的网页】打开Dreamweaver软件，在标签中输入如下代码：1234段落标签我是第一段落我是第二段落我是第三段落显示效果如下：图1.3-2使用了标题和段落的网页3、通用div块无素div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。div是一个块级元素，也就是说，浏览器通常会在

6、div元素前后放置一个换行符。其语法形式如下：任何网页元素（标签）注释：HTML中的元素可分为两种类型：块级元素和行级元素。块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如前面所讲过的p,h1,div等标签元素。行内元素：元素在一行内水平排列，高度由元素的内容决定，height属性不起作用，如后面要讲的span,a等元素。【课堂练习1.3-3使用div分割文档】打开Visual Studio Code软件，在标签中输入如下代码：12345678 h1标题标签 我是第一段落 h2标题标签 我是第二段落效果显示如下：图1.3-3使用div分割文档4、通用内联元素span标

7、签是被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式（在后面的章节中会进行详细讲解）时，它才会产生视觉上的变化。span标签在行内定义一个区域，也就是一行内可以被span划分成好几个区域，从而实现某种特定效果。span标签本身没有任何属性。其语法形式如下：要修改样式的文字【课堂练习1.3-4使用span标签】打开Visual Studio Code软件，在标签中输入如下代码：12345678 h1标题标签 我是第一段落中的span h2标题标签 我是第二段落span效果显示如下：图1.3-4使用span标签听讲根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码

8、。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。130分钟边讲边练，完成理论知识的学习任务实施要求学生参考如下步骤完成任务：（教师巡视并辅导学生的任务完成）（1）打开任务2中的index.html文件。（2）完成网页广告单页中标题和段落的编写。12345678910111213141516171819202122232425

9、2627 程序猿，攻城狮 是的，这是别人对我们的称呼。 关于我们 信息工程系是华南工业大学建立较早的系， 本科生招生计划 本科专业介绍 目前我校的信息工程系主要开设有 计算机科学与技术 本专业分为嵌入式和物联网两个方向 软件工程 本专主要培养具备良好科学素养 Copyright 2015 信息工程系.华南工业大学学生在总结前面课堂练习知识的基础上，参考教师提供的操作步骤（左边）独立完成任务的实施。200分钟提供学生的知识迁移能力提高学生的自学能力和问题解决能力任务总结1、文字不仅是网页信息传达的一种常用方式，也是视觉传达最直接的方式，运用经过精心处理的文字材料完全可以制作出效果很好的版面。2、

10、在HTML语言中，使用标签来定义页面上16级的标题；使用标签来定义段落；使用标签将文字进行软换行；还可以使用其它标签和特殊字符来制作网页中的各种元素。3、根据学生任务完成的情况进行总结。听讲根据教师的总结找出自己在任务完成时存在的不足。5分钟总结任务并回顾教学目标的知识和技能目标任务评价评价 兴趣 （不感兴趣，没学会） 学会（认知） 【评价】9分钟建立评价机制：自评作业布置通过查看源代码的方式，查看部分网页的内容文本所使用的标签是否与我们所用的相同，不管是与不是，请将你查看的网页代码截图发教师邮箱：理解作业要求1分钟加强课堂知识的巩固与迁移清洁整理、设备恢复和整理。、教学场地的清洁。、人走五关

11、（关门、关窗、关灯、关风扇，关电源）。清洁整理值日生打扫卫生课后5分钟清洁整理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班，因之前已学过网页相关知识，对网页制作有一定

12、了解，在教学时应联系现实生活中的例子进行讲解。教学场地与教具教学场地：机房 教具：计算机课后分析安全注意事项及其它说明1、提醒学生注意用电安全。2、提醒学生不要将食品饮料带入机房。审阅签名： 年 月 日项目1 制作一个简单文章网页教 学 过 程任务1.2 在网页中添加段落和文字- -教学环节教师活动学生活动时间分配备注说明组织教学1、严格遵守上下课时间，上课铃响前5分钟进入教室；2、检查学生的仪容仪表，严禁带食品和饮料进入教室；3、检查教室线路布置，提醒学生注意用电安全；4、按照固定座位清点人数；5、提醒学生检查是否将电脑接入英特网；6、利用红蜘蛛软件将教学资料“素材”文件夹发送到学生电脑的文

13、件接收柜中，同时将文件放置在教师机共享文件夹供学生访问查阅。1、提前5分钟按照固定座位就坐；2、不带食品饮料进入教室（机房）；3、开机，配置好IP地址，确保红蜘蛛软件运行并链接教师机，同时能够访问英特网；4、注意电脑接电用电安全。课前5分钟营造上课环境，保证用电安全任务引入1、讲解现实生活中网页制作的用处，明白本门课程的作用2、明确本次任务在项目完成中的地位：（加为本次课任务）步骤一：制作一个网页广告单页的内容（本项目（即项目一）任务1 工作环境准备任务2 创建一个空白网页任务3 在网页中添加段落和文字任务4 在网页中添加列表任务5 在网页中添加表格任务6 在网页中添加图片任务7 在网页中添加

14、超链接任务8 在网页中添加表单3、任务要求使用Visual Studio Code新建并保存一个简单的基本页面与教师回忆上次课的内容。理解本次课程任务要求10分钟1、明确本次课程要完成的任务在项目中的位置2、明确本次课程任务要求预备知识【教师讲解理论知识，操作并演示课程练习，在学生操作课堂练习时巡视并辅导学生完成】1、HTML概念HTML（HyperText Mark-up Language，超文本标记语言或超文本链接标示语言），是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。2

15、、HTML文本基本结构一个网页对应于一个HTML文件，HTML文件以.htm或.html为扩展名。HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，主体部分包含网页所要说明的具体内容。其完整结构如下所示：123456789无标题文档其中声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。标签标识了文件的开头与结尾，表示这对标记间的内容是HTML文档。标记包含了文件的头部，标记内的内容不在浏览器中显示，主要用来说明文件的有关信息，如文件标题、作者、编写时间等。标签没有结束标签，位于head元素内部，标签的属

16、性定义了与文档相关联的名称和值。例如表示使用的字符编码为简体中文编码，比较常见的还有国际化编码UTF-8。在head标记内最常用的标记是，该标记是网页主题标记，提示网页内容和功能的文字，它将出现在浏览器的标题栏中。标记是HTML文档的主体部分，网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。【课题练习1.2-1：录入一个完整的网页结构标签】打开记事本，输入如下标签：12345678910这是一个完整的网页结构标签 欢迎光临我的网页！3、移动设备的HTML基本结构电脑经过多年的发展，现在显示器的屏幕分辨率已经能够达到1024x768及更高的1280 x1024等。因

17、此我们的移动设备无法将普通网页全屏显示在移动设备上，虽然通过屏幕放大缩小也可访问传统的网页，也由于用户体验不佳，很难得到实际的应用。为了增加对移动设备的友好，应该将针对移动设备的样式融合进框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在之中添加viewport元数据标签。在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定。【课题练

18、习1.2-2：录入一个完整的移动设备网页结构标签】打开记事本，输入如下标签： 这是一个完整的网页结构标签 欢迎光临我的网页！其中主要是告诉各个浏览器用的这种字符集，如果没有，那么浏览器就按各自默认的字符来显示，这样各个浏览器显示就可能不一样了。听讲根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。90分钟边讲边练，完成理论知识的学习任务实施要求学生参考如下步骤完成任务：（教师巡视并辅导学生的

19、任务完成）（1）打开任务1中的index.html文件。（2）完成网页广告单页HTML结构的编写。123456789101112131415161718 信息工程系 Copyright 2015 信息工程系.华南工业大学 学生在总结前面课堂练习知识的基础上，参考教师提供的操作步骤（左边）独立完成任务的实施。60分钟提供学生的知识迁移能力提高学生的自学能力和问题解决能力任务总结1、HTML是网页主要的组成部分，基本上每一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。2、HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，

20、主体部分包含网页所要说明的具体内容。3、根据学生任务完成的情况进行总结。听讲根据教师的总结找出自己在任务完成时存在的不足。5分钟总结任务并回顾教学目标的知识和技能目标任务评价评价 兴趣 （不感兴趣，没学会） 学会（认知） 【评价】9分钟建立评价机制：自评作业布置通过查看源代码的方式，查看部分网页的内容文本所使用的标签是否与我们所用的相同，不管是与不是，请将你查看的网页代码截图发教师邮箱：理解作业要求1分钟加强课堂知识的巩固与迁移清洁整理、设备恢复和整理。、教学场地的清洁。、人走五关（关门、关窗、关灯、关风扇，关电源）。清洁整理值日生打扫卫生课后5分钟清洁整理7.5.1-13-j-02课 程HT

21、ML5授课教师林晓仪课 题项目1制作一个网页广告单页的内容分课题任务1.3在网页中添加表格和图片授课班级16五年制电子商务（2）班授课日期2022.03.072022.03.09课时8课时学习目标专业理论知识1、学生能够说出表格的三个基本标签2、学生能够表述适合在网页中使用的图片格式实际操作技能1、学生能够在网页中使用表格标签对表格的数据结构进行编排，从而呈现数据间的关系2、学生能够区分绝对路径和相对路径3、学生能够在网页中正确添加图片4、学生能够正确设置图片属性重 点能够按要求在网页中使用表格及正确添加图片难 点学生能够区分绝对路径和相对路径教学对象分析授课班级为16五年制电子商务2班，因之

22、前未学过网页基础知识，在教学时应根据教学实际适当调整教学进度和教学内容难度。教学场地与教具教学场地：机房 教具：计算机课后分析安全注意事项及其它说明1、提醒学生注意用电安全。2、提醒学生不要将食品饮料带入机房。审阅签名： 年 月 日教学环节教师活动学生活动备注说明组织教学（课前5分钟）1.严格遵守上下课时间，上课铃响前走入班级。2.课堂教学所需的用具齐全。3.上课前要求学生准备好学习用品，上课时保证学生全身心投入。 4.强调关键知识和方法，让学生及时做好笔记。5.禁止在课堂上做一些与教学无关的事。1、提前5分钟按照固定座位就坐；2、不带食品饮料进入教室（机房）；3、注意电脑接电用电安全。营造上

23、课环境，保证用电安全项目引入 （5分钟）1、回顾项目要求及上次课内容（1）项目要求：完成一个简单网页（2）上次课已完成任务：在网页中添加了列表（复习并讲解列表标签）2、明确本次任务在项目完成中的地位：（加为本次课任务）步骤一：制作网页内容（本项目（即项目一）任务1.1 安装软件并创建空白页面任务1.2 在网页中添加段落文字和列表任务1.3 在网页中添加表格和图片任务1.4 在网页中添加超链接和表单步骤二：编辑内容格式（项目二 使用CSS设置网页格式）3、任务要求（1）根据百度搜索引擎网页质量白皮书效果图，制作该白皮书中的表格。（2）根据“网页广告单页”效果图，添加该网页中的相关图片。1、与教师

24、共同回顾之前学过的内容；2、明确本次课程的任务。1、明确本次课程要完成的任务在项目中的位置 2、明确本次课程任务要求预备知识1（100分钟）预备知识1（100分钟）预备知识1（100分钟）预备知识1（100分钟）预备知识1（100分钟）表格的作用是组织信息。HTML表格就像是电子表格，由行和列构成，每个表格单元格处于行和列的交汇处。表格由table元素来定义，以标记开始，标记结束。表格中的行以tr元素来定义，每一行都以标记开始，标记结束。表格中的单元格以td元素来定义，每个单元格都以标记开始，标记结束。表格单元格的可包含文本、图片和其他的HTML元素。其语法形式如下： 单元格内的文字 单元格内

25、的文字 单元格内的文字 单元格内的文字 【课堂练习1.5-1创建简单的两行两列表格】打开Visual Studio Code软件，在标签中输入如下代码：1234567891011 A B C D 显示效果如下：图1.5-1简单的两行两列表格默认情况下，表格没有边框线，可以使用样式表为其定义边框线，定义线条样式，粗细和边框颜色。这在后面的章节中会学到。1、表格的标题（caption元素）每一个表格都可以通过caption元素来对表格的目的作一个简单的说明，caption元素的内容用来描述表格的特征，并且caption元素必须紧接着table元素开始标签后被定义，一个table元素中仅能包含一个c

26、aption元素。其语法形式如下： 东部地区的人均GDP增长 【课堂练习1.5-2添加表格标题】打开Visual Studio Code软件，在标签中输入如下代码：12345678910111213141516 东部地区的人均GDP增长 第一季度 第二季度 第三季度 第四季度 20.4 27.4 90 20.4 显示效果如下：图1.5-2添加表格标题3、表格的表头（th元素）在表格中还有一种特殊的单元格，称为表头。表格的表头一般位于第1行和第1列，用来配置列标题或行标题，用和标签来表示。表格的表头与标签使用方法相同，但表头元素中的文本居中和加粗显示。其语法形式如下： 表格的表头 表格的表头 单

27、元格内的文字 单元格内的文字 【课堂练习1.5-3添加表格表头】打开Visual Studio Code软件，在标签中输入如下代码：123456789101112131415161718 部分地区常住人口数据统计 部分地区 北京 天津 河北 山东 人数 1962368 12938224 71854202 95793065 显示效果如下：图1.5-3添加表格表头4、跨多行、多列的单元格单元格可以跨越多个竖列或横行的多个单元格，跨越竖列或横行的数量通过colspan或rowspan属性来对th或td元素进行设置。（1）colspan属性指定单元格所占的列数。其语法形式如下：（2）rowspan属性

28、指定单元格所占的行数。其语法形式如下：根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有标题标签网页的课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有段落标签网页的课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有段落标签网页的课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有段落标签网页的课堂练习，并测试代码。根据教师的课堂任务操作步骤

29、和讲解，独立完成使用Visual Studio Code软件制作一个含有段落标签网页的课堂练习，并测试代码。边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习任务实施1（88分钟）布置学生完成如下任务：（巡视并辅导学生的任务完成）（1）打开任务4中的index.html文件（2）完成网页广告单页中表格显示效果学生在总结前面课堂练习知识的基础上，独立完成任务的实施。1、提供学生的知识迁移能力；2、提高学生的自学能力和问题解决能力任务回顾1（5分钟）在日常生活中，我们对表格式数据已经很熟悉了。这种数据有多种形

30、式，如财务数据、调查数据、事件日历、公交时刻表、电视节目等。在大多数情况下，这类信息都会使用表格来进行表示。表格由行和列构成，就像是电子表格。它是一行一行编码的，类似的，一行中的单元格也是一个一个编码的。听讲根据教师的总结找出自己在任务完成时存在的不足。总结任务预备知识2（100分钟）预备知识2（100分钟）预备知识2（100分钟）预备知识2（100分钟）1、图像格式每天在网络上交流的计算机数不胜数，因此使用的图像格式一定要能够被每一个操作平台所接受。GIF、JPEG和PNG是最适合在网页中使用的文件格式。（1）GIF格式。GIF格式采用LZW压缩，是以压缩相同颜色的色块来减少图像的大小。由于

31、LZW压缩，不会造成任何品质上的损失而且压缩效率高，再加上GIF在各种平台上都可使用，所以很适合在互联网上使用，但GIF只能处理256色。GIF格式适合商标、新闻式的标题或其他小于256色的图像。（2）JPEG格式。JPEG格式通常用来保存超过256色的图像格式。JPEG的压缩过程会造成一些图像数据的损失，所造成的“损失”是剔除一些视觉上不容易察觉的部分。如果剔除适当，视觉上不但能够接受，而且图像的压缩效率也会提高，而使图像文件变小；反之，剔除太多图像，则会造成图像过度失真。对于照片这类全彩的图像通常都以JPEG格式来进行压缩。（3）PNG格式。PNG图像是指“可移植网络图形”，它提供了将图像

32、文件以最小的方式压缩却又不造成图像失真的技术。不仅具备了GIF图像格式的大部分优点，而且还支持48bit的色彩，更快的交错显示，跨平台的图像亮度控制，更多层的透明度设置，结合了GIF和JPEG图片的优势，是GIF格式的很好替代品。表1.3-2图片文件类型对比图片类型扩展名压缩透明动画颜色GIF.gif有损支持支持256JPEG.jpg或.jpeg有损不支持不支持1000万以上PNG.png有损支持不支持1000万以上2、图片标签img 有了图像文件后，就可以使用标签将图片添加到网页中，从而达到美化页面的效果。img元素为空元素，在HTML文件中没有终止标签，但在XHTML文件中必须在起始标签右

33、括号前加上一个右斜线“/”作结束，或将img元素也加上终止标签。其语法形式如下：说明：在该语法中，src参数用来设置图像文件所在的路径，这一路径可以是绝对路径，也可以是相对路径。3、设置图片属性（1）图片的幅面大小（width属性和height属性）在网页中直接添加图片时，图片的大小和原图是相同的。而在实际应用时，可以通过width属性和height属性分别设置图片的宽度和高度。其语法形式如下：【课堂练习1.6-2设置图片大小】打开Visual Studio Code软件，在标签中输入如下代码：12显示效果如下： 图1.6-2设置图片大小也可以使用百分比作为width属性和height属性值，

34、例如下面的代码将图片缩放到原始尺寸的50%。但一般情况下，我们不建议使用该方法，而是使用样式表为其定义图片的width属性和height属性。这在后面的章节中会学到。（2） 图片的说明（title元素）title属性是对图片的文字说明，如果把鼠标放在图片上稍作停留，title属性的值就会以浮动的形式显示出来；在浏览器尚未完全读入图像时，在图像位置处会显示该文字说明。其语法形式如下：【课堂练习1.6-3添加图片说明】打开Visual Studio Code软件，在标签中输入如下代码：1显示效果如下：图1.6-3添加图片说明（3）图片的备用说明（alt属性）alt属性用于添加的图片不存在的情况，或

35、者一些用户为了提高浏览速度而关闭了图片下载，alt的作用很重要，它的内容会显示在浏览器中，搜索引擎（如百度、谷歌）一般以title和alt作为图片的描述关键字计入网页权重。其语法形式如下：【课堂练习1.6-4添加图片的备用说明】打开Visual Studio Code软件，在标签中输入如下代码：1显示效果如下： 图1.6-4添加图片备用说明根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有换行标签网页的课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有强调标签网页的课堂练习，并

36、测试代码。根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有上标及下标标签网页的课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成使用Visual Studio Code软件制作一个含有特殊符号标签网页的课堂练习，并测试代码。边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习任务实施2（87分钟）布置学生完成如下任务：（巡视并辅导学生的任务完成）（1）打开任务5中的index.html文件。（2）完成网页广告单页中图片显示效果。学生在总结前面课堂练习知识的基础上，独立完成

37、任务的实施。1、提供学生的知识迁移能力2、提高学生的自学能力和问题解决能力任务回顾2（5分钟）文本使网页的内容得到充实，图片使网页的内容更加丰富多彩。使用图片不仅能使网页更加美观、大方、整洁、形象和生动，而且能给网页增添无限生机，从而吸引更多的浏览者。因此图片在网页中的作用是举足轻重的。添加图片使用标签，该标签放在要显示图片的位置，使用src属性指定图片源文件所在的路径。听讲根据教师的总结找出自己在任务完成时存在的不足。总结任务总结评价（9分钟）1、总结回顾网页中常用于菜单栏的有序列表、无序列表的使用回顾网页中较常见的表格标签2、评价 兴趣 （不感兴趣，没学会） 学会（认知） 听讲评价1、回顾

38、教学目标的知识和技能目标2、建立评价机制：自评作业布置（1分钟）通过查看源代码的方式，查看部分网页的列表和表格所使用的标签是否与我们所用的相同，不管是与不是，请将你查看的网页代码截图发教师邮箱：理解作业要求拓展课外知识清洁整理（课后5分钟）、设备恢复和整理。、教学场地的清洁。、人走五关（关门、关窗、关灯、关风扇，关电源）。清洁整理值日生打扫卫生清洁整理7.5.1-13-j-02课 程HTML5授课教师林晓仪课 题项目1制作一个网页广告单页的内容分课题任务1.4在网页中添加表单授课班级16五年制电子商务（2）班授课日期2022.03.142022.03.16课时8课时学习目标专业理论知识1、学生

39、能够叙述表单与控件的关系实际操作技能1、能够在网页中添加表单2、能够正确使用各个控件重 点能够按要求在网页中使用正确使用各个控件难 点表单与控件的关系教学对象分析授课班级为15五年制电子商务2班，因之前已学过网页基础知识，对网页有一定的了解，在教学时应根据教学实际适当调整教学进度和教学内容难度。教学场地与教具教学场地：机房 教具：计算机课后分析安全注意事项及其它说明1、提醒学生注意用电安全。2、提醒学生不要将食品饮料带入机房。审阅签名： 年 月 日教学环节教师活动学生活动备注说明组织教学（课前5分钟）1.严格遵守上下课时间，上课铃响前走入班级。2.课堂教学所需的用具齐全。3.上课前要求学生准备

40、好学习用品，上课时保证学生全身心投入。 4.强调关键知识和方法，让学生及时做好笔记。5.禁止在课堂上做一些与教学无关的事。1、提前5分钟按照固定座位就坐；2、不带食品饮料进入教室（机房）；3、注意电脑接电用电安全。营造上课环境，保证用电安全项目引入 （5分钟）1、回顾项目要求及上次课内容（1）项目要求：完成一个简单网页（2）上次课已完成任务：在网页中添加了图片及超链接（复习并讲解图片和超链接标签）2、明确本次任务在项目完成中的地位：（加为本次课任务）步骤一：制作网页内容（本项目（即项目一）任务1.1 安装软件并创建空白页面任务1.2 在网页中添加段落文字和列表任务1.3 在网页中添加表格和图片

41、任务1.4 在网页中添加超链接和表单步骤二：编辑内容格式（项目二 使用CSS设置网页格式）3、任务要求（1）根据百度搜索引擎网页质量白皮书效果图，制作该白皮书中的表格。（2）根据“网页广告单页”效果图，添加该网页中的相关图片。1、与教师共同回顾之前学过的内容；2、明确本次课程的任务。1、明确本次课程要完成的任务在项目中的位置 2、明确本次课程任务要求预备知识1（100分钟）预备知识1（100分钟）预备知识1（100分钟）预备知识1（100分钟）预备知识1（100分钟）HTML表单主要用来收集客户端提供的相关信息，使网页具有交互的功能。一般地，网站管理者要实现与浏览者之间的沟通，就必须借助于表单

42、这个桥梁。表单通常的应用是调查表、订单和搜索界面等。1、表单标签在HTML中，标签用来创建一个表单，即定义表单的开始位置和结束位置。在标记中，可以设置表单的基本属性，包括表单的名称、处理程序、传送方法等。2、使用input元素创建表单控件input元素可以定义大多数类型的控件，控件的类型取决于type的属性值，不同的值对应不同的表单控件（默认值为text），如表1.8-1所示。表1.8-1 表单Type属性Type取值取值的含义显示效果text文字字段password密码域，输入的数据用星号表示radio单选按钮checkbox复选项button普通按钮submit提交按钮，将把数据发送到服务

43、器reset重置按钮，将重置表单数据，以便重新输入image图像域，也称为图像提交按钮file文件域（1）文字字段text在网页中最常见的是文本字段的表单，如网页的用户登录区。将input元素的type属性的属性值设置为text，就可以创建一个普通文本框。其语法形式如下：【课堂练习1.8-2在表单中添加文字字段】打开Visual Studio Code软件，在标签中输入如下代码：下面是几种不同属性的文本框： 姓名：爱好：个人主页：效果显示如下： 图1.8-1在表单中添加文字字段（2）密码域password将input元素的type属性的属性值设置为password，就会创建一个密码文本框。它在

44、网页中的效果和文字字段相同，只是当用户输入文字时，这些文字只显示“*”。其语法形式如下：在该语法中的参数的含义和text文字字段的参数一样。【课堂练习1.8-3在表单中添加密码域】打开Visual Studio Code软件，在标签中输入如下代码：1234567891下面是几种不同效果的密码域： 登录密码： 支付密码： 原始密码： 效果显示如下：图1.8-2在表单中添加密码域（3）单选按钮radio单选按钮代表互相排斥的选择，在页面中以圆框表示。radio控件中必须要设置value的值。而对于一个选择中的所有单选按钮来说，往往要设定同样一个名称，这样在传递时才能更好地对某一个选择内容的取值进行

45、判断。其语法形式如下：在该语法中，checked属性表示这一单选按钮默认被选中，在一个单选框中只能有一项单选按钮控件设置为checked；value属性用来设置用户选中该项目后，传送到处理程序中的值。【课堂练习1.8-4在表单中添加单选按钮】打开Visual Studio Code软件，在标签中输入如下代码：1234567891请选择一项你喜爱的运动： 羽毛球 篮球 足球 效果显示如下：图1.8-3在表单中添加单选按钮（4）复选框checkbox复选框允许在一组选项中选择多个选项，用户可以选择任意多个适用的选项。在页面中以方框表示。其语法形式如下：在该语法中，checkbox参数表示该选项在默

46、认情况下已经被选中，一个选择中可以有多个复选框被选中。【课堂练习1.8-5在表单中添加复选框】打开Visual Studio Code软件，在标签中输入如下代码：1234567891请选择你喜爱的运动： 羽毛球 篮球 足球 效果显示如下：图1.8-4在表单中添加复选框根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成使用课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。边讲边练

47、，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习任务实施1（88分钟）布置学生完成如下任务：（巡视并辅导学生的任务完成）（1）打开任务3中的index.html文件（2）完成网页广告单页中表单显示效果学生在总结前面课堂练习知识的基础上，独立完成任务的实施。1、提供学生的知识迁移能力；2、提高学生的自学能力和问题解决能力任务回顾1（5分钟）在日常生活中，我们对表格式数据已经很熟悉了。这种数据有多种形式，如财务数据、调查数据、事件日历、公交时刻表、电视节目等。在大多数情况下，这类信息都会使用表格来进行表示。表格由行

48、和列构成，就像是电子表格。它是一行一行编码的，类似的，一行中的单元格也是一个一个编码的。听讲根据教师的总结找出自己在任务完成时存在的不足。总结任务预备知识2（100分钟）预备知识2（100分钟）预备知识2（100分钟）预备知识2（100分钟）3、使用select元素创建表单控件输入类的控件一般以标签开始，说明该控件需要用户的输入；而菜单类则以标签开始，表示用户需要选择。（1）下拉菜单下拉菜单在正常状态下只显示一个选项，单击按钮打开菜单后才会看到全部的选项，是一种最节省页面空间的选择方式。其语法形式如下： 选项显示内容 选项显示内容 在该语法中，选项值是提交表单时的值，而选项显示内容才是真正在页

49、面中显示的选项。Selected表示该选项在默认情况下是选中的，一个下拉菜单中只能有一项默认被选中。【课堂练习1.8-8添加下拉列表】打开Visual Studio Code软件，在标签中输入如下代码：1234567891证件类型：身份证学生证驾驶证其他证件显示效果如下：图1.8-7添加下拉列表（2）列表项列表项的设置方法与下拉菜单类似，不同的是列表项在页面中可以显示出多条信息，一旦超出这个信息数量，在列表项右侧会出现滚动条，拖动滚动条能看到所有的选项。其语法形式如下： 选项显示内容 选项显示内容 【课堂练习1.8-9添加列表项】打开Visual Studio Code软件，在标签中输入如下代

50、码：1234567891 证件类型：身份证 学生证驾驶证其他证件显示效果如下： 图1.8-8添加列表项4 创建文本域除了以上的两大类控件外，还有一种特殊定义的文本样式，称为文字域或文本域，它与文字字段的区别在于可以添加多行的文字，从而输入更多的文本内容。这类控件在一些留言板中最常见。其语法形式如下：在该语法中，rows是指文本域的行数，也就是高度值，当文本内容超出这一范围时会出现滚动条；cols设置文本域的列数，也就是其宽度。【课堂练习1.8-10添加文件域】打开Visual Studio Code软件，在标签中输入如下代码：12345 留言：显示效果如下： 图1.8-9添加文件域根据教师的课

51、堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习边讲边练，完成理论知识的学习任务实施2（87分钟）布置学生完成如下任务：（巡视并辅导学生的任务完成）（1）打开任务5中的index.html文件。（2）完成网页广告单页中表单显示效果。学生在总结前面课堂练习知识的基础上，独立完成任务的实施。1、提供学生的知识迁移能力2、提高学生的自学能力和问题解决能力任务回顾2（5分钟）每当使用搜索引

52、擎、下订单或者加入邮件列表时，都是在使用表单。表单是一个HTML元素，它用于包含和组织称为表单控件的对象比如文本框、复选框和按钮，并从网站访问者那里接收信息。听讲根据教师的总结找出自己在任务完成时存在的不足。总结任务总结评价（9分钟）1、总结回顾网页中表单的应用2、评价 兴趣 （不感兴趣，没学会） 学会（认知） 听讲评价1、回顾教学目标的知识和技能目标2、建立评价机制：自评作业布置（1分钟）通过查看源代码的方式，查看部分网页的列表和表格所使用的标签是否与我们所用的相同，不管是与不是，请将你查看的网页代码截图发教师邮箱：理解作业要求拓展课外知识清洁整理（课后5分钟）、设备恢复和整理。、教学场地的

53、清洁。、人走五关（关门、关窗、关灯、关风扇，关电源）。清洁整理值日生打扫卫生清洁整理7.5.1-13-j-02课 程HTML5+CSS3网页布局授课教师林晓仪课 题项目2制作一个网页广告单页的内容分课题任务1 将CSS样式表引入文件授课班级16五年制电子商务（2）班授课日期2022.03.282022.03.30课时16课时学习目标专业理论知识学生能够明白使用CSS样式表的原因实际操作技能1、掌握CSS样式表的使用方法，能正确按语法格式进行编写；2、能使用CSS标签选择符选择目标标签，掌握样式效果的语法格式；3、能使用CSS设置文字的大小、颜色和加粗效果。重 点CSS样式表的使用方法难 点CS

54、S样式表两种添加方法的区别教学对象分析授课班级为16五年制电子商务2班，因之前未学过网页基础知识，对网页制作无基础，在教学时应根据教学实际适当调整教学进度和教学内容难度。教学场地与教具教学场地：机房 教具：计算机课后分析安全注意事项及其它说明1、提醒学生注意用电安全。2、提醒学生不要将食品饮料带入机房。审阅签名： 年 月 日教学环节教师活动学生活动备注说明组织教学（课前5分钟）1.严格遵守上下课时间，上课铃响前走入班级。2.课堂教学所需的用具齐全。3.上课前要求学生准备好学习用品，上课时保证学生全身心投入。 4.强调关键知识和方法，让学生及时做好笔记。5.禁止在课堂上做一些与教学无关的事。1、

55、提前5分钟按照固定座位就坐；2、不带食品饮料进入教室（机房）；3、注意电脑接电用电安全。营造上课环境，保证用电安全项目引入 （5分钟）1、回顾项目要求及上次课内容（1）项目要求：完成一个简单网页（2）上次课已完成任务：在网页中添加了列表（复习并讲解列表标签）2、明确本次任务在项目完成中的地位：（加为本次课任务）步骤一：制作网页内容（本项目（即项目一）步骤二：编辑内容格式（项目二 使用CSS设置网页格式）任务1 将CSS样式表引入文件任务2 使用CSS设置段落文字格式任务3 使用CSS实现网页布局任务4 将使用CSS背景美化网页标签任务5 使用CSS设置列表格式、超链接效果任务6 使用CSS边框

56、设置表格格式任务7 使用CSS美化表单3、任务要求承接上一项目的结果，现在开始逐步为系部宣传网页添加CSS样式效果。先通过本任务学习到的标签选择符、文字基本样式为网页的文字设置部分效果。1、与教师共同回顾之前学过的内容；2、明确本次课程的任务。1、明确本次课程要完成的任务在项目中的位置 2、明确本次课程任务要求预备知识1预备知识1预备知识1预备知识1认识CSSCSS（层叠样式表）是控制标签样式的样式代码，所有标签都可添加CSS用于控制它们的样式效果。CSS的特点是样式代码和标签代码是分离的，并且同一个样式可为多个标签同时使用，减少了标签部分的代码量，也减少了以后修改代码要花费的时间。如下例代码

57、5-10行为CSS的样式代码，代码15行为css设置的对象。12345678910111314151617Document.targetCSS样式font-size: 20px;color: #F00;css的设置对象CSS的添加方法（两种方法）方法1嵌入式：将CSS样式代码写在标签之间，并且需要使用标签包括，格式如下：1234567Document/*CSS样式代码的编写位置*/在内添加CSS样式代码，格式如下：“选择符”用于设置样式应用的标签对象，大括号 内编写具体的样式效果。样式效果的格式为“属性名: 值 ;”，可设置多条，每条需要以“分号;”结尾，多条样式效果可分行书写，也可都写于一行

58、。另外CSS的注释格式为“/* 注释 */”。12345678选择符1 color: red ;/* 文字红色 */属性2: 值 ;/* 注释信息 */属性3: 值 ;选择符2 样式效果 方法2外联式：将CSS的样式代码写到一个独立的文本文件中，并修改文件的扩展名为.css，在网页文件的部分通过标签引用该文件到网页中使用，格式如下：CSS样式文件.css12div font-size: 16px; color: #F9F; 选择符2 样式效果 网页文件.html12345Document代码中，href属性需要填写CSS文件的引用地址，可以填写相对或绝对地址，其余部分为固定代码。在编写整个网站

59、的CSS样式时，建议使用外联式，可使网页文件与CSS样式文件分开，方便阅读和管理。同一个样式文件可被多个网页使用，同一个网页文件也能引用多个样式文件，提高了代码的复用性。【课堂练习2.1-1使用CSS设置h1-h6标签的文字颜色，h6文字设置斜体】编辑器，输入如下标签：12345678910111213141516Document我是h1我是h2我是h3我是h4我是h5我是h6在标签内添加下面的CSS样式代码，为不同类型的标签设置不同的文字颜色。12345678h1 color: #f00; /* 标签的文字颜色为红色 */h2 color: #d22; h3 color: #b44; h4

60、color: #966; h5 color: #788; h6 color: #5aa; font-style: italic; /* 文字斜体 */CSS选择符CSS选择符用于指定样式设置对应的目标，CSS选择符写法多样，可针对同种标签进行统一设置，也可针对指定标签进行设置。这里先介绍“标签选择符”的用法，选择符名称使用标签名（如上一练习的h1、h2）命名，对网页中所有相同类型的标签进行统一设置。12345div font-size: 20px; color: #0f0; /* 设置所有div标签 */p font-size: 16px; color: #f00; /* 设置所有p标签 */