Использование графики на веб страницах. Иллюстрированный самоучитель по Web-графике. Тема: «Вставка изображений в документ»

Определение 1

Web-страница - это текстовый файл, созданный на языке HTML и размещенный в World Wide Web (WWW). В Web-странице кроме текста могут содержаться гипертекстовые ссылки, по которым можно осуществить переход к другим Web-страницам и просмотреть их, а также вставки в виде графики, анимации, видеоклипов и музыки.

С помощью языка HTML можно:

1. Создавать и редактировать Web-страницы.
2. Редактировать документы HTML-формата из Интернета с учетом функционирования всех внедренных в документ объектов (картинок, анимаций и т.д.).
3. Используя гипертекстовые ссылки и возможность внедрения в документ HTML-формата рисунков, диаграмм, анимации, видеоклипов, музыкального и речевого сопровождения, текстовых спецэффектов, создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты.

Замечание 1

Графические изображения, как правило, хранятся в отдельных файлах. В языке HTML имеются особые теги, с помощью которых в кодах Web-страниц прописываются ссылки, представляющие собой фактические адреса этих файлов в сети Интернет. Встречая такие теги, Web-обозреватель делает запрос Web-серверу на соответствующий файл с изображением, аудио - или видеороликом и выводит его на Web-страницу в место нахождения данного тега. Любые данные (изображения, аудио- и видеоролики и др.), которые хранятся в отдельных от Web-страницы файлах, называют внедренными элементами Web-страниц. Рассмотрим подробнее процесс добавления изображения на Web-страницу.

Добавление изображений на Web-страницу

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

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

где - собственно сам тег, а scr – его атрибут. Так как атрибут scr является обязательным, то можно сказать, что вся эта запись представляет собой один общий тег. В теге источника изображения не используется соответствующего закрывающего тeга, так как тег источника является самодостаточным, и поэтому при его использовании необходимо добавлять в конце закрывающую косую черту: .

Добавление альтернативных надписей

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

Ниже представлен НТМL-код, в котором атрибут alt добавлен внутрь тега. Данный атрибут аналогично атрибуту src сообщает браузеру некую дополнительную информацию об изображении и его также всегда можно использовать вместе с тeгом.

alt="Это картинка!" />

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

При использовании атрибута alt для каждого тега, важно быть внимательным, чтобы не назначить графическим элементам несоответствующие им текстовые сообщения. К примеру, нет смысла в добавлении альтернативных текстовых надписей к элементам внешнего оформления страницы. Во избежание таких ошибок, можно присвоить атрибуту alt этих элементов пустое значение (alt=» »). Если не задать значений другим атрибутам, браузер воспроизведет изображение в исходном размере, при этом выровняет верхний край изображения с верхним краем находящейся рядом текстовой строки. Однако можно изменить оба этих параметра, используя теги стилевых таблиц.

Атрибуты изображения

В теге имеются атрибуты, которые позволяют изменять размер изображений. Вот некоторые из них:

• height – с помощью него определяется высота изображения в пикселях или процентах;
• width – с помощью него определяется ширина изображения в пикселях или процентах.

Настройка высоты и ширины изображения

Размеры изображений, размещаемых на Web-страницах, могут задаваться с помощью вышеназванных атрибутов. Причем их значения задают либо как фиксированное количество пикселей, либо в процентах относительно размеров страницы. В представленном ниже коде HTML первый тег содержит размеры исходного изображения в пикселях (60 пикселей по вертикали и 60 пикселей по горизонтали), второй тег ширину того же изображения устанавливает равной 6% от ширины страницы, а высоту – 10% относительно высоты страницы.

аlt="Это картинка!" hеight="60" width="60" />

аlt="Это картинка!" height="10%" width="6%" />

Замечание 2

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

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

Для того чтобы изображение на любом экране независимо от его разрешения занимало точно определенное пространство по ширине страницы, необходимо использовать процентные значения. Если же нужно, чтобы постоянным было разрешение самого рисунка (его размер в пикселях), необходимо использовать значения в пикселях.

Выравнивание текста и графики

Для выравнивания изображения по правому (right) или левому (left) краю текстовой строки используется атрибут align тега. Например:

