《“树立网站整体风格”教学设计.doc》由会员分享，可在线阅读，更多相关《“树立网站整体风格”教学设计.doc（5页珍藏版）》请在三一办公上搜索。
1、树立网站整体风格教学设计 网站风格是抽象的，是站点的整体形象给浏览者的综合感受，这个“整体形象”往往从网站标志、标准色彩、字体、版面布局、交互性等诸多因素中体现出来。那么如何通过一节课的教学使学生对如何树立网站整体风格形成一个初步的认识，如果采用面面俱到的教学，带来的结果很可能是面面皆如蜻蜓点水，难以留下深刻的印象。因此在内容上我选择了网站标志、标准色彩、版面设计这几个典型的部分，通过对经典案例的解读，将抽象的内容形象化，让学生自己去总结发现设计中的规律与应该注意的问题，并通过适当的可行性高的实践，激发学生的创作热情，使学生初步了解如何去树立网站的整体风格，并为以后的继续学习和实践提供指导。【
2、教学目标】知识与技能目标：1、 了解体现网站整体风格的要素2、 了解网站Logo设计的常见方法和设计中应该注意的问题3、 了解色彩的感觉，能够根据主题的需要选择合适的标准色彩4、 了解网站版面布局的几种类型及其特点过程与方法目标：1、 培养学生的创新思维与审美能力2、 初步体验设计的过程，并感受创作实践所带来的成就感【教学重点、难点】对如何树立网站的整体风格形成一个整体的认识【教学准备】资源：“篮球爱好者”网站、教师展示课件、学生课件、网页截图、Logo图片工具：画图工具、Frontpage2000软件【教学过程】教师活动学生活动设计意图导入：请同学们欣赏几张网页，你能用语言描述下这几张网页带
3、给你们的感觉吗？可口可乐网站页面：充满激情、活力四射旁氏护肤品网站页面：温柔、清新、很女性化魔兽世界网站页面：粗狂、展现了魔幻的世界比较好的网站往往能呈现出不同的风格，有的清新秀丽，有的活力四射，有的庄重典雅。那么如何来树立网站的整体风格呢？这就是我们这一节课所要共同探讨的问题。请同学们看这张网页(如图1)，这是一个同学设计的“篮球爱好者”网站中的一页，你发现页面设计中存在的问题了吗？（图1）生： 颜色看着不舒服、比较呆板那么通过这节课的学习，我们能不能给这个网站的设计提出修改的建议呢？生：能！（一） 网站标志（Logo）看到这张网页（一张新浪新闻网页）你能联想到哪些网站呢？生：新浪网、中国新
4、闻网、谷歌那么是什么让你联想到了这些网站呢？网站标志，也就是我们俗称的Logo。网站标志就如同企业的商标一样，看到它就能够联想到你的网站。那么如何来设计网站标志，有哪些方法呢？1、选择与网站主题相关的，例如百度网站的Logo（如图2），其设计采用了图文结合的方法，将熊爪图片与百度文字相结合，灵感来自于“猎人巡迹熊爪”，切合其网站的搜索理念。并且每逢重大节日，百度会和一些创意类“中国大师”合作设计节日Logo，既烘托了节日的气氛，更具有一定的艺术性和趣味性，诸如百度与朱德庸合作创作的元旦节日Logo，以及与漫画家几米合作创作的中秋节Logo（如图3）。2、对于专业性的网站，可以以本专业有代表的物
5、品作为标志，例如苹果企业网站的Logo，其设计直接采用了其产品的徽标（如图4）。 3、最常用和最简单的方式是用自己的网站的中文或者英文名称作标志。例如谷歌、中国雅虎、搜狗等网站的Logo（如图5）。 （图2）（图3）（图4）（图5）那么设计成功的Logo往往具备哪些特点呢？师生总结：1、 能够切合网站的主题2、 符合观赏者的审美习惯3、 体现一定的创意，设计美观，有艺术价值欣赏了这么多的网站Logo，同学们一定也有设计的冲动了吧。同学们再看看“篮球爱好者”网站有没有一个令人印象深刻的Logo呢？生：没有。那我们赶紧行动起来，为它设计一个漂亮的Logo吧。选择展示具有典型性的学生作品，进行学生互
6、评与教师点评。（二） 标准色彩不同的色彩有不同的色彩语言，会使人产生不同的心理联想，产生不同的感觉，看到这些颜色你会产生哪些联想，有什么样的感觉呢？课件展示不同的颜色。红色：联想到火、太阳、鲜血等，感觉到温暖、有活力、激情、危险蓝色：联想到天空、大海等，感觉到宁静、悠远、充满智慧网站采用不同的色彩搭配，能够更好的烘托出主题，并产生不同的视觉效果。网页1：“中国人民政府网”主页。其页面颜色设计主要使用了红色与蓝色。红色是我国国旗、国徽的颜色，具有象征意义，切合网站的主题，并且红色搭配以蓝色，给人感觉庄重、权威、真实。网页2：“上海世博会官方网站”主页。其页面设计主要使用了绿色与橙色这两种色彩，清
7、新活力的绿色加上欢快的橙色，增添了向上升腾明快的动感，使得页面感觉轻快时尚，切合上海世博会的主题“城市让生活更美好”。并且同学们注意到上海世博会的会徽的颜色设计了吗，也是清新活力的绿色上一点欢快的橙黄。那么在网站设计在色彩的使用上应该注意哪些问题呢？师生总结：1、 设计网站的标准色彩，但一般不要超过3种2、 总体协调，局部对比3、 结合主题需要选择合适的色彩针对“篮球爱好者”这个网站，你认为应该使用什么样的色彩比较好呢？针对学生提出的设计方案，进行学生互评与教师点评。（三） 版面设计如何将网页内容巧妙的排列，以及如何让页面更吸引人，是版面设计需要考虑的问题。那么，常见的页面布局有哪些呢？1、“
8、口字型”，例如读者网首页，页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容。优点：充分利用版面，信息量大，与其他页面的链接多，切换方便。缺点：页面拥挤，不够灵活。一般适合内容比较多的网站，诸如综合类网站、资讯门户类网站等。2、“自由式”，又称POP布局，例如中国三星网站主页，页面布局就像是一张海报一样，以一张精美的画面作为设计的中心，菜单栏自由摆放。优点：漂亮、吸引人。缺点：显示速度慢，文字信息量少。一般适合艺术、产品企业、游戏等类型网站。那么常见的版面布局还有哪些呢，如果你为“篮球爱好者”设计，你会为它选择哪一种版面布局呢？学生提出自己的设计方案，学生间进行互评，教
9、师适时引导。结束语：今天这一节课，我们主要从网站标志、标准色彩以及版面设计等方面探讨了如何树立网站的整体风格这一问题。当然网站整体风格不仅仅体现在这些方面，其它诸如字体的设置也是很重要的，课后同学们不妨收集这方面的资料，并且多揣摩，多实践，从而提高自己的欣赏设计能力。当然好的网站不仅有漂亮的外表，更要有其内容，下一节课我们将共同探讨网站设计有关栏目设计以及素材收集方面的内容。观察这几张网页截图，感受这些网页所带来的视觉冲击力，并说出自己的感觉。观察“篮球爱好者”网站，并找出其在设计中存在的不足。观察网页，看看自己能联想到哪些网站，并思考是通过什么联想到这些网站。思考并讨论：一个设计成功的Log
10、o往往会具备哪些特点。打开画图软件，尝试为篮球爱好者网站设计一个网站标志，能够简单表达出自己的创意与设计理念即可，可以借鉴“Logo欣赏”里别人的设计。观察这些页面，体会这些页面色彩搭配的精妙之处。思考并讨论在色彩的使用上应该注意的问题。在FrontPage2000中打开“篮球爱好者”网站，尝试为其进行色彩的设计。也可以参考借鉴“网页截图”中网页的设计。阅读教材，或者通过观察 “网页截图”中的网页，讨论还有那些常见的页面的布局，并为“篮球爱好者”主页选择或者设计一种版面布局。通过几张风格迥异、视觉冲击力比较强的网页，引起学生的兴趣，继而旗帜鲜明地提出本节课的课题树立网站整体风格。并通过一个具体
11、问题的提出，激发学生的求知欲与解决实际问题的渴望。通过一个问题的提出，自然过渡到学习的课题网站标志。选择学生比较熟悉的并且特征鲜明的网站标志作为案例来进行解读，可以降低理解的难度，使学生容易接受，面对老师的提问，学生能够有话可答，并能有所思考，可以有效地吸引学生参与到课堂中来，与教师形成积极的互动。通过前面对几个案例的解读，学生已经发现了一些网站标志设计的规律，对网站标志具有了初步的鉴赏能力，因此让学生自己去归纳总结出设计优秀的LOGO往往所具备的一些特点，然后教师再进行进一步的总结，使学生对“网站标志”从初步的感知上升到理论的认识，并为下一步的实践提供指导。此时的学生一定跃跃欲试，有自己实践
12、创作的渴望。通过这一实践让学生初步了解设计的过程，体验创作所带来的成就感，并在实践中获得提高。学生课件的设计可以帮助学生简化操作步骤，并提供资源供学生模仿借鉴。课堂中适时开展评价，了解课堂教学的效果，激发学生的学习动机，从而有效推动课堂教学，评价过程中注意教师点评与学生互评相结合。通过对两张网页其色彩设计的分析解读，引导学生发现其设计中存在的规律及应该注意的问题。适时归纳，总结规律。为学生的下一步实践提供指导。考虑到学生的认知差异，因此在学生课件中设计了具体的操作步骤，提供技术帮助，避免学生因技术的障碍而影响了设计的发挥，并提供了网页截图供参考借鉴。“授之以鱼不如授之以渔”，通过对两种页面布局的分析解读，学生已经知道了从什么角度去分析，掌握了分析的方法，提供资源，让学生进行自主学习，并提出设想。“课虽止，思未断”，进一步拓宽思路，促进学生思维的延伸，并为下一节的教学做好铺垫。
