网页设计课程的教学反思

精彩的“陷阱”是成功的一半

《网页设计之div盒子的定位》教学反思

Div盒子模型是CSS控制页面时一个十分重要的知识点，其定位方法则是重中之重。学生在掌握了盒子模型的概念、组成、作用等基本知识之后，就面临着如何在页面中为各盒子进行合理的排版，以实现丰富的页面效果的实际需求。本节课围绕该问题而展开，以任务驱动的形式带领学生在不断地发现问题，分析问题，解决问题的过程中，体验两种不同的定位法为div盒子排版所带来的神奇变化。

课程开始时，我便和学生一起，结合上次课某学生的课堂作品文件，对div盒子的基础知识做简要的回顾，同时引导大家在该“问题作品”文件中寻找不足，即所有盒子都是按照标准流的方式，在浏览器窗口中由上而下依次排列。而实际上这种排列方式有其局限性，会导致网页页面效果“刻板”，且浪费页面空间。此时，我再打开一份已经过合理定位后的同作品文件，让学生注意观察，该文件中各盒子的排列已经发生了巨大变化，整个页面已变得十分美观。通过这种导入方法，让学生在发现自己的作品中存在问题的同时，又欣赏到了定位之后的文件效果，由此产生“改变现状”的强烈愿望。至此，成功引入div盒子定位的概念。

在接下来的教学活动中，我结合ppt与板书简单介绍了何为盒子的定位，其定位的两种方法：float与position。然后针对导入时利用的“问题作品”，演示如何利用float属性解决其中一部分问题，再将该

“问题作品”源码和包含任务说明、实现的效果、操作提示的“任务书”下发给每位学生，让他们利用float知识解决现有问题，实现既定的效果文件。待学生基本完成该任务后，我再次抛出另一小任务：将左右两个盒子的位置对调。当听到该任务后，我发现有部分学生在窃喜，并且以非常快的速度完成了任务，然后纷纷让我去检查。其实此时他们已“成功”地掉入了我提前设计好的“陷阱”。我假装十分严谨地检查了几个学生的作品后不做评价，并将全班的屏幕收回，让其中某一位学生的作品呈现在所有人面前，同时提出问题：该同学是否真的实现了我要求的效果？此时讨论声起，大家各抒己见。我见机向全班演示了该操作过程，并将操作结果定格，提醒大家注意：我们确实可以利用float属性将左边盒子定位到右边，但这里所谓的右边到底是指谁的右边？它又是否是我们需要的右边？此时同学们会发现，答案是否定的，左盒子这时在浏览器最右边，与上边的盒子无法对齐，需要在此基础上，再向左侧移动一定的距离。

分析了问题所在与解决方案之后，我再次抛出了小任务：请大家按照刚才的分析思路，解决现在的问题，实现效果。这时全班都犯难了，几乎听不到敲击键盘的声音。我趁机装作很“纳闷”的样子，反问大家，怎么都不动了？这时旁边有声音传来，“老师，我们不知道怎么给左盒子移动一定的距离。”

“哦，对了，我忘了告诉大家移动的方法了！”此时换成是我窃喜了，因为我再次将他们置身于知道问题所在，却没办法解决的境地。这时我便开始介绍position中相对定位的方法，并演示了具体的操作

步骤后，将余下的任务交给全班，另外对学有余力的学生提出了更高的要求，即利用相对定位实现更为丰富、复杂的页面效果，而绝大部分学生都非常成功地实现了既定的效果。

这节课在一个个环环相扣的任务中完成，效果在总体上比较理想。但有众多细节问题需要自己推敲反思。如，有极少部分学生因基础差，跟不上“队伍”，直到课程快结束时，仍在琢磨第一个任务如何完成。这跟我没有全面考虑学生因素有关，我应做到“区别对待”，对不同级别的学生给与不同难度的学习任务，如此不但能防止某些学生因跟不上节奏而放弃学习，还能激发他们的学习兴趣，获得成就感。另外，对课程内容中的“相对定位方向的确定”这一知识点的解释不够到位，导致很多学生要么不会做，要么只是强行记忆。其实，该知识的介绍除了利用传统的ppt和板书工具外，还可以利用交互性较好的flash小动画来演示，这样学生能够更加直观地了解left、right、top、bottom四个方位属性的意义所在。

本文来源：https://www.bwwdw.com/article/vdz5.html