网页的美化(教参)

网页的美化（一）教学设计部分教学内容分析R本课的主要内容与地位本课的主要教学内容为：设置网页的背景、设置表格（单元格）的背景、设置背景音乐、插入Flash动画和插入滚动字幕等几个知识点，以实现对网页的美化。网页是否美观大方、给人以美感，很大程度上决定于网页中各元素的色彩搭配是否合谐、得当，色调是否与网站的主题相吻合，以及网站中的元素是否能满足网站要表达的感情等等。对网页进行美化是每一个网站建设者不懈追求、永无止境的探索过程。R本课与前后内容的关系网页美化是对前期所做的网页在视觉、听觉效果上的修饰，是提升网站可观赏性的一个非常重要的手段，是网站建设中一个非常重要的环节。教学目标分析R知识目标/技能目标知识目标1. 了解对网页进行美化常用的方法。2. 理解美化网页对网站质量提高的作用。技能目标掌握设置网页及表格的背景、设置网页中背景音乐、Flash动画和滚动字幕的一般方法；R过程与方法目标提高学生信息的加工、管理、表达和交流的能力。R情感态度与价值观目标提高审美意识，发现美、认识美，美化生活从自身做起。通过对网页中文字、布局和色彩的合理设计，尽可能达到较好的视觉效果。R本课的重难点重点：设置网页背景、设置背景音乐、插入Flash动画和滚动字幕难点：网页的色彩调配R本课的课时分配建议一课时教学策略设计建议R教法建议在本节课的教学过程中，教师应引导学生参考借鉴优秀网站在色彩、布局上的一些做法，自主地学习有关版面设计和色彩搭配方面的知识，并将其应用到自己的网站设计中。对于本节几个知识点中涉及的对话框，教师应布置合理的分组，由学生通过实践体会对话框中各参数的含义。R学法建议因本课的学习在很大程度上决定于学生对美的鉴赏能力，这就要求学生要在平时多注意身边的色彩、版面设计的方法，如：电视广告、杂志封面、街头广告牌等，并将它们应用到自己的网页设计中来。教学资源与环境建议R本课教学资源索引1.第三课的半成品网页：Index.htm、Parents.htm教学评价建议R自评、互评、师评要注意的问题学生是否具有乐观向上的学习意识；学生能否掌握进行网页修饰的基本方法；学生是否具有发现美、欣赏美，并利用技术手段加以实现的能力。教学过程参考案例第一阶段：导入新课，明确学习目标教学环节教师活动学生活动设计理念导入新课出示几个对比明显的图片（色彩单调的和色彩丰富的）和网页（修饰过的和未修饰的）。师：通过以上展示的内容，大家能总结出什么规律？哪种情况会带给我们美的享受？师：可见，修饰和美化作用是多么重要啊！我们制作网页也是如此，今天我们要学习的内容就是网页的美化讨论，回答通过图片和网页的对比，让学生真切感受到色彩、背景音乐、动态效果对网页的强化作用，引发学生的学习热情。第二阶段：范例精讲，学生自主探究，完成范例。教学环节教师活动学生活动设计理念学习与探究师：就像人的穿衣打扮一样，网页的修饰和美化主要包括哪些内容呢？任务一、设置网页背景师：根据教材提示，分组完成背景的设置，看谁设计的效果好。教师巡视指导任务二、设置表格的背景师：有时我们需要在网页的某个局部设置不同色彩的背景，如何实现呢？联想上一节课学过的表格知识，根据教材提示试一下吧。教师巡视指导任务三、插入背景音乐根据教材提示设置网页的背景音乐，并体验是否勾选“不限次数”对效果的影响。教师巡视指导任务四、插入Flash动画根据教材提示，插入Flash动画，然后分组修改“插件属性”对话框中的参数，填写表1-4-1教师巡视指导任务五、插入滚动字幕根据教材提示，插入滚动字幕，然后分组修改“字幕属性”对话框中的参数，填写表1-4-2教师巡视指导分别设置颜色和图片作为网页背景，并对比二者的视觉效果。分别设置某个表格或表格中的单元格的背景。讨论与网页背景在层次上的关系。实践操作过程，设置网页背景音乐。操作，分组讨论对话框中各参数的作用通过分组竞赛的方式完成教学任务，能够激发学生的学习热情。让学生动手操作，通过观察参数对显示效果的影响强化对知识点的理解。第三阶段：知识、情感拓展教学环节教师活动学生活动设计理念知识与情感师：单调的网页通过我们的努力可以变得漂亮，生活中的环境也需要我们去美化。你的房间和学习用品是自己整理还是由父母整理？课后尝试完成实践作业每天做五件家务。并以网页的形式表达你的感受，反思、实践，制作“我的家务我来做”网页feeling3.htm通过做家务体会父母在家务等日常事务中的艰辛付出。第四阶段：综合实践，巩固与提高，自由创作，迁移运用教学环节教师活动学生活动设计理念实践与创新师：通过前面的操作，大家对几个操作有了初步的认识，还需要通过进一步实践来巩固。请大家根据Pxx页表格要求，完成对三个网页的修饰和美化。根据要求完成操作。对美化效果进行评价。第五阶段：教学总结，设疑激趣，为下一节课作好铺垫教学环节教师活动学生活动设计理念课堂小结课堂小结本节课的学习内容。师：经过我们对网页的美化，每一个网页看上去都令人赏心悦目。但是，同学们想一下：它们和我们在Internet上浏览过的网页有什么区别吗？师：对，它们只是一个个独立的、孤立的的网页，还不能从一个网页跳转到另一个网页。下一节课，我们将学习这方面的知识，请同学们课后预习第五课的内容。回顾，总结生：网页之间没有联系。在引入“超链接”前，让学生通过回顾自己浏览网页的经历，对这一概念有一个心理上的准备。教学反思本节课的内容虽然操作步骤不难掌握，最大的难点是色彩、音乐、动画与网站主题的搭配的把握。所以，建议教师安排学生以分组竞赛的方式来激发学生的学习热情。（二）补充资料部分1.课件与学件R学生用学件名称文件名设置网页的背景网页背景.swf设置表格（单元格）的背景表格背景.swf插入背景音乐背景音乐.swf插入Flash动画Flash.swf插入滚动字幕滚动字幕.swf2.资料库 网页色彩设计原理一、色彩的基本知识1.颜色是因为光的折射而产生的。2.红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如：红色是color(255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的bgColor=#FFFFFF就是指背景色为白色。3.颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。二、色环红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红|_|_|_|_| | | |暖色系 中性系 寒色系 中性系我们将色彩按红-黄-绿-蓝-红依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和寒色，当中是中型色。(如下图)三、色彩的心理感觉红色-是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。绿色-介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。橙色-也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。黄色-具有快乐，希望，智慧和轻快的个性，它的明度最高。蓝色-是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:)白色-具有洁白，明快，纯真，清洁的感受。黑色-具有深沉，神秘，寂静，悲哀，压抑的感受。灰色-具有中庸，平凡，温和，谦让，中立和高雅的感觉。每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。四、色彩的搭配1. 非彩色的搭配黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。2. 彩色的搭配网页色彩搭配的原理色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。网页色彩掌握的过程随着网页制作经验的积累，我们用色有这样的一个趋势:单色-五彩缤纷-标准色-单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。网页色彩搭配的技巧用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。用一个色