模块三网页美工技术 单元6：网页效果图切片及排版 一、为什么要切片 切片就是将一幅完整的图像分割成不同大小小图片。每个小哥片可单鞋导出成独立的 文作，切片的最终目的是提高浏览器下载速度，缩短月户等特时间，增强用户体验。 ·测览器下我大图片时候活要很长时间，把它分剧成小图片可以边下载边显示 网页效果图切片后，很多纯色区减图片可以去掉，用颜色值替代，缩小了网页的体 积 ·网页效果中有些地方时是将来需要动态更新的，我们可以单独切出来，用文本代智 ·根据我们对图像质量要求的不同，我们可以来分别选择每个小图片的文件格式。 二、切片的原则 根帮颜色落围来切： 如果一个区域中颜色对比的范围不是根大的，就只有几种颜色，这样的话就应该单鞋 的把他切出来，如果一个区域中就一种颜色，写代码的时候就可以直接用背景色来表示。颜 色过多的话也没有美系，很多时候都要用到渐变的效果，。应该把切片数量切的多一些尽量把 单个切片控制在一个颜色范围的轮靠内。 初片大小： 把网页的切片切的越小越好。这是有道理的。切片越小的话可以加快网页下我图片的 速度，让多个图片同时下载而不是只下载一个大图片，所以切片大小要根据需要米切，标志 0G0等主要部分尽量切在一个切片内，新止最示遇特殊情况时是示一部分，属角表格部 分要根据显示区线的大小米切，拉制圆角和边沿（如图5061所示），有时候切出来的切 片并不是直接插入到DW了事，而需要在DW中编朝，比如有的图片应该设置成背景图片
模块三 网页美工技术 单元 6：网页效果图切片及排版 一、为什么要切片 切片就是将一幅完整的图像分割成不同大小小图片，每个小图片可单独导出成独立的 文件。切片的最终目的是提高浏览器下载速度，缩短用户等待时间，增强用户体验。 • 浏览器下载大图片时候需要很长时间，把它分割成小图片可以边下载边显示 • 网页效果图切片后，很多纯色区域图片可以去掉，用颜色值替代，缩小了网页的体 积 • 网页效果中有些地方时是将来需要动态更新的，我们可以单独切出来，用文本代替 • 根据我们对图像质量要求的不同，我们可以来分别选择每个小图片的文件格式。 二、切片的原则 根据颜色范围来切： 如果一个区域中颜色对比的范围不是很大的，就只有几种颜色，这样的话就应该单独 的把他切出来，如果一个区域中就一种颜色,写代码的时候就可以直接用背景色来表示。颜 色过多的话也没有关系，很多时候都要用到渐变的效果，应该把切片数量切的多一些尽量把 单个切片控制在一个颜色范围的轮廓内。 切片大小： 把网页的切片切的越小越好，这是有道理的。切片越小的话可以加快网页下载图片的 速度，让多个图片同时下载而不是只下载一个大图片，所以切片大小要根据需要来切，标志 LOGO 等主要部分尽量切在一个切片内，防止显示遇到特殊情况时显示一部分，圆角表格部 分要根据显示区域的大小来切，控制圆角和边沿（如图 0306-1 所示），有时候切出来的切 片并不是直接插入到 DW 了事，而需要在 DW 中编辑，比如有的图片应该设置成背景图片
图四 回80四回0 56▣ d 图0306-1 切片区城无整性： 保证完整的一部分在一个切片内，例如某区线的标题文字，以后修改时方便。 导出类型： 颜色单一过渡少的，应该导出为GF,颜色过波比较多，颜色丰富的应该导出为JG, 有动西的富分应该导出为GF动画。 保留源文件 即使真面作好了，也要保留带切片层的源文作，说不上哪天要改某一个部分，例如文 字什么的，直接修改单独导出所用的切片就可以了。如图03062所示
图 0306-1 切片区域无整性： 保证完整的一部分在一个切片内，例如某区域的标题文字，以后修改时方便。 导出类型: 颜色单一过渡少的，应该导出为 GIF，颜色过渡比较多，颜色丰富的应该导出为 JPG， 有动画的部分应该导出为 GIF 动画。 保留源文件： 即使页面作好了，也要保留带切片层的源文件，说不上哪天要改某一个部分，例如文 字什么的，直接修改单独导出所用的切片就可以了。如图 0306-2 所示
存得为 常存注四 口4 ￥0下5丽 能#市克用。 O 的安 黑 属存Pd格式，以偏留切片效黑 空得第 本6要1d 华式 p物中的 存线薄 口事内丰D ■过样 回理L山 ■使得边件合量：处理⊙保 ☑其重神0614 己桶小写打黑名 图0306-2 三、利用PS进行网页效果图切片 首先我们认识一下%网页效果切片工作环境。如图03063所示
图 0306-2 三、利用 PS 进行网页效果图切片 首先我们认识一下 PS 网页效果切片工作环境。 如图 0306-3 所示
香t壶4。通W运四 ●E 切片工具 y时法风E 4.T. WHAT'S NEW . 待切片网页效果图 三Chn ￥ 01..1 at中ap 0300T0行队g酒C00NAh西特4时 网N约网 多点形神期时诗时称，票用美地生，用内起结营。 图0306-3 由图中可以看到，我们主要应用的是工具箱中的切片工具及切片选择工具。其中切片 工具用来切片用，面切片选择工具主要是编辑切片用。 工作区认识了，那么我们究竟该如何切片呢？我们一般可以分三步走： 1,分析页面结构，思考该如何切？ 2.根据分析结果指出切片效果的参考线米辅励切片。如图03064所示
图 0306-3 由图中可以看到，我们主要应用的是工具箱中的切片工具及切片选择工具。其中切片 工具用来切片用，而切片选择工具主要是编辑切片用。 工作区认识了，那么我们究竟该如何切片呢？我们一般可以分三步走： 1.分析页面结构，思考该如何切？ 2.根据分析结果拖出切片效果的参考线来辅助切片。如图 0306-4 所示
后ent年一伊r室料.。IB薄面里良c/段】 石色图 2文神四中上是州多口 P TOYOTA 9. 0. N.T. 9.0 以 鲜A移 WHAT'S NEW ABOT TOOTA e线准s0纳 1万可D同 94 13 e2.24eT4作G4nann fh浅时t10户wty■ 2001.9.1地= 多直餐州海鲜到速时，向其用感明，含阳健显 图0306-4 3.利用放大镜进行细节上的精准切片。如图03065所示
图 0306-4 3.利用放大镜进行细节上的精准切片。如图 0306-5 所示
CAdobe Photozhop-FireTork:案斜.pE。120um(图层D,就B/B] 日回☒ 2文件电情维中图是)选森图进镇四视田印壁口D的和 Q,气三口满型室口大小以算是京■可调世口博道所有室口 ■■■潮通打司■ 回 T Sc 3口 1200%文档1.504W1.5料 。点按正德线数大：点按并推标以用志诺植，能用光阳随可选用其销山 图0306-5 切片后我们要对切片进行保存和导出。 保存，前面详过，主要是便于后期对图片进行细节修政。而导出主要是得到切片中的 小图片。 步露：选择文件、存储为wb所有格式，弹出的面板中可以对切片进行遗择和格式设 置，点击存储，可以选择存储类型和要保存的切片。如图03066、7、8所示
图 0306-5 切片后我们要对切片进行保存和导出。 保存，前面讲过，主要是便于后期对图片进行细节修改。而导出主要是得到切片中的 小图片。 步骤：选择文件、存储为 web 所有格式，弹出的面板中可以对切片进行选择和格式设 置，点击存储，可以选择存储类型和要保存的切片。如图 0306-6、7、8 所示
文冲)骑操阳)团像)图层4)达择诺顿四视田 新使).. Ctrl+ 样式： 打开0)， Ctr1+0 浏宽) Shif我Ctr10 四 打开为心). AItCtr140 星近打开文件) 在aeRa方中端城) Shi ft+ctrl+ 关闭) Ctrit帽 关同学铜 存储选择这个位置将切片s 存锥为 注维版 后的小图片导出莱“： 存韩为所同格式).， Alt-Shift+Ctr1+S 图0306-6 TOYOTA TOYOTA 应录为工具通 生隆可样某个小明图片 件AT曲 新 图030好-7（这里可以根据需要选择设置某个小图片的格式）
图 0306-6 图 0306-7（这里可以根据需要选择设置某个小图片的格式）
重线里海市场 01识D E0[ 0市* 2 更=行 h重用 ■ 得水出独中 图03068（在这里赞注意保存类型和切片遗项） 这里需要注意的是，为了格式推容，请规范保存名称，即不适用汉字成特殊字符，命 名尽量有实在意义，比如说是网站首页效果图切片，最好金名为门d” 四、切片素材图像的网页排版 导出后图片素材被放在mass文件夹中，肩动Dreamweaver,.将站点建在保存路径下， m即该站点的素材夹。我们就可以利用前而所学的如试进行网页排藏了
图 0306-8（在这里要注意保存类型和切片选项） 这里需要注意的是，为了格式兼容，请规范保存名称：即不适用汉字或特殊字符；命 名尽量有实在意义，比如说是网站首页效果图切片，最好命名为“index” 四、切片素材图像的网页排版 导出后图片素材被放在 images 文件夹中，启动 Dreamweaver，将站点建在保存路径下， images 即该站点的素材夹。我们就可以利用前面所学的知识进行网页排版了
通Swm123dd由a的如题 卡细 卡用 卡的材专每 DREAMWEAVER 打月是西编用 N键意操相 长表州制证 d温 dhe ⊙直生t计C 4n性4的 g绿g A 护11 口肉中4E的3 Jwabongl ￥G两 ⊙再. 中包 口现来 ■的 卡正人8中用和项电 中士啊 ”制中和家5来准 年4 ■■ #*卡面西重性￥日 图03069 利用案例操作演示切片及排版的全过程。 【课后小结】 本讲重点切片的原测及方法。利川案例操作演示了一个完整的网页效果图，如何切片 及排散的全过程
图 0306-9 利用案例操作演示切片及排版的全过程。 【课后小结】 本讲重点切片的原则及方法。利用案例操作演示了一个完整的网页效果图，如何切片 及排版的全过程