аlt="Это картинка!" hеight="60" width="60" align="right" />

Для выравнивания изображения по вертикали относительно текстовой строки можно также использовать этот атрибут, который может принимать значения top, bottom и center. Значение top указывает на выравнивание верхнего края изображения по верхнему краю окружающего его текста. Значение bottom указывает на выравнивание нижнего края изображения по нижнему краю окружающего его текста. Значение center указывает на выравнивание центра изображения по центру текстовой строки.

Использование изображений в качестве ссылок

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

Миниатюры изображений

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

аlt="Щелкните, чтобы увидеть нормальное изображение."

hеight="60" width="60" />

Секреты успешного использования изображений

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

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

Замечание 3

Важным является и общий размер файла всего HTML-документа, который, в свою очередь, будет зависеть не только от размера изображений, содержащихся в нем, но и от их количества. Нужно быть внимательными при использовании атрибута alt, чтобы содержание текстового сообщения всегда соответствовало самому изображению. И в обратном случае: необходимо следить за тем, чтобы изображение соответствовало представленной на странице текстовой информации.

При использовании изображений, заимствованным в сети Интернет, на создаваемой странице, необходимо проверить, не защищены ли эти изображения авторскими правами.

Вторым по значимости компонентом наполнения Web-страниц после текста, несомненно, будет графическое оформление. Это различного рода рисунки, фотографии и, может даже, видеоклипы. Также мы можем использовать звуковое сопровождение отображения Web-страниц.
Начнем мы с размещения графических изображений. Браузеры в состоянии отображать только три вида графических файлов. Это файлы форматов GIF, JPEG и PNG. Файлы формата GIF позволяют создавать анимированные изображения. JPEG-файлы обычно применяются для сохранения фотографических изображений. Недавно появившийся формат PNG позволяет совмещать хорошее качество изображения и маленький объем графического файла. Но после того как изображение было упаковано в графический файл, его все-таки необходимо каким-либо образом внедрить в состав Web-страницы.

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

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

В этом примере мы используем рисунок формата GIF, находящийся в файле с именем pictl.gif, который, в свою очередь, расположен в каталоге с наименованием images. Следует обратить внимание, что слэши - наклонные черты, наклонены в другую сторону, нежели при использовании их в путях файлов операционных систем семейств DOS и Windows. Дело в том, что изначально Web-серверы базировались на операционной системе Unix, которая и поддерживает файловую систему с подобными слэшами. А сейчас абсолютно неважно, какая операционная система поддерживает сервер с Web-сайтом, все пути записываются одинаковым способом и правильно обрабатываются программным обеспечением сервера.

На заре развития WWW браузеры отображали только текстовую информацию, никакая графика не поддерживалась. Сейчас они практически не встречаются, но каждый браузер имеет возможность отключения загрузки графики. Поэтому всегда следует использовать альтернативное текстовое представление рисунка. Попросту, необходимо приготовить текст, который будет отображаться вместо рисунка, если тот не может быть по каким-либо причинам загружен браузером. Этот текст добавляется к тегу при помощи параметра ait, значением которого и является искомая текстовая строка, т. е. получится приблизительно следующая конструкция:

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

Впрочем, существует и более развернутый вариант создания подобных текстовых подсказок. При помощи параметра longdesс задается адрес интернет-ресурса, на котором находится полное описание данного графического изображения. В качестве значения этого параметра указывается, естественно, URL ресурса с описанием изображения.

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

По умолчанию графическое изображение показывается именно в таком виде, как оно и было создано, с сохранением размеров по вертикали и горизонтали. Однако мы имеем возможность явно задавать размеры рисунка по своему усмотрению. Для этого используются параметры height и width. Как задавать размеры в пикселах или процентном соотношении мы уже знаем. Необходимо отметить лишь, что браузеры стремятся сохранять пропорции рисунка, поэтому явное задание размеров, меняющее пропорции, может быть проигнорировано браузером, и тот выберет такие размеры, которые были бы максимально близки к указанным пользователем, не нарушая пропорций. Поэтому для Web-страниц обычно готовят графические изображения тех размеров, которые будут применяться и при отображении их в составе Web-страниц. И если одно изображение должно отображаться несколько раз с различными размерами, то проще приготовить несколько графических файлов, чем отдавать свои рисунки на самовольное отображение браузеру, который сможет нарушить всю верстку Web-страниц.

