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

《计算机网络应用基础》 (高等教育出版社)教案 课 题 6.4 运用CSS 课 型 新授 课 时 2 授课班级 授课时间 授课教师 教材分析 本单元是在学生已经掌握了 HTML 基础知识，能够制作简单静态网页的基础上进行的教学。CSS 作为网页美化和布局的重要技术，是网页制作中的核心内容之一。学好本任务的知识，能够帮助学生制作出更具美观性和专业性的网页，为后续更复杂的网页开发学习奠定坚实的基础。同时，这些知识与实际工作中的网页设计岗位需求紧密相关，具有很强的实用性。 学情分析 1. 学习了 HTML 的基本标签和用法，对网页结构有了一定的认识，但对于网页的美化和布局还缺乏系统的方法。 2. 学生学习积极性较高，渴望通过实践操作掌握实用技能；但也有部分学生学习主动性不足，需要教师通过多样化的教学活动引导其参与学习。 学习目标 知识与技能： 1. 理解 CSS 样式的概念和作用，掌握 CSS 基本语法。 2. 掌握 CSS 样式的基本应用，能够对文本、背景等进行美化。 3. 了解 DIV 标记的概念、属性，掌握 DIV 常见的布局方式。 过程与方法： 1. 通过案例分析和实践操作，培养学生分析问题和解决问题的能力。 2. 在小组合作学习中，提高学生的团队协作能力和沟通能力。 情感态度与价值观： 1. 激发学生对网页制作的兴趣，培养学生的审美能力。 2. 让学生体会到网页制作的乐趣和成就感，增强学习的自信心。 学习重难点 教学重点： 1. CSS 基本语法及在网页中插入CSS的三种方式。 2. CSS 样式的基本应用及DIV 标记的使用及常见布局方式。​ 教学难点： 1. 三种插入 CSS 方式的区别及灵活运用。 2. DIV 布局中元素的定位和排列。 教学方法 讲授法、演示法、实践操作法 课前准备 教师：教案、PPT课件 学生：课前预习 教学媒体 电子课件、多媒体 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 【课程导入】 1. 展示两个网页，一个是仅用 HTML 制作的简单网页，另一个是运用了 CSS 和 DIV 进行美化和布局的精美网页。 2. 提问：“同学们对比这两个网页，发现它们有什么不同？哪个更吸引你？为什么？” 3. 引导学生思考，引出本节课的主题 —— 运用 CSS 和 DIV 让网页更美观、布局更合理。 1. 认真观察教师展示的两个网页。2. 积极思考教师提出的问题，踊跃回答，说出两个网页的不同之处以及自己更喜欢哪个网页和原因。​​ 通过对比两个差异明显的网页，激发学生的学习兴趣，让学生直观地感受到 CSS 和 DIV 在网页制作中的重要作用，从而引出本节课的教学内容。 活动二： 调动思维 探究新知 【传授新知】 · CSS 样式和基本语法​ 1. CSS 样式的概念：CSS（层叠样式表）是一种用来表现 HTML 或 XML 等文件样式的计算机语言，它可以使网页的内容与表现形式分离。 2. 结合简单的例子讲解 CSS 基本语法：选择器 {属性：值；}。例如，p {color:red;font-size:16px;}，说明选择器是要修饰的 HTML 元素，属性是要设置的样式属性，值是属性的具体取值。 3. 提问：“在 p {color:red;font-size:16px;} 这个例子中，选择器、属性和值分别是什么？” 4. 强调语法中的注意事项，如属性和值之间用冒号连接，多个属性之间用分号分隔，最后一个分号可以省略等。 · 插入 CSS 的方式 1. 第一种插入方式：内联样式（行内样式）。 演示：在 HTML 标签中使用 style 属性，如<p style="color:blue;font-weight:bold;">这是一个内联样式的例子</p>。 说明其特点：仅对当前标签有效，优先级最高，但不利于代码复用和维护。 2. 讲解第二种插入方式：内部样式表。 演示：在<head>标签内使用<style>标签定义样式，<head><style>p{text-align:center;}</style></head>。 说明其特点：对当前网页的所有对应元素有效，便于维护当前网页的样式。 3. 讲解第三种插入方式：外部样式表。 演示：创建一个.css 文件，在其中定义样式，然后在 HTML 文件中使用<link>标签引入，如<link rel="stylesheet" href="style.css">。 说明其特点：可以被多个网页共享，便于维护多个网页的统一样式。 4. 提问：“同学们，这三种插入 CSS 的方式各有什么优缺点？在实际制作网页时，你会根据什么情况选择使用哪种方式呢？” 5. 组织学生进行讨论，然后总结三种方式的区别和适用场景。 1. 认真听讲，理解 CSS 样式的概念。2. 仔细观察教师讲解的 CSS 基本语法例子，思考并回答教师提出的问题。3. 记录语法中的注意事项。 1. 认真观看教师的演示，理解三种插入 CSS 方式的具体操作。2. 记录每种方式的特点。3. 积极参与讨论，思考三种方式的优缺点和适用场景，发表自己的看法。 让学生理解 CSS 样式的概念，掌握 CSS 基本语法，为后续的学习打下基础。通过提问，及时检验学生的理解程度。 让学生掌握在网页中插入 CSS 的三种方式，理解它们的区别和适用场景，能够根据实际需求选择合适的插入方式，突破教学重点和难点。 活动三： 调动思维 探究新知 【传授新知】 · DIV 标记及属性 1. DIV 标记的概念：DIV 是一个块级元素，用于对网页内容进行分组和布局，可以将网页分成不同的区域。 2. 介绍 DIV 标记的常用属性：id、class、width、height、background 等。 演示：<div id="header" style="width:100%;height:100px;background:gray;">这是页头</div>，说明 id 用于唯一标识 DIV 元素，class 用于为多个 DIV 元素定义相同的样式，width 和 height 设置 DIV 的宽度和高度，background 设置背景。 3. 提问：“同学们，DIV 标记和 span 标记有什么区别呢？”（引导学生回忆 span 标记的特点，span 是行内元素，不换行，主要用于对文本的部分内容进行修饰） · DIV 常见布局方式 1. DIV 常见的布局方式：流式布局、浮动布局、定位布局。 2. 流式布局： 演示：不设置 DIV 的宽度，让其默认占满父元素的宽度，根据浏览器窗口大小自动调整。如<div style="background:lightblue;">流式布局示例</div>。说明其特点：适应性强，但布局不够灵活。 3. 浮动布局： 演示：使用 float 属性（left、right）让 DIV 元素左右浮动。如<div style="float:left;width:50%;background:red;">左侧内容</div><div style="float:right;width:50%;background:green;">右侧内容</div>。 强调清除浮动的方法，如在浮动元素后面添加一个空的 DIV，并设置 clear:both 属性。 4. 定位布局： 演示：使用 position 属性（static、relative、absolute、fixed）进行定位。如<div style="position:relative;top:20px;left:30px;background:yellow;">相对定位示例</div>。 分别说明不同定位方式的特点和用法。 5. 提问：“同学们，在什么情况下适合使用浮动布局？什么情况下适合使用定位布局呢？” 1. 认真听讲，理解 DIV 标记的概念和作用。2. 观察教师的演示，了解 DIV 标记常用属性的用法。3. 思考教师提出的问题，对比 DIV 标记和 span 标记的区别，积极回答。​ 1. 认真观看教师的演示，理解三种 DIV 布局方式的具体操作和特点。2. 记录清除浮动的方法。3. 思考教师提出的问题，结合实际情况回答。 让学生了解 DIV 标记的概念和常用属性，掌握其基本用法，为学习 DIV 布局打下基础。通过与 span 标记对比，加深对 DIV 标记的理解。 让学生掌握 DIV 常见的布局方式，理解它们的特点和适用场景，能够根据网页布局需求选择合适的布局方式，突破教学难点。 活动四： 巩固练习 素质提升 【随堂检测】 1. 关于 CSS 基本语法的说法，正确的是（ ）​ A. 选择器和样式内容之间用逗号分隔​ B. 属性和值之间用分号分隔​ C. 多个属性之间用冒号分隔​ D. 基本格式为选择器 {属性：值；} 2. 在网页中插入 CSS 的方式中，哪一种可以被多个网页共享，便于维护多个网页的统一样式（ ）​ A. 内联样式​ B. 内部样式表​ C. 外部样式表​ D. 以上三种都可以 3. 请使用内联样式将段落文本 “这是一个内联样式测试” 设置为红色、20px 大小、居中对齐。 4. 请写出一个外部样式表的引入代码，该外部样式表文件名为 “myStyle.css”。 学生按照教师布置的任务，独立完成练习，遇到问题可以向教师请教或与同学讨论。 通过课堂练习，让学生巩固所学的网络命令，提高实际操作能力。​ 课堂小结 作业布置 课堂小结： 1. 引导学生回顾本节课所学的主要内容：CSS 样式、基本语法、插入方式、应用，DIV 标记、属性及布局方式。 2. 强调本节课的重点和难点，提醒学生在今后的学习中注意灵活运用所学知识。 3. 鼓励学生课后多进行实践练习，不断提高自己的网页制作水平。​ 作业布置： 1. 独立完成一个个人介绍网页，要求运用本节课所学的 CSS 样式和 DIV 布局知识，使网页美观、布局合理。 2. 下节课将作业带来，进行展示和交流。 板书设计 一、CSS 样式 1.概念 2.基本语法 格式：选择器 {属性：值；} 3.插入方式 ①内联样式 ②内部样式表 ③外部样式表 二、DIV 标记相关知识 1.概念 2.常用属性 3.常见布局方式 ①流式布局 ②浮动布局 ③定位布局 教学反思 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $$