HTML5-CSS3任务驱动教程-课程单元设计.docx

《HTML5-CSS3任务驱动教程-课程单元设计.docx》由会员分享，可在线阅读，更多相关《HTML5-CSS3任务驱动教程-课程单元设计.docx（71页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课程单元设计课程名称：HTML+CSS网页设计基础适用专业：计算机应用技术所属院系：编制人：制定时间:HTML+CSS网页设计基础教案设计3一、教案头本单兀标题：第二讲HTML5开发基础二授课班级：课时：4上课地点：教学目标能力目标知识目标1、掌握title、base、meta 标记的用法2、掌握 margin、bgcolor、 background text属性的用法1、网页头部head标记设置2、网页主体body标记设置3、在HTML代码中添加注释能力训练任务 及案例一能力训练任务网页头部head标记设置网页主体body标记设置二 案例案例1：使用title标记设置网页标题案例2：使用ba

2、se标记设置网页基地网址参考资料1 .网页设计与制作教程（HTML+ CSS+ JavaScript）张晓蕾主编， 电子工业出版社。2 .网页设计基础HTML、CSS和JavaScript候占伟主编，国防科技 大学出版社。3 .HTML+CSS+JavaScript网页制作三合一案例教程徐照兴、谭鸿健、 郑宁健主编，上海交通大学出版社。4 .动态网页设计与制作一HTML+CSS+JavaScript吴以欣、陈小宁主 编，人民邮电出版社。5 . Dreamweaver CS6实例教程魏三强，李静，杨子燕主编，人民 邮电出版社。6 .Dreamweaver CS6网页设计与制作杨杰主编，电子工业出

3、版社。7 .网页设计与制作工程化实战教程陈彦，张亚静主编，人民邮电 出版社。二、（单元）教学设计教学环节教学内容教学方法 及手段学生活动教学资源 及工具时间 分配引入通过情景引入任务背景提问：1、网页当中的标题班级QQ 群讨论、友M、教材（含16分钟如何制作？2、网页中的背景颜 色如果修改？课件视频教学点评、观看教 学视频电子版）、 网络资源 （平台、QQ 群）、 多媒体、 电脑、移 动端设备操练（掌 握初步 或基本 能力）1、网页头部head标记设 置使用title标记设置 网页标题使用base标记设置 网页基地网址2、网页主体（body标记设 置设置网页文字效果 （text属性）课件演示

4、视频教学集体参 与、 观看教 学视频、 代表发 言教材（含 电子版）、 网络资源 （平台、QQ 群）、 多媒体、 电脑、移 动端设备75分钟深化（加 深对基 本能力 的体会）1、使用（meta标记设置网 页关键字、说明书和网页 刷新等信息2、设置网页整体边距 （margin 属性）3、设置网页背景颜色 （bgcolor 属性）4、设置图像图像 （background 属性）视频教学 课件演示 操作演示集体参 与、 观看教 学视频、 代表发教材（含 电子版）、 网络资源 （平台、QQ 群）、 多媒体、 电脑、移 动端设备65分钟归纳（知 识和能 力）对知识点进行归纳总结课件演示 视频教学观看教

5、学视频、 小组讨 论、 代表发教材（含 电子版）、 网络资源 （平台、QQ 群）、 多媒体、4分钟电脑、移动端设备巩固与 拓展知识点延伸：在HTML代码 中添加注释班级QQ 群发布、 职教云平 台发布 课件演示集体参 与教材（含 电子版）、 网络资源 （平台、QQ 群）、多媒体、 电脑、移 动端设备8分钟总结网页头部和主体设置的要 点和方法班级QQ 群发布、 职教云平 台发布 课件演示集体参 与教材（含 电子版）、 网络资源 （平台、QQ 群）、多媒体、 电脑、移 动端设备7分钟作业布 置课后测试题班级QQ 群发布、 职教云平 台发布集体参 与教材（含 电子版）、 网络资源 （平台、QQ 群）

