基于“对分课堂”的《网页设计与制作》课程教学改革实践研究精品.doc

第 PAGE 页 基于“对分课堂”《网页设计与制作》课程教学改革实践研究 　　一、“对分课堂”概述 　　所谓“对分课堂”，它在形式上把课堂时间一分为二，一半留给教师讲授，一半留给学生进行讨论，实质上在讲授与讨论之间引入一个心理学内化环节，让学生对讲授内容进行吸收之后，有备而来参与讨论，通过对讲授与讨论有机整合，实现了“教法”与“学法”对立统一。 　　二、基于“对分课堂”教学设计 　　以网页设计与制作课程“浮动与定位”内容为例，设计一个对分教案。 　　教学目标及基本要求：要求学生初学者能够熟练地运用浮动与定位进行网页布局，掌握清除浮动几种常用方法，为后面学习网页布局打下良好基础。 　　教学重点：清除浮动几种方法、overflow属性、相对定位与绝对定位应用。 　　教学难点：当浮动元素对周围其他元素产生影响时，如何选择恰当方法清除浮动。 　　教学方式：对分课堂、教师讲授、多媒体演示 　　教学过程： 　　（一）复习讨论（20分钟） 　　上节课布置课下任务是制作一个横向导航菜单（多媒体展示效果图）。 　　环节一：对上节课布置作业，学生以小组为单位进行互相点评，查看各自优缺点，并加以修改，并每组都要记录下小组成员在做作业过程中遇到主要问题。 　　环节二：每组对做作业过程中遇到问题进行发言，其他小组成员可以给予答复。 　　环节三：对大家讨论遗留问题，通过多媒体演示教学进一步讲解，解决学生在制作导航栏时遇到没有解决问题或者疑问。 　　环节四：对布置作业进行总结，知识点归纳，让学生进一步巩固上节课所学。主要包括以下几点： 　　1.浮动属性应用 Float：left/right/none 　　2.如何清除浮动对子元素影响 Clear：left/right/both 　　3.如何清除浮?佣愿冈?素影响Overflow：hidden； 　　4.分清楚哪些标记是块状元素，哪些是行内元素 　　常见块状元素：div、p、h1-h6、ul、li、ol、form 　　常见行内元素：a、span、img、input 　　5.行内元素与块状元素转化Display：block/inline/i nline- block/none 　　6.列表如何去掉项目符号或者数字编号List-style：none； 　　（二）导入新课（5分钟） 　　1.借助多媒体展示，相关网站导航菜单，有些是与上节课布置作业一样导航，水平一次导航，有些是应用二级导航菜单，那如何在一级导航基础上制作二级导航？ 　　2.提出制作二级导航菜单需要解决问题： 　　（1）如何添加二级菜单，用什么标记，在什么地方添加 　　（2）如何设置二级菜单隐藏 　　（3）如何设置鼠标经过一级导航时显示二级菜单 　　（4）如何设置二级导航菜单与一级导航左侧对齐 　　（5）如何设置二级导航不被下方元素遮挡 　　带着问题引入我们要讲授新知识：元素定位属性。 　　（三）讲授新课（20分钟）（主要通过相关案例来完成知识点讲解） 　　元素定位属性 　　元素定位属性主要包括定位模式与边偏移两部分。 　　定位模式 　　在CSS中，position属性用于定义元素定位模式，其基本语法格式如下： 　　选择器{position：属性值；} 　　在上面语法中，position属性常用值有四个，分别表示不同定位模式，具体如下： 　　static：自动定位（默认定位方式） 　　relative：相对定位，相对于其原文档流位置进行定位 　　absolute：绝对定位，相对于其上一个已经定位父元素进行定位 　　fixed：固定定位，相对于浏览器窗口进行定位 　　边偏移 　　通过边偏移属性top、bottom、left或right，来精确定义定位元素位置，其取值为不同单位数值或百分比，对他们具体解释如下： 　　top：顶端偏移量，定义元素相对于其父元素上边线距离 　　bottom：底部偏移量，定义元素相对于其父元素下边线距离 　　left：左侧偏移量，定义元素相对于其父元素左边线距离 　　right：右侧偏移量，定义元素相对于其父元素右边线距离 　　常见几种定位模式 　　静态定位 　　静态定位是元素默认定位方式，当position属性取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认位置。 　　相对定位 　　相对定位是将元素相对于他在标准文档流中位置进行定位，当position属性取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素位置，但是他在文档流中位置仍然保留。 　　绝对定位 　　绝对定位是将元素依据最近已经定位（绝对、固定或相对定位）父元素进行