《网页设计与制作》相关资源教学设计职业活动教学设计(第3章)

1、职业活动教学设计单元 名称第三章网页效果图制作学时8单元 简介在商务网站用户需求分析的根底上，前面已经规划了网站的栏目结构，绘制了网页的草图，确定了要设计制作的网贝根本风格及贝囿内容布局结构。本章接卜来要介绍的，就是如何制作与真实网页相一致的效果图，并对效果图进行切片处理，以获得制作最终页面所需要的所有图片素材及页面布局结构尺寸。能力 目标熟悉使用PhotoShop制作网贝效果图的流程；掌握PhotoShop中图层组的设置；掌握利用PhotoShop制作网页效果图的方法；掌握PhotoShop中对效果图进行切片处理的方法。实训 内容1、单元综合实训：企业网站首页效果图制作实训背景同实训二在实训

2、二完成的根底上，为该网站首页制作效果图。2、技能训练技能训练3-1:图片素材收集与处理在效果图图3-3左侧“联系我们处，要用到“机的小图片。请上网选取该图片，并适当调整大小，填写一表见教材表3-2:国片素材的选取及格式转换技能训练3-2:字体下载与安装请给出三个可以下载字体的网址，比拟它们的特点，并下载“微软雅黑字体 到系统字体库中，填写卜表。见教材表3-3:特殊字体的下载与安装技能训练3-3:图层结构规划请依据第二章中提供的“某牙齿保健产品公司的网站首页草图图片：WYT030201网站首页草图案例,规划其效果图图层结构，并在Photoshop中实现。技能训练3-4: LOGO设计与制作请为你

3、所在学校网站重新设一个LOGO ,并将操作的结果填入下表见教材表3-5:国片素材的选取及格式转换技能训练3-5: Banner图片制作请为以上苗木基地网站首页设计制作第二张Banner轮显图片，该轮显图片重点展示基地的荣誉资质或特色苗木， 相关素材可在网上搜集， 并将操作结果填入下 表：见教材表3-6: Banner图片的设计与制作技能训练3-6:效果图编辑对给定效果图主体内容区仅完成局部进行操作，参照教材图3-93中尺寸要求，完成“基地简介、资质荣誉、基地展示、经典工程四个主体内容模块的制 作，以形成完整的效果图。技能训练3-7:效果图切片与管理请自己动手完成效果图的切片。注意养成一个好的习

4、惯，对各个重要切片设置一个后思义的名子，如教材图3-109中第15号切片，可命名为 banner。最后，将整个效果图另存为 web格式，观察生成的images文件夹中的文件与教材图3-115所示文件的区别。相关知识图层、图层组、选区、 LOGO、Banner相关知识【教学方法设计】1以“任务驱动式为主要教学模式。教师通过任务把各教学目标和内容有机 地结合在一起，使学生置身于提出问题、思考问题、解决问题的动态学习过程中。学生 完成任务的同时，也完成了需要到达的学习目标的学习。2采用协作学习的教学模式。学生在与他人进行交流与沟通的同时，互相取长 补短，共同进步。3创设学习情境，激发学生的学习兴趣。

5、教师在导入新课时可演示不同层次的 优秀网页效果图作品，例如国内外著名的网站首页、优秀个人网站、教师本人制作的网 站、往届学生的作品。这些作品不但能提高学生的鉴赏能力，还可以提高学生的学习兴 趣和求知欲望。【教学设计思路】本次课主要偏重实践，又有一定的理论知识。如果教师讲解得太多就会显得枯燥， 因此本次课的设计思路是从具体的目标任务入手，引导学生进行观察、思考、分析、讨 论，最后得出解决问题的方法，形成解决问题的方案，到达从理论到实践应用的目的。整个教学过程围绕赏-析-演-练-评展开。我们注重的是学生实际操作技能的培养， 90分钟课堂，学生参与实践的时间比例为50%左右。这样就让我们的学生在实践

6、中学到真知，同时也培养他们小组协作能力与合作精神。教师的主要任务是在于积极地引导与调动学产生，鼓励学生积极、主动地实践，从而完成任务。【教学过程设计】本学习单元共8课时：任务一网页素材的选取1课时任务二图层组的管理任务三网页兀素的编辑课时任务四效果图切片1课时技能训练1课时教学具体时间安排及教学过程如下：设计一、引入20分钟教师可以选择素材库中的十个精美网页效果图展示给学生看，然后请学生看十个高年级学生使用Photoshop制作的网页效果图。通过以上效果图的浏览并介绍，每个学生 都已跃跃欲试了。此时教师做一个过渡：“刚刚大家看到的每一个图片都是一个网页效果图，这些网页有的美观大方，有的丰富多彩

7、，有的个性鲜明，那么我们自己能不能制 作出具有自己风格的网页效果图呢？ 学生一定会说“能。今天我们就一起来学习怎样使用PHOTOSHOP在已有草图的根底上制作网页效果图。教师导出本节课的教学目 标。【提问】：在完成客户需求分析，并绘制了草图的根底上，后续的网页制作过程有 哪些呢？二、图片素材的获取10分钟教师分析比拟网页中常用的图片格式，如教材表3-1所示。教师翻开并演示网络上比拟知名的图片素材网站。引导学生习惯在网络搜集图片素材。播放视频： WYS030101 QQ图标选取操作视频。 三、图片格式转换10分钟教师讲解并演示常用的图片转换工具ACDSee、美图秀秀等，演示图片格式的转换。四、特