6、、多媒体、 电脑、移 动端设备5分钟学习成果本章的学习，先通过菜单编辑的方式教学生怎么样去设计head头部与 body主体的标题、网页背景、字体颜色、网页边距等操作，再通过代 码的形式进行设置，从简入深，能够让学生慢慢走进网页制作的学习 中来。教学后记HTML+CSS网页设计基础教案设计4一、教案头本单兀标题： 第四讲 文本与段落. 授课班级：课时：4上课地点：教学目标能力目标知识目标1、学会各种文字修饰标记的使用方 法2、学会各种文本列表标记的设置和 使用1、文字修饰标记2、文字分行与分段标记3、文本列表标记能力训练任务 及案例一能力训练任务1、文字修饰标记的使用方法2、文本列表标记的设置和

7、使用二、案例案例1:制作新闻列表和公告参考资料1 .网页设计与制作教程(HTML+ CSS+ JavaScript)张晓蕾主编， 电子工业出版社。2 .网页设计基础HTML、CSS和JavaScript候占伟主编，国防科技 大学出版社。3 .HTML+CSS+JavaScript网页制作三合一案例教程徐照兴、谭鸿健、 郑宁健主编，上海交通大学出版社。4 .动态网页设计与制作一HTML+CSS+JavaScript吴以欣、陈小宁主 编，人民邮电出版社。5 . Dreamweaver CS6实例教程魏三强，李静，杨子燕主编，人民 邮电出版社。6 . Dreamweaver CS6网页设计与制作杨杰

8、主编，电子工业出版社。7 .网页设计与制作工程化实战教程陈彦，张亚静主编，人民邮电 出版社。二、（单元）教学设计教学环节教学内容教学方法 及手段学生活动教学资源 及工具时间分配引入通过情景引入任务背景提问：1、如何在网页中插 入文字？2、网页中的文字如 何进行排版？班级QQ群课件视频教学讨论、友5、 点评、 观看教 学视频教材（含 电子版）、 网络资源 （平台、QQ 群）、 多媒体、 电脑、移 动端设备16分钟操练（掌 握初步 或基本 能力）1、文字修饰标记文字样式font 标记倾斜文字i和em标 记加粗文字b、strong）标记下划线（u标记标题标记hl至h6空格 2、文字分行与分段

9、标记换行br标记，不换行nobr标记分段3标记对其align属性水平线hr标记课件演示 视频教学集体参 与、 观看教 学视频、 代表发教材（含 电子版）、 网络资源 （平台、QQ 群）、 多媒体、 电脑、移 动端设备75分钟深化（加 深对基 本能力 的体会）1、使用font标记进行设 置文字样式2、设置倾斜文字3、设置加粗文字4、使用b用、nobr标记 为文字换行或不换行5、设置文字水平对齐效果视频教学 课件演示 操作演示集体参 与、 观看教 学视频、 代表发教材（含 电子版）、 网络资源 （平台、QQ 群）、 多媒体、65分钟6、使用水平线分割文本电脑、移动端设备归纳（知 识和能 力）对知识

10、点进行归纳总结课件演示 视频教学、观看教 学视频、 小组讨 论、 代表发教材（含 电子版）、 网络资源（平台、QQ 群）、 多媒体、 电脑、移 动端设备4分钟巩固与 拓展知识点延伸：文本列表标 记1、列表的结构2、无序列表ul标记3、有序列表。1标记4、定义列表dl标记班级QQ 群发布、 职教云平 台发布 课件演示集体参 与教材（含 电子版）、 网络资源（平台、QQ 群）、 多媒体、 电脑、移 动端设备8分钟总结文字标记相关属性的介绍 以用法班级QQ 群发布、 职教云平 台发布 课件演示集体参 与教材（含 电子版）、 网络资源（平台、QQ 群）、 多媒体、 电脑、移 动端设备7分钟作业布 置操

