Lection_3_1 презентация

Содержание

Содержание Вставка изображения в HTML-документ Параметры изображения Параметры изображения через стили Фоновое изображение Оптимизация использования изображений

Слайд 1Верстка web-страниц
1
Изображения. Часть 1


Титова Ольга Ивановна
Минск, 2017

Слайд 2Содержание
Вставка изображения в HTML-документ
Параметры изображения
Параметры изображения через стили
Фоновое изображение
Оптимизация использования изображений

Слайд 3Вставка изображения
Для вставки в документ изображения используется тег
Данный тег является

одинарным.

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



Слайд 4Параметры изображения
src
Фактически – ссылка на изображение (указывается путь, по которому находится

необходимое изображение);

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

Это может быть путь с именем, если изображение находится в другом каталоге или на сервере;


Слайд 5Параметры изображения
alt
Данный параметр содержит текст (альтернативный текст), который будет отображаться, если

по какой-либо причине показать картинку будет невозможно.
Например,
“kot
в случае, если изображение kot.jpg нельзя будет отобразить на странице, вместо него появится надпись «kot image»

Следует помнить, что не все браузеры лояльны к данному атрибуту, однако для «чистоты» кода он желателен



Слайд 6Параметры изображения
title
Данный параметр содержит текст, который будет появляться при наведении на

изображение указателя мыши, независимо от того, отображается оно на странице или нет.
Например,





Слайд 7Параметры изображения
align
Данный параметр позволяет управлять расположением изображения. Он может принимать следующие

значения:
выравнивание по вертикали
top – ориентирование к верхнему краю;
middle – ориентирование по центру;
bottom – ориентирование к нижнему краю;
выравнивание по горизонтали
left – изображение сдвинуть к левому краю;
right – изображение сдвинуть к правому краю.

Слайд 8Пример
top — верхний край объекта выравнивается по верхнему краю строки
align=“top”

middle —

центр объекта выравнивается
по базовой линии строки
align=“middle”


bottom — нижний край объекта выравнивается по базовой линии строки
align=“bottom”

left — объект выравнивается по левому краю, при этом возможно обтекание объекта текстом align=“left”

right — объект выравнивается по правому краю, при этом возможно обтекание объекта текстом align=“right”

Слайд 9Параметры изображения
border

Данный параметр позволяет задать толщину рамки, обрамляющей изображение, выраженную в

пикселах.

Например,
- рамка вокруг изображения будет отсутствовать



Слайд 10Пример
Например,




Слайд 11Параметры изображения
height
высота используемого изображения в пикселах.
width
ширина используемого изображения в пикселах.
В

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

Слайд 12Параметры изображения
hspace
позволяет установить отступ от картинки по горизонтали
vspace
позволяет установить отступ от

картинки по вертикали

По умолчанию, текст будет прилегать к изображению вплотную

Например,
- по вертикали до изображения и после изображения будет отступ в 100ед.



Слайд 13Задание
Создайте HTML-документ.
Разместите на странице изображение и задайте ему следующие атрибуты:
- изображение

расположено на странице справа;
- по периметру изображения есть рамка произвольной толщины;
- при наведении на изображение мыши появляется небольшое тестовое сообщение;
- изображение по вертикали имеет визуально заметный отступ.



Слайд 14Стили
В CSS нет свойств, специально предназначенных для форматирования изображений, однако вполне

можно для стилизации графики использовать некоторые из существующих

Слайд 15Стили
border – описывает рамку вокруг изображения; задается с указанием трех параметров

через пробел: толщина рамки, цвет и стиль; последовательность данных параметров не имеет значения;

Например,
img { border: 5px red solid;}
/ вокруг изображения сплошная рамка красного цвета толщиной в 5 пикселей


Слайд 16Стили
Стиль рамки может быть следующим:
- solid – сплошная линия;
- dotted –

пунктирная линия;
- dashed – штриховая;


Слайд 17Например
img
{
border: 10px red dashed;
}
заданное изображение обрамлено красной штриховой рамкой толщиной в

10 пикселов

Слайд 18Стили
border-top – можно задать только верхнюю часть рамки (со всеми тремя

параметрами)
border-bottom – можно задать только нижнюю часть рамки (со всеми тремя параметрами)
border-left – можно задать только левую часть рамки (со всеми тремя параметрами)
border-right – можно задать только правую часть рамки (со всеми тремя параметрами)
Например,
img { border-top: 5px red solid;}
/ сверху изображения сплошная рамка красного цвета толщиной в 5 пикселей