При помощи параметров мы можем указывать величину чистого пространства, которое будет отделять графическое изображение от окружающих его других элементов оформления Web-страницы, т. е. фактически, задавать отступ рисунка. Для этого применяются параметры hspace и vspace. Параметр hspace устанавливает отступ по горизонтали в пикселах, a vspace - по вертикали. Обратите внимание, в качестве значений этих параметров могут применяться только численные значения, указывающие расстояния в пикселах. Нулевого значения для этих параметров не предусмотрено, но обычно каждый браузер использует малое ненулевое значение.

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

Также необходимо упомянуть о выравнивании графического объекта относительно обтекающего его текста. Для этого используется параметр align. В качестве его значения может использоваться одно ключевое слово из предопределенного их набора. Значения bottom, middle и top применяются для позиционирования первой строки текста, обтекающего рисунок по вертикали. Значение top смещает ее наверх, bottom- вниз, a middle позволяет центрировать строку по вертикали. Для выравнивания по горизонтали графического изображения применяются значения left и right. Первое значение left, как нетрудно догадаться, смещает рисунок к левому края блока, в котором тот отображается, a right - к правому.

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

Листинг 1.11

"http://www.w3.org/TR/htm!4/strict.dtd">




<р>
Это текст, который обтекает рисунок.
Это текст, который обтекает рисунок.

Внешний вид этого HTML-документа при отображении его с помощью браузера показан на рис. 1.11.

Рис. 1.11. Окно браузера с результатом отображения файла, приведенного в листинге 1.11

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

А теперь добавим к тегу отображения рисунка параметр горизонтального выравнивания. Получившийся код приведен в листинге 1.12.

Листинг 1.12

"http://www.w3.org/TR/html4/strict.dtd">


<р>Это текст, который обтекает рисунок. align="ieft">
Это текст который обтекает рисунок. Это текст, который обтекает рисунок.
Это текст, который обтекает рисунок.

Как видно, в этом случае опять сначала начинает отображаться текст, затем графическое изображение, прижатое к левому краю, согласно директиве, отданной при помощи параметра align, а справа от рисунка размещается остальной текст (рис. 1.12), т. е. изображение не может занять первую строку, так как текст начинается раньше него. То же самое произойдет, если применить параметр align со значением right, но рисунок окажется лишь прижатым к правому краю окна просмотра, а текст будет обтекать его с левой стороны. Вот и все изменения.

Теперь рассмотрим, как действует выравнивание по вертикали. Хотя параметр выравнивания вставляется в тег рисунка, наибольшие изменения заметны все-таки у текста, окружающего рисунок. Посмотрим действие параметра вертикального выравнивания на примере.

Рис. 1.12. Окно браузера с результатом отображения файла, приведенного в листинге 1.12

Листинг 1.13

"http://www.w3.org/TR/html4/striqt.dtd">




<р>Это текст, который обтекает рисунок. align="middle">
Это текст, который обтекает рисунок. Это текст,
который обтекает рисунок.
Это текст, который обтекает рисунок.

Результат отображения этого HTML-документа показан на рис. 1.13.

Рис. 1.13. Окно браузера с результатом отображения файла, приведенного в листинге 1.13

В данном примере мы установили вертикальное выравнивание посередине, т. е. первая строка текста, находящегося после тега вставки изображения, отображается в центре по вертикали свободного пространства справа от рисунка. Остальной текст отображается под рисунком. Если бы мы установили для параметра align значение top, то первая строка будет отображаться рядом с верхним обрезом рисунка. А при использовании значения bottom, первая строка текста будет отображаться рядом с нижней границей рисунка. Следует обратить внимание, что браузер распознает только один параметр align, т. е. мы можем указать либо вертикальное, либо горизонтальное выравнивание. Если же встроенных средств позиционирования и выравнивания рисунка не хватает, можно обратиться к процессу верстки с использованием таблиц. Применение таблиц мы рассмотрим в одном из следующих разделов этой главы.

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

