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

1、树立网站整体风格教学设计网站风格是抽象的，是站点的整体形象给浏览者的综合感受，这个“整体形象”往往从网站标志、标 准色彩、字体、版面布局、交互性等诸多因素中体现出来。那么如何通过一节课的教学使学生对如何树立 网站整体风格形成一个初步的认识，如果采用面面俱到的教学，带来的结果很可能是面面皆如蜻蜓点水，难以留下深刻的印象。因此在内容上我选择了网站标志、标准色彩、版面设计这几个典型的部分，通过对 经典案例的解读，将抽象的内容形象化，让学生自己去总结发现设计中的规律与应该注意的问题，并通过 适当的可行性高的实践，激发学生的创作热情，使学生初步了解如何去树立网站的整体风格，并为以后的 继续学习和实践提供

2、指导。【教学目标】知识与技能目标：1 1、 了解体现网站整体风格的要素2 2、 了解网站 LogoLogo 设计的常见方法和设计中应该注意的问题3 3、 了解色彩的感觉，能够根据主题的需要选择合适的标准色彩4 4、 了解网站版面布局的几种类型及其特点过程与方法目标：1 1、 培养学生的创新思维与审美能力2 2、 初步体验设计的过程，并感受创作实践所带来的成就感【教学重点、难点】对如何树立网站的整体风格形成一个整体的认识【教学准备】资源：“篮球爱好者”网站、教师展示课件、学生课件、网页截图、LogoLogo 图片工具：画图工具、 Frontpage2000Frontpage2000 软件【教学过

3、程】教师活动学生活动设计意图导入：请同学们欣赏几张网页，你能用语言描述下这几张网页带给你们的感觉吗？观察这几张网页截可口可乐网站页面：充满激情、活力四射.图，感受这些网页所带来旁氏护肤品网站页面：温柔、清新、很女性化的视觉冲击力，并说出自魔兽世界网站页面：粗狂、展现了魔幻的世己的感觉。界通过几张风格迥异、比较好的网站往往能呈现出不同的风格，有的清视觉冲击力比较强的网新秀丽，有的活力四射，有的庄重典雅。那么如何来页，引起学生的兴趣，继树立网站的整体风格呢？这就是我们这一节课所要而旗帜鲜明地提出本节共同探讨的问题。课的课题一一树立网站请同学们看这张网页 （如图 1 1） ， 这是一个同学设 计的“

4、篮球爱好者”网站中的一页， 你发现页面设计 中存在的问题了吗？生：颜色看着不舒服、比较呆板那么通过这节课的学习，我们能不能给这个网站 的设计提出修改的建议呢？生：能！（一） 网站标志（LogoLogo）看到这张网页（一张新浪新闻网页）你能联想到 哪些网站呢？生：新浪网、中国新闻网、谷歌那么是什么让你联想到了这些网站呢？网站标志，也就是我们俗称的 LogoLogo。网站标志 就如同企业的商标一样， 看到它就能够联想到你的网 站。那么如何来设计网站标志，有哪些方法呢？1 1、选择与网站主题相关的，例如百度网站的 LogoLogo（如图 2 2）,其设计采用了图文结合的方法，将熊爪 图片与百度文字相

5、结合，灵感来自于“猎人巡迹熊 爪”，切合其网站的搜索理念。并且每逢重大节日， 百度会和一些创意类“中国大师”合作设计节日 LogoLogo, 既烘托了节日的气氛，更具有一定的艺术性和趣味 性，诸如百度与朱德庸合作创作的元旦节日LogoLogo,以及与漫画家几米合作创作的中秋节LogoLogo（如图 3 3）。2 2、对于专业性的网站，可以以本专业有代表的物品作为标志，例如苹果企业网站的LogoLogo,其设计直接采用了其产品的徽标（如图4 4）。3 3、 最常用和最简单的方式是用自己的网站的中观察“篮球爱好者”网站，并找出其在设计中存在的不足。整体风格。并通过一个具 体问题的提出，激发学生 的

6、求知欲与解决实际问 题的渴望。观察网页，看看自己 能联想到哪些网站， 并思 考是通过什么联想到这 些网站。通过一个问题的提 出，自然过渡到学习的课 题 网站标志。选择学生比较熟悉 的并且特征鲜明的网站 标志作为案例来进行解 读，可以降低理解的难 度，使学生容易接受，面 对老师的提问，学生能够 有话可答，并能有所思 考，可以有效地吸引学生 参与到课堂中来，与教师 形成积极的互动。通过前面对几个案例的解读，学生已经发现等网站的 LogoLogo （如图 5 5）。（图 2 2）6（图 4 4）那么设计成功的 LogoLogo 往往具备哪些特点呢？师生总结：1 1、能够切合网站的主题2 2、符合观赏

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

