基于“對分課堂”的《網(wǎng)頁設(shè)計(jì)與制作》課程教學(xué)改革實(shí)踐研究

摘 要：本文以“對分課堂”的形式設(shè)計(jì)了一個(gè)對分教案，把傳統(tǒng)課堂時(shí)間一分為二，前半節(jié)時(shí)間討論的是上節(jié)課所學(xué)內(nèi)容，解決課后作業(yè)遺留問題，鞏固上節(jié)課所學(xué)，后半節(jié)時(shí)間教授新知識，學(xué)生通過完成課后任務(wù)來對課堂所學(xué)的內(nèi)容進(jìn)行內(nèi)化吸收，充分發(fā)揮教師的主導(dǎo)作用和學(xué)生的主體作用，有效提高課堂教學(xué)效率，知識的內(nèi)化吸收放在課下，有利于學(xué)生進(jìn)行個(gè)性化學(xué)習(xí)。

關(guān)鍵詞：對分課堂；教學(xué)設(shè)計(jì)

一、“對分課堂”概述

所謂“對分課堂”，它在形式上把課堂時(shí)間一分為二，一半留給教師講授，一半留給學(xué)生進(jìn)行討論，實(shí)質(zhì)上在講授和討論之間引入一個(gè)心理學(xué)的內(nèi)化環(huán)節(jié)，讓學(xué)生對講授內(nèi)容進(jìn)行吸收之后，有備而來參與討論，通過對講授與討論的有機(jī)整合，實(shí)現(xiàn)了“教法”與“學(xué)法”的對立統(tǒng)一。

二、基于“對分課堂”的教學(xué)設(shè)計(jì)

以網(wǎng)頁設(shè)計(jì)與制作課程的“浮動與定位”內(nèi)容為例，設(shè)計(jì)一個(gè)對分教案。

教學(xué)目標(biāo)及基本要求：要求學(xué)生初學(xué)者能夠熟練地運(yùn)用浮動和定位進(jìn)行網(wǎng)頁布局，掌握清除浮動的幾種常用方法，為后面學(xué)習(xí)網(wǎng)頁布局打下良好的基礎(chǔ)。

教學(xué)重點(diǎn)：清除浮動的幾種方法、overflow屬性、相對定位和絕對定位的應(yīng)用。

教學(xué)難點(diǎn)：當(dāng)浮動元素對周圍其他元素產(chǎn)生影響時(shí)，如何選擇恰當(dāng)?shù)姆椒ㄇ宄印?/p>

教學(xué)方式：對分課堂、教師講授、多媒體演示

教學(xué)過程：

（一）復(fù)習(xí)討論（20分鐘）

上節(jié)課布置的課下任務(wù)是制作一個(gè)橫向?qū)Ш讲藛危ǘ嗝襟w展示效果圖）。

環(huán)節(jié)一：對上節(jié)課布置的作業(yè)，學(xué)生以小組為單位進(jìn)行互相點(diǎn)評，查看各自的優(yōu)缺點(diǎn)，并加以修改，并每組都要記錄下小組成員在做作業(yè)過程中遇到的主要問題。

環(huán)節(jié)二：每組對做作業(yè)過程中遇到的問題進(jìn)行發(fā)言，其他小組的成員可以給予答復(fù)。

環(huán)節(jié)三：對大家討論的遺留問題，通過多媒體演示教學(xué)進(jìn)一步講解，解決學(xué)生在制作導(dǎo)航欄時(shí)遇到的沒有解決的問題或者疑問。

環(huán)節(jié)四：對布置的作業(yè)進(jìn)行總結(jié)，知識點(diǎn)歸納，讓學(xué)生進(jìn)一步鞏固上節(jié)課所學(xué)。主要包括以下幾點(diǎn)：

1.浮動屬性的應(yīng)用 Float：left/right/none

2.如何清除浮動對子元素的影響 Clear：left/right/both

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

4.分清楚哪些標(biāo)記是塊狀元素，哪些是行內(nèi)元素

常見塊狀元素：div、p、h1-h6、ul、li、ol、form

常見行內(nèi)元素：a、span、img、input

5.行內(nèi)元素與塊狀元素的轉(zhuǎn)化Display：block/inline/i nline- block/none

6.列表如何去掉項(xiàng)目符號或者數(shù)字編號List-style：none；

（二）導(dǎo)入新課（5分鐘）

1.借助多媒體展示，相關(guān)網(wǎng)站的導(dǎo)航菜單，有些是和上節(jié)課布置的作業(yè)一樣的導(dǎo)航，水平一次導(dǎo)航，有些是應(yīng)用的二級導(dǎo)航菜單，那如何在一級導(dǎo)航的基礎(chǔ)上制作二級導(dǎo)航？

