景德镇政府-图片尺寸修改

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

盐城市南洋中学 王健


【教材分析】
《树立网站整体风格》是高中选修教材《网络技术应用》（教科版） 第四章第2节的内容。网
站风格是抽象的，是站点的整体形象给浏览者的综合感受，这个整体形象往往从 网站标志、标准
色彩、标准字体等元素中体现出来。通过对经典案例的解读，将抽象的内容形象化，让学 生自己
去总结发现设计中的规律与应该注意的问题，并通过适当实践，激发学生的创作热情，使学生初< br>步了解如何去树立网站的整体风格，并为以后的继续学习和实践提供指导。
【学情分析】 本案例的对象为高一年级第二学期的学生，前面已经学习了网站的规划、网站设计中的栏目
的设置与 版面设计，对美有一定欣赏和鉴赏能力，但对从哪些方面去树立网站的整体风格，还缺
乏整体的认识。F rontPage2000操作虽然上学期学过一点，但并不熟练。
【教学目标】
知识与技能：
1、了解体现网站整体风格的要素。
2、了解网站Logo设计的常见方法和设计中应该注意的问题。
3、了解色彩的感觉，能根据主题的需要设计标准色彩。
4、了解字体的特点，能根据主题的需要设计标准字体。知道使用特殊字体时应注意的问题。
过程与方法：
通过对案例的解读，让学生自已去总结发现设计中的规律与应该注意的问题。
情感、态度与价值观目标：
提升学生的创新思维与审美能力。
【教学重点、难点】对如何树立网站的整体风格形成一个整体的认识
【教学准备】
资源：主题网站、教师展示课件
工具：FrontPage2000软件、A Logo 3.10、IIS
【教学策略】
本课中首先通过与优秀网站的对比，分析学生作品中的不足 之处，然后在完善这个作品过程
中，引导学生从网站标志、标准色彩、标准字体方面树立网站的整体风格 。通过自身的实践，体
验到网站设计的乐趣。
【教学过程】
一、创设情境，引入课题
1、请同学们欣赏几张网页，同时思考一下这些网页具有怎样的风格？
第 1 页

我们发现较好的网站往往都具有其独特的风格，有的活泼可爱、有的清新秀丽 、有的温文尔
雅、有的执着热情 „„ ，那么如何来树立网站的整体风格呢，这就是我们今天这节课所要共同
探讨的问题。
2、展示几个学生作品，分析存在不足：
学生：颜色搭配不舒服
字体杂乱 „„
教师：网站的整体风格是属于外观的设
计，色彩与字体肯定是属于风格的一部分，
那还 有什么跟网站的风格有关呢？
设计意图：通过几张风格迥异、视觉冲
击力比较强的网页，引起 学生的兴趣，继而
旗帜鲜明地提出本节课的课题——树立网站
整体风格。并通过一个具体问题的 提出，激发学生的求知欲与解决实际问题的渴望。
二、网站标志（Logo）
小游戏：（快 速播放一组网页截图），比一比，记一记，看谁记得多，并思考你是怎么知道这
些网站的名称的？（部分 截图如下）

设计意图：在快速播放的一组网页中，要想知道网站的名称，学生们很自然地会 关注到网站
的标志。从而引出树立网站整体风格的第一步就是要设计出一个好的网站标志。
第 2 页

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

这类Logo的设计方法是选用与网站主题有关的，并具有代表性的人或物，用它们作为设计蓝
本，加以 卡通化和艺术化设计出来的。
2、中国银行、奔驰汽车企业网站的Logo，其采用的是本专业的有代表性的物品。

3、谷歌、中国雅虎、搜狗、联想等网站的Logo，采用将自己网站的中文或者英文名称作为
网站标志的设计方法。这是最常用也是最简单的一种设计方法，将自己的名称采用不同的字体、
字母的变 形与组合，可以很容易地制作出自己的标志。

设计意图：通过对几个知名网站的Logo的 解读，使学生了解网站Logo设计通常采用的几种
方法，从而为学生的下一步实践提供指导。以及在解 读的过程中，注意指明一些Logo设计的成功
所在，引导学生发现其规律。
提问：一个设计成功的Logo往往具备哪些特点呢？请讨论回答。
学生活动：讨论一个设计成功的Logo往往具有哪些特点。
总结：
1、能够契合网站的主题
2、符合大众的审美习惯、清楚易记。
3、体现一定的创意，设计美观，有艺术价值
设计意图：通过前面对几个案例的解读 ，学生已经发现了一些网站标志设计的规律，对网站
标志具有了初步的鉴赏能力，因此让学生自己去归纳 总结出设计优秀的LOGO往往所具备的一些特
点，然后教师再进行进一步的总结，使学生对“网站标志 ”从初步的感知上升到理论的认识，并
第 3 页

