慕課在網(wǎng)頁設(shè)計(jì)課程教學(xué)中的應(yīng)用
——CSS定位教學(xué)案例
2016-08-15 05:52:12徐玉輝張振文
湖北第二師范學(xué)院學(xué)報(bào) 2016年7期
唐 瓊，徐玉輝，張振文
(衡陽師范學(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òng)”、“●專題網(wǎng)站”和“●快速鏈接”為一級(jí)
- 后的無序列表
- 下的二級(jí)鏈接先隱藏，設(shè)置 display屬性為none。然后在列表元素的偽類選擇器li:hover實(shí)現(xiàn)鼠標(biāo)放上去顯示內(nèi)容的效果。
- 案例4 奔跑吧，少年！少先隊(duì)活動(dòng)(2021年2期)2021-03-29 05:40:48
- 隨機(jī)變量分布及統(tǒng)計(jì)案例拔高卷中學(xué)生數(shù)理化(高中版.高二數(shù)學(xué))(2019年6期)2019-06-24 03:37:50
- 發(fā)生在你我身邊的那些治超案例中國公路(2017年7期)2017-07-24 13:56:38
- 自媒體時(shí)代慕課對(duì)民辦院校高等化學(xué)教學(xué)的意義與影響中國市場(2016年36期)2016-10-19 05:04:05
- 高校圖書館學(xué)科服務(wù)在慕課發(fā)展過程中的價(jià)值與服務(wù)的自我創(chuàng)新研究商(2016年27期)2016-10-17 06:33:28
- 大學(xué)生對(duì)慕課的了解和利用考試周刊(2016年76期)2016-10-09 10:07:22
- “慕課”教學(xué)的“八年之癢”大學(xué)教育(2016年9期)2016-10-09 08:09:53
- 慕課環(huán)境下的學(xué)習(xí)者大學(xué)教育(2016年9期)2016-10-09 08:05:39
- 隨機(jī)變量分布及統(tǒng)計(jì)案例拔高卷中學(xué)生數(shù)理化(高中版.高二數(shù)學(xué))(2016年4期)2016-03-01 03:46:18
- 一個(gè)模擬案例引發(fā)的多重思考中國衛(wèi)生(2015年4期)2015-11-08 11:16:06
三、總結(jié)
從課堂教學(xué)效果來看，該種模式的教學(xué)可以引起學(xué)生的學(xué)習(xí)欲望，促進(jìn)學(xué)生主動(dòng)課下學(xué)習(xí)視頻中的教學(xué)內(nèi)容，課下實(shí)踐，同時(shí)帶著疑問回到課程，因此課程教學(xué)有很強(qiáng)的針對(duì)性。但是慕課模式下的教學(xué)需要保證學(xué)生有足夠多的課余時(shí)間學(xué)習(xí)視頻內(nèi)容，前期制作的視頻也應(yīng)該根據(jù)課程教學(xué)任務(wù)而制作，一些簡單的概念理論學(xué)生可通過課堂示意即可理解，則無需教師再花時(shí)間制作視頻?？傊?，對(duì)于實(shí)踐性較強(qiáng)的網(wǎng)頁設(shè)計(jì)課程而言，選擇合適的課程教學(xué)任務(wù)，以項(xiàng)目案例教學(xué)方式貫徹制作前期教學(xué)視頻，慕課對(duì)于提高教學(xué)水平，加強(qiáng)學(xué)生的實(shí)踐動(dòng)手能力有很好的實(shí)際意義，建議各高校鼓勵(lì)網(wǎng)頁設(shè)計(jì)課程教師采納并實(shí)踐。
參考文獻(xiàn)：
[1]張琳.慕課視角下網(wǎng)頁設(shè)計(jì)課程的教學(xué)生態(tài)模式研究[J].電腦知識(shí)與技術(shù), 2015,11(21):129-130.
[2]王亮.淺談慕課背景下計(jì)算機(jī)網(wǎng)頁設(shè)計(jì)課程的教學(xué)改革[J].智富時(shí)代,2015，(7):216.
[3]黃霞.網(wǎng)頁設(shè)計(jì)課程教學(xué)模式研究[J]. 電腦知識(shí)與技術(shù), 2015，(11):211-212.
[4]周建輝.三維教學(xué)目標(biāo)下《網(wǎng)頁設(shè)計(jì)》課程教學(xué)改革[J]. 教育評(píng)論,2015，(1):132-134.
[5]張國榮.藝術(shù)院校翻轉(zhuǎn)課程教學(xué)模式研究與實(shí)踐[J].高教探索,2015，(1):75-80.
責(zé)任編輯；林清
收稿日期：2016-05-15
作者簡介：唐瓊(1985-)，女，湖南祁東人，講師，碩士，研究方向?yàn)殡娮由虅?wù)和物流優(yōu)化。
中圖分類號(hào)：G642
文獻(xiàn)標(biāo)識(shí)碼：A
文章編號(hào)：1674-344X(2016)07-0106-03
On the Application of MOOCS in Web Design Courses — A Case Study of CCS Teaching Project
TANG Qiong, XU Yu-hui, ZHANG Zhen-wen
(School of Economics and Management, Hengyang Normal College, Hengyang Hunan 421002, China)
Abstract:MOOCs is a new teaching mode appearing in education field in recent years. This new teaching mode has overturned the traditional teaching mode that is based on the teacher’s “speaking” in the class, extending the classroom space outside. This paper makes a case study of web design courses and selects a relatively more difficult teaching project in the teaching process-CSS to explore the way to improve the teaching level of the course with the help of MOOCs so as to improve students’ practical ability.
Key words:MOOCs; web design courses; case
猜你喜歡 - 案例4 奔跑吧，少年！
- 下的列表元素，同時(shí)列表元素“●快速鏈接”下包含了二級(jí)無序列表
- ，所有的二級(jí)鏈接如“中國期刊網(wǎng)”、“湖南教育網(wǎng)”等鏈接都屬于二級(jí)無序列表下的列表元素。
同時(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)。先將列表元素
