慕課在網(wǎng)頁設(shè)計(jì)課程教學(xué)中的應(yīng)用
——CSS定位教學(xué)案例

2016-08-15 05:52:12徐玉輝張振文

湖北第二師范學(xué)院學(xué)報(bào) 2016年7期

關(guān)鍵詞：慕課案例

唐　瓊，徐玉輝，張振文

(衡陽師范學(xué)院經(jīng)濟(jì)與管理學(xué)院，湖南衡陽 421002)

慕課在網(wǎng)頁設(shè)計(jì)課程教學(xué)中的應(yīng)用
——CSS定位教學(xué)案例

唐瓊，徐玉輝，張振文

(衡陽師范學(xué)院經(jīng)濟(jì)與管理學(xué)院，湖南衡陽 421002)

摘要：慕課是最近幾年來教育領(lǐng)域出現(xiàn)的一種新的教學(xué)模式，該模式顛覆了傳統(tǒng)的以老師“講”為主的教學(xué)模式，并把課堂延伸到課外。本文以電子商務(wù)專業(yè)中網(wǎng)頁設(shè)計(jì)課程為例，選取了教學(xué)過程中較難的一個(gè)教學(xué)項(xiàng)目——CSS定位，來探討如何借助慕課提高本課程教學(xué)水平，從而提高學(xué)生的實(shí)踐動(dòng)手能力。

關(guān)鍵詞：慕課；網(wǎng)頁設(shè)計(jì)課程；案例

慕課是最近幾年來教育領(lǐng)域出現(xiàn)的一種新的教學(xué)模式，該模式顛覆了傳統(tǒng)的以老師“講”為主的教學(xué)模式，并把課堂延伸到課外[1-2]。該模式下教學(xué)首先是老師制作好相關(guān)的課程教學(xué)視頻，并在上課之前讓學(xué)生事先在課堂外學(xué)習(xí)視頻中的內(nèi)容，然后在課堂上以學(xué)生為主，讓學(xué)生主動(dòng)去分析討論視頻中教學(xué)內(nèi)容的觀點(diǎn)，討論他們對(duì)相關(guān)內(nèi)容存在的疑惑，老師的角色僅僅只是回答學(xué)生的問題。因此該教學(xué)模式可以很好地調(diào)動(dòng)學(xué)生的學(xué)習(xí)積極性，同時(shí)也能加強(qiáng)學(xué)生對(duì)學(xué)習(xí)知識(shí)的主動(dòng)性。對(duì)于課堂而言，可以充分利用課堂時(shí)間，學(xué)生是有備而來上課的，因此課堂時(shí)間的利用率也得到提高，學(xué)生學(xué)習(xí)效果自然得到改善。但并非所有課程都適合使用這種方式，本文的目的在于探討慕課在網(wǎng)頁設(shè)計(jì)課程中的應(yīng)用情況。網(wǎng)頁設(shè)計(jì)課程作為電子商務(wù)專業(yè)的必修課程，如何激發(fā)學(xué)生的學(xué)習(xí)欲望，帶動(dòng)學(xué)生的學(xué)習(xí)興趣，促進(jìn)學(xué)生的實(shí)踐動(dòng)手能力，是該課程教學(xué)的難點(diǎn)[3]。因此該如何利用好慕課形式更好地講授這門課程，如何選擇相關(guān)的教學(xué)內(nèi)容來制作視頻等都是實(shí)踐教學(xué)值得探討的問題。網(wǎng)頁設(shè)計(jì)這門課的實(shí)踐性很強(qiáng)，但目前這門課學(xué)生只有12課時(shí)(總課時(shí)51課時(shí))的上機(jī)實(shí)踐課，因此要想學(xué)好這門課，學(xué)生課后是必須要花大量時(shí)間去實(shí)踐操作，否則僅僅12課時(shí)是無法保證該課程的質(zhì)量，因此如何引導(dǎo)學(xué)生自覺利用課外時(shí)間學(xué)習(xí)實(shí)踐是網(wǎng)頁設(shè)計(jì)課程目前教學(xué)改革的核心問題。本文以網(wǎng)頁設(shè)計(jì)課程中CSS中定位方式綜合案例來闡述如何使用慕課方式提高學(xué)生課后學(xué)習(xí)實(shí)踐的積極性，促進(jìn)這門實(shí)踐性強(qiáng)的課程教學(xué)。

