Иллюстрированный самоучитель по Adobe Golive

         

Добавление гипертекстовых ссылок


С помощью Adobe GoLive вы можете с легкостью создавать гиперссылки, которые отошлют посетителей на другие страницы вашего или чужого сайта, и даже на ресурсы, не относящиеся к Web, такие как FTP-серверы и адреса электронной почты.
В качестве альтернативы созданию гипертекстовых ссылок на основе текста, вы можете создавать ссылки, базирующиеся на изображениях или их фрагментах (так называемая "сегментированная графика"). Также вы можете создавать динамические элементы, активизируемые с помощью мыши.
Чтобы создать гипертекстовую ссылку, выделите текст, который будет служить гиперсеылкой. Затем выполните одно из приведенных ниже действий.

В палитре Inspector (Инспектор) активируйте панель Link (Ссылка) и нажмите кнопку New link (Новая ссылка) на панели инструментов. Чтобы определить ресурс, да который будет указывать ссылка, выберите файл, используя кнопку Feteh URL (Пойти за URL) или кнопку Browse (Просмотр). Также можно ввести URL или адрес электронной почты напрямую в текстовое поле URL. Если вы делаете это, то не забудьте в начале адреса ввести префиксы http:// для Web-ресурсов или mailto: для адреса почты. Удерживая клавишу <Ctrl>, перетащите мышью выделенный текст к нужному месту назначения ссылки в пределах окна сайта. Целью ссылки может быть файл HTML на панели Files (Файлы) окна сайта, или URL, или адрес электронной почты на панели Externals (Внешнее) окна сайта.

Если вы хотите, чтобы место назначения вашей ссылки появилось в новом окне браузера, выберите соответствующий элемент из выпадающего списка Target (Цель) в палитре Inspector (Инспектор).
Чтобы,-удалить гипертекстовую ссылку, выделите текст, на котором установлена гиперссылка, а затем нажмите кнопку Remove Link (Удалить ссылку) на панели инструментов.



Добавление горизонтальных линий


Специальный элемент — горизонтальные линии — служит, чтобы визуально отделять., группы объектов друг от друга. Чтобы добавить такую линию, перетащите с помощью мышки пиктограмму Lane (Линия) из Objects Palette (Палитра объектов) в окно документа или просто дважды щелкните мышью на этой пиктограмме.
Изменение внешнего вида добавленной линии происходит при помощи кнопок-переключателей Style (Стиль) в палитре Inspector (Инспектор): левая кнопка создает обычную непрерывную линию, правая придает линии некоторую трехмерность.
Для того чтобы установить толщину линии, выберите единицы измерения в выпадающем списке Width (Ширина) палитры Inspector (Инспектор). Выберите элемент Full (Полностью), чтобы установить толщину линии, равной ширине макетного текстового поля или окна документа. Элементы Percent (Процент) и Pixel (Точка) позволяют задавать .длину линии в процентах относительно макетного поля или окна просмотра документа и в точках соответственно. В том случае, если были выбраны элементы Percent (Процент) или Pixel (Точка), следует задать длину линии в поле ввода Width (Ширина).
Чтобы установить выравнивание линии по горизонтали, нажмите одну из кнопок группы Alignment (Выравнивание) в палитре Inspector (Инспектор). Следует отметить, что если для ширины линии был выбран элемент Full (Полностью), то эти кнопки будут недоступны для использования. Это вполне естественно, ведь линия и так занимает все отведенное ей пространство, поэтому выравнивание по горизонтали не принесет видимых изменений.





Добавление тегов Head


Как нам известно, страница HTML состоит из двух основных секций: заголовка и тела. Режим просмотра Layout (Макет) Adobe GoLive отражает эту структуру при помощи представления панели головной секции как части окна документа. По умолчанию заголовочная секция каждой страницы уже содержит тег <titie>, который вы имеете возможность редактировать напрямую. Adobe GoLive облегчает добавление других заголовочных тегов в страницу при помощи вкладки Head (Заголовок) в Objects Palette (Палитра объектов).
Чтобы добавить тег заголовка, откройте панель заголовочной секции, щелкнув мышью по треугольнику рядом со значком Page (Страница) в левом верхнем углу окна документ» (рис. 4.7).

Рис. 4.7. Окно разработки Web-страницы с отображенной заголовочной секцией

Затем активируйте вкладку Head (Заголовок). Оттуда перетащите нужную пиктограмму на панель заголовочной секции. Если эта панель закрыта, то вы можете перетянуть пиктограмму напрямую к треугольнику.
Вы можете использовать тег <base> для определения основного места расположения вашей Web-страницы, т.е. ее исходного URL. Этот адрес используется браузерами для обработки относительных ссылок на странице. В том случае, если ваша страница была перемещена с ее исходного местоположения, то браузер может корректно локализовать относительные ссылки, используя базовый URL.
Чтобы добавить тег <base>, перетащите соответствующую пиктограмму с вкладки Head (Заголовок) Objects Palette (Палитра объектов) на панель заголовочной секции вашего окна документа. Затем стоит перейти в палитре Inspector (Инспектор) и взвести флажок в независимом переключателе Base (Базовый). После этого укажите в соответствующем текстовом поле URL, который будет использован в качестве базового, Также рекомендуется взвести флажок в переключателе Write Base Always Absolute (Использовать абсолютные пути), чтобы гарантировать, что все ссылки указывают на корень сайта.
Для добавления скрытых комментариев к вашей странице (таких, например, как публикация информации для будущих ссылок), вы можете использовать теги <comment>. Если вы захотите просмотреть комментарии, то нужно использовать Adobe GoLive или другой редактор Web-страниц.
Чтобы добавить тег <comment>, перетащите соответствующую пиктограмму со вкладки Head (Заголовок) Objects Palette (Палитра объектов) на панель заголовочной секции вашего окна документа. А затем в палитре Inspector (Инспектор) можно указать сам текст создаваемого комментария.
Тег <keywords> можно использовать для. указание ключевых слов для поисковых систем. Поисковые системы Internet используют информацию, занесенную в тег <keywords>, при создании своих индексов, поэтому заданию его содержимого следует подходить весьма ответственно.
Чтобы добавить тег <keywords>, перетащите его пиктограмму со вкладки Head (Заголовок) Objects Palette (Палитра объектов) на панель заголовочной секции вашего окна документа. А затем в палитре Inspector (Инспектор) можно при помощи следующих действий редактировать набор ключевых слов, характеризующих разрабатываемую Web-страницу:

чтобы добавить ключевое слово, введите его с клавиатуры в текстовом поле под прокручивающимся текстовым полем, а затем нажмите на кнопку Add (Добавить) или нажмите клавишу <Enter>; чтобы отредактировать ключевое слово, выберите уже существующее слово в прокручивающемся списке ключевых слов,, отредактируйте это слово в текстовом поле, и нажмите кнопку Update (Модифицировать); чтобы удалить ключевое слово, выделите уже существующее слово в прокручивающемся списке ключевых слов и нажмите кнопку Delete (Удалить).

Тег <refresh> используется для того, чтобы заставлять, Web-браузеры принудительно перезагружать содержимое вашей страницы или через определенный интервал времени автоматически загрузить другую Web-страницу.
Чтобы добавить тег <refresh>, перетащите одноименную пиктограмму со вкладки Head (Заголовок) Objects Palette (Палитра объектов) на панель заголовочной секции вашего окна документа. Для указания периода времени, после которого произойдет перезагрузка документа, следует использовать поле ввода Delay (Задержка) в палитре Inspector (Инспектор). В это поле необходимо будет ввести значение в секундах, чтобы указать интервал, после которого страница будет обновлена или заменена другой страницей.
Затем следует использовать один из группы переключателей, расположенной в нижней части палитры Inspector (Инспектор).