11、作题：制作新闻列表和 公告班级QQ 群发布、 职教云平 台发布集体参 与教材（含电子版）、网络资源5分钟（平台、QQ 群）、 多媒体、 电脑、移 动端设备学习成果本节课知识点的学习，主要是掌握代码的运用，比方文字加粗标记b、 标记标记h、水平线标记br等，都是制作网页最基本的标记，务必 让学生掌握下来。教学后记HTML+CSS网页设计基础教案设计5一、教案头本单兀标题： 第五讲 网页中的图像与多媒体技术一图片标记设置授课班级：课时：4上课地点：教学目标能力目标知识目标1、掌握在网页中插入和设置图像的 方法，标记2、掌握在网页中实现文本和图像滚 动的方法，marquee标记1、了解网页中的图片格

12、式2、插入图像3、滚动标记marquee能力训练任务 及案例一能力训练任务1、插入图像的方法2、网页中的图片格式二、案例案例1:网页中图像进行设置的相关标记参考资料1 .网页设计与制作教程(HTML+ CSS+ JavaScript)张晓蕾主编， 电子工业出版社。2 .网页设计基础HTML、CSS和JavaScript候占伟主编，国防科技 大学出版社。3 .HTML+CSS+JavaScript网页制作三合一案例教程徐照兴、谭鸿健、 郑宁健主编，上海交通大学出版社。4 .动态网页设计与制作一HTML+CSS+JavaScript吴以欣、陈小宁主 编，人民邮电出版社。5 .Dreamweaver

13、 CS6实例教程魏三强，李静，杨子燕主编，人民邮电出版社。6 .Dreamweaver CS6网页设计与制作杨杰主编，电子工业出版社。7 .网页设计与制作工程化实战教程陈彦，张亚静主编，人民邮电 出版社。二、(单元)教学设计教学环节教学内容教学方法 及手段学生活动教学资源 及工具时间 分配教材（含通过情景引入任务背景提问：1、网站网页中常用班级QQ群课件视频教学讨论、友B、 点评、 观看教 学视频电子版）、网络资源引入的图片格式有哪 些？2、这些图片格式有 什么特点？（平台、QQ 群）、 多媒体、 电脑、移 动端设备16分钟教材（含操练（掌 握初步 或基本 能力）1、GIF格式2、JPEG格式

14、3、PNG格式课件演示集体参 与、 观看教电子版）、网络资源（平台、75分钟4、图像标记视频教学学视频、QQ 群）、5、图文混排代表发多媒体、6、滚动标记marquee、.一电脑、移动端设备教材（含深化（加 深对基 本能力 的体会）1、制作图片介绍界面2、制作网页滚动文字3、制作网页滚动图片滚动效果视频教学 课件演示 操作演示集体参 与、 观看教 学视频、 代表发电子版）、 网络资源（平台、QQ 群）、 多媒体、65分钟电脑、移动端设备归纳（知 识和能 力）对知识点进行归纳总结课件演示 视频教学、观看教 学视频、 小组讨 论、教材（含 电子版）、 网络资源 （平台、4分钟HTML+CSS网页设

15、计基础教案设计1一、教案头本单元标题： 第1讲 网页设计基础知识授课班级：课时：2上课地点：教学目标能力目标知识目标1、了解网页、网站与互联网的关系 2、了解静态网页与动态网页之间的 区别1、Web互联网的基本知识2、网站与网页3、网站相关术语4、网页编辑软件Dreamweaver能力训练任务 及案例一能力训练任务了解：网站及网页的基本概念。理解：网页设计的相关术语,激发学生对于网页设计课程的热爱。二 案例案例1: 了解网站建设流程；案例2：创立本地站点。参考资料1 .网页设计与制作教程（HTML+ CSS+ JavaScript）张晓蕾主编， 电子工业出版社。2 .网页设计基础HTML、CS

