7.2.1. Использованию графики в оформлении Web-страниц

FrontPage позволяет использовать три вида графики: стандартные графические файлы, картинки из коллекции Clip Art и видеофрагменты. Вставка графического файла осуществляется при помощи команды меню Вставка - Рисунок - Из файла или соответствующей кнопки на основной панели инструментов. При этом активизируется диалоговое окно Рисунок. Оно предназначено для указания источника изображения. По умолчанию считается, что файл с графическим изображением находится в структуре каталогов создаваемого сайта, которая показана в основном списке диалогового окна Рисунок. Однако, как всегда, местонахождение файла будет записано в поле ввода URL. Справа от этого поля находятся две кнопки, которые позволяют отыскивать требуемое изображение в просторах Интернета и на диске локальной машины. Кнопка Clip Art запускает диалог, показывающий коллекцию рисунков-клипов, поставляемых в составе Microsoft Office (рис. 27).

Рис. 27. Вкладка Рисунки диалогового окна Галерея картинок

А кнопка Scan предназначена для получения графического изображения с цифровой камеры, сканера и тому подобных устройств. Если щелкнуть мышью на рисунке, тем самым выделяя его, FrontPage открывает еще одну инструментальную панель, которая предназначена для работы с изображениями. Помимо кнопок на панели инструментов Рисование, каждая из которых совершает определенное действие, есть еще и простые свойства рисунка, которые можно редактировать в диалоговом окне Picture Properties, активизируемом при помощи одноименной команды контекстного меню, вызываемого щелчком правой клавиши мыши на самом изображении (рис. 28).

Рис. 28. Вкладка Общие диалога Picture Properties

В строке Источник рисунка указывается местонахождение графического файла, и тут же рядом — кнопки для просмотра файловой системы Обзор и Изменить для запуска графического редактора, встроенного в FrontPage. Под этой группой находится группа из трех зависимых переключателей, которые показывают тип графического файла. В WWW поддерживается три графических формата GIF, JPEG и PNG. За этим блоком расположена группа полей ввода под общим названием Альтернативные представления. То есть здесь задаются способы альтернативного представления рисунка, когда по каким-либо причинам он не может быть правильно отображен в браузере удаленного пользователя. В поле Низкое разрешение помещается адрес иконки, подменяющей основное изображение. Второе поле с названием Текст позволяет ввести текстовую строку, которая будет отображаться вместо рисунка в тех случаях, когда отображение искомого графического файла невозможно. Этот текст используется, когда в браузере удаленного пользователя выставлен запрет на отображение графики.

В самом низу диалогового окна расположена группа органов управления, которая ставит в соответствие вашему рисунку гиперссылку. Эта группа носит название Гиперссылка по умолчанию.

В поле Расположение вводится URL места назначения, а в поле Фрейм — значение, указывающее, в каком окне отображать полученный документ. Рядом с полем для ввода URL находится кнопка Обзор, которая активизирует уже знакомое диалоговое окно создания гиперссылки. Впрочем, того же эффекта можно добиться, просто выполнив команду контекстного меню рисунка Гиперссылка.

У диалогового окна Свойства рисунка есть еще одна вкладка Внешний вид, которая задает некоторые свойства изображений (рис. 29). На этой вкладке вы можете указать относительное расположение графического изображения и текста, находящихся рядом, то есть выравнивание их относительно друг друга. Способ выравнивания указывается в выпадающем списке с именем Выравнивание. Если вы выберете значение Верх, то текст без промежуточного объявления нового абзаца будет выровнен по верхней границе изображения. Значение Низ выравнивает текст по нижней границе изображения. Если вы выберете значение Середина, то первая строка текста будет размещена по центру изображения. Текст может размещаться как слева от изображения, так и справа от него. Задается это значениями Слева и Справа, соответственно. Есть и более точные методы выравнивания текста. Так, параметр Верх текста осуществляет выравнивание текста относительно самых высоких символов в строке. Если указано выравнивание Абсолютный центр, то выравнивается середина первой строки текста относительно середины рисунка. А значение Базовая линия позволяет выравнивать текст по нижнему краю рисунка относительно базовой линии первой строки. Базовой линией называется воображаемая линия, на которой расположены символы текста. Значение Абсолютный низ предназначено для выравнивания текста по нижнему краю рисунка относительно нижней границы первой строки текста. Необходимо осознавать, что базовая линия не всегда совпадает с нижней границей строки. Нижняя граница располагается на уровне, где кончаются так называемые «хвостики» отдельных символов, которые спускаются ниже базовой линии.

Рис. 29. Вкладка Внешний вид диалога Picture Properties

В поле ввода Толщина рамки указывается желаемая толщина рамки, ограничивающей рисунок, а в полях Горизонтальный интервал и Вертикальный интервал — расстояние в пикселах по горизонтали и вертикали, отделяющее графическое изображение от текста. Для принудительного указания размеров изображения используется группа элементов управления Размер. По умолчанию в полях Ширина и Высота указываются истинные размеры рисунка. Но, поставив галочку в независимом переключателе Определить размер, вы получаете возможность прямого редактирования содержимого этих полей. Причем, размеры окна могут указываться как в пикселах, так и в процентах от размера окна просмотра браузера.

Перейдем к рассмотрению средств для работы с графическими изображениями, предлагаемыми FrontPage. Как уже говорилось, каждое действие привязано к отдельной кнопке из общего комплекта, находящегося на инструментальной панели Рисование (рис. 30).

Рис. 30. Панель инструментов Рисование

