模块2 任务2 体验HTML文档-网页基础

PAGE\#000MERGEFORMAT001PAGE78计算机应用基础教学参考书（Windows7+Office2010）（第2版）书模块2HTML代码任务2体验HTML文档——网页基础教案1．教学整体设计教学单元名称HTML代码课时2学时所属章节任务2体验HTML文档——网页基础任务描述通过“体验HTML文档——网页基础”任务，认识HTML5文档基本结构，区分单标签与双标签，掌握标签属性书写规则；学会使用记事本编写简单HTML网页并保存运行，使用Dreamweaver2021切换代码视图与设计视图编写包含图片、超链接、表格、留言表单的网页；理解网页本质是由HTML代码构成的文档，建立“代码即网页”的工程认知。任务分析在本任务中，需要完成以下操作：1.使用记事本编写“社会主义核心价值观”滚动文字网页（web.html），注意保存类型与.html后缀名；2.使用Dreamweaver2021打开网页文件，切换代码视图与设计视图，修改代码添加二级标题、图片、超链接并F12预览；3.使用Dreamweaver制作留言表单网页（web3.html），运用表格与表单标签实现姓名、联系方式、留言文本域、提交按钮；4.理解HTML5文档基本结构，区分单标签与双标签，掌握标签属性书写规则；5.认识常用HTML标签（标题、段落、图片、超链接、表格、表单等）。教学重点：HTML5文档基本结构；标签属性书写规则；记事本与Dreamweaver编写HTML网页实操；常用基础标签使用。教学难点：区分单标签与双标签；表格标签与表单标签的组合使用；代码保存格式、半角符号规范。教学目标知识目标1.掌握HTML5文档基本结构（doctype、html、head、body）及各区域作用；2.区分单标签与双标签，熟悉标签属性书写规则；3.认识常用HTML标签（标题、段落、图片、超链接、表格、表单、列表等）的功能。能力目标1.能够使用记事本编写简单HTML网页，正确设置保存类型与.html后缀名并运行；2.能够使用Dreamweaver2021切换代码视图与设计视图，编写包含图片、超链接、表格、留言表单的网页；3.能够规范书写HTML标签与属性，排查全角符号、路径错误等常见问题。素养目标1.养成规范书写代码、严谨使用半角符号的职业习惯，树立代码质量意识；2.体会“代码即网页”的工程思想，感受从代码到页面的创造乐趣；3.通过社会主义核心价值观滚动文字网页等案例，增强文化自信与价值认同。考核方式过程考核：知识学习与技能掌握情况（30%）课堂实操编写网页、积极参与调试与互评（40%）终结考核：教师评价+小组互评+学生自评（30%）教学环境机房计算机配置如下：软件环境—MicrosoftWindows10、Dreamweaver2021、记事本、Edge浏览器、WPS办公软件、多媒体课件；网络环境——机房可访问互联网；素材资源——教学示例文件web.html、web2.html、web3.html。