Браузеры обычно в состоянии воспроизводить видеофайлы форматов AVI, Real Video и Windows Media. А внедрение их в состав Web-страницы производится при помощи все того же тега . Но для указания местонахождения видеофайла используется параметр dunscr. По умолчанию, внедренный в Web-страницу видеоклип проигрывается один раз, сразу после полной загрузки страницы. Но мы имеем некоторые возможности регулировать процесс проигрывания клипа или давать самому пользователю возможность управления его воспроизведения.

Если в состав тега мы включим параметр start, то мы сможем явно указывать событие, после которого браузер должен будет воспроизвести загруженный видеоклип. В качестве значений данного параметра могут использоваться ключевые слова mouseover и fileopen. Первое из них указывает, что клип необходимо воспроизвести после того, как пользователь поместит курсор мыши на пространство, отведенное под видеовставку, а второе - что воспроизведение начнется сразу после полной загрузки HTML-файла. Впрочем, мы можем сочетать эти два варианта. В этом случае, тег вставки видеоролика будет выглядеть следующим образом:

Мы можем указывать, сколько раз необходимо воспроизвести видеоролик, используя для этой цели параметр loop. В качестве значения этого параметра используется число, устанавливающее количество повторения видеоклипа. Впрочем, если мы хотим, чтобы видео воспроизводилось постоянно, без какого-либо фиксированного количества повторений, то следует использовать значение infinite. А при помощи параметра loopdelay мы можем устанавливать временную задержку между повторами воспроизведения видеоклипа. Значением данного параметра является число, указывающее промежуток времени в миллисекундах. Рассмотрим применение этих параметров на примере следующего фрагмента кода:

Здесь мы явно указываем, что видеоклип будет воспроизведен два раза сразу после загрузки Web-страницы с пятисекундной задержкой между воспроизведениями.

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

Рассмотренных нами параметров вполне хватает для правильного внедрения видеофайлов в состав содержимого Web-страницы. Рассмотрим детальный пример (рис. 1.14).

Листинг 1.14

"http://www.w3.org/TR/html4/strict. dtd">
.

<р>Обычный текст.

Рис. 1.14. Окно браузера с результатом отображения файла, приведенного в листинге 1.14

Естественно, так как процедура вставки видеофрагмента в тело Web-страницы является частным случаем вставки графики, то к тегу вставки видеофрагмента применяются и все остальные параметры, применимые к тегу , такие, как параметры выравнивания, явного указания размера и прочие.

К мультимедийным возможностям относятся и звуковое оформление Web-страницы. Но звук мы можем использовать лишь в качестве фонового формления, т. е. некий звуковой файл будет воспроизводиться на компьютере удаленного пользователя после того, как тот загрузит Web-страницу. Если, конечно, в его компьютере установлена звуковая плата, т. е. изначально на компьютер удаленного пользователя загружается HTML-файл с Web-страницей, а затем подгружаются все остальные файлы, используемые в оформлении этой Web-страницы, такие как графические файлы, видeo- и аудиоклипы.

Итак, для того, чтобы просмотр Web-страницы сопровождался звуковым воспроизведением, необходимо в код страницы вставить тег . Тег ставляется не в тело Web-страницы, а в его заголовок, т. е. между тегами и . У данного тега существует обязательный параметр src, в качестве значения которого используется URL подключаемого звукового файла. Необходимо отметить, что браузеры гарантированно распознают и воспроизводят аудиофайлы форматов MIDI и WAV. Воспроизведение иных форматов, таких как МРЗ и Real Audio, возможно только при подключении дополнительных модулей к браузерам.

Как и в случае с видеоклипами, мы можем задавать количество воспроизведений звукового файла при помощи параметра loop. В качестве значения этого параметра используется число повторений. Если необходимо воспроизводить аудиофрагмент постоянно, следует использовать значение "-1", т. е. если мы хотим, чтобы при загрузке Web-страницы непрерывно проигрывался некий аудиофайл, следует воспользоваться следующей конструкцией:

