网页横幅广告的制作
科任：谢志滨
一、教材与学情
1【教材分析】
本课是选自高等教育出版社——《photoshop cs4网页设计》第四章第5节。

始终贯穿的一个理念就是“练中学，练中教”，本堂课也是基于此理念设计的。

本节以制作网页的横幅广告为例安排主题任务活动，要求学生综合运用photoshop 的基本知识和技能，主动探索完成横幅广告的制作。

本节共3课时，这堂课是第三课时，前面初步学习了文字工具、渐变色填充工具及抠图的操作方法,简单LOGO的制作；本堂课利用制作横幅广告的过程中，进一步深入学习插入立体字、横幅广告制作的要点的操作方法；提升学生对这些知识点的运用能力。

2【学情分析】
教学对象是13级计算机的学生，他们在本学期中已经学习过了网页制作的知识以及photoshop的一些相关知识点。

他们对动手操作方面比较感兴趣，而且对
利用photoshop制作网页比较感兴趣，学习网页广告的制作是对他们综合运用能
力的考察。

因此，我通过小组合作与自主探究的方法来考察他们对之前知识点的掌握情况，也培养他们团队合作的精神。

3【教材处理】
我对教材内容进行了一些处理，设计了几个网页中使用到横幅广告的展示，激发学生的学习热情，然后提出本堂课的学习任务，让学生们能够有效的利用PS 软件操作技能进行设计。

教学任务由浅入深，在教学中做到教、学、练、情四合一，让学生练有所思，学有所悟。

二、教学大纲
1【教学目标】
知识与技能：
1、掌握立体字的制作方法，能够使用多个图层的方法制作出立体字。

2、理解魔术棒工具的作用，掌握抠图的方法。

3、能运用PS的相关知识独立设计美观大方的版面。

情感态度与价值观：
1．养成勇于探究、团结合作的习惯。

2、锻炼学生的动手操作能力和独立思考问题的习惯。

3、培养学生发现美、感受美的艺术能力。

2【教学重点与难点】
重点：（1）制作横幅广告的注意要点
（2）魔术棒工具的使用,渐变工具的使用。

（3）立体字的制作。

难点：（1）多个图层制作出立体字。

（2）运用PS的相关知识独立设计美观大方的横幅。

3【课时】:1课时
三．教法学法
1【教法】:通过观察、提问、讨论、上机探索、小组共学互教，掌握页面设置、报头制作、正文编辑的方法。

在课堂导入环节，我采用情景教学法，课堂核心环节上，以任务驱动法为主，实现新旧课程的结合应用，重在学以致用。

并通过讲解示范、自主探究、计论交流等手段，突出重点，突破难点。

2【学法】:自主探究法、分析协作法、总结归纳法
四．教学过程
1【课前准备】
（1）学生分组
课前给学生分好组，每组5人、共5组，每组安排一名平时动手能力较强、做得较快的学生当小组长，在自主学习的过程当中，在自己完成的前提下辅助其他组员完成学习任务。

设计意图：期望以优带差，优劣互补，团结协作，互相激励，共同进步。

（2）材料分发
课前几分钟把本堂课的学习材料分发到每台学生机的桌面上。

设计意图：便于学生课上进行探究式学习。

2【课堂环节】
（1）创设情景，导入新课
1、横幅广告页面欣赏
先让学生们欣赏课本中介绍制作好的横幅广告页面样例，头脑中有个横幅广
告的概念与框架。

2、启发学生回忆旧知
通过欣赏横幅广告页面，让学生回忆之前学过的知识点，对横幅广告页面有
个新的认识。

（2）讲解知识，分析制作要点
1.横幅广告简介
横幅广告，英文叫banner,一个表现商家的广告内容，放置在网页的页面上，是
互联网广告中最基本的广告形式，格式主要有flash动画和图片。

2．横幅广告尺寸
a、横幅:468*60728*90950*90760*90760*60
250*60234*60120*60950*250950*410
b、竖幅:160*600120*600120*240
c、方幅:336*280300*250250*300
250*250200*200180*250
3.制作横幅广告制作要点
a、顾及网站内容的定位
因为包含内容不同，门户网站各个频道有着不同的风格，所以设计师们做设
计的时候也要考虑到如体育频道的运动感，财经频道的国际和高端等。

b、顺应用户的浏览习惯
我们知道大多数的用户在浏览网页的时候都是从上到下，从左到右的浏览。

为了
使banner更容易被用户浏览,我们应该顺应用户这样的浏览习惯，糟糕的设计会
让用户无所适从，焦点到处都是。

c、明白文字在Banner中占主导地位
从构成上讲，一个banner分为2个部分，一为文字，二为辅助图。

辅助图虽然
占据大多数的面积，但是不加以文字的说明，很难让用户知道这个banner要说
明什么。

要读一个人的喜怒哀乐，只要读其五官即可。

在一个banner里面，标
题文字起着五官一样的作用，所以个人觉得文字才是整个banner的主角。

所以
对于文字的处理，显得尤为重要。

d、横幅广告中文字处理的两个技巧
技巧1:如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行
权重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不
大的词。

技巧2：如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。

如加点英文，域名，频道名等。

（3）布置任务，明确目标
实训——模仿小米网站上的促销广告完成效果图
要求：（1）制作一个以“hello春天”为主题的促销广告。

（2）主题突出，内容结构合理，版面美观，有创意。

（3）独立完成，完成后保存，用姓名命名，提交作业。

1、新建文件：大小950*410,分辨率72，背景白色。

2.选择渐变工具：白色到天蓝径向渐变，填充背景。

3.制作”HELLO春天！“立体字，字体为黑体，多个图层实现。

4．制作“踏青必备配件特惠专场”文字及底色，可以考虑做倒影字，效果会更
好。

5．制作仅一周的文字。

6.利用魔术棒工具抠出花草放在底部。

（4）讨论交流，评价反馈
从整体效果、创意性、艺术性、完整性、技术性等方面进行评价，同时让学生参与主动的评价。

最后引导学生提出一些改进的意见，并互相学习与互相借鉴。

（5）课堂小结
“学到了什么？”本堂课我们一起回顾一下知识点，介绍了什么是横幅广告，横幅广告的尺寸，重点是制作横幅广告的四个要点,最后完成模仿小米网站上商品促销广告的实例，通过这个实例对前面知识点的映衬及加深理解。

分析一下。

（6）扩展技能
1.上网看看网页中的横幅广告，想想自己能不能制作出来？
2.抓住春天尾巴，周末出去踏青。

五、教学反思
教学中导入要有创意，有利于提高学生的注意力。

实践操作过程中学生按学习计划一步步完成任务。

加强对学生的个别指导，发挥学生自主探索学习的能动性。

学生是上机课的主角都有着各不相同的思维方式、学习方法和认识水平。

学勤劳的蜜蜂有糖吃
生展示操作要多，对学生作品进行适当评价。