基于“對分課堂”的《網頁設計與制作》課程教學改革實踐研究

摘 要：本文以“對分課堂”的形式設計了一個對分教案，把傳統課堂時間一分為二，前半節時間討論的是上節課所學內容，解決課后作業遺留問題，鞏固上節課所學，后半節時間教授新知識，學生通過完成課后任務來對課堂所學的內容進行內化吸收，充分發揮教師的主導作用和學生的主體作用，有效提高課堂教學效率，知識的內化吸收放在課下，有利于學生進行個性化學習。

關鍵詞：對分課堂；教學設計

一、“對分課堂”概述

所謂“對分課堂”，它在形式上把課堂時間一分為二，一半留給教師講授，一半留給學生進行討論，實質上在講授和討論之間引入一個心理學的內化環節，讓學生對講授內容進行吸收之后，有備而來參與討論，通過對講授與討論的有機整合，實現了“教法”與“學法”的對立統一。

二、基于“對分課堂”的教學設計

以網頁設計與制作課程的“浮動與定位”內容為例，設計一個對分教案。

教學目標及基本要求：要求學生初學者能夠熟練地運用浮動和定位進行網頁布局，掌握清除浮動的幾種常用方法，為后面學習網頁布局打下良好的基礎。

教學重點：清除浮動的幾種方法、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-），女，碩士，講師，從事信息技術教育方面的研究工作。

（作者單位：濰坊科技學院）