网页制作教学设计范文第1篇
摘要：DIV+CSS是目前最流行的网页制作技术，但学习起来枯燥，不宜熟练掌握。为了提高教学质量，提升学习效果，进而使学生由浅入深、循序渐进地掌握这门技术，本论文通过教学方法的选用、知识点、技能点实践环节的设计和考核方式的设计等方面的探索，经过教学实践，总结出一些经验。
关键词：DIV+CSS教学设计
引言：
网页设计课程是一门实践技能很强、技术手段不断更新的技能课，随着网络技术的飞速发展，在XHTML网站设计标准中，已不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。最直接的特点就是，代码冗余小，网页打开速度快。结构和表现分离了，只需改变css就可改变网页的风格，而内容不变，这样维护和升级的成本降低了。对于初学者，常常被枯燥的代码和编写语言搞得焦头烂额，要收到显著的教学效果，教学方法尤其显得重要。
一、教学方法设计
教学方法是一门课程的教学中，教师为了完成既定的教学任务，实现教学目标，而在教学过程中运用的教学方式和手段。面对课程知识点和实操强的特点，可突出以下几种教学方式。
强调记笔记。记笔记有助于对学习内容的理解。记笔记的过程也是一个积极思考的过程，可调动眼、耳、脑、手一齐活动，促进了对课堂讲授内容的理解。尤其越是逻辑性强的课程越需要一个良好的学习习惯，而这正是高职学生所欠缺的。因此，面对这种特点的学生，教学方法中一定要注重有意识让学生建立良好的学习习惯。从第一节课就开始提出记笔记的明确要求，并纳入到平时作业成绩考核中，让学生不得不先重视起来。不定期地在课上练习和课后作业中引入笔记的内容，让学生明显意识到课上记了笔记，平时注重积累，做练习就会提高效率，事半功倍，否则，按时完成作业都相对费劲。有一个现象叫“飞轮效应”.为了使静止的飞轮转动起来，一开始我们必须使很大的力气，一圈一圈反复地推，每转一圈都很费力，但是每一圈的努力都不会白费，飞轮会转动得越来越快.达到某一临界点后，便无须再费更大的力气，飞轮依旧会不停地快速转动。因此，培养学生好的学习习惯也是一样，开始教师和学生可能都会很累，但只要坚持不懈，学生就会逐渐养成稳定良好的学习习惯，看上去很累的学习就会变得自然轻松。老师也会越教越轻松。
鼓励原则。美国作家马克·吐温说过：“一句好听的赞辞能使我不吃不喝活上三个月。”这句话夸张地描述了表扬的魅力所在。有时，一个赞许的目光能使人鼓起勇气，信心百倍。对于这个观点，在多年的教学生涯中，相信许多老师都受益匪浅。当前，DIV+CSS已经成为制作网页的一种技术潮流和趋势，学习者也必须不断提高自己的技能来适应这种变化。各种XHTML标签和CSS属性在实际的操作中，往往问题层出不穷，令学生头疼不已，如果在这个时候，不及时加以鼓励，就会导致教学效果半途而废。因此，一定要在学生面对问题时，主动与其一起思考，提出解决该问题的关键点，让学生自己尝试，而不是直接告诉答案，教学效果不言而喻。学生会认为是自己经过艰苦思考而最终战胜了困难，自信心增强，也就有了继续学习下去的动力。
循序渐进。面对高职学生，想要取得好的教学效果，循序渐进的教学方法必不可少。在课堂教学中，不要放过任何一个看上去非常简单的问题，有些小问题往往不简单，可以延伸出许多知识点，只有熟练掌握学会举一反三才能更加自如地运用该门技术。要选定一个难易度适中的网站，既不能太难模仿，使学生产生畏难抵触心理，又不能太简单，而达不到巩固教学内容的目的。学生在“模仿”课环节，对指定的网站首页和其他主要网页进行模仿还原，该网站的各类素材可以直接使用，对于页面在尺寸、色彩、外观上也可以相同。对于这种特定的、明确的任务，学生往往会表现出极大的热情。
对比较学法。制作一个简单的网页，尤其运用以前的TABLE布局技术，上手很快，容易实现，大部分初学者一旦学习了表格布局技术，就很容易依赖，而不愿意去尝试DIV+CSS技术了。面对这种问题，就要适时运用对比教学法，例如通过制作一个“简单相册”的小例子，让学生分别运用TABLE技术和DIV+CSS技术制作，完成之后，让学生观察代码有何不同。可以明显看出，table时代，一个页面表格嵌套10个以上是非常普遍的事情，从而页面代码冗长，杂乱无章。然后紧接着提出迅速更新页面的风格，让学生继续尝试完成。通过实践，学生就可以清晰得出结论，DIV+CSS技术的优势，内容和形式分离，更新页面风格，只需要改动CSS文件就像换件衣服一样简单容易。DIV+CSS技术制作“简单相册”代码如下：
<style>
div，body，img，ul，li，p，a{ margin：0；padding：0}
.base{ margin：0 auto；width：530px}
ul{ list-style-type：none；width：530px}
li{ float：left；margin：0 5px；}
img{ width：150px；height：100px；border：1px solid #CCCCCC}
p{ font：\"宋体\"；font-size：9px；text-align：center}
h1{ font-size：24px；text-align：center}
</style>
<body>