Экспортирование html-файла и изображений

Подобно плотнику, который размечает кусок древесины перед тем, как придать ему желаемую форму, вы готовы создать окончательные срезы, определить ссыл­ки и экспортировать файл, представляющий собой HTML-страницу, отображаю­щую все срезы в виде единого целого.

Чтобы обеспечить быстрое открытие web-страниц, размеры файлов изображе. ний, отображаемых на странице, должны быть минимальными. Программа Photoshop имеет встроенные инструменты, которые помогают определить мини­мальный размер каждого экспортируемого среза без потери качества изображе­ния. На практике можно применять следующее хорошее правило: используйте JPEG-сжатие для фотографических изображений с плавными переходами тонов, а GIF-сжатие - для изображений, в которых преобладают области одного цвета, -в случае с домашней страницей сайта этого урока к таким областям можно отне­сти все области вокруг трех основных изображений на странице.

Для сравнения параметров и эффективности сжатия изображений с использова­нием различных форматов вы воспользуетесь диалогом Save For web and Devices

(Сохранить для web и устройств) программы Photoshop.

1 Выберите команду меню File ♦ Save For web and Devices (Файл ♦ Сохранить для

web).

2 В верхней части появившегося диалога Save For web and Devices (Сохранить для web и устройств) щелкните на вкладке 2-Up (2 варианта).

3 Выберите в диалоге инструмент Slice Select (Выделение фрагмента) и вы­делите срез с номером 04 в левой части диалога. Обратите внимание на размер файла изображения в левом нижнем углу вкладки диалога.

4 При необходимости выберите в диалоге инструмент Hand (Рука) и переместите изображение внутри диалога, выбрав для себя подходящий вид.

5 В открывающемся списке Preset (Настройки) в правой час­ти диалога выберите значение JPEG Medium (JPEG средне­го качества). Обратите внимание на размер файла изобра­жения, отображаемый в левом нижнем углу вкладки диалога.

Теперь вы посмотрите на настройки формата GIF для того же среза в правой час­ти вкладки 2-Up (2 варианта).

6 Используя инструмент Slice Select (Выделение фрагмента), выделите срез с номером 04 (портрет мальчика) в правой части диалога. В открывающемся списке Preset (Настройки) в правой части диалога выберите значение GIF 32 No Dither (GIF 32 без смешения цветов).

Обратите внимание, что цветная область на портрете в правой части вкладки ди­алога выглядит более гладкой и постеризованной, хотя размеры файлов изобра­жений приблизительно одинаковы.

Используя только что полученные знания, вы выберете сжатие, которое будет ис­пользовано для всех срезов на создаваемой странице.

7 Щелкните на вкладке Optimized (Оптимизированный) в левом верхнем углу диалога.

8 Используя инструмент Slice Select (Выделение фрагмента), щелкните на трех основных изображениях в области просмотра, удерживая нажатой клавишу Shift, чтобы выделить их. В открывающемся списке Preset (Настройки) выбе­рите значение JPEG Medium (JPEG среднего качества).

9 Щелкните на всех оставшихся срезах в области просмотра, удерживая нажа­той клавишу Shift, чтобы выделить их. В открывающемся списке Preset (На­стройки) выберите значение GIF 64 Dithered (GIF 64 со смешением цветов).

10 Щелкните на кнопке Save (Сохранить) и в появившемся диалоге откройте папку Lesson12/12Start/Museo, в которой хранятся все остальные изображе­ния и страницы сайта, на которые будут ссылаться созданные срезы.

11 В открывающемся списке Format (Тип файла) выберите значение HTML and Images (HTML и изображения). Для параметра Settings (Настройки) оставьте значение Default Settings (Настройки по умолчанию), используемое по умол­чанию, а в открывающемся списке Slices (Срезы) выберите значение All Slices (Все фрагменты). В поле ввода Name (Имя файла) введите значение home.html и щелкните на кнопке Save (Сохранить).

12 В окне программы Bridge на палитре Favorites (Избранное), расположенной в левом верхнем углу окна, щелкните на папке Lessons. Дважды щелкните на эс­кизе папке Lesson 12 в области предварительного просмотра, затем дважды щелкните на папке 12Start и, наконец, дважды щелкните на папке Museo.

13 Щелкните правой кнопкой мыши (Windows) или, зажав клавишу Ctrl, щелкни­те мышью (Mac OS) на эскизе файла home.html и в появившемся контекстном меню выберите команду Open With (Открыть с помощью). Выберите web-брау­зер, с помощью которого будет открыт файл формата HTML.

14 В окне web-браузера просмотрите созданный HTML-файл и испытайте его воз­можности:

• Поместите указатель мыши над некоторыми из созданных срезов. Обратите внимание на изменение внешнего вида указателя, когда изображение стрелки заменяется изображением руки с вытянутым указательным пальцем.

• Щелкните на портрете мальчика, чтобы отобразить изображение с реальны­ми размерами в новом окне.

• Щелкните на изображении буклета Spanish Masters, чтобы отобразить его в новом окне.

• Пощелкайте на текстовых ссылках в левой части изображения, чтобы перей­ти на другие страницы сайта.

15 Завершив просмотр сгенерированного HTML-файла, закройте окно вашего браузера.