项目4“青春树儿童摄影网”首页制作
清华版六年级上册信息技术第二课丛林之美——电子相册制作教案
清华版六年级上册信息技术第二课丛林之美——电子相册制作教案一、教材分析清华版六年级上册信息技术第二课“丛林之美——电子相册制作”教案，以“丛林之美”为主题，让学生通过收集丛林相关图片，运用信息技术手段，制作一份具有创意的电子相册。
课程内容与课本紧密相连，以培养学生的信息素养、创新能力和团队协作精神为目标，符合教学实际。
本节课要求学生掌握电子相册的制作方法，培养审美观念，提高信息技术应用能力。
在教学过程中，教师引导学生分析丛林图片的特点，提炼主题，学会运用信息技术手段表达自己的观点。
同时，通过小组合作，培养学生的团队协作精神，提高沟通与交流能力。
教学内容主要包括：图片收集与处理、电子相册制作方法、主题提炼与表达。
在教学过程中，教师以实例演示、操作练习、小组讨论等形式，引导学生主动探究、实践，从而提高信息技术素养。
本节课适用于六年级学生，依据学生年龄特点和知识水平，课程难度适中。
通过本节课的学习，学生能熟练运用信息技术手段，制作出具有创意的电子相册，展示丛林之美，提高自身信息素养。
二、核心素养目标本节课旨在培养学生的信息意识、创新精神、团队协作和解决问题的能力。
学生通过收集和处理信息，提高信息素养，学会运用信息技术表达自己的观点。
在制作电子相册的过程中，学生培养审美观念，锻炼创意思考和动手实践能力。
同时，小组合作完成项目任务，增强团队协作精神，提升沟通与交流技巧。
通过本节课的学习，学生能将信息技术应用于日常生活中，提高生活品质。
三、教学难点与重点1. 教学重点（1）图片收集与处理：学生能够熟练使用信息技术手段，收集丛林相关图片，并对图片进行适当的处理，以突出丛林之美。
（2）电子相册制作方法：学生能够掌握电子相册的基本制作方法，包括选择模板、添加图片、编辑文字等，制作出具有创意的电子相册。
（3）主题提炼与表达：学生能够通过对丛林图片的分析，提炼出相册的主题，并运用信息技术手段表达自己的观点。
2. 教学难点（1）图片处理技巧：如何调整图片的大小、颜色、亮度等，以达到最佳的展示效果。
中文版DreamweaverCC基础培训教程-教学教案
《中文版Dreamweaver CC 基础培训教程》配套教学教案2.3网页文档的基本操作2.3.1课堂案例——创建并保存zhuce.html网页2.3.2新建网页2.3.3保存文档2.3.4打开与关闭文档2.4设置页面属性2.4.1课堂案例 ------ 设置“djqsm.html”网页属性2.4.2设置“外观（CSS）”属性2.4.3设置“外观（HTML）”属性2.4.4设置“链接955）”属性2.4.5设置标题2.4.6设置标题/编码2.4.7跟踪图像2.5上机实训——创建“花火植物”站点2.5.1实训要求2.5.2实训分析2.5.3操作思路2.6课后练习1.练习1——自定义“我的工作区”2.练习2——创建并规划“珠宝”网站小结1、如何创建与管理站点？2、如何管理站点中的文件和文件夹？3、如何设置页面属性？练一练：练习1——自定义“我的工作区”根据工作使用习惯的不同，用户可自定义Dreamweaver CC的工作区，使其更加符合设计者的操作习惯。
本练习将自定义一个工作区，然后将其保存。
思考及作业练习2创建并规划“珠宝”网某珠宝公司需要制作一个电子商务网站，需要先对站点进行规划，首先是网站首页，然后按不同内容分成多个页面，最后在Dreamweaver CC中创建站点、文件和相关GOOD LUCK 首页 产品中心 关于我们 新闻资讯 联系我们登录我们0 zhubaoT 本地视图▼ G ◎分悭畲⑥a 大小I 类型文件夹。
□ |£j> 站点-zhub ：±0 Q... index. html CpZK gywm. html xwzx. html lxwm .... .......... " .. " .......... .... 1KB 1KB 1H ： 文件夹 360 se.. 文件夹 360 se.. 360 se.. 文件夹1KB 360 se..羁 1个^^目麒中一觊126 本地文件3.4课后练习1.练习1——制作学校简介网页2.练习2——制作代金券说明网页4.3.3操作思路4.4课后练习1.练习1——制作“订餐”网页2.练习2——制作“家居”网页1、掌握插入各种图像的方法。
网页设计与制作项目教程项目4“青春树儿童摄影网”首页制作
制作页脚及悬浮框模块
知识架构
【任务4-1】认识盒子模型
1
认识盒子模型
知识架构
【任务4-2】 盒子模型相关属性
1
2 3 4 5
边框属性 内边距属性
外边距属性
背景属性 盒子的宽与高
知识架构
【任务4-3】 元素的类型与转换
1 2
元素的类型 <span>标记
3
元素的转换
知识架构
【任务4-4】 元素的浮动
项目4“青春树儿童摄影网”首页制作
HTML
· 认识盒子模型 · 元素的类型与转换
· 盒子相关属性
· 元素的浮动和定位
学习目标
掌握盒子的相关属 性，能够制作常见
1
理解背景属性的设 置方法，能够设置 背景颜色和图像 。
2
的盒子模型效果。
掌握元素的定位，
熟悉清除浮动的方法，
4
能够为元素设置常
可以使用不同方法清
注意：内边距padding不允许使
用负值
padding:5px /*四个方向内边距为5 像素宽度*/ padding:5px 3px /*上下内边距为5 像素，左右内边距为3像素*/ padding:5px 3px 4px /*上内边距为 5像素，左右内边距为3像素，下内边 距为4像素*/
【任务4-2】 盒子模型相关属性
1.
CSS边框属性
边框样式（border-style）
边框属性
边框宽度（border-width）属性值
border-width综合属性
border-width:5px; /*四边宽度均为5像素*/
border-width:5px 3px ; /*上下边框5像素宽度、 左右边框3像素宽度*/
Dreamweaver网页设计案例教程 第11章 综合设计实训
11.1.2 【项目创意及制作】
1．设计素材 2．设计作品效果图ຫໍສະໝຸດ 11.1.2 【项目创意及制作】
3．步骤提示
1
2
3
4
11.2 游戏娱乐网页——锋七游戏网页
【项目背景及要求】 【项目创意及制作】
11.2.1 【项目背景及要求】
1．客户名称 锋七游戏公司。 2．客户需求 锋七游戏公司是全球领先的游戏互动娱乐平台、游戏玩家的网上乐园，汇集 最新最热门的网络游戏、最好玩的大型游戏、玩家真实交友等服务，现推出几款 新的游戏，要为其前期的宣传做准备，网站内容要求能够表现公司的特点，达到 宣传效果。 3．设计要求 （1）以浅色的背景与深色图像形成对比，突出前方的宣传主体。 （2）以观感强烈的游戏画面瞬间抓住人们的视线，让人印象深刻。 （3）整体设计整洁干净，方便人们的操作。 （4）以沉稳严谨的设计体现出公司的经营特色。 （5）设计规格为1600像素（宽）×1206像素（高）。
11.4.2 【项目创意及制作】
1．设计素材 2．设计作品
效果图
11.4.2 【项目创意及制作】
3．步骤提示
1
2
3
4
11.5 电子商务网页——家政无忧网页
【项目背景及要求】 【项目创意及制作】
11.5.1 【项目背景及要求】
1．客户名称 家政无忧服务有限公司。 2．客户需求 家政无忧服务有限公司是一家以日常保洁、家电清洗、干洗服务、新居开荒 为主要经营项目的专业家政服务公司。公司为扩大服务范围，使服务更便捷，需 要制作网站，网站要突出公司的优势，整体风格简洁大气。 3．设计要求 （1）网页整体风格简洁大气，突出家政服务的专业性。 （2）网页的内容以家居为主，画面和谐，具有特色。 （3）向客户传达真实的服务信息内容。 （4）画面表现出空间感与层次感，图文搭配协调。 （5）设计规格为1400像素（宽）×2082像素（高）。
《网页设计》课程标准
《网页设计》课程标准一、课程定位《网页设计》是虚拟现实应用技术专业的专业学习领域课。
该课程实现Web程序开发知识、方法及工具，着重介绍在Web开发过程用到的HTML5基础知识，用于美化Web页面的样式表知识。
是一门用途广泛、前景良好的计算机行业课程，是适应计算机虚拟现实应用技术专业课程的需要。
该课程的学习可为后续《JavaScript脚本语言》等课程奠定一定的职业能力基础。
二、课程目标通过《网页设计》课程的学习，使学生具备Web应用开发的基本知识，为学习和掌握专业知识和职业技能打下基础。
1．知识目标（1）理解网站的基本概念和HTML5网页编程语言基础；（2）掌握搭建开发环境、网站的搭建（3）掌握HTML5中文字和段落的设置和常用标签；（4）掌握列表标签的使用；（5）掌握超级链接标签的使用；（6）掌握表格标签的设计和使用；（7）掌握框架页面布局；（8）掌握表单的设计；（9）掌握网页中多媒体的应用；（10）掌握层叠样式表CSS3的基本知识；（11）掌握一到多款网页设计软件的运用。
2．能力目标（1）能运用HTML5标签设计网页；（2）能使用CSS3设计网页；（3）会网页设计工具设计网页。
3．素质目标（1）具有自我学习的能力；（2）具备规范化、标准化的代码编写习惯，一定速度的代码编写能力；（3）养成忠于职守、认真负责、精益求精的敬业精神；（4）具备良好的沟通能力；（5）具备良好的团队合作精神以及自我展示能力。
三、课程设计1、设计思想（1）教学内容框架课程按照以能力为本位，紧密围绕在使用HTML5标签，利用CSS3 +DIV布局制作网页过程中遇到的实际需要和应该掌握的技术，全面介绍HTML5标签设计网页的内容和技巧。
（2）总体设计思路以完整的网页制作工作过程为导向，重构教学内容。
根据行业企业发展需要和完成职业岗位实际工作任务所需要的知识、能力素质要求，按照网页设计与制作的过程和学生的学习认知规律，打破原有的功能化知识体系，对教学内容从简单到复杂，从入门到深化进行科学安排，循序渐进的实现教学目标，课程内容与项目开发内容一致，理论与实践一体化，实现学习和工作的深度融合。
制作小孩影集的标题范文(优选5篇)
制作小孩影集的标题范文(优选5篇)（经典版）编制人：__________________审核人：__________________审批人：__________________编制单位：__________________编制时间：____年____月____日序言下载提示：该文档是本店铺精心编制而成的，希望大家下载后，能够帮助大家解决实际问题。
文档下载后可定制修改，请根据实际需要进行调整和使用，谢谢!并且，本店铺为大家提供各种类型的经典范文，如工作总结、工作计划、合同协议、条据文书、策划方案、句子大全、作文大全、诗词歌赋、教案资料、其他范文等等，想了解不同范文格式和写法，敬请关注!Download tips: This document is carefully compiled by this editor. I hope that after you download it, it can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you!Moreover, our store provides various types of classic sample essays for everyone, such as work summaries, work plans, contract agreements, doctrinal documents, planning plans, complete sentences, complete compositions, poems, songs, teaching materials, and other sample essays. If you want to learn about different sample formats and writing methods, please stay tuned!制作小孩影集的标题范文(优选5篇)制作小孩影集的标题范文第一篇1、每天都有不一样的精彩，喜欢就多多分享2、孩子，可要记住，哭泣的时候，妈妈就在这里等着你。
小清新绿植教育通用PPT模板
添加 文字
您的内容打在这里，或者通过复制 您的文本后，在此框中选择粘贴， 并选择只保留文字。您的内容打在 这里。
输入标题
CLICK TO ADD CAPTION TEXT
添加标题内容
详写内容……点击输入本栏的具体 文字，简明扼要的说明分项内容， 此为概念图解，请根据您的具体内 容酌情修改
05
添加标题内容
详写内容……点击输入本栏的具体文字，简 明扼要的说明分项内容，此为概念图解， 请根据您的具体内容酌情修改
01
您的内容打在这里，或 者通过复制您的文本后， 在此框中选择粘贴，并 选择只保留文字。您的 内容打在这里。
您的内容打在这里，或 者通过复制您的文本后， 在此框中选择粘贴，并 选择只保留文字。您的 内容打在这里。
输入标题
CLICK TO ADD CAPTION TEXT
您的内容打在这里，或者通过复制 您的文本后，在此框中选择粘贴， 并选择只保留文字。您的内容打在 这里。
添加需要标题
此处添加详细文本描述，建议与标题相关并符合整体语言风格，语言 描述尽量简洁生动。尽量将每页幻灯片的字数控制在 200字以内。
输入标题
CLICK TO ADD CAPTION TEXT
添加 标题
添加 标题
单击此处添加标题
您的内容打在这里，或者通过复制您的文本后，在此框中选择粘贴，并选择 只保留文字。在此录入上述图表的综合描述说明，在此录入上述图表的综合 描述说明您的内容打在这里，或者通过复制您的文本后，在此框中选择粘贴， 并选择只保留文字。在此录入上述图表的综合描述说明，在此录入上述图表 的综合描述说明。
93%
点击请替换文字内容
Please replace text, click add relevant headline, modify the text content, also can copy your content to this directly.Please replace text, click add relevant headline, modify the text content, also can copy your content to this directly.
30个对女生巨有诱惑力的网站
1. 每天一个超值化妆品团购，相信爱美的女生看到都会尖叫的吧！2 /ic/product.jsp可以在线制作可爱的图片~动态~bling~恩~这个站的图还都是很可爱的呢~比较创意3 /tool/hphoto/在线制作大头帖~图片样式很多~喜欢照大头贴的女生要看呢~4 /v2/这个可以连拍25张~在家就可以拍大头帖~只要有摄像头就ok5 /制作有意思的图片~哈哈~有个可以做error吓唬下别人~6 /asciiomatic/这个特震~可以把照片转化成字符~自己看看吧~哈哈``厉害~不过对图片有要求~必须是60×50的JPG图象``非常可爱``7 /fungames/comiccreator.html制作关于你的加菲猫三格漫画~可爱~8 /pick/sitetu/a222.swf做一个自己的漫画形象~特别有意思~我巨喜欢~9 http://flashface.ctapt.de/画个肖像吧~哈哈`其实不用画~只要随便选选就出来一副震撼的素描了~10 /在线剪纸~可以做雪花~很可爱的呢~11 /zh/index.php时空胶囊~可以永远保存你的想法和感觉~12 /被恶搞的蒙娜丽莎小姐好可怜~13 /Shakeskin/Gallery/Shaken/展示自己的鬼脸~哈哈`~好逗~~14 /在线做一个纸飞机~比较有技术含量~我最多飞过20米~HOHO`15 /你的初吻在哪里?哈哈~写在这个地图上吧~还可以看看别人的故事!16 /gxbd/写上自己的名字~就可以拥有一个自己的百度~非常好~17 /在线搭积木~无聊的时候可以玩下18 /artpad/painter/在线画油画~很象的说!恩`还可以选画框19 /这个超强悍的~百度google~一起用~厉害~20 tteart.nl/fotos_etching.aspworld of latte 咖啡的艺术21 /用颜色搜索图片!和flickr好像差不多~22 /ename/看看你的埃及名字~哈哈`~挺好玩的~不过不支持中文~就用拼音吧23 /BirthDay.asp计算你的生日~好多信息!很有意思!看不懂可以在线翻译下~24 /在线架子鼓~来玩会25 /血书~吓我一跳~啊~震~很逼真26 http://www.arnelefant.de/iclip.html设计很可爱~^_^`手脚混音!有意思~27 /widgets/toys/namegen/969测试你的日本名字!哈哈`28 /教你怎么转笔!~牛~29 /iii网站`^_^``这个网站主要就只会唱自己的域名`不过还是蛮好听的30 /给未来的自己写封信~恩`还是很有意义的~。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
传智播客《网页制作项目教程（HTML+CSS+JavaScript）》教学设计课程名称：网页制作项目教程（HTML+CSS+JavaScript）授课年级：2016年级授课学期：2016学年第二学期教师姓名：某某老师12201 年 月 日课题名称 项目4“青春树儿童摄影网”首页制作 计划课时 12课时内容分析 童年是人生岁月中最纯真的年代，也是被家人呵护，受尽百般宠爱的黄金时期。
为此，每位家长都希望给孩子的童年多留下些美好回忆，除了录制视频以外，儿童摄影也是很不错的选择。
为了使更多的家长了解到儿童摄影，“青春树儿童摄影”的CEO 李总致电HC 公司项目负责人王经理，计划定制一个主题网站，用于宣传“青春树儿童摄影”。
通过前面两个专题页的制作，小黄已经有了一定的HTML 与CSS 基础。
接到王经理安排的“青春树儿童摄影”主题网站任务后，小黄制定了这段时间的学习计划：巩固盒子模型、元素的类型与转换、浮动与定位等布局相关的基础知识，然后再动手制作该主题网站。
由于篇幅限制，本项目只讲解“青春树儿童摄影”主题网站首页面。
教学目标✧ 知识目标1、 了解盒子模型的概念2、 掌握盒子的相关属性3、 熟悉元素的类型与转换4、 掌握元素的浮动与定位5、 掌握清除浮动的方法✧ 技能目标1、 能够使用DIV 标记与浮动样式对页面进行布局 重点及措施 教学重点：认识盒子模型、盒子模型相关属性、<span>标记、元素的转换、元素的浮动与定位、清除浮动。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施 教学难点：盒子模型相关属性、元素的转换、元素的浮动与定位、清除浮动。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式 教学采用教师课堂讲授为主，使用教学PPT 讲解。
教学过程第一课时（讲解“认识盒子模型”）复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习【项目3 “网上花店”专题页制作】的相关知识。
1、 通过上一章的学习，我们知道CSS 是层叠式样式表的简称，层叠性是其最基本的特征。
那么，请举例说明什么是“CSS 层叠性”？答案：所谓层叠性是指多种CSS样式的叠加。
例如，当使用内嵌式CSS样式表定义<p>标记字号大小为12像素，链入式定义<p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。
2、通过上一章的学习，我们知道CSS中存在着权重和优先级。
那么，请分别说明“CSS基础选择器”中各选择器的权重值各是多少？答案：CSS为每一种基础选择器都分配了一个权重，其中，标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习✧分组讨论对新课进行讲解前，先让学生分组讨论以下问题：随着信息化的迅速发展,手机已经成为人们日常生活中的必需品。
一个完整的手机盒子通常包含手机、填充泡沫和盛装手机的纸盒。
其实，在CSS中也存在着盒子模型，利用CSS盒子模型能够更好的对网页进行排版。
那么，如何理解“CSS盒子模型”呢？请小组代表对以上问题发表见解。
教师对上述问题进行解释：●如果把手机想象成HTML元素，那么手机盒子就是一个CSS盒子模型，其中手机为CSS盒子模型的内容，填充泡沫的厚度为CSS盒子模型的内边距，纸盒的厚度为CSS盒子模型的边框。
当多个手机盒子放在一起时，它们之间的距离就是CSS盒子模型的外边距。
●所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
3✧知识点讲解➢讲解“认识盒子模型”（1）、教师展示PPT对“CSS盒子模型”的概念进行讲解，并以生活中常见的手机盒子的构成进行演示。
（2）、教师展示PPT，对CSS盒子模型的构成元素进行具体讲解。
（3）、教师使用CSS盒子模型控制网页中的元素，并进行代码演示。
（4）、学生练习，教师巡视，对疑难问题进行解答。
✧阶段小结➢小结重点：认识盒子模型。
易错点：注意理解盒子模型的构成元素。
➢答疑教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与解释。
✧巩固练习➢巩固本课时知识点学完本课时后，带领学生对“认识盒子模型”知识点进行回顾。
以此使学生更熟练地掌握如何认识盒子模型及其构成。
➢通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
4第二、三课时（盒子模型相关属性，讲解“边框属性”、“内边距属性”、“外边距属性”、“背景属性”、“盒子的宽与高”）说明：●将【任务4-2】作为两个课时进行讲解。
复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
1、通过上节课的学习，我们已经认识了盒子模型，并学习了盒子模型的构成。
那么，请大家回顾下：如何理解盒子模型，以及盒子模型的主要构成元素有哪些呢？答案：所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习✧分组讨论对新课进行讲解前，先让学生分组讨论以下问题：通过上节课的学习，我们已经学习了盒子模型及其边框属性。
其实，盒子模型中还包括其他属性，例如：边距属性。
那么，请同学们讨论下：如何理解盒子模型中的“内边距”呢？答案：请小组代表对以上问题发表见解。
教师对上述问题进行解释：在网页布局时，为了调整内容在盒子中的显示位置，常常需要给元素设置内边距，所谓内边距指的是元素内容与边框之间的距离，也常常称为内填充。
✧知识点讲解➢讲解“边框属性”（1）、教师展示PPT对“边框属性”的概念及用途进行讲解。
（2）、教师分别对“设置边框样式”、“设置边框宽度”、“设置边框颜色”及“综合设置边框”的属性值及应用效果进行讲解并通过代码进行演示。
（3）、教师指出应用“边框属性”时需要注意的问题，并给与解答。
（4）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“内边距属性”5（1）、教师展示PPT对“内边距属性”的概念及用途进行讲解。
（2）、教师对“内边距属性”进行讲解并通过代码进行演示。
（3）、教师指出应用“内边距属性”时需要注意的问题，并给予解答。
（4）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“外边距属性”（1）、教师展示PPT对“外边距属性”的概念及用途进行讲解。
（2）、教师对“外边距属性”进行讲解并通过代码进行演示。
（3）教师分析内外边距的区别与联系，并对比其应用效果。
（4）、教师指出应用“外边距属性”时需要注意的问题，并给予解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“背景属性”（1）、教师展示PPT对“背景属性”的概念及用途进行讲解。
（2）、教师分别对“设置背景颜色”、“设置背景图像”、“设置背景图像平铺”、“设置背景图像的位置”、“设置背景图像固定”、“综合设置元素的背景”进行讲解并通过代码进行演示。
（3）教师分析“背景属性”不同属性的区别与联系，并对比其应用效果。
（4）、教师指出应用“综合设置元素的背景”时需要注意的问题，并给予解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“盒子的宽与高”（1）、教师展示PPT对“CSS盒子模型”的构成元素进行回顾，并对“盒子的宽与高”的概念进行讲解。
（2）、教师分别对“盒子的宽度与高度”的常用单位数值进行讲解，并通过代码进行演示。
（3）、教师指出计算“盒子模型的总宽度和总高度”的计算原则，并能够根据实际情况进行计算。
●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和●盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和（4）、教师指出“宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img />和<input />标记除外）”。
（5）、学生练习，教师巡视，对疑难问题进行解答。
说明：在知识点讲解时可适时停下来，让学生自行尝试。
小组之间可以协作讨论，教师巡视，对疑难问题进行解答。
✧阶段小结➢小结重点：内边距属性、外边距属性。
易错点：注意区分盒子模型中的内边距与外边距。
➢答疑教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与解释。
6✧巩固练习➢巩固本课时知识点学完本课时后，带领学生对“边框属性”、“内边距属性”、“外边距属性”、“背景属性”、“盒子的宽与高”等知识点进行回顾。
以此使学生更熟练地掌握盒子模型相关属性，并能灵活应用这些属性控制网页元素。
➢通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
✧布置作业➢完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
➢预习【任务4-3】元素的类型与转换。
第四课时（元素的类型与转换，讲解“元素的类型”、“<span>标记”、“元素的转换”、“块元素垂直外边距的合并”）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
1、上节课中，我们学习了盒子模型中的边距属性，主要包括内边距和外边距属性。
那么，请简要说明如何理解CSS盒子模型中的“外边距”呢？答案：由于网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距；所谓外边距指的是元素边框与相邻元素之间的距离。
2、通过上节课的学习，我们已经认识了盒子模型，并学习了盒子模型的构成。
那么，请大家回顾下：在CSS规范的盒子模型中，如何计算盒子模型的总宽度和总高度？答案：CSS规范的盒子模型的总宽度和总高度的计算原则是：●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和。
●盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习✧分组讨论对新课进行讲解前，先让学生分组讨论以下问题：7在HTML中，存在着各种各样的标记，可以定义字体、文本、图片、列表等。
其实，HTML中的元素可分为两种类型:块元素和行内元素。
那么，请同学们讨论下：什么是块元素和行内元素，它们有哪些区别？请分别举例说明。