公務(wù)員期刊網(wǎng) 論文中心 正文

網(wǎng)頁設(shè)計基礎(chǔ)浮動及定位教學(xué)案例

前言:想要寫出一篇引人入勝的文章?我們特意為您整理了網(wǎng)頁設(shè)計基礎(chǔ)浮動及定位教學(xué)案例范文,希望能給你帶來靈感和參考,敬請閱讀。

網(wǎng)頁設(shè)計基礎(chǔ)浮動及定位教學(xué)案例

摘要:浮動與定位是《網(wǎng)頁設(shè)計基礎(chǔ)》課程中一個教學(xué)難點,為此,筆者以任務(wù)為導(dǎo)向,將任務(wù)層層分解,化繁為簡,從而更好地讓學(xué)生理解并掌握知識點。

關(guān)鍵詞:HTML;浮動;定位

1背景

本教學(xué)單元的教學(xué)模式為項目導(dǎo)入、任務(wù)驅(qū)動和過程管理。以淘寶網(wǎng)項目,貫穿到整個教學(xué)過程中,然后將整個項目進(jìn)行分解,以任務(wù)為驅(qū)動,并在教學(xué)過程中,借鑒IT企業(yè)項目管理模式,對整個教學(xué)過程進(jìn)行監(jiān)控,確保完成教學(xué)目標(biāo)。

2教學(xué)案例呈現(xiàn)

2.1教學(xué)目標(biāo)

本次教學(xué)的知識目標(biāo)要求學(xué)生掌握浮動、浮動塌陷、定位和浮動與定位的綜合運用,重點是浮動與定位,難點是浮動塌陷以及浮動與定位的綜合運用;能力目標(biāo)要求學(xué)生具備相應(yīng)的專業(yè)能力、方法能力和社會能力:在專業(yè)能力方面,具備web前端靜態(tài)頁面開發(fā)能力;在方法能力方面,具備對知識歸納的能力;在社會能力方面,具備有效地時間管理和準(zhǔn)確的自我評價的能力。素質(zhì)目標(biāo)要求學(xué)生具備積極的工作態(tài)度、團(tuán)隊合作能力。從學(xué)生認(rèn)知、能力結(jié)構(gòu)和心理特征來看,當(dāng)前大多數(shù)學(xué)生理解盒子模型和默認(rèn)標(biāo)準(zhǔn)文檔流,并能熟練運用,整體學(xué)習(xí)信心高昂,團(tuán)體意識較強(qiáng)。因此,為了實現(xiàn)本次教學(xué)目標(biāo),制定了課前預(yù)習(xí)作業(yè);課中上機(jī)任務(wù),并按學(xué)生水平采用分層教學(xué);課后,布置課后作業(yè),鞏固知識。

2.2教學(xué)內(nèi)容

《網(wǎng)頁設(shè)計基礎(chǔ)》屬于軟件技術(shù)專業(yè)大一階段的核心職業(yè)技術(shù)基礎(chǔ)課程,是后續(xù)Web開發(fā)課程的基礎(chǔ)前導(dǎo)課程。本教學(xué)單元的學(xué)習(xí)任務(wù)是在前次教學(xué)單元完成的淘寶網(wǎng)頁面的基礎(chǔ)上,運用浮動和定位制作淘寶網(wǎng)商品詳情頁面。地位:浮動與定位是本次教學(xué)單元重點與難點,是后期進(jìn)行網(wǎng)頁布局的核心基礎(chǔ)知識點。作用:浮動實現(xiàn)塊級元素橫向布局,定位實現(xiàn)頁面元素精確定位。前后聯(lián)系:浮動與定位是對前驅(qū)知識的提升,后驅(qū)網(wǎng)頁布局知識的核心。選取理由:本次學(xué)習(xí)任務(wù)是浮動和定位綜合運用,以任務(wù)驅(qū)動,讓學(xué)生邊做邊學(xué)。

2.3學(xué)情分析

根據(jù)之前的教學(xué)反饋情況來看,學(xué)生的學(xué)情如下:1)大多數(shù)學(xué)生對標(biāo)準(zhǔn)文檔流、塊級元素、行內(nèi)元素和盒子的概念掌握較好。2)大多數(shù)學(xué)生對盒子和文本相關(guān)屬性掌握較好,但相應(yīng)的英文單詞掌握不熟練。3)大多數(shù)學(xué)生對浮動和定位可能較難理解,需要用案例分步教學(xué),邊做邊學(xué)。

2.4教學(xué)過程

