孙姗姗

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

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

中图分类号：G642        文献标识码：A

文章编号：1009-3044（2021）13-0096-02

1 案例背景

学生在学习Web前端课程之前就已经接触了丰富多彩的网页，各具特色的网页页面很容易激发学生的学习兴趣，本学期这门课前期的学习一直很顺利。在学习基本的标签和盒子布局后，就到了正式的页面制作环节，页面布局是制作网页的第一个环节。

鉴于年龄特点和以往学习经历，学生在实际操作中会忽视掉整体布局的重要性，等发现内容展示位置不够时再修改布局，导致整个页面布局混乱。在教学之前我已经预设到学生会急于添加图片文字等效果而忽视布局的这个重要问题，所以在教学设计中，不断渗透任务筹划的思想。采用任务驱动的教学方法，组织学生进行网站制作需求分析。在需求分析后，提供给学生大量的优秀网站进行观摩分析，进而通过Photoshop设计出简易的页面效果。学生到设计部分都很顺利，但是在HBuilder软件中实现页面布局时，却出现了很大的问题。

2 案例描述

在页面布局实现时，我要求学生先布局再填充内容，可是html中灵活的布局方式让学生无从下手，总是达不到自己想要的效果。有的学生出现间隔、留白不够或過多，有的学生出现布局框到不了自己想要的位置，有的学生出现嵌套等问题。……