AdobePhotoshop6﹒0网页设计.docVIP

Adobe Photoshop 6.0C网页的设计 学习要点： · 能够区分photoshop提供创建和处理用于Web的静态图像的工具，包括添加链接和HTML文本、优化切片并将图像存储为 Web页等。 · 能够区分ImageReady提供的图像编辑工具。另外，还要掌握高级Web处理和创建动态Web图像，如动画和翻转效果的工具和调板。 1. 使用 Photoshop和ImageReady设计网页 当用 Adobe Photoshop和Adobe ImageReady设计网页的时候，请记住每个软件所使用的工具和 特性，在整个网页制作的过程中，它们两个各司其职。 ·Photoshop提供的工具用来创建和制作在Web上使用的静态图像，你可以将图像分为切片、增加链接和HTML文字，优化切片并将图像存储为一个Web页面。 ·ImageReady提供了许多和Photoshop相同的图像编辑工具，另外，它还包括了一些工具和调板用来进行高级的Web处理和创建动态的Web图像，如动画和翻转。 1．1使用 Web设计调板（ ImageReady） ImageReady提供下列调板用于对图像增加高级的Web设计特性：翻转、切片和图像映射。 要显示翻转、切片或图像映射调板，可单击需要显示的调板标签（见图1），或选择“窗口显示翻转”、“窗口＞显示切片”或“窗口＞显示图像映射”命令。 图1－1 1．2其他应该考虑的因素 将图像存储起来作为一个Web页面来使用，可以选择产生一个HTML文件。此文件包括的信息是告诉Web浏览器，当下载一个页面的时候应该显示什么。它可以包括指向图像的Pointers（如GIF、PNG和JPEG格式）、HTML文字、链接信息以及用来创建翻转效果的JavaScript编码。 通过在Adobe GoLive 5．0中直接打开Photoshop文件来集成自己的Web制作过程。在Photoshop中的切片、URLs和其他Web特性在GoLive中都可以被识别和编辑。也可以在GoLive 5．0中将Photoshop的文件作为页面模板打开。 可以在Photoshop和ImageReady中预视大部分的Web效果，但要注意，一副图像在Web中的显示依赖于操作系统、色彩显示系统和显示图像所使用的浏览器，应该用不同的浏览器，在不同的操作系统，并用不同的色彩深度来预视图像，以保证最后你可以看到较好的显示效果。 2. 创建和浏览切片 一个切片是组成图像的一个矩形区域，在这个区域上，可以建立链接、翻转和动画，从而在最后的Web页面上看到这些效果。将一副图像分成若干个切片可让你为了Web浏览有选择地优化它。 2．1关于切片 使用切片将一个源图像分割为不同的功能区域，将图像存储为一个Web页面时，每个切片都 被作为一个独立的文件存储起来，它包含各自的设置、颜色调板、链接、翻转效果和动画效果（见 图2）。可以使用切片来达到更快的下载速度。 注意：A．“图像”切片，B．“无图像”切片，C．包含翻转的切片。 设定 Photoshop或 ImageReady却如何产生 HTML编码用来对齐 切片，可采用“表格”或CSS层叠式表单”，在“输出设定”对话框中， 也可以设定切片文件如何被命名。 图2 2．2切片的类型 通过切片工具创建的切片称作“用户切片”，从一个图层创建的切片被称作“基于图层的切片”。 创建一个新的“用户切片”或“基于图层的切片”时，图像的其他区域就会自动产生“自动切片”。 换一种说法，就是自动切片将会填充图像中没有被“用户切片”或“基于图层的切片”定义的区域。编辑“用户切片”或“基于图层的切片”时，“自动切片”每次都被自动重新生成。“用户切片”或“基于图层的切片”和“自动切片”看起来也是不同的。“用户切片”或“基于图层的切片”都是由实线边框定义的，而自动切片是由虚线边框定义的。 “次级切片”是自动切片的一种类型，创建了重叠的切片时，“次级切片”就会产生。存储优化的图像时，“次级切片”显示图像将如何被分割。尽管“次级切片”按照数字被排列，并显示一个切片符号，也不能从下面的切片中分别选择或编辑它们。每次改变切片的堆放顺序的时候，“次级切片”都会自动重新产生。 2．3创建用户切片 用户切片可以通过切片工具创建，在ImageReady中，也可以从一个选区或从参考线中创建用户切片。 1．通过切片工具创建用户切片 （1）选择切片工具（）。任何已经存在的切片会在文件窗口中自动显示。 （2）在切片工具条中选择“样式”选项（见图3）。