Слайд 19Например
описание стиля
результат

Слайд 20Стили
border-width – толщина границы
border-color – цвет границы
border-style – стиль границы

Например,
img {
border-width:

10px;
border-color: #c21e44;
}
задаем толщину линии и цвет линии границы


Слайд 21Стили
Выравнивание (один из способов):
Тег помещается в тег (), а

для тега

(

) прописываем выравнивание в стилях (например, text-align: center;);
стили можно применить как отдельно к тегу, так и задать для него id/class




Слайд 22Пример




Рисунок по центру


p.fig {

text-align: center;}











Слайд 23Пример
В данном примере класс fig добавляется к селектору p, а способ выравнивания определяется свойством text-align.

Положение рисунка относительно текста схематично показано на рис. -→

Слайд 24Задание
Выполните через использование стилей.
Создайте HTML-документ.
Разместите на странице изображение и задайте ему

следующие атрибуты:
- изображение расположено на странице справа;
- по периметру изображения есть рамка произвольной толщины;
- задайте рамке произвольный цвет и стиль.


Слайд 25ВАЖНО
В большинстве случаев не потребуется задавать стиль для самого тега ,

т.к. этот объект захватит слишком разносторонние элементы веб-страницы – логотип, навигационные кнопки, фотографии и т.п.

Наиболее часто используют стилевые классы или селекторы потомков


Слайд 26Стили
Кроме того к изображениям можно применять следующие CSS-свойства, с которыми мы

будем работать более подробно немного позже:

Padding – добавляет пустой промежуток между границей и изображением (внутренние отступы)
Float – перемещение изображения к левому\правому краю с эффектом обтекания изображения другим контентом (плавающее изображение)
Margin – добавляет пустой промежуток между изображением и другим содержимым страницы (внешние отступы)


Слайд 27Графические форматы
Работаем с тремя графическими форматами:
GIF
JPEG
PNG

Каждый из перечисленных форматов обеспечивает хорошее

сжатие


Слайд 28Графические форматы
GIF
Обеспечивает хорошее сжатие для изображений, в которых есть области со

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

Данные изображения содержат максимум лишь 256 оттенков

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

Слайд 29Графические форматы
JPEG
Изображения могут содержать миллионы различных цветов;
используют для сжатия изображений специальные

алгоритмы, учитывающие то, как человеческий глаз воспринимает смежные значения цветов;
поддерживает технологию «прогрессивный JPEG», когда до полной загрузки изображения появится его более низкокачественный вариант;
не поддерживает прозрачность;

Область применения: преимущественно для фотографий

Слайд 30Графические форматы
PNG

Рациональность использования зависит от версии:
PNG8 – хорошая замена для форматов

GIF, т.к. алгоритм сжатия лучше, не поддерживает анимацию
PNG24 и PNG32 предлагают расширенную цветовую палитру, но добавляют «вес»; при этом PNG32 имеет 256 уровней прозрачности (альфа-прозрачности)



Слайд 31Фоновое изображение
background-image
позволяет установить в качестве фона изображение
Например,
div
{
background-image: url(fon_image.jpg);
}
Для отдельного блока (тег

…
) на html-странице установит фоновое изображение fon_image.jpg, которое размещено в том же каталоге, что и сама страница.

Слайд 32Фоновое изображение
При указании url его заключать в кавычки не обязательно (т.к.

в данном случае url прописывается в CSS, а не в HTML)

Т.е. все три следующие варианта будут правильными:
background-image: url(images/bg.gif);
background-image: url(“images/bg.gif”);
background-image: url(‘images/bg.gif’);

Слайд 33Фоновое изображение
Если свойство background-image использовать само по себе, то фоновый рисунок

будет в зависимости соотношения между размерами страницы и самого изображения повторяться в виде мозаики.

Для контроля над данной ситуацией применяется свойство background-repeat

Слайд 34Стили
background-repeat

Определяет, будет ли повторяться изображение, если его размеры меньше используемой области;

может принимать следующие значения:
repeat – повторяется по вертикали и по горизонтали (по умолчанию)
repeat-x – повторяется только по горизонтали
repeat-y – повторяется только по вертикали
no-repeat – не повторяется




Слайд 35Стили
background-position

Определяет начальную позицию фонового изображения в виде горизонтальной и вертикальной координат

посредством трех ключевых слов, точных абсолютных и процентных значений