Самая первая кнопка доступна всегда, независимо от наличия выделенного рисунка. Кнопка Вставить рисунок из файла предназначается для вставки рисунка. Следующая кнопка Текст при нажатии вставляет в центр рисунка прямоугольный блок для вставки текста. Блок поддается перемещению и изменению размеров. Шрифт вставляемого текста выбирается при помощи панели форматирования. По умолчанию используется шрифт Times New Roman третьего размера с выключкой по центру. Текстовый блок является обычным объектом, поэтому он может правильно отображать любые изменения текста. Кнопка Автоматическое создание «ноготков» позволяет создавать так называемые «ноготки» рисунков. «Ноготками» называют уменьшенные копии графических изображений, этакие ярлычки. Обычно применяются в том случае, если основное изображение достаточно велико и скорость его загрузки в браузере удаленного пользователя оставляет желать лучшего. Обычно на каждый «ноготок» вешается ссылка, которая при щелчке по ней отображает основное изображение.

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

Следующие две кнопки Переместить наверх и Переместить вниз позволяют установить положение рисунка поверх или позади текста соответственно. Далее расположены четыре кнопки, которые позволяют вращать рисунок вправо и влево и отражают его относительно вертикальной и горизонтальной осей. Кнопки Повернуть влево и Повернуть вправо вращают рисунок влево и вправо на 90°. Кнопки Отразить по горизонтали и Отразить по вертикали отражают рисунок относительно его центральных осей, вертикальной и горизонтальной. Еще одна группа кнопок предназначена для регулировки яркостных и контрастных параметров рисунка. Кнопки Увеличить контрастность и Уменьшить контрастность повышают и понижают степень контрастности рисунка. Следующие две кнопки Увеличить яркость и Уменьшить яркость делают то же самое с яркостью. Все эти изменения происходят именно с рисунком и сохраняются во временном файле. При сохранении страницы все подобные изменения записываются в основной графический файл.

Очередной блок кнопок тоже применяется для обработки всего рисунка. Так, кнопка Обрезка предназначена для изменения размеров рисунка. Точнее, для уменьшения его путем обрезания границ. При нажатой кнопке Обрезка курсор мыши меняет свою форму и вы можете обрезать картинку так, как вы этого хотите. Повторное нажатие данной кнопки возвращает вас в обычный режим. Кнопка Установить прозрачный цвет применяется для того, чтобы один из цветов рисунка сделать прозрачным. Данную кнопку лучше всего использовать на рисунках, хранимых в GIF-формате. После нажатия на кнопку курсор принимает форму специализированного указателя. Если вы в это время щелкнете мышью на рисунке, то FrontPage определит цвет того пиксела, на который указывал курсор, и все пикселы рисунка этого цвета будут перекрашены в так называемый «прозрачный» цвет. Кнопка с именем Черно-белый переводит рисунок в черно-белый формат, т. е. отображает его при помощи градаций серого цвета. Кнопка Подложка как бы «выстирывает» рисунок, заставляя все его цвета поблекнуть и стать приглушенными. Подобные рисунки очень хорошо работают в качестве подложек на страницах. Кстати, в рабочих панелях русскоязычного Microsoft Office подобная кнопка так и называется — «подложка». Кнопка Рамка добавляет к вашему рисунку маленькую угловую рамку, как бы приподнимая его над общим уровнем страницы. А вот последняя кнопка Пересчитать чрезвычайно полезна. Дело в том, что при изменении общих размеров рисунка при помощи перетаскивания мышью ограничивающих маркеров пропорции рисунка могут быть несколько искажены. Так вот, эта кнопка позволяет очень хорошо восстановить нарушенные пропорции рисунка в измененных границах.

Следующий блок кнопок предназначен для реализации технологии сегментированной графики. Первая кнопка Выбор чаще всего находится в нажатом состоянии. Она переводит FrontPage в обычный режим выбора элементов. Как правило, эту кнопку приходится нажимать для того, чтобы отменить ошибочное нажатие других кнопок этой группы. Следующие три кнопки предназначены для создания на рисунке так называемых «горячих областей», то есть участков рисунка, к которым будут привязаны гиперссылки. Кнопка Прямоугольный сегмент создает горячую область прямоугольной формы. При нажатии на нее курсор мыши, находясь на территории рисунка, приобретает форму карандаша. Нажатие левой кнопки мыши фиксирует один угол прямоугольника. Затем, не отпуская нажатой кнопки, необходимо перемещать мышь, одновременно растягивая «горячую область» до необходимых размеров. Для фиксации размера достаточно отпустить кнопку. После определения размера «горячей области» активизируется диалоговое окно для создания гиперссылки. После этого «горячая область» становится стандартным объектом со своими свойствами. Так же, как и все остальные объекты, «горячие области» могут перемещаться проектировщиком, их границы могут быть изменены, сами они могут быть удалены. Точно таким же образом действуют и две следующие кнопки — Круглый сегмент и Полигональный сегмент. Они создают «горячие области» в форме круга и многоугольника. А последняя кнопка в этой группе Подсветка сегментов предназначена для того, чтобы проектировщик Web-страницы мог увидеть все «горячие области», размещенные им на рисунке. При нажатии на кнопку само изображение рисунка исчезает, остаются лишь его контуры и границы всех «горячих областей». Таким образом, вы получаете очень удобный режим работы, в котором можно посмотреть, как размещены «горячие области», не перекрываются ли они и т. д.

В самом конце инструментальной панели Рисунки расположена кнопка Восстановить. Она позволяет сразу отменить все изменения рисунка, которые произошли с момента последнего сохранения. Конечно, для этой же цели можно воспользоваться стандартными средствами отмены действий, но это не всегда удобно. Например, когда объем изменений был слишком велик или после работы с изображением вы успели сделать что-то еще, не относящееся к самой картинке. Именно в таких случаях и стоит обращаться к этой кнопке.