为下一步的实践提供指导。
在了解了Logo设计的理念和常见方法之后，同学们一定也想自已实践一下了吧，下面请同学
们为各自的主题网站设计一个符合它主题的Logo吧：
学生活动1：为主题网站设计Logo
⑴小组讨论，对要设计的Logo进行规划。
⑵利用 “A Logo 3.10”软件提供的模板进行辅助设计。
设计意图：此时的学生一定跃跃欲试，有自己实践创作的渴 望。通过这一实践让学生初步了
解设计的过程，体验创作所带来的成就感。通过A Logo提供的模板，学生只需几个简单的步骤就
能创作出漂亮的Logo，降低了初次设计的难度。
三、标准色彩
标准色彩就是你网站中所使用的主要色彩，生活中每种色彩都有自己的语言，代 表了一定的
含义，我们先来测试一下，同学们对色彩的理解吧：
红 联想到火、太阳，代表热情、喜悦、庆典。
绿 清新、健康、环保、是生命的象征。
橙 青春、欢乐、时尚，有动感。
蓝 联想到天空、大海等，给人以宁静、信任的感觉。
紫 有点可爱，优雅，是一种女性化的色彩。
白 代表干净、纯洁、简单、公正 „„
黒 庄重、肃穆、神秘。
设计意图：初步了解色彩的语言。
设计网站的时候一般要选用多种颜色进行搭配，合理的颜色 搭配，不但可以产生良好的视觉
效果，而且还能更好的烘托主题。
网页1：中国法律法规网信 息系统。以蓝色和白色为主，红色是国徽，具有象征意义，切合
网站的主题，强调权威与真实。
网页2：新浪网：大块的橙色图片、按钮，感觉页面轻快时尚，白色的背景，蓝色的文字，
使的阅读的 时候眼睛非常舒适，符合新闻类网站的风格。

设计意图：通过对两张网页其色彩设计的解读 ，引导学生发现其设计中存在的规律及应该注
意的问题。
提问：那么我们在色彩的使用上要注意些什么呢？请同学们讨论回答。
第 4 页

学生讨论：讨论在色彩的使用上应该注意的问题。
总结：1、设计网站的标准色彩，但一般不要超过3种
2、总体协调，局部对比
3、结合主题需要选择合适的色彩
设计意图：适时归纳，总结规律。为学生的下一步实践提供指导。
再来看看我们的主题网站，你认为应该使用什么样的色彩比较好呢？自已尝试着搭配一下。
学生活动2：调整主题网站中页面的色彩
⑴在FrontPage2000中打开主题网站中主页（）。
⑵尝试为其进行色彩的设计（网页背景、表格背景、单元格背景、文字的颜色）。
设计意图： 考虑到学生对FrontPage2000的操作不是很熟练，因此在设计这一实践时，尽量
避免复杂的 操作步骤，并在实践前将具体的操作步骤稍有演示，避免学生因技术的障碍而影响了
设计的发挥。
三、标准字体
标准字体是网站中所采用的主要字体，中文字体有很多，它们都有各自的特点：
黑体字：凝重 宋体字：端庄 隶书：飘逸 楷体：淡雅
仿宋体：专业 广告体：精美 手写体：亲切随意
一般网页里默认的字体是宋体。
提出问题：如果设计网站时使用了特别的字体，而浏览者电脑 中却没有安装这种字体，会有
问题吗？如果有问题该怎么办呢？
教师：在服务端编辑“环境保护”网站主页中的字体，学生端通过IE浏览器观察并讨论。
小结：设计网站的标准字体应注意的问题。
1、根据网站内涵，选择贴切的字体。
2、使用统一的标准字体，特别的字体最好采用图片的形式。
学生活动3：调整主题网站中的字体。
⑴继续在FrontPage中调整字体，使其符合网站风格。
⑵完善作品后，小组评选出一个代表作。
⑶按要求上传小组代表作并在线进行作品自评与互评。
五、课堂小结
今天这一节课 ，我们主要从网站标志、标准色彩以及标准字体等方面探讨了如何树立网站的
整体风格这一问题。网站风 格一旦确立，网站中所有页面都要采用这风格。当然一个好的网站不
仅要有一个好的风格。更要有丰富内 容，所以还需同学们广泛地搜集素材。相信大家只要多努力、
多实践，我们一定能设计出优秀的主题网站 。
第 5 页