Выберите переключатель Target This Document (Указать на текущий документ), чтобы обновить исходную страницу. Выберите переключатель Target URL (Указать URL), чтобы по истечении указанного периода переадресовать пользователя на другую страницу. Затем выберите замещающую страницу, используя кнопку Fetch URL (Пойти за URL) или кнопку Browse (Просмотр), связанные с соответствующим текстовым полем.

Вы можете использовать тег <script> для добавления сценария в заголовочную секцию ващей страницы. Сценарий, в заголовочной секции будет выполняться, пока Загружается видимая основная секция страницы.
Чтобы добавить заголовочный сценарий, перетащите пиктограмму Script (Сценарий) из Objects Palette (Палитра объектов) на панель заголовочной секции окна документа. Наименование подключаемого сценария указывается в поле Name (Имя) палитры Inspector (Инспектор). В выпадающем списке Language (Язык) указывается целевой браузер, в котором предполагается выполнять создаваемый сценарий.
Сам файл, содержащий код присоединяемого сценария указывается в поле Source (Источник), после того, как будет взведен флажок в соответствующем независимом переключателе. Впрочем, код сценария можно написать вручную, используя для этого встроеиный текстовый редактор, который вызывается по нажатию кнопки Edit (Редактировать).



ВЕРСТКА СТРАНИЦ


"Разумные" объекты и ссылки Создание новой Web-страницы Добавление тегов Head Работа с текстом Применение макетной сетки Добавление горизонтальных линий Перемещение, изменение размеров и группировка объектов Работа с цветом Добавление гипертекстовых ссылок Применение закладок Создание выпадающих списков URL Отслеживание изменений на страницах Предварительный просмотр страниц Просмотр информации о документе Дополнительные возможности Выравнивание и распределение объектов Работа с часто используемыми объектами

Отслеживание изменений на страницах


Каждый, кто когда-нибудь всерьез занимался разработкой чего-либо, будь то планы на будущие выходные или очередной модуль космической станции, знает, как часто возникает необходимость вернуться назад, к одному из состояний разрабатываемого объекта в прошлом. Разработчики Adobe GoLive конечно же не могли упустить такую важную деталь. Во время дизайна ваших страниц вы можете использовать палитру History (История). Эта палитра записывает изменения, которые вы производите на странице в режимах просмотра Layout (Макет) и Source (Исходный код). Каждый раз, когда вы делаете какие-либо изменения на странице, новое состояние страницы добавляется в палитру History (История), Вы можете восстановить предыдущее состояние страницы, просто выбрав соответствующий элемент списка состояний в этой палитре.
Палитра History (История) сохраняет в списке до 20 состояний страницы. Если у вас одновременно открыто несколько окон документов, то для каждого из них ведется своя "история".

Внимание
Содержимое палитры очищается, когда вы переключаетесь из режима Layout (Макет) или Source (Исходный код) в другой режим окна документа.