2.提出制作二級導(dǎo)航菜單需要解決的問題：

（1）如何添加二級菜單，用什么標(biāo)記，在什么地方添加

（2）如何設(shè)置二級菜單隱藏

（3）如何設(shè)置鼠標(biāo)經(jīng)過一級導(dǎo)航時(shí)顯示二級菜單

（4）如何設(shè)置二級導(dǎo)航菜單與一級導(dǎo)航的左側(cè)對齊

（5）如何設(shè)置二級導(dǎo)航不被下方的元素遮擋

帶著問題引入我們要講授的新知識：元素的定位屬性。

（三）講授新課（20分鐘）（主要通過相關(guān)案例來完成知識點(diǎn)的講解）

元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。

定位模式

在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：

選擇器{position：屬性值；}

在上面的語法中，position屬性的常用值有四個(gè)，分別表示不同的定位模式，具體如下：

static：自動定位（默認(rèn)定位方式）

relative：相對定位，相對于其原文檔流的位置進(jìn)行定位

absolute：絕對定位，相對于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位

fixed：固定定位，相對于瀏覽器窗口進(jìn)行定位

邊偏移

通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，對他們的具體解釋如下：

top：頂端偏移量，定義元素相對于其父元素上邊線的距離

bottom：底部偏移量，定義元素相對于其父元素下邊線的距離

left：左側(cè)偏移量，定義元素相對于其父元素左邊線的距離

right：右側(cè)偏移量，定義元素相對于其父元素右邊線的距離

常見的幾種定位模式

靜態(tài)定位

靜態(tài)定位是元素的默認(rèn)定位方式，當(dāng)position屬性的取值為static時(shí)，可以將元素定位于靜態(tài)位置。所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。

相對定位

相對定位是將元素相對于他在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時(shí)，可以將元素定位于相對位置。對元素設(shè)置相對定位后，可以通過邊偏移屬性改變元素的位置，但是他在文檔流中的位置仍然保留。

絕對定位

絕對定位是將元素依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素進(jìn)行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。

固定定位

固定定位是絕對定位的一種特殊形式，他以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位。

z-index層疊等級屬性

當(dāng)對多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會發(fā)生重疊，在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對定位元素應(yīng)用z-index層疊等級屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。

（四）布置課后任務(wù)（分發(fā)作業(yè)效果圖）

在制作的一次導(dǎo)航菜單的基礎(chǔ)上，制作二級導(dǎo)航菜單，并設(shè)置它不被下方的元素遮擋。

三、教學(xué)反思

對分課堂的核心是“隔堂討論”，本節(jié)課討論的是上節(jié)課學(xué)習(xí)的理論知識，學(xué)生在此過程中有一周的時(shí)間對知識進(jìn)行內(nèi)化吸收，而本節(jié)課新授的內(nèi)容學(xué)生會在下次上課前的一周時(shí)間內(nèi)通過完成課后任務(wù)進(jìn)行內(nèi)化吸收，在此過程中遇到的問題會在下節(jié)課的前20分鐘討論解決。這種授課方式，徹底突破了傳統(tǒng)的教學(xué)模式，培養(yǎng)核心素養(yǎng)，讓批判性思維、創(chuàng)造性思維、溝通與合作能力在日常教學(xué)的每一節(jié)課上得到貫徹落實(shí)。

四、結(jié)束語

師生沒有交互，教學(xué)沒有發(fā)生。對分課堂的“隔堂討論”有效的提高了課堂教學(xué)效率，在課堂上，學(xué)生是課堂的主體，教師的主導(dǎo)作用得到充分發(fā)揮。它既強(qiáng)調(diào)教師不可或缺的指導(dǎo)作用，保證知識體系傳遞的效率，也充分發(fā)揮學(xué)生的主動性，讓學(xué)生愛上讀書，帶來個(gè)性化學(xué)習(xí)，深度學(xué)習(xí)和創(chuàng)造性學(xué)習(xí)，讓傳統(tǒng)課堂發(fā)生實(shí)質(zhì)性的變化，提高學(xué)習(xí)效率。

參考文獻(xiàn)

[1]張學(xué)新.對分課堂：大學(xué)課堂教學(xué)改革的新探索[J].復(fù)旦教育論壇，2014，（5）.

[2]趙夢媛.“對分課堂”：基于動機(jī)與認(rèn)知理論的探究[J].黑龍江教育（高教研究與評估），2018，（1）.

作者簡介

李素貞（1981-），女，碩士，講師，從事信息技術(shù)教育方面的研究工作。

（作者單位：濰坊科技學(xué)院）