《應(yīng)用DIV+CSS技術(shù)布局網(wǎng)頁》教學(xué)設(shè)計(jì)

李正東 王婷 江蘇省東臺(tái)市實(shí)驗(yàn)中學(xué)

李秀梅 江蘇省鹽城市鹿鳴路初級中學(xué)

曹恒來 江蘇省鹽城市教育科學(xué)研究院

●學(xué)習(xí)內(nèi)容分析

本課是蘇科版八年級第三章“設(shè)計(jì)與制作主題網(wǎng)站”的內(nèi)容，屬于“互聯(lián)網(wǎng)應(yīng)用與創(chuàng)新”模塊。表格和框架是傳統(tǒng)的布局網(wǎng)頁方式，使用表格布局簡單易用，但表格的嵌套使網(wǎng)頁結(jié)構(gòu)變得復(fù)雜，網(wǎng)頁內(nèi)容需在表格加載完成后才能完全顯示，且隨著冗余代碼的增加，性能和體驗(yàn)大大降低。作為表格替代者的DIV標(biāo)簽，采用盒子模式，由內(nèi)容、填充、邊框、外邊距四個(gè)部分組成，代碼簡潔，結(jié)合CSS樣式表，可以實(shí)現(xiàn)頁面表現(xiàn)與內(nèi)容的分離，能夠?qū)W(wǎng)頁中元素的位置進(jìn)行像素級的精確控制，很好地實(shí)現(xiàn)頁面布局的各種排版效果，支持幾乎所有的字體、字號樣式，并具有初步交互設(shè)計(jì)能力。

●學(xué)習(xí)者分析

本課的學(xué)習(xí)對象是八年級的學(xué)生，通過前面模塊的學(xué)習(xí)，他們能夠使用WPS辦公軟件對文本和數(shù)據(jù)格式化，能夠選擇適當(dāng)?shù)墓ぞ?，采集與處理圖形、聲音等多媒體素材，并能利用表格和框架進(jìn)行簡單的網(wǎng)頁布局。但由于缺少模塊化設(shè)計(jì)思想的指引，面對結(jié)構(gòu)復(fù)雜的網(wǎng)頁，學(xué)生常通過合并和拆分單元格的方法布局，可這樣的操作方法費(fèi)時(shí)費(fèi)力，效率不高，且網(wǎng)頁無法適應(yīng)不同終端瀏覽。

●學(xué)習(xí)目標(biāo)

①了解DIV與CSS的概念。

②掌握插入與編輯DIV標(biāo)簽，新建、編輯與應(yīng)用CSS規(guī)則的方法。

③理解DIV標(biāo)簽盒子模型的工作機(jī)制，并能應(yīng)用DIV+CSS技術(shù)布局網(wǎng)頁。

④認(rèn)識“關(guān)注點(diǎn)分離”設(shè)計(jì)思想，體會(huì)頁面表現(xiàn)與內(nèi)容分離的靈活和高效。

●教學(xué)過程

1.情境引入，感知DIV+CSS布局

課前游戲：說一說你了解的冬奧體育項(xiàng)目，比一比誰知道的冬奧體育項(xiàng)目多。

活動(dòng)1：調(diào)整版面設(shè)置，感受兩種布局（如圖1）。

圖1

①嘗試用表格布局的方式將圖1左圖所示網(wǎng)頁中的體育項(xiàng)目圖標(biāo)重新排列成右圖所示樣式，并把網(wǎng)頁布局版式由兩欄3∶1調(diào)整為兩欄1∶3。

②點(diǎn)擊右圖所示網(wǎng)頁中的主題風(fēng)格切換按鈕，觀察網(wǎng)頁哪些方面發(fā)生了變化，哪些方面沒有發(fā)生變化。

③查看兩個(gè)網(wǎng)頁的布局標(biāo)簽，對比控制頁面結(jié)構(gòu)的各種屬性，分析哪種布局方式更簡潔。

小結(jié)：用表格布局網(wǎng)頁，需要對表格進(jìn)行拆分和組合，使得布局調(diào)整變得異常煩瑣，并會(huì)形成冗余代碼；用DIV+CSS布局網(wǎng)頁，將頁面表現(xiàn)和內(nèi)容分離，可以實(shí)現(xiàn)風(fēng)格快速切換，易于維護(hù)和改版。

設(shè)計(jì)意圖：在課前游戲的基礎(chǔ)上，讓學(xué)生通過一鍵切換更改網(wǎng)頁布局，感受將網(wǎng)頁表現(xiàn)與內(nèi)容分離的優(yōu)勢，激發(fā)學(xué)生對新知的渴求，引出DIV+CSS布局。

2.分析標(biāo)簽，理解盒子模型

DIV+CSS網(wǎng)頁布局可以快速實(shí)現(xiàn)風(fēng)格切換，使得網(wǎng)頁維護(hù)變得更加方便，其背后的原理是什么？

