HTML5+CSS3网页设计实战 教案 1.1 HTML、CSS概念_第1页
HTML5+CSS3网页设计实战 教案 1.1 HTML、CSS概念_第2页
HTML5+CSS3网页设计实战 教案 1.1 HTML、CSS概念_第3页
HTML5+CSS3网页设计实战 教案 1.1 HTML、CSS概念_第4页
HTML5+CSS3网页设计实战 教案 1.1 HTML、CSS概念_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

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

文档简介

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。21.1HTML、CSS的概念该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：掌握HTML、CSS、容器等概念。理解HTML与CSS的关系。能力目标：具备使用记事本编写简单HTML页面的能力。素养目标：（1）“衣冠楚楚”强调在校生学生着装礼仪。（2）“搜索引擎收录强调的是HTML内容”，内在美大于外在美。（1）HTML、CSS、容器等概念。（2）HTML与CSS的关系。HTML、CSS、容器概念。‌通过上网或询问，让学生充分理解网页中的容器的概念及本质。记事本编写简单HTML页面。通过将复杂的标签挑选出常见的框架类标签进行讲述，有意识地让学生对代码缩进量有个初步的认识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习引入简述网页的概念，了解本课程的目标。互联网之所以让人着迷，源于各式各样的网站。构成网站的网页，则为核心内容，也是我们课程学习的对象。听讲讲授网页概念，演示一些网页专题网站。讲授法，让学生了解课程目标，知识的应用场景。知识讲授1.1HTML、CSS概念HTML5重点强调HTML标签尽可能成对标签出现，即“开始标签”和“结束标签”，开始/结束标签内部的代码块就是它的子孙元素。简单理解的话，H5强调的“对标签”可以形容成“龙头凤尾”。开始标签表现为<标签A>，结束标签对应的</标签A>，比如<body>和</body>，<div>和</div>，<ul>和</ul>。以免“乱点鸳鸯谱”，在茫茫代码海中找到配对标签，依赖于代码书写时的“缩进”。知识点：HTML搭配CSS记忆关键词：衣冠楚楚关键词解析：HTML标签搭建内容（人），CSS展示外观样式（着装）。对于搜索引擎收录网页的标准来说，它只关注内容；对于浏览者而言，更希望见到CSS将内容打扮出令人愉悦的视觉效果。听讲【教师演示】查看某一个网页的源代码或者网页中某一局部的代码。观察HTML结构和CSS代码。“成对出现的标签”。根据成语进行思政解说。演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。怎么理解HTML结构的容器概念？想象一双双鞋子以怎样一层层外包装的方式装入集装箱。CSS为什么称之为层叠样式表，怎么理解“层叠”这个字眼？层叠，一层一层叠加作用在对象上。比如“请想象出你家里养的斑点狗”。为什么我们不会想象成三花猫呢？回答问题提问任务实施【案例1】打开资源包根目录，在浏览器中运行“第1章-内容与样式分离的意义.html”，效果如图1-2所示，页面中包含了大量尺寸不一的图片。图1-2页面效果（1）页面的图片调整为统一的200px宽，150px高的尺寸。（2）采用内容与表现分离的思路修改代码，把添加的宽高属性都删除，同时在<head>标签内部添加<style>标签，敲入代码。（3）保存该文档，在浏览器中的运行效果。敲打代码教师扮演部门主管，要求员工（学生）把该页面的图片调整为统一的200px宽，150px高的尺寸。巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分使用记事本打开、编辑、保存文件无错误操作。20HTML代码的编写快速无误输入代码。30CSS代码的编写能以正确缩进形式输入正确代码。30图像文件位置能正确将图像放置在对应文件夹，图片路径正确。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）理解HTML与CSS的概念与关系。（2）通过“修改图片尺寸”案例深刻认识CSS对于网页后期维护所起的重要作

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

温馨提示

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

最新文档

评论

0/150

提交评论