Совет
Помимо палитры History (История) есть более простой способ отменить последние сделанные изменения. Воспользуйтесь командой меню Edit) Undo (Правка | Отмена) и последнее сделанное вами изменение будет отменено. Чтобы восстановить изменение, которое вы сделали перед его отменой, следует воспользоваться командой меню Edit | Redo (Правка (Повторить). В любой момент вы можете также вернуться к последнему сохраненному состоянию страницы, при помощи команды меню File | Revert to Saved (Файл | Вернуться к сохраненному варианту).



Перемещение, изменение размеров и группировка объектов


Adobe GoUve предусматривает множество возможностей для точного позиционирования объектов на странице и изменения их. размеров. Вы можете перемещать объекты, изменять их размеры или группировать. Большинство этих возможностей предоставляет нам палитра Transform (Трансформация) из меню Window (Окно). Чуть позже мы рассмотрим ее более подробно, но сначала сделаем важное замечание.

Внимание
Прежде чем перемещать объекты, перетаскивая мышью, вводя конкретные значения на панели инструментов или используя палитру Transform (Трансформация), вам необходимо поместить их на макетную сетку.

Теперь, когда все необходимые объекты находятся на макетной сетке, попробуем изменить их расположение. Для этого, щелкните на нем мышью и произведите одно из следующих действий:

перетащите объект с помощьвд мыши на нужное место; введите на панели инструментов или палитре Transform (Трансформация) нужные значения в пикселах для полей Position (Позиция). Для изменения размеров объекта также существует несколько путей: потяните мышью один из ограничивающих маркеров объекта; в поле Size (Размер) палитры Transform (Трансформация) или в соответствующих полях панели инструментов введите значение в пикселах в левом поле для ширины объекта, а в правом — для высоты.

Совет
Удерживайте клавишу <Shift> при перемещении маркера и размеры вашего объекта будут изменяться пропорционально. Или взведите флажок в независимом переключателе Constrain Proportion» (Соблюдать пропорции) палитры Transform (Трансформация).

Чтобы сгруппировать объекты, выдадите их в макетной сетке (щелкните мышью по первому объекту, а затем, удерживая в нажатом состоянии клавишу < Shift>, выделите остальные объекты один за другим). Затем нажмите кнопку Group (Группировать) на панели инструментов или палитре Transform (Трансформация). Обратите внимание на то, что плавающие поля вы группировать не можете.

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

Чтобы разгруппировать объекты, выделите мышью группу объектов. Затем, нажмите кнопку Ungronp (Расформировать) панели инструментов или палитры Transform (Трансформация).

Предварительный просмотр страниц


Вы можете предварительно просматривать ваши страницы и тестировать ссылки прямо в Adobe GoLive без использования внешних браузеров. Также можно предварительно просматривать файлы QuickTime, анимированные GIF и любые другие встроенные медиа-элементы, поддерживаемые Adobe GoLive. Предварительный просмотр приблизительно показывает, как именно будет выглядеть опубликованная в Web страница.
Но не стоит излишне полагаться на режим предварительного просмотра Adobe GoLive. Всегда полезно просмотреть ее, используя целевые браузеры. Это выявит различия в отображении вашей страницы и даст вам возможность протестировать сценарии JavaScript, динамический HTML, анимацию Macromedia Shockwave или другие элементы. Если необходимо, вы можете запустить браузер прямо из Adobe GoLive при помощи команды меню File | Preview In (Файл | Предварительный просмотр В) или просто нажав кнопку Show in Browser (Показать в браузере) на панели инструментов.

Внимание
Если вы используете Adobe GoLive для Windows. Вам нужно установить Microsoft Internet Explorer, прежде чем вы сможете предварительно просматривать страницы в Adobe GoLive.

Чтобы добавить браузеры в список доступных для предварительного просмотра, выполните команду меню Edit | Preferences (Правка | Свойства) и выберите пиктограмму Browsers (Браузеры) на левой панели диалогового окна Preferences (Свойства). Затем нажмите кнопку Find All (Найти все). После этого Adobe GoLive просканирует жесткие диски системы, чтобы найти установленные браузеры. Список найденных браузеров будет отображен в диалоговом окне Preferences (Свойства). Радом с наименованием каждого найденного браузера будет отображаться независимый Переключатель. Если взвести в нем флажок, то этот браузер будет использован для запуска из Adobe GoLive.

Внимание
Большинство браузеров допускают открытие только одной версии одновременно. Например, вы можете: открыть одновременно Netscape Navigator и Microsoft Internet Explorer, но не Netscape Navigator 3.0 и 4.0.

Для удаления браузера из созданного списка, выделите браузер и нажмите кнопку Remove (Удалить).

Применение макетной сетки


Мы уже неоднократно отмечали тот факт, что окончательный вид вашей страницы напрямую зависит от настроек браузера посетителя вашего сайта. Чтобы убедиться, что ваша страница отображается именно так, как вы задумали, можно поместить текст и объекты в макетную сетку. Когда вы добавляете макетную сетку на страницу, Adobe, GoLive фактически создает теги таблицы в исходном коде HTML. Программа использует эти таблицы, чтобы разместить текст и объекты на странице с точностью до одного пиксела. Таким образом, использование макетной сетки позволяет достаточно точно позиционировать Флоки содержимого Web-страницы.

Внимание
Если вы используете макетную сетку, браузер пользователя должен поддерживать таблицы, чтобы отображать страницы правильно. Большинство браузеров сейчас поддерживают таблицы. Устаревшие браузеры, такие как Netscape Navigator 2.0, отображают таблицы не совсем точно.

Чтобы добавить макетную сетку, перетащите пиктограмму Layout Jrid (Макетная сетка) из Objects Palette (Палитра объектов) в окно документа,или просто дважды щелкните мышью по этой пиктограмме.

Внимание
Adobe GoLive вставляет тег <spacer> в HTML-таблицу, которая составляет макетную сетку. Этот тег удаляет ошибку являющуюся причиной округления размеров таблицы в браузерах Netscape. Microsoft Internet Explorer игнорирует этот тег. В результате ваш HTML-код должным образом отображается обоими браузерами.

Существуют несколько путей управлять размерами макетной сетки.

Щелкните мышью на границе сетки, чтобы вывести на экран маркеры изменения размера и при помощи мыши измените этими маркерами размер сетки. Новая ширина и высота сетки отображается в палитре Inspector (Инспектор). В палитре Inspector (Инспектор) введите размеры в полях Width (Ширина) и Height (Высота). Если вы завершили процесс расположения объектов в макетной сетке, нажмите кнопку Optimize (Оптимизировать) в палитре Inspector (Инспектор), чтобы автоматически уменьшить размер сетки до минимально возможного. Помимо изменения размеров вам доступны и другие возможности. Чтобы изменить интервал между горизонтальными или вертикальными линиями сетки, укажите значения в пикселах в полях ввода Horizontal (Горизонтальный) и Vertical (Вертикальный), размещенные в группе Grid (Сетка) палитры Inspector (Инспектор). Чтобы привязать объекты к .горизонтальным или вертикальным линиям сетки, взведите флажки в независимых переключателях Snap (Защелка), связанных с соответствующими полями ввода. Если снять флажок в этих переключателях, можно будет размещать объекты в сетке без привязки к ее линиям, но тогда теряется весь эффект от ее применения. Чтобы отобразить горизонтальные и вертикальные линии в сетке, взведите флажки в независимых переключателях Visible (Видимый), связанных с полями ввода.

Совет
Чтобы ускорить выведение информации на экран во время просмотра макета страницы, скройте линии сетки. Сетка остается активной и тогда, когда ее линии скрыты.

Чтобы задать выравнивание сетки относительно окна просмотра, используйте выпадающий список Align (Выравнивание). Выберите элемент Default (По умолчанию), чтобы использовать настройки окружающего контейнера HTML для выравнивания сетки. Чтобы использовать в сетке фоновый цвет, взведите флажок в независимом переключателе Background Color (Фоновый цвет). Щелкните мышью внутри цветового поля, чтоЙй выделить его, а затеет выберите цвет в палитре Colors (Цвета).

Применение закладок


Закладка — это конкретное место на странице, на которое указывает гиперссылка. Обычные гиперсеылки загружают документ в окно просмотра полностью, и этот документ отображается, начиная с его верхней границы. В том случае, когда необходимо точно позиционировать отображение документа в окне просмотра, например, при ссылке на конкретный абзац в большом текстовом документе, имеет смысл использовать закладки. В любом случае при создании закладок вы должны руководствоваться приведенными ниже основными принципами.

Не следует помещать закладки непосредственно на макетную сетку. Вместо этого поместите их в текст -HTML, в макетное текстовое поле или в ячейку таблицы. Если вы вставляете закладку в макетное текстовое поле или в ячейку таблицы, убедитесь, что в них есть и иное содержимое, например текст или графика, иначе закладка не будет распознана браузером Netscape Navigator старых версий. В крайнем случае в поле или ячейку таблицы можно добавить неразрывный пробел. Следует размещать закладку около левой границы страницы, что позволит избежать возможных проблем с позиционированием Web-страницы в окне просмотра браузера.

Чтобы создать закладку и ссылку на нее, в Objects Palette (Палитра объектов) активируйте вкладку Basic (Основная). Перетащите пиктограмму Anchor (Якорь) из палитры к месту на странице, где вы хотите установить закладку. В текстовом поле Name (Наименование) палитры Inspector (Инспектор) введите уникальное имя для закладки. В окне документа выделите текст, который будет служить ссылкой на установленную закладку. Затем на панели инструментов нажмите кнопку New Link (Новая ссылка). 6 палитре Inspector (Инспектор) активируйте вкладку Link (Ссылка), а затем просто при помощи мыши и кнопки Fetch URL (Пойти за URL) установите связь между ссылкой и закладкой. Следует отметить, что для проведения вышеизложенных действий, необходимо, чтобы разрабатываемая Web-страница была предварительна сохранена.



Просмотр информации о документе


В диалоговом окне Document Statistics (Статистика документа) представлена общая информацию о вашей Web-странице включающая в себя ее размер в байтах, количество слов, количество знаков и примерное время, нужное для загрузки этого; документа.
Обратите внимание на то, что размер в байтах не включает медиа-ресурсы, как например, QuickTime, или звук (поскольку они могут начать проигрываться до того, как загрузятся целиком). Кроме того, время загрузки показывает только очень приблизительное время, основанное на весьма обобщенных условиях. Внешние условия, такие как маленькая скорость сети или перегрузка сервера, могут существенно изменить реальное время загрузки страницы.
Чтобы просмотреть информацию о разрабатываемой странице, выполните команду меню Special | Document Statistics (Особые возможности | Статистика документа).



Работа с часто используемыми объектами


В случае, если в процессе разработки сайта вы часто пользуетесь какими-либо объектами, то панель Custom (Образец) палитры в Objects Palette (Палитра объектов) сможет сильно облегчить вам жизнь. Создав объект, который позднее вы хотели бы использовать вновь, перетащите его мышью на эту панель. Теперь, когда он понадобится вы сможете просто перетащить мышью эскизное изображение объекта из палитры в Objects Palette (Палитра объектов) в окно документа. При этом будут сохранены все установки, которые вы задали для данного объекта.
Если после того, как объект был перемещен из палитры на страницу, вы внесете изменения в его параметры, то эти изменения коснутся только того экземпляра, который вы редактируете. Все остальные копии этого объекта, располагающиеся на Web-страницах разрабатываемого сайта, останутся в прежнем виде.
Если вам необходимо сохранить несколько объектов, выделите их мышью (удерживая клавишу <Shift>). Затем перетащите выделенные объекты из окна документа на панель Custom (Образец) в Objects Palette (Палитра объектов). Чтобы гадать наименование для сохраненных объектов, дважды щелкните мышью на их пиктограмму на панели Custom (Образец), а затем введите имя объекта в появившемся редакторе объектов и нажмите кнопку ОК.
Для удаления объектов, выделите соответствующую пиктограмму и нажмите кнопку Delete (Удалить).



Работа с цветом


В процессе разработки Web-страницы вам очень пригодится возможность раскрашивать текст и объекты. Палитра Colors (Цвета) поможет вам в этом. Вызовите ее из меню Window (Окно) или перейдите на соответствующую вкладку палитры Inspector Инспектор), Эта палитра содержит несколько отдельных палитр, включая RGB, CMYK и цвета, оптимизированные для Web (которые адекватно отображаются в любом Web-браузере). Чтобы выбрать цвет, откройте палитру Colors (Цвета) и нажмите на треугольник в правом верхнем углу палитры. В появившемся меню выберите необходимый пункт или же просто нажмите айтвётствующую кнопку палитры.

