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

下载本文档

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

文档简介

课程教案-23课题名称第8章应用CSS3布局网页第1节应用CSS布局网页授课班级软件技术等大一上学期授课班级授课学时2授课地点多媒体教室授课形式讲授、演示参考教材《前端HTML+CSS修炼之道》教学资源电子课件、教案、文字材料教学目标知识目标：了解CSS布局网页的相关知识；了解应用CSS进行布局的几种模式；了解如何使用HbuilderX进行CSS网页布局。技能目标：掌握一列固定宽度及高度、一列自适应宽度、一列固定宽度居中等CSS布局模式。素质目标：培养学生认真、一丝不苟的学习态度教学重点与难点教学重点掌握用CSS进行网页布局的几种方法教学难点了解一列固定宽度高度、一列自适应宽度和一列自适应宽度居中的效果区别，了解这几种CSS应用模式的适用情形。学情分析本次所讲内容选自教材第8章第1节。本次课程是学习CSS网站布局应用，学生必须熟练掌握CSS的相关知识和语句，才能接着学习CSS在布局中的应用。教学过程课前：预习+课程导入CSS的布局是一种很新的布局理念，完全有别于传统的布局习惯。它首先将页面在整体上进行<div>标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。通过CSS布局的页⾯，更新十分容易，甚⾄是页⾯的拓扑结构，都可以通过修改CSS属性来重新定位。本节主要介绍CSS布局的⼀些基本技巧。课中：1、关于CSS在布局中的几种应用模式。2、讲解第一个基础模式：一列固定宽度和高度<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>一列固定宽度</title> <styletype="text/css"> #layout{ border:2pxsolid#A9C9E2; background-color:#E8F5FE; height:300px; width:400px; } </style> </head> <body> <divid="layout"><imgsrc="img/1.png"></div> </body></html>讲解该CSS布局模式的结构及网页中各种标签的含义。讲解第二个CSS应用模式：一列自适应宽度<htmlxmlns="/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>一列自适应宽度</title> <styletype="text/css"> #layout{ border:2pxsolid#A9C9E2; background-color:#E8F5FE; width:300px; width:80%; } </style> </head> <body> <divid="layout"><imgsrc="img/1.png"></div> </body></html>讲解第三个CSS应用模式：一列自适应宽度居中<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>一列固定宽度</title> <styletype="text/css"> #layout{ border:2pxsolid#A9C9E2; background-color:#E8F5FE; height:300px; width:400px; } </style> </head> <body> <divid="layout"><imgsrc="img/1.png"></div> </body></html>课后：启动Hbuilder，在软件中练习课堂所讲的三种CSS模式的代码实现。教学反思采用启发式教学，通过

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

温馨提示

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

最新文档

评论

0/150

提交评论