《网页设计与制作》模块4图文模板

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