Gray Slider (Серый бегунок), чтобы использовать один контрольный бегунок для корректировки процентного количества черного цвета при создании нужного оттенка серого. RGB Sliders (Бегунки RGB), чтобы использовать три контрольных бегунка для корректировки процентного количества частей красного, зеленого и синего цветов спектра. CMYK Sliders (Бегунки CMYK) чтобы использовать четыре контрольных бегунка для корректировки процентного количества частей голубого, пурпурного, желтого и черного цветов спектра. HSB Wheel (Колесо HSB), чтобы получить доступ к полному спектру цветов, в настоящее время поддерживаемому вашим аппаратным обеспечением. Чтобы выделить цвет, щелкните мышью по месту на цветовом кольце и потом откоррекщйЛге яркость, используя соответствующий бегунок. HSV Picker (Указатель HSV), чтобы установить уровень оттенка, насыщенности и яркости. Оттенок определяется на внешнем кольце, насыщенность — на горизонтальной оси квадрата, а яркость — на вертикальной оси квадрата. Palettes (Палитры),, чтобы отобразить различные фиксированные наборы цветов. Чтобы выбрать цвет, выберите набор цветов в выпадающем списке и нажмите на образец. Web Color List (Список цветов Web), чтобы отобразить 216 цветов, одинаково отображающихся во всех ^браузерах. Текстовое поле Value (Значение) показывает шестнадцатеричное значение красного, зеленого и синего цветов. Чтобы выбрать цвет, нажмите на его отображение в общем списке. PMColorPickerModule (Сборщик цветов), чтобы отобразить цвета, которые вы собрали на панели Color в окне сайта. Эти цвета активны только тогда, когда открыто окНо сайта. Чтобы выбрать цвет, щелкните на него в списке кнопкой мыши.

Окрасить текст можно, выделив его в окне документа и перетащив мышкой предварительно выбранный цвет с палитры Colors (Цвета), или же просто, щелкнув поле Text Color (Цвет Текста) на панели инструментов. Если вы окрашиваете другой объект, процедура будет несколько иной. Выделите объект в окне документа, затем щелкните на поле Colors (Цвета) в палитре Inspector (Инспектор) и выберите на палитре Colors (Цвета) желаемый цвет.



Работа с текстом


Работа с текстом в Adobe GoLive очень похожа на аналогичную работу в любом из наиболее популярных текстовых редакторов. Вы можете вводить текст напрямую в окне документа, копировать текст из другого приложения и вставлять его в документ Adobe GoLive, импортировать текст из другого приложения в таблицу, а также использовать традиционные инструменты форматирования, проверки правописания и поиска.
Adobe GoLive предлагает самые разные способы форматирования текста, включая использование физических и структурных стилей.
Используя физические стили, вы можете путем форматирования сделать текст полужирным, курсивным, моноширинным или использовать их сочетание.
С помощью структурных стилей вы можете классифицировать текст как цитирование, переменную, код программы или что-либо еще.
Текст с примененным к нему структурным стилем обычно форматируется с использованием каскадных таблиц стилей или Web-браузера.
Чтобы применить физический стиль, сначала выделите текст, к которому необходимо будет применить форматирование, и выполните одно из следующих действий:

выберите стиль, выполнив команду меню Туpе \ Style (Тип | Стиль). Из подменю можно выбрать один из предустановленных типов текста; для изменения начертания символов можно использовать кнопки Воld (Полужирный), Italic (Курсив) или Teletype (Моноширинный) на стандартной панели инструментов.

Adobe Golive позволяет применять к тексту, так называемый, относительный размер шрифта. Это дает возможность установить размер текста по отношению к размерам шрифта окружающего текста.
Чтобы применить относительный размер шрифта к тексту, выберите пункт меню Type | Size (Тип | Размер) или выпадающий список Font Size (Размер шрифта) на панели инструментов. Здесь содержатся несколько возможностей.

Выбор размера между 1 и 7: выберите размер»!, чтобы браузер отображал текст на два размера меньше, чем установленный в свойствах браузера; размер 2, чтобы браузер отображал текст на один размер меньше; размер 3, чтобы текст отображался в том ;же размере; размер 4, чтобы браузер отображал текст на один размер больше, и так далее. Выбор размера между +1 и +7: выберите размер +1, чтобы браузер отображал текст на один размер больше, чем окружающий текст; размер +2, чтобы выделенный текст отображался на два размера больше, чем окружающий, и так далее. Выбор размера между — 1 и —7: выберите размер — 1, чтобы браузер отображал текст на один размер меньше, чем окружающий текст; размер -2 — на два размера меньше и так далее.

При помощи команды Type | Font (Тип | Шрифт) можно выбрать шрифт из стандартного набора. Стандартные наборы шрифтов появляются в меню по умолчанию, в то время как наборы шрифтов, используемые на отдельных страницах, появляются только тогда, когда их родительские окна открыты.
Чтобы добавить или отредактировать существующий набор шрифтов, выполните команду меню Type | Font | Edit Font Sets (Тип | Шрифт | Редактировать набор шрифтов). При этом будет отображено диалоговое окно Font Sets (Наборы шрифтов). Затем выполните одно из ниже перечисленных действий:

чтобы добавить набор шрифтов, который вы можете использовать на любой странице, выберите пункт Default Font Sets (Набор шрифтов по умолчанию) из выпадающего списка в верхнем левом углу диалогового окна Font Sets (Наборы шрифтов); чтобы добавить набор шрифтов для использования только на текущей странице, выберите из выпадающего списка в верхнем левом углу страницы элемент Page Font Sets (Наборы шрифтов страницы). Затем, нажмите кнопку New (Новый), чтобы добавить новый набор шрифтов в список.

Adobe GoLive именует набор шрифтов, используя имя первого шрифта в наборе. Чтобы сменить имя набора шрифтов, вам нужно сначала добавить шрифт в список Font Sets (Наборы шрифтов), а затем изменить имя шрифта, используя палитру Inspector (Инспектор).
Для того чтобы добавить новый шрифт в набор, нажмите кнопку (Новый) под списком Font Names (Наименования шрифтов) и введите имя] нужного шрифта или выберите его иэ выпадающего списка. Повторяйте это! действие, пока не добавите все необходимые шрифты в набор.
Бели вы захотите удалить шрифт иэ набора, выделите его в списке Font Names (Наименования шрифтов) и нажмите кнопку Delete (Удалить).



"Разумные" объекты и ссылки


Так называемые "разумные" объекты предлагают несколько более эффективный путь вставки изображений в Web-страницы, чем традиционный ход работы. Разумные объекты позволяют дизайнерам сосредоточиться на раскладке и дизайне страницы, а не на механизме конвертирования файлов между форматами. Их применение позволит вам отказаться от трудного процесса редактирования исходных файлов в одном формате, слежения за тем, где именно находится исходный файл для оптимизированных изображений, перевода их В формат сохранения для Web в отдельной программе, импортирования переведенных файлов в Adobe GoLive и последующего синхронизированного сохранения двух групп файлов.
Для более легкого и эффективного-восприятия информации, касающейся работы с файлами Photoshop, Illustrator и LiveMotion, которая последует дальше, следует сказать несколько слов о некоторых из существующих форматов изображений.
Adobe GoLive позволяет вам импортировать файлы Photoshop (форматы PSD, BMP, PICT, PCX, Pixar, Amiga IFF, TIFF и TARGA), Illustrator и Live Motion без каких-либо дополнительных ухищрений. Adobe GoLive создает копию исходного файла в формате сохранения Web и содержит ссылку на исходный файл. Формат исходного файла не меняется, у,нр. настройки формата Web, которые вы указываете, сохраняются с исходным файлом. Этот исходный объект и называется разумным объектом. Если вы дважды щелкнете мышью на подобный разумный объект в своем окне документа, исходный файл откроется в Photoshop, Illustrator или LiveMotion, в зависимости от типа файла. Если вы производите изменения в исходном изображении или изменяете размер разумного объекта в Adobe GoLive, программа автоматически модифицирует сохраненную для Web копию, когда вы возвращаетесь к Web-странице, содержащей изображение с использованием того же формата, настройки которого вы указали, когда впервые создавали разумный объект.
Разумные объекты предоставляют легкий способ соединения изображений Photoshop, Illustrator и LiveMotion на ваших Web-страницах. Общая процедура для любого типа разумного объекта одна и та же: перейдите на вкладку Smart (Разумные) иа Objects Palette (Палитра объектов), затем перетащите пиктограмму необходимого объекта (Photoshop, Illustrator или LiveMotion) на вашу Web-страницу. После этого следует выделить в окне основного документа добавленную пиктограмму и нажать кнопку Browse (Просмотр)—