8、或者英文名称作标志。例如谷歌、中国雅虎、搜狗Bai&百ISBai度Bai iS思考并讨论：一个设 计成功的 LogoLogo 往往会具 备哪些特点。打开画图软件，尝试 为篮球爱好者网站设计 一个网站标志，能够简单 表达出自己的创意与设 计理念即可，可以借鉴“LogoLogo 欣赏”里别人的设计。了一些网站标志设计的 规律，对网站标志具有了 初步的鉴赏能力，因此让 学生自己去归纳总结出 设计优秀的 LOGLOGO O往往所 具备的一些特点，然后教 师再进行进一步的总结，使学生对“网站标志”从 初步的感知上升到理论 的认识，并为下一步的实 践提供指导。此时的学生一定跃 跃欲试，有自己实践创

9、作 的渴望。通过这一实践让 学生初步了解设计的过 程，体验创作所带来的成 就感，并在实践中获得提 高。学生课件的设计可以 帮助学生简化操作步骤，并提供资源供学生模仿 借鉴。课堂中适时开展评 价，了解课堂教学的效 果，激发学生的学习动 机，从而有效推动课堂教 学，评价过程中注意教师 点评与学生互评相结合。（图 3 3）（图 5 5）充满智慧网站采用不同的色彩搭配，能够更好的烘托出主 题，并产生不冋的视觉效果。网页 1 1: “中国人民政府网”主页。其页面颜色 设计主要使用了红色与蓝色。红色是我国国旗、 国徽的颜色，具有象征意义，切合网站的主题，并且红色 搭配以蓝色，给人感觉庄重、权威、真实。网页

10、 2 2: “上海世博会官方网站”主页。其页面 设计主要使用了绿色与橙色这两种色彩，清新活力的绿色加上欢快的橙色，增添了向上升腾明快的动感， 使得页面感觉轻快时尚，切合上海世博会的主题一一“城市让生活更美好”。并且冋学们注意到上海世博 会的会徽的颜色设计了吗， 也是清新活力的绿色上一 点欢快的橙黄。那么在网站设计在色彩的使用上应该注意哪些问题呢？师生总结：1 1、设计网站的标准色彩， 但一般不要超过3 3 种2 2、总体协调，局部对比3 3、结合主题需要选择合适的色彩针对“篮球爱好者”这个网站，你认为应该使用 什么样的色彩比较好呢？针对学生提出的设计方案，进行学生互评与教师 点评。（三）版面设

11、计如何将网页内容巧妙的排列，以及如何让页面更 吸引人，是版面设计需要考虑的问题。那么，常见的 页面布局有哪些呢？1 1、“口字型”，例如读者网首页，页面一般上下 各有一个广告条，左面是主菜单，右面放友情链接等， 中间是主要内容。优点：充分利用版面，信息量大，与其他页面的 链接多，切换方便。观察这些页面，体会 这些页面色彩搭配的精 妙之处。思考并讨论在色彩 的使用上应该注意的问 题。在 FrontPage2000FrontPage2000 中 打开“篮球爱好者”网站， 尝试为其进行色彩的设 计。也可以参考借鉴“网 页截图”中网页的设计。通过对两张网页其 色彩设计的分析解读，引 导学生发现其设计中

12、存 在的规律及应该注意的 问题。适时归纳，总结规 律。为学生的下一步实践 提供指导。考虑到学生的认知 差异，因此在学生课件中 设计了具体的操作步骤， 提供技术帮助，避免学生 因技术的障碍而影响了 设计的发挥，并提供了网 页截图供参考借鉴。缺点：页面拥挤，不够灵活。一般适合内容比较多的网站，诸如综合类网站、 资讯门户类网站等。2 2、“自由式”，又称 POPPOP 布局，例如中国三星网 站主页，页面布局就像疋 张海报 样，以 张精美的画面作为设计的中心，菜单栏自由摆放。优点：漂亮、吸引人。缺点：显示速度慢，文字信息量少。一般适合艺术、产品企业、游戏等类型网站。那么常见的版面布局还有哪些呢，如果你为“篮球爱好者”设计，你会为它选择哪一种版面布局呢？学生提出自己的设计方案，学生间进行互评，教师适时引导。结束语：今天这一节课，我们主要从网站标志、 标准色彩 以及版面设计等方面探讨了如何树立网站的整体风 格这一问题。当然网站整体风格不仅仅体现在这些方 面，其它诸如字体的设置也是很重要的，课后冋学们不妨收集这方面的资料，并且多揣摩，多实践，从而 提高自己的欣赏设计能力。当然好的网站不仅有漂亮的外表，更要有其内容，下一节课我们将共冋探讨网 站设计有关栏目设计以及素材收