Html网页教学比赛_教学设计.docx
《Html网页教学比赛_教学设计.docx》由会员分享,可在线阅读,更多相关《Html网页教学比赛_教学设计.docx(4页珍藏版)》请在三一文库上搜索。
1、博学谷一一让IT教学更简单,让IT学习更有效HTML5+CSS3网站设计基础教程教学设计课程名称:HTML5+CSS3网站设计基础教程授课年级: 2016年级授课学期:2016学年第一学期教师姓名: 某某老师201年 月 日课题名称计划团队网页设计、中冲.4课时课时内容分析选择器是CSS3中一个重要的内容,使用它可以大幅度提高开发人员书写和修改 样式表的效率。头际上,在上一早中已经介绍过一些常用的选择器,这些选择 器基本上能够满足 Web设计师常规的设计需求。 本章将向读者介绍 CSS3中新增 的多种选择器。通过本章的学习,读者可以更轻松的控制网页兀素。教学目标掌握CSS3中新增加的属性选择器
2、,能够运用属性选择器为页面中的兀 素添加样式。理解关系选择器的用法,能够准确判断元素与元素间的关系。 掌握常用的结构化伪类选择器,能够为相冋名称的兀素定义不冋样式。 掌握伪兀素选择器的使用,能够在页面中插入所需要的文字或图片内 容。掌握CSS伪类,会使用 CSS伪类实现超链接特效。重点及措施教学重点:属性选择器、结构化伪类选择器、伪元素选择器、链接伪类。 措施:通过上机操作加强学习和补充案例进行巩固。难点及措施教学难点:结构化伪类选择器、伪元素选择器。 措施:通过上机操作加强学习和补充案例进行巩固。教学方式采用项目化教学方式,使用PPT分析设计过程。教 学 过 程J本课时内容学习分组讨论对新课
3、进行讲解前,先让学生 分组讨论以下问题:在CSS中,通过超链接标记a的伪类可以实现鼠标切换样式的效果, 其中 a的伪类分为很多种, 不冋的伪类代表的含义不冋, 那么,哪一种伪类表 示鼠标悬浮时,实现样式切换呢?请小组代表对以上问题发表见解。教师对上述问题进行解释:a:hover CSS样式规则;表示鼠标经过、悬停时超链接的状态。案例讲解? 案例描述本章主要介绍了 CSS3新增选择器及链接伪类的用法。为了使读者更好地掌握这些知识点,本节将通过案例的形式分步骤制作一款网页设计软件列表, 其默认效果如下图所示。网页设计软杵列表(点击誉看)Photoshop 软件 illulrator 软件 Drea
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Html 网页 教学 比赛 设计
链接地址:https://www.31doc.com/p-12427937.html