— в текстовом поле Source (Источник) палитры Inspector (Инспектор).
После этого в появившемся диалоговом окне следует выбрать тот файл, который и будет связан со встраиваемым объектом.

Внимание
Панель Smart (Разумные) Object Palette (Палитра объектов) отображает пиктограммы только тех "разумных" объектов, для которых на вашем компьютере установлены соответствующие "родные" программы.

Графические файлы, импортированные в Adobe GoLive в качестве разумных объектов из Adobe Photoshop, Illustrator или LiveMotkm сохраняют связь с программой, в которой они создавались и в которой, если возникнет необходимость, их в последствии можно будет отредактировать и сохранить в формате, приемлемом для Web. Чтобы открыть "разумный" объект в его родном приложении, достаточно дважды щелкнуть на нем мышью. Если вы потом возвращаетесь к Web-странице в Adobe GoLive, которая содержит сохраненную в формате Web копию, Addbe GoLive модифицирует копию, чтобы отразить произведенные вами изменения.
Вы можете вручную изменить размер разумного объекта в Adobe GoLive просто путем выделения его и перетаскивания мышью одного из его маркеров, которые позволяют изменять размер объекта. Когда вы отпускаете кнопку мыши, Adobe GoLive обновляет сохраненную в формате Web копию на странице, используя последние настройки оптимизации, применяемые без изменения настоящего исходного файла. Поскольку форматы Flash и SVG базируются на векторах, модификация разумных объектов LiveMotion (которые всегда создаются в формате Flash) или fflustrator в форматах SVG или Flash не требуется.
Adobe GoLive дает возможность ссылаться на файлы Adobe Photoshop на вашей Web-странице. Файлы формата PSD должны быть 8-битовыми изображениями в цветовом режиме RGB и могут быть разделены на слои (любая добавленная интерактивность, как например, линейки прокрутки или карты .изображений будет игнорироваться).
Adobe GoLive также поддерживает форматы BMP, PICT (только для Mac OS), PCX, Pixar, Amiga IFF, TIFF и TARGA Программа создает копию исходного файла в формате сохранения для Web и поддерживает связь с "родным" приложением графического файла. Если вы позднее производите изменения в исходном изображении или меняете размер разумного объекта Photoshop, Adobe GoUve автоматически модифицирует копию, сохраненную в Web-формате.
Чтобы добавить простой разумный объект, связанный- с графическим файлом Photoshop, перетащите мышью пиктограмму Smart Photoshop с панели Smart (Разумные) —

— Objects Palette (Палитра объектов) в ваше окно документа или дважды щелкните по пиктограмме
в палитре. Затем выделите этот объект и нажмите на кнопку Вrowser (Просмотр), связанную с полем ввода Source (Источник) в Inspector Objects (Инспектор объектов), После этого выберите нужный файл Photoshop в диалоговом окне открытия файла и нажмите кнопку Открыть.
В появившемся диалоговом окне Save for Web (Сохранить для Web) (рис. 4.1) выберите одну, из вкладок, для работы с сохраняемым файлом:

вкладка Original (Исходный вариант) предназначена для просмотра искомого изображения без оптимизации; вкладка Optimized (Оптимизированный вариант) позволяет увидеть изображение, к которому уже были применены правила оптимизации; вкладка 2-Up (Два, варианта) позволяет увидеть две версии изображения рядом друг с другом и выбрать более подходящий вариант для сохранения; вкладка 4-Up (Четыре варианта) позволяет просматривать четыре версии изображения рядом друг с другом.

Если, разумный объект ссылается на исходное изображение, которое содержит слои, Adobe GoLive должна сохранить каждый слой как отдельное изображение. Любая интерактивность, добавленная в слои в исходном файле, игнорируется. Для изображений, которые содержат анимацию, основанную на кадрах (frame-based) или разделенные на слои интерактивные объекты JavaScript, экспортируйте файл из ImageReady в подходящий для Web формат, а затем переместите экспортированный файл в Adobe GoLive.
Опции просмотра в Adobe GoLive дают вам возможность легко переключаться между оптимизированной и начальной версиями изображения и просматривать одновременно до четырех различных версий оптимизированных изображений. Также Adobe GoLive дает вам полный контроль над оптимизацией изображений Photoshop в форматах не подходящих для Web, которые, вы, импортируете, используя панель Smart (Разумные) в палитре Inspector {Инспектор). Когда вы вставляете разумный объект Photoshop и выделяете файл, Adobe GoLive отображает диалоговое окно Save Per Web (Сохранить для Web).
В режимах просмотра для двух и четырех версий изображения область примечания отображается по умолчанию под каждым оптимизируемым изображением, показывая его настройки (рис. 4.2).

Рис. 4.1. Сохранение изображения, оптимизированного для Web

Рис. 4.2. Опции просмотра в Adobe GoLive

По умолчанию, режим просмотра 2-Up (Два варианта) отображает исходное изображение и изображение с текущими настройками оптимизации, а режим просмотра 4-Up (Четыре варианта) отображает исходное изображение, оптимизированное изображение с текущими настройками и две версии изображения меньшего размера и оолее низкого качества, основанные на модификациях текущих настроек оптимизации.
Вы можете выбрать версию изображения в режимах просмотра 2-Up (Два варианта) и 4-Up (Четыре варианта), чтобы применить новые настройки оптимизации. Также возможно автоматически обновить режимы просмотра 2-Up (Два варианта) и 4-Up (Четыре варианта) т. е. сгенерировать новые оптимизированные версии изображения, базирующиеся на выбранной версии.
Чтобы перестроить оптимизированные версии изображения в режимах просмотра 2-Up (Два варианта) и 4-Up (Четыре варианта)» следует выделить необходимую версию изображения в соответствующем режиме просмотра и в диалоговом окне Save For Web (Сохранить для Web) на панели Settings (Установки) активировать выпадающее меню, и уже из него выполнить команду Repopdate Views (Перестроить режимы отображения).
Adobe GoLive генерирует меньшие по размеру оптимизированные версии изображения, основанные на настройках оптимизации выделенной версии. Выбранная версия и оригинальная версия, если таковая имеется, не подвергаются изменению в режиме перестройки вереий оптимизированного изображения. По этой причине опция Repopulate Views (Перестроить режимы отображения) работает в режиме просмотра 2-Up (Два варианта) только в том случае, если исходная версия изображения в этом режиме не отображается.
Вы можете сохранять настройки оптимизации как поименованный объект и применять их во время работы с другими изображениями. Настройки, которые вы сохраняли, появляются в выпадающем меню на вкладке Optimized (Оптимизированный вариант). Adobe GoLive также включает несколько предопределенных поименованных настроек.
Если вы изменяете настройки оптимизации таким образом, что они больше не подходят к именованному набору, меню отображает их с наименованием Unnamed (Безымянный).
Чтобы сохранить настройки оптимизации; выделив нужные настройки на вкладке Optimized (Оптимизированный вариант) диалогового окна Save For Web (Сохранить для Web), выполните команду контекстного меню Save Set-tings (Сохранить настройки) из меню группы органов управления Settings (Настройки). Затем задайте имя настройкам и выберите место, где они будут сохранены. По умолчанию, поименованные настройки сохраняются в папке Settinp\SaveForWeb\Optimize основной папки Adobe GoLive.
Чтобы применить поименованные настройки оптимизации к изображению, предварительно выделив оптимизнруемое-изображение, выберите набор настроек оптимизации в выпадающем списке на панели Settings (Настройки).
Чтобы оптимизировать изображение, например, как формат JPEG, в выпадающем списке Settings (Настройки) выберите элементы, связанные с типом JPEG (рис. 4.3).

