“無從下手”的頁面布局教學(xué)案例

孫姍姍

摘要：一個好看的網(wǎng)頁頁面離不開界面設(shè)計，頁面布局是網(wǎng)頁頁面實現(xiàn)中一個比較重要的環(huán)節(jié)，只有掌握好頁面布局，頁面才能達到設(shè)計效果。本案例針對學(xué)生日常存在的問題，尋找合適的解決方案，解決頁面布局中存在的常見問題。

關(guān)鍵詞：界面設(shè)計;頁面布局;教學(xué)案例

中圖分類號：G642? ? ? ? 文獻標(biāo)識碼：A

文章編號：1009-3044（2021）13-0096-02

1 案例背景

學(xué)生在學(xué)習(xí)Web前端課程之前就已經(jīng)接觸了豐富多彩的網(wǎng)頁，各具特色的網(wǎng)頁頁面很容易激發(fā)學(xué)生的學(xué)習(xí)興趣，本學(xué)期這門課前期的學(xué)習(xí)一直很順利。在學(xué)習(xí)基本的標(biāo)簽和盒子布局后，就到了正式的頁面制作環(huán)節(jié)，頁面布局是制作網(wǎng)頁的第一個環(huán)節(jié)。

鑒于年齡特點和以往學(xué)習(xí)經(jīng)歷，學(xué)生在實際操作中會忽視掉整體布局的重要性，等發(fā)現(xiàn)內(nèi)容展示位置不夠時再修改布局，導(dǎo)致整個頁面布局混亂。在教學(xué)之前我已經(jīng)預(yù)設(shè)到學(xué)生會急于添加圖片文字等效果而忽視布局的這個重要問題，所以在教學(xué)設(shè)計中，不斷滲透任務(wù)籌劃的思想。采用任務(wù)驅(qū)動的教學(xué)方法，組織學(xué)生進行網(wǎng)站制作需求分析。在需求分析后，提供給學(xué)生大量的優(yōu)秀網(wǎng)站進行觀摩分析，進而通過Photoshop設(shè)計出簡易的頁面效果。學(xué)生到設(shè)計部分都很順利，但是在HBuilder軟件中實現(xiàn)頁面布局時，卻出現(xiàn)了很大的問題。

2 案例描述

在頁面布局實現(xiàn)時，我要求學(xué)生先布局再填充內(nèi)容，可是html中靈活的布局方式讓學(xué)生無從下手，總是達不到自己想要的效果。有的學(xué)生出現(xiàn)間隔、留白不夠或過多，有的學(xué)生出現(xiàn)布局框到不了自己想要的位置，有的學(xué)生出現(xiàn)嵌套等問題。即使提前預(yù)測過，但此時我知道我需要增加我的教學(xué)設(shè)計中關(guān)于頁面布局的部分了。在課堂中，發(fā)現(xiàn)學(xué)生頁面布局出現(xiàn)問題時，我與學(xué)生面對面進行了交流，通過提問交流，我分析了學(xué)生在頁面布局中的問題。

學(xué)生A說：“老師，我設(shè)置了整個盒子的背景顏色是灰色，還特意設(shè)置了內(nèi)外邊距是0，為什么最邊上還是有白色的地方？”，我引導(dǎo)他說：“你的確特意設(shè)置了外邊距，但你只關(guān)注了這個盒子本身，這個盒子的外面是什么？盒子外面的這個標(biāo)簽是不是也需要設(shè)置，才能達到你要的效果？”，學(xué)生會很快意識到自己的問題。不僅要關(guān)注盒子本身，還要關(guān)注這個盒子的父元素部分?？傮w來說，間隔、留白是內(nèi)外邊距設(shè)置的問題，因為邊距是透明的，他們往往只注意邊框而忽略掉邊距設(shè)置的重要性。

