高中信息技术选修3教案-4.2.3 树立网站整体风格-教科版

《树立网站整体风格》教学设计
一、教材分析
本节内容选自教育科学出版社《网络技术应用（选修）》模块的第四章第二节。本节在栏目设置、版面设计之后，在收集素材之前，在网站设计中是承前启后的关键点。风格是抽象的，给一个主题，任何两个人都不可能设计出完全相同的网站，甚至没有具体的程序可以参照和模仿，所以本节是一个难点，通过一节课的教学使学生熟悉网站整体风格的各个方面是不可能的，因此，在设计时，我在内容上尽量将抽象内容形象化，利用技术学科的优势，将抽象问题转换为技术问题，以观摩和模仿为主，并通过可行性极高的实践，激发学生的创作热情，使学生体验树立网站风格的整个流程，具备树立网站风格的整体意识。
二、学情分析
本节课教学对象是高二学生，他们在信息集成中已经初步学习过网站制作，对FrontPage软件以及网站和网页知识有一定的了解，也具备一定的鉴赏审美能力及语言表达能力，但是他们尚未具备规划网站整体风格的意识，缺乏全局观和整体设计能力。据此学情，本节课将尽量引导学生意识到网站设计的意义，并通过可行性高的实践活动让学生体会网站风格确立的过程。
三、教学目标
1.了解体现网站整体风格的三个方面；了解网站LOGO设计的常见方法；了解色彩的感觉；
2.通过实践，体验网站风格树立的过程；
3.学会扬长避短，体验用技术解决问题所带来的成就感。
四、教学重难点
重点：树立网站风格的三个方面；
难点：在FrontPage中利用软件本身的主题功能实现风格的统一。
五、教学策略
本节课以讲授法、活动引导等方法展开教学。首先通过学生制作网站请求帮助的情景进行导入，引导学生发现网站表面设计出现的问题，在此基础上导入网站形象的设计。网站风格设计是一个很抽象的概念，因此在教学中尽量让学生在观摩模仿中了解。
首先将网站比做人，说明网站需要一个辨识度极高的脸——“网站标志”，通过对著名网站标志的分析，让学生了解LOGO设计的一般过程，活动一让学生在制作完成LOGO过程中，了解LOGO制作的基本要求。
接下来通过一些排版类同但是颜色不同的页面给人带来不同感受导入标准色彩的意义，先通过活动二让学生自己实践，学生没有美术基础，空有技术，肯定会出现问题，这时候分析出现的问题，接着通过“主题”实现网页的快速一致化设计，通过分析主题修改的内容了解到：一、标准色彩一般应用在哪些地方?二、网站页面色彩有几种？从而发现实现网页一致标准的基本原则，接着让学生在了解原则的情况下进一步完善页面设计。
最后通过找茬小游戏，让学生发现教师设计图与实际图的不一致，为了解决这个问题，一般情况下怎么做？让学生思考讨论，教师进行总结分析。之后再化抽象为具体，让学生在实际操作中体会，最后在保存后让学生通过欣赏同班同学作品，选出自己最喜欢的作品，并解释原因，最后教师进行总结。
六、教学过程
情境导入
五一过去了，六一还会远吗？青春期的同学们，已经过了理直气壮的过六一要礼物的时候，为了缅怀自己已经逝去的童年，高一（1）班的小阮同学把童年的回忆做成了一个名为“童年（childhood）”主题网站，请同学一起来欣赏一下：
设计意图：通过有趣的情景导入课堂，引导学生发现网站有内容但是没有审美，从而导入本节课内容，从视觉审美入手，对网站进行处理。
（一）网站标志
把网站比作人的话，网站也需要一张辨识度极高的脸：“网站标志（logo）”，让人一看到就能联想到我们的网站。请同学们识别典型的网站标志（播放PPT）,
教师结合上面的实例介绍LOGO一般设计思路：
选择与网站主题有关的，并具有代表性的人或物，加以卡通化和艺术化；
对于专业化的网站，可以以本专业有代表性的物品作为标志；
使用网站的中文或英文名称作为标志；
(讲解过程中，引导学生发散思维，提问同类别的还有那些？)
【活动一】
小阮同学的网站没有这样一个让人一看到就能联想到的网站LOGO，想请你帮忙设计这样一个LOGO，在设计之前，请先思考：
(1)这些网站标志中，都包含的了网站的什么？（网站名字）网站中的图片是哪一类别的呢？
小阮的网站如果要设计LOGO，需要包含那两部分？(图形加网站名称)
(2)动手制作网站LOGO，你选择使用什么工具？动手进行实践
1）图形图像处理软件(PS,flash等)
2）使用在线logo生成工具(在模板上进行个性化的修改，体会一把大师设计logo的整体过程。
http://www..cn/logo-maker.jsp
http://www.
（教师巡视指导）
(3)请同学们在FrontPage
2000中打开“D:\Myweb\index.htm
”
，将自己的设计图放在页面的合适位置。
教师总结：这些LOGO为什么让你一看到就想到了对应的网站？
优秀LOGO设计的一般特征:
1、能够契合网站的主题
2、符合观赏者的审美习惯
3、体现一定的创意，设计美观，有艺术价值
设计意图：详细讲解了网站标志的设计思路，但是在短时间内让学生完成LOGO的设计是不可能的，所以这里教师引导学生使用在线LOGO生成工具，让学生在模仿和观摩过程中体会LOGO设计的过程。
（二）标准色彩
教师：请同学们欣赏一下几个网站，注意体会，看到它的第一感觉是什么？
（展示PPT,不同色调的网页）
标准色彩；网站给人的第一印象来自于视觉冲击，确定网站的主色调是相当重要的一步，颜色不仅仅是简单的装饰，它有着深远而重要的意义，一个网站的标准色彩要是能够体现网站形象和内涵的色彩。不同的色彩搭配产生不同的效果，并且可能影响到访问者的情绪，改变访问者的行为方式。
举例证明：把肯德基的官网经典红配色改为灰色(左侧为红色，右侧为灰色)：
教师引导颜色有内在含义，为了更好的表达主题，传递信息而服务，导入活动二：
【活动二】让“颜色”说话
1.“童年”主题网站应该让浏览者有____的感觉，你觉得你的童年是_______颜色的。
2.
在FrontPage
2000中打开D:\Myweb\index.htm，通过调整网页、表格、单元格的背景以及网页中标题颜色，将你们的设计呈现出来吧。
（教师巡视，根据情况讲解主题配色）
Frontpage本身内置了很多专业的设计元素和配色方案，直接应用到网页中，即可更改网页甚至整个网站的配色，快速实现整齐统一、专业化的网站设计。分析主题的配色，说明网站配色的一般规则：
学生实践：运用主题对网站作品进行修饰。
教师演示的操作内容：
1主题的应用：
在“格式”菜单上，单击“主题”。
在“主题”
任务窗格中，单击需要的主题
2.
更改主题元素的颜色
在“格式”菜单上，单击“主题”。
在主题的任务窗格中，指向要更改的主题所对应的缩略图，再单击箭头。
单击“自定义”，再单击“颜色”。
在“主题颜色设置”旁边，指定是更改成普通颜色集还是鲜艳颜色集中的颜色。
单击“另存为”保存更改过的主题。
输入主题的新名称（除非修改的是自定义主题），再单击“确定”。
注释??修改预设主题时，必须将所做更改保存为新主题；您无法覆盖预设主题。
3.删除主题：
在“格式”菜单上，单击“主题”。
在“主题”
任务窗格中，单击“无主题”
【活动二续】
学生用主题完成配色，并思考：
（1）主题配色页面色彩主要的修改哪几个色块的颜色，给整体以统一的感觉？（标题，主菜单，主色块）
（2）内置主题的页面整体配色一般有多少种？(一般少于三种)
（3）应用主题之后，主页之外的其他页面有没有变化？
欣赏学生作品，教师总结：
网站配色标准：
1)契合主题
2)标准色彩不超过3种，用于网站的标志、标题和主色块，给人以整齐统一的感觉。一般适合网页标准色的颜色有：蓝色，黄橙色，黑灰白三大系列色。
3)整体协调，局部对比
设计意图：网站的第一印象主要来自于视觉冲击，颜色搭配是影响网站视觉冲击力的大部分因素。通过不同颜色的网站的视觉冲击，引导色彩搭配，在实践动手过程中，学生不是专业的美工，为了降低难度，引导学生使用内置主题进行颜色搭配，从技术角度解决问题，让学生能够及时的完成任务，增加学生的成就感。
（三）标准字体
小游戏：观察一下同学们屏幕上这位同学的作品，跟投影出来的效果有哪些不同？（在教师机访问一个同学作品，投影到屏幕上，冻结屏幕；再将该同学演示给其他同学查看，引导学生观察出字体的不一致），引导学生思考为什么会出现这种情况？
网页上百分之九十的信息是文字，大多数人浏览网页的状态就是阅读，所以，让文字更好地在网页显示，并且给人以美的享受，是一件极其重要的事。导入讨论思考：
1.为了避免设计图和浏览者看到的情况不符合，对于字体应该怎么处理？
2.如果网页中部分地方的确需要特殊字体或艺术字，怎么处理？
教师总结：
标准字体指用于标志、标题、主菜单的特有字体一般默认为宋体。
1.字体的大小设置：网页中字体大小不要乱设置，以系统默认为宜。
2.字体的使用：网页字体的使用一般选择宋体等比较常用的字体，防止用户因没安装对应字体造成显示错误。
3.特殊字体或艺术字体的设置：尽量做成图片置入网页，以保证所有人看到的页面是同一效果。
【活动三】展示评价
1.请同学们对“童年”主题网站上的文字进行进一步美化，并保存网站；
2.关闭自己的网站设计，打开如下链接，欣赏同伴作品，根据本节课所学，选出你觉得最漂亮且独具风格的网站设计。
http://www./lesson/list.htm
设计意图：实现设计特殊字体，通过特殊字体的显示问题引导进入网站标准字体相关问题，此处设计游戏的目的在于活跃课堂气氛。
（四）归纳小结，明确方向
网站标志、标准色彩、标准字体是一个网站树立整体风格的关键，确切的说是网站的表面文章，设计完成这几步，网站将脱胎换骨，整体形象有一个极大的提升！统一的外观设计可以提升网站辨识度，是树立网站独特的风格的一条捷径！