1.5 Вставка графики.

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

В качестве графики могут выступать только файлы в формате Gif (Graphic Interchange Format) и Jpeg (назван в честь своего разработчика – Join Photographic Experts Group), и, для самых новых моделей броузеров – Png (Portable Network Graphics), который создан с целью замены формата Gif, но к сожалению он не получил широкого распространения, потому что броузеры пока не могут использовать некоторые полезные свойства (например, возможность создавать полупрозрачные цвета). Файлы остальных типов через броузер не могут быть просмотрены.

Для создания графических объектов можно использовать любой редактор графики - от MS Paint до Adobe Photoshop . Если редактор не поддерживает форматы Gif и Jpeg, то можно воспользоваться конвертирующими программами или функциями конвертации других программ - вроде Microsoft Photo Editor или Microsoft Word 97 (конвертер HTML), открыв в нем файл, сделанный в редакторе, и сохранив в формате Gif или Jpeg.

Формат GIF (расширение .gif)

• Может содержать изображение до 256 цветов. Но число цветов можно уменьшить для уменьшения размера файла.
• Хорошо сжимает контрастные и несильно заполненные изображения с малым числом цветов. Например, чертежи, рисунки.
• Может содержать мультипликацию, т.е. несколько картинок, которые выдаются через указанные промежутки времени. Для редактирования таких, многокадровых GIF-ов можно использовать программы Microsoft Gif Animator и Gif Construction Set .
• Может содержать "прозрачные" цвета, т.е. сквозь рисунок может просвечивать задний план.

Формат JPEG (расширение .jpg или .jpeg)

• Хорошо сжимает изображение с плавными цветовыми переходами. Например: портреты, пейзажи, фотографии.
• Можно установить сжатие с заданной потерей качества. Таким образом, можно выбирать соотношение: размер файла/качество.

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

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

При работе с графикой во FrontPage сначала нужно определить, где и в каком месте должен быть рисунок, а потом создать таблицу. Сам процесс вставки графики очень прост. Курсором мыши нужно указать ту ячейку, куда нужно вставить рисунок. В меню "Вставка" выбрать команду "Изображение" и в открывшемся окне указать путь к нужному файлу или можно просто нажать кнопку "Обзор" и добраться до нужного файла вручную. Можно сделать это чуть быстрее, если просто нажать кнопку "Вставить изображение" на панели инструментов "Стандартная".

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

Рис 3. Пример вставки графики.

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

Картинкам и любому другому графическому изображению можно организовать "всплывающие" названия или подписи, которые будут появляться при подведении к ним курсора.

Рис. 4. Окно "Свойства изображения"

Для этого требуется щелкнуть по нужной картинке правой кнопкой мыши, выбрать команду "Свойства изображения" (рис. 4) и в окно "Текст" вписать нужный текст. Всплывающие подписи не будут появляться в редакторе - они будут "всплывать" только в броузере.

Также во FrontPage имеются свои графические объекты: горизонтальная линия и бегущая строка (рис. 5).

Рис. 5. Пример использования горизонтальной линии и бегущей строки.

Чтобы вставить объект "Горизонтальная линия" нужно в меню "Вставка" выбрать команду "Горизонтальная линия". Свойства горизонтальной линии можно изменить, если щелкнуть по ней правой кнопкой мыши и в появившемся меню выбрать строку "Свойства горизонтальной линии", после чего появится диалоговое окно "Свойства горизонтальной линии" (рис. 6).

Рис. 6. Окно диалога “Свойства горизонтальной линии”.

В этом диалоге можно изменять основные свойства горизонтальной линии:

1. Ширину и высоту, изменяя значения этих параметров можно получить из горизонтальной линии: вертикальную линию, прямоугольник или квадрат.
2. Выравнивание: по левому краю, по правому и по центру.
3. Цвет линии.
4. Убрать эффект объема, если отметить флажок "Сплошна линия (без затенения)".

К сожалению во FrontPage нет очень полезных функций работы с графикой, таких как: разрезание изображения на отдельные сегменты и работа с image map. Но эти функции можно реализовать с помощью 2 полезных бесплатных программ: Picture Dicer и Mapedit.

Довольно часто в сайтах, насыщенных графикой, можно встретить такой прием, как нарезание большой картинки на несколько сегментов, и размещение их в ячейках таблицы. Если размеры каждой ячейки будут соответствовать размерам каждого ломтика, и границы в таблице будут нулевой толщины, то все ломтики сольются в единый образ без заметных швов и можно будет использовать каждый сегмент как гиперссылку. Программа Picture Dicer (рис. 8) позволяет разрезать графический файл на сегменты и сгенерировать HTML-страницу c уже размещенными в таблице сегментами.

Рис. 8. Рабочее окно программы Picture Dicer.

Войдя в программу нужно:

1. Открыть графический файл, который требуется разделить на сегменты, используя команду "Open Image" меню "File".
2. Выбрать нужный графический формат выходного файла в меню Output Format.
3. Расставить горизонтальные (правая кнопка мыши) и вертикальные (левая кнопка мыши) разделители.
4. В меню "File" выбрать команду "Process image".

Функция, реализуемая программой Mapedit (рис. 9) позволяет создавать карту изображения (image map) – рисунок, имеющий несколько областей срабатывания, каждая из которых является гиперссылкой. Области срабатывания могут иметь практически любую форму: от круга до многоугольника, - при щелчке мышью внутри этой области посетитель перейдет на соответствующую страницу.

Рис. 9. Рабочее окно программы Mapedit.

Порядок работы с Mapedit следующий:

1. Войти в меню "File" выбрать команду "Open HTML Document…".
2. В появившемся диалоговом окне выбрать нужный HTML-документ.
3. В диалоговом окне "Select Inline Image" появиться список рисунков, которые содержит данный HTML-документ.
4. В этом списке нужно выбрать рисунок, для которого будет создаваться карта.
5. Используя панель инструментов создать области срабатывания. Область срабатывания создается с помощью трех кнопок:

  "Add Rectangles" – вставка области срабатывания в форме прямоугольника.

  "Add Circles" - вставка области срабатывания в форме круга

  "Add Polygons" - вставка области срабатывания в форме многоугольника

Рисование прямоугольника и круга намонинает рисование в Word с помощью панели "Рисование". Создание многоугольника похоже на рисование в графическом редакторе Paint, только фиксация последней линии производится правой кнопкой мыши. После создания области срабатывания (например, круга) появляется диалоговое окно "Object URL", в котором нужно ввести URL, страницы на которую должен перейти посетитель при щелчке по области срабатывания. Также можно ввести текст всплывающей подписи, если заполнить поле "Alternate (ALT) Text".

Редактирование областей срабатывания производится с помощью двух кнопок:

  "Test and Edit Hotspots" – позволяет вызвать окно "Object URL", созданной области срабатывания.

  "Move Hotspots" – позволяет перемещать готовые области срабатывания и изменять их форму.

6. После создания областей срабатывания следует сохранить документ.