一、CSS定位案例教學(xué)任務(wù)、目標(biāo)、教學(xué)重難點(diǎn)

(一)CSS定位案例教學(xué)任務(wù)

案例教學(xué)可以很好地激發(fā)學(xué)生的好奇心，培養(yǎng)學(xué)生的動(dòng)手能力[4]，在結(jié)合學(xué)習(xí)CSS定位方式理論知識(shí)上，選取學(xué)生每天都會(huì)關(guān)注的衡陽師范學(xué)院門戶網(wǎng)站提示窗口菜單這個(gè)實(shí)際案例作為本次教學(xué)任務(wù)，介紹如何通過慕課方式改善教學(xué)方式，案例效果如圖所示。當(dāng)鼠標(biāo)放在快速連接上時(shí)，會(huì)彈出一個(gè)提示窗口，也就是它的二級(jí)菜單。

提示窗口菜單效果示意圖

(二)CSS定位案例教學(xué)目標(biāo)

1.理解什么是定位屬性下的定位和浮動(dòng)屬性下的定位；

2.掌握運(yùn)用CSS進(jìn)行樣式設(shè)置的方法，比如類選擇器、ID選擇器、偽類選擇器、標(biāo)簽選擇器、復(fù)合選擇器，以及各種選擇器使用的場合。

(三)CSS定位案例教學(xué)重點(diǎn)

CSS樣式表設(shè)置方法和盒子的定位方式。

(四)CSS定位案例教學(xué)難點(diǎn)

盒子的三種定位方式，標(biāo)準(zhǔn)流下定位方式，定位屬性下的定位方式，浮動(dòng)屬性下定位方式，以及各種方式的特點(diǎn)。

二、慕課在CSS定位案例教學(xué)中的應(yīng)用

(一)教學(xué)形式創(chuàng)新

錄制10分鐘左右視頻，該視頻介紹實(shí)現(xiàn)該案例效果的基本方法：實(shí)現(xiàn)小提示窗口(利用a元素和display屬性)和下拉菜單效果(利用列表li元素)，同時(shí)布置實(shí)現(xiàn)衡陽師范學(xué)院門戶網(wǎng)站提示窗口菜單效果的教學(xué)任務(wù)(該教學(xué)任務(wù)的完成是在實(shí)現(xiàn)視頻教學(xué)中兩個(gè)基本效果的基礎(chǔ)上)，如果視頻教學(xué)中的效果學(xué)生沒法理解或沒學(xué)好，那么本次教學(xué)任務(wù)是無法完成的。

學(xué)生課前不斷學(xué)習(xí)和操作視頻中的教學(xué)內(nèi)容，記錄所有在操作過程中出現(xiàn)的問題和碰到的難點(diǎn)，同時(shí)開始主動(dòng)思考和實(shí)踐，該方式可以很好地培養(yǎng)學(xué)生對(duì)課堂內(nèi)容的自主學(xué)習(xí)能力和動(dòng)手能力，并讓學(xué)生在下一次課堂中進(jìn)行討論分析實(shí)踐視頻中效果出現(xiàn)的問題，最后對(duì)本次課的內(nèi)容進(jìn)行分析歸納，讓學(xué)生下課后去實(shí)現(xiàn)完成。

該教學(xué)模式下學(xué)生都是帶著問題去學(xué)習(xí)，因此學(xué)習(xí)效果相對(duì)比較好。而所有的這些問題也都是來源于學(xué)生課下的實(shí)踐，因此充分利用了課堂及課后的時(shí)間。

教學(xué)時(shí)間分配：視頻播放10分鐘，學(xué)生討論實(shí)現(xiàn)小提示窗口和下拉菜單效果的問題10分鐘，最后討論分析實(shí)現(xiàn)效果10分鐘，最后進(jìn)行總結(jié)推導(dǎo)實(shí)現(xiàn)效果的步驟15分鐘。