16、S和JavaScript候占伟主编，国防科技 大学出版社。3 .HTML+CSS+JavaScript网页制作三合一案例教程徐照兴、谭鸿健、 郑宁健主编，上海交通大学出版社。4 .动态网页设计与制作一IITML+CSS+JavaScript）吴以欣、陈小宁主 编，人民邮电出版社。5 . Dreamweaver CS6实例教程魏三强，李静，杨子燕主编，人民 邮电出版社。6 . Dreamweaver CS6网页设计与制作杨杰主编，电子工业出版社。7 .网页设计与制作工程化实战教程陈彦，张亚静主编，人民邮电 出版社。二、（单元）教学设计教学环节教学内容教学方法 及手段学生活动教学资源 及工具时间

17、分配引入通过问答引入任务背景1、什么是互联网？2、什么是网站、什么是网班级QQ 群 课件讨论、 友B、 点评、教材（含电子版）、16分钟代表发QQ 群）、 多媒体、 电脑、移 动端设备巩固与 拓展知识点延伸：图片格式的 更改班级QQ 群发布、 职教云平 台发布 课件演示集体参 与教材（含 电子版）、 网络资源（平台、QQ 群）、 多媒体、 电脑、移 动端设备8分钟总结网页中图像进行设置的相 关标记，以及相关标记的 相关属性班级QQ 群发布、 职教云平 台发布 课件演示集体参 与教材（含 电子版）、 网络资源 （平台、QQ 群）、 多媒体、 电脑、移动端设备7分钟作业布 置课后测试题班级QQ 群

