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

《《网页设计基础》浮动与定位教学案例研究》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、为了确保“教学点数字教育资源全覆盖”项目设备正常使用，我校做到安装、教师培训同步进行。设备安装到位后，中心校组织各学点管理人员统一到县教师进修学校进行培训，熟悉系统的使用和维护。《网页设计基础》浮动与定位教学案例研究　　摘要：浮动与定位是《网页设计基础》课程中一个教学难点，为此，笔者以任务为导向，将任务层层分解，化繁为简，从而更好地让学生理解并掌握知识点。　　关键词：HTML；浮动；定位　　中图分类号：TP311文献标识码：A文章编号：1009--0200-02　　1背景　　本教学单元的教学模式为项目导入、任务驱动和过程管理。以淘宝网项目，贯穿到整个教学过程中，然后将整个项目进行分解，以任务

2、为驱动，并在教学过程中，借鉴IT企业项目管理模式，对整个教学过程进行监控，确保完成教学目标。　　2教学案例呈现　　教学目标为了充分发挥“教学点数字教育资源全覆盖”项目设备的作用，我们不仅把资源运用于课堂教学，还利用系统的特色栏目开展课外活动，对学生进行安全教育、健康教育、反邪教教育等丰富学生的课余文化生活。为了确保“教学点数字教育资源全覆盖”项目设备正常使用，我校做到安装、教师培训同步进行。设备安装到位后，中心校组织各学点管理人员统一到县教师进修学校进行培训，熟悉系统的使用和维护。　　本次教学的知识目标要求学生掌握浮动、浮动塌陷、定位和浮动与定位的综合运用，重点是浮动与定位，难点是浮动塌陷以

3、及浮动与定位的综合运用；能力目标要求学生具备相应的专业能力、方法能力和社会能力：在专业能力方面，具备web前端静态页面开发能力；在方法能力方面，具备对知识归纳的能力；在社会能力方面，具备有效地时间管理和准确的自我评价的能力。素质目标要求学生具备积极的工作态度、团队合作能力。　　从学生认知、能力结构和心理特征来看，当前大多数学生理解盒子模型和默认标准文档流，并能熟练运用，整体学习信心高昂，团体意识较强。　　因此，为了实现本次教学目标，制定了课前预习作业；课中上机任务，并按学生水平采用分层教学；课后，布置课后作业，巩固知识。　　教学内容　　《网页设计基础》属于软件技术专业大一阶段的核心职业技术基

4、础课程，是后续Web开发课程的基础前导课程。本教学单元的学习任务是在前次教学单元完成的淘宝网页面的基础上，运用浮动和定位制作淘宝网商品详情页面，其效果图如图1所示。　　地位：浮�佑攵ㄎ皇潜敬谓萄Уピ�重点与难点，是后期进行网页布局的核心基础知识点。　　作用：浮动实现块级元素横向布局，定位实现页面元素精确定位。　　前后联系：浮动与定位是对前驱知识的提升，后驱网页布局知识的核心。　　选取理由：本次学习任务是浮动和定位综合运用，以任务驱动，让学生边做边学。为了充分发挥“教学点数字教育资源全覆盖”项目设备的作用，我们不仅把资源运用于课堂教学，还利用系统的特色栏目开展课外活动，对学生进行安全教育、健康

5、教育、反邪教教育等丰富学生的课余文化生活。为了确保“教学点数字教育资源全覆盖”项目设备正常使用，我校做到安装、教师培训同步进行。设备安装到位后，中心校组织各学点管理人员统一到县教师进修学校进行培训，熟悉系统的使用和维护。　　学情分析　　根据之前的教学反馈情况来看，学生的学情如下：　　1）大多数学生对标准文档流、块级元素、行内元素和盒子的概念掌握较好。　　2）大多数学生对盒子和文本相关属性掌握较好，但相应的英文单词掌握不熟练。　　3）大多数学生对浮动和定位可能较难理解，需要用案例分步教学，边做边学。　　教学过程　　本教学单元的师生互动教学过程分为三个阶段：课前预习、课中演练和课后巩固。　　课前

6、：制定预习任务和作业，发布预习资料，培养学生自主学习能力。　　课中：以任务为驱动，指导学生上机练习，并对学生分层教学，循序渐进。　　课后：制定课后作业，强化知识，进行教学总结，并及时解答学生疑难问题。　　课前，首先按学生水平分组，以小组为单位，进行分层教学和培养团队合作能力；然后，发布预习案例，先学后教，让学生学习起来从容不迫；其次，完成预习笔记，让学生主动学习，主动思考，从而知己知彼，轻松听课；最后，检查学生预习完成情况，从而有针对性调整教学内容和教学方法。为了充分发挥“教学点数字教育资源全覆盖”项目设备的作用，我们不仅把资源运用于课堂教学，还利用系统的特色栏目开展课外活动，对学生进行安全

7、教育、健康教育、反邪教教育等丰富学生的课余文化生活。为了确保“教学点数字教育资源全覆盖”项目设备正常使用，我校做到安装、教师培训同步进行。设备安装到位后，中心校组织各学点管理人员统一到县教师进修学校进行培训，熟悉系统的使用和维护。　　课中，首先通过一个案例复习之前所学知识，在默认标准文档流中，行内元素自左向右排列，块级元素自上而下排列；并通过另一个案例，说明块级元素可以自左向右排列或者在父级元素内部某个确定位