网页切片与输出PPT课件

1、第14章 网页切片与输出,网页设计是近年来比较热门的设计类型，与其他类型的平面设计不同，网页由于其呈现介质的不同，在设计制作的过程中需要注意一些问题，例如颜色的问题，文件大小的问题等。当我们打开一个网页时，会自动从服务器上下载网站页面上的图像内容。那么图像内容的大小在很大程度上能够影响网页的浏览速度。所以在网页内容的输出时就需要设置合适的输出格式以及图像压缩比率。,14.1 Web安全色,Web安全色是指能在不同操作系统和不同浏览器之中同时正常显示颜色。为什么在设计网页时需要使用安全色呢？这时由于网页需要在不同的操作系统下或在不同的显示器中浏览，而不同操作系统或浏览器的颜色都有一些细微的差别。

2、所以确保制作出的网页颜色能够在所有显示器中显示相同的效果是非常重要的，这就需要我们在制作网页时使用“Web安全色”。,14.1.1 将非安全色转化为安全色,在“拾色器”中选择颜色时，在所选颜色右侧出现 警告图标，就说明当前选择的颜色不是Web安全色，如图所示。单击该 图标，即可将当前颜色替换为与其最接近的Web安全色，如图所示。,14.1.2 在安全色状态下工作,在“拾色器”中选择颜色时，勾选窗口左下角的“只有Web颜色”选项，勾选之后，拾色器色域中的颜色明显减少，此时选择的颜色皆为安全色，如图所示。,14.2 网页切片,在网站设计工作中，页面的美化是至关重要的一个步骤。页面设计师在Photo

3、shop中完成的版面内容的编排后，并不能直接将整张网页图片传到网络上。而是需要将网页进行“切片”。“切片”是将图片转化成可编辑网页的中间环节，通过切片可以将普通图片变成DreamWeaver可以编辑的网页格式。而且切片后的图片可以更快的在网络上传播。,14.2.1什么是“网页切片”,“网页切片”可以简单理解成将网页图片切分为一些小碎片的过程。为了使网页浏览的流畅，在网页制作中往往不会直接使用将整张大尺寸的图像。通常情况下都会将整张图像“分割”为多个部分，这就需要使用到“切片技术”。“切片技术”就是将一整张图切割成若干小块，并以表格的形式加以定位和保存。如图所示为一个完整的网页设计的图片，如图所

4、示为将网页切片导出后的效果。,14.2.2 认识“切片工具”,切片工具“隐藏”在裁剪工具组中，右键单击工具组按钮，在弹出的列表中可以看到两种切片工具：“切片工具”和“切片选择工具”。如图所示。 单击工具组中的“切片工具” ，在选项栏中的样式列表内可以设置绘制切片的方式，选择“正常”可以通过在画面中按住并拖动鼠标来确定切片的大小。选“固定长宽比”可以在后面“宽度”和“高度”输入框中设置切片的宽高比。选择“固定大小”可以在后面“宽度”和“高度”输入框中设置切片的固定大小。如图所示。如果当前文档包含参考线，单击“基于参考线的切片”按钮可以从参考线创建切片。,14.2.3 使用“切片工具”创建切片,创

5、建切片 右键单击工具组，在其中单击“切片工具” ，然后选项栏中设置“样式”为“正常”。在图像中按住鼠标左键并拖动鼠标，绘制出一个矩形框，如图所示。释放鼠标左键以后就可以创建一个用户切片，而用户切片以外的部分将生成自动切片，如图所示。,切片的选择 右键单击工具组，在其中单击“切片选择工具” ，在图像中单击即可选中切片，如图所示。如果想同时选中多个切片，可以按住“Shift”键的同时单击其他切片，如图所示。如果要移动切片，可以使用“切片选择工具” 选择切片，然后按住鼠标左键并拖动鼠标即可。,14.2.4 基于参考线创建切片,在包含参考线的文件中可以创建基于参考线的切片。单击工具箱中的“切片工具”按

6、钮，然后在选项栏中单击“基于参考线的切片”按钮，如图所示。即可基于参考线的划分方式创建出切片，如图所示。,14.2.5 基于图层创建切片,选择需要以其创建切片的图层，如图所示。执行“图层新建基于图层的切片”菜单命令，就可以创建包含该图层所有像素的切片，如图所示。基于图层创建切片以后，当对图层进行移动、缩放、变形等操作时，切片会跟随该图层进行自动调整，如图所示。删除图层后，基于该图层创建的切片会被删除，（无法删除自动切片）。,14.2.6 自动划分切片,使用“切片选择工具” 单击选择一个切片，然后单击选项栏中的“划分”按钮，如图所示。打开“划分切片”对话框，勾选“水平划分为”/“垂直划分为”选项