2．教学实施过程教学环节教学内容教师活动学生活动教学策略课程思政导入任务1.回顾旧知：复习上节课网页、网站概念，明确“网页本质是由HTML代码构成的文档”；2.问题驱动：提出问题——网页是如何通过代码实现的？引发好奇；3.任务引出：明确本节课任务——任务2体验HTML文档——网页基础，认识HTML结构、标签，动手编写网页。1.复习网页、网站概念，建立新旧知识联系；2.抛出核心问题，展示本节课学习任务与目标；3.强调本节课技能重点：HTML结构、标签、编写网页。1.回顾旧知识，明确网页与代码的关系；2.思考“代码如何变成网页”，产生学习期待；3.明确本节课学习目标与任务。情境导入法、问题驱动法引导学生认识网页背后是严谨的代码逻辑，体会“万丈高楼平地起”，夯实基础、重视规范，树立严谨求实的工匠精神。知识讲授与操作演示任务一：记事本编写HTML网页1.打开记事本，输入HTML代码，制作“社会主义核心价值观”滚动文字网页（web.html）；2.文件保存：文件名web.html，保存类型选择“所有文件”，编码UTF-8；3.双击web.html，浏览器打开预览滚动文字效果。任务二：Dreamweaver修改网页代码1.启动Dreamweaver2021，打开web2.html，切换至代码视图查看HTML5结构；2.修改代码，添加二级标题、图片（img）、超链接（a）；3.切换设计视图，按F12保存并预览（注意图片路径）。任务三：制作留言表单网页1.Dreamweaver打开web3.html，切换代码视图；2.在<body>内添加表格（table/tr/td）与表单（form/input/textarea）代码，实现留言页面：姓名输入框、联系方式输入框、文本留言域、提交按钮；3.保存文件，F12浏览网页布局效果。1.完整演示记事本编写、保存、预览网页全过程，着重强调保存类型、.html后缀名与半角符号；2.演示DW代码视图与设计视图切换，讲解img图片标签、a超链接标签用法，提醒图片路径问题；3.讲解table/tr/td、form/input/textarea等表单标签含义与控件作用；4.巡回指导，纠正标签写错、全角符号、路径错误等常见错误。1.跟随实操，输入HTML代码，完成保存与浏览器预览，观察marquee滚动效果；2.上机操作DW，切换视图、修改代码、F12预览网页效果；3.复制编写表格表单代码，完成留言页面并预览布局。演示法、讲解法、任务驱动法通过编写“社会主义核心价值观”滚动文字网页，将价值引领融入代码实践；强调半角符号、后缀名等细节，培养精益求精、一丝不苟的工匠精神。任务四：HTML5文档基础结构HTML5标准结构：<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title></head><body></body></html>说明：doctype声明文档类型；head头部存放网页配置（标题、字符集等）；body存放页面显示内容。任务五：标签分类与属性规则1.标签分类：双标签（开始+结束，如<h1></h1>）；单标签（仅开始，如<img/>、<br>）；2.属性规则：①属性写在开始标签内；②标签推荐小写；③多属性空格隔开；④属性无先后顺序；⑤内容可换行；⑥全部使用半角字符，禁止全角符号。任务六：常用HTML标签1.头部：<title>标题、<meta>元信息、<link>；2.页面基础：<body>、<p>段落、<br>换行、<hr>水平线；3.多媒体链接：<img>图片、<a>超链接；4.标题：<h1>~<h6>，数字越小级别越高；5.列表、表格<table><tr>行<td>单元格；6.表单：<form><input><textarea><select>；7.其他：<marquee>滚动、<audio>音频、<video>视频。1.板书讲解HTML5各部分作用，区分head与body区域；2.举例对比单、双标签，重点强调半角符号，指出学生常见错误；3.逐个讲解常用标签功能，结合前面任务案例对照说明。1.理解文档整体结构，做好笔记；2.区分单双标签，熟记属性书写规范；3.认识各类标签功能，结合任务理解标签实际效果。讲解法、对比教学法、实例分析法标准结构与规范属性是网页的“语法”，正如社会运行需要规则；引导学生树立规则意识，理解“无规矩不成方圆”，在代码规范中涵养法治精神。练习技能1.实操练习：使用记事本编写HTML网页，设置网页标题，添加h2标题、一段段落文字、一张图片、一个超链接，保存为.html并浏览器预览；2.对照任务要求自查：文档结构是否完整、标签是否闭合、是否使用半角符号；3.小组互助排查：标签写错、全角符号、图片路径错误、后缀名错误等问题；4.拓展练习：尝试用Dreamweaver代码视图编写同一网页，对比两种方式。1.布置课堂实操任务，明确完成标准（结构完整、标签规范、能正常预览）；2.巡回指导，重点处理共性错误：全角符号、标签未闭合、路径错误；3.收集高频错误，集中演示纠错。1.独立上机完成HTML网页编写与预览；2.遇到报错自主检查标签与符号；3.小组互助，交流编写与调试技巧。任务驱动法、异质分组合作学习法代码调试需要耐心与细致，引导学生正视错误、在排查中培养抗挫折能力与严谨求实的科学态度。展示作品1.作品提交规范：提交web.html、web2.html、web3.html等网页文件或预览截图，命名格式：姓名_任务2_HTML基础；2.评价维度：HTML5结构正确完整；标签使用规范（单双标签、半角符号）；网页能正常预览；表单布局合理；3.学生自查作品，修正结构、标签、符号等错误，提交电子教室作业区；4.拓展：浏览他人作品，对比不同标签组合产生的页面效果。1.明确提交格式与质量评价标准；2.检查学生代码结构、标签规范与预览情况；3.挑选典型作品用于课堂点评。1.对照评价标准自查网页结构与标签；2.规范命名，完成作业提交。实践教学法、自我评价法规范提交、有始有终，养成按标准交付成果的职业素养与责任意识。评价总结1.课堂作品点评，梳理本节课高频错误：①保存类型与后缀名错误；②全角符号；③标签未闭合或写错；④图片路径错误；2.知识点回顾：HTML5文档结构；单/双标签；标签属性规则；常用HTML标签；记事本与Dreamweaver两种编写方式。1.点评典型学生作品，梳理实操共性错误；2.提问引导学生回顾核心概念与标签；3.布置课后作业。1.对照点评反思操作不足；2.巩固HTML结构与标签知识，查漏补缺。作品点评法、归纳总结法从“能运行”