18、发布、 职教云平 台发布集体参 与教材（含 电子版）、 网络资源（平台、QQ 群）、 多媒体、 电脑、移 动端设备5分钟学习成果用inig标记在网页中插入图片，使用marquee标记让图片进行滚动 起来，重点的学习标记属性和属性值的设置，让网页移动起 来这个效果能够吸引学生的学习兴趣。教学后记HTML+CSS网页设计基础教案设计6一、教案头本单兀标题： 第六讲 网页中的图像与多媒体技术一多媒体与超链接标记设置.授课班级：课时：4上课地点：教学目标能力目标知识目标1、插入flash动画embed标记、 插入FLV视频(object标记、插入 普通视频embed标记的学习2、背景音乐(bgsoun

19、d标记、音频 embed标记的学习3、掌握在网页中创立各种超链接分 方法1、在网页中插入多媒体 2、为网页添加背景音乐 3、网页中调用外部程序 4、文本与图像链接能力训练任务 及案例一、能力训练任务1、网页中多媒体的插入2、网页中背景音乐的添加二、案例案例1：网页中多媒体的添加案例2：各种超链接的创立参考资料1 .网页设计与制作教程(I1TML+ CSS+ JavaScript)张晓蕾主编， 电子工业出版社。2 .网页设计基础HTML、CSS和JavaScript候占伟主编，国防科技 大学出版社。3 . HTML+CSS+JavaScript网页制作三合一案例教程徐照兴、谭鸿健、 郑宁健主编，

20、上海交通大学出版社。4 .动态网页设计与制作一HTML+CSS+JavaScript吴以欣、陈小宁主 编，人民邮电出版社。5 .Dreamweaver CS6实例教程魏三强，李静，杨子燕主编，人民邮电出版社。6 . Dreamweaver CS6网页设计与制作杨杰主编，电子工业出版社。7 .网页设计与制作工程化实战教程陈彦，张亚静主编，人民邮电 出版社。二、（单元）教学设计教学环节教学内容教学方法 及手段学生活动教学资源 及工具时间分配引入通过情景引入任务背景提问：1、网站网页中常用 的图片格式有哪 些？2、这些图片格式有 什么特点？课件演示 提问讨论 友日 点评教材、网络资源、多媒体、电脑1

21、6分钟操练（掌 握初步 或基本 能力）1、在网页中插入多媒体 标 记、object标记2、为网页添加背景音乐标记、音频embed标记3、网页中调用外部程序4、文本与图像链接a标记、target属性 锚记链接讲解课件演示集体参 与教材、网络资 源、多媒体、 电脑75分钟深化（加 深对基 本能力 的体会）1、制作flash欢迎页面2、制作FLV视频页面3、在网页中添加背景音 乐、嵌入音频4、网页中显示当前系统时 间5、设置锚记链接课件演示 操作演示动手操 作教材、网络资 源、多媒体、 电脑65分钟归纳（知 识和能 力）对知识点进行归纳总结课件演示 板书小组讨 论 代表发教材、网络资 源、多媒体、

22、电脑4分钟巩固与 拓展知识点延伸：特殊超链接 电子邮件、空链接、下载 链接的学习课件演示 操作演示动手操 作教材、网络资8分钟源、多媒体、电脑总结1、网页中多媒体的添加2、各种超链接的创立课件演示集体参 与教材、网络资源、多媒体、电脑7分钟作业布 置课后测试题课件演示集体参 与教材、网络资源、多媒体、电脑5分钟学习成果超链接知识点，通过实例：小图点击查看大图效果，网页能查看图片， 点击图片进行详细查看（超链接提示title）教学后记HTML+CSS网页设计基础教案设计7一、教案头本单元标题：第七讲表单标记设置授课班级：课时：4上课地点：教学目标能力目标知识目标1、理解网页表单form标记2、理

23、解并掌握网页中各种表单元素 的实现方法3、能够正确地在网页中使用各种表 单元素1、了解网页表单2、在网页中插入表单元素能力训练任务 及案例一、能力训练任务1、网页表单form标记2、表单的数据传递方式method属性二、案例案例1：文件域file案例2：按钮button参考资料1 .网页设计与制作教程(HTML+ CSS+ JavaScript)张晓蕾主编， 电子工业出版社。2 .网页设计基础HTML、CSS和JavaScript候占伟主编，国防科技 大学出版社。3 .HTML+CSS+JavaScript网页制作三合一案例教程徐照兴、谭鸿健、 郑宁健主编，上海交通大学出版社。4 .动态网页设

24、计与制作一HTML+CSS+JavaScript)吴以欣、陈小宁主 编，人民邮电出版社。5 .Dreamweaver CS6实例教程魏三强，李静，杨子燕主编，人民邮电出版社。6 . Dreamweaver CS6网页设计与制作杨杰主编，电子工业出版社。7 .网页设计与制作工程化实战教程陈彦，张亚静主编，人民邮电 出版社。二、（单元）教学设计教学环节教学内容教学方法 及手段学生活动教学资源 及工具时间分配通过情景引入任务背景教材、引入展示成果网页1、在网页中如何制作一份课件演示 提问讨论友日网络资源、16分钟完成的表单？点评多媒体、2、分析网页中元素电脑1、了解网页表单网页表单的作用网页表单fo

25、rm标记表单的数据传递方式教材、网络资操练（掌 握初步method属性讲解集体参或基本2、在网页中插入表单元素课件演示与源、75分钟能力）文本域text 密码域多媒体、password、文本区域 textarea、隐藏域 hidden、 复选框checkbox、单项选择按 钮 radio、选择域 select、 图像域image电脑1、插入文本域教材、深化（加2、插入密码域深对基 本能力 的体会）3、插入隐藏域4、插入复选框5、插入单项选择按钮课件演示 操作演示动手操 作网络资源、多媒体、65分钟6、插入下拉列表7、插入图像域电脑教材、归纳（知 识和能 力）对知识点进行归纳总结课件演示 板书小

26、组讨 论 代表发网络资 源、多媒体、4分钟电脑巩固与 拓展知识点延伸：1、文件域file2、按钮 button课件演示 操作演示动手操 作教材、网络资源、多媒体、电脑8分钟总结1、表单的基础知识2、表单元素的实质3、表单的结构课件演示集体参 与教材、网络资源、多媒体、电脑7分钟作业布 置课后测试题课件演示集体参 与教材、网络资源、多媒体、电脑5分钟通过会员注册实例，来讲解本章表单的知识点，到达很好的教学效果。学习成果教学后记HTML+CSS网页设计基础教案设计8一、教案头本单兀标题：第八讲. CSS样式基础授课班级：课时：4上课地点：教学目标能力目标知识目标1、掌握CSS样式语法和规那么2、掌

27、握内联样式、内部样式、外部 样式表文件、导入样式表文件的用 法3、各种选择器的用法1、了解CSS样式2、CSS样式语法3、4种使用CSS样式的方法4、CSS样式选择器能力训练任务 及案例一能力训练任务1、CSS样式语法和规那么2、4种使用CSS样式的方法二、案例案例1:使用标记选择器控制网页整体属性参考资料1 .网页设计与制作教程(HTML+ CSS+ JavaScript)张晓蕾主编， 电子工业出版社。2 .网页设计基础HTML、CSS和JavaScript候占伟主编,国防科技 大学出版社。3 .HTML+CSS+JavaScript网页制作三合一案例教程徐照兴、谭鸿健、 郑宁健主编，上海交

28、通大学出版社。4 .动态网页设计与制作一HTML+CSS+JavaScript)吴以欣、陈小宁主 编，人民邮电出版社。5 .Dreamweaver CS6实例教程魏三强，李静，杨子燕主编，人民邮电出版社。6 . Dreamweaver CS6网页设计与制作杨杰主编，电子工业出版社。7 .网页设计与制作工程化实战教程陈彦，张亚静主编，人民邮电 出版社。二、（单元）教学设计教学环节教学内容教学方法 及手段学生活动教学资源 及工具时间分配引入通过情景引入任务背景 展示成果网页1、网页外观的比拟？2、如何进行设置？课件演示 提问讨论友日点评教材、网络资源、多媒体、 电脑16分钟操练（掌 握初步 或基本

