潮人必备洋气铃声-少先队队礼

学习必备 欢迎下载
《树立网站整体风格》教学设计
网站风 格是抽象的，是站点的整体形象给浏览者的综合感受，这个“整体形象”往往从网站标志、标
准色彩、字 体、版面布局、交互性等诸多因素中体现出来。那么如何通过一节课的教学使学生对如何树立
网站整体风 格形成一个初步的认识，如果采用面面俱到的教学，带来的结果很可能是面面皆如蜻蜓点水，
难以留下深 刻的印象。因此在内容上我选择了网站标志、标准色彩、版面设计这几个典型的部分，通过对
经典案例的 解读，将抽象的内容形象化，让学生自己去总结发现设计中的规律与应该注意的问题，并通过
适当的可行 性高的实践，激发学生的创作热情，使学生初步了解如何去树立网站的整体风格，并为以后的
继续学习和 实践提供指导。
【教学目标】
知识与技能目标：
1、 了解体现网站整体风格的要素
2、 了解网站Logo设计的常见方法和设计中应该注意的问题
3、 了解色彩的感觉，能够根据主题的需要选择合适的标准色彩
4、 了解网站版面布局的几种类型及其特点
过程与方法目标：
1、 培养学生的创新思维与审美能力
2、 初步体验设计的过程，并感受创作实践所带来的成就感
【教学重点、难点】对如何树立网站的整体风格形成一个整体的认识
【教学准备】
资源：“篮球爱好者”网站、教师展示课件、学生课件、网页截图、Logo图片
工具：画图工具、Frontpage2000软件
【教学过程】
教师活动
导入：
请同学们欣赏几张网页，你能用语言描述下这几
张网页带给你们的感觉吗？
可口可乐网站页面：充满激情、活力四射……


观察这几张网页截
图，感受这些网页所带来
学生活动






通过几张风格迥异、
视觉冲击力比较强的网
页，引起 学生的兴趣，继
而旗帜鲜明地提出本节
课的课题——树立网站
设计意图
旁氏护肤品网站页面：温柔、清新、很女性化…… 的视觉冲击力，并说出自
魔兽世界网站页面：粗狂、展现了魔幻的世
界……
比较好的 网站往往能呈现出不同的风格，有的清
新秀丽，有的活力四射，有的庄重典雅。那么如何来
树立 网站的整体风格呢？这就是我们这一节课所要
共同探讨的问题。
己的感觉。

学习必备 欢迎下载 请同学们看这张网页(如图1)，这是一个同学设
计的“篮球爱好者”网站中的一页，你发现页面设 计
中存在的问题了吗？






生： 颜色看着不舒服、比较呆板……
那么通过这节课的学习，我们能不能给这个网站
的设计提出修改的建议呢？
生：能！

（一） 网站标志（Logo）
（图1）


整体风 格。并通过一个具
体问题的提出，激发学生
观察“篮球爱好者”的求知欲与解决实际问
网站，并找出其在设计中
存在的不足。









观察网页，看看自己
题的渴望。










通过一个问题的提
出，自然过渡到学习的课
题——网站标志。




选择学生比较熟悉
的并且特征鲜明的网站
标志作为案例来进行解
读，可以降低理解的难
度，使学生容易接受，面
对老师的提问，学生能够
有话 可答，并能有所思
考，可以有效地吸引学生
参与到课堂中来，与教师
形成积极的互动。

通过前面对几个案
例的解读，学生已经发现
看到这张网页（一张新浪新闻网 页）你能联想到能联想到哪些网站，并思
哪些网站呢？
生：新浪网、中国新闻网、谷歌……
那么是什么让你联想到了这些网站呢？
网站标志，也就是我们俗称的Logo。网站标志就如同企业的商标一样，看到它就能够联想到你的网
站。那么如何来设计网站标志，有哪些方法呢？
1、选择与网站主题相关的，例如百度网站的Logo
（如图2），其设计采用了图文结合的方 法，将熊爪
图片与百度文字相结合，灵感来自于“猎人巡迹熊
爪”，切合其网站的搜索理念。并 且每逢重大节日，
百度会和一些创意类“中国大师”合作设计节日Logo，
既烘托了节日的气 氛，更具有一定的艺术性和趣味
性，诸如百度与朱德庸合作创作的元旦节日Logo，
以及与漫 画家几米合作创作的中秋节Logo（如图3）。
2、对于专业性的网站，可以以本专业有代表的物品作为标志，例如苹果企业网站的Logo，其设计
直接采用了其产品的徽标（如图4）。
3、最常用和最简单的方式是用自己的网站的中
考是通过什么联想到这
些网站。

学习必备 欢迎下载
文或者英文名称作标志。例如谷歌、中国雅虎、搜狗
等网站的Logo（如图5）。






（图2）





那么设计成功的Logo往往具备哪些特点呢？
师生总结：
1、 能够切合网站的主题
2、 符合观赏者的审美习惯
3、 体现一定的创意，设计美观，有艺术价
值
欣赏了这么多的网站Logo，同学们一定也有设< br>计的冲动了吧。同学们再看看“篮球爱好者”网站有
没有一个令人印象深刻的Logo呢？
生：没有。
那我们赶紧行动起来，为它设计一个漂亮的Logo
吧。
选择展示具有典型性的学生作品，进行学生互评
与教师点评。
（二） 标准色彩 < br>不同的色彩有不同的色彩语言，会使人产生不同
的心理联想，产生不同的感觉，看到这些颜色你会 产
生哪些联想，有什么样的感觉呢？
课件展示不同的颜色。
红色：联想到火、太阳、鲜血等，感觉到温暖、
有活力、激情、危险……
蓝色：联想到天空、大海等，感觉到宁静、悠远、
（图4） （图5）
（图3）










