HTML盒子模型制作个人名片,网页设计基础 CSS盒子模型 第4章 CSS盒子模型_教学设计.doc...
博学谷——让IT教学更简单，让IT学习更有效
PAGE 12
PAGE 1
《HTML+CSS+JavaScript网页制作案例教程》
教学设计
课程名称： HTML+CSS+JavaScript网页制作案例教程
授课年级： 2015年级
授课学期： 2015学年第二学期
教师姓名： 某某老师
201 年 月 日
课题名称
第4章 CSS盒子模型
计划课时
8课时
内容分析
盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。本章将对盒子模型的概念、盒子模型相关属性及元素的类型和转换进行详细讲解。
教学目标
掌握CSS盒子模型的概念，能够灵活运用盒子模型布局页面；
掌握盒子模型相关属性，能够使用它们熟练地控制网页元素；
理解块元素与行内元素的区别，能够对它们进行转换；
重点及措施
教学重点：认识盒子模型、盒子模型相关属性、
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施
教学难点： CSS盒子模型、CSS背景属性、元素的转换。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式
教学采用教师课堂讲授为主，使用教学PPT讲解。
教
学
过
程
第一课时
(制作“音乐盒”，讲解认识盒子模型、
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习第三章“使用CSS技术美化网页”的相关知识。
通过上一章的学习，我们知道CSS是层叠式样式表的简称，层叠性是其最基本的特征。那么，请举例说明什么是“CSS层叠性”？
答案：
所谓层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义
标记字号大小为12像素，链入式定义
标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。
通过上一章的学习，我们知道CSS中存在着权重和优先级。那么，请分别说明“CSS基础选择器”中各选择器的权重值各是多少？
答案：
CSS为每一种基础选择器都分配了一个权重，其中，标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
随着信息化的迅速发展,手机已经成为人们日常生活中的必需品。一个完整的手机盒子通常包含手机、填充泡沫和盛装手机的纸盒。其实，在CSS中也存在着盒子模型，利用CSS盒子模型能够更好的对网页进行排版。那么，如何理解“CSS盒子模型”呢？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
如果把手机想象成HTML元素，那么手机盒子就是一个CSS盒子模型，其中手机为CSS盒子模型的内容，填充泡沫的厚度为CSS盒子模型的内边距，纸盒的厚度为CSS盒子模型的边框。当多个手机盒子放在一起时，它们之间的距离就是CSS盒子模型的外边距。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
案例描述
音乐可以陶冶情操，为我们带来听觉上的享受，随着互联网的普及，在网络上听音乐变得越来越方便。本节将通过盒子模型及其边框属性制作一个音乐盒效果。
知识点讲解
总结知识点
教师和学生一起总结在案例中涉及到的知识点，主要包括“认识盒子模型、
讲解“认识盒子模型”
(1)、教师展示PPT对“CSS盒子模型”的概念进行讲解，并以生活中常见的手机盒子的构成进行演示。
(2)、教师展示PPT，对CSS盒子模型的构成元素进行具体讲解。
(3)、教师使用CSS盒子模型控制网页中的元素，并进行代码演示。
(4)、学生练习，教师巡视，对疑难问题进行解答。
讲解“
(1)、教师展示PPT对“
(2)、教师对“
(3)、教师指出使用“
(4)、学生练习，教师巡视，对疑难问题进行解答。
讲解“边框属性”
(1)、教师展示PPT对“边框属性”的概念及用途进行讲解。
(2)、教师分别对“设置边框样式”、“设置边框宽度”、“设置边框颜色”及“综合设置边框”的属性值及应用效果进行讲解并通过代码进行演示。
(3)、教师指出应用“边框属性”时需要注意的问题，并给与解答。
(4)、学生练习，教师巡视，对疑难问题进行解答。
案例讲解
案例分析
HTML盒子模型制作个人名片,网页设计基础 CSS盒子模型 第4章 CSS盒子模型_教学设计.doc...相关推荐
- 手办模型制作还可以这样简单？
这几年随着手办市场迅速发展,有的企业年销售额达上千万元.对于手办,可能很多外行人不太了解,它泛指一些根据动漫.影视或者游戏中的角色形象做成的模型. 在大多数人的眼里手办模型可能只是一种小玩具,实际上, ...
- css盒子模型输出对联,网页设计基础 CSS盒子模型 第4章 CSS盒子模型_补充案例.doc...
博学谷--让IT教学更简单,让IT学习更有效 PAGE 18 第4章 补充案例 [案例4-1] 顶部导航栏1 一.案例描述 考核知识点 边框的复合属性.背景颜色 练习目标 灵活运用边框的复合属性. 掌 ...
- HTML网页设计基础笔记 • 【目录】
持续更新中- 我的大学笔记>>> 章节 内容 第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章 排列页面内容] 第3章 ...
- Web前端开发笔记——第三章 CSS语言 第五节 盒子模型
目录 一.CSS布局与定位 二.盒子模型 三.盒子模型的组成 四.设置边框的属性 五.设置外.内边距的属性 六.overflow 属性 结语 一.CSS布局与定位 在CSS中对一个网页进行布局与定位, ...
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章 网页设计基础知识...
本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...
- 王者荣耀模型制作曝光
现在游戏建模这个行业非常热门,因此有很多小伙伴梦想成为一名游戏模型师,但是很多都对这个工作需要做什么了解不深,这里我简单介绍一下我从事的3D游戏模型制作. 1.我们都知道游戏模型制作肯定是需要建模的, ...
- HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型
本教程案例在线演示 有路网PC端 有路网移动端 免费配套视频教程 免费配套视频教程 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页 ...
- HTML网页设计基础期末作业——绿色化妆品网页(HTML+CSS)
HTML网页设计基础期末作业--绿色化妆品网页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板 ...
- HTML网页设计基础期末作业——仿Coco线上订奶茶饮料网站设计与实现6个页面(HTML+CSS+JavaScript)...
HTML网页设计基础期末作业--仿Coco线上订奶茶饮料网站设计与实现 6个页面(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
最新文章
- 机器学习--局部加权线性回归
- jQuery里面的datepicker日期控件默认是显示英文的，如何显示中文或其他语言呢？...
- bzoj3289 mato的文件管理
- Linux下用netstat查看网络状态、端口状态
- Android中网络编程出错
- 阿里资深技术工程师： 程序员怎样快速成长？
- java8获取实现某个接口的所有类_Java 试题八
- POJ_2593最大两不想交子段和问题
- python中扑克牌类设计_Python中的计数 Counter类
- 如何将常规元组或字典转换为 namedtuple
- centos7永久修改ip地址
- 边框border(HTML、CSS)
- PDF权限密码怎么解除
- ITIL配置管理流程设计
- ROS(RouterOS)实现一线多拨+负载均衡(多图)
- 区块链 - 展望2022年元宇宙会呈现哪些趋势？
- Python word_cloud 样例 标签云系列（三）
- Open edX数据结构Mysql edxapp
- SpringMVC的执行流程源码分析?
- Spark 2.4.8 提交应用