《網(wǎng)頁設(shè)計(jì)基礎(chǔ)》浮動(dòng)與定位教學(xué)案例研究

王亮

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

關(guān)鍵詞：HTML；浮動(dòng)；定位

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）03-0200-02

1 背景

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

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

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

本次教學(xué)的知識(shí)目標(biāo)要求學(xué)生掌握浮動(dòng)、浮動(dòng)塌陷、定位和浮動(dòng)與定位的綜合運(yùn)用，重點(diǎn)是浮動(dòng)與定位，難點(diǎn)是浮動(dòng)塌陷以及浮動(dòng)與定位的綜合運(yùn)用；能力目標(biāo)要求學(xué)生具備相應(yīng)的專業(yè)能力、方法能力和社會(huì)能力：在專業(yè)能力方面，具備web前端靜態(tài)頁面開發(fā)能力；在方法能力方面，具備對(duì)知識(shí)歸納的能力；在社會(huì)能力方面，具備有效地時(shí)間管理和準(zhǔn)確的自我評(píng)價(jià)的能力。素質(zhì)目標(biāo)要求學(xué)生具備積極的工作態(tài)度、團(tuán)隊(duì)合作能力。

從學(xué)生認(rèn)知、能力結(jié)構(gòu)和心理特征來看，當(dāng)前大多數(shù)學(xué)生理解盒子模型和默認(rèn)標(biāo)準(zhǔn)文檔流，并能熟練運(yùn)用，整體學(xué)習(xí)信心高昂，團(tuán)體意識(shí)較強(qiáng)。

因此，為了實(shí)現(xiàn)本次教學(xué)目標(biāo)，制定了課前預(yù)習(xí)作業(yè)；課中上機(jī)任務(wù)，并按學(xué)生水平采用分層教學(xué)；課后，布置課后作業(yè)，鞏固知識(shí)。

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

《網(wǎng)頁設(shè)計(jì)基礎(chǔ)》屬于軟件技術(shù)專業(yè)大一階段的核心職業(yè)技術(shù)基礎(chǔ)課程，是后續(xù)Web開發(fā)課程的基礎(chǔ)前導(dǎo)課程。本教學(xué)單元的學(xué)習(xí)任務(wù)是在前次教學(xué)單元完成的淘寶網(wǎng)頁面的基礎(chǔ)上，運(yùn)用浮動(dòng)和定位制作淘寶網(wǎng)商品詳情頁面，其效果圖如圖1所示。

地位：浮動(dòng)與定位是本次教學(xué)單元重點(diǎn)與難點(diǎn)，是后期進(jìn)行網(wǎng)頁布局的核心基礎(chǔ)知識(shí)點(diǎn)。

作用：浮動(dòng)實(shí)現(xiàn)塊級(jí)元素橫向布局，定位實(shí)現(xiàn)頁面元素精確定位。

前后聯(lián)系：浮動(dòng)與定位是對(duì)前驅(qū)知識(shí)的提升，后驅(qū)網(wǎng)頁布局知識(shí)的核心。

選取理由：本次學(xué)習(xí)任務(wù)是浮動(dòng)和定位綜合運(yùn)用，以任務(wù)驅(qū)動(dòng)，讓學(xué)生邊做邊學(xué)。

2.3 學(xué)情分析

根據(jù)之前的教學(xué)反饋情況來看，學(xué)生的學(xué)情如下：

1） 大多數(shù)學(xué)生對(duì)標(biāo)準(zhǔn)文檔流、塊級(jí)元素、行內(nèi)元素和盒子的概念掌握較好。

2） 大多數(shù)學(xué)生對(duì)盒子和文本相關(guān)屬性掌握較好，但相應(yīng)的英文單詞掌握不熟練。

3） 大多數(shù)學(xué)生對(duì)浮動(dòng)和定位可能較難理解，需要用案例分步教學(xué)，邊做邊學(xué)。

2.4 教學(xué)過程

本教學(xué)單元的師生互動(dòng)教學(xué)過程分為三個(gè)階段：課前預(yù)習(xí)、課中演練和課后鞏固。

課前：制定預(yù)習(xí)任務(wù)和作業(yè)，發(fā)布預(yù)習(xí)資料，培養(yǎng)學(xué)生自主學(xué)習(xí)能力。

課中：以任務(wù)為驅(qū)動(dòng)，指導(dǎo)學(xué)生上機(jī)練習(xí)，并對(duì)學(xué)生分層教學(xué)，循序漸進(jìn)。

