“无从下手”的页面布局教学案例

孙姗姗

摘要：一个好看的网页页面离不开界面设计，页面布局是网页页面实现中一个比较重要的环节，只有掌握好页面布局，页面才能达到设计效果。本案例针对学生日常存在的问题，寻找合适的解决方案，解决页面布局中存在的常见问题。

关键词：界面设计;页面布局;教学案例

中图分类号：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.

【通联编辑：王力】