《HTML5 CSS3 网页设计与制作》教案-25 第8章 第 2节 应用CSS布局网站实例

课程教案-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布局知识完成凤凰古城经典介绍页面。教学反思采用启发式教学，通过多媒体课件现场演示更加