网页布局——CSS浮动单元教学设计

周怡燕

摘   要：广东省职业院校教学能力大赛为广东省职业院校提供了一个高质量、高水准、高要求的实践和交流平台。以赛促教、以赛促改，提高教师教育技术应用能力和综合教育教学水平，为培养新时代的高技能型人才作出贡献。文章以2019年广东省职业院校教学能力大赛一等奖作品为例，对此进行了分析。

关键词：网页设计;教学能力大赛;Web前端开发工程师;计算机信息技术专业群

互联网迅猛发展，Web前端开发工程师是目前互联网最紧缺的高技能人才，网页设计与制作能力是该职业的核心能力要求，本文以计算机信息技术专业群平台核心课程“网页设计”中网页布局—CSS浮动教学单元的教学设计为例。

1    教学分析

依据高等职业学校专业教学标准，校企协同制定人才培养方案及课程标准。选用国规教材，教师与企业专家共同开发课程，引入企业真实项目，将教材内容编排整合，进行项目化教学，共10个项目模块，本讲内容选自项目3，占2课时（见图1）。

授课对象是高职计算机信息管理专业一年级学生，熟悉信息化教学平台，具备一定的线上自主学习能力，但积极协助团队成员完成开发任务的意识较弱。经过前期系统的学习，学生已经掌握DIV布局理念、CSS盒子模型等知识，但习惯形象思维，对浮动特性的理解略感抽象;能独立制作课程教学项目中新闻页面右侧部分，但代码书写的规范性、准确性有待提高。

依据课程标准与Web前端开发工程师岗位标准，结合学生实际，确定知识目标、技能目标、素质目标。结合教学目标与教学内容确定教学重点，结合教学内容与学情分析确定教学难点。

2    教学策略与教学实施

依托国家级教学资源库、职教云、云课堂、雨课堂构建的教学平台，利用微课视频、教学动画、开发者工具开展线上、线下混合式教学。采用项目化教学法，以企业真实项目，作为课程教学项目以及项目任务，实现新闻页布局。

课堂教学在理实一体化教室，教学过程以实现“新闻页布局”为任务，共设计8个环节，以学生为中心，教师为主导，课前完成两任务，课中以团队合作、个人强化“两形式”，实现“职业素养、知识技能”“两提升”，课后以“两评价”的方式开展组织教学。下面是具体的教学组织实施过程。

（1）课前一周，教师在职教云发布两项学习任务，任务一：观看“CSS中的浮动”微课视频，自主学习CSS浮动相关属性;任务二：完成课前知识测验，检验自主学习效果。平台自动生成的测验分析数据，可发现部分学生对浮动特性没有完全理解，教师应及时调整课堂教学策略。

（2）课中教学。首先，教师对课前任务进行小结，针对学生课前在线测试中的易错题，利用教学动画，以评讲课前测验题的形式着重讲解CSS浮动属性，动画形象地展示浮动元素与非浮动元素的特性，帮助学生理解，为项目实践奠定了扎实的理论基础。然后，教师导入本次课项目任务，运用CSS浮动实现新闻页布局，并播放一段企业导师介绍网站项目开发流程的视频，引导学生思考该项目具体实施步骤。进入项目实施阶段，教师依据学生课前知识测验分数，以“高带低”原则，将学生分成5组，以团队合作的形式组织学生进行小组PK赛，教师巡回指导。各小组以团队合作的形式讨论该网页布局结构，并利用绘图软件绘制该网页布局图，完成方案制定，依据绘制出的网页布局图，利用Dreamweaver网页开发软件完成HTML编码，运用已掌握的CSS浮动属性完成CSS编码。教师巡回指导，发现各小组能运用已掌握的CSS浮动属性实现网页布局，教学重点得以解决。编码结束后，各小组分别展示并汇报项目完成情况，教师利用雨课堂发起课堂投票，结合教师评价评选出PK赛中的优胜队。随后进行点评，提出巡回指导过程中发现的问题，如代码编写过程中存在代码书写风格不规范、不严谨的情况，并进行职业素质培养。编码测试环节，教师提出测试要求，将网页中两个浮动元素的父元素高度设为自适应，学生进行编码测试，发现当网页中父元素高度设为自适应，子元素设置浮动，将对父元素产生影响，这是本课的教学难点。由于Dreamweaver在代码调试过程中难以实现网页元素定位、实时监控网页元素属性变化等功能，学生在进行代码调试的过程中遇到问题时，很难查找问题源头。基于此，教师可利用浏览器自带开发者工具示范操作两种清除浮动的解决方法，并分析对比两种方法的优劣。学生利用“开发者”工具可以适时调整网页代码，实时监控与定位网页元素属性等功能，是培养学生在代码调试过程中分析与解决问题的有力辅助。进入编码优化环节，学生结合教师讲解，尝试利用清除浮动的方法，进行代码优化，教师巡回指导时发现学生能成功解决“当父元素高度自适应，子元素设置浮动，对父元素产生影响”教学难点，使学生个人知识技能得到提升。

（3）课后拓展，教师发布课后拓展作业，在课堂项目成果的基础上实现三列布局。学生在教学平台提交作业，教师验收与考核。

本次課考核分别由课前、课中、课后3部分组成，形成过程性评价。课前知识测验占成绩的20%，小组PK赛组间互评占40%，组内互评占30%，教师评价占30%，形成多元化评价。课后作业占单元成绩的30%。综合教师、学生、平台系统的主客观考核，学生单元成绩总评平均分达到89分，有效达成教学目标，并且，学生多次在全国职业技能大赛中屡获佳绩，毕业生深受企业好评。

3    反思与诊改

（1）校企协同，无缝对接。校企协同育人，共同制定人才培养方案，以小视频的方式让企业导师走进课堂，以企业真实项目，开展项目化教学，实现教学目标与职业能力、教学内容与工作内容、教学过程与工作过程的无缝对接。

（2）“教、学、做、评”一体化模式。教学设计基于岗位工作流程，以学生为中心，利用信息化教学手段，学生课前完成“两任务”、课中以团队合作、个人强化“两形式”，实现职业素养、知识技能“两提升”，形成过程性、多元化 “两评价”，体现了做中学、做中教。“教学做评”一体化模式，可在与本专业相关的教学做一体化课堂上推广应用。

（3）以赛促教，培养新时代的工匠。以高职院校技能大赛为推手，检验人才培养质量，以严谨、规范的工作作风、精益求精的专业精神打造新时代的工匠。

实践教学发现，本课程由于学生课前自主学习中对CSS浮动知识掌握不牢，增加了课堂理论知识的讲解，缩短了课堂项目实践的时间。因此，在后续的教学中，要针对性地制作更多的教学资源用于课前，帮助学生自主学习。

4    结语

在“互联网+”、《中国制造2025》、“大数据”的时代背景下，教育教学技术与新媒体信息化技术的深度融合成为顺应时代发展的必然趋势。当代教师在教学过程中应与互联网时代接轨，确保教学合理、科学，不断改革教学设计，实现以学生为中心、教师为主导的教学模式。积极参与教学能力大赛，以赛促教、以赛促改，提高教师教育技术应用能力和综合教育教学水平，为培养新时代的高技能型人才作出贡献。