“無從下手”的頁面布局教學案例

孫姍姍

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

關鍵詞：界面設計;頁面布局;教學案例

中圖分類號：G642? ? ? ? 文獻標識碼：A

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

1 案例背景

學生在學習Web前端課程之前就已經接觸了豐富多彩的網頁，各具特色的網頁頁面很容易激發學生的學習興趣，本學期這門課前期的學習一直很順利。在學習基本的標簽和盒子布局后，就到了正式的頁面制作環節，頁面布局是制作網頁的第一個環節。

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

2 案例描述

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

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

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

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

1）內容結構

根據效果圖，分析這個頁面向我們展示了什么，繪制內容結構圖。內容結構圖展示這個頁面包含哪些模塊，這些模塊如何分布。

2）版面布局

手動繪制版面布局草圖，包括導航、正文、尾部等位置，并標注相應的盒子模型設計。

[首頁 內容頁 ]

3）代碼實現

根據版面布局，在HBuilder中書寫div盒子模型，設置css屬性。

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

3 案例反思

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

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

參考文獻：

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

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

【通聯編輯：王力】