《web前端技术》(赵敏)003-0教案 第9课 CSS的文本和图像属性

PAGE1PAGE1PAGE2PAGE2

课题第9课CSS3的文本属性和图像属性课时2课时（90min）教学目标知识技能目标：（1）掌握设置字体样式和文本格式的相关属性（2）掌握设置网页图像和背景样式的相关属性素质目标：（1）学习CSS3中文本和图像的常用属性，增加知识储备，锻炼思维能力（2）体验丰富的案例，养成理论与实践相结合的良好习惯（3）感受国家强大，增强民族自豪感，提升民族自信心教学重难点教学重点：设置字体样式和文本格式的相关属性；设置网页图像的相关属性教学难点：设置背景样式的相关属性教学方法问答法、讨论法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂教学设计第1节课：→→→传授新知（20min）→实战拓展（15min）→第2节课：→传授新知（20min）→实战演练（15min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务了解CSS的文本属性和图像属性，从网上找多种网页案例查看原代码，查看其中CSS相关属性的设置【学生】完成课前任务通过课前任务，让学生提前预习知识点，了解CSS的文本属性和图像属性考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（3min）【教师】提出问题网页文件丰富多彩，包含很多元素，请问大家，网页可以从哪些方面进行美化？怎样美化网页文本？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（20min）6.1文本属性6.1.1设置字体样式【教师】讲解设置字体样式多种属性的方法，并举例子说明1．字体类型在CSS3中，使用font-family属性设置文本的字体类型（也可直接使用font属性），具体格式为：font-family:name;其中，name表示字体名称。……（详见教材）【课堂拓展】CSS3提供了5个通用字体作为备用字体，用于替换无法正常显示的类似字体，它们分别为serif（衬线字体）、sans-serif（无衬线字体）、cursive（草体）、fantasy（奇异字体）和monospace（等宽字体）。……（详见教材）2．字体大小在CSS3中，使用font-size属性设置文本的字体大小，具体格式为：font-size:length|百分数|关键字；其中，length最常用，表示某个固定值……（详见教材）3．字体粗细在CSS3中，使用font-weight属性设置文本的字体粗细，具体格式为：font-weight:normal|bold|bolder|lighter|number;……（详见教材）【课堂拓展】在Windows系统的编辑器中，文本的默认字体为“微软雅黑”，在该系统环境下为文本设置font-weight属性时，页面中的字体粗细可能并未更改，这是因为“微软雅黑”字体只支持400与700两种字体粗细效果，当设置为其他值时它会自动替换成这两种效果。4．字体风格CSS3中，使用font-style属性设置文本的字体风格，具体格式为：font-style:normal|italic|oblique;……（详见教材）5．字体颜色在CSS3中，使用color属性设置文本的字体颜色，具体格式为：color:color;……（详见教材）【课堂拓展】在实际应用中，只有那些常见的颜色，如红色、白色、黑色等会使用英文单词表示，其他颜色更多是使用十六进制数或RGB值表示。【例6-1】设置文本的字体样式，包括字体的类型、大小、粗细、风格、颜色等……（详见教材）【学生】聆听、记录、理解、观看效果6.1.2设置文本格式【教师】讲解设置文本格式多种属性的方法，并举例子说明CSS3不仅提供了设置字体样式的属性，还提供了很多设置文本格式的属性，包括首行缩进、水平对齐、文本修饰、省略标记、间距、行距、自动换行和空白符处理等。1．首行缩进在CSS3中，使用text-indent属性设置文本首行字符的缩进距离，具体格式为：……（详见教材）2．水平对齐在CSS3中，使用text-align属性设置文本的水平对齐方式，具体格式为：……（详见教材）3．文本修饰在CSS3中，使用text-decoration属性设置添加到文本的修饰，具体格式为：……（详见教材）【课堂拓展】HTML5中还可以使用<u>标签标记下画线效果，但不常使用。4．省略标记在CSS3中，使用text-overflow属性设置文本内容超出容器边界（文本溢出）时省略标记的样式，具体格式为：……（详见教材）5．间距间距包括字符间距和字间距，字符间距是指字母之间的空白，字间距是指单词之间的空白。在CSS3中，使用letter-spacing属性设置字符间距，使用word-spacing属性设置字间距，具体格式为：……（详见教材）【课堂拓展】对于设置了字间距的文本，浏览器会以文本中的空格为基准调节单词的间距。需要注意的是，使用连字符的单词会被视为一个单词，连续的汉字不被视为单词，只有汉字之间用空格隔开时，被分开的汉字才被视为单词。6．行高在CSS3中，使用line-height属性设置文本的行高，具体格式为：……（详见教材）【课堂拓展】行高的属性值小于100%时，将产生文本重叠效果，属性值为0时表示没有行高，即完全重叠。7．自动换行在CSS3中，使用word-break属性设置文本的自动换行方式，具体格式为：……（详见教材）8．空白符处理默认情况下，浏览器在遇到多个空格时会将它们压缩为一个空格，其他空白符也将自动忽略。当需要显示空白符时，可以使用white-space属性设置浏览器对空白符的识别方式，具体格式为：……（详见教材）【例6-2】设置文本格式，包括首行缩进、水平对齐、文本修饰、省略标记等……（详见教材）【课堂拓展】在CSS3中，使用overflow属性规定当内容溢出元素边框时的处理方式，具体格式为：overflow:visible|hidden|scroll|auto;……（详见教材）【学生】聆听、记录、理解、观看效果通过教师的讲解使学生了解CSS3设置字体样式和文本格式属性的方法实战拓展（15min）【教师】要求每队利用上课所学知识，把之前做好的文字部分进行格式美化，可自行分配任务和讨论，遇到疑问可咨询老师【学生】制作项目，讨论通过团队任务，拓展学生所学知识，培养学生创新能力和团协作能力课堂展示（5min）【教师】挑选几个学生上台展示上节课项目美化的效果，并说明使用了什么标签，设置了哪些属性【学生】观看效果、聆听、理解通过展示上节课的效果，活跃课堂氛围，调动学生学习积极性第二节课问题导入（5min）【教师】准备了两个网页，一个是没有美化的图像网页，一个是美化了的图像网页，让学生对比下效果，提出问题请同学们对比下，这图像进行了哪些美化？【学生】观看效果、讨论、回答通过网页效果对比，提出问题，引发学生对本节课学习的兴趣，引入新课内容传授新知（20min）6.2图像属性6.2.1设置网页图像【教师】讲解网页图像的设置，并演示例子辅助理解1.图像大小CSS3中，使用width和height属性设置图像的宽和高，属性值为数字（单位为px）。例如，使用标签选择器设置图像的大小，代码如下：img{width:200px;height:150px}【课堂拓展】若只设置图像的宽度或高度，浏览器会自动调整横纵比，以保证图像宽高比不变，避免图像变形。若同时设置图像的宽度和高度，就一定要注意图形的宽高比，否则图像可能会变形。2．边框样式网页中的图像元素默认是没有边框的，但CSS3提供的属性可以设置边框的样式，包括宽度、风格和颜色。边框宽度。……（详见教材）边框风格。……（详见教材）边框颜色。……（详见教材）此外，在CSS3中，使用border属性可以在一个声明中统一设置边框的宽度、风格和颜色，具体格式为：border:边框宽度边框风格边框颜色;……（详见教材）【课堂拓展】图像元素包括4个方向的边框，所以在设置边框的样式时既可以使用一条样式代码设置4个方向的边框，如“border-width:2px;”设置4个方向的边框宽度均为2px，……（详见教材）3．不透明度在CSS3中，使用opacity属性设置不透明度，具体格式为：……（详见教材）4．圆角样式在CSS3中，使用border-radius属性设置圆角样式，具体格式为：……（详见教材）【课堂拓展】为了分别设置4个顶角的圆角样式，border-radius属性和边框样式属性类似，派生了4个子属性，包括border-top-right-radius属性，用于设置右上角的圆角；border-bottom-right-radius属性，用于设置右下角的圆角；border-bottom-left-radius属性，用于设置左下角的圆角；border-top-left-radius属性，用于设置左上角的圆角。……（详见教材）5．阴影样式在CSS3中，使用box-shadow属性给框添加一个或多个阴影样式，具体格式为：……（详见教材）【例6-3】设置网页图像的样式，包括图像大小、边框样式、不透明度、圆角样式、阴影样式等……（详见教材）【课堂拓展】本节介绍的有关图像样式的属性可应用于HTML5中的大多数块级元素，如用于设置视频元素的大小、边框、圆角、阴影等样式。此外，若要将这些样式应用于行内元素，则需要使用display属性修改元素的类型，……（详见教材）【学生】观看效果、聆听、记录、理解6.2.2设置网页背景【教师】讲解网页背景的设置，并演示例子辅助理解1．背景颜色在CSS3中，使用background-color属性设置背景颜色，具体格式为：……（详见教材）2．背景图像在CSS3中，使用background-image属性设置背景图像，具体格式为：……（详见教材）3．背景图像的显示方式在CSS3中，使用background-repeat属性设置背景图像的显示方式，具体格式为：……（详见教材）4．背景图像的起始位置在CSS3中，可以使用background-position属性设置背景图像的起始位置，具体格式为：……（详见教材）5．背景图像的固定方式在CSS3中，使用background-attachment属性设置背景图像是否固定或随着页面的其余部分滚动，具体格式为：……（详见教材）【课堂拓展】在CSS3中，使用background属性可以在一个声明中设置所有的背景属性，具体格式为：……（详见教材）【例6-4】设置网页背景的样式，包括背景颜色、背景图像、显示方式等……（详见教材）【课堂拓展】为纪念北京奥运会成功举办，国务院批准从2009年起，将每年8月8日设置。为“全民健身日”。2014年10月，我国将全民健身上升为国家战略，并谋划和推动全民健身事业，……（详见教材）【学生】观看效果、聆听、记录、理解通过讲解，和演示例子，使学生掌握CSS3设置图像样式、网页背景样式的属性实战演练（15min）美化“金企鹅教育”主页“精品图书”模块【教师】要求学生美化“金企鹅教育”主页“精品图书”模块，遇到不会的问题可以扫描微课二维码观看视频”美化“金企鹅教育”主页“精品图书”模块“（详见教材）“在第3章的实战演练中已经介绍过如何使用文本和图像类标签制作“金企鹅教育”主页的“精品图书”模块，这里介绍如何美化该模块。步骤1在HBuilderX中导入本书配套素材“素材与案例\第4章\实战演练\4.2\JinqieProject”文件夹，然后打开“course.html”文档。步骤2设置“精品图书”模块容器的样式。在“index.css”文档中添加以下代码，使用选择器#main_book设置样式……（详见教材）步骤3设置“精品图书”标题的样式。在“index.css”文档中添加以下代码，使用选择器.book_title、.book_title>h3等设置样式，……（详见教材）步骤4设置图书展示的样式。……（详见教材）制作项目，观看微课【教师】安排每个队做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过制作“美化“金企鹅教育”主页“精品图书”模块，使学生巩固所学知识，锻炼动手操作能力课堂小结（3min）【教师】简要总结本节课的要点本节课主要介绍了CSS3的常用属性。通过本节课的学习，学生应重点掌握以下内容。（1）CSS3提供了多个设置字体样式的属性，包括font-family（字体类型）、font-size（字体大小）、font-weight（字体粗细）、font-style（字体风格）、color（字体颜色）等。（2）CSS3不仅提供了设置字体样式的属性，还提供了很多设置文本格式的属性，包括text-indent（首行缩进）、text-align（水平对齐）、text-decoration（文本修饰）、text-overflow（省略标记）、letter-spacing（字符间距）、word-spacing（字间距）、line-height（行高）、word-break（自动换行）、white-space（空白处理）等。（3）CSS3提供了设置网页图像样式的属性，包括width（宽度）、height（高度）、border-wid