Сохранение фрагментов

Теперь, когда изображение разрезано и ссылки назначены, осталось только сохранить его фрагменты в отдельные оптимизированные файлы и получить HTML-код для их сборки в браузере. Всю эту работу выполняет команда SaveOptimized As.
1. Выберите команду Save Optimized As из меню File. Она открывает диалоговое окно Save Optimized, изображенное на рис. 10.42.


Рис. 10.42.Диалоговое окно Save Optimized

2. В поле File name уже введено имя файла, соответствующее названию документа ImageReady. Это имя будет использовано при формировании имен файлов отдельных фрагментов и имени HTML-документа. Оставьте его таким, какое предлагается по умолчанию.
3. Флажок Save HTML File включает сохранение кода, необходимого для сборки фрагментов и функционирования ссылок, в HTML-документ. Установите этот флажок.
4. Нажмите кнопку HTML Options....Она открывает диалоговое окно установок генерации HTML, доступное также в одноименном разделе диалогового окна Preferences рис. 14.43.


Рис. 14.43. Диалоговое окно Preferences, раздел HTML

Дилоговое окно HTML Options (и диалоговое окно Preferences с разделом HTML) состоит из двух областей: Formatting, содержащей настройки форматирования HTML-текста, и Coding, связанной с вариантами представления одних и тех же элементов в HTML.

Наиболее принципиальны установки области Coding. От них зависит преимущественно совместимость генерируемого кода со старыми версиями браузеров:

§ TD W, H. Фрагменты изображения компонуются на Web-странице с помощью таблиц HTML. Вариант Always приводит к обя зательному указанию размеров ячеек браузером. По умалчанию предлагается вариант Auto, доверяющий Image Ready решение этой проблемы. Мы советуем использовать именно его, поскольку размеры поставляются только для "критических" ячеек. Таким образом код не перегружается лишними данными и достигается хороший уровень совместимости.
§ Spacer Cells. Включение в таблицу пустых ячеек имеет смысл только если фрагменты изображения нарочито не стыкуются с друг другом. Некоторые браузеры могут исказить форму таблицы, если изображение занимает ее ячейку не полностью. Включение в таблицу пустых ячеек позволяет избежать этой проблемы. Вариант Auto, предлагаемый по умолчанию, как правило, обеспечивает наилучщий результат.
§ Empty Cells. Эта настройка имеет смысл только для фрагментов, не содержащих изображения (тип No Image в палитре Slice). Она позволяет установить заполнитель для пустых ячеек, чтобы браузер не изменил их размеров при просмотре. Стандартным вариантом является заполнение ячейки прозрачным изображением размером в 1 пиксел. При этом для него явно указываются требуемые высота и ширина. "Обманутый" браузер масштабирует до этих размеров "невидимый" пиксел и считает ячейку заполненной. Такой способ, GIF, IMG W&H, используется по умолчанию. Второй способ, GIF, TD W&H, состоит в жестком задании размеров ячейки, а не "прозрачного пиксела". Третий способ, No Wrap, TD W&H, не требует изображения с "прозрачным пикселом", и использует недостаточно стандартизованное средство HTML. Хотя последний вариант и наиболее естественен, он плохо совместим со старыми версиями браузеров.
§ Include Comments. Если этот флажок установлен, то ImageReady включает в HTML-текст комментарии, разделяющие блоки кода. Если вы редактируете код непосредственно, то комментарии позволят легче в нем ориентироваться. В противном случае (вы используете визуальный редактор типа Frontpage, GoLive и т. п.) отключение комментариев сократит размер HTML-файла.
§ Code. Если вы используете для редактирования страниц программу Adobe GoLive, то выберите в списке GoLive. В противном случае оставьте вариант ImageReady.

Установки области Formatting относятся только к внешнему виду генерируемого текста и не сказываются на виде страниц в браузерах. Если вы используете визуальные редакторы HTML, то настройки Formatting вам абсолютно бесполезны. Если же вы редактируете код в текстовом редакторе, то настройте вид генерируемого кода в соответствии с вашими привычками.

В списках Tag Case выберите регистр написания тэгов и атрибутов. В списке Indent установите привычный размер отступов от левого края. Список Line endings позволяет задать платформу, на которой вы будете редактировать текст. Различие генерируемого кода будет только в символах конца строки: на разных платформах (PC, Macintosh, UNIX) используются разные сочетания символов возврата каретки и новой строки. Флажок Always Quote Attributes заставляет ImageReady всегда заключать атрибуты тэгов в кавычки. При снятом флажке кавычки ставятся только там, где это действительно необходимо.

1. Установите желаемые параметры форматирования в диалоговом окне HTML Options и закройте его кнопкой ОК. Перед вами снова диалоговое окно Save Optimized.
2. Флажок Save Images включает сохранение изображений. Установите его.
3. Нажмите кнопку Saving Files Options.... Она открывает диалоговое окно установок генерации имен файлов (рис. 10.44), доступное также в одноименном разделе диалогового окна Preferences.
 


Рис. 14.44. Диалоговое окно Saving Files Options

Диалоговое окно Saving Files Options устроено аналогично разделу Slices установок программы. Область File Naming занимают девять списков, задающих "поля", из которых складываются имена файлов. Их, как правило, формируют на основе имен фрагментов. Поэтому первым компонентом имени файла по умолчанию установлено имя сохраняемого фрагмента. Последним компонентом имени файла (последний список) является расширение, для которого вы можете выбрать регистр символов. Как правило, и для имен файлов и для расширений используют символы в нижнем регистре Остальные поля имен файлов в нашем примере хоть и проставлены, но задействованы не будут. К их обсуждению вернемся позже.

