应用滑动门技术制作网页导航背景(教学设计方案)

1应用滑动门技术制作网页导航背景教学设计方案课程名称：《DIV+CSS网页布局》课程类型：专业基础课所属专业：计算机类（590100）授课对象：高职高专计算机应用技术、计算机网络技术、软件技术等专业一年级学生一、教学内容教学内容源自高职计算机类专业《DIV+CSS网页布局》课程，“滑动门技术”是该课程“网页导航制作”项目的教学难点。本次微课的教学内容主要包括：滑动门技术在网页导航中的应用；滑动门技术的原理；滑动门技术的实现方法与过程；滑动门导航的HTML结构；滑动门导航的CSS样式设计方法；2二、教学目标本次微课的教学目标，是使学生掌握利用滑动门技术实现网页导航背景图片宽度自适应的方法，即通过导航背景图片的交错、重叠，使导航背景图片的宽度能够根据导航文字的增加或减少而实时变化。通过案例分析、动画模拟、操作演示等教学手段，使学生理解滑动门技术的原理、实现方法与过程，掌握滑动门导航HTML结构的搭建，以及CSS样式的设计方法。三、教学重点、难点重点：利用Dreamweaver软件对滑动门导航的CSS样式进行设计；难点：滑动门技术的原理与实现方法。四、配套教材《网页设计与布局项目化教程（HTML+CSS+DIV）》，人民邮电出版社，2013年9月第1版，温谦、周建国、练源等主编。五、教学策略根据任务驱动教学法“创设情境—确定问题（任务）—自主学习—效果评价”的基本思路，利用现代信息化技术，以任务为主线、学生为主体，对教学难点的教学进行精心设计，引导学生主动参与、自主协作、探索创新。精心挑选与设计教学案例，使其兼具典型性、实用性、趣味性，激发学生学习兴趣，培养学生分析问题、解决问题和动手实践能力。六、教学环节作品通过创设情境、确定问题、探索解决方案、模拟实现、解决问题、技术拓展、课后练习等7个教学环节，引导学生自主学习。3教学环节主要内容时间创设情境通过真实的购物网页案例，创设真实工作情境，引发学生思考，如何实现导航背景图片宽度的自适应；0.5分钟确定问题采用案例对比的方法，提炼真实工作情境中所需要解决的技术难题与其关键点；1分钟探索解决方案通过动画对滑动门导航背景的制作过程进行模拟，化难为简，使学生理解实现的关键思路与方法；1.5分钟模拟实现通过立体的模拟动画，立体、形象、清晰的演示导航制作过程；1分钟解决问题在Dreamweaver软件中详细演示滑动门导航制作的完整过程，并通过真实网站案例，演示滑动门技术在不同场合的应用效果；5分钟技术拓展对滑动门技术进行拓展，通过苹果手机更新换代的案例，引发学生思考滑动门技术的改进方法；0.5分钟课后练习布置课后练习题，要求学生利用教师提供的素材，实现网页背景高度的自适应。0.5分钟七、教学过程设计（一）创设情境通过真实的购物网页案例，创设真实工作情境：对比两种不同的导航，引导学生思考，作为网页设计人员，遇到网页导航文字个数各不相同的情况，应该如何设计？4（二）确定问题1.提问：利用传统方法制作导航，即为每个宽度不同的导航分别制作背景图片，会引发什么问题？2.解答：图片过多使网页文件臃肿，下载速度慢；导航文字一旦发生变化，重新修改网页工作量大，不灵活。3.确定问题：如何制作背景宽度能够自动适应文字变化的导航。（三）探索解决方案1.平面动画演示：模拟日常生活中的“滑动门”，门的打开和关闭会使两扇门的重叠区域变小、变大。2.初步解决方案：利用两张背景图片，通过图片的“滑动”，使图片的重叠区域变小、变大，主动适应导航文字的个数。3.细化解决方案：进一步细化解决方案，演示如何根据导航文字划定导航区域，演示两张图片的显示部分和隐藏部分，以及利用CSS样式的填充属性，保证图片边缘的圆角图案不被覆盖。54.导航HTML结构的搭建：根据解决方案，设计导航的HTML代码，即在导航超链接标签a内部，增加一对span标签。通过为两个标签分别设置背景图片，实现两张背景图片的重叠。（四）模拟实现1.动画模拟：通过动画，演示滑动门导航的具体实现过程与技术细节。通过动画模型，使平面的网页导航立体化，使抽象的原理具体化，使枯燥的HTML代码和CSS样式形象化，使繁琐的步骤清晰化。（五）解决问题1.操作演示：在Dreamweaver软件中，详细演示导航HTML代码的编写，以及导航相关CSS样式的设计，让学生掌握滑动门导航制作的完整过程。62.总结：总结滑动门技术的关键。通过两个网页案例，演示滑动门技术在不同场合的应用效果。（六）技术拓展滑动门技术实现了网页导航背景图片横向（宽度）的自动变化。通过改进，该技术可应用到背景图片纵向（高度）自动变化的场合。（七）课后练习：布置课后思考与练习题，要求学生利用教师提供的素材，实现网页背景高度的自适应。