第一篇：网页课程教学总结
《Dreamweaver网页制作案例教程》课程教学总结
2011-2012学年第二学期
本学期我担任了《Dreamweaver网页制作案例教程》这门课程，是10级计算机信息管理和计算机网络技术专业的专业课程，在教学中我从教学重点、教学内容、教学方法、考核形式等各方面做了重大的改革，逐步形成了一套具有鲜明职业教育特色的教学模式，已案例教学为主导，提高了学生的学习兴趣，激发了学生的学习积极性和自主性；另一方面缩短了教学与实践的差距，学生在课程中训练的就是以后在实际工作中所运用的，大大提高了学生的岗位能力，变理论为操作，符合职业教育注重操作和动手能力培养的目标要求，在教学中取得了良好的教学效果。
通过本课程的学习，使学生了解网页制作的相关知识，掌握dreamweaver软件的特点，掌握网站站点的建立，网页的制作和设计。为学生通过计算机网页国家三级、继续学习专业知识和提高职业技能打下基础。
通过一个学期对10计算机专业的课程教学，在课程的教和学两个方面均具有一定的效果。在课程的“教”方面，主要采用课程的“教”和“练”两种方式的结合，对于课程的“教”方面主要采用的是多媒体教室运用幻灯片授课，有针对性的对课程基本原理、网页制作进行讲解，老师操作，学生听讲，同时采用试验与授课分开，并且在课程的实验教学方面主要采用独立于课堂外的操作方式进行，而对于课程的“练”主要实施于课程的教学过程中和课程教学过程后，对于课程的教学中主要是采用课程内容的例题讲解和习题讲解，而对于课程教学后的“练”主要是指在完成课程的内容教学后布置一定的课后作业。同时在完成课程“教”的同时，也积极地针对学生的课程疑惑安排一定的时间进行及时地解答。
本学期，本人持着认真负责的态度，课前认真备好每一堂课，课中积极投入，充分调用每个同学的学习积极性，课后认真地批改每一份作业。而班级的大部分学生学习态度端正，学习认真刻苦。由于课程“教”和“学”的积极配合，使得该课程的“教”和“学”均获得了一定的效果。在学生的课程学习方面，课堂上班级的大部分学生能够保持安静良好的课堂环境认真听讲，并积极配合课堂教师完成课堂教学工作，在课后，大部分学生能够认真地完成教师布置的各项教学任务。本班学生大部分学习态度端正，课堂纪律良好，积极配合课堂教学。但部分学生已对这门课程的认知还有差距，对课程不够重视，特别部分同学认为这门课程没有新意，虽然通过这门课程学习会发现他有明显提高，但仍认为学的不够深入。另外，个别学生学习自主性较差，自学能力差，对课堂教学过于依赖，课下很少预习复习，有的连作业都无法独立完成。
不足方面与建议：
在实践教学部分，应加强对同学的监控，特别是对学习不积极主动的同学，保证其按质按量完成实训任务，从而提高实践教学效果。建议在大二上或大一下开设这门课程，是学生掌握技能的同时，也能为通过国家网页制作计算机三级做好准备。同时本课程操作性比较强，建议多增加上机课，考试形式也可适当增加上机考试。
第二篇：浅谈网页设计课程教学
浅谈网页设计课程教学
摘要：网页设计课程是计算机和艺术的交叉学科课程，应注重将技术和艺术相结合起来进行教学。本文针对“网页设计 ”课程的特点，结合实践应用，阐述在教学方面的一些体会。
关键词：网页设计，教学方法
Abstract: website design course is a cross computer science and artistry course, it is need to combine teaching methods of these subjects.this paper is to base on the feature of “website design” course and practice , to give some opinion about teaching.Key words : website design, a teaching method
一、引言
《网页设计》课程是职业院校计算机类专业及电子商务专业的一门专业课程，也是一门实践性很强的职业技术课程。由于《网页设计》课程实践性和更新性很强，该课程如果采用传统的教学方式，那结果是不理想的。在这里结合自身的实际经验，谈谈网页设计课程的教学。
二、教学策略
1．课程特点
网页设计课程是计算机和艺术的交叉学科课程。在教学过程中，除了要求学生掌握基本的技术外，也必须对艺术设计有一定的了解。网页设计应注重技术和艺术的统一性。在进行网页设计时，应考虑网站的总体结构，风格定位，色彩的应用，版式的设计等方面的因素，力求形式与内容的统一，让网页的显示达到快捷，美观的视觉效果。
2．教学方案
要设计一个好的网页作品，首要的因素不是创新，而是“用户体验”，第一步应该站在用户的角度去考虑设计方案，所有的形象风格都必须服从主题，服务用户。这就对网页的整体形象有了较高的要求，整体形象包括版式设计，色彩的应用，logo设计，素材设计，广告设计，web图像设计及优化，交互方式等等。在教学时，我们可以结合实际，要求学生从版式布局设计和网页元素的处理及色彩搭配三方面着手，归纳如下：
（1）版式设计
网页的美感来源于网页的版式设计，它突出了网页设计的艺术性和个性，属于网页的艺术设计，好的版式设计会使得网页显得更具有美感和创意。网页的版式设计是基于内容的，应该从实用性和艺术性考虑。网页内容一定要主次分明，中心突出；导航要清晰；可以图文并茂，是网页显得生动和活跃。除此以外，网页的版式设计要符合统一、分割的原则。统一即指整个网站版式风格的统一性、整体性；分割即指要科学的划分整个页面。
网页的版式设计主要是表格、层等技术的应用。表格是一种最简单的布局手法，它可以将图像和文字做最恰当的编排，达到清晰易懂的效果。层（div）的布局，是现在正当流行的排版手法，它主要应用相对位置等的关系进行准确定位，再加上层叠样式表的辅助，突出了它对网页的设计具有可扩展的优势。
文字是网页内容的主要载体，所以文字的视觉效果在版式设计中也起着关键的作用。文字的设置可以分为字体、大小、颜色、行距等，通过这些属性设置，使文字排列得整体和美观。但要注意的是中文字体和英文等其他字体的设置，是有一定区别的。英文的字体有很多的选择，但中文的正文字，总的来说，就两种：宋体和黑体。在传统的版式设计中，大家都还是倾向于英文的排版，从视觉上来看，英文字体更有韵律性，因为每个字母本身高矮不一致；但是中文字体相对来说，就显得单调和独立些，所以在设计时，这两种文字要作不同的处理。另外，也不要选择一些非常特殊的字体，除非用户的浏览器认识这些特殊字体，否则将会出现乱码。如果遇到非要使用特殊字体的情况，可将文字转换成图片再将其应用。对于字号而言，单位应采用em，而不是px，这点在使用层叠样式表（css）时尤为重要，还要注意的是em和px是有差别的，所以在使用的时候也要对上号，否则也达不到预先的视觉效果。文字一行的字数最好不超过50字，首页的标题在10-20字为佳；行距一般使用的是20-22像素的行距，这样使得整个的文字内容部分不会显得太紧凑或者太松散。文字的整体排列一般有四种基本形式：两端对齐、居中对齐、左对齐或右对齐、图文环绕排列。在整个网页版式设计中，标题文字的设计原则应该是“醒目而不夸张”。
导航栏的设计在网页设计中也很重要，它对整个网站内容有提纲和导航的作用，在设计的时候，要注意首先导航栏的风格也要和整个网页风格保持统一，另外最好采用文字，因为网络的速度可能会影响图片的正常下载；不过现在flash按钮的导航栏已经成为时尚，它可以实现丰富的动感效果。
（2）网页元素的处理
网页元素包括logo、按钮、图片、动画、声音、banner等。在网页中包含这些对象时要注意的有：首先是logo的设计，logo代表了整个网站或者企业的文化，一个有特色、具有视觉冲击力的logo，可以直接影响浏览者对网站的判断，给浏览者留下记忆深刻的印象。其次，要确保网页上的每一个元素都有存在的必要性，不要使用冗余的技术和内容；再次，要保持形式和内容的统一；最后，要尽量的使网页具有快捷性。对于网页的特效技术，最好采用javascript或css技术来实现。
（3）色彩的处理
并非所有的颜色都能应用于网页，网页中的颜色会受到硬件、浏览器等的影响，即使网页中使用了非常合理、非常漂亮的配色方案，每一位用户所看到的效果也不一定相同。所以，最好使用使用网页安全色来避免和解决这种问题。网页安全色是指在不同的硬件环境和软件环境下都能在浏览器上正常显示的颜色，并且现显示的效果都一样，不会出现失真的现象。在页面设计中，整个网页的色彩种类最好不要超过3种，一种或者两种主体色，其他为辅助色。颜色种类太多，会让人觉得很杂乱。另外，文字内容和网页的背景颜色的对比要做到突出，比如：背景为深色，则文字的颜色可以选取浅色调；背景为浅色时，文字颜色就应该深些；这种深浅的变化在色彩学中称为“明度变化“。比如有些主页，背景色和文字颜色都采用的是深色，由于色彩的明度较近，所以浏览者来浏览阅读的时候，会感觉吃力，从而影响阅读；但是色彩的明度变化也不能太大，明度变化大会导致亮度的反差强，让人觉得很刺眼，同样会影响整个网页的视觉效果。在进行颜色搭配时，还要注意的是：第一，采用的颜色应具有联想性，不同的色彩会产生不同的联想，所以色彩的选取也要和网页的内涵有关。第二，色彩的合理性。根据网页的主题的不同，选取相应的色彩，比如红色，可以体现出网站的热情和喜庆；蓝色可体现出科技的气息等。第三，色彩要有鲜明性，这个才能给浏览者深刻的印象，并有耳目一新的感觉。
（4）网页赏析
在教学过程中对学生的引导是非常重要的，设计网页得多看多学，网页设计的技术和风格在日新月异地变化，所以在提高学生设计技术的同时，还要多培养学生的审美能力，知道怎么设计才是一个好的网页。创建网页是一个不断学习的过程，在看一个网站的时候，找到这个网站的优点缺点，注意哪些是可以借鉴的，哪些是需要避免的，在看的同时，可以看些成熟的网站，也可以看些成长中的作品，在同期的比较中，也有助于自身的提高。另外，鼓励学生看源文件，了解某些效果是如果实现的，在效仿的同时进行改进和创新。
（5）考核方式
网页设计课程的考核应该打破传统的考试方式，建议采用机考的方式，学生通过一学期的学习，应能自行设计各种网页，熟练掌握其基本制作方法和技巧，在规定的时间内设计网 页。这也是一种对提高学生动能能力的一种鞭策方法。
三、结束语
在网页设计课程教学中，应当充分认识到网页设计课程的特点，结合实际，采取相应的教学措施和方法完成教学任务，以达到良好的教学效果。对于信息科技迅猛的发展今天，必须摒弃陈旧的教学理念，及时提高自身的专业水平，完善自身的教学理念，寻找更好的教学方法，激发学生的学习兴趣，培养学生追求新知的能力和动手实践的能力，从而达到学以致用的效果。
参考资料： 田博文，《Dreamweaver8基础培训教程》，人民邮电出版社，2007年2月
孙素华，<< Dreamweaverms2004完美网页设计>>，中国青年出版社，2005年10月
第三篇：网页设计课程总结
网页设计课程总结
摘要：自从第一个网站在上个世纪 90 年代初诞生以来，设计师们尝试了各种网页的视觉效果。早期的网页完全由文本构成，除了一些小图片和毫无布局可言的标题与段落。然而，时代在进步，接下来出现了表格布局，然后是 Flash，最后是基于 CSS 的网页设计。很有幸的,这学期跟着老师学习了网页课程设计，了解了网页设计的基础知识，会制作简单的小网页。
关键字：基础知识原则要点软件发展方向主流技术 发布与维护 网页设计基础知识
说起网页，不得不提几个和它相关的名词。
（1）WWW 又称万维网，也可以简称为WEB或3W，是一种建立在INTERNET上的庞大的基于超文本的网络信息系统，具有全球性、交互性、动态性、跨平台、分布式等特点。
（2）www浏览器是专门用来定位和访问WEB信息的应用程序或工具软件。常用的浏览器软件包括Microsoft公司的Internet Explorer和Netscape公司的Navigator.ta.（3）WWW服务器是对浏览器的请求提供服务的计算机及其相应的服务程序。网
页提供者将制作和的网页存放在服务器上供用户浏览。采用客户机/服务器的工作模式。
（4）超文本与超媒体是WWW的信息组织形式。在WWW系统中，信息是以一种非
线性的超文本方式组织的。
（5）超链接在本质上属于网页的一部分，它是一种允许我们同其他网页或站点
之间进行连接的元素。
（6）URL统一资源定位器是对Internet上资源的一种准确的定位机制，它以
一种全世界统一的唯一标识来确定某个网络资源，可以访问Internet上任何一台主机或者主机上的文件。
（7）搜索引擎是一个对Internet上的信息资源进行搜集整理，并供用户快速
查询的系统。
（8）网页是构成WEB站点的基本单位，是一种包含HTML格式内容的文本文件，它存放在INTERNET上的WWW服务器中，当用户在客户端浏览器中输入网址发出
请求时，就被快速传送到客户机上，经过浏览器解释，在窗口显示丰富多彩的网页内容。
网页设计中应遵循的原则
1、页面内容要新颖 网页内容的选择要不落俗套，要重点突出一个“新”字
2、网页命名要简洁 在给网页命名时，最好使用自己常用的或符合页面内容的小写英文字母，这直接关系到页面上的连接。
3、要及时更新网页
因为网页制作是一时的，而维护更新的工作是每天都要做的。要及时把网页上已经作废的连接应该立即删除掉，4、注意视觉效果
设计Web页面时，一定要用不同于1024*768的分辨率来 分别观察。
5、随时注意网站升级 时刻注意网站的运行状况。性能很好的主机随着访问人数的增加，可能会运行缓慢。
6、网页内容要易读
必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合。一般来说，浅色背景下的深色文字为佳。，7、善用表格来布局 要注意多用表格把网站内容的层次性和空间性突出显示出来，使人一眼就能看出你的网站重点突出，结构分明。
8、少用特殊字体 在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。
9、多学习和使用HTML 为了成功地设计网站，你必须理解HTML是如何工作的。还有一些小细节：尽量少用Java程序，少放网站地图，要为图片附加注释文字，做个网站介绍，考虑浏览器的兼容性，不宜多用闪烁文字，每个页面都要有导航按钮，避免长文本页面，网页风格要统一，动画最多只用一个，善用图像，网站导航要清晰，最好不用记数器，不能忽视错别字，不要用框架，使用著名的插件，使网站具有交互功能等
网页设计要点
一、确定网站的整体风格
1．将你的标志logo，尽可能的放在每个页面上最突出的位置。
2．突出你的标准色彩。
3．总结一句能反映贵站精髓的宣传标语！
4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！
二、网页色彩的搭配
1．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。
2．用两种色彩。先选定一种色彩，然后选择它的对比色。
3．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
网页制作工具软件介绍
1.Dreamweaver，用于编辑HTML、ASP、JSP、PHP、CSS、XML、JS的页面制作工具；
2.Frontpage，跟Dreamweaver一样，不过个人感觉还是Dreamweaver好；
3.Flash，网页需要画面流动时的首选择；
4.Photoshop，图像处理软件，一般网页都需要有图片相搭配，Photoshop是款很强大的工具。
5.Fireworks，跟Photoshop一样都是图像处理软件，但Fireworks偏向与对网页的处理。
网页设计发展方向
1.更多的CSS3 + HTML5
这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5，但在2013年CSS3+HTML5将会得到更广泛的应用。网页设计师最终会抛弃Flash。Flash不再是昔日的王者，新技术（指CSS3+HTML5）将会取而代之。2013年，Flash渐行渐远，魔术师“HTML5”成为舞台的主角：
2.简单的配色方案
没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的，太不给力了。多点考虑绿、黄或者红作为你的网页主色调。当然，颜色最好保持使用2到3种。调整颜色的透明度，或许会给你意想不到的效果。网页制作主流技术
目前，最常用的三种动态网页语言有ASP(Active Server Pages)，JSP(Java Server Pages)，PHP(Hypertext Preprocessor)
ASP全名Active Server Pages，又成为服务器端的VBScript，所以采用我们非常熟悉的VB语法。由于采用Basic语法，只要熟悉Basic语言，有点html基础，要学习掌握ASP是很简单的事情。任何文本编辑都可以进行编辑，当然，对于asp我们还是推荐采用Microsoft公司的InterDev。可它却只能在NT和win2000上很好的支持。
JSP全名Java Server Pages，采用java语法，由于java体系的任何东西都是需要JDK支持的，同样，JSP也离不开JDK。由于java高度的面向对象和灵活性，所以，比Basic稍微要难点。任何文本编辑都可以进行编辑，但是，却需要JDK先编译好。对于我们目前流行的两种最主流的网络操作系统（UNIX/Linux和NT/Win2000），都能很好的支持。
PHP全名Hypertext Preprocessor，采用类似C的语法。由于采用C语法，要学习掌握PHP也是比较简单的事情。任何文本编辑都可以进行编辑。对于我们目前流行的两种最主流的网络操作系统（UNIX/Linux和NT/Win2000），它都可以很好的支持，而且根本不用修改任何代码。
网页设计发布和维护
网页在本地制作完毕并测试成功后，需要上传到Internet上，这样用户才能访问，如果是个人网站，可以到internet上申请一个免费空间。
维护网站
在上传网页之前，还有一些工作需要做，这也是维护网站的一些手段，如：
（1）站点报告
（2）检查站点范围的链接
（3）查找和替换功能
（4）清理文档
（5）保持同步
参考文献：
1、黄斯伟.CSS完全使用详解[M].北京:人民邮电出版社,2007.72、刘瑞新.网页设计基础与网站维护教程[M].北京:机械工业出版社,2006.103、陈承欢.网页设计基础与网站维护案例教程[M].北京:人民邮电出版社,2007.34、温谦.HTML+CSS网页设计与布局从入门到精通[M].北京:人民邮电出版社,2010.35、VK工作室.HTML+CSS入门讲座[M].北京:科学出版社,20046、胡艳洁.HTML标准教程[M].中国青年出版社,2004.9
第四篇：中职网页制作课程教学初探
中职网页制作课程教学初探
在中职计算机教学过程中，如何让学生通过学习掌握建立网页的步骤和方法，怎样设计才能使网页独具特色？这都是中职教师在教学中需要考虑的问题。
一、根据学生情况选择适用教材 中职学生的知识基础较差，学习能力不高，在选取教材时不仅要考虑教材的实用性，还要根据学生的水平选择教材，使学生在学习时能通过探究学习掌握其中的知识。教材内容的难易对学生学习的积极性具有较大的影响。如果选取的教材内容较难，学生难以掌握其中的知识，那么他们在学习和探究时，即使花费大量的时间和精力，也很难获得提高，这就使学生对学习不感兴趣，更不要说在制作网页中融入创新思维了。如果教材内容太简单，学生一看就懂，也不能有效地激发学生的思维，促使他们综合能力的提高。所以，选择合适的教材对学生的学习效率具有关键作用。
二、规划课程教学内容
规划教学内容是做好课程教学的首要任务。根据中职学生的特点，本课程选择以培养学生的实践动手能力为目标。教学内容主要定位在静态网页的制作、设计和发布方面，在内容组织上从实际需要出发，以够用为原则，精选了网页制作技术的一些主要内容展开讲解，主要任务有网页的基础知识、HTML语言、Dreamweaver 8软件、Photoshop CS2软件、Flash 8软件、CSS层叠样式表、Script脚本等。以网页设计的技能学习和训练为主，重点讲授Dreamweaver网页设计软件的使用方法及相关技巧。让学生通过这门课程的学习，能够具备综合运用专业软件为中小型网站设计和制作网页的能力，为今后从事相应的网站设计制作工作打下良好的基础。同时，注意综合运用学生已学的专业课程知识，以培养适合社会需要的实用型人才为目标。
三、精心设计教学内容，制订教学方案在网页制作教学中，教师可以把学生的学习过程分为以下几个阶段：
第一阶段是网页入门。先向学生介绍什么是网页以及制作网页要用的工具，让学生掌握简单制作网页的知识。在让学生对网页有了初步认识之后，教师要让学生学会如何收集素材，如何把素材插入到网页中，并对网页中的内容合理安排。
第二阶段是网页布局制作阶段。学生在掌握了简单的网页制作之后，需要让他们对网页建设中内容布局进行探究。在这一阶段，教师要注重学生创新能力的培养，使学生能在网页制作时进行有效创新。
第三阶段是网页美化设计阶段。让学生掌握软件Photoshop使用方法，能对各种素材按照自己的想法进行加工，使插入网页的素材能更好地反映网页的主题。同时还要让学生掌握运用Flash软件制作动画的技术。
第四阶段是网站程序使用阶段。通过这一阶段的教学，让学生掌握制作网页中的特效，并能通过编写网站程序，构架出动态网站。学生掌握了这一阶段的学习，能使网页设计在动态和静态素材结合下更完美，还能让学生建立小型的网站，为他们以后在进行网站建设学习时做好铺垫。
四、优化教学方法，促使学生积极探究
网页制作课堂需要教师让学生在计算机房进行实际操作和学习，才能让他们真正掌握网页制作知识，并在探究过程中激发创新思维。在教学过程中，教师既要对学生进行引导，还要通过实际操作来提高学生的动手能力，使学生能在对网页制作理论知识探究的同时，通过操作来理解和领会这些知识。教师要深入研究教材知识，了解中职学生的特点，用多种教学方法来使课堂教学丰富有趣，使学生的注意力保持高度集中。在让学生进行网页制作之前，教师要和学生共同分析制作案例，让他们在观看案例的过程中掌握网页制作的步骤和技巧。
五、全面综合的考核评价方法使学生树立信心
网页制作教学过程中，教师要突出教学的实践性，使学生在动手制作的过程中培养综合能力，使学生对计算机知识掌握得更全面，同时在设计时能领会运用各种制作素材，并能使网页制作效果新颖独特。网页制作课程在对学生进行考核和评价时，不同于其他学科的测验，这是由于网页制作需要一个较长的过程，学生需要对网页设计进行构思，收集网页设计所用到的素材，对网页结构的布局进行设计等。所以，教师在对学生进行考核和评价时，不能只考虑学生在期末考试时的成绩，而是要把每次的网页制作作业、课堂学习效果、期中测试成绩都要考虑进去，全面综合地对学生进行评价。
总之，在网页制作教学中，教师要通过让学生观看网页制作实例来激发学生制作网页的欲望，使他们能积极主动地进入到网页制作的探究过程中。同时教师还要组织丰富多彩的教学活动来调动学生的积极性，使他们能不断提高网页制作能力，提高综合素质。
第五篇：网页设计课程的教学反思
精彩的“陷阱”是成功的一半
《网页设计之div盒子的定位》教学反思
Div盒子模型是CSS控制页面时一个十分重要的知识点，其定位方法则是重中之重。学生在掌握了盒子模型的概念、组成、作用等基本知识之后，就面临着如何在页面中为各盒子进行合理的排版，以实现丰富的页面效果的实际需求。本节课围绕该问题而展开，以任务驱动的形式带领学生在不断地发现问题，分析问题，解决问题的过程中，体验两种不同的定位法为div盒子排版所带来的神奇变化。
课程开始时，我便和学生一起，结合上次课某学生的课堂作品文件，对div盒子的基础知识做简要的回顾，同时引导大家在该“问题作品”文件中寻找不足，即所有盒子都是按照标准流的方式，在浏览器窗口中由上而下依次排列。而实际上这种排列方式有其局限性，会导致网页页面效果“刻板”，且浪费页面空间。此时，我再打开一份已经过合理定位后的同作品文件，让学生注意观察，该文件中各盒子的排列已经发生了巨大变化，整个页面已变得十分美观。通过这种导入方法，让学生在发现自己的作品中存在问题的同时，又欣赏到了定位之后的文件效果，由此产生“改变现状”的强烈愿望。至此，成功引入div盒子定位的概念。
在接下来的教学活动中，我结合ppt与板书简单介绍了何为盒子的定位，其定位的两种方法：float与position。然后针对导入时利用的“问题作品”，演示如何利用float属性解决其中一部分问题，再将该“问题作品”源码和包含任务说明、实现的效果、操作提示的“任务书”下发给每位学生，让他们利用float知识解决现有问题，实现既定的效果文件。待学生基本完成该任务后，我再次抛出另一小任务：将左右两个盒子的位置对调。当听到该任务后，我发现有部分学生在窃喜，并且以非常快的速度完成了任务，然后纷纷让我去检查。其实此时他们已“成功”地掉入了我提前设计好的“陷阱”。我假装十分严谨地检查了几个学生的作品后不做评价，并将全班的屏幕收回，让其中某一位学生的作品呈现在所有人面前，同时提出问题：该同学是否真的实现了我要求的效果？此时讨论声起，大家各抒己见。我见机向全班演示了该操作过程，并将操作结果定格，提醒大家注意：我们确实可以利用float属性将左边盒子定位到右边，但这里所谓的右边到底是指谁的右边？它又是否是我们需要的右边？此时同学们会发现，答案是否定的，左盒子这时在浏览器最右边，与上边的盒子无法对齐，需要在此基础上，再向左侧移动一定的距离。
分析了问题所在与解决方案之后，我再次抛出了小任务：请大家按照刚才的分析思路，解决现在的问题，实现效果。这时全班都犯难了，几乎听不到敲击键盘的声音。我趁机装作很“纳闷”的样子，反问大家，怎么都不动了？这时旁边有声音传来，“老师，我们不知道怎么给左盒子移动一定的距离。”
“哦，对了，我忘了告诉大家移动的方法了！”此时换成是我窃喜了，因为我再次将他们置身于知道问题所在，却没办法解决的境地。这时我便开始介绍position中相对定位的方法，并演示了具体的操作步骤后，将余下的任务交给全班，另外对学有余力的学生提出了更高的要求，即利用相对定位实现更为丰富、复杂的页面效果，而绝大部分学生都非常成功地实现了既定的效果。
这节课在一个个环环相扣的任务中完成，效果在总体上比较理想。但有众多细节问题需要自己推敲反思。如，有极少部分学生因基础差，跟不上“队伍”，直到课程快结束时，仍在琢磨第一个任务如何完成。这跟我没有全面考虑学生因素有关，我应做到“区别对待”，对不同级别的学生给与不同难度的学习任务，如此不但能防止某些学生因跟不上节奏而放弃学习，还能激发他们的学习兴趣，获得成就感。另外，对课程内容中的“相对定位方向的确定”这一知识点的解释不够到位，导致很多学生要么不会做，要么只是强行记忆。其实，该知识的介绍除了利用传统的ppt和板书工具外，还可以利用交互性较好的flash小动画来演示，这样学生能够更加直观地了解left、right、top、bottom四个方位属性的意义所在。
点击咨询 