“树立网站整体风格”教学设计.docVIP

《树立网站整体风格》教学设计 网站风格是抽象的，是站点的整体形象给浏览者的综合感受，这个“整体形象”往往从网站标志、标准色彩、字体、版面布局、交互性等诸多因素中体现出来。那么如何通过一节课的教学使学生对如何树立网站整体风格形成一个初步的认识，如果采用面面俱到的教学，带来的结果很可能是面面皆如蜻蜓点水，难以留下深刻的印象。因此在内容上我选择了网站标志、标准色彩、版面设计这几个典型的部分，通过对经典案例的解读，将抽象的内容形象化，让学生自己去总结发现设计中的规律与应该注意的问题，并通过适当的可行性高的实践，激发学生的创作热情，使学生初步了解如何去树立网站的整体风格，并为以后的继续学习和实践提供指导。 【教学目标】 知识与技能目标： 了解体现网站整体风格的要素 了解网站Logo设计的常见方法和设计中应该注意的问题 了解色彩的感觉，能够根据主题的需要选择合适的标准色彩 了解网站版面布局的几种类型及其特点 过程与方法目标： 培养学生的创新思维与审美能力 初步体验设计的过程，并感受创作实践所带来的成就感 【教学重点、难点】对如何树立网站的整体风格形成一个整体的认识 【教学准备】 资源：“篮球爱好者”网站、教师展示课件、学生课件、网页截图、Logo图片 工具：画图工具、Frontpage2000软件 【教学过程】 教师活动 学生活动 设计意图 导入： 请同学们欣赏几张网页，你能用语言描述下这几张网页带给你们的感觉吗？ 可口可乐网站页面：充满激情、活力四射…… 旁氏护肤品网站页面：温柔、清新、很女性化…… 魔兽世界网站页面：粗狂、展现了魔幻的世界…… 比较好的网站往往能呈现出不同的风格，有的清新秀丽，有的活力四射，有的庄重典雅。那么如何来树立网站的整体风格呢？这就是我们这一节课所要共同探讨的问题。 请同学们看这张网页(如图1)，这是一个同学设计的“篮球爱好者”网站中的一页，你发现页面设计中存在的问题了吗？ 生： 颜色看着不舒服、比较呆板…… 那么通过这节课的学习，我们能不能给这个网站的设计提出修改的建议呢？ 生：能！ 网站标志（Logo） 看到这张网页（一张新浪新闻网页）你能联想到哪些网站呢？ 生：新浪网、中国新闻网、谷歌…… 那么是什么让你联想到了这些网站呢？ 网站标志，也就是我们俗称的Logo。网站标志就如同企业的商标一样，看到它就能够联想到你的网站。那么如何来设计网站标志，有哪些方法呢？ 1、选择与网站主题相关的，例如百度网站的Logo（如图2），其设计采用了图文结合的方法，将熊爪图片与百度文字相结合，灵感来自于“猎人巡迹熊爪”，切合其网站的搜索理念。并且每逢重大节日，百度会和一些创意类“中国大师”合作设计节日Logo，既烘托了节日的气氛，更具有一定的艺术性和趣味性，诸如百度与朱德庸合作创作的元旦节日Logo，以及与漫画家几米合作创作的中秋节Logo（如图3）。 2、对于专业性的网站，可以以本专业有代表的物品作为标志，例如苹果企业网站的Logo，其设计直接采用了其产品的徽标（如图4）。 3、最常用和最简单的方式是用自己的网站的中文或者英文名称作标志。例如谷歌、中国雅虎、搜狗等网站的Logo（如图5）。 那么设计成功的Logo往往具备哪些特点呢？ 师生总结： 能够切合网站的主题 符合观赏者的审美习惯 体现一定的创意，设计美观，有艺术价值 欣赏了这么多的网站Logo，同学们一定也有设计的冲动了吧。同学们再看看“篮球爱好者”网站有没有一个令人印象深刻的Logo呢？ 生：没有。 那我们赶紧行动起来，为它设计一个漂亮的Logo吧。 选择展示具有典型性的学生作品，进行学生互评与教师点评。 标准色彩 不同的色彩有不同的色彩语言，会使人产生不同的心理联想，产生不同的感觉，看到这些颜色你会产生哪些联想，有什么样的感觉呢？ 课件展示不同的颜色。 红色：联想到火、太阳、鲜血等，感觉到温暖、有活力、激情、危险…… 蓝色：联想到天空、大海等，感觉到宁静、悠远、充满智慧…… 网站采用不同的色彩搭配，能够更好的烘托出主题，并产生不同的视觉效果。 网页1：“中国人民政府网”主页。其页面颜色设计主要使用了红色与蓝色。红色是我国国旗、国徽的颜色，具有象征意义，切合网站的主题，并且红色搭配以蓝色，给人感觉庄重、权威、真实。 网页2：“上海世博会官方网站”主页。其页面设计主要使用了绿色与橙色这两种色彩，清新活力的绿色加上欢快的橙色，增添了向上升腾明快的动感 总体协调，局部对比 结合主题需要选择合适的色彩 针对“篮球爱好者”这个网站，你认为应该使用什么样的色彩比较好呢？ 针对学生提出的设计方案，进行学生互评与教师点评。 版面设计 如何将网页内容巧妙的排列，以及如何让页面更吸引人，是版面设计需要考虑的问题。那么，常见的页面布局有哪些呢？ 1、“口字型”，例如读者网首页，页