本教學(xué)單元的師生互動教學(xué)過程分為三個階段:課前預(yù)習(xí)、課中演練和課后鞏固。課前:制定預(yù)習(xí)任務(wù)和作業(yè),預(yù)習(xí)資料,培養(yǎng)學(xué)生自主學(xué)習(xí)能力。課中:以任務(wù)為驅(qū)動,指導(dǎo)學(xué)生上機(jī)練習(xí),并對學(xué)生分層教學(xué),循序漸進(jìn)。課后:制定課后作業(yè),強(qiáng)化知識,進(jìn)行教學(xué)總結(jié),并及時解答學(xué)生疑難問題。課前,首先按學(xué)生水平分組,以小組為單位,進(jìn)行分層教學(xué)和培養(yǎng)團(tuán)隊合作能力;然后,預(yù)習(xí)案例,先學(xué)后教,讓學(xué)生學(xué)習(xí)起來從容不迫;其次,完成預(yù)習(xí)筆記,讓學(xué)生主動學(xué)習(xí),主動思考,從而知己知彼,輕松聽課;最后,檢查學(xué)生預(yù)習(xí)完成情況,從而有針對性調(diào)整教學(xué)內(nèi)容和教學(xué)方法。課中,首先通過一個案例復(fù)習(xí)之前所學(xué)知識,在默認(rèn)標(biāo)準(zhǔn)文檔流中,行內(nèi)元素自左向右排列,塊級元素自上而下排列;并通過另一個案例,說明塊級元素可以自左向右排列或者在父級元素內(nèi)部某個確定位置上出現(xiàn),通過兩個截然不同現(xiàn)象對比,拋出問題,引入本節(jié)所要學(xué)習(xí)的知識點—浮動與定位。整個課中教學(xué)過程,分為引入案例,素材準(zhǔn)備,網(wǎng)頁制作和點評學(xué)生等四個階段,各階段說明和時間分配如表所示。其中,網(wǎng)頁制作任務(wù)分解為7個步驟,由簡入繁,步步推進(jìn),配以講解和提問,加深學(xué)生理解和掌握,并事先根據(jù)學(xué)生預(yù)習(xí)反饋的情況,制定了每個子任務(wù)的難度等級,從而為分層教學(xué)提供實施依據(jù)。最后,通過點評學(xué)生上機(jī)完成任務(wù),總結(jié)優(yōu)缺點,以激勵學(xué)生不斷進(jìn)步。課后,針對本次學(xué)生上課和作業(yè)完成情況,及時進(jìn)行教學(xué)總結(jié),以便為下次上課做好針對預(yù)案,通過本次課發(fā)現(xiàn),多數(shù)同學(xué)編碼命名不規(guī)范和注釋較少,喜歡動不動就問,自我解決問題能力較弱,部分同學(xué)對浮動和定位理解不清,對專業(yè)單詞不熟練。這表明,在下次上課前,需要學(xué)生繼續(xù)加強(qiáng)課前預(yù)習(xí)和課后復(fù)習(xí),早自習(xí)多讀寫單詞。

2.5教學(xué)方法

本教學(xué)單元引入課程的方法是引入案例、案例演示、邊做邊學(xué)。l引入案例:引入具體要實施的項目案例,明確學(xué)習(xí)任務(wù);l案例演示:將知識點貫穿到每個任務(wù)中,并演示,邊講解;l邊做邊學(xué):以任務(wù)為驅(qū)動,將案例分解,由繁到簡,邊做邊學(xué)。為了更好地讓學(xué)生完成學(xué)習(xí)任務(wù)和掌握知識點,將整個任務(wù)拆解成7個步驟:l步驟1:基于上次學(xué)習(xí)任務(wù),首先完成父級盒子和兩個子級盒子的創(chuàng)建。l步驟2:通過浮動屬性實現(xiàn)兩個子級盒子左右橫向排列,并同時拋出問題:為什么兩個盒子浮動后,會導(dǎo)致父級元素的高度變成了0,造成浮動塌陷現(xiàn)象?旨在啟發(fā)學(xué)生思維,透過問題現(xiàn)象抓到問題本質(zhì)。l步驟3:通過多種方式清除浮動塌陷,并同時提出問題,進(jìn)行強(qiáng)調(diào)和小結(jié)。l步驟4:添加網(wǎng)頁文字和圖片。l步驟5:添加網(wǎng)頁文字樣式。l步驟6:通過相對定位和絕對定位,添加半透明文字說明欄,并提出問題,讓學(xué)生理解兩者實質(zhì)區(qū)別。l步驟7:通過固定定位實現(xiàn)網(wǎng)頁中的廣告欄,并提出問題,讓學(xué)生搞清固定定位的特點。

參考文獻(xiàn):

[1]李潔.高職高專“網(wǎng)頁設(shè)計”課程教學(xué)探索及研究[J].廣西科技師范學(xué)院學(xué)報,2016,31(3):117-120.

[2]田紅玉.DIV+CSS布局在網(wǎng)頁設(shè)計教學(xué)中的應(yīng)用[J].信息與電腦:理論版,2016(2):254-256.

作者:王亮 單位:湖北職業(yè)技術(shù)學(xué)院信息技術(shù)學(xué)院

相關(guān)熱門標(biāo)簽