基于“对分课堂”的《网页设计与制作》课程教学改革实践研究

摘 要：本文以“对分课堂”的形式设计了一个对分教案，把传统课堂时间一分为二，前半节时间讨论的是上节课所学内容，解决课后作业遗留问题，巩固上节课所学，后半节时间教授新知识，学生通过完成课后任务来对课堂所学的内容进行内化吸收，充分发挥教师的主导作用和学生的主体作用，有效提高课堂教学效率，知识的内化吸收放在课下，有利于学生进行个性化学习。

关键词：对分课堂；教学设计

一、“对分课堂”概述

所谓“对分课堂”，它在形式上把课堂时间一分为二，一半留给教师讲授，一半留给学生进行讨论，实质上在讲授和讨论之间引入一个心理学的内化环节，让学生对讲授内容进行吸收之后，有备而来参与讨论，通过对讲授与讨论的有机整合，实现了“教法”与“学法”的对立统一。

二、基于“对分课堂”的教学设计

以网页设计与制作课程的“浮动与定位”内容为例，设计一个对分教案。

教学目标及基本要求：要求学生初学者能够熟练地运用浮动和定位进行网页布局，掌握清除浮动的几种常用方法，为后面学习网页布局打下良好的基础。

教学重点：清除浮动的几种方法、overflow属性、相对定位和绝对定位的应用。

教学难点：当浮动元素对周围其他元素产生影响时，如何选择恰当的方法清除浮动。

教学方式：对分课堂、教师讲授、多媒体演示

教学过程：

（一）复习讨论（20分钟）

上节课布置的课下任务是制作一个横向导航菜单（多媒体展示效果图）。

环节一：对上节课布置的作业，学生以小组为单位进行互相点评，查看各自的优缺点，并加以修改，并每组都要记录下小组成员在做作业过程中遇到的主要问题。

环节二：每组对做作业过程中遇到的问题进行发言，其他小组的成员可以给予答复。

环节三：对大家讨论的遗留问题，通过多媒体演示教学进一步讲解，解决学生在制作导航栏时遇到的没有解决的问题或者疑问。

环节四：对布置的作业进行总结，知识点归纳，让学生进一步巩固上节课所学。主要包括以下几点：

1.浮动属性的应用 Float：left/right/none

2.如何清除浮动对子元素的影响 Clear：left/right/both

3.如何清除浮動对父元素的影响Overflow：hidden；

4.分清楚哪些标记是块状元素，哪些是行内元素

常见块状元素：div、p、h1-h6、ul、li、ol、form

常见行内元素：a、span、img、input

5.行内元素与块状元素的转化Display：block/inline/i nline- block/none

6.列表如何去掉项目符号或者数字编号List-style：none；

（二）导入新课（5分钟）

1.借助多媒体展示，相关网站的导航菜单，有些是和上节课布置的作业一样的导航，水平一次导航，有些是应用的二级导航菜单，那如何在一级导航的基础上制作二级导航？

2.提出制作二级导航菜单需要解决的问题：

（1）如何添加二级菜单，用什么标记，在什么地方添加

（2）如何设置二级菜单隐藏

（3）如何设置鼠标经过一级导航时显示二级菜单

（4）如何设置二级导航菜单与一级导航的左侧对齐

（5）如何设置二级导航不被下方的元素遮挡

带着问题引入我们要讲授的新知识：元素的定位属性。

（三）讲授新课（20分钟）（主要通过相关案例来完成知识点的讲解）

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

定位模式

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position：属性值；}

在上面的语法中，position属性的常用值有四个，分别表示不同的定位模式，具体如下：

static：自动定位（默认定位方式）

relative：相对定位，相对于其原文档流的位置进行定位

absolute：绝对定位，相对于其上一个已经定位的父元素进行定位

fixed：固定定位，相对于浏览器窗口进行定位

边偏移

通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，对他们的具体解释如下：

top：顶端偏移量，定义元素相对于其父元素上边线的距离

bottom：底部偏移量，定义元素相对于其父元素下边线的距离

left：左侧偏移量，定义元素相对于其父元素左边线的距离

right：右侧偏移量，定义元素相对于其父元素右边线的距离

常见的几种定位模式

静态定位

静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

相对定位

相对定位是将元素相对于他在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是他在文档流中的位置仍然保留。

绝对定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。

固定定位

固定定位是绝对定位的一种特殊形式，他以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

z-index层叠等级属性

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠，在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

（四）布置课后任务（分发作业效果图）

在制作的一次导航菜单的基础上，制作二级导航菜单，并设置它不被下方的元素遮挡。

三、教学反思

对分课堂的核心是“隔堂讨论”，本节课讨论的是上节课学习的理论知识，学生在此过程中有一周的时间对知识进行内化吸收，而本节课新授的内容学生会在下次上课前的一周时间内通过完成课后任务进行内化吸收，在此过程中遇到的问题会在下节课的前20分钟讨论解决。这种授课方式，彻底突破了传统的教学模式，培养核心素养，让批判性思维、创造性思维、沟通与合作能力在日常教学的每一节课上得到贯彻落实。

四、结束语

师生没有交互，教学没有发生。对分课堂的“隔堂讨论”有效的提高了课堂教学效率，在课堂上，学生是课堂的主体，教师的主导作用得到充分发挥。它既强调教师不可或缺的指导作用，保证知识体系传递的效率，也充分发挥学生的主动性，让学生爱上读书，带来个性化学习，深度学习和创造性学习，让传统课堂发生实质性的变化，提高学习效率。

参考文献

[1]张学新.对分课堂：大学课堂教学改革的新探索[J].复旦教育论坛，2014，（5）.

[2]赵梦媛.“对分课堂”：基于动机与认知理论的探究[J].黑龙江教育（高教研究与评估），2018，（1）.

作者简介

李素贞（1981-），女，硕士，讲师，从事信息技术教育方面的研究工作。

（作者单位：潍坊科技学院）