На этом мы заканчиваем рассмотрение вопросов использования мультимедийных и графических объектов в оформлении Web-страниц и переходим к следующей части первой главы.

Именно благодаря графике на Web-страничках WWW стала самым популярным сервисом Internet, именно ей мы обязаны всему этому многообразию страничек.

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

Для использования в Web-сайтах применяется два основных формата файлов - GIF и JPG. Сейчас продвигается новый формат для web-графики под названием PNG (произносится "пинг"), но он пока еще мало распространен, и не все браузеры его понимают, поэтому с этим форматом мы пока разбираться не будем.

Итак, приступим к разбору форматов GIF и JPG, опишем их основные свойства и особенности.

Формат GIF

Поддерживает не более 256 цветов (меньше можно и часто нужно);

Использует палитру цветов;

Использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы практически не сжимаются);

Поддерживает чересстрочную развертку;

Является поточным форматом, т.е. показ картинки начинается во время перекачки;

Позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIF-ов;

Имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIF-ов;

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

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

Формат JPEG

Позволяет сохранять полноцветные изображения с количеством цветов 16,7 млн. цветов (или 24bpp), причем, если в рисунке меньше цветов, то перед сохранением файла он все равно преобразуется в полноцветное изображение; Использует сжатие с потерями информации, за счет чего достигает диких степеней сжатия файлов; Поддерживает прогрессивную развертку, т.е. изображение появляется вначале с плохим качеством, и в процессе загрузки постепенно улучшается. Пожалуй, это все преимущества формата JPG, и основное его предназначение - хранение изображений фотографического качества.

Оптимизация графики

Вся работа по обработке графики делается в промежуточном формате

Рассмотрим некоторые особенности работы с графикой. Несмотря на то, что мы сохраняем изображения в GIF-файле с поддержкой 256 цветов или в JPG-файле с 16,7 млн. цветов, работать с изображением нужно в каком-нибудь промежуточном формате, который позволяет сохранять картинку без искажений и без потери глубины цвета (например, TIFF и внутренние форматы редакторов типа PSD). Дело в том, что в процессе работы понадобится многократно изменять или искажать изображение, что, в конце концов, приводит к многократной перезаписи файла. Многократная запись в формате GIF приведет к тому, что потеряются оттенки изображения, а в формате JPG - каждая новая перезапись файла будет вносить новые искажения, и через некоторое время фотография будет выглядеть ужасно. Поэтому всю работу по обработке графики делается в промежуточном формате (хотя он и обладает большими размерами файла) и только на самом последнем этапе преобразуется изображение в нужный формат (часто - одновременно с оптимизацией размера файла).

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

А с размерами фотографий нужно придерживаться определенного компромисса - не делать их слишком мелкими, на которых даже под лупой ничего не разглядишь, и не стоит делать их слишком огромными, чтобы время не растягивать в вечность. Хотя, разумеется, есть исключения: правильно оптимизированная большая фотография может занимать время пересылки, эквивалентное времени пересылки обычной фотографии и, наоборот, дурно оптимизированный маленький рисунок будет грузиться до конца дней. Под обычной фотографией можно считать фотографию размером примерно 250x300 пикселей и занимающую порядка 6-10 килобайт. Это не значит, что все фотографии должны иметь такие размеры, но площадь фотографии должна быть ей эквивалентна. Эти рекомендации относятся к "иллюстрирующим" текст фотографиям и не относятся к рисункам, выполняющим функции элементов навигации.

Работа с графикой в процессоре Word может строиться по трем направлениям.

1. Вставка объекта, созданного в другом графическом редакторе (например, Paint, MicrosoftDrawing, Paintbrush и т. д.).

2. Рисование в самом документе (воспользовавшись инстру­ментами панели Рисование).

3. Использование готовых рисунков из коллекции Clipart для оформления текстов.

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

Запустите Word любым из известных вам способом.

Упражнение1. Вставка объекта, созданного в другом графическом редакторе

Вставка объекта, созданного в другом графическом редакторе, редактирование его после вставки и знакомство со способом оформления подрисуночной подписи.

1.1. Создание графического изображения в графическом редакторе.

