Web前端开发HTML5 CSS3Div+CSS布局教案.doc

课程名称 WEB前端开发（1） 课次 23 任务、项目、课题名称 Div+css布局 课时 2学时 教学内容 单列布局 两列布局 三列布局 通栏布局 教学目标 学会网页的布局，理解常用的布局方式 教学重点 网页布局的实际应用 教学难点 网页布局的实际应用 教学活动及主要环节 复习提问： 如何设置网页元素的定位？ 导入新课： 传统网页是采用表格进行布局的，但这种方式已经逐渐淡出设计舞台，取而代之的是符合WEB标准的HTML5+CSS3布局方式。 新授：（案例演示） 一．网页布局 根据学院网站主页效果图，对主页的布局进行划分，如图所示。创建网页，对学院网站的主页进行布局。布局浏览效果如图所示。 图9-1 学院网站主页划分布局块 图9-2 布局页浏览效果 布局方式 1．单列布局 将页面上的块从上到下依次排列，即单列布局。 图9-18 单列布局页面浏览效果 2．两列布局 单列布局虽然统一、有序，但会让人觉得呆板，所以实际网页制作中，会采用两列布局。两列布局实际上是将中间内容分成左、右两部分。 图9-19 二列布局效果 3．三列布局 对于内容比较多的网站，有时需要采用三列布局。三列布局实际上是将中间内容分成左、中、右三部分。 图9-20 三列布局效果 4．通栏布局 现在很多流行的网站采用通栏布局，即网页中的一些模块，如头部、导航或页面底部等经常需要通栏显示。也就是说这些模块无论页面放大或缩写，模块的宽度始终保持与浏览器一样的宽度。学院网站的布局就采用了该种布局。 在下图中，导航栏和页面底部为通栏显示，它们与浏览器的宽度保持一致。通栏布局的关键在于在通栏模块的外面添加一层div，并且将该层div的宽度设置为100%。 图9-21 通栏布局效果 该布局页面在本章案例中实现。 前面所讲的布局是网页中的基本布局，实际上，在设计网站时需要综合运用这几种布局，实现各种各样的网页布局样式。 小结： 网页布局 布局方式