《中文版Photoshop CS6案例教程》（邹新裕）335-1教案 第9章 网页制作

第9章综合案例制作课题第一节按钮制作课时教学内容1、掌握Photoshop制作按钮的方法2、了解网站首页的组成内容教学目标掌握Photoshop制作按钮的方法；了解网站首页的组成内容教学重点网站首页的组成内容教学难点掌握Photoshop制作按钮的方法教学活动及主要语言学生活动一、创设意境，导入新课（设疑法、提问法）导入：网站首页是一个网站的门面，要想设计出一个优秀的网站，就必须让它能引人入胜，能吸引每一个来访者的注意力，引起人们的好奇心。优秀的首页是一个好的网站必须具备的要素。在网页制作过程中，Photoshop软件起到了重要的作用。本章课程将学习网页的总要组成内容的制作方法。提出疑问：老师现在有个问题,请一位同学来回答：网站首页包含了那些元素？由同学做答，老师补充并引入新课题：总要组成内容：按钮、GIF动画、网页LOGO、网页导航、网站首页排版等。接下来看本节课案例效果图：二、新课教学（讲解法、提问法、示范法、练习法）1、新建文件，使用“圆角矩形”工具在工具属性栏中设置参数，固定大小值为（W:20,H:6）、半径为30像素。绘制圆角矩形。2、制作圆角矩形选区，创建一个新图层。点击“图层1”3、填充颜色，打开工具箱中“拾色器”对话框，设置前景色淡蓝色RGB为（149.197.217）。将圆角矩形填充为淡蓝色，得到如图所示的效果。4、为圆角矩形添加立体效果单击图层面板中的【添加图层样式】按钮。分别设置斜面和浮雕、内发光、光泽、渐变叠加、外发光、投影，如图所示。5、设置效果图如图所示。6、添加文字并设置效果使用工具箱中的“横排文字工具”，字体大小为80点，英文字体（ErasBoldITC），颜色为纯白色，输入内容为Homepage，如图所示。7、为文字添加效果，单击“文字图层”，将其置为当前层。单击图层面板中的“添加图层样式”按钮。分别设置内阴影、渐变叠加、投影，弹出“图层样式”对话框，如图所示，进行设置。8、最终效果图如图所示。三、课堂小结（讲解法）教师结合学生完成实例的情况，对本节课的教学过程进行小结，强调重点、难点和学生操作中的普遍错误。四、课后作业（讲解法）任务实践利用前面所学例子，再制作另一按钮效果，显示效果如图所示，将结果以“按钮制作2.jpg”为名保存。观察学生反映(对导入是否产生兴趣),并随着教师的讲解，引导出本节课要学习的内容。此部分主要由老师来讲解，同时学生也配合着老师回答一些常见问题学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生听讲，笔记学生思考、讨论学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生听讲，笔记观察学生反映(对导入是否产生兴趣),并随着教师的讲解，引导出本节课要学习的内容。此部分主要由老师来讲解，同时学生也配合着老师回答一些常见问题学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生听讲，笔记学生思考、讨论学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生听讲，笔记小结学生练习情况学生思考学生操作课题第二节简单动画的制作课时教学内容Photoshop软件制作动画的效果网页动画效果分类教学目标掌握Photoshop软件制作动画的方法；了解网页动画效果分类。教学重点掌握Photoshop软件制作动画的方法教学难点网页中动画效果的应用教学活动及主要语言学生活动一、创设意境，导入新课（设疑法、提问法）导入：看本节课案例效果图：动画效果非常多，在本节课讲解一种比较常见的效果以供大家学习，希望大家能掌握Photoshop软件制作动画的效果。二、新课教学（讲解法、提问法、示范法、练习法）1、新建一个空白的图像。输入文字，选择“横排文字工具”，输入内容为WELCOME，单词中的O字母用4个空格代替，如图所示。2、设置文字效果，按住<Ctrl>键，点击【图层缩览图】选取文字，建立选区。创建一个新图层，命名为文字高光。如图所示。打开工具箱中“拾色器”对话框，设置前景色淡粉色RGB为（253.181.202），按<Alt+Del>。按快捷键<Ctrl+D>取消选区。得到如图所示效果。3、按<Ctrl+T>组合键，进行自由变换，在【属性】栏中设置宽W，比例为95.00%，将文字缩小些，如图所示。4、绘制花纹并设置效果，绘制花纹创建一个新图层并将图层命名为花朵1。选择工具箱中的“自定形状工具”。在【属性】栏设置为“路径”，点击“形状”按钮的下拉菜单，选择“花形装饰2”5、选择图层“花朵1”，确定它为当前图层，按<Ctrl+Enter>键，将路径转为选区，打开“拾色器”6、设置花纹效果，单击图层面板中的“添加图层样式”按钮为“花朵1”图层添加效果：内阴影、内发光、光泽、渐变叠加、外发光、投影，弹出“图层样式”7、最终效果图如图所示。8、复制多个花纹效果，单击图层“花朵1”9、单击图层“花朵2”10、依次选择图层“花朵3”、“花朵411、设置动画效果，设置帧打开【窗口】→“时间轴”命令，打开“时间轴”面板。如果面板是视频编辑状态，可单击“创建视频时间轴”右侧的下拉菜单按钮，选择“创建帧动画”选项，切换为帧动画编辑状态。如图所示。12、单击面板底部“一次”右侧的下拉菜单按钮，选择“永远”选项，表示一直连续播放动画。单击“0秒”右侧的下拉菜单按钮，选择0.2秒选项，将每一帧的延迟时间设置为0.2秒，如图所示。设置展开效果在第1帧上制作第1个画面，显示“文字”、图层，隐藏“文字高光”和所有花朵图层，如图所示。13、单击面板底部新建帧，复制所选帧得到第2帧，如图所示，在第2帧上制作第2个画面，显示【文字】、【文字高光】、【花朵1】图层，隐藏其他花朵图层，如图所示。效果如图所示。14、再次单击面板底部新建帧，复制所选帧得到第3帧，如图9.54所示，在第3帧上制作第3个画面，显示“文字”、“文字高光”、“花朵1”、“花朵215、点击按钮新建第4帧，如图所示，在第4帧上制作第4个画面，显示“文字”、“文字高光”、“花朵1”、“花朵2”、“花朵16、单击新建帧得到第5帧，如图所示，在第5帧上制作第5个画面，显示“文字”、“文字高光”、“花朵1”、“花朵2”、“花朵3”、“花朵417、设置过渡帧效果，单击过渡动画帧按钮，打开【过渡】对话框，在原有的第1个和第2个关键帧之间添加5个过渡帧，如图所示。18、播放并保存文字动画效果设置完成，单击播放按钮或者按下空格键播放动画效果，如图所示。19、制作完成后，执行【文件】→“存储为Web所用格式”命令，选择GIF格式，单击存储按钮将文件保存，如图所示。三、课堂小结（讲解法）教师结合学生完成)实例的情况，对本节课的教学过程进行小结，强调重点、难点和学生操作中的普遍错误。四、课后作业（讲解法）利用前面所学例子，制作桃心闪动效果，显示效果如图所示，将结果以“桃心闪动.gif”为名保存。学生开始跟着老师的提问思考提问其中一个学生学生思考，如何解决，并给出答案学生理解，笔记教师演示，学生注意观察，并记录笔记学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生听讲，笔记学生思考、讨论学生开始跟着老师的提问思考提问其中一个学生学生思考，如何解决，并给出答案学生理解，笔记教师演示，学生注意观察，并记录笔记学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生听讲，笔记学生思考、讨论学生开始跟着老师的提问思考提问其中一个学生学生思考，如何解决，并给出答案学生理解，笔记教师演示，学生注意观察，并记录笔记学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生听讲，笔记学生思考、讨论学生开始跟着老师的提问思考提问其中一个学生学生思考，如何解决，并给出答案学生理解，笔记教师演示，学生注意观察，并记录笔记学生兴趣焦点总结学生操作课题第三节网页导航设计课时教学内容1、网页设计的组成部分2、网页导航器的制作方法教学目标了解网页设计的组成部分；掌握导航器的制作方法；教学重点网页导航器的制作方法教学难点网页设计的组成部分教学活动及主要语言学生活动一、创设意境，导入新课（设疑法、提问法）导入：Photoshop是网页设计师的首选工具，网页导航设计是网页设计的主要组成部分。本案例介绍红色网页导航器的制作过程。本节课我们就来学习制作网站导航条的方法。接下来看一张本节课的效果图二、新课教学（讲解法、提问法、示范法、练习法）1、新建一个空白文件，使用工具箱中“圆角矩形”工具在属性栏中设置参数，半径为5像素颜色红色RGB为（255.0.0）如图所示。点击鼠标左键拖动绘制红色圆角矩形路径效果如图所示。2、设置激活按钮状态，使用工具箱中半径为5像素的“圆角矩形”工具，点击鼠标左键拖动绘制圆角矩形形状，如图所示。3、单击图层“圆角矩形2”，确定它为当前图层，单击图层面板中的“添加图层样式”按钮。分别设置投影效果，弹出“图层样式”对话框，图所示进行设置，效果4、添加按钮间的分割线，使用“矩形选框工具”绘制与导航条同样到的矩形条、羽化值为：2px，创建一个新图层“图层1”5、按快捷键<Ctrl+J>将“图层1”复制4次如图所示，使用“移动工具”将白色分割线的位置排列在每个按钮的位置如图所示6、最终效果如图所示。三、课堂小结（讲解法）教师结合学生完成)实例的情况，对本节课的教学过程进行小结，强调重点、难点和学生操作中的普遍错误.四、课后作业（讲解法）利用前面所学方法制作一个水晶导航条效果，显示效果如图所示制作完成后以“水晶导航条.jpg”保存。学生开始跟着老师的提问思考提问其中一个学生学生思考，如何解决，并给出答案学生理解，笔记教师演示，学生注意观察，并记录笔记学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生听讲，笔记学生思考、讨论学生理解，笔记教师演示，学生注意观察，并记录笔记学生兴趣焦点总结学生操作课题第四节标志设计课时教学内容标志设计基本知识标志制作方法教学目标了解标志设计基本知识；掌握标志制作方法教学重点标志制作方法教学难点标志设计基本知识教学活动及主要语言学生活动一、创设意境，导入新课（设疑法、提问法）导入：标志设计将是图形和设计理念结合体现出主题个性，让人易识别、易记忆。本小结介绍一种Photoshop软件制作标志的方法，希望对读者以后设计标志有所帮助。案例效果图：接下来看一张本节课的效果图二、新课教学（讲解法、提问法、示范法、练习法）1、新建一个空白文件，用“椭圆工具”绘制花心在工具属性栏中设置形状、颜色RGB为（154.176.36）效果如图所示。使用“钢笔工具”在工具属性栏中设置形状、颜色RGB为（154.176.36）勾画花朵图形效果如图所示。2、按<Ctrl+E>将花朵的所有形状图层合并得到“形状8”，载入花形选区。创建一个新图层“图层1”，使用“渐变工具”3、选择图层“形状8”，单击图层面板中的“添加图层样式”按钮。设置内发光效果如图所示4、添加文字，使用“横排文字工具”字体大小为30点、英文字体（LithosPro）、颜色RGB为（154.176.36）输入内容为：star，中文字体（幼圆）、颜色RGB为（143.86.46）。效果如图所示。5、单击图层“文字图层”设置图层样式效果：内发光，效果如图所示6、为文字载入选区如图所示。创建一个新图层“图层2”，使用“渐变工具”颜色RGB为（178.178.178）（255.255.255）填充渐变效果，如图所示7、在最终效果图如图所示。三、课堂小结（讲解法）教师结合学生完成)实例的情况，对本节课的教学过程进行小结，强调重点、难点和学生操作中的普遍错误。四、课后作业（讲解法）利用前面所学方法为自己班级设计一个标志，制作完成后以“班级标志.jpg”保存。学生开始跟着老师的提问思考提问其中一个学生学生思考，如何解决，并给出答案学生理解，笔记教师演示，学生注意观察，并记录笔记学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生听讲，笔记学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生思考、讨论学生理解，笔记教师演示，学生注意观察，并记录笔记学生兴趣焦点总结学生操作课题第五节网页设计课时教学内容网页设计的内容网页设计注意事项制作网页设计案例教学目标掌握网页设计的内容；了解网页商务机注意事项学会制作一种网页设计。教学重点掌握网页设计的内容教学难点制作网页设计案例教学活动及主要语言学生活动一、创设意境，导入新课（设疑法、提问法）导入：网页设计包含了背景、导航条、按钮、logo、文字等元素，用Photoshop软件将这些元素进行组合排版制作。本次案例以电影网站为设计主题。接下来先看本节课的效果图二、新课教学（讲解法、提问法、示范法、练习法）1、新建一个空白文件，打开“素材/第9章/网页素材1.jpg”文件，使用“移动工具”将图片移至当前画布中，得到“图层1”。使用“自由变换”2、使用“矩形工具”将网页布局划分、颜色白色RGB为（255.255.255）、设置图层混合模式：投影效果如图所示。3、将形状图形载入选区。创建一个新图层“图层2”，使用“渐变工具”4、使用“移动工具”将导航条图片移至当前画布中，得到“图层3”。使用“自由变换”调整大小5、制作内容，打开“素材/第9章/网页素材3.jpg、网页素材4.jpg、网页素材5.jpg、网页素材6.jpg、网页素材7.jpg”文件，使用“移动工具”将图片移至当前画布中，得到“图层4”、“图层5”、“图层6”、“图层7”、“图层8”6、使用“横排文字工具”字体大小为14点、中文字体（幼圆）、颜色RGB为（143.86.46）输入每部电影的名称，效果如图所示。7、打开“素材/第9章/网页素材8.jpg、网页素材9.jpg、网页素材10.jpg”文件，使用“移动工具”将图片移至当前画布中，得到“图层9”、“图层10”“图层11”，使用“8、使用“横排文字工具”字体大小为18点、中文字体（黑体）、颜色RGB为（143.86.46）输入每部电影简介。效果如图所示。9、打开“素材/第9章/网页素材11.jpg”文件，使用“移动工具”将表格图片移至当前画布中，得到“图层12”，使用“自由变换”10、使用“横排文字工具”字体大小为18点、中文字体（宋体）、颜色RGB为（143.86.46）输入数字制作选择菜单。打开“素材/第9章/网页素材12.jpg、网页素材13.jpg”文件，使用“移动工具”将按钮图片移至当前画布中，得到“图层13”、“图层14”，删除不需要的背景，使用“自由变换11、绘制矩形选区，单击按钮创建“图层15”，使用“渐变工具”填充颜色RGB为（255.255.255）到透明的渐变效