Добавление альтернативного текста

Такой текст появляется в двух разных случаях: когда картинка не показана в окне браузера или когда пользователь позволяет пойнтеру мыши «висеть» над «горячим пятном». В любом случае, это делает работу с вашими web-страницами более удобной. Поэтому добавим альтернативный текст к четырем слайсам в изображении Team.psd. В палитре роллоуверов выберем слайс dick_button.В опции Alt палитры Slice введите текст Read about Dick, our Chairman (прочтите о Дике, нашем председателе). Затем выберите jayne_button slice и в опции Alt палитры Slice введите текст Read about Jayne, our President (прочтите о Джейн, нашем президенте). Подобным образом для слайса sal_button в опции Alt палитры Slice введите текст Read about Sal, our Founder прочтите о Сэле, нашем основателе). Выбрав слайс Team_button, в опции Alt палитры Slice введите текст Read about our expert team (прочтите о нашей команде экспертов). Проверьте себя, нажав на кнопку включения-выключения слайсов, потом – на кнопку предварительного просмотра на панели инструментов и задержав на несколько секунд пойнтер мыши на каждом из четырех слайсов. Потом выключите обе кнопкии . Сохраните файл: File > Save.

Просмотр готовых страниц в браузере

Прежде, чем сохранить оптимизированные слайсы изображения, просмотрим готовые роллоуверы страниц BannerиTeamвweb-браузере. Однако, фиктивныеURL-связи, которые вы назначили слайсам, не будут работать в модеPreview In Browser. Поэтому протестируем их позже, когда создадим окончательныйHTML-файл и откроем этот файл из браузера. ВыберитеWindow > Documents > 15Start.psd, чтобы вернуться назад к изображению баннера. В панели инструментов кликните кнопкуPreview In Default Browser,, или выберите браузер во всплывающем меню этих кнопок. Когда страничка откроется в браузере, Протащите пойнтер мыши по каждому роллоуверу в баннере. Для каждой из трех первых кнопок появится другое изображение и для последней кнопки – искривлённый текст. Теперь нажимайте кнопку мыши, когда пойнтер находится на каждой кнопке. Когда вы нажимаете кнопку мыши на кнопкеDesign, видны белые буквы“tech”; на кнопке Structures– “arch”, а на кнопке Art–“art”. Кликните синий круг в середине изображения, чтобы открыть страницу Team.html. Проведите пойнтером по именамDick, Jayne и Sal, чтобы удостовериться, что светящееся состояние Over работает нормально. Щелкнем каждую кнопку(sal, jayne, dick, and Team), чтобы убедиться, что состояниеSelectedтоже работает нормально. Закончив просмотр, закройте браузер и вернитесь вImageReady.

Сохранение нарезанных на слайсы изображений в ImageReady

Теперь, когда обе страницыbanner и teamготовы, сохраним оптимизированные слайсы изображения и сгенерируемHTML-файл, содержащийHTML-таблицу нарезанного на слайсы изображения.ImageReady позволяет сохранять слайсы не только в виде таблицы, но также в виде каскада листов. Чтобы настроить файл в стиле каскада листов, выберем File > Output Settings > HTML. Для Slice Output, выберем Generate CSS, и кликнем OK. Можно также изменить эти установки из диалогового окнаSave Optimized. Итак, для активного файла15Start.psd выберем File > Save Optimized. В открывшемся диалоговом окне введем Banner.html в качестве имени. Во всплывающем меню Format выберем HTML and Images (HTML и изображения), потом выберем All Slices (все слайсы) во всплывающем меню. Затем кликнем кнопку Save. Откроется диалоговое окно Replace files (заменить файлы) для четырех кнопок, которые мы ранее сохранили в Photoshop. Кликнем Replace, чтобы сохранить новые версии изображений. ImageReady сохраняет HTML-таблицу всего нарезанного на слайсы изображения в HTML-файле и сохраняет оптимизированные изображения для всех автослайсов, пользовательских слайсов, слайсов, основанных на слоях и для различных состояний роллоуверов в папке Images. Имена файлов базируются на именах, заданных нами или на названиях файлов и номерах слайсов – по умолчанию. Выберем Window > Documents > Team.psd, чтобы переключиться на файл Team.psd и повторить описанную процедуру сохранения, но в качестве имени файла для сохраняемой оптимизированной версии выберите Team.html. С целью тестирования URL-связей, которые мы назначили слайсам, откройте браузер, а в нём – файл Banner.html. Снова проверьте поведение состояний роллоуверов для различных слайсов, включая щелчок по синему кольцу для открытия связанной страницы Team. Закройте браузер, затем – все файлы, наконец – ImageReady и Photoshop. О создании анимаций будет рассказано в уроке 16.

Вопросы для проверки

1. Что такое слайсы?

2. Опишите пять способов создания слайсов.

3. В чём польза связывания слайсов между собой?

4. Опишите создание слайса с границами, точно очерчивающими маленький объект или объект необычной формы.

5. Как создать слайс, не содержащий изображения? Для чего такие слайсы служат?

6. Назовите два общих состояния роллоуверов и действия мыши, переключающие эти состояния. Сколько состояний может иметь слайс?

7. Опишите простой способ создания состояний роллоуверов для изображения.