单元六 任务2 设计简单网页（教案）-《计算机网络应用基础》（高教版）同步精品课堂

《计算机网络应用基础》 (高等教育出版社)教案 课 题 6.2 设计简单网页 课 型 新授 课 时 2 授课班级 授课时间 授课教师 教材分析 本任务是学生从认识网页基础知识转向动手制作网页的关键环节，教材以“设计简单网页”为目标，聚焦HTML核心元素：颜色表示（美化页面）、图像插入（丰富内容）、表格添加（组织数据与布局雏形）。这些是构建任何网页最基础、最常用的技术，为后续学习列表、超链接、CSS及表单打下坚实基础。教材内容偏向基础语法和应用，强调实践操作。 学情分析 1. 已掌握 HTML 基本结构和文本标记的使用方法，对网页制作有初步认。 2. 部分学生可能在英语词汇（如 color、image 等）方面存在障碍。 3. 思维活跃，动手能力较强，对可视化效果的制作兴趣浓厚。 学习目标 知识与技能： 1. 掌握 HTML 中三种颜色表示方法。 2. 掌握 img 标签插入图像、表格的基本结构和常用属性设置设置。 3. 能够综合运用所学知识制作简单网页。 过程与方法： 1. 通过案例分析和实践操作，培养自主探究能力。​ 2. 形成规范的代码编写习惯。 情感态度与价值观： 1. 感受网页设计的美感，培养审美能力。​ 2. 体验从理论到实践的成就感，增强学习信心。 学习重难点 教学重点： 1. 图像标签 img 的 src、alt、width、height 属性的正确使用。​ 2. 表格的基本结构（table、tr、td 标签）及嵌套关系。​ 教学难点： 1. 相对路径与绝对路径在图像引用中的区别与应用。​ 2. 表格的边框合并（border-collapse）属性理解。 教学方法 讲授法、演示法、实践操作法 课前准备 教师：教案、PPT课件 学生：课前预习 教学媒体 电子课件、多媒体 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 【课程导入】 1. 展示两个对比网页：一个单调的纯文本网页和一个包含适当颜色、图像和表格的美观网页。 2. 提问："这两个网页给你的感觉有什么不同？哪个更吸引你？为什么？" 3. 引导学生观察并总结：颜色让网页更生动，图像让信息更直观，表格让数据更清晰。 1. 认真观察两个对比网页。2. 思考并回答教师问题。3. 小组简短讨论后，派代表分享观点​ 通过视觉对比，激发学生学习兴趣，让学生直观感受本节课知识的重要性，自然引入教学主题。 活动二： 调动思维 探究新知 【传授新知】 · HTML 中的颜色表示法​ 1. 讲解 HTML 中颜色的三种表示方法： ①颜色名：如 red、blue、green 等（展示常用颜色名列表） ②十六进制：#RRGGBB，如 #FF0000 表示红色（讲解十六进制 0-9,A-F 的含义） ③RGB 值：rgb (红，绿，蓝)，如 rgb (255,0,0) 表示红色（说明每个值范围 0-255） 2. 强调三种表示法可以相互转换，效果一致 1. 记录三种颜色表示方法的格式。2. 观察教师展示的颜色示例，理解三种表示法的对应关系。3. 标记出自己容易混淆的部分。 系统讲解理论知识，为后续实践打基础，通过对比帮助学生理解三种表示法的联系与区别。 活动三： 调动思维 探究新知 【传授新知】 · 在网页中插入图像 1. 介绍图像标签<img>的特点：单标签，不需要闭合 2. 重点讲解核心属性： ①src：指定图像路径（区分相对路径和绝对路径） ②alt：图像无法显示时的替代文本 ③width/height：设置图像宽度和高度（单位为像素） 3. 演示路径的正确写法：src="images/photo1.jpg" · 在网页中添加表格 1. 讲解表格的基本结构： ①<table>：表格容器 ②<tr>：表格行 ③<td>：表格单元格 2. 介绍常用属性： ①border：设置边框宽度 ②width/height：设置表格宽高 ③align：设置对齐方式 ④border-collapse:collapse：合并边框 1. 记录 img 标签的常用属性及含义。2. 重点关注路径的表示方法，标记易混淆点。3. 思考 alt 属性的作用和重要性 1. 绘制表格结构示意图，理解标签嵌套关系 2. 记录各标签的含义和常用属性。3. 对比表格代码和实际效果，建立对应关系。 清晰讲解图像插入的关键知识点，为正确实践奠定基础，强调 alt 属性的语义化重要性。 帮助学生理解表格的层级结构，掌握基本标签的使用方法，为后续复杂表格制作打基础。 活动四： 巩固练习 素质提升 【随堂检测】 1. 在 HTML 中，正确表示红色的选项是（ ） A. color: "red" B. color: #FF0000 C. color: rgb (255, 0, 255) D. color: #255,0,0 2. 在 HTML 中插入图像时，必须设置的属性是（ ） A. width B. src C. height D. align 3. 下列代码创建的表格有几行几列（ ） A. 3 行 3 列 B. 3 行 2 列 C. 3 行，列数分别为 2、1、3 D. 无法确定 4. 请写出在网页中插入一张图片的完整 HTML 代码，要求：图片路径为 "images/school.jpg" ，图片无法显示时显示 "学校校园风光" ，图片宽度设置为 400 像素，高度自动适应。 学生按照教师布置的任务，独立完成练习，遇到问题可以向教师请教或与同学讨论。 通过课堂练习，让学生巩固所学的网络命令，提高实际操作能力。​ 课堂小结 作业布置 课堂小结： 1. 引导学生回顾本节课学习的三个核心知识点 2. 展示知识结构图，梳理知识点之间的联系 3. 强调重点和易错点： 图像路径的正确设置 表格标签的嵌套关系 颜色表示法的灵活应用 作业布置： 1. 完善课堂制作的个人作品集网页，添加更多内容。 2. 制作一个班级同学信息表网页，包含照片和基本信息。 板书设计 1、 颜色表示法 1. 颜色名：red, blue, green... 2. 十六进制：#RRGGBB（如#FF0000） 3. RGB值：rgb(红,绿,蓝)（如rgb(255,0,0)） 2、 插入图像 <img src="路径" alt="替代文本" width="宽度" height="高度"> ①路径：相对路径（推荐）和绝对路径 ②alt属性：必选，提高可访问性 3、 创建表格 <table border="1"> <tr> <td>单元格内容</td> <td>单元格内容</td> </tr> </table> border-collapse:collapse 合并边框 结构：table > tr > td 教学反思 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $$