切片选项 Slice Options对话框提供了多个设置,主要用于定义切片的网页属性。
在与 HTML 文件一起导出时,切片选项决定了切片在 Web 浏览器中的显示方式。
切片类型 Slice Type分为三种:图像、无图像、表。
“表” Table类型可以特定的切片创建一个 HTML 表,在当前的工作环境或文件设置下可能不支持此功能(显示为灰色)。
◆ ◆ ◆
切片类型 - 图像
Image
默认选项。用于定义图像切片的网页属性。
名称
Name
为图像切片指定一个名称。
URL
URL
为图像切片指定一个网址。
在创建网页布局时,这意味着当用户点击这个图像时,Web 浏览器会导航到指定的 URL 和目标框架。
可以输入相对 URL 或绝对(完整)URL。
如果输入绝对 URL,一般要包括正确的协议。
例如,http://www.adobe.com 而不是 www.adobe.com。
目标
Target
用于指定当网页上的图像作为链接被点击时,链接打开的方式或位置。这里的选项是 HTML 中定义链接行为的标准目标属性值。
_blank
打开一个新的浏览器窗口或标签页来加载点击的链接。
当希望用户在点击链接时保留当前页面,同时在新窗口中打开链接内容时使用。
_self
在当前浏览器窗口或标签页中加载链接,替换掉当前显示的页面。
这是默认行为,适用于用户不需要保留当前页面的情况。
_parent
在父框架中打开链接。如果当前页面是在一个框架集(frame set)的子框架中,该链接将在父框架中打开,而不是当前框架。
在使用 HTML 框架时,如果想在父框架中替换内容,而不是当前子框架,则使用这个选项。
_top
在当前浏览器的顶层框架中打开链接,即,取消所有框架并在整个浏览器窗口中打开链接。
当你的页面是在多层嵌套的框架中时,使用这个选项可以确保链接的内容在最顶层的浏览器环境中完整显示。
信息文本
Message Text
定义鼠标悬停在切片上时显示的文本。
这通常用于提供有关链接目的地的额外信息。
Alt 标记
Alt Tag
定义切片的“alt”属性,这是HTML中的一个标准属性,用于提供图像的替代文本。
这对于搜索引擎优化(SEO)和可访问性非常重要。
◆ ◆ ◆
切片类型 - 无图像
No Image
主要用于在设计网页时,为非图像切片定义文本信息,这些文本信息将在最终的 HTML 输出中显示。
这个功能在设计网页时非常有用,特别是当你需要在特定区域内显示文本而不是图像时。
显示在单元格中的文本
Text Displayed in Cell
输入要在所生成 Web 页的切片区域中显示的文本。此文本可以是纯文本或使用标准 HTML 标记设置格式的文本。也可以选择垂直和水平对齐选项。有关特定 HTML 标记的更多信息,请参阅 HTML 参考。
Photoshop 不会在文档窗口中显示 HTML 文本,必须使用 Web 浏览器来预览文本。确保在不同的操作系统上使用不同的浏览器,利用不同的浏览器设置预览 HTML 文本,以确认文本可在 Web 上正确显示。
◆ ◆ ◆
切片通用选项
尺寸
Dimensions
X、Y 表示切片左上角的坐标。
W、H 表示切片的宽度和高度。
切片背景类型
Slice Background Type
选择一种背景色来填充透明区域(适用于“图像”切片)或整个区域(适用于“无图像”切片)。
在 Photoshop 中不会显示选定的背景色,必须在浏览器中预览图像才能查看选择背景色的效果。
--无
None
--杂边
Matte
--白色
White
--黑色
Black
--其它
Other
在“其它”选项时,可手动指定背景色 Background Color。
◆ ◆ ◆
导出时的切片选项
Ps菜单:文件/导出/存储为 Web 所用格式(旧版)
File/Export/Save for Web(Legacy)
快捷键:Ctrl + Alt + Shift + S
在“存储为 Web 所用格式”对话框中,使用右侧的切片选择工具双击切片,可编辑切片选项。
在切片类型为“图像”时,选项与前面所述基本一致。
当切片类型为“无图像”时,则多出了一些选项。
文本为 HTML
Text is HTML
如果文本包含 HTML 格式设置标记,请勾选选项。
如果不勾选,则将忽略 HTML 标记,所有文本将以未设置格式的纯文本形式出现在生成的 Web 页上。
单元格对齐
Cell Alignment
水平
Horiz
--默认值
Default
使用浏览器的默认值作为水平对齐方式。
--左
Left
将文本与切片区域的左边对齐。
--居中
Center
将文本与切片区域的中心对齐。
--右
Right
将文本与切片区域的右边对齐。
垂直
Vert
--默认值
Default
使用浏览器的默认垂直对齐方式。
--顶
Top
将文本与切片区域的顶边对齐。
--基线
Baseline
在(结果 HTML 表的)同一行中为单元格文本的第一行设置共用基线。行中的每个单元格必须使用“基线”选项。
--中间
Middle
在切片区域中垂直居中对齐文本。
--底
Bottom
将文本与切片区域的底端对齐。
背景
Background
用于设置切片背景色。
--无
None
--杂边
Matte
--吸管颜色
Eyedropper Color
--白色
White
--黑色
Black
--其它
Other
“点赞有美意,赞赏是鼓励”