網(wǎng)頁(yè)設計基礎浮動(dòng)及定位教學(xué)案例論文
網(wǎng)頁(yè)設計基礎浮動(dòng)及定位教學(xué)案例論文
摘要：浮動(dòng)與定位是《網(wǎng)頁(yè)設計基礎》課程中一個(gè)教學(xué)難點(diǎn)，為此，筆者以任務(wù)為導向，將任務(wù)層層分解，化繁為簡(jiǎn)，從而更好地讓學(xué)生理解并掌握知識點(diǎn)。
關(guān)鍵詞：HTML；浮動(dòng)；定位
1背景
本教學(xué)單元的教學(xué)模式為項目導入、任務(wù)驅動(dòng)和過(guò)程管理。以淘寶網(wǎng)項目，貫穿到整個(gè)教學(xué)過(guò)程中，然后將整個(gè)項目進(jìn)行分解，以任務(wù)為驅動(dòng)，并在教學(xué)過(guò)程中，借鑒IT企業(yè)項目管理模式，對整個(gè)教學(xué)過(guò)程進(jìn)行監控，確保完成教學(xué)目標。
2教學(xué)案例呈現
2.1教學(xué)目標
本次教學(xué)的知識目標要求學(xué)生掌握浮動(dòng)、浮動(dòng)塌陷、定位和浮動(dòng)與定位的綜合運用，重點(diǎn)是浮動(dòng)與定位，難點(diǎn)是浮動(dòng)塌陷以及浮動(dòng)與定位的綜合運用；能力目標要求學(xué)生具備相應的專(zhuān)業(yè)能力、方法能力和社會(huì )能力：在專(zhuān)業(yè)能力方面，具備web前端靜態(tài)頁(yè)面開(kāi)發(fā)能力；在方法能力方面，具備對知識歸納的能力；在社會(huì )能力方面，具備有效地時(shí)間管理和準確的自我評價(jià)的能力。素質(zhì)目標要求學(xué)生具備積極的工作態(tài)度、團隊合作能力。從學(xué)生認知、能力結構和心理特征來(lái)看，當前大多數學(xué)生理解盒子模型和默認標準文檔流，并能熟練運用，整體學(xué)習信心高昂，團體意識較強。因此，為了實(shí)現本次教學(xué)目標，制定了課前預習作業(yè)；課中上機任務(wù)，并按學(xué)生水平采用分層教學(xué)；課后，布置課后作業(yè)，鞏固知識。
2.2教學(xué)內容
《網(wǎng)頁(yè)設計基礎》屬于軟件技術(shù)專(zhuān)業(yè)大一階段的核心職業(yè)技術(shù)基礎課程，是后續Web開(kāi)發(fā)課程的基礎前導課程。本教學(xué)單元的學(xué)習任務(wù)是在前次教學(xué)單元完成的淘寶網(wǎng)頁(yè)面的基礎上，運用浮動(dòng)和定位制作淘寶網(wǎng)商品詳情頁(yè)面。地位：浮動(dòng)與定位是本次教學(xué)單元重點(diǎn)與難點(diǎn)，是后期進(jìn)行網(wǎng)頁(yè)布局的核心基礎知識點(diǎn)。作用：浮動(dòng)實(shí)現塊級元素橫向布局，定位實(shí)現頁(yè)面元素精確定位。前后聯(lián)系：浮動(dòng)與定位是對前驅知識的提升，后驅網(wǎng)頁(yè)布局知識的核心。選取理由：本次學(xué)習任務(wù)是浮動(dòng)和定位綜合運用，以任務(wù)驅動(dòng)，讓學(xué)生邊做邊學(xué)。
2.3學(xué)情分析
根據之前的教學(xué)反饋情況來(lái)看，學(xué)生的學(xué)情如下：1)大多數學(xué)生對標準文檔流、塊級元素、行內元素和盒子的概念掌握較好。2)大多數學(xué)生對盒子和文本相關(guān)屬性掌握較好，但相應的英文單詞掌握不熟練。3)大多數學(xué)生對浮動(dòng)和定位可能較難理解，需要用案例分步教學(xué)，邊做邊學(xué)。
2.4教學(xué)過(guò)程
本教學(xué)單元的師生互動(dòng)教學(xué)過(guò)程分為三個(gè)階段：課前預習、課中演練和課后鞏固。課前：制定預習任務(wù)和作業(yè)，發(fā)布預習資料，培養學(xué)生自主學(xué)習能力。課中：以任務(wù)為驅動(dòng)，指導學(xué)生上機練習，并對學(xué)生分層教學(xué)，循序漸進(jìn)。課后：制定課后作業(yè)，強化知識，進(jìn)行教學(xué)總結，并及時(shí)解答學(xué)生疑難問(wèn)題。課前，首先按學(xué)生水平分組，以小組為單位，進(jìn)行分層教學(xué)和培養團隊合作能力；然后，發(fā)布預習案例，先學(xué)后教，讓學(xué)生學(xué)習起來(lái)從容不迫；其次，完成預習筆記，讓學(xué)生主動(dòng)學(xué)習，主動(dòng)思考，從而知己知彼，輕松聽(tīng)課；最后，檢查學(xué)生預習完成情況，從而有針對性調整教學(xué)內容和教學(xué)方法。課中，首先通過(guò)一個(gè)案例復習之前所學(xué)知識，在默認標準文檔流中，行內元素自左向右排列，塊級元素自上而下排列；并通過(guò)另一個(gè)案例，說(shuō)明塊級元素可以自左向右排列或者在父級元素內部某個(gè)確定位置上出現，通過(guò)兩個(gè)截然不同現象對比，拋出問(wèn)題，引入本節所要學(xué)習的知識點(diǎn)—浮動(dòng)與定位。整個(gè)課中教學(xué)過(guò)程，分為引入案例，素材準備，網(wǎng)頁(yè)制作和點(diǎn)評學(xué)生等四個(gè)階段，各階段說(shuō)明和時(shí)間分配如表所示。其中，網(wǎng)頁(yè)制作任務(wù)分解為7個(gè)步驟，由簡(jiǎn)入繁，步步推進(jìn)，配以講解和提問(wèn)，加深學(xué)生理解和掌握，并事先根據學(xué)生預習反饋的情況，制定了每個(gè)子任務(wù)的難度等級，從而為分層教學(xué)提供實(shí)施依據。最后，通過(guò)點(diǎn)評學(xué)生上機完成任務(wù)，總結優(yōu)缺點(diǎn)，以激勵學(xué)生不斷進(jìn)步。課后，針對本次學(xué)生上課和作業(yè)完成情況，及時(shí)進(jìn)行教學(xué)總結，以便為下次上課做好針對預案，通過(guò)本次課發(fā)現，多數同學(xué)編碼命名不規范和注釋較少，喜歡動(dòng)不動(dòng)就問(wèn)，自我解決問(wèn)題能力較弱，部分同學(xué)對浮動(dòng)和定位理解不清，對專(zhuān)業(yè)單詞不熟練。這表明，在下次上課前，需要學(xué)生繼續加強課前預習和課后復習，早自習多讀寫(xiě)單詞。
2.5教學(xué)方法
本教學(xué)單元引入課程的方法是引入案例、案例演示、邊做邊學(xué)。l引入案例：引入具體要實(shí)施的項目案例，明確學(xué)習任務(wù)；l案例演示：將知識點(diǎn)貫穿到每個(gè)任務(wù)中，并演示，邊講解；l邊做邊學(xué)：以任務(wù)為驅動(dòng)，將案例分解，由繁到簡(jiǎn)，邊做邊學(xué)。為了更好地讓學(xué)生完成學(xué)習任務(wù)和掌握知識點(diǎn)，將整個(gè)任務(wù)拆解成7個(gè)步驟：l步驟1：基于上次學(xué)習任務(wù)，首先完成父級盒子和兩個(gè)子級盒子的創(chuàng )建。l步驟2：通過(guò)浮動(dòng)屬性實(shí)現兩個(gè)子級盒子左右橫向排列，并同時(shí)拋出問(wèn)題：為什么兩個(gè)盒子浮動(dòng)后，會(huì )導致父級元素的高度變成了0，造成浮動(dòng)塌陷現象？旨在啟發(fā)學(xué)生思維，透過(guò)問(wèn)題現象抓到問(wèn)題本質(zhì)。l步驟3：通過(guò)多種方式清除浮動(dòng)塌陷，并同時(shí)提出問(wèn)題，進(jìn)行強調和小結。l步驟4：添加網(wǎng)頁(yè)文字和圖片。l步驟5：添加網(wǎng)頁(yè)文字樣式。l步驟6：通過(guò)相對定位和絕對定位，添加半透明文字說(shuō)明欄，并提出問(wèn)題，讓學(xué)生理解兩者實(shí)質(zhì)區別。l步驟7：通過(guò)固定定位實(shí)現網(wǎng)頁(yè)中的廣告欄，并提出問(wèn)題，讓學(xué)生搞清固定定位的特點(diǎn)。
參考文獻：
[1]李潔.高職高專(zhuān)“網(wǎng)頁(yè)設計”課程教學(xué)探索及研究[J].廣西科技師范學(xué)院學(xué)報,2016,31(3):117-120.
[2]田紅玉.DIV+CSS布局在網(wǎng)頁(yè)設計教學(xué)中的應用[J].信息與電腦：理論版,2016(2):254-256.
【網(wǎng)頁(yè)設計基礎浮動(dòng)及定位教學(xué)案例論文】相關(guān)文章：
《確定位置一》優(yōu)秀教學(xué)設計（通用11篇）05-08
《用數對確定位置》教學(xué)設計范文（通用10篇）11-14
學(xué)生的知識技能基礎教學(xué)設計（通用13篇）05-27
程序設計課堂教學(xué)模式探索論文03-20
工業(yè)設計表現技法課程教學(xué)革新論文03-10
《標牌設計》的教學(xué)設計03-14
《狼牙山五壯士》第二課時(shí)教學(xué)設計案例（通用7篇）09-20
旋轉的教學(xué)設計02-16
《茶經(jīng)》教學(xué)設計02-18