(二)CSS定位案例教學(xué)內(nèi)容

首先通過播放課前制作的實(shí)現(xiàn)小提示窗口和下拉菜單效果的視頻，讓學(xué)生討論在課后實(shí)現(xiàn)這些效果時(shí)出現(xiàn)的問題；最后分析衡陽師范學(xué)院門戶網(wǎng)站提示窗口菜單效果的一些特征，并與學(xué)生分析討論實(shí)現(xiàn)其效果的主要步驟，并進(jìn)行講解。

(三)CSS定位案例教學(xué)過程

1.播放已制作好的視頻，并讓學(xué)生記錄其中的問題。

2.分析討論實(shí)現(xiàn)小提示窗口和下拉菜單效果的問題，并進(jìn)行解答。

3.分析討論上圖效果實(shí)現(xiàn)的步驟。

(1)使用HTML語言來定義內(nèi)容和結(jié)構(gòu)。此處用列表元素(無序列表)，對(duì)所有的超鏈接進(jìn)行排序，組織文字內(nèi)容，分析該如何利用列表元素進(jìn)行排版，列表元素的嵌套關(guān)系如何，并提問分析為何選擇用列表元素排版，優(yōu)勢在哪里？引導(dǎo)學(xué)生思考理解，深刻掌握該元素。

從圖中分析，該處鏈接分為一級(jí)和二級(jí)兩個(gè)層次，利用無序列表

同時(shí)引導(dǎo)學(xué)生分析列表元素排版的效果產(chǎn)生原因：列表元素是塊級(jí)元素，所以在標(biāo)準(zhǔn)流下的排版方式就是成行顯示(豎向排版)。

(2)對(duì)列表中元素進(jìn)行重新定位，改變其在標(biāo)準(zhǔn)流下的定位方式。改變標(biāo)準(zhǔn)流下的排版方式，這里用float屬性，重點(diǎn)分析此處選擇浮動(dòng)屬性定位的原因。

同時(shí)把列表元素自帶的符號(hào)去掉，設(shè)置屬性list-style-type的值為none，對(duì)字體font以及顯示的寬度width進(jìn)行約束，對(duì)專題網(wǎng)站標(biāo)題下邊框border設(shè)置，對(duì)整體的鏈接框?qū)挾葁idth和高度height進(jìn)行設(shè)置，對(duì)值進(jìn)行調(diào)試，合適為止。另一方面對(duì)選擇器的使用做分析，讓學(xué)生理解標(biāo)記、類、ID選擇器使用的場景。

(3)完善顯示面板效果。此處要求學(xué)生學(xué)會(huì)分析其中的一些樣式，尤其是盒子模型中填充padding、邊界margin、邊框border等屬性的效果，在上個(gè)步驟的CSS樣式表中，把列表元素相關(guān)屬性完善，結(jié)合外在表現(xiàn)效果進(jìn)行調(diào)整相關(guān)屬性的取值，直到合適為止。

(4)完善所有的樣式風(fēng)格，a元素的字體font，顏色color，a:hover下盒子背景顏色字體設(shè)置，元素的間距邊界，一級(jí)列表元素的不同樣式風(fēng)格。

(5)提示窗口效果的實(shí)現(xiàn)。先將列表元素

后的無序列表

慕課在網(wǎng)頁設(shè)計(jì)課程教學(xué)中的應(yīng)用——CSS定位教學(xué)案例

一、CSS定位案例教學(xué)任務(wù)、目標(biāo)、教學(xué)重難點(diǎn)

二、慕課在CSS定位案例教學(xué)中的應(yīng)用

三、總結(jié)

慕課在網(wǎng)頁設(shè)計(jì)課程教學(xué)中的應(yīng)用
——CSS定位教學(xué)案例

一、CSS定位案例教學(xué)任務(wù)、目標(biāo)、教學(xué)重難點(diǎn)

二、慕課在CSS定位案例教學(xué)中的應(yīng)用

三、總結(jié)