課后：制定課后作業(yè)，強(qiáng)化知識(shí)，進(jìn)行教學(xué)總結(jié)，并及時(shí)解答學(xué)生疑難問題。

課前，首先按學(xué)生水平分組，以小組為單位，進(jìn)行分層教學(xué)和培養(yǎng)團(tuán)隊(duì)合作能力；然后，發(fā)布預(yù)習(xí)案例，先學(xué)后教，讓學(xué)生學(xué)習(xí)起來從容不迫；其次，完成預(yù)習(xí)筆記，讓學(xué)生主動(dòng)學(xué)習(xí)，主動(dòng)思考，從而知己知彼，輕松聽課；最后，檢查學(xué)生預(yù)習(xí)完成情況，從而有針對(duì)性調(diào)整教學(xué)內(nèi)容和教學(xué)方法。

課中，首先通過一個(gè)案例復(fù)習(xí)之前所學(xué)知識(shí)，在默認(rèn)標(biāo)準(zhǔn)文檔流中，行內(nèi)元素自左向右排列，塊級(jí)元素自上而下排列；并通過另一個(gè)案例，說明塊級(jí)元素可以自左向右排列或者在父級(jí)元素內(nèi)部某個(gè)確定位置上出現(xiàn)，通過兩個(gè)截然不同現(xiàn)象對(duì)比，拋出問題，引入本節(jié)所要學(xué)習(xí)的知識(shí)點(diǎn)—浮動(dòng)與定位。

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

課后，針對(duì)本次學(xué)生上課和作業(yè)完成情況，及時(shí)進(jìn)行教學(xué)總結(jié)，以便為下次上課做好針對(duì)預(yù)案，通過本次課發(fā)現(xiàn)，多數(shù)同學(xué)編碼命名不規(guī)范和注釋較少，喜歡動(dòng)不動(dòng)就問，自我解決問題能力較弱，部分同學(xué)對(duì)浮動(dòng)和定位理解不清，對(duì)專業(yè)單詞不熟練。這表明，在下次上課前，需要學(xué)生繼續(xù)加強(qiáng)課前預(yù)習(xí)和課后復(fù)習(xí)，早自習(xí)多讀寫單詞。

2.5 教學(xué)方法

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

l 引入案例：引入具體要實(shí)施的項(xiàng)目案例，明確學(xué)習(xí)任務(wù)；

l 案例演示：將知識(shí)點(diǎn)貫穿到每個(gè)任務(wù)中，并演示，邊講解；

l 邊做邊學(xué)：以任務(wù)為驅(qū)動(dòng)，將案例分解，由繁到簡(jiǎn)，邊做邊學(xué)。

為了更好地讓學(xué)生完成學(xué)習(xí)任務(wù)和掌握知識(shí)點(diǎn)，將整個(gè)任務(wù)拆解成7個(gè)步驟：

l 步驟1：基于上次學(xué)習(xí)任務(wù)，首先完成父級(jí)盒子和兩個(gè)子級(jí)盒子的創(chuàng)建。

l 步驟2：通過浮動(dòng)屬性實(shí)現(xiàn)兩個(gè)子級(jí)盒子左右橫向排列，并同時(shí)拋出問題：為什么兩個(gè)盒子浮動(dòng)后，會(huì)導(dǎo)致父級(jí)元素的高度變成了0，造成浮動(dòng)塌陷現(xiàn)象？旨在啟發(fā)學(xué)生思維，透過問題現(xiàn)象抓到問題本質(zhì)。

l 步驟3：通過多種方式清除浮動(dòng)塌陷，并同時(shí)提出問題，進(jìn)行強(qiáng)調(diào)和小結(jié)。

l 步驟4：添加網(wǎng)頁文字和圖片。

l 步驟5：添加網(wǎng)頁文字樣式。

l 步驟6：通過相對(duì)定位和絕對(duì)定位，添加半透明文字說明欄，并提出問題，讓學(xué)生理解兩者實(shí)質(zhì)區(qū)別。

l 步驟7：通過固定定位實(shí)現(xiàn)網(wǎng)頁中的廣告欄，并提出問題，讓學(xué)生搞清固定定位的特點(diǎn)。

參考文獻(xiàn)：

[1] 李潔. 高職高?！熬W(wǎng)頁設(shè)計(jì)”課程教學(xué)探索及研究[J]. 廣西科技師范學(xué)院學(xué)報(bào)， 2016， 31（3）：117-120.

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