1. Запустите графический редактор Paint. Для этого нажмите кнопку Пуск , в пункте Программы выберите Стандартные и щелкните по пункту Paint .

2. Создайте в графическом редакторе какое-либо изображение, например, как показано на рис. 4.1

3. Выделите изображение с помощью кнопки Выделить графического редактора (рис. 4.2).

4. Скопируйте изображение в буфер. Для этого выполните команду Правка ÞКопировать или нажмите горячие клавиши [ Ctrl+ c].

1.2. Вставка изображения в Word.

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

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

3. Щелкните мышью на введенном объекте. Вокруг изображения появляются квадратные «узелки». Если щелкнуть левой кнопкой мыши на таком узелке и удерживать ее, то перемещая мышь можно изменить размер изображения. Установите нужные вам размеры изображения.

Рис. 4.2. Графический редактор Paint и выделенное изображение

1.3. Размещение изображения в тексте.

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

1. Откройте панель Настройка изображения . Для этого выполните команду Вид ÞПанели инструментов ÞНастройка изображения . Перед вами должна появиться панели Настройка изображения .

2. Нажмите кнопку Обтекание текстом . В появившемся меню выберите нужный вам вариант обтекания и щелкните по нему мышью. Например, если выбрать По контору , то при вводе текста он будет располагаться вокруг контура изображение, так как рис. 4.1 в данной инструкции.

1.4. Редактирование изображения.

Для редактирования объекта щелкните на нем дважды мышью. В результате будет запущен редактор, в котором создавалось данное изображение, и в него будет помещено само изображение. Если редактор, в котором создавалось изображение недоступен, то изображение можно изменить с помощью встроенного в Word редактора.

1.5. Создание подрисуночной надписи.

1. Включите панель Рисование . Для этого нажмите кнопку Рисование на панели инструментов.

2. Разместите текстовый блок под рисунком. Для этого нажмите кнопку Надпись на панели Рисование . Поместите курсор мыши под рисунком, нажмите левую кнопку мыши и удерживая ее установите размер текстового блока по ширине, равный размеру рисунка, а по высоте – приблизительно 1 см. В результате вы получите прямоугольный блок, в котором можно размещать текст (рис. 4.3). Если «потянуть» мышью за «узелок» на блоке, то можно изменить размеры блока.

3. Введите подпись к рисунку, например, «Рис.1. Мое творчество ». Надпись необходимо вводить Курсивом .

В группе Заливка в выпадающем списке Цвет установите значение Нет заливки, а в группе Линии в списке Цвет – Нет линий. Щелкните на кнопке ОК. В результате граница вокруг блока исчезнет и сквозь него будет виден текст, даже если блок и перекрывает введенный в документ текст.

5. Установите необходимый режим обтекания рамки текстом. Для этого откройте окно Формат надписи также, как и в предыдущем случае и перейдите на страницу Обтекание. В группе Обтекание щелкните на пункте По контуру и нажмите кнопку ОК.

Если вы все сделали правильно, то у вас получиться точно такой же результат, как и на рисунке справа.

Упражнение 2. Рисование в документе

Панель Рисование редактора Word. Знакомство с инструмента­ми, возможность выбора типа линии, вставка рамки текста, ус­тановка для нее цвета линии и заполнения.

Попробуем начертить обычный параллелепипед (рис. 4.6). Если вы хотите упростить задание, ограничьтесь одним паралле­лепипедом без координатных осей и обозначения вершин.

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

Из каких геометрических фигур можно составить этот парал­лелепипед?

Начать можно с прямоугольника ABB 1 A 1 . Вам наверняка за­хочется скопировать его и вставить такой же прямоугольник CC 1 D 1 D, что неверно. CC 1 D 1 D не может быть единой геометри­ческой фигурой, так как состоит из линий разного стиля (сплошные и пунктирные).

Рис. 4.6

Ключ к заданию

Можно предложить следующий порядок построения (все ис­пользуемые кнопки с панели Рисование . Для ее вызова нажмите кнопку Рисование на панели инструментов):

1. нарисовать прямоугольник ABB 1 A 1 ;

