Web设计对图形的要求与其他设计不太一样。首先，它要求色彩准确，不能使用非Web安全颜色；其次，要解决矢量图形转变为像素时怎样对齐的问题。

13.1.1 使用Web安全颜色

颜色是网页设计的重要内容。然而，由于系统之间有差异，我们在自己显示器上看到的颜色不一定能在其他显示器（或其他设备）上以同样的效果显示。为了使颜色能够在所有显示器上看起来一模一样，在制作网页时，需要使用Web安全颜色。

创建Web图形时，可以通过两个预防措施来防止颜色出问题。调整颜色时，当“颜色”面板或“拾色器”对话框中出现非Web安全颜色警告图标时，单击它旁边的颜色块，用Web安全颜色替换当前颜色，如图13-1和图13-2所示。另外，可以从“颜色”面板菜单中选取“Web安全RGB”命令，或勾选“拾色器”对话框中的“仅限Web颜色”选项，如图13-3所示，这样就能始终在Web安全颜色模式下设置颜色了。

图13-1

图13-2

图13-3

13.1.2 像素预览

计算机屏幕上显示的Illustrator图稿是转换为像素后的结果。就是说，图稿是矢量对象，但计算机要将它转换为像素，才能显示出来。Web图形也是如此。

如果想预览图稿被栅格化后通过Web浏览器在屏幕上显示的效果，可以执行“视图>像素预览”命令，启用像素预览功能，如图13-4和图13-5所示。

图13-4

图13-5

13.1.3 实战：将对象与像素网格对齐

图稿、文字等能否对齐，对于版面是否规整至关重要。然而，为对象添加的描边、文字的基线（参考此处）等都会干扰对齐功能，使对象看起来并没有真正对齐。Web设计要求就更高了，需要将对象与像素网格对齐才行。下面介绍操作方法。

01 打开素材，使用选择工具将对象选取，如图13-6所示。执行“视图>像素预览”命令。在文档窗口左下角设置视图比例为600%以上（1800%），这样就能看到像素网格了，如图13-7所示。

图13-6

图13-7

02 单击“控制”面板中的将选中的图稿与像素网格对齐按钮，如图13-8所示。执行“对象>设为像素级优化”命令，即可将对象与像素对齐，如图13-9所示。

图13-8

图13-9

03 如果要创建新的对象，并想让它与像素对齐，应这样操作：单击“控制”面板中的创建和变换时将贴图对齐到像素网格按钮，如图13-10所示。执行“视图>对齐像素”命令，之后绘制图形，它就能与最近的像素对齐了，如图13-11所示。而且单击按钮后，进行移动、旋转、缩放等变换操作时，对象也会与像素对齐，如图13-12和图13-13所示。

图13-10

图13-11

图13-12

图13-13

13.1.4 查看和提取CSS代码

CSS即串联样式表，是一种用来表现HTML或XML等文件样式的计算机语言。使用Illustrator创建HTML页面的版面时，也可以生成和导出基础CSS代码，以用来控制文本和对象的外观。其用途与字符样式（参考此处）和图形样式相似。

打开“CSS属性”面板菜单，选取“导出选项”命令，如图13-14所示。打开“CSS导出选项”对话框，勾选“为未命名的对象生成CSS”选项，如图13-15所示。将对话框关闭。之后选取一个对象，如图13-16所示，便可在“CSS属性”面板中查看它的CSS代码，如图13-17所示。

图13-14

图13-15

图13-16

图13-17

按住Shift键单击多个对象，将它们选取，之后单击“CSS属性”面板中的按钮，可生成所选对象的CSS代码。单击按钮，可以将CSS代码复制到剪贴板中。单击按钮，可以将CSS代码导出到文件中。