SCITC 四川信息职业技术学院 信总理弱 开放课程 Webpage Design 网页设计与制作 四川信息积绘教衣季花 (入“利恒《和“但4个是 ⊙身0■ 由静美丽 4 有有周上 可更色然 △53 四川川信息职业技术学院精品开放共享课程
ST Sichuan Information Technology College 四川信息职业技术学院开放共喜保移 网页设计与制作 单元6：切片与排版 授课教师：张光辉
教师：四川信息职业技术学院 刘清梅 授课教师：张光辉
SIT Sichuan Information Technology College 四川信息职业技术学院开放共喜话移 网页设计与制作 目录 网页切片及排版 为什么要切片 切片的原则 ● 如何用PS进行切片 利用PS切片素材排版
教师：四川信息职业技术学院 刘清梅 • 为什么要切片 • 切片的原则 • 如何用PS进行切片 • 利用PS切片素材排版 网页切片及排版
SSichuan Information Technology College 四川信息职业技术学院开放共喜话稻 网页设计与制作 为什么要切片 ·切片就是将一幅完整的图像分 割成不同大小小图片，每个小 图片可单独导出成独立的文件 ·切片的最终目的是提高浏览器下载速度，缩短用 户等待时间，增强用户体验
教师：四川信息职业技术学院 刘清梅 • 切片就是将一幅完整的图像分 割成不同大小小图片，每个小 图片可单独导出成独立的文件 • 切片的最终目的是提高浏览器下载速度，缩短用 户等待时间，增强用户体验
SSichuan Information Technology College 四川信息职业技术学院开放共喜话移 网页设计与制作 为什么要切片 ·下载大图片需很长时间，分割成小图片可边下载边显示 ·切片后，很多纯色区域图片可以去掉，用颜色值替代 有些地方是将来需要动态更新的，可切出用文本代替 图像质量要求不同，可分别选择每个小图片的文件格式 缩短用户等待时间，增强用户体验
教师：四川信息职业技术学院 刘清梅 • 下载大图片需很长时间，分割成小图片可边下载边显示 • 切片后，很多纯色区域图片可以去掉，用颜色值替代 • 有些地方是将来需要动态更新的，可切出用文本代替 • 图像质量要求不同，可分别选择每个小图片的文件格式 缩短用户等待时间，增强用户体验
S Sichuan Information Technology College 四川信息职业技术学院开放共喜话程 网页设计与制作 切片的基本原则 ·根据颜色范围来切： 一如一个区域中颜色对比的范围不是很大的，只有几种 颜色，就应该单独切开 一如该区域就一种颜色，可抛弃，排版时用颜色值代替。 一颜色过多但有整齐的渐变规律，可切出一小部分，用 背景把切片数量切的多一重复来实现排版。 一尽量把单个切片控制在一个颜色范围的轮廓内
教师：四川信息职业技术学院 刘清梅 • 根据颜色范围来切： – 如一个区域中颜色对比的范围不是很大的，只有几种 颜色，就应该单独切开 – 如该区域就一种颜色,可抛弃，排版时用颜色值代替。 – 颜色过多但有整齐的渐变规律，可切出一小部分，用 背景把切片数量切的多一重复来实现排版。 – 尽量把单个切片控制在一个颜色范围的轮廓内
S Sichuan Information Technology College 四川信息职业技术学院开放共喜话移 网页设计与制作 切片的基本原则 ·切片大小：切片大小要根据需要来切 一把网页的切片切的越小越好，越能加快网页下载速度 -切得太小会为后期DW排版带来麻烦 一LOGO等尽量切在一个切片内 01回 2回83[04回8 0506☒0 07 08 一圆角表格等控制好边角和边沿 09 一有的图片应该设置成背景图片
教师：四川信息职业技术学院 刘清梅 • 切片大小：切片大小要根据需要来切 – 把网页的切片切的越小越好，越能加快网页下载速度 – 切得太小会为后期DW排版带来麻烦 – LOGO等尽量切在一个切片内 – 圆角表格等控制好边角和边沿 – 有的图片应该设置成背景图片
S Sichuan Information Technology College 四川信息职业技术学院开放共喜保程 网页设计与制作 切片的基本原则 ·切片区域无整性： 一保证完整的一部分在一个切片内，方便以后修改。 。 导出类型： -颜色单一过渡少的，应该导出为GIF -颜色过渡比较多，颜色丰富的应该导出为PG 一有动画的部分应该导出为GIF动画
教师：四川信息职业技术学院 刘清梅 • 切片区域无整性： – 保证完整的一部分在一个切片内,方便以后修改。 • 导出类型: – 颜色单一过渡少的，应该导出为GIF – 颜色过渡比较多，颜色丰富的应该导出为JPG – 有动画的部分应该导出为GIF动画
S Sichuan Information Technology College 四川信息职业技术学院开放共喜话稻 网页设计与制作 切片的基本原则 保留源文件： 存储为 ②☒ 探存在)司wb0308 一即使页面作好了，也要保 我近时显示最近打开的文件和文件夹。 留带切片层的源文件，说 我的文档 不上哪天要改某一个部分 的电粒 保存psd格式，以保留切片效果 文件名) 未标要-1.p5d 例如文字什么的，直接修 保存) 格式) hotoshop (s,SD:米.FDn) 取消 存储选项 存储： 口作为本Y) ■连择( 改单独导出所用的切片就 ■ha通道出 ■考色但 回图呢) Q色 ■使用校样设置：处理QMYK ☑1CC配置文件(C):RG8正C61966-2.1 可以了。 心坑品国 ☑使用小写扩展名u
教师：四川信息职业技术学院 刘清梅 • 保留源文件： – 即使页面作好了，也要保 留带切片层的源文件，说 不上哪天要改某一个部分， 例如文字什么的，直接修 改单独导出所用的切片就 可以了
SSichuan Information Technology College 四川信息职业技术学院 开放共言话福 网页设计与制作 利用PS进行网页效果图切片 CAdobe Phnteshep-[F1reo室利E。1D0s(图暴U,KC/门 2文件)南罐公图性四)选得设)适镜四装图心图口)根转0 正第 装工具设器合 切片红具 ☒ 片工具 y片这限工具《 . Bo &T. NEWS RELEASES WHAT'S NEW ABOUT TOYOTA TOYOTA . March 8.2004 待切片网页效果图 LDS hMma”o5d COMMUNITY CARE March 2 2004 Tha 74th Gengve interasonal Motor show 1时t377并 MOIE THAN CARS t春(Y台辆BTE#3样：华01 Fetngr 25.2004 Toyota,Guaenou AAmobie Portcem Oroundhreaking Ceremony for Engine SSPECIAL REFORTS Pfo≤t6 n Comoam in China Fohtuary 24.2004 New Year Soes intrease in Worldwide 2003.914 P10rt销 3 Ftny1线20046 eofthe Resu市o例府puch9sao时 Shar传s The Fifth through NNET Closing Pnce Orders on 4切0r3gotE城hang0 EXPO 2006 Forum N-NET Cloting Price Orders an Nagora Ssock EX02003 CopmngnyTemms cfute I Country Bsas I Sderag Select language 02003 TOYOTA MOTOR CORPORATION AlI Rights Reserved 100%7档1.50150 》点罗并裤运可6津可片，要用其机选项，使用S的个知就健
教师：四川信息职业技术学院 刘清梅