- 1、本文档共10页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
教学课题
项目7 CSS 3图文混排—7.2知识准备
授课班级
授课时间
教学目标
知识目标
1.掌握CSS 3美化段落;
2.掌握CSS 3美化图片;
3.掌握CSS 3图文混排。
能力目标
1.培养学生自主学习、分析问题和解决问题的能力;
2.培养学生熟练运用所学知识的能力。
德育目标
1.鼓励学生主动学习,提高学习兴趣,提升学生的专业素质;
2.培养学生的团队合作精神。
学情分析
上节课学习了CSS 3美化文本的方法,包括设置文字字体、大小、粗细、颜色,设置文本样式、阴影效果、溢出效果,设置文本控制换行、在线字体、旋转特效。
本节课学习使用CSS 3美化段落、美化图片和图文混排的方法。
教学重点
1.CSS 3美化段落;
2.CSS 3美化图片;
3.CSS 3图文混排。
教学难点
1.设置文本修饰效果;
2.设置文本的对齐方式;
3.设置文本的空白处理;
4.设置图片的对齐方式;
5.设置图片和文字的间距。
教学方法
项目教学法、多媒体辅助教学法、讲练结合法
教学过程
教学环节
教学内容
师生活动
新课导入
给学生展示一个网页页面,通过网页效果和查看网页源代码中段落、图片的CSS样式设置,导入本节课的内容。
教师提出问题,学生可分组讨论,协作探究。
技能学习
单元格列行单元格列行单元格列行一、CSS 3美化段落
单元格
列
行
单元格
列
行
单元格
列
行
1.设置词间距
在网页设计中,如果单词之间的间隔设置合理,将给人赏心悦目的感觉。在CSS 3中使用word-spacing属性定义增加或者减少词与词之间的间隔。格式如下:
{word-spacing: normal | length;}
2.设置字间距
在CSS 3中使用letter-spacing来定义文本之间的距离,格式如下:
{letter-spacing: normal | length;}
3.设置文本修饰效果
在CSS 3中,使用text-decoration属性可以为文本设置多种修饰效果,如下划线、删除线等,格式如下:
{ text-decoration:属性值; }
【例7-4】CSS 3美化段落实例一,代码如下所示。
1 !DOCTYPE html
2 html lang=en
3 head
4 meta charset=UTF-8
5 titleCSS3美化段落例1/title
6 style
7 p{line-height: 10px;}
8 /style
9 /head
10 body
11 p style=text-decoration: underline;始信泥土有芬芳/p
12 p style=text-decoration: overline;转眼捏成这般模样/p
13 p style=text-decoration: line-through;你是女娲托生的精灵/p
14 p style=text-decoration: blink;你是夸父追日的梦想/p
15 p style=word-spacing: normal;Let me gently walk past you./p
16 p style=word-spacing: 15px;Bathed in your childlike eyes./p
17 p style=letter-spacing: normal;Let me walk through your eyes./p
18 p style=letter-spacing: -1pxSmall feet running in the field of hope./p
19 p style=letter-spacing: 5pxWell, China/p
20 p style=letter-spacing: 1emMy dream!/p
21 p style=letter-spacing: 1exThe dream is fragrant./p
22 /body
23 /html
在浏览器中预览效果如图所示。
4.设置文本的垂直对齐方式
在CSS 3中,使用vertical-align属性设置垂直对齐方式,此属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,可设置为负长度值和百分比值。在表单元格中,此属性可设置单元格内容的对齐方式。格式如下:
{vertical-align:属性值;}
5.设置文本的水平对齐方式
文本除了垂直对齐方式外,还有水平对齐方式,包括水平方向上的居中、左对齐、右对齐等。在CSS 3中,使用text-align属性可定义文本的水平对齐方式,格式如下:
{text-align:属性值;}
6.设置文本大小写转
您可能关注的文档
- 《计算机导论》教学讲义 第7章 网站建设基础.doc
- 《声乐(第2版)》教学讲义 初级(下).doc
- 《网络组建与应用》教学讲义 《网络组建与应用》课程单元教学设计二.pdf
- 《Web前端开发》教学讲义 Web前端设计基础 项目七-1.docx
- 《Web前端开发》教学讲义 Web前端设计基础 项目五-1.docx
- 《数字程控交换技术与应用(第2版)》教学讲义 (2)授课计划.doc
- 《数控车削编程与加工技术(第2版)》教学讲义 第一篇 加工基础篇 11任务十一 《运用G32代码编程车内、外螺纹》.doc
- 《普通车床加工技术(第3版)》教学讲义 项目六 车削成形面 31、车削成形面方法.doc
- 《投资与理财》教学讲义 教案(项目一:单元四).doc
- 《普通车床加工技术(第3版)》教学讲义 项目五 车削圆锥面 26、圆锥面基本知识.doc
文档评论(0)