第17课 使用Photoshop CS5制作网页效果图（2）（教案）-《网页制作三合一案例教程》同步教学（航空工业出版社）

课题 第17课 使用Photoshop CS5制作网页效果图（2） 课时 2课时（90 min） 教学目标 知识目标： （1）掌握切片的创建与编辑 （2）掌握优化与输出图像的方法 技能目标： （1）能够将图像切割输出 （2）能够优化图像再输出 素质目标： 学习上要注重效率，合理分配时间，优化学习效果 教学重难点 教学重点：创建与编辑切片 教学难点：图像的优化 教学方法 问答法、讨论法、讲授法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→  问题导入（3 min）→传授新知（25 min）→课堂实训（15 min） 第2节课：问题导入（3 min）→ 传授新知（25 min）→ 课堂实训（12 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 【教师】我们在网速较慢时打开网页，网页会出现部分加载，总结部分加载时网页所呈现的效果 【学生】按照要求完成课前任务 通过课前任务，让学生了解网页加载的过程 考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （3min） 【教师】提出以下问题，并随机邀请学生进行回答 网页中显示图像会使网页加载速度变慢，那么如何才能加快网页下载速度？ 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课内容：介绍创建与编辑切片 通过前期图像处理，转入网页加载的问题，看似无关的问题，内部却存在联系，从而激发学生兴趣 传授新知 （25 min） 【教师】讲解新知，介绍创建与编辑切片 任务二 创建与编辑切片 一、任务说明 切片可以把在Photoshop中制作的网页效果图切割成不同的小图像，这样能针对图像特点将不同的图像输出为不同的格式，从而有效加快网页下载速度。 二、预备知识 （一）创建切片 在工具箱中选择“切片工具”，然后在图像上单击并按住鼠标左键拖动，到适当位置后松开鼠标，即可创建一个切片（用户创建的切片显示为蓝色），如图8-55所示（详见教材）。 用户在创建切片时，系统会根据用户创建的切片，自动生成一些切片，这些切片称为自动切片，显示为灰色。 （二）编辑切片 创建切片后，如果需要放大、缩小或移动切片，可以使用“切片选择工具”单击选择切片，然后执行下面的编辑操作。 如要移动切片，可以拖动鼠标或按键盘上的4个方向键来实现。 如要放大或缩小切片，可以通过拖动切片边框中点或四个角上的控制点来实现。 如要删除切片，可以按【Delete】键或【Backspace】键。 【课堂问答】 【教师】随机邀请学生回答以下问题 删除用户切片后，图片中是否不存在任何切片？ 【学生】聆听、思考、回答 【教师】总结学生的回答 删除用户切片后，系统会自动生成自动切片以填充文档区域。如果删除一个图像中的所有用户切片，将会保留一个包含整个图像的自动切片。 【学生】聆听、思考、理解、记录 【教师】引入任务实施内容，讲解切割“天音”网页效果图 三、任务实施——切割“天音”网页效果图 【课堂问答】 【教师】随机邀请学生回答以下问题 根据创建“天音”网页效果图时的各组成部分，思考如何进行切割？ 【学生】聆听、思考、回答 【教师】总结学生的回答 切割网站Logo、网站导航、副导航、Banner、内容区、信息区。 【多媒体】演示切割“天音”网页效果图的具体步骤 步骤1打开本书配套素材“素材与实例\实例\Photoshop”目录下的“main.psd”文件。 步骤2在工具箱中选择“切片工具” ，首先把网站Logo切割出来，在Logo左上方单击并向右下方拖动鼠标，到适当位置后松开鼠标，创建第1个用户切片。 步骤3按照同样的方法在上方导航区域绘制切片。 步骤4在下方的副导航区域绘制切片。 步骤5使用“切片工具” 将Banner切割成两部分，因为后面将会把右侧区域做成动画。 步骤6将“天音公司愿景”区域的文本和图像分别切割为两部分；将“天音网站公告@新闻”切割出来，下面的段落文本区域就不要了，可以在Dreamweaver中输入；将右侧的“天音网站服务”切割为两部分。 步骤7分别在内容区与网站信息区的分界线和下方的Logo上绘制切片，此时便完成了网页的切割。 【学生】聆听、观看、思考、理解、记录 通过教师讲解、课堂问答和多媒体演示等方式，让学生了解切割图像的作用和意义，掌握如何创建切片，如何编辑切片，实现切片的移动、放大或缩小、删除等操作；通过任务实施，帮助学生熟悉切片工具的使用，能够对文本和图像进行切割，进而完成对网页的切割 课堂实训 （15 min）