2. провести одну из наклонных линий, например, A 1 D 1 ;

3. скопировать A 1 D 1 и вставить три раза ВС, B 1 C 1 и AD;

4. провести линии CC 1 , DD 1 , DC и D 1 C 1 ;

5. выделяя соответствующие отрезки, выбрать Тип штриха – пунктируй;

6. дорисовать координатные оси, выбрав инструмент Линия и стиль - Линия со стрелкой . Для выбора стиля автофигуры, щелкните правой кнопкой мыши над объектом и в появившемся контекстном меню выберите пункт Формат автофигуры . В результате перед вами появится окно Формат автофигуры , в котором можно установить нужный вид фигуры, например, к линии добавить стрелку.

Самый трудоемкий процесс в этом упражнении - обозначе­ние вершин.

Для того, чтобы расположить букву в нужном месте, включите кнопку Надпись на панели Рисование и растяните рамку, пользуясь мышью, до требуемого размера.

Нажав кнопку Цвет линии (рамка должна быть выделена), выберите в предлагаемой палитре Нет Линии, аналогично Цвет заливки - Нет заливки , Ваша рамка стала прозрачной. В ней можно помещать текст (нам нужна всего лишь одна буква - обозначе­ние вершены).

Выделите свою рамку, скопируйте и затем вставьте 10 раз (перед вставкой снимите выделение с исходной рамки).

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

Нижний индекс получается при помощи команды Формат ÞШрифт... если на вкладке Шрифт в группе переключателей Эффекты активизировать Нижний индекс. Перемещаются рамки по листу при помощи мыши.

Чертеж готов.

Желательно представить его в виде единого графического объекта. Для этого, включив кнопку Выбор объектов , растяните пунктирную рамку вокруг всего рисунка (выделите рисунок) и нажмите кнопку Действия , а в появившемся меню, выберите пункт Группировать.

Теперь можно перемещать чертеж целиком по листу.

Мало того, можно изменять его пропорции, если, выделив рисунок, потянуть мышью за узелки (квадратики на рамке выде­ления).

Упражнение 3. Вставка рисунка из коллекции Clipart и размещение поверх него текста

Необычайно простое и эффектное задание.

Рис. 4.7. Окно выбора рисунка коллекции Clipart

2. Измените пропорции и размеры рисунка (аналогично пре­дыдущему заданию).

3. Растяните поверх рисунка рамку текста (Цвет линии - Нет, Цвет заливки - Нет) аналогично тому, как обозначали вершины в предыдущем задании.

4. И, наконец, наберите текст приглашения, сформатировав его по своему усмотрению.

Упражнение 4. Создание визитной карточки

Создадим собственную визитную карточку.Помимовставки рисунков и применения Рамки текста, вы сможете вспомнить все понятия раздела форматирования абзацев. Приве­дем несколько вариантов оформления визитной карточки:

· простая визитка, в форматировании использованы абзац­ные отступы и интервалы, различные типы выравнивания абза­цев, стили оформления шрифтов (упражнение 4.1);

· визитная карточка, созданная на основе рамки из коллек­ции Clipart (упражнение 4.2);

· визитная карточка, размещенная в Рамке текста с исполь­зованием элементов обрамления абзацев (упражнение 4.3). Мы не рассматривали отдельно обрамление абзацев, так как оно полностью идентично обрамлению ячеек таблицы и выполняется при помощи тех же операций.

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

1. Размещение на листе.

В зависимости от вида техники, на которой подразумевается в дальнейшем печать вашей продукции, на листе нужно размес­тить либо одну, либо максимальное количество визиток. В лю­бом случае создается одна визитная карточка, а затем тиражиру­ется (через копирование и вставку). Предварительно нужно ус­тановить соответствующие поля документа (рассчитайте опти­мальные поля для размещения максимального числа визиток размером 5х9 см). Перед началом набора текста визитки необ­ходимо создать для него рамку текста определенного размера (можно воспользоваться вставкой неразлинованной таблицы вместо рамки текста). Для этого "растяните" произвольную рамку текста, затем, нажав кнопку Тип линии , выберите 3 пт (в это время рамка должна быть вы­делена). Именно с этой процедуры придется начать работу с лю­бой из предлагаемых визиток.

