HTML5+CSS3网页设计实战 教案 4.3 常见的选择器类型-标签和id选择器_第1页
HTML5+CSS3网页设计实战 教案 4.3 常见的选择器类型-标签和id选择器_第2页
HTML5+CSS3网页设计实战 教案 4.3 常见的选择器类型-标签和id选择器_第3页
HTML5+CSS3网页设计实战 教案 4.3 常见的选择器类型-标签和id选择器_第4页
HTML5+CSS3网页设计实战 教案 4.3 常见的选择器类型-标签和id选择器_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

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

文档简介

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.3常见的选择器类型该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 标签选择器的写法及使用场景。（2） Id选择器的写法与应用。能力目标：（1） 具备使用h1标签完成logo区域的能力。（2） 具备使用id选择器设计中华网框架容器的能力。素养目标：（1） 了解本章成语的出处，理解成语含义与知识点理解的结合。（2） 了解中华网案例，引导学生关注能源消耗、资源利用等社问题，培养其环保意识和社会责任感。标签选择器与id选择器标签选择器的写法，id选择器的写法。通过成语解析概念，然后借助案例强化选择器的写法。在不同场景中选择恰当的选择器。通过案例讲解，让学生在不同场景中体会选择器的用法。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习元素类型主要分哪三种？分别有什么特点？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入样式表，实际上就是针对某些元素，设置不同的属性值。这项工作的执行，关键在于如何去针对某些元素，也就是我们要想办法选择对应元素，这就是最近需要讲的选择器。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.3.1标签选择器标签选择器以"标签名"来定义，用法示例：h1{color:red;}ul{list-style-type:none;}知识点：标签选择器的意义记忆关键词：同气连枝关键词解析： “同气”指的是具有相同标签的元素，它们因为相同的属性（即标签名）而被归类在一起；“连枝”则形象地表达了这些元素通过标签选择器被连接在一起，共同接受对应样式的影响。☆思政讲解：（1）每个人都希望别人给自己打上一个“正直”、“善良”、“诚信”的标签，而不是希望别人冠以“渣男”的标签。（2）共同维护班集体的利益，做到同气连枝。因为当别人一说起某某班，意味着所有班上的同学的“标签”。4.3.2ID选择器id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义，用法示例：#box-red{color:red;}#bg{color:green;}知识点：id选择器的应用场景记忆关键词：寡二少双、独一无二关键词解析：每个标签都可以设置唯一一个id，id就相当于人/标签的身份证，因此在同一页面内id选择器绝不能重复。☆思政解说：（1）身份证怎么体现全国人民的唯一身份？解读身份证代码：‌地址码：前6位数字，表示编码对象常住户口所在县（市、区）的行政区划代码。出生日期码：接下来的8位数字，表示编码对象的出生年月日。顺序码：第15至17位数字，表示在同一地址码所标识的区域范围内，对同年同月同日出生的人员编定的顺序号。奇数分配给男性，偶数分配给女性。校验码：最后一位数字，根据前17位数字码，按照ISO7064:1983.MOD11-2校验码计算结果。如果最后一位计算结果为10，则用罗马数字X表示。【案例1】基于sec优化排名，logo处采用h1标签，标志图片作为背景图像。logo标志是整个网站最重要的元素之一，如何能让该页面尽可能被搜索引擎收录，识别出正确的站点信息。我们要思考几个因素：在浏览网页时，图片有几率刷不出来，尤其是大图。图片如果刷不出来的时候，怎么体现出这个位置放置了什么内容？搜索引擎喜欢“标题”语义，也就是喜欢收录能概括整个页面结构的元素。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例1】基于sec优化排名，logo处采用h1标签，标志图片作为背景图像。（1）写html结构，我们采用h1标题赋予给logo标志，希望能收录下网站名及网址。同时在文件头<head>标签内的<title>标题上写上对应网站名、网址、宣传语，代码如图4-1所示。（2）书写对应的CSS代码，如图4-2所示。【案例2】中华网框架布局（1）拟定给如图4-3所示的页头部分划分区域，原则上一行视为一个大容器。（2）书写对应的html结构。（3）书写对应的css样式代码。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10练习1Html中容器结构合理，选择器命名规范。20Css样式正确，预览效果一致20练习1Html中容器结构合理，选择器命名规范。25Css样式正确，预览效果一致25总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们掌握：（1）标签选择器的写法及使用场景。（2）Id选择器的写法与应用。（3）使用h1标签完成logo区域。（4）使用id选择器设计中华网

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论