《網頁設計基礎》浮動與定位教學案例研究

王亮

摘要：浮動與定位是《網頁設計基礎》課程中一個教學難點，為此，筆者以任務為導向，將任務層層分解，化繁為簡，從而更好地讓學生理解并掌握知識點。

關鍵詞：HTML；浮動；定位

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2018）03-0200-02

1 背景

本教學單元的教學模式為項目導入、任務驅動和過程管理。以淘寶網項目，貫穿到整個教學過程中，然后將整個項目進行分解，以任務為驅動，并在教學過程中，借鑒IT企業項目管理模式，對整個教學過程進行監控，確保完成教學目標。

2 教學案例呈現

2.1 教學目標

本次教學的知識目標要求學生掌握浮動、浮動塌陷、定位和浮動與定位的綜合運用，重點是浮動與定位，難點是浮動塌陷以及浮動與定位的綜合運用；能力目標要求學生具備相應的專業能力、方法能力和社會能力：在專業能力方面，具備web前端靜態頁面開發能力；在方法能力方面，具備對知識歸納的能力；在社會能力方面，具備有效地時間管理和準確的自我評價的能力。素質目標要求學生具備積極的工作態度、團隊合作能力。

從學生認知、能力結構和心理特征來看，當前大多數學生理解盒子模型和默認標準文檔流，并能熟練運用，整體學習信心高昂，團體意識較強。

因此，為了實現本次教學目標，制定了課前預習作業；課中上機任務，并按學生水平采用分層教學；課后，布置課后作業，鞏固知識。

2.2 教學內容

《網頁設計基礎》屬于軟件技術專業大一階段的核心職業技術基礎課程，是后續Web開發課程的基礎前導課程。本教學單元的學習任務是在前次教學單元完成的淘寶網頁面的基礎上，運用浮動和定位制作淘寶網商品詳情頁面，其效果圖如圖1所示。

地位：浮動與定位是本次教學單元重點與難點，是后期進行網頁布局的核心基礎知識點。

作用：浮動實現塊級元素橫向布局，定位實現頁面元素精確定位。

前后聯系：浮動與定位是對前驅知識的提升，后驅網頁布局知識的核心。

選取理由：本次學習任務是浮動和定位綜合運用，以任務驅動，讓學生邊做邊學。

2.3 學情分析

根據之前的教學反饋情況來看，學生的學情如下：

1） 大多數學生對標準文檔流、塊級元素、行內元素和盒子的概念掌握較好。

2） 大多數學生對盒子和文本相關屬性掌握較好，但相應的英文單詞掌握不熟練。

3） 大多數學生對浮動和定位可能較難理解，需要用案例分步教學，邊做邊學。

2.4 教學過程

本教學單元的師生互動教學過程分為三個階段：課前預習、課中演練和課后鞏固。

課前：制定預習任務和作業，發布預習資料，培養學生自主學習能力。

課中：以任務為驅動，指導學生上機練習，并對學生分層教學，循序漸進。

課后：制定課后作業，強化知識，進行教學總結，并及時解答學生疑難問題。

課前，首先按學生水平分組，以小組為單位，進行分層教學和培養團隊合作能力；然后，發布預習案例，先學后教，讓學生學習起來從容不迫；其次，完成預習筆記，讓學生主動學習，主動思考，從而知己知彼，輕松聽課；最后，檢查學生預習完成情況，從而有針對性調整教學內容和教學方法。

課中，首先通過一個案例復習之前所學知識，在默認標準文檔流中，行內元素自左向右排列，塊級元素自上而下排列；并通過另一個案例，說明塊級元素可以自左向右排列或者在父級元素內部某個確定位置上出現，通過兩個截然不同現象對比，拋出問題，引入本節所要學習的知識點—浮動與定位。

整個課中教學過程，分為引入案例，素材準備，網頁制作和點評學生等四個階段，各階段說明和時間分配如表所示。其中，網頁制作任務分解為7個步驟，由簡入繁，步步推進，配以講解和提問，加深學生理解和掌握，并事先根據學生預習反饋的情況，制定了每個子任務的難度等級，從而為分層教學提供實施依據。最后，通過點評學生上機完成任務，總結優缺點，以激勵學生不斷進步。

課后，針對本次學生上課和作業完成情況，及時進行教學總結，以便為下次上課做好針對預案，通過本次課發現，多數同學編碼命名不規范和注釋較少，喜歡動不動就問，自我解決問題能力較弱，部分同學對浮動和定位理解不清，對專業單詞不熟練。這表明，在下次上課前，需要學生繼續加強課前預習和課后復習，早自習多讀寫單詞。

2.5 教學方法

本教學單元引入課程的方法是引入案例、案例演示、邊做邊學。

l 引入案例：引入具體要實施的項目案例，明確學習任務；

l 案例演示：將知識點貫穿到每個任務中，并演示，邊講解；

l 邊做邊學：以任務為驅動，將案例分解，由繁到簡，邊做邊學。

為了更好地讓學生完成學習任務和掌握知識點，將整個任務拆解成7個步驟：

l 步驟1：基于上次學習任務，首先完成父級盒子和兩個子級盒子的創建。

l 步驟2：通過浮動屬性實現兩個子級盒子左右橫向排列，并同時拋出問題：為什么兩個盒子浮動后，會導致父級元素的高度變成了0，造成浮動塌陷現象？旨在啟發學生思維，透過問題現象抓到問題本質。

l 步驟3：通過多種方式清除浮動塌陷，并同時提出問題，進行強調和小結。

l 步驟4：添加網頁文字和圖片。

l 步驟5：添加網頁文字樣式。

l 步驟6：通過相對定位和絕對定位，添加半透明文字說明欄，并提出問題，讓學生理解兩者實質區別。

l 步驟7：通過固定定位實現網頁中的廣告欄，并提出問題，讓學生搞清固定定位的特點。

參考文獻：

[1] 李潔. 高職高?！熬W頁設計”課程教學探索及研究[J]. 廣西科技師范學院學報， 2016， 31（3）：117-120.

[2] 田紅玉. DIV+CSS布局在網頁設計教學中的應用[J]. 信息與電腦：理論版， 2016（2）：254-256.