《网页设计与制作案例教程（第2版） 》教案 第6课 HTML5与CSS3基础（二）_第1页
《网页设计与制作案例教程（第2版） 》教案 第6课 HTML5与CSS3基础（二）_第2页
《网页设计与制作案例教程（第2版） 》教案 第6课 HTML5与CSS3基础（二）_第3页
《网页设计与制作案例教程（第2版） 》教案 第6课 HTML5与CSS3基础（二）_第4页
《网页设计与制作案例教程（第2版） 》教案 第6课 HTML5与CSS3基础（二）_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第课HTML5与CSS3基础第课HTML5与CSS3基础（二）6（二）HTML5与CSS3基础（二）HTML5与CSS3基础第课6PAGE6PAGE6PAGE7PAGE76第6第课HTML5与CSS3基础（二） 课题HTML5与CSS3基础(二）课时2课时（90min）教学目标知识技能目标：（1）认识CSS3（2）了解CSS3的基本语法（3）熟悉CSS3的选择器（4）能够在HTML文档中引入CSS（5）认识CSS3的继承性与层叠性思政育人目标：（1）掌握网页制作语言的基础知识，学习语法规则，养成良好的工作习惯。（2）练习制作网页，培养自己的钻研精神。教学重难点教学重点：CSS3的选择器教学难点：在HTML文档中引入CSS教学方法情景模拟法、问答法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：传授新知（28min）课堂抢答（10min）第2节课：

任务实施（25min）

实践探索（15min）

课堂小结（3min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解CSS3【学生】按照教师要求完成课前任务通过课前的预热，让学生了解所学软件，激发学生的学习欲望考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入

（5min）【教师】提出以下问题：什么是CSS3，它的作用是什么？【学生】思考、举手发言通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知

（28min）【教师】通过学生的发言，引入新的知识点，介绍CSS3的基本语法，及如何在HTML文档中引入CSS一、CSS3简介【教师】展示CSS3设计器，帮助学习理解随着HTML功能的不断完善，结构代码和样式代码的混合使用让HTML文档的代码结构十分混乱，为网页的维护工作增加了难度。此时CSS应运而生，它将网页的结构层和表现层分离开来，大大简化了HTML代码。1994年，哈坤·利提出了CSS的最初设想，之后CSS技术经历了几次发展，最终W3C于2005年12月开始制定CSS3标准。到目前为止该标准还没有最终定稿，但主流浏览器已经开始支持其中的大部分特性。（详见教材）二、CSS3基本语法【课堂互动】【教师】提出以下问题：CSS3的基本语法格式是什么形式的？有哪些组成部分？【学生】思考、举手回答样式为：body{font-size:20px;color:lightblue;}CSS3样式是由选择器和声明组成。（详见教材）【教师】展示CSS3样式的基本格式，辅助学习理解CSS3样式的组成部分（1）选择器用于匹配HTML文档中的某个或某些元素。（2）声明可以有若干个，声明之间用分号隔开并放置在一对大括号（即样式分隔符）中，它们用于命令浏览器如何渲染指定对象。声明由属性和属性值两部分组成。（3）属性是用于设置样式的具体效果项，属性名一般由一个或多个单词组成，多个单词中间用连字符连接。（4）属性值是设置属性效果的参数，可以是数值或关键字。（详见教材）三、在HTML文档中引入CSSHTML与CSS是两种不同的语言，要让它们同时对一个网页产生作用，必须在HTML文档中引入CSS。在HTML文档中引入CSS的3种方式分别为行内样式、内嵌样式表与链接样式表。1.行内样式【教师】利用多媒体辅助讲解行内样式行内样式也称为内联样式，即直接为HTML标签设置style属性，具体格式为：<标签名style="属性1:属性值1;属性2:属性值2;……">内容</标签名>其中，style是标签的属性，它自身又包含了多个样式属性，这些属性与属性值的规范与CSS3相同。（详见教材）2．内嵌样式表与链接样式表【教师】利用多媒体辅助讲解内嵌样式表与链接样式表在网页内容较多时，大量使用行内样式会使页面代码显得非常杂乱，降低可读性。而使用内嵌样式表或链接样式表可以避免这类问题。在DreamweaverCC中添加内嵌样式表和链接样式表的方法为，单击“CSS设计器”面板中“源”窗格左侧的加号按钮，在展开的列表中可以看到3个选项。其中，“在页面中定义”选项表示设置内嵌样式表，“创建新的CSS文件”与“附加现有的CSS文件”选项表示设置链接样式表。（1）内嵌样式表。选择“在页面中定义”选项后，文档窗口即自动生成<style>标签，在其中输入样式代码即可。使用该方式添加的样式代码可作用于当前整个页面，无法作用于其他页面。（2）链接样式表。选择“创建新的CSS文件”选项后，将打开“创建新的CSS文件”对话框，在“文件/URL”文本框中输入“index”，然后单击“确定”按钮，系统将自动创建一个CSS样式文件，并在网页头部标签中自动生成链接代码。单击“index.css”按钮，打开样式文件，即可在其中输入样式代码，设置样式。（详见教材）【课堂互动】教师提出以下问题：<style>标签与<head>标签的层级关系如何？【学生】聆听、思考、举手回答【教师】对学生的回答进行总结浏览器是从上到下解析HTML文档的，所以为了便于浏览器提前识别并解析CSS文件，<style>标签一般放置在<head>标签中的<title>标签之后。四、CSS3选择器想要使用CSS3设置网页样式，首先需要设置正确的选择器，使其匹配到相应的目标元素。在CSS3中，可以设置不同功能的选择器。1．基本选择器【教师】利用多媒体辅助讲解基本选择器基本选择器包括标签选择器、类选择器和ID选择器。（1）标签选择器。HTML文档是由标签组成的，标签选择器就是直接引用标签名的选择器。例如，以下为设置<p>标签样式的标签选择器。p{font-size:20px;color:lightblue;}标签选择器是最常用的选择器，通常用它来统一设置某类元素的基本样式。（2）类选择器。类选择器以“.”为前缀，后面跟随一个自定义类名，如.p1{…}。类选择器可以使不同的元素拥有相同的样式，也可以使相同的元素拥有不同的样式。（3）ID选择器。ID选择器以“#”为前缀，后面跟随一个自定义的ID名，如#p2{…}。使用ID选择器需要为标签设置id属性，属性值就是ID选择器的名称，如<pid="p2">…</p>。(详见教材)【课堂互动】教师提出以下问题：在CSS3中，通配选择器的作用是什么？【学生】聆听、思考、举手回答【教师】对学生的回答进行总结CSS3中有一个特殊的选择器——通配选择器，用“*”表示，它能够匹配文档中的所有标签。2．组合选择器如果需要设置复杂的网页样式，只使用基本选择器是不够的，此时可以使用组合选择器来精确匹配页面元素。（1）包含选择器。包含选择器通过空格连接两个选择器，如divp{…}，前面选择器表示祖先元素，后面选择器表示其后代元素。（2）子选择器。子选择器通过“>”连接两个选择器，如div>p{…}，前面选择器表示父元素，后面选择器表示其子元素。（3）相邻选择器。（4）兄弟选择器。(详见教材)【教师】提出以下学习任务：以小组为单位，根据教材“组合选择器”部分的提示，总结每种选择器的连接方式，例子，形成表格，最后提交到文旌课堂APP【学生】思考、讨论、形成表格3．属性选择器【教师】提出以下问题：你知道属性选择器有哪些类型吗？【学生】思考、举手回答【教师】总结学生的回答，并讲解属性选择器属性选择器根据标签的属性来匹配元素，一般有以下7种类型。（1）E[attr]选择器。E[attr]选择器是最基本的属性选择器，用于匹配所有拥有attr属性的E元素，无论attr属性值是什么。（2）E[attr="value"]选择器。E[attr="value"]选择器用于匹配attr属性值为“value”的E元素，它缩小了匹配范围，能够更加精确地匹配需要的元素。（3）E[attr~="value"]选择器。E[attr~="value"]选择器用于匹配attr属性值列表中包含了“value”的E元素，不需要完全匹配。如果“value”是一个列表，需要用空格隔开。（4）E[attr^="value"]选择器。（5）E[attr$="value"]选择器。（6）E[attr*="value"]选择器。（7）E[attr|="value"]选择器。（详见教材）【课堂互动】教师提出以下问题：总结一下，E[attr*="value"]选择器与E[attr~="value"]选择器有哪些异同？【学生】聆听、思考、举手回答【教师】对学生的回答进行总结E[attr*="value"]选择器与E[attr~="value"]选择器不同，E[attr~="value"]选择器匹配的值需要包含在值列表中并用空格隔开，而E[attr*="value"]选择器没有这个限制，“value”字符串出现在属性值的任意位置都能够匹配成功。4．伪类选择器【教师】利用多媒体辅助讲解伪类选择器伪类用于定义元素的特殊状态，伪类选择器以英文冒号为前缀，后面跟随伪类或伪类对象，在冒号前可以使用其他选择器限制伪类应用的范围。普通的伪类选择器可以分为静态伪类选择器和动态伪类选择器，除此之外还有结构、否定、状态等其他种类的伪类选择器。（1）静态伪类选择器。静态伪类选择器只用于设置链接的样式，包括“:link”和“:visited”，它们分别表示链接被访问前的状态与链接被访问后的状态。（2）动态伪类选择器。动态伪类选择器可用于设置任意元素的样式，包括“:hover”“:active”和“:focus”等，它们分别表示鼠标指针移动至元素上时、鼠标指针单击元素区域但不松开时与元素获得焦点时的状态。（3）结构伪类选择器。结构伪类选择器可以根据文档的结构来匹配元素，主要包括以下几种。①:first-child。匹配父元素的第一个子元素。②:last-child。匹配父元素的最后一个子元素。（4）否定伪类选择器。否定伪类选择器是“:not()”，它能够过滤掉括号内匹配的元素。（5）状态伪类选择器。（详见教材）五、CSS3的继承性与层叠性【教师】利用多媒体辅助讲解CSS3的继承性与层叠性1．继承性继承性是指在HTML的结构中，后代元素会继承祖先元素的CSS3样式。能够被继承的属性包括字号、文本颜色等，不能被继承的属性包括边框、背景等。例如，设置body元素的字号为20像素后，那么在网页中除了单独设置过字号样式的元素外，其他元素都将继承该属性。2．层叠性层叠性是指可以对同一个对象应用多个样式。如果同一个对象拥有多个样式，那么这些样式会根据各自的权重来确定呈现的优先级，然后显示最终效果。（详见教材）【学生】聆听、思考、理解、记忆通过讲解，让学生了解HTML5的基本语法和文档结构课堂抢答（10min）【教师】提出CSS3选择器中的各选择器，让学生抢答各选择器的作用【学生】聆听、抢答、说出CSS3选择器的作用通过课堂抢答加深学生对所学知识的认识，活跃课堂气氛第二节课任务实施

（25min）【教师】演示使用DreamweaverCC美化“传承经典网”主页的“散文选篇”模块的操作，并对其进行分析（1）继续在任务一任务实施中创建的文档中操作，或用本书配套素材“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件，并打开“index.html”网页文档。（2）在“代码”视图中单击任务一添加的<h1>标签（也可以在拆分视图中单击其所在区域），打开“CSS设计器”面板，在“源”窗格选择“index.css”，在“@媒体”窗格选择“全局”，在“选择器”窗格选择“.essay”，然后单击“选择器”窗格名左侧的加号按钮，添加一个匹配到该标签的选择器。（3）按“Enter”键确定。单击“属性”窗格中的“布局”按钮，在“margin”属性下方的设置区中，将位于矩形上方的属性（上外边距）设置为“5px”；然后单击“文本”按钮，将color属性（文本颜色）设置为“#8A6C54”，将font-family属性（字体样式）设置为“宋体”，将font-size属性（字号）设置为“28px”，将text-align属性设置为“center”。（4）使用相同方法为<h2>标签设置样式。（5）使用相同方法为<p>标签设置样式。（6）设置该容器中最后一个<p>标签的样式。……（详见教材）【学生】观察、记录、理解，上机操作【教师】巡堂指导，及时解决学生的问题通过任务实施，让学生们主动参与学习，对使用DreamweaverCC在网页中添加元素相关操作留下印象，在实践过程中理解、巩固知识点实践探索

（15min）【教师】组织学生参照“任务实施”中的操作步骤，制作“图书交易网”主页的“网站介绍”模块【学生】聆听、理解、上机操作【教师】巡堂指导，及时解决学生的问题通过实践探索，使学生进一步巩固所学知识，了解更多关于网页元素及其样式的相关知识课堂小结

（3min）【教师】简要总结本节课的要点本节课了解了什么是CSS3和CSS3的基本语法，学习了如何在HTML文档中引入CSS，了解了CSS3的继承性与层叠性。希望大家在课下多加复习，熟练

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论