《网页设计基础》浮动与定位教学案例研究

王亮

摘要：浮动与定位是《网页设计基础》课程中一个教学难点，为此，笔者以任务为导向，将任务层层分解，化繁为简，从而更好地让学生理解并掌握知识点。

关键词：HTML；浮动；定位

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）03-0200-02

1 背景

本教学单元的教学模式为项目导入、任务驱动和过程管理。以淘宝网项目，贯穿到整个教学过程中，然后将整个项目进行分解，以任务为驱动，并在教学过程中，借鉴IT企业项目管理模式，对整个教学过程进行监控，确保完成教学目标。

2 教学案例呈现

2.1 教学目标

本次教学的知识目标要求学生掌握浮动、浮动塌陷、定位和浮动与定位的综合运用，重点是浮动与定位，难点是浮动塌陷以及浮动与定位的综合运用；能力目标要求学生具备相应的专业能力、方法能力和社会能力：在专业能力方面，具备web前端静态页面开发能力；在方法能力方面，具备对知识归纳的能力；在社会能力方面，具备有效地时间管理和准确的自我评价的能力。素质目标要求学生具备积极的工作态度、团队合作能力。

从学生认知、能力结构和心理特征来看，当前大多数学生理解盒子模型和默认标准文档流，并能熟练运用，整体学习信心高昂，团体意识较强。

因此，为了实现本次教学目标，制定了课前预习作业；课中上机任务，并按学生水平采用分层教学；课后，布置课后作业，巩固知识。

2.2 教学内容

《网页设计基础》属于软件技术专业大一阶段的核心职业技术基础课程，是后续Web开发课程的基础前导课程。本教学单元的学习任务是在前次教学单元完成的淘宝网页面的基础上，运用浮动和定位制作淘宝网商品详情页面，其效果图如图1所示。

地位：浮動与定位是本次教学单元重点与难点，是后期进行网页布局的核心基础知识点。

作用：浮动实现块级元素横向布局，定位实现页面元素精确定位。

前后联系：浮动与定位是对前驱知识的提升，后驱网页布局知识的核心。

选取理由：本次学习任务是浮动和定位综合运用，以任务驱动，让学生边做边学。

2.3 学情分析

根据之前的教学反馈情况来看，学生的学情如下：

1） 大多数学生对标准文档流、块级元素、行内元素和盒子的概念掌握较好。

2） 大多数学生对盒子和文本相关属性掌握较好，但相应的英文单词掌握不熟练。

3） 大多数学生对浮动和定位可能较难理解，需要用案例分步教学，边做边学。

2.4 教学过程

本教学单元的师生互动教学过程分为三个阶段：课前预习、课中演练和课后巩固。

课前：制定预习任务和作业，发布预习资料，培养学生自主学习能力。

课中：以任务为驱动，指导学生上机练习，并对学生分层教学，循序渐进。

课后：制定课后作业，强化知识，进行教学总结，并及时解答学生疑难问题。

课前，首先按学生水平分组，以小组为单位，进行分层教学和培养团队合作能力；然后，发布预习案例，先学后教，让学生学习起来从容不迫；其次，完成预习笔记，让学生主动学习，主动思考，从而知己知彼，轻松听课；最后，检查学生预习完成情况，从而有针对性调整教学内容和教学方法。

课中，首先通过一个案例复习之前所学知识，在默认标准文档流中，行内元素自左向右排列，块级元素自上而下排列；并通过另一个案例，说明块级元素可以自左向右排列或者在父级元素内部某个确定位置上出现，通过两个截然不同现象对比，抛出问题，引入本节所要学习的知识点—浮动与定位。

整个课中教学过程，分为引入案例，素材准备，网页制作和点评学生等四个阶段，各阶段说明和时间分配如表所示。其中，网页制作任务分解为7个步骤，由简入繁，步步推进，配以讲解和提问，加深学生理解和掌握，并事先根据学生预习反馈的情况，制定了每个子任务的难度等级，从而为分层教学提供实施依据。最后，通过点评学生上机完成任务，总结优缺点，以激励学生不断进步。

课后，针对本次学生上课和作业完成情况，及时进行教学总结，以便为下次上课做好针对预案，通过本次课发现，多数同学编码命名不规范和注释较少，喜欢动不动就问，自我解决问题能力较弱，部分同学对浮动和定位理解不清，对专业单词不熟练。这表明，在下次上课前，需要学生继续加强课前预习和课后复习，早自习多读写单词。

2.5 教学方法

本教学单元引入课程的方法是引入案例、案例演示、边做边学。

l 引入案例：引入具体要实施的项目案例，明确学习任务；

l 案例演示：将知识点贯穿到每个任务中，并演示，边讲解；

l 边做边学：以任务为驱动，将案例分解，由繁到简，边做边学。

为了更好地让学生完成学习任务和掌握知识点，将整个任务拆解成7个步骤：

l 步骤1：基于上次学习任务，首先完成父级盒子和两个子级盒子的创建。

l 步骤2：通过浮动属性实现两个子级盒子左右横向排列，并同时抛出问题：为什么两个盒子浮动后，会导致父级元素的高度变成了0，造成浮动塌陷现象？旨在启发学生思维，透过问题现象抓到问题本质。

l 步骤3：通过多种方式清除浮动塌陷，并同时提出问题，进行强调和小结。

l 步骤4：添加网页文字和图片。

l 步骤5：添加网页文字样式。

l 步骤6：通过相对定位和绝对定位，添加半透明文字说明栏，并提出问题，让学生理解两者实质区别。

l 步骤7：通过固定定位实现网页中的广告栏，并提出问题，让学生搞清固定定位的特点。

参考文献：

[1] 李洁. 高职高专“网页设计”课程教学探索及研究[J]. 广西科技师范学院学报， 2016， 31（3）：117-120.

[2] 田红玉. DIV+CSS布局在网页设计教学中的应用[J]. 信息与电脑：理论版， 2016（2）：254-256.