7、后，可以在水平/垂直方向上划分切片，设置切片的数值。,14.2.7 切片的编辑操作,创建出的切片还能够进行复制、组合、删除等操作，以便于得到合适的切片。 复制切片 使用“切片选择工具”选择切片，然后按住Alt键的同时拖动切片，即可复制出相同的切片。 将多个切片组合为一个切片 在组合切片之前，先使用“切片选择工具”选择多个切片，然后单击鼠标右键在弹出的快捷键菜单中执行“组合切片”命令。所选的切片即可组合为一个切片。 删除切片 使用“切片选择工具”选择切片以后，单击鼠标右键，在弹出的菜单中选择“删除切片”命令，可以删除切片。也可以按Delete键或Backspace键。 清除全部切片 执行“视图清

8、除切片”命令，可以删除所有的用户切片和基于图层的切片。 锁定切片 执行“视图锁定切片”菜单命令，可以锁定所有的用户切片和基于图层的切片。锁定切片以后，将无法对切片进行移动、缩放或其他更改。再次执行“视图锁定切片”即可取消锁定。,14.2.8 提升：自动切片转换为用户切片,“自动切片”无法进行优化设置，只有“用户切片”才能够进行不同的优化设置。所以需要将“自动切片”转换为“用户切片”。首先选择“切片选择工具”，然后在“自动切片”上单击，接着单击选项栏中的“提升”按钮，如图所示。随即“自动切片”可以转换为“用户切片”，如图所示。,14.2.9 设置切片选项,使用“切片选择工具”选择某一切片，并在选

9、项栏中单击“为当前切片设置选项”按钮 ，可以打开“切片选项”对话框，在这里可以设置切片名称、尺寸、URL、目标、等属性的设置。如图所示。,14.3 网页翻转按钮,网页上通常都包含很多按钮，而按钮通常都有几种不同的状态，例如按钮空闲时、将光标放在按钮上时、单击按钮时， 这些不同的状态下按钮可能都呈现出不同的颜色或者不同的样式，来方便用户了解当前操作状态，这就是“翻转按钮”。如图和图所示。,要创建按钮的翻转效果，至少需要两个图像，一个用于表示处于正常状态的图像，另一个则用于表示处于更改状态的图像。而创建按钮翻转的方式则很多，可以通过更改按钮的底色，更改按钮上的文字，也可以更改按钮上的图形，如图和图

10、和图所示。,14.4 Web图形输出,对于网页设计师而言，在Photoshop中完成了网站页面制图工作后，需要对网页进行切片，如图所示。创建切片后对图像进行优化可以减小图像的大小，而较小的图像可以使Web服务器更加高效地储存、传输和下载图像。然后需要对切分为碎片的网站页面进行导出。执行“文件导出存储为Web所用格式（旧版）”菜单命令，打开“存储为Web所用格式”窗口，在该窗口中可以对图像格式以及压缩比率进行设置。如图所示。设置完成后单击“存储”按钮，选择存储的位置，接着我们会在设置的存储位置看到导出为切片的图片文件，如图所示。,14.4.1 使用预设输出网页,对已经切片完成的网页执行“文件导出

11、存储为Web所用格式（旧版）”菜单命令，打开“存储为Web所用格式”窗口，在窗口右侧顶部单击“预设”下拉列表，在其中可以选择内置的输出预设，单击某一项预设方式，然后单击底部的“存储”，如图所示。接着选择储存的位置，如图所示。,14.4.2 设置不同的储存格式,不同的格式的图像文件其质量与大小也不同，合理选择优化格式，可以有效地控制图形的质量。可供选择的Web图形的优化格式包括GIF格式、JPEG格式、PNG-8格式、PNG-24和WBMP格式。,14.5 导出为Zoomify,“导出为Zoomify”命令用于导出高分辨的JPEG文件和HTML文件，然后可以将这些文件上载到Web服务器上，以便查看者平移和缩放该图像的更多细节，如图所示。该命令适合于需要对