Графика на WEB-странице в HTML. Графика на Web-страницах Ключ к заданию
Тема работы: Размещение графики на Web-странице.
Цель работы: Научиться внедрять в html-документ графические изображения.
Теоретическая часть: Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тега . Использование этого тега позволяет значительно улучшить внешний вид и функциональность документов.
Существует два способа использования графики в HTML-документах. Первый - это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тега:
URL " ALT="text " HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop >
Элементы синтаксиса тега:
Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает броузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров.
ALT="text"
Этот необязательный элемент задает текст, который будет отображен броузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство броузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. тег ALT рекомендуется, если ваши пользователи используют броузер, не поддерживающий графический режим, например Lynx.
HEIGTH=n1
Этот необязательный параметр используется для указания высоты рисунка в пикселах. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые броузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.
WIDTH=n2
Параметр также необязателен, как и предыдущий. Позволяет задать абсолютную ширину рисунка в пикселах.
Этот параметр используется, чтобы сообщить броузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство броузеров располагает изображение в левой части экрана, а текст справа от него.
С версии HTML 2.0 у тега появились дополнительные параметры:
URL " ALT="text " HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4 HSPACE=n5>
Новые параметры:
Позволяет установить размер в пикселах пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ.
То же самое, что и VSPACE, но только по горизонтали.
Фоновые рисунки
Большинство броузеров позволяет включать в документ фоновый рисунок, который будет отображаться на фоне всего документа. Описание фонового рисунка включается в тег BODY и выглядит следующим образом:
Ход работы :
Размещение графики на Web-странице.
#FFFFFF" TEXT="#330066">
Расписание
занятий на вторник
Самостоятельно внесите изменения в файл schedule. html , опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH. Пример использования атрибутов приведен в таблице ниже:
Атрибут | Формат | Описание |
Надпись "картинка" выводится на экран при подведении указателя мыши к изображению. |
||
Задает рамку вокруг изображения толщиной 3 пикселя. |
||
Выравнивает изображение относительно текста по верхней границе текста. |
||
Вертикальный размер изображения принудительно устанавливается в 111 пикселей. |
||
Горизонтальный размер изображения принудительно устанавливается в 220 пикселей. |
||
Атрибут добавляет верхнее и нижнее пустые поля высотой 8 пикселей. |
||
Добавляет левое и правое пустые поля шириной 8 пикселей. |
Фоновое отображение графики на Web-странице
Поместите файл back. jpg в ту же папку, что и schedule. html . Внесите изменения в файл schedule. html :
Расписание
занятий на вторник
На экране вы увидите:
https://pandia.ru/text/78/365/images/image003_82.jpg" width="300" height="197 src=">
Линейки и буквицы
Графические элементы возможно применять в качестве различного вида "украшений". Если Вы придумаете что-нибудь оригинальное, ваша веб-страница будет смотреться необычно и запомнится посетителю. Вот несколько ставших уже традиционными вариантов такого применения графики.
Во-первых
, это различные графические разделители, обычно горизонтальные, применяемые вместо горизонтальной черты (
).
Вот так он выглядит в окне браузера:
Хотя тег
и поддается настройке, графический разделитель вместо
часто выглядит лучше:
r. gif" WIDTH="60" HEIGHT="59" BORDER="0" АLТ="В">
В", чтобы пользователю с отключенной графикой не приходилось строить догадки относительно первой буквы.
Разместите в Вашем документе schedule. html разделитель anim_hr. gif. Задайте этому изображению высоту, равную 2 пикселям. Сместите анимированный разделитель в центр документа. В слове Расписание замените букву Р изображением, взять его Вы можете в папке с лабораторными работами (файл r. gif). Изменяя значение атрибута ALIGN, добейтесь наилучшего расположения буквы на экране. Используя любой графический редактор, создайте свое, альтернативное, изображение буквы Р и встройте его в документ.
Графические маркеры.
Язык HTML позволяет создавать маркированные и нумерованные списки.
Пример маркированного списка:
Пример нумерованного списка:
5. элемент списка
6. элемент списка
8. элемент списка
В терминах языка HTML это выглядит так:
Одно дело, когда маркерами списка являются стандартные кружочки, и совсем другое - когда каждый сам имеет возможность создать маркер. Маркером может быть все, что угодно - от просто цветных и немного выпуклых кружков и квадратов до изощренных миниатюрных художественных работ. Чтобы проиллюстрировать возможность вставки в список графических маркеров, заменим кружки в маркированном списке на красные треугольники.
Сначала надо создать такой треугольник в любой программе либо скопировать уже готовый из папки с лабораторными работами(файл marker. gif).. Этот файл нужно поместить рядом с уже созданным файлом schedule. html . Теперь введем в тег
- атрибут STYLE= (этот атрибут подробнее мы рассмотрим при изучении CSS - Cascading Style Sheets):
- вставка отдельных картинок;
- заполнение фона картинкой.
Ваш список должен выглядеть так:
- элемент списка элемент списка... элемент списка
Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки.
Оформление кнопок.
Еще одно частое применение графических элементов - это оформление кнопок. Вообще говоря, кнопка - это элемент взаимодействия с пользователем, так как предполагается, что когда он на ней нажмет, то что-нибудь произойдет. Сейчас мы не будем рассматривать методы такого взаимодействия. Пока мы только научимся создавать кнопки и использовать в них элементы графики.
Чтобы создать кнопку, поместите в Ваш html-документ следующий код:
В браузере она должна выглядеть так: ЭТO KHОПKА
Между тегами можно поместить не только текст, но и изображение. Если мы поместим туда тег , то получим кнопку с графическим изображением.
Скопируйте изображение home-button. gif из папки с лабораторными работами, поместите его в ту же папку, что и файл schedule. html . Замените текст ЭТO KHОПKА на описание тега , указывающего на файл home-button. gif. В тег
Работа с графикой в процессоре 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. Для того, чтобы линии обрамления не доходили до самых краев визитной карточки, для всего текста заданы отступы слева и справа одинаковой величины.
Одна из наиболее привлекательных черт WWW – возможность включения ссылок на графические и мультимедийные файлы, которые делают web-страницу более привлекательной и интересной. Это могут быть значки, рисунки, фотографии, карты изображений, а также использование аудио-, видео- и анимационных данных.
2.2.1. Вставка графики в html-документ
Значение графических изображений в аспекте создания электронных документов невозможно переоценить, документы становятся более выразительными и яркими и будут восприниматься легче и естественнее. Однако всегда и во всем следует помнить о чувстве меры. Перенасыщение документа иллюстративным материалом будет неоправданно отвлекать внимание пользователей от истинного содержания страницы, а еще приводит к тому, что страница будет медленнее загружаться из-за наличия большого количества рисунков.
Графические компоненты web-страницы по назначению можно условно разделить на три обширные категории:
– иллюстративная графика , включая дополняющий текст фотографии, пояснительные рисунки, чертежи, схемы;
– функциональная графика , представляющая собой элементы управления (кнопки навигации, счетчики и элементы интерактивных форм);
– декоративная графика – элементы дизайна страницы, включенные в нее для красоты и не несущие информационной нагрузки (фоновые рисунки, разделители, выполненные в виде графических файлов, заголовки и многое другое).
Графические форматы. В связи с использованием Интернета для загрузки графического изображения требуется определенное количество времени. И чем меньше это время, тем удобнее пользователю. Поэтому для графических изображений сейчас используют три самых популярных формата GIF, JPEG и PNG. В них заложены различные алгоритмы сжатия изображения с потерей качества, благодаря которым удается значительно уменьшить размер целевого файла.
GIF -формат. В 1978 году израильские исследователи Якоб Зив и Абрахам Лемпел разработали новый для того времени алгоритм сжатия информации без потери данных (LZ78 – название проекта). Через несколько лет американский программист Терри Уэлч усовершенствовал его (LZW) и также представил свою разработку для использования всем желающим.
В 1987 году Боб Берри на основе алгоритма LZW создал принципиально новый графический формат GIF. Суть алгоритма сжатия: уменьшение размера графического файла достигается путем смешения сходных оттенков в один, информация об изображении в файле GIF записывается построчно, т. е. представляет собой массив описаний строк высотой в один пиксел. Свойства: смешение сходных оттенков в один, оперирование фиксированной палитрой 256 цветов.
GIF формат используется в HTML-документе только для отображения бизнес-графики: диаграмм, логотипов, кнопок, других элементов оформления страницы – и рисунков с палитрой цветов 256.
Еще одно свойство GIF – чересстрочность, т. е. картинка загружается не целиком, а частями (считывается 1-я, 5-я, 10-я строки, затем 2-я, 6-я, 11-я и т. д.), т. е. как бы проявляется.
В 1989 году компания CompuServe выпустила новую версию GIF89а, которая использует для создания изображения прозрачного фона методом сохранения вместе с файлом так называемого «альфа-канала» – представляющего собой маску прозрачности рисунка. Цвета, насыщенные как прозрачные, в браузере становятся невидимыми.
Другая особенность GIF89а в том, что этот формат позволяет сохранять в формуле с одним физическим заголовком несколько разных изображений, демонстрируя их на экран последовательно один за другим.
JPEG -формат. Для размещения фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов используется стандарт JPEG. JPEG-формат, созданный на основе одностороннего алгоритма сжатия изображений с потерей качества, кодирующий не идентичные элементы, как алгоритмы LZW, а межпиксельные интервалы.
Механизм сжатия состоит из трех ступеней.
Изображение преобразуется в цветовой образ LAB, раскладывающий картинку на три независимых канала: L – сохранение интенсивности цветов, А и В – для запоминания цветовой информации.
Компрессия: из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки 8×8 точек и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация – менее заметные оттенки.
На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хоффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двухбитной кодировкой.
Декомпрессия формата JPEG осуществляется в обратном порядке.
Максимальное количество цветов, которое может содержать изображение в формате JPEG, – 16 миллионов.
PNG -формат. Этот формат был разработан в 1995 году, чтобы прийти на смену формата GIF после действий компании Unisys по защите авторских прав на алгоритм сжатия LZW. Одновременно были разработаны некоторые технические характеристики, в частности улучшение качества и увеличение количества поддерживаемых цветов.
Включение графики в web -страницу. Интеграция графики в HTML-документ осуществляется с использованием одиночного тега < IMG>.
Атрибут SRC (источник) задает URL-адрес изображения (рис. 2.3).
Рис. 2.3. Пример отображения примера с тегом < IMG>
Данный атрибут относится к числу обязательных в теге < IMG> (табл. 2.2).
Таблица 2.2
Атрибуты тега < IMG >
Назначение |
Значение атрибута |
Примеры записи |
|
Адрес изображения | |||
Позиционирование объектов на экране (необязательный атрибут) |
выравнивание LEFT– слева RIGHT– справа MIDDLE– по линии строки TOP– по верху BOTTOM– по низу | ||
Ширина рисунка (необязательный атрибут) |
в пикселях | ||
Высота (необязательный атрибут) |
в пикселях |
Окончание табл. 2.2
Назначение |
Значение атрибута |
Примеры записи |
|
Всплывающая подсказка (необязательный атрибут) |
содержит некий альтернативный текст | ||
Обрамление изображения |
толщина в пикселях | ||
Пустое пространство над изображением |
в пикселях |
|
|
Пустое пространство слева и справа |
Значение в пикселях |
|
HEIGHT="215" BORDER="5" ALT="лилия">
Использование тега в данном примере позволяет поместить изображение из файла по правой стороне окна браузера, задает размер этого изображения и помещает его в рамку (см. рис. 2.3).
В большинстве 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 будут рассмотрены позже. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.
Графика на WEB ‑страницах
Введение
Безопасная палитра
Некоторые форматы записи графики на Web‑страницах
Типовые графические элементы Web‑страниц
Введение
Визуальное представление позволяет осуществлять наиболее быструю передачу информации, обеспечивая также быстрое её восприятие наблюдателем (читателем) как непосредственно, так и с использованием принятых в мировой культуре источников информации (книги, газеты, кино, телевидение, Интернет). Манипулируя цветом, контрастом и символами, можно за долю секунды вызвать у наблюдателя ощущение тепла либо холода, спокойствия или напряженности, а вместе с тем даже передать некоторые сведения. Важную роль в графической передаче информации играют ассоциации – определённые образы, всплывающие в сознании пользователя в моменты, когда он видит некоторые символы или систему графических объектов.
Стиль Интернет-сайта определяется сочетанием текста, графики и активных элементов (формуляры, диалоговые окна, мультимедиа). Существенным является также подбор компонентов, их свойств (размер, цвет) и способов размещения на странице.
Цвета
В настоящее время RGB является самым популярным способом задания цвета и практически в каждой графической программе существует возможность описания цвета этим форматом. Комбинация трёх однобайтовых значений (24 бита) позволяет определить 16,7 млн. цветов (точнее 2 24).
HSL (Hue, Saturation, Luminance, т.е. оттенок, насыщение, яркость) – это палитра красок, определяемых сочетанием не основных цветов (как это имеет место для RGB), а оттенка, насыщения и яркости. Этот условный способ описания цвета намного более интуитивен и близок естественному восприятию цветов человеком. Значительно легче изменить оранжевый цвет на жёлтый, изменяя оттенок, насыщение и яркость, чем подбирать нужное сочетание красного, зелёного и синего.
· CMY, CMYK
Палитра CMY (Cyan, Magenta, Yellow, т.е. сине-зелёный, пурпурный, жёлтый) – ещё один способ определения цвета. Он составляет альтернативу RGB. Палитра CMY, расширенная черным цветом, обозначается CMYK и повсеместно применяется печатающими устройствами.
Безопасная цветовая палитра
Безопасная цветовая палитра – это набор из 216 цветов, общих для всех инструментальных платформ. Каждый из них может быть задан однобайтовым кодом. Их 216 потому, что 8‑битовое определение позволяет задать 256 цветов (2 8). Однако принято, чтобы поле в 40 и цветов было зарезервировано для операционной системы, тогда 216 цветов остаются для применения в прикладных программах пользователей. Картинки, отображаемые на мониторах компьютеров, способных правильно передать 256 цветов (8-битовая графика), отображаются правильно (и предсказуемо) и при условии применения 216 безопасных цветов. Остальные краски передаются как смесь компонентов из безопасной палитры.
Вопрос адекватного отражения цветов имел большое значение несколько лет назад, когда в повсеместном использовании были компьютеры с 8-битовой графической картой. Хорошим тоном считалось применение на Web‑страницах именно безопасного цветового набора. Теперь же мы все пользуемся 24-битовой графикой. Поэтому кажется более целесообразным использовать всю полноту возможностей, представляемых современными компьютерами, и применять на Web‑страницах различные сочетания цветов, в том числе и тех, что выходят за рамки безопасной палитры.
Некоторые форматы записи графики на Web ‑страницах
GIF (GraphicInterchangeFormat – Графический формат обмена) – один из первых графических форматов. Он и сегодня продолжает оставаться самым часто применяемым форматом записи графики и простой анимации для Интернет-сайтов. Формат GIF разработан фирмой CompuServ (онлайновая информационная служба). В 1987 году вышла его первая версия GIF‑87. Дальнейшая работа над расширением возможностей записи изображений увенчалась созданием новой версии GIF‑89а. В этой новой версии появились возможности определения выбранного цвета как прозрачного, чересстрочной загрузки и записи анимации. Важным достоинством формата GIF является его универсальность – на сегодняшний день все Интернет-браузеры поддерживают отбражение картинок в формате GIF.
Графика, записанная в формате GIF, компрессируется с использованием алгоритмов LZW (Lempel-Ziv-Welch). Этот алгоритм безутратной компрессии (сжатия), основанный на устранении избыточности информации, поэтому картинка отображается на 100% в соответствии с оригиналом. Компрессия заключается в отыскании повторяющихся последовательностей точек и записи информации о размерах этой последовательности и месте её начала. Этот способ позволяет значительно снизить размер файлов при записи изображений, имеющих довольно большие одноцветные участки.
GIF‑89а состоит: из заголовка и блоков данных. В заголовке отображаются: версия формата GIF, предпочтительные параметры картинки – высота, ширина, размер палитры, разрешение, цвет фона. Отдельные байты содержат информацию о глобальной цветовой палитре – каждый цвет это 3-байтовое значение, которым задаётся цветовое сочетание RGB. За заголовком следуют контрольные блоки, блоки изображения и дополнительные блоки.
1) В контрольном блоке находится информация о продолжительности экспозиции (времени показа на экране) и способе перехода от картинки к картинке. Формат GIF‑89а позволяет записывать много изображений в одном файле и задавать значения экспозиции и цикличности анимации.
2) Блоки изображения (их может быть несколько, если в файле записана анимация) содержат детальное описание параметров картинки, локальную цветовую палитру (если она отличается от глобальной палитры) и компрессированные данные о последовательностях точек изображения.
3) Дополнительный блок содержит данные, которые не отображаются, например комментарий, связанный с данной картинкой.
Ограничением формата GIF является размер цветовой палитры – максимум 256 цветов, то есть цветовая палитра может иметь размер от 2 1 по 2 8 , или 2, 4, 8, 16, 32, 64, 128 и 256 цветов. На практике это означает, что если на картинке появляется 7 цветов, то при использовании палитры размером 16 цветов часть полей палитры остаётся не задействованными. В этом случае редукция цветовой палитры до величины 8 не приведёт к потере качества, но позволит уменьшить размер файла записи картинки. Операция сужения цветовой палитры – обычная опция записи файла в формате GIF.
Кодировка LZW позволяет воспроизвести компрессированное изображение точно таким, каким оно было до компрессии. Подобные алгоритмы компрессии называются «безутратными», в отличие от «утратных» алгоритмов, которые предполагают потерю части информации об изображении. Сжатие LZW уменьшает размер файла GIF так эффективно, что на практике становится невыгодной дополнительная архивация и компрессия файлов этого типа программами ZIP, ARJи т.п. сжатием изображения занимаются графические программы.
В 1990 году Объединенной группой экспертов в области фотографии (JointPhotographicExpertGroup, JPEG) была предложена схема сжатия, которая впоследствии завоевала всеобщее признание, как стандартный метод обработки неподвижных изображений. JPEG – это алгоритм сжатия изображений. Но общепринятым стало применение названия JPEG к файлам, записанным в формате JFIF (JPEGFileInterchangeFormat). JPEG (или JFIF) – это формат записи изображений, применяемых как на Интернет-сайтах, так и для типографской печати, а также в цифровой фотографии.
Процесс компрессии изображения в формате JPEG идет в несколько этапов:
1) Если нужно, то сначала происходит конвертация данных о точках изображения из системы RGB в систему YCbCr, которая аналогична HSL, позволяет выразить яркость цвета.
2) Уменьшение в два раза ширины шкалы Cb и Cr (свойства цвета) при сохранении оригинальной шкалы яркости Y. Сужение шкалы происходит путём усреднения значений Cb и Cr соседних пикселей.
3) Анализ блоков изображения: 8*8 пикселей. С помощью дискретного косинусного преобразования (ДКП) производится округление значений изменения яркости цвета.
4) Массив данных, которым приближённо описывается оригинальное изображение, может быть подвергнут очередной компрессии (на этот раз безутратной), поскольку в результате округления появилось много одинаковых значений.
Выгодой алгоритма компрессии, применяемого в формате JPEG, особенно ощутим при обработке больших многоцветных изображений (например, фотоснимков). Для малых изображений (иконок) или картинок с преобладанием одного цвета лучше применять формат GIF.
Формат JPEG не поддерживает чересстрочную загрузку, но здесь есть возможность записи файла в прогрессивной форме. Просмотр крупного файла, записанного в прогрессивной форме JPEG, предполагает быстрое отображение картинки худшего качества, постепенное улучшение которого происходит по мере считывания очередных порций файловой информации. Это имеет большое значение для тех, кто публикует фотоснимки, карты и т.п. Быстрый просмотр картинки немного худшего качества даёт возможность решить, стоит ли ожидать дальнейшей загрузки, или можно прервать передачу изображения в браузер.
Формат BMP (Bitmap, Битовая карта) является очень простым способом записи графики для применения в системе Windows.
Вообще, этот формат в Интернете не применяется. BMP – это внутренняя графическая система Windows. В частности, в этом формате записываются «копии экрана». Достаточно нажать клавиши