《树立网站整体风格》教学设计

1、PAGE 第 PAGE 5 页树立网站整体风格教学设计盐城市南洋中学 王健【教材分析】树立网站整体风格是高中选修教材网络技术应用（教科版）第四章第2节的内容。网站风格是抽象的，是站点的整体形象给浏览者的综合感受，这个整体形象往往从网站标志、标准色彩、标准字体等元素中体现出来。通过对经典案例的解读，将抽象的内容形象化，让学生自己去总结发现设计中的规律与应该注意的问题，并通过适当实践，激发学生的创作热情，使学生初步了解如何去树立网站的整体风格，并为以后的继续学习和实践提供指导。【学情分析】本案例的对象为高一年级第二学期的学生，前面已经学习了网站的规划、网站设计中的栏目的设置与版面设计，对美有一定欣

2、赏和鉴赏能力，但对从哪些方面去树立网站的整体风格，还缺乏整体的认识。FrontPage2000操作虽然上学期学过一点，但并不熟练。【教学目标】知识与技能：1、了解体现网站整体风格的要素。2、了解网站Logo设计的常见方法和设计中应该注意的问题。3、了解色彩的感觉，能根据主题的需要设计标准色彩。4、了解字体的特点，能根据主题的需要设计标准字体。知道使用特殊字体时应注意的问题。过程与方法：通过对案例的解读，让学生自已去总结发现设计中的规律与应该注意的问题。情感、态度与价值观目标：提升学生的创新思维与审美能力。【教学重点、难点】对如何树立网站的整体风格形成一个整体的认识【教学准备】资源：主题网站、教

3、师展示课件工具：FrontPage2000软件、A Logo 3.10、IIS【教学策略】本课中首先通过与优秀网站的对比，分析学生作品中的不足之处，然后在完善这个作品过程中，引导学生从网站标志、标准色彩、标准字体方面树立网站的整体风格。通过自身的实践，体验到网站设计的乐趣。【教学过程】一、创设情境，引入课题1、请同学们欣赏几张网页，同时思考一下这些网页具有怎样的风格？我们发现较好的网站往往都具有其独特的风格，有的活泼可爱、有的清新秀丽、有的温文尔雅、有的执着热情 ，那么如何来树立网站的整体风格呢，这就是我们今天这节课所要共同探讨的问题。2、展示几个学生作品，分析存在不足：学生：颜色搭配不舒服字

4、体杂乱 教师：网站的整体风格是属于外观的设计，色彩与字体肯定是属于风格的一部分，那还有什么跟网站的风格有关呢？设计意图：通过几张风格迥异、视觉冲击力比较强的网页，引起学生的兴趣，继而旗帜鲜明地提出本节课的课题树立网站整体风格。并通过一个具体问题的提出，激发学生的求知欲与解决实际问题的渴望。二、网站标志（Logo）小游戏：（快速播放一组网页截图），比一比，记一记，看谁记得多，并思考你是怎么知道这些网站的名称的？（部分截图如下记网站，引起网站标志）设计意图：在快速播放的一组网页中，要想知道网站的名称，学生们很自然地会关注到网站的标志。从而引出树立网站整体风格的第一步就是要设计出一个好的网站标志。同

5、学们看看你们的主题网站里有没有Logo的设计？那怎么来设计呢？ 网站标志就如同企业的商标一样，看到它就应该能够联想到你的网站。我们先来参考一下那么著名的网站，看看他们的网站标志是怎么设计的吧。1、百度网站的Logo，采用了图文结合的设计。“百度”一词源于宋朝词人辛弃疾的诗句“众里寻他千百度”，“熊掌”图标的灵感来源于“猎人巡迹熊爪”，都有搜寻的意思，跟百度的搜索理念是相符合的。而且每逢重大节日的时候，百度还会邀请一些创意大师对Logo进行修改，既烘托了节日的气氛，更具有一定的艺术性和趣味性。这类Logo的设计方法是选用与网站主题有关的，并具有代表性的人或物，用它们作为设计蓝本，加以卡通化和艺术

6、化设计出来的。2、中国银行、奔驰汽车企业网站的Logo，其采用的是本专业的有代表性的物品。 3、谷歌、中国雅虎、搜狗、联想等网站的Logo，采用将自己网站的中文或者英文名称作为网站标志的设计方法。这是最常用也是最简单的一种设计方法，将自己的名称采用不同的字体、字母的变形与组合，可以很容易地制作出自己的标志。设计意图：通过对几个知名网站的Logo的解读，使学生了解网站Logo设计通常采用的几种方法，从而为学生的下一步实践提供指导。以及在解读的过程中，注意指明一些Logo设计的成功所在，引导学生发现其规律。提问：一个设计成功的Logo往往具备哪些特点呢？请讨论回答。学生活动：讨论一个设计成功的Lo

