ЛАБОРАТОРНАЯ РАБОТА № 6. Графика на веб-странице.
Основные способы применения графики
Фоновое изображение
Допустим, что у нас заготовлен соответствующий фоновый рисунок (откройте на диске С папку Мои документы/Мои рисунки/ и выберите любой понравившейся рисунок, сохраните его в созданную папку Лаб№6, переименуйте его например img1.jpg.
(Если в папке Мои рисунки нет подходящего фона для страницы, то можно сделать так:
Ø Открыть текстовый редактор MS Word
Ø Нарисовать большой прямоугольник на размер страницы
Ø Добавить заливку – градиентная, выберите готовую заготовку
Ø Выполните копирование вида экрана – нажмите кнопку PrintScreen
Ø Зайдите в любой графический редактор, например в Paint
Ø Выполните Правка/Вставить, вырежьте изображение и вставьте в новый пустой файл
Ø Выполните Файл/Сохранить как, дайте имя файлу - img1 и Тип файла JPG)
Чтобы поместить рисунок на веб-страницу в качестве фона, нужно установить в теге <BODY> атрибут BACKGROUND= со значением, содержащим имя файла рисунка.
<BODY BACKGROUND="img1.jpg">
Если рисунок меньше окна браузера, то он будет повторяться по горизонтали и по вертикали. Это происходит автоматически, и до недавнего времени это нельзя было отменить. Теперь же, если вы не хотите повторения можно указать либо относительное местоположение файла рисунка (то есть путь доступа к нему относительно расположение исходного HTML-файла), либо его полный URL-адрес. Здесь и далее мы предполагаем, что вы разместили в той же папке, что и HTML-файл.
Самостоятельно создайте новую web-страничку и примените к ней фоновый рисунок. Примените также цвет к тексту, так чтобы он был четким на вашем фоне.
В качестве заголовка используйте следующий текст - Александр Сергеевич Пушкин.
Затем введите на веб- страницу следующий текст - Творчество Александра Сергеевича Пушкина. Примените форматирование по центу и тип заголовка – первый. Затем установите горизонтальную линию.
Затем впишите по центру, курсивом и типом заголовка второй текст - Пушкин: Краткий очерк жизни и творчества. Установите горизонтальную линию.
Затем впишите по ширине и шрифтом меньше на один пункт от основного текста следующий текст: 1799, 26 мая (6 июня) - А. С. Пушкин родился в Москве в семье офицера Гвардии Сергея Львовича Пушкина и внучки Ганнибала А. П., сына эфиопского князя, попавшего в Россию ок. 1706 г. (Арап Петра Великого), Надежды Осиповны Ганнибал.
Установите горизонтальную линию.
Затем впишите по центру и третьим типом заголовка, текст - Стихи Пушкина, на следующей строке, подчеркнутый текст - Я вас любил: любовь еще, быть может.
Установите горизонтальную линию.
Затем впишите с левой стороны и шрифтом меньше на один пункт от основного текста следующий текст:
«Я вас любил: любовь еще, быть может
В душе моей угасла не совсем;
Но пусть она вас больше не тревожит;
Я не хочу печалить вас ничем.
Я вас любил безмолвно, безнадежно,
То робостью, то ревностью томим;
Я вас любил так искренно, так нежно,
Как дай вам бог любимой быть другим.
1829»
Графические иллюстрации
Проиллюстрируем наш текст, вставив перед стихотворением фотографию Пушкина. Предположим, что фотография у нас уже готова и лежит в текущей папке Лаб6 под именем Pushkin.jpg. Вставить ее в текст можно с помо щью тега <IMG>, например, вот так:
<IMG SRC=" Pushkin.jpg">
На месте этой записи браузер отобразит нашу картинку.
Атрибуты тега <IMG>.
Во-первых, надо помнить, что картинки загружаются из сети всегда намного медленнее, чем обычный текст. Это я говорю не к тому, что сам файл картинки должен быть не очень большого объема (это верно, но этот вопрос мы обсудим отдельно), а к тому, что при такой записи, как выше, многие браузеры, начав загружать картинку, приостановят загрузку последующего текста до тех пор, пока картинка не будет загружена полностью. Но для читателя было бы удобнее, если бы текст продолжал загружаться параллельно с картинкой: пока она догружается, можно было бы что-то уже читать. Чтобы браузер мог это сделать, ему нужно явно указать размеры будущей картинки с помощью атрибутов WIDTH= и HEIGHT=:
<IMG SRC=" Pushkin.jpg” WIDTH="300" HEIGHT="200">
Вообще говоря, с помощью этих атрибутов можно задать какие угодно размеры картинки, “растянув” или сжав ее как душе угодно. Однако обычно этого не делают, и вот почему. Представлять картинку меньшей, чем она есть, нецелесообразно, поскольку зачем тогда грузить большой файл? Ведь файлы для картинок большого размера имеют большой размер и грузятся из Интернета, соответственно, намного дольше. Лучше уж сделать маленький файл для картинки маленького размера и быстро загрузить его. А если представить картинку большей, чем она есть, то, как правило, она будет выглядеть малопривлекательно за счет появления “ступенчатости” как в формах, так и в цвете.
Далее, хорошим тоном является наличие так называемого альтернативного текста для тех случаев, когда в браузере отключен просмотр графики. Тогда на месте нашей картинки будет выведен прямоугольник соответствующего размера, который сопровождается пояснением, что за картинка на этом месте должна быть. Альтернативный текст вводится как значение атрибута ALT:
<IMG SRC=" Pushkin.jpg " WIDTH="300" HEIGHT="200" АLТ="Поэт Пушкин А.С.">
Вокруг рисунка можно отобразить рамку. Толщина этой рамки задается как значение атрибута BORDER=. Если мы, как в данном случае, не хотим отображать рамку вокруг рисунка, то можем ничего и не указывать, так как большинство браузеров по умолчанию рамку не рисуют. Но некоторые браузеры все же это делают, и “для верности” неплохо бы указать и отсутствие рамки тоже:
<IMG SRC=" Pushkin.jpg " WIDTH="300" HEIGHT="200" АLТ=" Поэт Пушкин А.С." BORDER="0">
Картинки могут содержать гиперссылки. Например, можно при щелчке на изображении Пушкина перейти на сайт творчества Пушкина.
<A HREF="https://pushkin135.narod.ru/">
<IMG SRC=" Pushkin.jpg " WIDTH="300" HEIGTH="200" АLТ=" Поэт Пушкин А.С." BORDER="0">
</A>
Тег <IMG> может иметь собственный атрибут ALIGN=, который управляет расположением рисунка относительно текста. Если рисунок “встроен” в текст, то есть несколько вариантов его расположения:
ALIGN="left" — текст обтекает рисунок, который располагается слева;
ALIGN="right" — текст обтекает рисунок, который располагается справа;
ALIGN="top" — рисунок располагается внутри текстовой строки, и его верхняя граница совпадает с верхней границей букв текста (можно также применять значение "texttop");
ALIGN="middle" — рисунок располагается внутри текстовой строки, которая вертикально выравнивается по центру рисунка (можно также при менять значение "absmiddle");
ALIGN="bottom" — рисунок располагается внутри текстовой строки, и его нижняя граница совпадает с нижней границей букв текста (можно также применять значение "absbottom" или "baseline").
Кроме того, чтобы рисунок не слишком “прижимался” к тексту, можно оставить между ними немного “воздуха”. Для этого в теге <IMG> используют атрибуты HSPACE= и VSРАСЕ=, значения которых задают соответственно горизонтальное и вертикальное “поля” рисунка.
Самостоятельно добавьте обтекание рисунка текстом и установите отступы.
Результат у Вас должен получится похожим на рис.6.1.
Браузер Internet Explorer (версия 4 и выше) позволяет с помощью тега <IMG> загружать и просматривать также видеофрагменты в формате AVI (Video for Windows). Для этого можно установить атрибут DYNSRC=, в качестве значения которого указать имя AVI-файла. При этом можно дополнительно указать в атрибуте START=, когда следует начинать проигрывание видео: "FILEOPEN" — сразу после загрузки файла или "MOUSEOVER" — после наведения указателя мыши на изображение. Атрибут LOOP= позволяет установить количество проигрываний: "О" означает бесконечное повторение, а любое другое число указывает точное количество повторов.
Графические элементы оформления веб-страниц
Тем, кто впервые начинают работать над созданием веб-страниц, обычно представляется, что использование графики здесь должно ограничиваться вставкой иллюстраций, как в книгах.
Конечно, графические элементы, с одной стороны, вещь опасная, поскольку графические файлы имеют большие размеры и, соответственно, долго загружаются из Интернета. Но если на странице совсем не использованы элементы графики, она тоже будет восприниматься неадекватно: однообразие текстового изложения мешает читателю воспринимать даже интересующий его материал.
Конечно, можно многого достичь, используя стилевое оформление страницы (с помощью каскадных таблиц стилей). Однако есть еще один способ “оживить” веб-страницу. Он заключается в использовании небольшого числа мелких графических элементов в качестве элементов оформления. Обратите внимание на то, что эти элементы должны быть мелкими. Это важно по двум причинам: во-первых, они не отвлекают на себя внимание читателя (а только придают веб-странице лучший внешний вид), а во-вторых, малые по размеру рисунки загружаются из Сети довольно быстро, что обычно сопоставимо со скоростью загрузки текста.
Рис.6.1. Пример странички с фоновым рисунком и иллюстрацией
Графические маркеры
Возможность создания графических маркеров списков. Она настолько привлекла создателей веб-страниц, что для их удобства были созданы специальные средства. Маркером может быть все что у годно — от просто цветных и немного выпуклых кружков и квадратов до миниатюрных художественных работ. Однако обратите внимание на то, что именно миниатюрных, маркеры списков должны по размеру как-то соответствовать высоте текстовой строки, и забота об этом ложится на автора еще на этапе создания изображения. Старайтесь создавать подобные изображения сразу в “натуральную величину”. Если создавать сначала крупные рисунки, а потом просто уменьшать их, то при уменьшении они могут стать неузнаваемыми! Все дело в том, что компьютер “не знает”, какие детали рисунка важны для нашего восприятия. Если при уменьшении исчезнут важные детали, результат будет ужасным. Если исчезнут второстепенные детали, качество восприятия ухудшится, но общее впечатление останется.
Чтобы проиллюстрировать возможность вставки в список графических маркеров, воспользуемся предыдущим примером. Создайте простой список на главной странице:
<UL compact TYPE="CIRCLE"> Графическая карта изображения состоит из следующих активных частей
<LI> монитора </LI>
<LI> компьютера </LI>
<LI> дисковода </LI>
</UL>
Это маркированный список с типом маркера – кружки. Создайте в MS Word или в любом графическом редакторе любое изображение для маркера. Сохраните этот файл marker1.gif. Теперь вспомним, как мы задавали тип маркера списка:
<UL TYPE="disc">
Однако, атрибут TYPE= можно заменить на атрибут STYLE= (в соответствии со спецификацией HTML 4.0):
<UL STYLE="list-style-type: disc;">
Теперь, чтобы заменить кружок на графический маркер, заменим свойство list-style-type на свойство list-style-image и определим местоположение нашего файла-рисунка:
<UL STYLE="list-style-image: url('markerl.gif);">
Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки. Поэтому если бы мы ошибочно написали
< UL STYLE="list-style-image: uri("marker1.gif");">
то кавычка перед словом Images была бы воспринята как закрывающая, то есть атрибуту STYLE= было бы присвоено значение "list-style-image: url(", a все, что следует за этим, стало бы еще одним, нераспознанным атрибутом тега <UL>.