第14章 网页切片与输出
网页切片与输出课件
案例二：一个高效的网页输出方案
输出格式
01
根据需要选择合适的输出格式，如HTML、PDF、Word等，根
据不同的需求选择不同的格式。
输出模板
02
使用现成的模板或自行设计模板，以实现美观、整洁的输出效
果。
输出后的优化
03
对输出的文件进行优化，如压缩文件大小、添加关键词等，以
提高文件的可读性和搜索引擎友好度。
动态内容处理
网页中的动态内容（如轮播图、广告等）切片时需要考虑其变化和展示效果。解决方案： 使用JavaScript或CSS定时刷新或调整切片区域，或使用服务端动态生成图片。
网页输出的技术瓶颈与解决方案
渲染速度慢
复杂页面或大量数据的渲染可能导致页面加载速度慢。解决方案：采用异步加载、懒加载、预加载等技术优化页面渲染速度。
灵活运用工具
除了基本的切割功能外，还要灵活 运用其他工具，如裁剪、调整大小 、添加水印等，以进一步提高图片 的质量和效果。
03
网页输出技术概述
网页输出的定义
网页输出是指将网页内容以特 定格式进行输出，以便用户可 以在客户端进行浏览和交互。
网页输出的格式可以是HTML 、PDF、JPEG等，其中HTML 是最常用的格式之一。
保存切割后的图片
完成切割后，可以通过“文件”菜单 中的“保存”选项，将切割后的图片 保存到指定的文件夹中。
网页切片的技术要点
保持图片质量
在切割过程中，要尽量保持图 片的质量，避免出现失真或模
糊的情况。
合理设置切割线
要根据图片的内容和布局合理设置 切割线，使得切割后的图片能够更 好地适应不同的场景和需求。
实现网页内容的共享和传播
通过将网页内容转换成可下载的格式，用户可以将网页内容共享给 其他人，从而实现信息的传播。
网页切片技巧
网页切片技巧网页切片技巧切片在制作网页的过程中占有很重要的地位，下面是YJBYS店铺整理的网页切片技巧，希望对你有帮助!切片介绍1. 切片是将图片转换成可编辑网页的一座桥梁，通过切片才可以将普通图片变成Dreamweaver可以编辑的网页格式2. 切片后的图像可以更快的在网络上传播3. 切片后的图像也是网页中片的主要来源切片方法1. 切片首先保证切出网页中需要多次修改的区域，例如文字区域2. 切片图像的大小尽量保持在15K以内(便于网络传输)3. 充分利用Dreamweaver中的自动拼贴功能减少垃圾切片操作技巧技巧1：使用键盘的方向键移动对象时，按住【Shift】键不放，每次可以移动10个像素。
技巧2：使用【指针】工具移动对象时，按住【Shift】键不放，可以保证其水平或垂直移动。
技巧3：按住【Alt】键不放拖拽某个对象，即可对其进行复制。
但是自动形状不能用这个操作，因为自动形状是一种组合状态，可以使用复制粘贴命令复制。
技巧4：对于所有的形状绘制工具而言，按住【Shift】键不放进行绘制，可以保证其宽高比始终为1：1。
技巧5：使用基本形状工具绘制形状时，按住【空格】键不放，不要松开鼠标左键，可以移动矢量图形的位置。
绘制选区的.时候也是如此。
技巧6：使用【矩形】工具绘制矩形时，按住键盘的上或下键不放，不要松开鼠标左键，可以增加或减少矩形的圆度。
技巧7：需要选择组内对象时，并不需要取消组合，可以选择【部分选定】工具来选择组内对象，这对于多个组合对象的编辑来说非常方便。
技巧8：使用【钢笔】工具绘制路径的过程中，按住【Alt】键不放，可以随时调整路径点的控制手柄。
技巧9：使用【刷子】工具绘制图像时，按住【Shift】键不放，绘制出出一条水平或垂直线后，释放鼠标，但不要松开【Shift】键，继续绘制，fireworks会把所画前一条线的终点和后一条线的起点连接起来。
技巧10：按住【Alt】键，单击【层】面板中的位图图层，可以根据位图的形状获得选区。
网页设计课后习题答案
思考与练习答案第1章1、填空题：（1）文字、图片和超链接（2）“设计者”模式和“代码编写者”模式（3）“设计”视图、“代码”视图和“拆分”视图。
2、简答题（1）简述Drea mweav er 8的基本菜单的组成。
答：●【文件】菜单：包括对文件进行操作的标准菜单项，还包括各种其他命令用于查看当前文档或对当前文档执行的操作。
例如：【新建】、【打开】、【保存】、【在浏览器中预览】和【打印代码】等。
●【编辑】菜单：包括用对文本进行操作的标准菜单项，还包括选择和搜索命令。
例如：【剪切】、【拷贝】、【粘贴】、【选择父标签】和【查找和替换】等●【查看】菜单：可以看到文档的各种视图，并且可以显示和隐藏不同类型的页面元素以及不同的 Dreamw eaver工具。
●【插入】菜单：提供插入栏的替代项，以便用于将对象插入文档。
●【修改】菜单：可以更改选定页面元素或项的属性。
使用此菜单，可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。
●【文本】菜单：可以轻松地设置文本的格式。
●【命令】菜单：提供对各种命令的访问。
●【站点】菜单：提供一些菜单项，这些菜单项可用于创建、打开和编辑站点，以及用于管理当前站点中的文件。
●【窗口】菜单：提供对 Dreamw eaver中的所有面板、检查器和窗口的访问。
●【帮助】菜单：提供对Dre amwea ver文档的访问，包括使用 Dreamw eaver以及各种语言的参考材料。
（2）简述插入面板所包含的选项卡的种类。
答：●“常用”选项卡：包含用于创建和插入最常用对象（如图像、表格）的按钮。
●“布局”选项卡：允许插入布局表格和图层两种方式，并且可以在两种视图之间进行选择。
●“表单”选项卡：允许插入制作页面表单的各个元素。
切片与导出技巧 优化网页设计时的切片与导出
切片与导出技巧：优化网页设计时的切片与导出在网页设计中，切片与导出是优化网页加载速度和用户体验的重要环节。
Photoshop作为专业的图像处理软件，提供了强大的切片功能和导出选项，本文将介绍一些切片与导出的技巧，帮助设计师提升工作效率和优化网页设计。
一、切片技巧1. 使用矩形工具：切片的基本单位通常是矩形，选择矩形工具，点击并拖动鼠标，将设计图中的元素划分为不同的矩形切片。
2. 自定义切片工具：Photoshop还提供了其他形状的切片工具，如圆形切片、多边形切片等。
在切片工具选项栏中，可根据需求选择不同的切片形状。
3. 切片重叠处理：当设计图中有多个元素需要层叠显示，切片可能会重叠。
为避免切片间的重叠冲突，可使用“重叠选项”来指定优先级。
4. 合并切片：将多个相邻切片合并成一个切片，可减少导出的切片数量，降低网页加载时的请求次数。
二、导出技巧1. 导出设置：在切片工具选项栏中，设置每个切片的导出格式、文件类型和质量。
常用的格式包括JPEG、PNG和GIF，根据设计需求选择合适的格式。
2. 图层导出：除了切片导出，Photoshop还支持图层导出。
通过将图层设置为可见并导出为图像，可方便地导出单独的图层元素，如按钮、图标等。
3. 优化导出大小：在导出设置中，可以调整图像的压缩比例和优化选项，以减小图像文件的大小并提升加载速度。
同时，尽量避免使用过多的特效和过渡效果，以减少图像的复杂度。
4. 导出预设：为了方便重复使用特定的导出设置，可以保存导出预设。
在导出设置中选择"新建导出预设"，设置好导出参数后保存即可。
下次导出时，只需选择对应的预设，无需逐个设置。
5. 命名和路径设置：在导出设置中，还可以设置文件的命名规则和保存路径。
合理的命名和路径设置可以提高管理效率，减少后续的整理工作。
三、配合网页设计1. 可点击区域设置：针对导出的按钮或链接元素，可以使用“可点击区域”工具指定点击位置，以保证在网页中的交互效果正常。
切片与导出
（一）切片的基本操作切片是Macromedia Fireworks 8中用于创建交互性的基本构造块。
切片是网页对象，它们不是以图像的形式存在，而是最终以HTML代码的形式出现。
可以通过【层】面板中的【网页层】查看、选择和重命名它们。
使用拖放变换图像方法将交互性附加到切片，可以在工作区中快速创建变换图像和交换图像效果。
热点用于创建图像映射，即在HTML文档中定义热区的HTML代码。
这些区域不一定链接到某个地方；它们可能只是触发一个行为或定义替代文本。
可以使用热点将交互性结合到网页中。
热点还可以接收鼠标事件，使得JavaScript行为在切片中起作用。
1．创建切片对象可以使用【切片】工具绘制切片对象，或者基于所选对象插入切片。
从切片对象延伸的线是切片辅助线，它确定导出时将文档拆分成的单独图像文件的边界。
默认情况下，这些辅助线为红色。
基于所选对象插入矩形切片的基本操作如下：（1）选中需要插入切片的对象；（2）选择【编辑】|【插入】|【矩形切片】。
该切片是一个矩形，它的区域包括所选对象最外面的边缘，如果要插入多边形切片，则选中【多边形切片】；（3）如果选择了多个对象，则需要选择应用切片的方式，【单一】可创建覆盖全部所选对象的单个切片对象，【多重】可为每个所选对象创建一个切片对象。
使用【切片】工具绘制切片的基本操作如下：（1）选择【切片】工具，此工具绘制的是矩形切片，若要绘制多边形切片，则点击右下角的箭头选择【多边形切片】工具；（2）在需要绘制切片的对象上拖动以绘制切片对象。
HTML切片指定浏览器中出现普通HTML文本的区域。
HTML切片不导出图像，它导出出现在由切片定义的表格单元格中的HTML文本。
如果要快速更新出现在站点中的文本而无须创建新图形，则HTML切片很有用。
默认状态下绘制的切片对象为【图像】切片，可以在【属性】检查器面板的【类型】栏中查看，若要绘制【html】切片，可以按照如下操作步骤进行绘制。
网页切图规范
网页切图规范网页切图规范是指在设计师完成网页设计后，前端工程师切分图层并进行代码实现的一种规范。
它主要包括图层切割、命名、导出、优化等方面的规定，旨在规范化切图流程，提高工作效率和代码质量。
以下是一份网页切图规范，共计1000字。
一、图层切割1. 根据设计稿，将整个页面切割为一层层的图层。
每个图层对应一个HTML元素，图层之间不要重叠或交叉。
图层的位置和尺寸应与设计图一致，确保切出来的图层能准确匹配后续的布局和样式。
2. 图层之间的距离应保持一致，通过对齐工具进行调整。
确保对其方式一致，例如使用“顶部对齐”、“水平居中”等。
二、命名规范1. 图层命名应简洁明确，能够准确描述图层的内容和作用。
避免使用中文、拼音或无意义的命名，应使用英文或数字进行命名。
2. 图层的命名应采用小驼峰式命名法，首字母小写，每个单词首字母大写。
例如，一个导航栏图层的命名可以是“navigationBar”。
3. 如果一个图层有多个状态或不同变种，可以在命名中使用“_”或“-”进行分隔。
例如，一个按钮图层的命名可以是“btn_default”或“btn-hover”。
三、导出规范1. 只导出需要的图层，避免导出重复、隐藏或不需要的图层。
优先导出单独的图片文件，如果有多个图层组成的图形，可以将其合并为一张图片进行导出。
2. 导出的图片应尽量使用透明背景，如果没有透明背景，应与页面背景色保持一致。
3. 图片的格式选择应根据需要进行适当调整。
一般情况下，可以使用PNG格式，有需要时可以使用JPEG格式。
四、优化规范1. 图片应进行适当的压缩和优化，以减小文件体积。
可以使用图片压缩工具（如TinyPNG）对图片进行压缩，确保图片在保持清晰度的前提下尽量减小文件大小。
2. 尽量使用CSS3的效果代替图片，以减少页面的加载时间和请求次数。
例如，使用CSS3的渐变、圆角等效果，替代制作图片。
3. 优化CSS代码，将重复的样式合并，使用缩写等方式减小CSS文件大小。
网页的切图及切片的属性设置 (全)
课程总览在本课程中，朋友们将学习到以下内容：•• 如何通过Photoshop CS3 进行网站首页的版面设计•• 各种网页版面元素的设计技巧和方法•• 如何进行网页的切图以及切片的属性设置•• 如何创建与Flash 整合的FLV 视频•• 在Dreamweaver CS3 中使用“Spry 选项卡”构件第1 讲制作首页的主体部分本文以“石桥花园”的网站首页为例，来演示页面创作的整个过程。
其实“石桥花园”是不存在的，笔者虚构出来也并非只为完成本例，我一直向往生活在幽静、闲雅之所，虽然“石桥花园”离我的初衷有很多差异，但也多少能表达我的一些想法吧。
书归正传，早先的网页页面设计一般是以Dreamweaver 为中心，由Photoshop 或Flash 等软件来提供各种素材，如图片、动画、文字等。
自从Photoshop 出现了“切图”等专为网页设计所定制的功能后，设计的中心已慢慢转向了Photoshop。
因为Photoshop 本身以图像为基础的特性，决定了他能对版面施以更精确的控制，使网页的页面能够更加灵活和生动的布局，这几乎完全解放了网页设计师的创作灵感，不再受方方正正的网页表格所约束。
现在我们要制作的是“石桥花园”首页的主体部分，主体部分包括标题、主展示图片和导航条。
1. 打开Photoshop CS3, 执行菜单“文件> 新建”。
在新建对话框中设置名称为“石桥花园”，宽度为“777”、高度为“800”，这个数字并不“官方”，只是我在平时工作当中测试出来的而已。
对于网页来说，一般只用于屏幕显示，所以分辨率为“72”、颜色模式为“RGB 颜色”，其它参数保持默认。
2. 按下Ctrl+A 全选页面，执行菜单“编辑> 填充”将页面填为纯黑色。
在工具箱中选择矢量的“矩形工具”，绘制一个如图1-1-1 所示长方形A。
然后使用白色的“直接选择工具”将该矢量形状扭曲成如图1-1-1 中B 所示外观，该形状的十六进制颜色值为“#246b34”，一种厚重的深绿色。
网页设计切图
网页设计切图1. 简介在网页设计中，切图是指将设计稿中的视觉元素（如图片、文字、按钮等）按照一定的规则进行分割，并导出成适用于网页开发的图像文件。
切图是将静态设计转化为可供网页开发使用的可交互元素的重要过程。
本文将介绍切图的基本概念、工具和步骤，并提供一些切图的技巧和注意事项。
2. 切图工具2.1 PhotoshopPhotoshop是最常用的切图工具之一。
它提供了丰富的功能和工具，可以轻松地进行图像编辑、切割和导出。
以下是使用Photoshop进行切图的基本步骤：1.打开设计稿：将设计稿导入Photoshop，并进行适当的缩放和调整。
2.使用选择工具和剪切工具：选择要切割的元素，并使用剪切工具在所选区域上切割。
3.导出切图：选择导出选项，设置图像格式、质量和路径，然后导出切割的图像。
2.2 SketchSketch是一款专为UI/UX设计师开发的切图工具，它具有简单易用的界面和强大的矢量编辑功能。
以下是使用Sketch 进行切图的基本步骤：1.打开设计稿：将设计稿导入Sketch，并调整画板大小和缩放比例。
2.使用切片工具：选择要切割的元素，并使用切片工具在所选区域上进行切割。
3.导出切图：选择导出选项，设置图像格式、质量和路径，然后导出切割的图像。
2.3 其他工具除了Photoshop和Sketch，还有许多其他工具可以用于切图，如Adobe XD、Figma、GIMP等。
选择适合自己的工具能够提高工作效率和切图质量。
3. 切图步骤切图的步骤可以根据个人习惯和项目需求进行调整，但基本流程包括以下几个步骤：1.导入设计稿：将设计稿导入切图工具，并进行适当的缩放和调整。
2.选择切割元素：使用选择工具或切片工具选择要切割的元素。
3.切割元素：使用剪切工具或切片工具在所选区域上进行切割。
4.设置导出选项：选择导出选项，包括图像格式、质量和路径。
5.导出切图：导出切割的图像，并保存到指定的路径。
6.优化切图：对导出的图像进行优化，包括压缩图像大小、优化加载速度等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
14.1.1 将非安全色转化为安全色
在“拾色器”中选择颜色时，在所选颜色右侧出现 警告图标，就说明当前选择的颜色不是 Web安全色，如图所示。单击该 图标，即可将当前颜色替换为与其最接近的Web安全色，如图 所示。
Photoshop 基础教学
14.1.2 在安全色状态下工作
在“拾色器”中选择颜色时，勾选窗口左下角的“只有Web颜色”选项，勾选之后，拾色器 色域中的颜色明显减少，此时选择的颜色皆为安全色，如图所示。
Photoshop 基础教学
14.2.6 自动划分切片
使用“切片选择工具” 单击选择一个切片，然后单击选项栏中的“划分”按钮，如图所示。 打开“划分切片”对话框，勾选“水平划分为”/“垂直划分为”选项后，可以在水平/垂直方向 上划分切片，设置切片的数值。
Photoshop 基础教学
14.2.7 切片的编辑操作
14.2.1什么是“网页切片”
“网页切片”可以简单理解成将网页图片切分为一些小碎片的过程。为了使网页浏览的流畅， 在网页制作中往往不会直接使用将整张大尺寸的图像。通常情况下都会将整张图像“分割”为多 个部分，这就需要使用到“切片技术”。“切片技术”就是将一整张图切割成若干小块，并以表 格的形式加以定位和保存。如图所示为一个完整的网页设计的图片，如图所示为将网页切片导出 后的效果。
“导出为Zoomify”命令用于导出高分辨的JPEG文件和HTML文件，然后可以将这些文件上载 到Web服务器上，以便查看者平移和缩放该图像的更多细节，如图所示。该命令适合于需要对商 品细节进行展示时使用。 打开一个图片，如图所示。执行“文件>导出>Zoomif”菜单命令，可以打开“ZoomifTM导 出”对话框，在该对话框中可以设置导出图像和文件的相关选项，如图所示。单击“确定”按钮 完成当前操作，得到如图所示的文件。打开“ 14.5Zoomify.html”文件即可在浏览器中预览效 果，如图所示。
Photoshop 基础教学
14.2.8 提升：自动切片转换为用户切片
“自动切片”无法进行优化设置，只有“用户切片”才能够进行不同的优化设置。所以需要将 “自动切片”转换为“用户切片”。首先选择“切片选择工具”，然后在“自动切片”上单击， 接着单击选项栏中的“提升”按钮，如图所示。随即“自动切片”可以转换为“用户切片”，如 图所示。
14.2.4 基于参考线创建切片
在包含参考线的文件中可以创建基于参考线的切片。单击工具箱中的“切片工具”按钮，然后 在选项栏中单击“基于参考线的切片”按钮，如图所示。即可基于参考线的划分方式创建出切 片，如图所示。
Photoshop 基础教学
14.2.5 基于图层创建切片
选择需要以其创建切片的图层，如图所示。执行“图层>新建基于图层的切片”菜单命令，就 可以创建包含该图层所有像素的切片，如图所示。基于图层创建切片以后，当对图层进行移动、 缩放、变形等操作时，切片会跟随该图层进行自动调整，如图所示。删除图层后，基于该图层创 建的切片会被删除，（无法删除自动切片）。
Photoshop 基础教学
14.1 Web安全色
Web安全色是指能在不同操作系统和不同浏览器之中同时正常显示颜色。为什么在设计网页时 需要使用安全色呢？这时由于网页需要在不同的操作系统下或在不同的显示器中浏览，而不同操 作系统或浏览器的颜色都有一些细微的差别。所以确保制作出的网页颜色能够在所有显示器中显 示相同的效果是非常重要的，这就需要我们在制作网页时使用“Web安全色”。
Photoshop 基础教学
综合实例：使用切片工具进行网页切片
文件路径 难易指数 技术掌握 第14章\综合实例：使用切片工具进行网页切片 切片工具、储存为Web所用格式
Photoshop 基础教学
14.2 网页切片
在网站设计工作中，页面的美化是至关重要的一个步骤。页面设计师在Photoshop中完成的版 面内容的编排后，并不能直接将整张网页图片传到网络上。而是需要将网页进行“切片”。“切 片”是将图片转化成可编辑网页的中间环节，通过切片可以将普通图片变成DreamWeaver可以编 辑的网页格式。而且切片后的图片可以更快的在网络上传播。
创建出的切片还能够进行复制、组合、删除等操作，以便于得到合适的切片。
复制切片 使用“切片选择工具”选择切片，然后按住Alt键的同时拖动切片，即可复制出相同的切片。
将多个切片组合为一个切片 在组合切片之前，先使用“切片选择工具”选择多个切片，然后单击鼠标右键在弹出的快捷键 菜单中执行“组合切片”命令。所选的切片即可组合为一个切片。 删除切片 使用“切片选择工具”选择切片以后，单击鼠标右键，在弹出的菜单中选择“删除切片”命 令，可以删除切片。也可以按Delete键或Backspace键。 清除全部切片 执行“视图>清除切片”命令，可以删除所有的用户切片和基于图层的切片。 锁定切片 执行“视图>锁定切片”菜单命令，可以锁定所有的用户切片和基于图层的切片。锁定切片以 后，将无法对切片进行移动、缩放或其他更改。再次执行“视图>锁定切片”即可取消锁定。
Photoshop 基础教学
14.4.1 使用预设输出网页
对已经切片完成的网页执行“文件 >导出 > 存储为 Web 所用格式（旧版）”菜单命令，打开 “存储为Web所用格式”窗口，在窗口右侧顶部单击“预设”下拉列表，在其中可以选择内置的 输出预设，单击某一项预设方式，然后单击底部的“存储”，如图所示。接着选择储存的位置， 如图所示。
Photoshop 基础教学
14.2.9 设置切片选项
使用“切片选择工具”选择某一切片，并在选项栏中单击“为当前切片设置选项”按钮 ，可 以打开“切片选项”对话框，在这里可以设置切片名称、尺寸、URL、目标、等属性的设置。如 图所示。
Photoshop 基础教学
14.3 网页翻转按钮
网页上通常都包含很多按钮，而按钮通常都有几种不同的状态，例如按钮空闲时、将光标放在 按钮上时、单击按钮时， 这些不同的状态下按钮可能都呈现出不同的颜色或者不同的样式，来方 便用户了解当前操作状态，这
14.2.2 认识“切片工具”
切片工具“隐藏”在裁剪工具组中，右键单击工具组按钮，在弹出的列表中可以看到两种切片 工具：“切片工具”和“切片选择工具”。如图所示。 单击工具组中的“切片工具” ，在选项栏中的样式列表内可以设置绘制切片的方式，选择 “正常”可以通过在画面中按住并拖动鼠标来确定切片的大小。选“固定长宽比”可以在后面 “宽度”和“高度”输入框中设置切片的宽高比。选择“固定大小”可以在后面“宽度”和“高 度”输入框中设置切片的固定大小。如图所示。如果当前文档包含参考线，单击“基于参考线的 切片”按钮可以从参考线创建切片。
对于网页设计师而言，在Photoshop中完成了网站页面制图工作后，需要对网页进行切片，如 图所示。创建切片后对图像进行优化可以减小图像的大小，而较小的图像可以使Web服务器更加 高效地储存、传输和下载图像。然后需要对切分为碎片的网站页面进行导出。执行“文件>导出> 存储为Web所用格式（旧版）”菜单命令，打开“存储为Web所用格式”窗口，在该窗口中可以 对图像格式以及压缩比率进行设置。如图所示。设置完成后单击“存储”按钮，选择存储的位 置，接着我们会在设置的存储位置看到导出为切片的图片文件，如图所示。
Photoshop 基础教学
切片的选择 右键单击工具组，在其中单击“切片选择工具” ，在图像中单击即可选中切片，如图所示。 如果想同时选中多个切片，可以按住“Shift”键的同时单击其他切片，如图所示。如果要移动切 片，可以使用“切片选择工具” 选择切片，然后按住鼠标左键并拖动鼠标即可。
Photoshop 基础教学
Photoshop 基础教学
第14章 网页切片与输出
网页设计是近年来比较热门的设计类型，与其他类型的平面 设计不同，网页由于其呈现介质的不同，在设计制作的过程中需 要注意一些问题，例如颜色的问题，文件大小的问题等。当我们 打开一个网页时，会自动从服务器上下载网站页面上的图像内 容。那么图像内容的大小在很大程度上能够影响网页的浏览速 度。所以在网页内容的输出时就需要设置合适的输出格式以及图 像压缩比率。
Photoshop 基础教学
14.4.2 设置不同的储存格式
不同的格式的图像文件其质量与大小也不同，合理选择优化格式，可以有效地控制图形的质 量。可供选择的Web图形的优化格式包括GIF格式、JPEG格式、PNG-8格式、PNG-24和WBMP 格式。
Photoshop 基础教学
14.5 导出为Zoomify
Photoshop 基础教学
14.2.3 使用“切片工具”创建切片
创建切片 右键单击工具组，在其中单击“切片工具” ，然后选项栏中设置“样式”为“正常”。在图 像中按住鼠标左键并拖动鼠标，绘制出一个矩形框，如图所示。释放鼠标左键以后就可以创建一 个用户切片，而用户切片以外的部分将生成自动切片，如图所示。
Photoshop 基础教学
要创建按钮的翻转效果，至少需要两个图像，一个用于表示处于正常状态的图像，另一个则用 于表示处于更改状态的图像。而创建按钮翻转的方式则很多，可以通过更改按钮的底色，更改按 钮上的文字，也可以更改按钮上的图形，如图和图和图所示。
Photoshop 基础教学
14.4 Web图形输出