Слайд 36Стили
Можно работать с двумя наборами ключевых слов.

Управление горизонтальным позиционированием:
left, right, center

Управление

вертикальным позиционированием:
top, center, bottom – по вертикали





Слайд 37Пример
Изображение по центру web-страницы:

body {
background-image: url(bg_page.jpg);
background-repeat: no-repeat;
background-position: center center;
}





Слайд 38Стили


left center


center center






right center
left bottom
center top
... и другие комбинации

Слайд 39Стили
ВАЖНО:

При задании повторения для фонового изображения начальная точка (или координата), определяемая

свойством background-position будет определять начальную позицию для повторения заданного изображения





Слайд 40Стили
ВАЖНО: ОШИБКИ БРАУЗЕРОВ

К примеру,
Firefox не всегда правильно устанавливает вертикальное позиционирование

изображения – при использовании bottom изображение не всегда появиться в нижней части окна браузера если основное содержимое меньше по высоте
Как исправить? Задайте высоту: height:100%





Слайд 41Стили
Точные значения

Кроме того, позиционировать фоновые изображения можно, используя точные значения в

пикселах или em.
В этом случае указываем два значения:
1-е задает расстояние от левой стороны изображения до левого края элемента-контейнера
2-е задает расстояние от верхней стороны изображения до верхнего края элемента-контейнера





Слайд 42Стили
Точные значения

Можно использовать отрицательные значения для достижения определенного визуального эффекта –

но не злоупотребляя

Не нужно использовать отрицательные значения в целях исправления неверно выполненной верстки






Слайд 43Стили
Процентные значения

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

Лучше всего

– проверить на практическом задании, чтобы представить особенность использования %-х значений для данного свойства






Слайд 44Стили
Фиксация изображения

Когда прокручиваем содержимое веб-страницы, то фоновое изображение прокручивается вместе с

контентом.

В ситуациях, когда изображение должно оставаться без прокрутки, нужно использовать свойство background-attachment, которое может принимать два значения scroll и fixed






Слайд 45Пример
body {
background-image: url(images/logo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}






Слайд 46Стили
background-color

Может применяться совместно с фоновым изображением; устанавливает фоновый цвет; в случае,

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





Слайд 47Пример
body
{
background-image: url(img/font.jpg);
background-color:#2b93a6;
background-repeat: repeat-y;
background-position: right;
}
для фонового изображения страницы будет взят файл

font.jpg из папки img;
если изображение по своим размерам будет меньше закрашиваемой области, то остальная часть страницы будет закрашена цветом #2b93a6;
фоновое изображение будет повторяться только по вертикали;
фоновое изображение будет выровнено по правому краю страницы.

Слайд 48Задание
Создайте HTML-документ.
Выберите изображение, повторение фрагмента которого позволило бы создать структурно неделимую

фоновую картинку
Для данного изображение через описание стилей выполните следующее:
- задайте его фоновой заливкой;
- задайте повторение по горизонтали;
- для остальной области (не занятой фоновым изображением) подберите и задайте соответствующий по стилю цвет;
- ориентируйте размещение изображения по нижнему краю страницы.



Слайд 49Пример

Слайд 50Оптимизация
Используемые графические изображения по возможности оптимизируйте перед использованием – а именно:

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

Слайд 51Оптимизация

Если изображение представляет собой повторяющийся орнамент, однородную заливку или нечто подобное,

то не нужно брать его на весь размер закрашиваемого блока html-страницы: возьмите его минимальный фрагмент, повторение которого позволит создать эффект всего изображения и задайте ему параметр повторения (по вертикали, по горизонтали или же по обоим направлениям).

Слайд 52Оптимизация
Если подразумевается просмотр графических изображений большого объема, то предусмотрите первоначальную загрузку

их миниатюр и только по желанию пользователя – возможность просмотреть увеличенный вариант (можно предложить альтернативу загрузки изображения из нескольких ступеней по качеству).

Если поверх изображения будет размещаться текст, то необходимо позаботиться о сохранении читабельности данного текста.

Слайд 53Спасибо за внимание

Похожие презентации

Качество поиска и поиск ближайшего будущего 248
Как разработать собственную инвестиционную стратегию и выбрать инвестиционный фонд 231
Научный стиль 297
Правильная архитектура высоконагруженных решений в Windows Azure 212
Наши проекты в действии 233
Педагогическая мастерская 387

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

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

Для правообладателей

Яндекс.Метрика