活動(dòng)2：打開圖1右圖頁面，選擇任一冬奧項(xiàng)目，嘗試?yán)脤傩詸诤蛯υ捒蛐薷臉?biāo)簽屬性，觀察頁面布局的變化。

①修改圖片寬、高屬性為133px，觀察標(biāo)簽有何變化（如圖2）。

圖2

②選擇項(xiàng)目標(biāo)簽，鼠標(biāo)懸停在DIV標(biāo)簽邊框，觀察有哪些屬性，修改方框填充為相同大小的15px，并修改背景顏色，觀察效果變化（如圖3）。

圖3

③修改標(biāo)簽邊框樣式屬性為全部實(shí)線，查看布局效果（如圖4）。

圖4

④冬奧特許商店通過快遞將冰墩墩安全快速地送到消費(fèi)者手中，快遞盒子由哪幾部分組成？你能通過快遞盒子的結(jié)構(gòu)說一說DIV標(biāo)簽的結(jié)構(gòu)嗎？

小結(jié)：DIV標(biāo)簽稱為區(qū)隔標(biāo)記，采用類似快遞盒子的盒子模式，通過DIV標(biāo)簽屬性來定位文字、圖片等元素的外觀和位置。

設(shè)計(jì)意圖：通過在圖形化界面修改DIV標(biāo)簽盒子中圖片寬度、高度、顏色、邊框等屬性值，改變圖片的呈現(xiàn)效果，并與快遞盒子進(jìn)行類比，幫助學(xué)生建構(gòu)盒子模型。

3.修改標(biāo)簽，理解CSS樣式表

如何統(tǒng)一改變圖片的大小和外觀，使其快速排列成2022樣式？

活動(dòng)3：通過代碼修改DIV標(biāo)簽屬性，體驗(yàn)CSS樣式表的優(yōu)勢。

①切換到代碼視圖，觀察冬奧項(xiàng)目標(biāo)簽代碼，明確DIV標(biāo)簽的嵌套關(guān)系（如圖5）。

圖5

②在.banner選項(xiàng)中修改圖片width、height屬性（如圖6），預(yù)覽頁面中各個(gè)項(xiàng)目的布局變化，思考代碼中.banner選項(xiàng)的作用，以及在布局網(wǎng)頁中的優(yōu)勢。

圖6

③觀察CSS樣式與HTML語言書寫規(guī)則，比較其書寫規(guī)則的異同（如下頁表1）。

表1

小結(jié)：.banner選項(xiàng)定義了一組CSS樣式，通過設(shè)置屬性對Web頁面元素的字體、顏色、背景等效果進(jìn)行控制，可以大大減少冗余代碼。在書寫CSS代碼時(shí)，需要使用樣式規(guī)則選擇器，樣式規(guī)則放在一對{}中，使用冒號將屬性和屬性值對應(yīng)起來，不同的屬性之間使用分號分隔。

活動(dòng)4：比較ID樣式與類樣式，理解各自功能。

①選擇任一冬奧項(xiàng)目DIV標(biāo)簽，修改對應(yīng)的item選項(xiàng)中l(wèi)eft、top屬性，預(yù)覽頁面變化情況，理解id名稱作為選擇器的作用。

②比較類樣式和ID樣式的定義規(guī)則及各自作用范圍。

小結(jié)：類樣式用于定義一組標(biāo)簽的樣式，使用“.”作為前綴，可以在不同的標(biāo)簽上重復(fù)使用多次。ID樣式只適用于特定的標(biāo)簽，使用“#”作為前綴，可以在頁面上唯一標(biāo)識特定的標(biāo)簽，只能使用一次。

設(shè)計(jì)意圖：通過觀察冬奧項(xiàng)目圖片標(biāo)簽中的CSS樣式，修改屬性，觀察樣式表控制頁面元素外觀和位置的方法，理解類樣式在頁面布局中的作用與優(yōu)勢。在比較ID樣式與類樣式的異同中，掌握常見樣式定義規(guī)則及其作用范圍，進(jìn)一步認(rèn)識樣式表在布局中的靈活性。

4.解決問題，應(yīng)用DIV+CSS布局

活動(dòng)5：使用DIV+CSS技術(shù)制作單個(gè)冬奧項(xiàng)目簡介頁面。

①構(gòu)思冬奧項(xiàng)目介紹頁面（如圖7）。

圖7

②根據(jù)布局圖規(guī)劃標(biāo)簽關(guān)系及名稱（如圖8）。

圖8

③根據(jù)設(shè)計(jì)，規(guī)劃CSS樣式，如表2所示。

表2

④完成頁面設(shè)計(jì)，并在瀏覽器中查看效果，對照量規(guī)自評，如表3所示。

表3

設(shè)計(jì)意圖：在制作冬奧項(xiàng)目介紹頁面的過程中，不能停留在知識的識記和理解水平，而需要對頁面進(jìn)行合理的分析和規(guī)劃，進(jìn)而靈活運(yùn)用DIV和CSS技術(shù)布局網(wǎng)頁，以此培養(yǎng)學(xué)生的審美和整體布局觀，提高問題解決能力。

