模块4：网页切图 （课件）-《网页设计与制作》同步教学（语文出版社）

模块4：网页切图 学 习 导 入 在本模块中着重介绍切片工具、切片选择工具在切图面方面的应用，通过讲解一个简单的例子，掌握切图的方法和技巧 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 模块4：网页切图 学 习 目 标 技能目标： 将photoshop制作出的整体网页，切割成若干个小图片 知识目标： 1.掌握切片工具工具的应用 2.掌握切片选择工具的应用 3.了解切图的原因 4.了解切图的一些基础原则 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 2 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 模块4：网页切图 任务描述、任务目标、任务分析 ○任务描述 小花毕业后在一家网络公司从事网页美工工作，要将网页切图处理。 ○任务目标 利用切片工具、切片选择工具将下图4-1所示，切成两个小块，并将切出的图片保存。 图4-1 ○任务分析 使用切片工具切出图片，再用切片选择工具对切片进行调整，最后将切片保存。 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 3 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 模块4：网页切图 任务实施 1、切图工具有两个，一个是切片工具，另一个是切片选择工具。左边有个小按钮，按住它这三个选项就会显示出来,如图4-2所示。 图4-3 图4-2 图4-4 2、将要切割的图片放入photoshop中。 （图4-3） 3、在切图之前有一点需要说明的是，如果需要辅助切图可以先添加参考线。在PS上方的菜单栏，可以在视图里找到新建参考线选项。如上图，添加两条参考线，因为参考线在鼠标靠近的时候有吸附功能，所以切图不容易切错位置。（ 图4-4） 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 4 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 模块4：网页切图 任务实施 4、切片工具先裁一个框出来，我们可以看到图片上已经有01的框，但是右边02显示为灰色。（图4-5 ） 图4-5 图4-6 5、继续用切图工具裁第二个框，01和02的框一定要贴合，否则会出现一个03的框。当切图位置没切对，可能给后面带来麻烦的是换图片会比较麻烦。这个时候切图的框是可以移动的，你可以把鼠标放在边框上试着移动下，看下效果。你只能移动02，不能移动01。 （图4-6） 6、发现切图的位置出现错误，开始调整，刚才把02位置往右挪好，它从02变成了03。（图4-7） 图4-7 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 模块4：网页切图 任务实施 7、然后用切图选择工具选择01，这样我就能把01的位置调整正确了。 图4-8 8、切好图之后就到最重要的步骤了，如下图所示，选择文件下面的存储为Web和设备所用格式，最好能记住快捷键。 图4-9 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 模块4：网页切图 任务实施 9、图片格式为JPEG，它就是JPG，一样的。关键是品质的设定，我们都知道如果一张图片越大它在网上打开的速度就越慢，当我们把图片的品质设的越小，它的大小就越小，但是如果品质太差，图片会变模糊，所以一般情况下如果是网上使用的图片，品质可以设置60，既保证图片较小也不会模糊。这个数值由你自己设置，是大是小，具体看你的要求，试试就知道了。这里有个问题是你只是对其中一个切片设置品质，其他切片又要重新设置，所以存的时候最好检查一下。 10、前面设置好后点击存储会显示以上界面。格式选项选择HTML和图像，默认是图像的，这样我们就能得到网页代码了。 图4-10 图4-11 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 7 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 模块4：网页切图 任务评价 11、保存后得到一个图片文件夹和一个网页，你看到的网页图标可能与4-12不一样，这个没有关系，因为浏览器不一样。 图4-12 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 8 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 模块4：网页切图 任务评价 ○任务评价 任务名称： 切割图片 班级： 学号： 姓名： 指导教师： 评价项目 评价标准 评价依据（指信息、佐证） 评价方式 权重 得分小计 总分 自我评价 小组评价 教师（企业）评价 10% 20% 70% 关键能力 1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。 1.课堂表现2.学习任务完成 40% 专业能力 1.能使用PS中的切图工具切出图片，切出的图片合理性； 1.课堂表现 2.学习任务完成3.效果图质量 60% 指导教师综合评价 指导教师签名： 日期： 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 9 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 模块4：网页切图 任务总结 ○任务总结 本任务详细讲解了切片工具、切片选择工具的使用，在制作过程中，理解操作步骤中各关键步骤的作用，结合制作分析，明确这些步骤的制作目的。 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 10 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 模块4：网页切图 必备知识 1.切图原因 在制作纯静态页面的时候，多用photoshop制作整体页面，以达到网页整理色调协调的目的，在图片上传时，一整张网页图片不仅上传容易产生数据丢失，且在打开网页的过程中，浏览器也需要逐一读取，导致网页打一速度慢，因此我们需要把一整张图切割成N个小图，证浏览器同时开打每个小图，以加快网页展开速度。 2.切图注意事项 网页设计的切图，最好先用PS做出效果图，然后进行切图，切出的图片常用的格式为：jpg、gif、png。 （1）切图的原则：①分析图片,了解图片布局(切图时就知道布局的div+css怎么写) 2.图切的大小越小越好。②图切的数量越少越好。 那对于一整张图来说，同时达到这两个原则是相互矛盾的，所以一个网页差不多切成20-30个图就可以了，这样网页的加载速度是不会受影响的。 （2）切图的技巧： ①一行一行的切图。 ②背景的切成小条。③不能分开的不分好了，选行的时候要注意怎么样合理。④能取整数，则取整数 能整则不零 。⑤切图的时候要放大至少到300%，因为一次移动一个像素就非常明显，否则肯定是不能会有遗漏，不会达到和原图一样的效果，切图完成后就好检查一下隔行的像素值加起来是不是整个图片的宽度，一定要仔细 注意：图片应该是平均切，而不是大一块，小一块的，以免图片出现速度不平衡，切图切的好不好，在我们打开这个站点时候看到图片出来的先后顺序和速度是可以发觉的。 ⑥对于零散的图片，必须使用拼图，可以提高页面的加载速度。拼图时，注意图片必须是透明，一般是gif图。注意图层的左右上下分布。注意：拼完图片后，记住保留psd文件。 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 11 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 $$