应用切片实例-实际应用演示

2023-10-16 理论教育版权反馈

【摘要】：本节主要通过一个切片的应用实例，来巩固关于切片的运用知识，包括创建切片、设置切片选项和编辑切片等。图12-23 设置“图像”类型切片图12-24 设置“无图像类型”切片单击“确定”按钮退出“切片选项”对话框。图12-25 网页效果在打开的网页中，将鼠标放置在网页顶部的图像上，浏览器的状态栏中则显示出相应的信息，鼠标指针上也显示有替代文本信息。

本节主要通过一个切片的应用实例，来巩固关于切片的运用知识，包括创建切片、设置切片选项和编辑切片等。

执行“文件”→“打开”命令，打开本书提供的配套光盘/源文件/实例/第12章/切片的应用-1.ai文档，该文档绘制的是网页版面设计图。

执行“视图”→“标尺”→“显示标尺”命令，调出文档的标尺。然后，从标尺上拖出参考线并放置在要切割图稿的位置，如图12-18所示。

执行“对象”→“切片”→“从参考线创建”命令，Illustrator CS6则根据参考线的位置来生成切片，效果如图12-19所示。

图12-18 设置参考线

图12-19 创建切片

执行“视图”→“参考线”→“隐藏参考线”命令，将参考线隐藏，使得更画面更清晰。然后，在工具箱中单击切片选择工具，在画板中按住Shift键依次单击切片区域，使得同时能选中多个切片。

选择相应的切片，执行“对象”→“切片”→“组合切片”命令，将所选的切片合并为一个切片，使画面划分为5个大的切片区域，如图12-20所示。

选择水平方向上的倒数第2个切片，执行“对象”→“切片”→“划分切片”命令，打开“划分切片”对话框。在对话框中，设置“垂直划分为”选项的数值，如图12-21所示。单击“确定”按钮，所选的切片被划分为3个大小相等的切片，如图12-22所示。

执行“文件”→“存储为Web和设备所用格式”命令，打开“存储为Web和设备所用格式”对话框，在对话框的右部预览框中可以查看和选择切片。

图12-20 组合切片效果

图12-21 设置垂直划分数值(www.chuimin.cn)

图12-22 划分切片效果

在对话框中单击切片选择工具，并在预览框中双击第6编号切片（水平方向上第一个切片），打开该切片的“切片选项”对话框。在对话框中，设置该切片为“图像”类型，并设置该切片的名称、链接地址等选项，如图12-23所示。然后，单击“确定”按钮退出对话框。

双击第6编号切片（在第6步骤中划分的切片中的垂直方向第1个切片），打开该“切片选项”对话框。在对话框中，设置切片类型为“无图像”，在“在单元格中显示的文本”选项文本框中输入需要在网页中显示的文字，并选择“文本是HTML”复选框，设置单元格中文本的对齐方式为“居中”和单元格背景颜色，如图12-24所示。

图12-23 设置“图像”类型切片

图12-24 设置“无图像类型”切片

单击“确定”按钮退出“切片选项”对话框。然后，使用同样的方法，将第7号和第8号切片设置为“无图像”类型，并设置单元格中的显示文本、文本对齐方式和背景颜色。

单击“存储为Web和设备所用格式”对话框中的“存储”按钮，在弹出的“将优化结果存储为”对话框中将文档重命名，存储为HTML格式的文件。然后，使用Web浏览器打开存储的HTML文件，网页效果如图12-25所示。

图12-25 网页效果

在打开的网页中，将鼠标放置在网页顶部的图像上，浏览器的状态栏中则显示出相应的信息，鼠标指针上也显示有替代文本信息。在网页的产品图片下方的单元格中，显示了相应的HTML格式的产品介绍文本。这些在“切片选项”对话框中设置的文本，在Illustrator CS6中并未显示，在网页浏览器中才能进行查看。另外，这些文本已经转换为HTML格式，可以通过Dreamweaver、PageMaker等网页制作软件来修改这些文本的大小、颜色、字体等，进行进一步的网页设计。

单击网页顶部的图像，将弹出新的浏览器并转到设置的http：//www.thebodyshop.com链接地址。

应用切片实例-实际应用演示

相关推荐