29、 能力）1、了解CSS样式2、CSS样式语法3、4种使用CSS样式的方法4、CSS样式选择器讲解课件演示集体参 与教材、网络资源、多媒体、 电脑75分钟深化（加 深对基 本能力 的体会）1、使用style属性添加内 联样式2、使用内部CSS样式3、链接外部样式文件4、使用通配选择器控制网 页中所有标记5、使用标记选择器控制网 页整体属性6、定义网页中超链接文字 效果课件演示 操作演示动手操 作教材、网络资源、多媒体、 电脑65分钟归纳（知 识和能 力）对知识点进行归纳总结课件演示 板书小组讨 论 代表发教材、网络资 源、多媒体、 电脑4分钟巩固与 拓展知识点延伸：1、群选择器2、复合选择器课件

30、演示 操作演示动手操 作教材、网络资源、8分钟页？视频教学观看教 学视频网络资源 （平台、QQ 群）、 多媒体、 电脑、移 动端设备操练（掌 握初步 或基本 能力）1、掌握网站、网页与互联 网的关系2、了解网页与HTML语言3、了解网页与网站的基础 知识4、网站开发常用的软件与 技术课件演示 视频教学集体参 与、 观看教 学视频、 代表发教材（含 电子版）、 网络资源 （平台、QQ 群）、 多媒体、 电脑、移 动端设备30分钟深化（加 深对基 本能力 的体会）1、静态网页和动态网页的 区别2、因特网、浏览器、 TCP/IP、IP地址、域名、 URL、HTTP、FTP网站的相 关术语视频教学 课

31、件演示 操作演示集体参 与、 观看教 学视频、 代表发-、一.教材（含 电子版）、 网络资源 （平台、QQ 群）、 多媒体、 电脑、移 动端设备20分钟归纳（知 识和能 力）对知识点进行归纳总结课件演示 视频教学、观看教 学视频、 小组讨 论、代表发教材（含 电子版）、 网络资源 （平台、QQ 群）、 多媒体、 电脑、移4分钟多媒体、电脑总结CSS样式相关基础知识课件演示集体参 与教材、网络资源、多媒体、电脑7分钟作业布 置课后测试题课件演示集体参 与教材、网络资源、多媒体、电脑5分钟学习成果通过PPT内容与实际的操作相结合，讲解CSS样式的4种样式方法和 7种CSS样式选择器。教学后记HTM

