网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例5新闻详情网页_第1页
网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例5新闻详情网页_第2页
网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例5新闻详情网页_第3页
网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例5新闻详情网页_第4页
网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例5新闻详情网页_第5页
全文预览已结束

下载本文档

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

文档简介

模块二使用CSS3美化网页本模块通过8个案例的实现，介绍CSS的基本使用方法、CSS常用选择器、CSS盒子模型、CSS背景属性、元素的浮动与定位、元素类型的转换等内容。知识目标：掌握将CSS引入网页的方式；掌握CSS常用文本属性；掌握CSS常用选择器;理解盒子模型的概念及相关属性；掌握背景相关属性；理解元素的浮动与定位属性；理解元素类型转换的原理。能力目标：能熟练使用盒子布局网页内容；能熟练使用CSS美化网页内容。素质目标：在编辑代码中培养认真细致、精益求精的工匠精神；在美化网页中培养欣赏美、感受美的能力。教案5案例5新闻详情网页计划学时2学时知识目标了解CSS的概念和作用；掌握在网页中引入CSS样式的3种方法；掌握CSS常用文本属性；熟练使用CSS美化网页文本内容。能力目标能理解并说出CSS的优势；会使用CSS美化网页文本内容。素质目标通过关于奥运精神的内容引导学生树立为国争光的爱国精神和艰苦奋斗的奉献精神；在编写代码中养成正确的代码编写规范。教学重点CSS特点、CSS样式引入；font-family、font-size、font-style、color等CSS常用文本属性。教学难点使用CSS美化网页中的文本内容。教学模式教学做一体化；线上+线下混合式教学。教学活动及主要环节素质培养第1学时（案例分析与实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述利用HTML5标记搭建页面结构，并使用CSS3设置内容样式，制作新闻详情网页，浏览效果如图5-1所示。图5-1第一个HTML5网页二、案例分析与实现1.案例分析图5-1所示的网页内容由4部分构成，分别为标题、副标题、段落文字和图像。标题使用<h2>标记定义，副标题使用<h4>标记定义，段落文字使用<p>标记，图像使用<img>标记定义。构建页面结构后，再使用CSS3内部样式表美化网页。2.案例实现学生同步操作，做学教一体略。第2学时（相关知识点）一、引入CSS样式学生已观看微课，略讲1．行内式行内式也称为内联样式，是指通过标记的style属性设置元素的样式。其基本语法格式如下。<标记style="属性:属性值;属性:属性值；……">内容</标记>例5-1example01.html学生同步操作，做学教一体2．内部样式表内部样式表也叫内嵌式，是指将所有CSS样式代码写在HTML文档的头部标记<head>中，并且用<style>标记定义。其语法格式如下。<head><styletype="text/css">选择器1{属性：属性值；属性：属性值；……}/*注释内容*/选择器2{属性：属性值；属性：属性值；……}……</style></head>3．外部样式表外部样式表是指将所有的CSS样式代码放入一个以.css为扩展名的外部样式表文件中，再通过<link>标记将外部样式表文件链接到HTML文件。其语法格式如下。……<head><linkhref="外部样式表文件路径"rel="stylesheet"type="text/css"></head>……例5-2example02.html学生同步操作，做学教一体二、CSS常用文本属性学生已观看微课，略讲1.font-family2.font-size3.font-weight4.font-style5.@font-face6.text-decoration7.color8.text-align9.text-indent10.line-height11.text-shadow12.text-overflow例5-3example03.html学生同步操作，做学教一体三=2\*ROMAN、小结重点掌握CSS的3中引入方式和常用的CSS文本属性，会综合利用CSS的文本属性设置网页中文本元素的样式。作业1：课本课后习题与实训作业2：扫码观看案例6中的微课，学习CSS常用选择器和CSS的高级特性课前小组讨论过程中，培养学生团队合作，共同探讨的协作意识，培养学生良

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

温馨提示

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

最新文档

评论

0/150

提交评论