Чтобы облегчить себе ориентацию среди множества файлов, составляющих сайт, Web-дизайнеры размещают изображения отдельно от файлов документов (HTML), в особом каталоге. Флажок Put images in subfolder заставляет ImageReady следовать этому хорошему правилу. Расположенная правее строка должна содержать имя папки для изображений. По умолчанию предлагается обычное для этого имя images. Советуем оставить это имя и, разумеется, установить флажок Put images in subfolder.

Флажок Copy background image when saving говорит ImageReady о том, что вместе со всеми графическими файлами следует скопировать в выбранный каталог и текущую фоновую текстуру, установленную в диалоговом окне HTML Background.

Примечание
Команда Image Info из меню File открывает простое диалоговое окно (рис. 10.45), в котором вы можете ввести произвольную информацию об изображении Как правило, это информация о вас, как об обладателе авторских прав на созданное изображение Данная информация сохраняется в файле документа ImageReady (PSD) и может быть автоматически внесена в оптимизированные для Web графические файлы. Чтобы это произошло, следует установить флажок Embed Copyright в диалоговом окне Saving Files Options. Рис. 10.44. Диалоговое окно Saving Files Options.

Диалоговое окно Saving Files Options устроено аналогично разделу Slices установок программы. Область File Naming занимают девять списков, задающих "поля", из которых складываются имена файлов. Их, как правило, формируют на основе имен фрагментов. Поэтому первым компонентом имени файла по умолчанию установлено имя сохраняемого фрагмента. Последним компонентом имени файла (последний список) является расширение, для которого вы можете выбрать регистр символов. Как правило, и для имен файлов и для расширений используют символы в нижнем регистре. Остальные поля имен файлов в нашем примере хоть и проставлены, но задействованы не будут. К их обсуждению вернемся позже.

Чтобы облегчить себе ориентацию среди множества файлов, составляющих сайт, Web-дизайнеры размещают изображения отдельно от файлов документов (HTML), в особом каталоге. Флажок Put images in subfolder заставляет ImageReady следовать этому хорошему правилу. Расположенная правее строка должна содержать имя папки для изображений. По умолчанию предлагается обычное для этого имя images. Советуем оставить это имя и, разумеется, установить флажок Put images in subfolder.

Флажок Copy background image when saving говорит ImageReady о том, что вместе со всеми графическими файлами следует скопировать в выбранный каталог и текущую фоновую текстуру, установленную в диалоговом окне HTML Background.

Примечание
Команда Image Info из меню File открывает простое диалоговое окно (рис. 14.45), в котором вы можете ввести произвольную информацию об изображении Как правило, это информация о вас, как об обладателе авторских прав на созданное изображение. Данная информация сохраняется в файле документа ImageReady (PSD) и может быть автоматически внесена в оптимизированные для Web графические файлы. Чтобы это произошло, следует установить флажок Embed Copyright в диалоговом окне Saving Files Options.


Рис. 10.45. Диалоговое окно Image Info

4. Нажмите кнопку ОК, закрывая этим диалоговое окно Saving Files Options. Перед вами снова окажется окно Save Optimized.
5. Если вы желаете сохранить только некоторые фрагменты изображения, то установите флажок Save Selected Slices Only. Чтобы он сработал, необходимо предварительно выделить с помощью инструмента Slice Select те фрагменты, которые вы хотите сохранить. В нашем примере требуется сохранение всех фрагментов, поэтому флажок следует сбросить. Обратите внимание, что если в диалоговом окне Save Optimized сброшены все флажки, то программе будет нечего сохранять. Об этом она выдаст специальное предупреждение (рис. 14.46).
6. Нажмите кнопку Save. ImageReady сохранит HTML-документ в выбранную папку под именем, которое было введено в поле File name диалогового окна Save Optimized (europe_s]iced). Все фрагменты и текущая фоновая текстура будут сохранены в подкаталоге images.
7. Откройте файл europe_sliced.html в браузере и полюбуйтесь на результат работы. Если вы захотите протестировать ссылки, то создайте серию пробных HTML-документов с названиями, которые вводили при создании фрагментов. Они могут иметь простейший вид, представленный на рис. 14.47. Таких документов должно быть создано по числу стран. Разумеется, вместо France в заголовке и теле файла должно фигурировать название соответствующей страны.
 
 


 

Рис. 10.46. Предупреждение о том, что для сохранения не выбрано ни одного файла

<html>
<title>France</title>
<body>
<hl>France</hl>
</body>
</html>

Рис. 10.47. Простейший документ для  тестирования ссылок
 

Далеко не всегда разрезанное изображение является единственным объектом на странице. Поэтому во многих случаях Web-дизайнеру требуется не код целой страницы (который получается в результате экспорта), а только его фрагмент, описывающий собственно сборку изображения. ImageReady предоставляет такую возможность командой Copy HTML Code из меню Edit. Эта команда открывает список, в котором следует выбрать, какую часть кода вы хотите получить: все фрагменты (All Slices) или только выделенные (SelectedSlices). HTML-код сборки изображения копируется в системный буфер обмена и может быть вставлен в текст Web-страницы, загруженной в любой редактор.
 
 


 
 

Сайт создан в системе uCoz