Составить конспект о работе с изображениями в разметке HTML.. Пракчическое задание 2 ответ на вопрос 2. Конспект о работе с изображениями в разметке html
 Скачать 26.01 Kb.
|
|
Задание № 2 Составить конспект о работе с изображениями в разметке HTML. Изображения являются важной составляющей дизайна сайтов. Поговорим сначала о форматах графических изображений, используемых для оформления web-страниц. Форматы графических файлов. Широкое распространение для веб-графики получили два формата — GIF и JPEG. Их многофункциональность, универсальность, небольшой объем исходных файлов при достаточном для сайта качестве, сослужили им положительную службу, фактически определив их как стандарт веб-изображений. Есть еще формат - PNG, который также поддерживается браузерами при добавлении изображений и популярен тем, что так же, как и формат gif поддерживает прозрачность изображения. Формат GIF. GIF (Graphics Interchange Format) — формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения. Особенности: Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры; Файл в формате GIF может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет проглядывать сквозь «дыры» в изображении; Поддерживает покадровую смену изображений, что делает формат популярным для создания баннеров и простой анимации; Использует свободный от потерь метод сжатия. Область применения: Текст, логотипы, иллюстрации с четкими краями, анимированные рисунки, изображения с прозрачными участками, баннеры. Формат JPEG. JPEG (Joint Photographic Experts Group) — популярный формат графических файлов, широко применяемый при создании сайтов и для хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может внести искажения в рисунок, особенно содержащий текст, мелкие детали или четкие края. Формат JPEG не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пиксели заполняются определенным цветом. Особенности: Количество цветов в изображении — около 16 миллионов, что вполне достаточно для сохранения фотографического качества изображения; Основная характеристика формата — качество, позволяющее управлять конечным размером файла; Поддерживает технологию, так называемый прогрессивный JPEG, в котором версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения. Область применения: Используется преимущественно для фотографий. Не очень подходит для рисунков содержащих прозрачные участки, мелкие детали или текст. Формат PNG-8. PNG-8 (Portable Network Graphics) — формат по своему действию аналогичен GIF. Использует улучшенный формат сжатия данных. Особенности: Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своем названии цифру восемь. При этом можно выбирать, сколько цветов будет сохраняться в файле — от 2 до 256; В отличие от GIF, не отображает анимацию ни в каком виде. Область применения: Текст, логотипы, иллюстрации с четкими краями. Формат PNG-24 PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8, сохраняет детали изображения, как, например, в линейных рисунках, логотипах, или иллюстрациях. Особенности: Использует примерно 16,7 млн. цветов в файле, из-за чего этот формат применяется для полноцветных изображений; Поддерживает многоуровневую прозрачность, это позволяет создавать плавный переход от прозрачной области изображения к цветной, так называемый градиент; Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пикселы в изображении неизменными, если сравнивать с другими форматами, то у PNG-24 конечный объем графического файла получается наибольшим. Область применения: Фотографии, рисунки, содержащие прозрачные и полупрозрачные участки, рисунки с большим количеством цветов и четкими краями изображений. Адресация в HTML. Существуют два способа задания URL-адреса: абсолютный и относительный. При относительной адресации путь указывается от того каталога, в котором хранится исходный файл. Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта (жесткого диска). Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках. Итак, пусть у нас есть изображение (foto.jpg), которое где-то лежит на Вашем жёстком диске. Копируем его в ту папку, где уже лежит заготовка будущей HTML-страницы. Для того чтобы вставить её в нашу страничку, к ней нужно указать путь:
Тег foto.jpg - это имя файла Вашего изображения. В данном случае, так как файл рисунка лежит рядом с html-документом, путь к нему мы не указываем. Теперь рассмотрим ряд примеров, где путь указывается:  - такая запись подразумевает, что в Вашей папке, где расположен html-документ, есть папка pics, в которой находится нужный графический файл foto.jpg; - значит, рядом с документом расположена папка pics, в ней еще одна папка – jpg, и уже в ней - нужный нам графический файл foto.jpg; - изображение размещено на уровень выше от документа (в нашем случае - просто в папке Мир Интернет); - соответственно, на два уровня выше (в нашем случае - просто на Рабочем столе), таким образом, сколько поставите ../, на столько уровней и подниметесь.При абсолютной адресации используется полный путь, т.е. с указанием протокола, сервера, каталога и страницы. То есть, если перед адресом добавляется упоминание протокола http (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер. Например, можно указывая место фотографии, ссылаться на тот или иной интернет ресурс -  Атрибуты тега Поговорим о расположении изображений относительно текста. Уже знакомый нам атрибут align - выравнивание применим и к данному тегу:
Поговорим немного о пикселах. Пиксел - это элементарная неделимая единица изображения. Каждый пиксел имеет свои координаты, например, самый верхний левый пиксел на мониторе имеет координаты x=1, y=1, а самый нижний правый - в зависимости от разрешения монитора (например, x=800, y=600 - будет соответственно при разрешении 800 на 600 точек). Все расстояния в графических изображениях измеряются пикселами, то есть картинка длинной 800 пикселов и шириной в 600 пикселов при указанном разрешении заполнит весь экран. Теперь продолжим знакомиться с атрибутами тега vspace - задаёт расстояние по вертикали от рисунка до текста, в данном случае мы задали расстояние в 15 пикселей: hspace - расстояние по горизонтали соответственно  ;width - ширина непосредственно самого изображения ;height - высота изображения . Если атрибуты width и height не использовать, то ширина и высота изображения по умолчанию будет равна реальным её размерам, без каких либо искажений;border - бордюр, рамка вокруг изображения и её толщина в пикселях ;bordercolor - это цвет рамки изображения ;alt - это описание изображения. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенном в браузере показе картинок или во время их загрузки. Такой текст появляется раньше самого изображения и дает представление об его содержании. Затем зарезервированное пустое поле заменяется картинкой. Если навести курсор на рисунок и подержать его там несколько секунд, выскочит соответствующая надпись. ;title - не все браузеры отображают альтернативный текст в виде всплывающей подсказки. Поэтому для ее создания используйте также атрибут title: .Изображение можно сделать фоном страницы, для этого используем атрибут background открывающего тега . Вот так:
Полезные советы: Используя графику, будьте осторожны - не стоит размещать на своей странице слишком объемные изображения. Большой объём графики при низкой скорости интернета может привести к тому, что посетитель закроет Вашу страницу ещё до того, как она загрузиться. Помните, что есть пользователи, которые в своём браузере отключают загрузку рисунков, а посему обязательно подписывайте всю графику (атрибуты alt и title), чтобы человек с отключенной графикой мог ориентироваться на Вашей странице. Используя картинку в качестве фона документа дублируйте ее заливкой фона каким-либо подходящим для фона страницы цветом (атрибут bgcolor тега ), например, вот так: Это будет значить, что если к примеру не загрузится Ваша изысканная зелёная текстура, фон будет просто зелёным - что лучше, нежели чем белый цвет в общем дизайнерском решении сайта. |