《HTML5 CSS3 网页设计与制作》教案-25 第8章 第 2节 应用CSS布局网站实例_第1页
《HTML5 CSS3 网页设计与制作》教案-25 第8章 第 2节 应用CSS布局网站实例_第2页
《HTML5 CSS3 网页设计与制作》教案-25 第8章 第 2节 应用CSS布局网站实例_第3页
全文预览已结束

下载本文档

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

文档简介

课程教案-25课题名称第8章应用CSS3布局网页第2节应用CSS布局网站实例授课班级软件技术等大一上学期授课班级授课学时2授课地点多媒体教室授课形式讲授、演示参考教材《前端HTML+CSS修炼之道》教学资源电子课件、教案、文字材料教学目标知识目标：了解CSS布局网页的相关知识；了解应用CSS进行布局的几种模式；了解如何使用HbuilderX进行CSS网页布局。技能目标：掌握几种CSS布局模式在网站中的实例应用和实现过程。素质目标：培养学生认真、一丝不苟的学习态度教学重点与难点教学重点CSS布局在网站中的实际应用教学难点不同CSS布局模式的效果区别，以及适用情形，能根据不同显示需求选择最优布局学情分析本次所讲内容选自教材第8章第2节。本次课程是学习CSS网站布局应用，学生必须熟练掌握CSS的相关知识和语句，才能接着学习CSS在布局中的应用。教学过程课前：预习+课程导入通过前面内容的学习，掌握了CSS布局网站，本节通过CSS知识完成一个案例制作，加深CSS布局网站的实际应用。课中：讲解实现CSS布局的具体步骤，如下：将内容做成一个个盒子，同时上成不同的色块<html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> *{ margin:0; padding:0; } #meau{ height:98px; background-color:#FFE4C4; } #box{ width:900px; margin:0auto; } #shang{ width:980px; height:300px; background-color:aqua; } #zeng1{ width:680px; height:350px; background-color:blueviolet; float:left; } #zeng2{ width:300px; height:350px; background-color:coral; margin-left:680px; } #xai{ width:980px; height:30px; background-color:#FFE4C4; } </style> </head> <body> <divid="meau"> </div> <divid="box"> <divid="shang"> </div> <divid="zeng"> <divid="zeng1"> </div> <divid="zeng2"> </div> </div> <divid="xai"> </div> </div> </body></html>在不同的色块中填入内容，调整格式布局根据每个div需要的内容，完成html内容和css内容2、总结章节知识：一列固定宽度及高度主要使用width和height；一列自适应宽度主要使用%的形式来设置；一列固定宽度使用align来设置居中。课后：启动Hbuilder，新建“凤凰古城”项目，利用CSS布局知识完成凤凰古城经典介绍页面。教学反思采用启发式教学，通过多媒体课件现场演示更加

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

温馨提示

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

最新文档

评论

0/150

提交评论