學(xué)生B說：“老師，我想讓這兩個盒子是并排的，可為什么不管怎么設(shè)置，另一個就是會跑到下面來？我為了并排，設(shè)置了一個盒子的寬度是20%，另一個試出來69%，可是頁面拉小一點，就又亂了”，我引導(dǎo)他說：“你發(fā)現(xiàn)了你的問題核心，也知道通過百分比來進行布局。那么，你的兩個盒子是不是完全靠邊？只有在頁面布局無任何內(nèi)外邊距的情況下，才能實現(xiàn)你想象中的80%和20%。只有實現(xiàn)你想象中的狀態(tài)，你才能解決這個問題”。他說：“老師，不可能沒有內(nèi)外邊距的，我的頁面全部貼邊，很不美觀”，我引導(dǎo)他說：“你說的沒錯，我們不可能沒有內(nèi)外邊距，那既然這樣，我們怎么讓他沒有內(nèi)外邊距呢？”。幾個人思考后，終于想到解決方案。那就是把這兩個盒子再放到一個大盒子里。大盒子進行整體布局，小盒子就可以完美的實現(xiàn)20%和80%的分配?？傮w來說，布局框到不了自己想要的位置，不是混淆了position屬性值就是嵌套問題，因為他們不知道這個位置需不需要用div布局。我們的原則是，從整體布局考慮。

學(xué)生已經(jīng)掌握了基本的知識，但是在實際應(yīng)用中仍舊會出現(xiàn)很多問題。通過與學(xué)生對話，我清楚地知道了班級學(xué)生的問題所在。所以設(shè)計了本堂課，讓他們從順利的Photoshop設(shè)計開始。讓學(xué)生根據(jù)我提供的圖，手動畫框書寫頁面布局樣式。具體教學(xué)設(shè)計如下：

1）內(nèi)容結(jié)構(gòu)

根據(jù)效果圖，分析這個頁面向我們展示了什么，繪制內(nèi)容結(jié)構(gòu)圖。內(nèi)容結(jié)構(gòu)圖展示這個頁面包含哪些模塊，這些模塊如何分布。

2）版面布局

手動繪制版面布局草圖，包括導(dǎo)航、正文、尾部等位置，并標(biāo)注相應(yīng)的盒子模型設(shè)計。

[首頁 內(nèi)容頁 ]

3）代碼實現(xiàn)

根據(jù)版面布局，在HBuilder中書寫div盒子模型，設(shè)置css屬性。

根據(jù)教學(xué)設(shè)計，學(xué)生選取了他們最常用的菜鳥教程進行頁面布局分析，在本次課中完成了圖1、圖2和圖3三個部分：

3 案例反思

完成本次課后，讓學(xué)生根據(jù)自己的頁面設(shè)計，手動畫框書寫布局，書寫完成后再在HBuilder軟件中實現(xiàn)。在添加了這一教學(xué)設(shè)計后，學(xué)生的頁面效果很快就能達到自己的要求。本次課前，我已經(jīng)預(yù)設(shè)到學(xué)生會出現(xiàn)的問題，但是在實施過程中，發(fā)現(xiàn)準(zhǔn)備的內(nèi)容仍舊滿足不了預(yù)期的效果。課堂教學(xué)是動態(tài)的，精心的設(shè)計下，總有想不到的狀況發(fā)生。但正是這種意外，讓我積累了更豐富的經(jīng)驗。

頁面布局在操作技能上看似簡單，但是實際應(yīng)用中仍舊有很多需要注意的地方，學(xué)生在日常的課堂中暴露出問題。教師通過引導(dǎo)幫助他們解決問題，內(nèi)化成實際操作的信息素養(yǎng)。希望在一次次的案例書寫中，能推進學(xué)生的進步，讓學(xué)生不僅學(xué)會技術(shù)，還能升華JavaWeb網(wǎng)頁前端的設(shè)計理念。

參考文獻：

[1] 陳承歡.HTML5+CSS3網(wǎng)頁設(shè)計與制作實用教程[M].北京：人民郵電出版社，2018.

[2] 高葵，付曉翠，李蔚妍.基于CSS+Div的盒模型網(wǎng)頁精確布局方法研究[J].電腦知識與技術(shù)，2020，16（27）：191-193，204.

【通聯(lián)編輯：王力】