32、L+CSS网页设计基础教案设计9一、教案头本单兀标题：第九讲 设置文本的css属性授课班级：课时：4上课地点：教学目标能力目标知识目标1、理解各种文字控制CSS属性的语 法及属性设置2、掌握使用CSS样式对网页中的文 字进行控制1、使用CSS控制文字样式2、使用CSS控制字间距能力训练任务 及案例一能力训练任务各种文字控制css属性的语法及属性设置。二 案例案例L使用CSS控制字间距,字间距Word-spacing属性、行间距 line-height 属性参考资料1 .网页设计与制作教程(HTML+ CSS+ JavaScript)张晓蕾主编， 电子工业出版社。2 .网页设计基础HTML、CS

33、S和JavaScript候占伟主编，国防科技 大学出版社。3 .HTML+CSS+JavaScript网页制作三合一案例教程徐照兴、谭鸿健、 郑宁健主编，上海交通大学出版社。4 .动态网页设计与制作一HTML+CSS+JavaScript吴以欣、陈小宁主 编，人民邮电出版社。5 . Dreamweaver CS6实例教程魏三强，李静，杨子燕主编，人民 邮电出版社。6 .Dreamweaver CS6网页设计与制作杨杰主编，电子工业出版社。7 .网页设计与制作工程化实战教程陈彦，张亚静主编，人民邮电 出版社。二、（单元）教学设计教学环节教学内容教学方法 及手段学生活动教学资源 及工具时间分配引入

34、通过情景引入任务背景展示成果网页1、相互比拟2、如何对网页内容进行修 改和设置？课件演示 提问讨论 友日 点评教材、网络资 源、多媒体、 电脑16分钟操练（掌 握初步 或基本 能力）1、使用CSS控制文字样式 字体font-family属性、 大小font-size属性、颜 色color属性、粗细 font-weight属性、样式 font-style 、 修饰 text-decoration 属性2、使用CSS控制字间距 字间距Word-spacing属 性、行间距line-height 属性讲解课件演示集体参 与教材、网络资 源、多媒体、 电脑75分钟深化（加 深对基 本能力 的体会）1、

35、定义网页中文字2、设置网页中文字的加粗 和倾斜样式3、定义网页中英文字母大 小写4、为网页中的文字添加下 划线、顶线和删除线效果 5、设置段落文本字间距6、设置网页中的文本行间 距课件演示 操作演示动手操 作教材、网络资源、多媒体、电脑65分钟归纳（知 识和能 力）对知识点进行归纳总结课件演示 板书小组讨 论 代表发教材、网络资源、多媒体、4分钟电脑巩固与 拓展知识点延伸：颜色值的表示方法英文名、RGB和HEX等多 种方式课件演示 操作演示动手操 作教材、网络资源、多媒体、 电脑8分钟总结CSS样式对网页中文字进 行设置的方法和技巧课件演示集体参 与教材、网络资源、多媒体、 电脑7分钟作业布

36、置课后测试题课件演示集体参 与教材、网络资源、多媒体、 电脑5分钟学习成果掌握本文属性CSS样式，属性样式。教学后记HTML+CSS网页设计基础教案设计10一、教案头本单兀标题：第十讲.设置文本的css属性授课班级：课时：4上课地点：教学目标能力目标知识目标1、理解各种段落控制CSS属性的语 法及属性设置2、掌握使用CSS样式对网页中的段 落进行控制3、掌握CSS3. 0新增对文字进行控 制的属性的设置方法1、使用CSS控制段落样式2、CSS3. 0新增文本控制属能力训练任务 及案例一能力训练任务各种段落控制css属性的语法及属性设置。二、案例案例1：使用CSS控制段落样式案例2： CSS3.

