1  2  3  4  5  6  7

ГЛАВА 4
Рисунки , звуки , фильмы
В главе 3 мы научились работать с текстом. В этой главе мы разберемся со всем, что относится к внедренным объектам: графическими изображениями и мультимедийными данными (прежде всего, аудио и видеоклипами). Мы научимся помещать их на Web -страницы и использовать для специальных целей, например, для создания изображений-гиперссылок и изображений-карт. И Dreamweaver нам в этом поможет.
Следующая по очереди Web -страница нашего сайта — сведения об авторе. А какая страница об авторе обойдется без его портрета. Но прежде чем помещать на Web -страницу портрет (да и любое изображение), неплохо было бы создать эту самую страницу. Этим мы сейчас и займемся.
Сначала создадим в Dreamweaver новую пустую Web -страницу. Вы уже знаете, как это делается. Не будем ничего особо выдумывать: достаточно сочинить немного текста. Единственное: цвета и шрифты на новой странице должны быть такими же, как и на ранее созданной. Это необходимо, чтобы соблюсти единообразное оформление, чтобы пользователь знал, что пока еще находится на одном сайте.
Опустим рассказ о ее соз­дании, т. к. в этой главе речь пойдет совсем о другом.
Как видите, мы не слишком утруждали себя придумыванием деталей биографии нашего героя. Хватило нескольких строк текста, чтобы получилась Web -страница. Сохраним ее в файле
4.1.htm .
Теперь откроем первую нашу страницу (файл 3.1.htm ). Сейчас мы создадим первую "внутрисайтовую" гиперссылку, т. е. гиперссылку, ведущую на другую страницу нашего сайта. Для этого сначала выделим строку "подробнее обо мне, любимом" (последняя строка списка). И обратим внимание на редактор свойств.
Вы уже заметили справа от поля ввода адреса находятся две кнопки. Одна из них имеет вид мишени и расположена левее; она нам сейчас бесполезна. Вторая гораздо интереснее: она имеет вид папки и при нажатии открывает диалоговое окно Select File . В верхней части этого окна находится список файлов текущей папки и раскрывающийся список выбора папок, совсем как в стандартном диалоговом окне открытия файлов Windows . Вы должны будете выбрать нужный файл Web -страницы, чтобы создать на нее гиперссылку. Так мы и сделаем. И не забудьте нажать кнопку ОК. Вот и все — гиперссылка создана.
И обязательно сохраните нашу главную страницу. Частое сохранение документов (любых) — важнейшая и надежнейшая гарантия от потери данных. После этого главную страницу можно закрыть и сосредоточиться на сведе­ниях об авторе.
Работа с графическими изображениями
Графические изображения (а также аудио и видеоклипы), как вы помните, являются внедренными элементами, т. к. они не помещаются в сам HTML -код Web -страницы, а хранятся в отдельных файлах. Дело в том, что графика принципиально отличается от текста, кодируется и хранится иначе, чем текст. Поэтому совместить в одном файле HTML -текст и графику невозможно.
Примечание Здесь нужно сделать оговорку . Существует язык VRML ( Virtual Reality Markup Language — язык разметки виртуальной реальности ), с помощью которого соз­даются целые виртуальные миры , которые можно исследовать . Эти миры запи сываются в виде текстовых тегов , аналогичных тегам HTML , встраиваемым прямо в HTML - код . Также фирмой Microsoft разработан язык VML ( Vector Markup Language — язык разметки векторов ), служащий для создания графических изображений , тоже в виде текстовых тегов . Но этот язык распространен очень слабо и поддерживается пока только Internet Explorer ,начиная с версии 5.0.
Два вида графических изображений
Все графические изображения делятся на две большие группы по принципу кодирования, хранения в файлах и отрисовки на устройствах вывода (экран, принтер и т. п.). Давайте их рассмотрим.
Растровые изображения представляют собой набор точек; каждая такая точка может иметь какой либо цвет, от белого до черного. Цвета всех точек, составляющих подобное изображение, записываются в массив, который, в свою очередь, вместе с некоторой служебной информацией сохраняется в файле. Такой массив называется растром.
К растровым относятся хорошо вам известные изображения форматов GIf ( Graphic Interchange Format — формат обмена графикой) и JPEG ( Joint Pic ­ tures Encoding Group — группа кодирования неподвижных изображений), которые вы загружаете из Интернета, чтобы полюбоваться творениями Бо­риса Вальехо. К растровым относится также стандартный формат хранения изображений в Windows — BMP ( BitMaP — битовая матрица). Еще стоит упомянуть весьма напористого новичка — формат PNG ( Portable Network Graphics — перемещаемая сетевая графика). Этот пока еще малораспрост­раненный формат может стать преемником формата GIF , если недавние попытки сделать последний платным всетаки увенчаются успехом.
На самом деле, растровых форматов огромное множество, но подавляющее большинство из них — либо "фирменные", поддерживаемые одной программой, либо малораспространенные в силу какихто причин, либо просто не используемые в Интернете.
Достоинствами растровых изображений являются исключительно простая обработка и вывод на устройство отображения. Действительно, что может быть проще, чем считать массив значений цветов точек и эти самые точки показать пользователю. Недостатки: большой размер (особенно, качественных изображений с большим количеством цветов) и резкая потеря качества при масштабировании.
Хотя большой размер — не такой уж и непреодолимый недостаток. Форматы GIF , JPEG и PNG стандартно поддерживают сжатие массива данных с помощью специальных алгоритмов. Однако тут кроется другая опасность. Дело в том, что эти алгоритмы реализуют так называемое сжатие с потерями, при которых часть информации, не очень существенная для отображе ния, отбрасывается, в результате чего объем массива сильно уменьшается. ("Обычные" программы архиваторов, которыми вы пользуетесь, например Zip или Rar , реализуют сжатие без потерь.) При этом, если задать слишком сильное сжатие такого изображения, может пострадать его качество из-за того, что слишком большая часть информации будет отброшена. Впрочем, это уже проблема Web -художника, который будет готовить подобное изображение к публикации в Интернете.
Какие форматы растровых изображений используются в Web -дизайне? В основном, GIF и JPEG . Угадайте, почему? Конечно, потому, что они поддерживают сжатие. Причем, изображения GIF применяют для элементов оформления страниц (линии, маркеры списков и т. п.) и штриховых рисунков, a JPEG — для полутоновых рисунков с большим количеством цветов. Это вызвано тем, что для сжатия изображений этих форматов применяются разные алгоритмы, имеющие свои сильные стороны и свои недостатки.
Формат GIF имеет особое свойство, за что его любят Web -художники. Дело в том, что из-за особенностей этого формата в один GIF -файл можно записать последовательность графических изображений, фактически настоящий фильм. Многочисленные "живые" (даже слишком) рекламные картинки — баннеры — которые в последнее время просто залепили Web -страницы, сделаны в формате "анимированный GIF ". Иногда такими картинками злоупотребляют, и ничего хорошего из этого не получается.
Другое достоинство формата GIF — возможность задать "прозрачный" цвет. Впоследствии Web -обозреватель вместо точек, имеющих этот цвет, будет подставлять точки "фона" родительского элемента. Говоря просто, можно сделать рисунок с "дырками", сквозь которые "просвечивает" то, что находится под рисунком.
Формат PNG , как говорят его создатели, объединяет возможности GIF и JPEG , не "прихватывая" заодно с собой их недостатки. Но пока он что-то не очень популярен в Сети. Однако если GIF все-таки сделают платным...
Internet Explorer также поддерживает формат BMP . Непонятно, зачем это нужно, ведь другие Web -обозреватели его не поддерживают.
Осталось только привести расширения, под которыми сохраняются файлы того или иного формата. Файлы GIF , PNG и BMP имеют "говорящие" расширения gif , png и bmp , а файлы JPEG — jpeg , jpg или jpe .
Вторая разновидность графических изображений — векторные. В отличие от растровых, состоящих из точек, они состоят из линий, называемых примитивами. Каждый такой примитив описывается определенной формулой, имеющей конкретный набор параметров. Вот эти параметры и сохраняются в массиве данных. К векторным относится формат изображений, созданных в популярнейшей программе Macromedia Flash , а также второй стандартный формат хранения изображений в Windows — WMF ( Windows MetaFile — ме тафайл Windows ). Вообще, существует много форматов векторных изображений, здесь перечисляться они не будут.
Что предлагают нам векторные изображения? Вопервых, небольшой объем т. к. параметры какойнибудь загогулины занимают значительно меньше места, чем весь набор составляющих ее точек. Вовторых, исключительно простое масштабирование: Web -обозревателю достаточно перевычислит формулы с новыми параметрами размеров и нарисовать новую картинку на основе результатов этих вычислений. Недостаток: очень сложные алгоритмы вывода, включающие вычисление сложных формул. К тому же, чем вектор ное изображение сложнее, тем оно больше и тем дольше выводится экран.
В Web -дизайне широко используется только один формат векторной графики — Flash . Но назвать это чудо программистского искусства графической программой не поворачивается язык — это мощнейший мультимедийный комплект, позволяющий создавать целые фильмы со звуковым сопровождением, причем, фильмы интерактивные, реагирующие на действия пользователя. При этом файлы, имеющие расширение swf , отличаются небольшим размерами и быстро грузятся даже по относительно слабым каналам. Все Web -обозреватели имеют в своем составе дополнительные модули, позволяющие просматривать фильмы Flash , а те, кто их не имеет, могут без проблем загрузить с сайта Macromedia .
Примечание
Формат VML , о котором говорилось выше , также растровый.

1  2  3  4  5  6  7

Вверх