5.回顧小結(jié)，思維拓展

DIV標(biāo)簽是HTML中一個(gè)常用的容器標(biāo)簽，提供了一種靈活組織頁面結(jié)構(gòu)的方式，與傳統(tǒng)的表格布局相比，可以更加精確地控制元素的大小、位置和間距。采用“關(guān)注點(diǎn)分離”設(shè)計(jì)思想，通過CSS樣式表來呈現(xiàn)元素，實(shí)現(xiàn)頁面表現(xiàn)與內(nèi)容的分離，可以更加方便和有效地修改網(wǎng)站頁面，為Web開發(fā)提供了更大的靈活性和可擴(kuò)展性（如圖9）。

圖9

●教學(xué)反思

本課以學(xué)生對冬奧項(xiàng)目的興趣為切入點(diǎn)，設(shè)置了制作冬奧項(xiàng)目網(wǎng)頁的情境。通過學(xué)生的親身實(shí)踐，來突破傳統(tǒng)“雙基”訓(xùn)練，培養(yǎng)學(xué)生問題解決能力和計(jì)算思維。

隨著網(wǎng)頁越來越復(fù)雜，如何簡潔而高效地設(shè)計(jì)網(wǎng)頁成為需要解決的問題。在本課教學(xué)中，通過切換網(wǎng)頁風(fēng)格，讓學(xué)生感知DIV+CSS布局在頁面表現(xiàn)與內(nèi)容分離方面的優(yōu)勢，然后對范例標(biāo)簽進(jìn)行分解與觀察，使其理解CSS盒子模型。在此基礎(chǔ)上修改網(wǎng)頁代碼，讓學(xué)生認(rèn)識到類樣式能夠重復(fù)調(diào)用，代碼簡潔高效，ID樣式能夠針對特定標(biāo)簽進(jìn)行控制，提供了極高的靈活性和可擴(kuò)展性，可以用于創(chuàng)建復(fù)雜的布局。學(xué)生在布局冬奧項(xiàng)目介紹頁面的過程中，理解并應(yīng)用DIV+CSS技術(shù)，形成計(jì)算思維。

由于受課堂時(shí)間的限制，留給學(xué)生創(chuàng)新設(shè)計(jì)的時(shí)間較少，為了讓學(xué)生有足夠的時(shí)間完善和修改自己的作品，在后繼的教學(xué)中應(yīng)適當(dāng)延長創(chuàng)作時(shí)間。同時(shí)，還可通過在線平臺(tái)進(jìn)行線上互動(dòng)評價(jià)，以促進(jìn)學(xué)生進(jìn)行持續(xù)的深度學(xué)習(xí)。

點(diǎn) 評

本課采用逆向工程教學(xué)模式。逆向工程是一種對目標(biāo)產(chǎn)品進(jìn)行逆向分析和研究，實(shí)現(xiàn)產(chǎn)品優(yōu)化和再創(chuàng)造的過程，運(yùn)用于教育領(lǐng)域，有助于提升學(xué)生的學(xué)習(xí)動(dòng)機(jī)和學(xué)習(xí)能力。本課創(chuàng)設(shè)了制作冬奧項(xiàng)目網(wǎng)頁的情境，引出了DIV+CSS網(wǎng)頁布局。分解與觀察是逆向工程教學(xué)模式中最基礎(chǔ)的一個(gè)環(huán)節(jié)，執(zhí)教教師通過引導(dǎo)學(xué)生逐步分解冬奧項(xiàng)目圖片標(biāo)簽，觀察調(diào)整屬性值后的頁面效果，理清DIV標(biāo)簽背后的工作機(jī)制，建構(gòu)起網(wǎng)頁布局的盒子模型。通過修改CSS樣式表的相關(guān)屬性，認(rèn)識到類樣式代碼的簡潔高效、ID樣式的特定控制，進(jìn)一步掌握了DIV+CSS布局網(wǎng)頁的技術(shù)。在此基礎(chǔ)上，再進(jìn)行結(jié)構(gòu)再造，制作一個(gè)冬奧項(xiàng)目介紹頁面，強(qiáng)化了知識應(yīng)用與創(chuàng)新實(shí)踐。學(xué)生經(jīng)歷了網(wǎng)頁制作學(xué)習(xí)中由拆分到復(fù)原再到結(jié)構(gòu)再造的全過程，循序漸進(jìn)地提升了創(chuàng)新實(shí)踐能力。

通過DIV+CSS布局的學(xué)習(xí)，學(xué)生體會(huì)了“關(guān)注點(diǎn)分離”設(shè)計(jì)思想，感受了頁面表現(xiàn)與內(nèi)容分離的靈活和高效。這樣的教學(xué)模式，不僅可以打開學(xué)生的視野，拓展思維的深度，還能夠幫助學(xué)生掌握解決復(fù)雜問題的思維方式，并將習(xí)得的知識與技能遷移到新的情境中去，走向更有意義的學(xué)習(xí)。