Рис. 4.3. А — меню настроек; В — формат файла; С — меню выбора качества;
D — флажок Progressive; Е — флажок профиля 1СС;
F — бегунок оптимизации; G — флажок Optimized;
Н — бегунок Blur; I — матовый цвет

Для установки качества, сохраняемого в формате JPEG файла, следует выполнить одно из представленных ниже действий:

установить коэффициент потери качества изображения при помощи бегунка, связанногос полем Quality (Качество); ввести численное значение в процентах напрямую в поле Quality (Качество); выбрать один из заранее подготовленных элементов выпадающего списка Settings (Настройки).

Установка наивысшего качества сохраняет больше информации о цвете, но результатом этого выбора является большой размер файла. Поэтому лучше просмотрите несколько настроек,качеств» для формата JPEG, чтобы определить наилучший баланс между качеством и размером файла.

Внимание
Формат JPEG Optimized рекомендуется для максимального сжатия файла. Однако помните, что некоторые старые браузеры не поддерживают эту особенность. Выберите опцию Optimized (Оптимизирован), чтобы создать изображение, которое отображается Web-браузером по мере его загрузки. Картинка буддт показана в нескольких вариантах все более высокого качества по мере того, как будет загружаться графический файл.

Чтобы применить к изображению эффект затуманивания с целью сгладить резкие грани, введите значение в поде Bluг (Размытие) или используйте выскакивающий бегунок. Эта опция эатшяет части узора, созданные вдоль острых граней в изображение и делает размер файла меньше, но она также может уменьшить деталитрясунка. Рекомендуется настройка 0.1—0.5.
Чтобы сохранить профиль ICC изображения в файле, взведите флажок в независимом переключателе ICC Profile (Профиль ICC).
Профили ICC используются некоторыми браузерами для коррекции цветов.
Если исходный рисунок содержит прозрачные элементы, взведите флажок в независимом переключателе Matte (Матовый), чтобы эмулировать появление фоновой прозрачности. Затем сохраните файл с расширением jpg.
Чтобы оптимизировать изображение как формат GIF или PNG-8, откройте исходный файл и лотом выберите любой из этих двух форматов в выпадающем списке Settings (Настройки).
Если вы собираетесь использовать формат GIF, то при помощи бегунка, связанного с полем ввода Lossy (Потеря), также можно задать степень, потери качества и, соответственно, сжатия графического файла. Часто можно применять значение Lossy (Потеря) в пределах 5%—10%. А иногда даже до 50%, не боясь ухудшить изображение. Размер файла тогда зачастую может быть уменьшен на 5—40.

Внимание
Вы не можете использовать опцию Lossy (Потеря) совместно с опцией Interlaced (Переплетение), а также с эффектами Noice (Шум) и Pattern Dither (Колебание).

После установки параметра потери качества выберите палитру Colors (Цвета). Чтобы самостоятельно задать необходимое количество цветов, следует ввести соответствующее значение в поле Colors (Цвета). Этот параметр указывает максимальное количество цветов, содержащихся в сохраняемом изображении. В случае, когда изображение содержит меньше цветов, чем указано в поле количества, палитра будет содержать только те цвета, которые присутствуют в изображении.

Рис. 4.4. A — меню настроек; В — формат файла; С — меню Color;
D — меню алгоритма; Е — флажок прозрачности; F — флажок слоев;
G — меню Optimamize; H — бегунок Lossy; I — количество цветов;
J — бегунок Dither; К — матовый цвет; L — бегунок Web Snap

Выделите опцию Interlaced (Переплетение), чтобы создать чересстрочное изображение. При загрузке оно будет отображаться в версиях более низкого качества, пока идет полная загрузка файла. Опция Interlaced (Переплетение) может сделать время загрузки рисунка зрительно меньше и заверить пользователя в том, что процесс загрузки успешно продолжается.
Получившееся изображение следует сохранить .с расширением gif или png.
Чтобы оптимизировать изображение как формат РН<3?24, откройте исходный файл и выберите пункт PNG-24 из выпадающего- списка Settings (Настройки) в диалоговом окне Save For Web (Сохранить для Web).
Оба формата GIF и PNG-8 позволяют вам определять таблицу цветов для изображения. Эта таблица цветов появляется на вкладке Color Table (Таблица цветов) когда изображение выбрано, и вы получаете возможность вносить изменения в имеющиеся цвета. Таблица цветов для 8-битного изображения состоит из 256 цветов.
Существует несколько вариантов таблиц цветов.

Perceptual (Воспринимаемый). Создает обычную таблицу цветов, отдавая предпочтение цветам, на которые лучше всего реагирует человеческий глаз. Selective (Выборочный). Создает таблицу цветов, сходную с Perceptaal, но предпочтение отдается большей области цветов и сохранению стандартных цветов Web. Эта таблица цветов обычно производит изображения с наилучшей цветовой целостностью и используется по умолчанию. Adaptive (Приспособленный). Создает обычную таблицу цветов путем показа образцов цветов из появляющегося спектра, максимально подходящего к спектру цветов изображения. Например, изображение с только зелеными и голубыми цветами производит таблицу цветов, состоящую в основном из разных оттейков зеленого и синего. Большинство изображений концентрирует в себе цвета из отдельных частей спектра. Web. Использует стандартную ;;216-цветную таблицу цветов, сходную с 8-битной палитрой Windows (256 цветов). Эта опция гарантирует, что никакое изменение гаммы со стороны браузера не применяется к цветам, когда изображение отображается с использованием 8-битных цветов. При использовании палитры Web файлы могут увеличиваться в размерах, и поэтому ее рекомендуется использовать только в том случае, если избежание цветовых искажений в браузере не является первостепенной задачей. Custom (По желанию). Сохраняет текущую perceptual, selective или adaptive таблицы цветов как фиксированную палитру, которая не модифицируется из-за изменений в изображении. Windows. Использует стоящую по умолчанию в системе Windows 8-битную (256-цветную) таблицу цветов, которая основана на представлении стандартных образцов цветов RGB-спектра.
Возможность выбора текущей таблицы предоставляет выпадающий список С, изображенный на рис. 4.4. Все другие таблицы цветов появятся в вашем меню, только если вы их предварительно сохранили.

Внимание
Если ваш рисунок имеет меньше цветов, чем общее количество, указанное в палитре цветов, неиспользованные цвета удаляются из палитры, чтобы уменьшить размер файла.

Цвета в таблице можно сортировать по оттенку, свету или популярности (т. е. по тому, как часто он используется в вдофражевии), делая ряд цветов удобнее для просмотра.
Чтобы отсортировать таблицу цветов, выберите сначала порядок сортировки в меню вкладки Table Color (Таблица цветов):

