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

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

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

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

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

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

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

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

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

●教學(xué)過(guò)程

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

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

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

圖1

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

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

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

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

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

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

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

活動(dòng)2：打開(kāi)圖1右圖頁(yè)面，選擇任一冬奧項(xiàng)目，嘗試?yán)脤傩詸诤蛯?duì)話(huà)框修改標(biāo)簽屬性，觀察頁(yè)面布局的變化。

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

圖2

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

圖3

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

圖4

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

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

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

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

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

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

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

圖5

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

圖6

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

表1

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

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

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

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

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

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

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

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

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

圖7

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

圖8

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

表2

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

表3

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

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

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

圖9

●教學(xué)反思

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

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

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

點(diǎn) 評(píng)

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

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