2. Форматирование текста.

· Выбор гарнитуры шрифта и размера;

· использование различных видов выравнивания текста и от­ступов, разрядки шрифта;

· вставка символов (-,- и проч.);

· обрамление абзацев;

· использование нерастяжимых пробелов для форматирова­ния текста;

· создание рамки при помощи вставки рисунка из коллек­ции Clipart;

· вставка рисунка.

Теперь непосредственно прокомментируем каждый вид ви­зитной карточки.

Упражнение 4.1.Создание визитной карточки с применением абзацных отступов, интервалов, различных типов выравнивания абзацев и стилей оформления шрифта

Упражнение 4.2.Создание визитной карточки, заключенной в рамку из коллекции Clipart

Ключ к заданию

1. Подготовьте Рамку текста заданного размера.

2. В Рамку текста вставлен рисунок из коллекции Clipart (рамка).

3. Текст визитной карточки набирается в Рамке текста, кото­рую вы "растянете" поверх рисунка.

4. Все приемы форматирования повторяют предыдущее зада­ние, только абзац, содержащий фамилию, имеет обрамление снизу Формат ÞГраницы и заливка... и одинаковые отсту­пы слева и справа (чтобы подчеркивающая линия не доходила до самых краев визитки). ^

Упражнение 4.3.Применение элементов обрамления абзацев к оформлению визит­ной карточки

Ключ к заданию

1. Весь текст выровнен по центру.

2. Для набора должности использована разрядка шрифта.

3. Применено обрамление абзацев.

4. Для абзаца, содержащего название организации обрамле­ние снизу двойной линией, для адреса с телефоном рамка (после адреса можно вставить принудительный конец строки).

5. Для того, чтобы линии обрамления не доходили до самых краев визитной карточки, для всего текста заданы отступы слева и справа одинаковой величины.

В большинстве Web-страниц встречается графика. Она позволяет красочно и наглядно представить информацию. Во многих случаях лучше показать картинку, чем давать длинное текстовое описание.

Существуют два способа размещения графических изображений на странице:

• вставка отдельных картинок;
• заполнение фона картинкой.

В любом случае графическое изображение берется из файла.

Вставка графических изображений

Вставка на страницу графического изображения из файла графического формата производится с помощью тэга (от англ, image - изображение) с указанием адреса файла в качестве аргумента атрибута SRC:

< IMG SRC = "адрес_графического_файла" >

Адрес графического файла - этолибо URL-адрес, либо имя файла, возможно, с указанием пути. Например, для показа графического файла logotip.jpg следует написать тэг:

< IMG SRC = "logotip.jpg" >

Для увеличения скорости передачи графического изображения в тэге можно использовать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать два графических файла: один (например, пусть это файл logotip.jpg) содержит картинку, полученную с высоким разрешением, а другой (например, logotip.gif) - картинку, полученную с низким разрешением. Тогда тэг:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

…предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере приема заменить его файлом logotip.jpg.

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

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN тэга с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSРАСЕ для верхнего и нижнего полей и НSPACE для боковых полей в тэге . Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тэг
.

Следующий тэг задает обтекание графики из файла logotip.jpg справа (картинка будет находиться слева от текста):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT :

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Чтобы задать поля вокруг картинки, надо написать тэг вида:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Здесь числа 20 и 10 определяют размеры полей.

Рассмотрим пример совместного использования графики и текстов. Откройте Блокнот (текстовый редактор Notepad) Windows. Напишите в нем HTML-код с использованием рассмотренных выше тэгов. Ниже приводится программа, выводящая некоторый текст и графику. В качестве графического файла можно использовать любой из имеющихся у вас файлов. Здесь используется файл logotip.gif.

< HTML >

< HEAD >

< TITLE > Упражнение 1 < / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 > Текст обтекает графику справа < / H1 >

Рис. 657 . Текст обтекает картинку справа

Широкие возможности точного позиционирования изображений (как и других элементов) на странице предоставляют таблицы и стили . Эти элементы HTML будут рассмотрены позже. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.