8、效字体选取5分钟教师讲解并演示特效字体的下载及安装。五、课后实训“技能训练3-1图片素材收集与处理WYD030101 可安排为课后实训，并在 下次课点评。要求学生浏览效果图教材图3-3左侧“联系我们处，针对要用到“机的小图片，上网选取该图片，并适当调整大小，填写下表 教材表3-2国片素材的选取及格式转换：“技能训练3-2字体下载与安装WYD030102可安排为课后实训，并在下次 课点评。要求学生找出三个可以下载字体的网址，比拟它们的特点，并下载“微软雅黑字体到系统字体库中，填写下表教材表3-3特殊字体的下载与安装。六、图层组结构规划25分钟教师演示并讲解Photoshop的工作界面。教师演示并

9、讲解新建首页效果图文件。注意简要讲解 Photoshop中图像的颜色模式教师演示并讲解 Photoshop各种图层使用教材表 3-4及教材图3-12。教师演示并讲解保存首页效果图文件。注意调出图层面板，引导学生讨论PSD格式文件与JPG格式文件的差异。教师使用教材图3-14,分析网站首页效果图的图层组划分。教师演示并讲解图层组的创立，播放视频WYS030201图层组创立操作视频。七、课后实训“技能训练3-3图层结构规划可安排为课后实训， 并在下次课点评。要求学生请 依据第二章中提供的“某牙齿保健产品公司的网站首页草图图片：WYT030201网站首页草图案例,规划其效果图图层结构，并在 Phot

10、oshop中实现。 八、网站Logo制作45分钟教师讲解常用的网站 LOGO的设计手法。使用图片：WYT030301Logo设计方法- 标识手法 卜图片：WYT030302Logo 设计方法-卡通手法、图片：WYT030303Logo 设计方法-几何构成法卜图片：WYT030304Logo设计方法-其它方法采用资源库中 提供的网页效果图案例，引导学生分析各LOGO的设计手法教师讲解Logo的设计技巧。教师讲解网站Logo的一般尺寸。教师演示并讲解AAALOGO软件的使用。教师演示并讲解头部区域的制作。九、课后实训“技能训练3-4 LOGO设计与制作可安排为课后实训，并在下次课点评。要求学 生为

11、所在学校网站重新设计一个 LOGO,并将操作的结果填入下表教材表3-5: LOGO 设计与制作。十、Banner制作45分钟教师讲解网页 Banner的设计原那么， 使用案例图片：WYT030305Banner的设计样 例。教师演示并讲解 Banner的制作过程。使用图片：WYT030306Banner制作案例素材 -苗木基地全景图。可考虑播放视频 视频：WYS030302BNNER 制作操作视频。教师翻开并讲解常用的网页Banner制作网站。十一、课后实训“技能训练3-5 Banner图片制作可安排为课后实训，并在下次课点评。要求学 生为“碧雅园花卉苗木基地网站首页设计制作第二张Banner

12、轮显图片，该轮显图片重点展示基地的荣誉资质或特色苗木，相关素材可在网上搜集，并将操作结果填入下表教材表3-6: Banner图片的设计与制作。 十二、导航制作45分钟教师选区资源库中提供的网页效果图，引导学生赏析网页导航。提高学生审美水平。教师演示并讲解导航的制作。着重讲解图层样式及选区的各种操作。教师演示并讲解制作其它效果的导航栏。可考虑播放视频WYS030303导航制作操作视频。十三、主体内容制作45分钟教师演示并讲解主体内容的制作过程，使用素材图片：WYT030308-WYT030317主体内容区制作案例素材-基地及工程案例图教师演示并讲解图片素材的调整。使用素材图片：WYT030318

13、图像调整案例用图可考虑播放视频WYS030304页面主体内容制作操作视频 十四、课后实训“技能训练3-6效果图编辑可安排为课后实训，并在下次课点评。要求学生对 给定效果图主体内容区仅完成局部进行操作，参照教材图3-93中尺寸要求，完成“基地简介、资质荣誉、基地展示、经典工程四个主体内容模块的制作，以形成完整 的效果图。十五、图片修整20分钟教师演示并讲解效果图大小调整、色相/饱和度调整、扩展画布。可考虑播放视频WYS030305图片修整操作视频 十六、切片工具的使用25分钟教师演示并讲解效果图的切片及切片原那么。可考虑播放视频WYS 030401效果图切片操作视频。 十七、编辑切片20分钟教师

14、演示并讲解效果图的切片的编辑以及生成切片。 十四、课内实训45分钟如果时间充足，“技能训练3-6效果图编辑可安排为课内实训，并在下次课点评。 选区资源库中的网页效果图， 邀请学生动手完成效果图的切片。 引导养成一个好的习惯， 对各个重要切片设置一个有意义的名字，如教材图3-109中第15号切片，可命名为banner。最后，将整个效果图另存为 web格式，引导观察生成的images文件夹中的文件 与教材图3-115所示文件的区别。注:案例素材（WYA030401 -WYA030430效果图案例），要提供应学生作为课后拓 展训练模版。十五、单元实训8课时动画：WYD030000 企业网站首页效果图

15、制作实训本单元实训内容为企业网站首页制作效果图。采用动画的形式实现。实训的完成需有上网条件，在实训过程中涉及上网浏览等操作。本实训内容的设计强调是网页效果图实现问题，即Photoshop制作网页效果图的问题。十六、自主学习学生课后可使用资源 “WYS030001-WYS030049Photoshop操作和使用系列视频 自主学习Photoshop这一工具软件的操作和根本使用。课外技能训练：WYD030001、WYD030002教学 资源WYT030101、WYT030102、WYT030103、WYS030101、WYD030101、WYD030102、WYS030102、WYS030201、WYT030201、WYS030301、WYT030301、WYT030302、WYT030303、WYT030304、WYS030302、WYT030305、WYT