1 / 10

Fireworks 切片

Fireworks 切片. 切片（Slice）就是将一幅大图像分割为一些小的图像 切片，然后在网页中通过没有间距和宽度的表格重新 将这些小的图像没有缝隙的拼接起来，成为一幅完整 的图像。这样做可以减低图像的大小，减少网页的下 载时间，并且能创造交互的效果，如翻转图像等，还 能将图像的一些区域用html来代替。. Fireworks 切片. 将图像切片至少有三个主要优点： “ 优化 ” 网页图形设计的挑战之一是在确保图像快速下载的同时保证质量。切片使您可以使用最适合的文件格式和压缩设置来优化每个独立切片。 “ 交互性 ” 您可以使用切片来创建响应鼠标事件的区域。

chase-ochoa
Download Presentation

Fireworks 切片

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Fireworks切片 切片（Slice）就是将一幅大图像分割为一些小的图像 切片，然后在网页中通过没有间距和宽度的表格重新 将这些小的图像没有缝隙的拼接起来，成为一幅完整 的图像。这样做可以减低图像的大小，减少网页的下 载时间，并且能创造交互的效果，如翻转图像等，还 能将图像的一些区域用html来代替。

  2. Fireworks切片 将图像切片至少有三个主要优点： • “优化” 网页图形设计的挑战之一是在确保图像快速下载的同时保证质量。切片使您可以使用最适合的文件格式和压缩设置来优化每个独立切片。 • “交互性” 您可以使用切片来创建响应鼠标事件的区域。 • “更新网页的某些部分” 切片使您可以轻松地更新网页中经常更改的部分。

  3. Fireworks切片 • 使用切片 ① 创建切片、编辑切片 “矩形切片”、“多边形切片” ② 导出切片 导出所选切片、导出为网页 使用层面板快速选定切片，切片可以复制到另外一个 PNG图像中，注意技巧（等大比例、分辨率）

  4. Fireworks切片 在FW可以选择导出表格布局或者div、css布局 1、导出Table布局 (1) “HTML和图像” (2) FW 8、FW CS3、FW CS4、FW CS5 2、导出Div、CSS布局 (1) “CSS和图像（.htm）” (2) FW CS3、FW CS4、FW CS5 （FW 8 导出的是绝对定位的DIV、cs4和cs3又有 点不同，推荐使用CS4）

  5. Fireworks切片 1、导出Table布局 导出--选项--表格 间隔：①1像素透明间隔符 ②嵌套表格，无间隔符 ③单一表格，无间隔符号

  6. Fireworks切片 ①古代文学01 1像素透明间隔符： 删除东西表格比例不会变化 <td><img src="images/spacer.gif" width="21" height="1" border="0" alt="" /></td> ②古代文学02 嵌套表格，无间隔符： 删除东西表格比例不会变化 ③古代文学03 单一表格，无间隔符号： 删除东西表格比例会变化

  7. Fireworks切片 2、导出Div、CSS布局 （1）CS3、CS4切片属性设置 “背景图像” （CS4前景图像也可以） （2）CS4不管背景还是前景都导出，CS3则不会 注意区别 （3）“名字优化”：起有意义的名字 Div自动居中：margin 左右auto

  8. Fireworks切片 实例Table布局要点： （1）“首页” 控制好切片区域文字的大小,结合样式表 如：体育、艺术两个页面

  9. Fireworks切片 实例Table布局要点： （2）内容页：保持水平 内容区域自动拉伸只影响两边，两边背景自动拉伸能够连续或者是纯色背景，所以看起来能自动拉伸（通过设置单元格的背景让其拉伸） ①不要滥用 “渐变” 色 ②两边纯色或者单调背景，如艺术内容页，教育系页面

  10. Fireworks切片 • 古代文学页面例子 页面可以一次切好，也可以切好宏观再继续切微观 （1）宏观可以使用“1像素间隔图像” （2）微观戏切尽量不要使用“1像素间隔图像” ，容易变形，使用“嵌套表格，无间隔符” 当页面比较简单的时候可以一次切完。复杂的可以先宏观切完，导出后，再细切图片导出网页，最后通过DW复制粘贴回去

More Related