孫姍姍

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

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

中圖分類號(hào)：G642? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：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)頁的第一個(gè)環(huán)節(jié)。

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

2 案例描述

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

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

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

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

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

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

2）版面布局

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

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

3）代碼實(shí)現(xiàn)

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

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

3 案例反思

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

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

參考文獻(xiàn)：

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

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

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