Hue (Оттенок) — нейтральным цветам назначается нулевое значение; Luminance (Освещенность) сортирует цвета по уровню освещенности, т. е. по интенсивности или яркости цвета; Popularity (Популярность) — по популярности, т. е. по частоте появления цвета в изображении; Uasorted (Без сортировки) восстанавливает исходный порядок сортировки.

Можно добавлять новые цвета, которые были упущены при построении таблицы цветов. Если таблица цветов уже содержит их максимальное количест во (256 или 255 с прозрачностью), то добавить новый цвет нельзя.
Чтобы добавить новый цвету в диалоговом окне Save For Web (Сохранить дл Web) выберите инструмент {gj и щелкните ею по выбранному цвету в изобра жении. Цвет появится в поле образцов цветов диалогового окна Save For Web (Сохранить для Web). Можно выделять цвета прямо на изображении или н вкладке Color Table (Таблица цветов).
Вы можете изменить выделенный цвет на вкладке Color Table (Таблица цветов) на любое другое значение цвета палитры RGB. Когда вы восстанавли ваете оптимизированное изображение, деленный цвет будет изменен н новый, где бы тот ни появился на изображении.
Выделенные цвета можно удалять, чтобы уменьшить размер файла изобра жения. После того как вы удалите цвет, области оптимизированного изо бражения, прежде включавшие в себя этот цвет, будут изменены с исполь зованием ближайшего па тону имеющегося в палитре цвета, остающегося н палитре. При удалении цвета палитра автоматически принимает тип Custoir Это происходит потому, что палитры Adaptive, Perceptual и Selective автома тически бы добавили удаленный цвет обратно в палитру, когда вы бы стал] вновь оптимизировать изображение. А палитра Custom так не поступает.
Чтобы удалить выделенный цвет, выделите один или более цветов (при не обходимости) на вкладке Color Table (Таблица цветов). Удаление можно произвести двумя способами:

нажатием кнопки Trash (Корзина); выбором в меню пункта Delete Color (Удалить цвет).

Вы имеете возможность сохранять таблицы цветов оптимизированных изо брожений и потом применять их к другим файлам, а также загружать табли цы цветов, созданные ранее. Как только вы загружаете новую таблицу, цвел в оптимизированном изображении меняются на цвета из новой таблицы.
Чтобы сохранить таблицу цветов, в меню вкладки Color Table (Таблица цве тов) выберите пункт Save Color Table (Сохранить таблицу цветов). Выберит» наименование для сохраняемого файла и укажите место, где он будет сохранен. По умолчанию файлу таблицы цветов дается расширение act (Adob Color Table).
Чтобы загрузить таблицу цветов, в меню вкладки Color Table (Таблица цве тов) выполните команду Load Color Table (Загрузить таблицу цветов). Най дите файл, содержащий нужную вам таблицу, и нажмите кнопку Открыть.
Transparency (Прозрачность) делает возможным помещение не прямоуголь ных графических объектов на фон Web-страницы. Фоновая прозрачность поддерживаемая форматами GIF и PNG, сохраняет прозрачные пикселы в изображении.

Внимание
Большинство изображений, просматриваемых в Web, созданы с использованием дисплеев с цветом в 24" бита, но многие браузеры работают только с отображением в 8 бит (256 цветов), так что часто происходит так, что изображения часто содержат больше цветов, чем может обработать браузер. Браузеры используют технику, называемую dithering (смешивание), чтобы симулировать цвета, которые не могут быть отображены в стандартной цветовой системе.

Как и в случае с файлами Photoshop, при импортировании файлов Illustrator, Adobe GoLive создает копию исходного файла в формате, ориентированном на Web, и создает ссылку, которая связывает исходный файл с его копией. Если позднее вы делаете изменения в исходном изображении или изменяете размер объекта, Adobe GoLive автоматически модифицирует изображение-копию, когда вы возвращаетесь к странице, содержащей изображение.

Внимание
Автоматическая модификация не проявляется, если файл, размеры которого изменены, был в формате Flash или SVG, поскольку эти форматы являются векторными.

Adobe GoLive позволяет вам использовать для оформления Web-страницы файлы LiveMotion. Программа создает копию исходного файла в формате Flask и сохраняет связь между двумя файлами в форме разумного объекта LiveMotion. Если вы позднее делаете изменения в исходном изображении разумного объекта LiveMotion, программа автоматически модифицирует копию в формате Flash, когда вы возвращаетесь к странице, содержащей изображение. Поскольку формат Flash является векторным, не требуется никакой модификации, когда вы изменяете размер разумного объекта LiveMotion.
Хотя применение "разумных объектов" делает процесс работы более эффективным, может быть так, что вы уже имеете изображения в формате, подходящем для Web, которые хотели бы использовать на разрабатываемой Web-странице. Когда вы вставляете такое изображение на страницу, Adobe GoLive создает простую ссылку от HTML-страницы к изображению. Adobe GoLive поддерживает форматы GIF, GIF89a (для прозрачных изображений), JPEG, Progressive JPEG и PNG.
Чтобы вставить изображение, перетащите пиктограмму Image (Рисунок) с панели Basic (Основная) —

Object Palette (Палитра объектов) в окно документа или просто дважды щелкните мышью по пиктограмме (рис. 4.5). Затем выберите нужный графический файл и нажмите кнопку Открыть. Если вы используете изображение, формат которого не поддерживается стандартными браузерами, то изображение будет отображаться в виде пиктограммы.
Вы можете изменить размеры изображения, добавленного на Web-страницу.

Рис. 4.5. А — Используйте эти органы управления для изменения размера рисунка; В — Выберите элемент списка, чтобы выровнять изображение

Чтобы настроить размер изображения в Adobe GoLive, достаточно выделить изображение, выбрать нужную единицу измерения в палитре Inspector (Инспектор) и ввести новые значения в поля Height (Высота) и Width (Ширина).
В первой главе мы уже рассматривали возможность использовать рисунки в качестве "сегментированной графики". Естественно, Adobe GoLive позволяет создавать такие карты изображений.
Чтобы создать подобную карту изображения, выделите рисунок на странице, и в палитре Inspector (Инспектор) на вкладке Моте (Дополнительно) взведите флажок в независимом переключателе Use Map (Использовать в качестве карты).

Внимание
По умолчанию Adobe GoLive назначает уникальный идентификатор карте изображения и вводит его в текстовое поле Name (Имя). Можно заменить этот идентификатор, введя имя карты изображения в текстовом поле Name (Имя) самостоятельно. Чтобы указать используемый сегмент, щелкните мышью на один из инструментов области (выделение инструмента, прямоугольника или круга) на панели инструментов и потом потяните мышью на изображении, чтобы ограничить область ссылки.

Затем следует ввести: для ссылки использовать кнопку Browse (Просмотр), чтобы задать имя и адрес документа, на который будет указывать ссылка. Используйте текстовое поле Target (Цель) для указания фрейма, в который будет загружен документ, на который указывает ссылка.



Создание новой Web-страницы


При запуске Adobe Gotive, программу по умолчанию, предлагает создать новую Web-страницу. Также, можно создавать новую страницу, используя команду меню File | New (Файл | Новая). После создания новой страницы измените ее наименование. Наименование отображается в строке названия документа в Web-браузере во время просмотра страницы.
Перед тем, как создавать страницу, стоит подумать о содержании страницы. Если вы планируете добавлять на страницу изображения или аудио- и видеоклипы, то следует начать с добавления нужных файлов в окно сайта. Окно сайта облегчает слежение за используемыми ресурсами.

Внимание
Если вы хотите, чтобы то же самое название страницы появилось на всех ваших Страницах, вы можете создать страницу с нужным названием и потом установить общие свойства (вкладка General (Общее)), чтобы Adobe GoLive создавал новые HTML-документы, используя исходную страницу в качестве шаблона.