37、0新增文本控制属性。参考资料1 .网页设计与制作教程(IITML+ CSS+ JavaScript)张晓蕾主编， 电子工业出版社。2 .网页设计基础HTML、CSS和JavaScript候占伟主编，国防科技 大学出版社。3 . HTML+CSS+JavaScript网页制作三合一案例教程徐照兴、谭鸿健、 郑宁健主编，上海交通大学出版社。4 .动态网页设计与制作一HTML+CSS+JavaScript)吴以欣、陈小宁主 编，人民邮电出版社。5 .Dreamweaver CS6实例教程魏三强，李静，杨子燕主编，人民邮电出版社。6 . Dreamweaver CS6网页设计与制作杨杰主编，电子工业出

38、版社。7 .网页设计与制作工程化实战教程陈彦，张亚静主编，人民邮电 出版社。二、（单元）教学设计教学环节教学内容教学方法 及手段学生活动教学资源 及工具时间 分配引入通过情景引入任务背景展示成果网页1、相互比拟2、如何对网页内容进行修 改和设置？课件演示 提问讨论友日 点评教材、网络资 源、多媒体、 电脑16分钟操练（掌 握初步 或基本 能力）1、使用CSS控制段落样式 段落首字下沉、段落首行 缩进text-indent属性、 段落水平对齐 text-align、文本垂直对 齐 vertical-align 属性2、CSS3. 0新增文本控制属 性控制文本换行Word-wrap 属性讲解课件演

39、示集体参 与教材、网络资 源、多媒体、 电脑75分钟深化（加 深对基 本能力 的体会）1、在网页中实现段落文字 首字下沉2、在网页中实现段落首行 缩进效果3、设置网页中文本水平对 齐4、设置网页中文本垂直对 齐课件演示 操作演示动手操 作教材、网络资 源、多媒体、 电脑65分钟归纳（知 识和能 力）对知识点进行归纳总结课件演示 板书小组讨 论 代表发教材、网络资 源、多媒体、 电脑4分钟巩固与 拓展知识点延伸：文字阴影text-shadow属性介绍实现网页文本的阴影效果课件演示 操作演示动手操 作教材、网络资源、多媒体、电脑8分钟总结CSS样式对网页中段落进 行设置的方法和技巧课件演示集体参

40、与教材、网络资源、多媒体、电脑7分钟作业布 置课后测试题课件演示集体参 与教材、网络资源、多媒体、电脑5分钟学习成果CSS样式对网页中段落进行设置的方法和技巧。教学后记HTML+CSS网页设计基础教案设计11一、教案头能力目标本单元标题：第十一一讲设置,背景和图像的CSS属性授课班级：课时：4上课地点：能力目标知识目标教学目标教学目标1、掌握设置背景颜色背景图像的属 性方法2、掌握CSS设置图片样式的方法和 技巧3、掌握CSS3. 0新增背景控制属性4、掌握CSS3.0新增边框控制属性1、使用CSS控制背景颜色和背景2、使用CSS设置图片样式3、CSS3. 0新增颜色设置方式4、CSS3. 0新增背景控制属性5、CSS3. 0新增边框控制属性一、能力训练任务综合考察学生对CSS样式对网页中段落进行设置的方法和技巧等操作能能力训练任务及案例力。案例案例案例1：使用css控制背景颜色和背景2：使用CSS设置图片样式1 .网页设计与制作教程(HTML+ CSS+ JavaScript)张晓蕾主编， 电子工业出版社。2 .网页设计基础HTML、CSS和JavaScript候占伟主编，国防科技 大学出版社。3 .HTML+CSS+JavaScript网页制作三合一案例教程徐照兴、谭鸿健、 郑宁健主编，上海交通大学出版社。参考资料4 .动态网页设计与制作一HTML+CSS+J