7、go往往具有哪些特点。总结：1、能够契合网站的主题 2、符合大众的审美习惯、清楚易记。3、体现一定的创意，设计美观，有艺术价值 设计意图：通过前面对几个案例的解读，学生已经发现了一些网站标志设计的规律，对网站标志具有了初步的鉴赏能力，因此让学生自己去归纳总结出设计优秀的LOGO往往所具备的一些特点，然后教师再进行进一步的总结，使学生对“网站标志”从初步的感知上升到理论的认识，并为下一步的实践提供指导。在了解了Logo设计的理念和常见方法之后，同学们一定也想自已实践一下了吧，下面请同学们为各自的主题网站设计一个符合它主题的Logo吧：学生活动1：为主题网站设计Logo小组讨论，对要设计的Logo

8、进行规划。利用 “A Logo 3.10”软件提供的模板进行辅助设计。设计的支架不够设计意图：此时的学生一定跃跃欲试，有自己实践创作的渴望。通过这一实践让学生初步了解设计的过程，体验创作所带来的成就感。通过A Logo提供的模板，学生只需几个简单的步骤就能创作出漂亮的Logo，降低了初次设计的难度。三、标准色彩标准色彩就是你网站中所使用的主要色彩，生活中每种色彩都有自己的语言，代表了一定的含义，我们先来测试一下，同学们对色彩的理解吧：红 联想到火、太阳，代表热情、喜悦、庆典。绿 清新、健康、环保、是生命的象征。橙 青春、欢乐、时尚，有动感。蓝 联想到天空、大海等，给人以宁静、信任的感觉。紫 有

9、点可爱，优雅，是一种女性化的色彩。白 代表干净、纯洁、简单、公正 黒 庄重、肃穆、神秘。 设计意图：初步了解色彩的语言。设计网站的时候一般要选用多种颜色进行搭配，合理的颜色搭配，不但可以产生良好的视觉效果，而且还能更好的烘托主题。网页1：中国法律法规网信息系统。以蓝色和白色为主，红色是国徽，具有象征意义，切合网站的主题，强调权威与真实。网页2：新浪网：大块的橙色图片、按钮，感觉页面轻快时尚，白色的背景，蓝色的文字，使的阅读的时候眼睛非常舒适，符合新闻类网站的风格。设计意图：通过对两张网页其色彩设计的解读，引导学生发现其设计中存在的规律及应该注意的问题。提问：那么我们在色彩的使用上要注意些什么呢

10、？请同学们讨论回答。学生讨论：讨论在色彩的使用上应该注意的问题。总结：1、设计网站的标准色彩，但一般不要超过3种2、总体协调，局部对比3、结合主题需要选择合适的色彩设计意图：适时归纳，总结规律。为学生的下一步实践提供指导。再来看看我们的主题网站，你认为应该使用什么样的色彩比较好呢？自已尝试着搭配一下。学生活动2：调整主题网站中页面的色彩在FrontPage2000中打开主题网站中主页（index.htm）。尝试为其进行色彩的设计（网页背景、表格背景、单元格背景、文字的颜色）。设计意图：考虑到学生对FrontPage2000的操作不是很熟练，因此在设计这一实践时，尽量避免复杂的操作步骤，并在实践

11、前将具体的操作步骤稍有演示，避免学生因技术的障碍而影响了设计的发挥。三、标准字体标准字体是网站中所采用的主要字体，中文字体有很多，它们都有各自的特点：黑体字：凝重 宋体字：端庄 隶书：飘逸 楷体：淡雅仿宋体：专业 广告体：精美 手写体：亲切随意一般网页里默认的字体是宋体。提出问题：如果设计网站时使用了特别的字体，而浏览者电脑中却没有安装这种字体，会有问题吗？如果有问题该怎么办呢？教师：在服务端编辑“环境保护”网站主页中的字体，学生端通过IE浏览器观察并讨论。小结：设计网站的标准字体应注意的问题。 1、根据网站内涵，选择贴切的字体。2、使用统一的标准字体，特别的字体最好采用图片的形式。学生活动3：调整主题网站中的字体。继续在FrontPage中调整字体，使其符合网站风格。完善作品后，小组评选出一个代表