Чтобы установить подобные общие свойства для запуска Adobe GoLive и открытия новых окон, документа, выполните команду меню Edit | Preferences (Правка | Свойства) и выделите пиктограмму General (Общее) на левой панели диалогового окна Preferences (Свойства).

На правой панели диалогового окна Preferences (Свойства) в группе органов управления Documents (Документы) выберите один из пунктов выпадающего списка At Launch (При запуске), чтобы задать действие, которое будет выполняться Adobe GoLive при его запуске.

Create New Document (Создать новый документ), чтобы Adobe GoLive при запуске создавал и открывал окно нового HTML-документа. Show Open Dialog (Показывать диалог открытия файла), чтобы программа при запуске отображала диалоговое окно загрузки файла. Do Nothing (Ничего не делать), чтобы запускать программу без создания нового документа или отображения диалогового окна для загрузки существующего файла.

Также разработчик имеет возможность выбрать режим, в котором будет открываться окно редактируемого документа Adobe GoLive. Для этого следует выбрать элемент выпадающего списка Default Section (Вкладка, используемая по умолчанию).
Чтобы выделить файл, который должен быть использован в качестве шаблона для новых документов, взведите флажок в независимом переключателе New Document (Новый документ), а затем, при помощи кнопки Select (Выбор) выберите требуемый файл.
Флажок в независимом переключателе Write "Generator Adobe Go Live" (Добавить метку Adobe GoLive) служит, чтобы добавить тег метаданных <meta name«="generator" content-"Adobe GoLive 6"> В каждый файл, КО-торый вы создаете или сохраняете. Этот тег, по сути, выполняет рекламную функцию, указывая, в каком именно HTML-редакторе была разработана Web-страница.
Вы можете выбирать цвета для текста, который отображается на вашей странице, включая основной текст и текст ссылок. Также можно выбирать фоновый цвет для всей страницы. Выбранные вами цвета 'заменяют собой цвета, установленные по умолчанию в браузере пользователя. Вместо фонового цвета, как мы уже знаем, можно использовать и фоновое изображение. Но о том, как его устанавливать, мы поговорим несколько позже.
Для того чтобы установить цвет текста или фоновый цвет, щелкните мышью на пиктограмме Page (Страница), располагающейся в верхнем левом углу окна документа (рис. 4.6). В палитре Inspector (Инспектор) следует перейти на одноименную вкладку Page (Страница) и при помощи различных органов управления задать цвета для тех или иных текстовых объектов разрабатываемой Web-страницы. Мы можем использовать следующие поля:

Text (Обычный текст), чтобы выбрать цвет для основного текста; Link (Гиперссылка), чтобы выбрать цвет для текста стандартной гиперссылки; Active Link (Активная гиперссылка), для выбора цвета, которым будет отображена ссылка в тот момент, когда пользователь наведет на нее курсор мыши; Visited Link (Пройденная ссылка), чтобы выбрать цвет для отображения уже Посещенной пользователем ссылки; Background Color (Цвет фона), чтобы задать фоновый цвет страницы.

Чтобы выбрать цвет, щелкните по цветовому полю. После этого будет активирована вкладка Color (Цвет), на которой и можно выбрать необходимый цвет. Для того, чтобы выбранный цвет был применен к искомому элементу оформления Web-страницы, следует взвести флажок в независимом переключателе, связанном с цветовым полем.

Рис. 4.6. Инспектор свойств Web-страницы с активизированным окном выбора цвета

В первой главе, при рассмотрении основ языка HTML мы уже упоминали о том, что изображения можно использовать в качестве фона для Web-страниц. Естественно, зная, как это делается на уровне HTML, всегда можно вставить необходимый тег непосредственно в HTML-код разрабатываемой страницы, но все-таки Adobe GoLive предоставляет возможность сделать это более просто.
Для того чтобы добавить к Web-странице фоновое изображение, в основном окне документа щелкните мышью по вкладке Page (Страница), а затем активизируйте одноименную вкладку в палитре Inspector (Инспектор). После этого останется лишь взвести флажок в независимом переключателе, связанном с полем Image (Изображение) и выбрать файл с изображением, используя кнопку Fetch URL (Пойти за URL) или кнопку Browse (Просмотр).



Создание выпадающих списков URL


Выпадающие списки URL позволят посетителям вашей страницы выбирать ссылки из меню. Для добавления такого списка на вашу страницу воспользуйтесь пиктограммой URL Pop-up (Выпадающий список URL) с вкладки Smart палитры Objects Palette (Палитра объектов). Перетащите ее в окно документа. В Inspector Objects (Инспектор объектов) нажмите кнопку New (Новый), чтобы создать новый элемент списка. Введите текст элемента в поле Label (Метка) и укажите URL для создаваемого элемента списка при помощи кнопки Fetch URL (Пойти за URL) или кнопки Browse (Просмотр). Следует обратить внимание на то, что Adobe GoUve по умолчанию создает один элемент списка, указывающий на корпоративный сайт Adobe. Вам вряд ли понадобится этот элемент, поэтому его можно удалить.
Для удаления элемента меню, выделите его и нажмите кнопку Delete (Удалить).
Для того чтобы удостовериться, что ссылки в созданном выпадающем списке URL работают правильно, просмотрите вашу страницу, используя браузер.



Выравнивание и распределение объектов


Adobe GoLive оИяегчает вам четкое упорядочивание объектов на вашей странице. Для выравнивания объектов можно использовать панель инструментов или палитру Align (Выравнивание). Кроме того, вы можете использовать палитру Align (Выравнивание) и для распределения объектов по отношению друг к другу.

Внимание
Прежде чем выравнивать или распределять объекты, убедитесь что они расположены на макетной сетке.

Чтобы выровнять объект или группу объектов, выделите о помощью мыши нужный объект или их группу, и выполните одно из приведенных ниже действий.

На панели инструментов нажмите кнопку выравнивания по горизонтали: Align Left (Выравнивание по левому краю), Align Center (Выравнивание по центру), или Align Right (Выравнивание по правому краю). Если необходимо выровнять объекты по вертикали/ то используйте кнопки Align Bottom (Выравнивание по нижнему краю), Align Center (Выравнивание по центру) или Align Top (Выравнивание по верхнему краю). На палитре Align (Выравнивание) в группе Align To Parent (Выравнивать по старшему объекту), можно использовать кнопки вертикального и горизонтального выравнивания. Кнопки выравнивания в палитре такие же, как и на панели инструментов.

Внимание
Поскольку Adobe GoLive не перемещает выделенный объект, если на яуш находится другой объект, то в зависимости от, выбранных объектов некоторые кнопки выравнивания могут быть недоступны.

Чтобы выровнять объект по отношению к другим объектам, выделите, их с помощью мыши. Для этого, выделив первый из объектов, выделяйте остальные, удерживая нажатой клавишу <Shflt>. Затем в палитре Align (Выравнивание) в группе Align Objects (Выравнивание объектов) нажмите кнопку горизонтального или вертикального выравнивания.
Помимо выравнивания объектов, BUM может пригодится возможность распределять объекты по отношению друг к другу. Выделите три или более объектов, которые вы хотите распределить относительно друг друга. В палитре Align (Выравнивание) находится группа кнопок Distribute Objects (Распределить объекты). Она позволяет перемещать выделенные объекты относительно друг друга.
Так же можно распределять объекты относительно самой Web-страницы, установив равные промежутки между ними по горизонтали и вертикали. Для этого используются кнопки группы Distribute Spacing (Установить интервалы).

Кнопка Distribute Spacing Horizontally (Установить горизонтальные интервалы) перемещает объекты таким образом, чтобы расстояния между ними по горизонтали были одинаковыми. Кнопка Distribute Spacing Vertically (Установить вертикальные интервалы) перемещает объекты таким образом, чтобы расстояния между ними по вертикали были одинаковыми.