思考并讨论：一个设
计成功的Logo往往会具
备哪些特点。



打开画图软件，尝试
为篮球爱好者网站设计
一个网站标志，能够简单
表达出自己的创意与设
计理念即可，可以借鉴
“Logo欣赏”里别人的设
计。











了一些网站标志设计的
规律，对网站标志具有了
初步的鉴赏能力，因此让< br>学生自己去归纳总结出
设计优秀的LOGO往往所
具备的一些特点，然后教
师再 进行进一步的总结，
使学生对“网站标志”从
初步的感知上升到理论
的认识，并为下一 步的实
践提供指导。

此时的学生一定跃
跃欲试，有自己实践创作
的渴望。通过这一实践让
学生初步了解设计的过
程，体验创作所带来的成
就感，并在实 践中获得提
高。学生课件的设计可以
帮助学生简化操作步骤，
并提供资源供学生模仿< br>借鉴。

课堂中适时开展评
价，了解课堂教学的效
果，激发学生的学 习动
机，从而有效推动课堂教
学，评价过程中注意教师
点评与学生互评相结合。

学习必备 欢迎下载
充满智慧……
网站采用不同的色彩搭配，能够更好的烘托出主
题，并产生不同的视觉效果。
网页1 ：“中国人民政府网”主页。其页面颜色
设计主要使用了红色与蓝色。红色是我国国旗、国徽
的 颜色，具有象征意义，切合网站的主题，并且红色
搭配以蓝色，给人感觉庄重、权威、真实。
网页2：“上海世博会官方网站”主页。其页面
设计主要使用了绿色与橙色这两种色彩，清新活力的绿色加上欢快的橙色，增添了向上升腾明快的动感，
使得页面感觉轻快时尚，切合上海世博会的主题 ——
“城市让生活更美好”。并且同学们注意到上海世博
会的会徽的颜色设计了吗，也是清新活 力的绿色上一
点欢快的橙黄。
那么在网站设计在色彩的使用上应该注意哪些
问题呢？
师生总结：
1、 设计网站的标准色彩，但一般不要超过
3种
2、 总体协调，局部对比
3、 结合主题需要选择合适的色彩
针对“篮球爱好者”这个网站，你认为应该使用
什么样的色彩比较好呢？
针对学生提出的设计方案，进行学生互评与教师
点评。
（三） 版面设计
如何将网页内容巧妙的排列，以及如何让页面更
吸引人，是版面设计需要考虑的问题。那么，常见的页面布局有哪些呢？
1、“口字型”，例如读者网首页，页面一般上下
各有一个广告条， 左面是主菜单，右面放友情链接等，
中间是主要内容。
优点：充分利用版面，信息量大，与其他页面的
链接多，切换方便。




观察这些页面，体会
这些页面色彩搭配的精
妙之处。








思考并讨论在色彩
的使用上应该注意的问
题。



在FrontPage2000中





通过 对两张网页其
色彩设计的分析解读，引
导学生发现其设计中存
在的规律及应该注意的< br>问题。





适时归纳，总结规
律。为学生的下一步实践
提供指导。

考虑到学 生的认知
差异，因此在学生课件中
设计了具体的操作步骤，
打开“篮球爱好者”网站， 提供技术帮助，避免学生
尝试为其进行色彩的设
计。也可以参考借鉴“网
因技术的障碍 而影响了
设计的发挥，并提供了网
页截图”中网页的设计。 页截图供参考借鉴。

学习必备 欢迎下载
缺点：页面拥挤，不够灵活。
一般适合内容比较多的网站，诸如综合类网站、
资讯门户类网站等。
2、“自由式” ，又称POP布局，例如中国三星网
站主页，页面布局就像是一张海报一样，以一张精美
的画面 作为设计的中心，菜单栏自由摆放。
优点：漂亮、吸引人。
缺点：显示速度慢，文字信息量少。
一般适合艺术、产品企业、游戏等类型网站。








阅读教材，或者通过





“授之以鱼不如授
之以渔”，通过对两种页
面布局的分析解读，学生
已经知道了从什么角度
去分 析，掌握了分析的方
法，提供资源，让学生进
行自主学习，并提出设
想。




“课虽止，思未断”，
进一步拓宽思路，促进学
生思 维的延伸，并为下一
节的教学做好铺垫。
那么常见的版面布局还有哪些呢，如果你为“篮观察 “网页截图”中的
球爱好者”设计，你会为它选择哪一种版面布局呢？ 网页，讨论还有那些常见
学生提出自己的设计方案，学生间进行互评，教的页面的布局，并为“篮
师适时引导。
结束语：
今天这一节课，我们主要从网站标志、标准色彩
以及版面设计等方面探讨了 如何树立网站的整体风
格这一问题。当然网站整体风格不仅仅体现在这些方
面，其它诸如字体的 设置也是很重要的，课后同学们
不妨收集这方面的资料，并且多揣摩，多实践，从而
提高自己的 欣赏设计能力。当然好的网站不仅有漂亮
的外表，更要有其内容，下一节课我们将共同探讨网
站 设计有关栏目设计以及素材收集方面的内容。









球爱好者”主页选择或者
设计一种版面布局。

学习必备 欢迎下载