Lection_3_1

1. Верстка web-страниц

Изображения. Часть 1
Титова Ольга Ивановна
Минск, 2017
1

2. Содержание

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

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

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

4. Параметры изображения

src
Фактически – ссылка на изображение (указывается путь, по
которому находится необходимое изображение);
Это может быть просто имя файла, если изображение находится в
том же каталоге, что и сам HTML-документ;
<img src=“fon.jpg”>
Это может быть путь с именем, если изображение находится в
другом каталоге или на сервере;
<img src=“img\fon.jpg”>
4

5. Параметры изображения

alt
Данный
параметр
который
будет
содержит
отображаться,
текст
если
(альтернативный
по
какой-либо
текст),
причине
показать картинку будет невозможно.
Например,
<img src=“img\kot.jpg” alt=“kot image”>
в случае, если изображение kot.jpg нельзя будет отобразить на
странице, вместо него появится надпись «kot image»
Следует помнить, что не все браузеры лояльны к данному
атрибуту, однако для «чистоты» кода он желателен
5

6. Параметры изображения

title
Данный параметр содержит текст, который будет появляться при
наведении на изображение указателя мыши, независимо от того,
отображается оно на странице или нет.
Например,
<img src=“img\kot.jpg” title=“kot image”>
6

7. Параметры изображения

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

8. Пример

top — верхний край объекта
выравнивается по верхнему краю строки
align=“top”
middle — центр объекта выравнивается
по базовой линии строки
align=“middle”
bottom — нижний край объекта
выравнивается по базовой линии строки
align=“bottom”
left — объект выравнивается по левому
краю, при этом возможно обтекание
объекта текстом
align=“left”
right — объект выравнивается по правому
краю, при этом возможно обтекание
объекта текстом align=“right”
8

9. Параметры изображения

border
Данный параметр позволяет задать толщину рамки, обрамляющей
изображение, выраженную в пикселах.
Например,
<img src=“list.jpg” border=“0”> - рамка вокруг изображения будет
отсутствовать
9

10. Пример

Например,
<img src=“img\kot.jpg” title=“kot image” align=“right” border=7>
10

11. Параметры изображения

height
высота используемого изображения в пикселах.
width
ширина используемого изображения в пикселах.
В этом случае используемое изображение будет масштабировано
при отображении на странице до указанных размеров.
Например,
<img
src=“img\kot.jpg”
height=“1000”>
-
изображение,
не
зависимо от своих первоначальных размеров, будет изменено до
1000 пикселов в высоту (качество изображения при этом вполне
может ухудшиться)
11

12. Параметры изображения

hspace
позволяет установить отступ от картинки по горизонтали
vspace
позволяет установить отступ от картинки по вертикали
По умолчанию, текст будет прилегать к изображению вплотную
Например,
<img src=“list.jpg” vspace=“100”> - по вертикали до изображения
и после изображения будет отступ в 100ед.
12

13. Задание

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

14. Стили

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

15. Стили

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

16. Стили

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

17. Например

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

18. Стили

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

19. Например

описание стиля
результат
19

20. Стили

border-width – толщина границы
border-color – цвет границы
border-style – стиль границы
Например,
img {
border-width: 10px;
border-color: #c21e44;
}
задаем толщину линии и цвет линии границы
20

21. Стили

Выравнивание (один из способов):
Тег <img> помещается в тег <p> (<div>), а для тега <p> (<div>)
прописываем
выравнивание
в
стилях
(например,
text-align:
center;);
стили можно применить как отдельно к тегу, так и задать для него
id/class
21

22. Пример

<!DOCTYPE HTML>
<html>
<head>
<title>Рисунок по центру</title>
<style type="text/css">
p.fig { text-align: center;}
</style>
</head>
<body>
<p class="fig">
<img src="sample.jpg">
</p>
</body>
</html>
22

23. Пример

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

24. Задание

Выполните через использование стилей.
1. Создайте HTML-документ.
2. Разместите на странице изображение и задайте ему следующие
атрибуты:
- изображение расположено на странице справа;
- по периметру изображения есть рамка произвольной
толщины;
- задайте рамке произвольный цвет и стиль.
24

25. ВАЖНО

В большинстве случаев не потребуется задавать стиль для самого
тега <img>, т.к. этот объект захватит слишком разносторонние
элементы
веб-страницы
–
логотип,
навигационные
кнопки,
фотографии и т.п.
Наиболее часто используют стилевые классы или селекторы
потомков
25

26. Стили

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

27. Графические форматы

Работаем с тремя графическими форматами:
GIF
JPEG
PNG
Каждый
из
перечисленных
форматов
обеспечивает
хорошее
сжатие
27

28. Графические форматы

GIF
Обеспечивает хорошее сжатие для изображений, в которых есть
области со сплошным цветом;
предоставляют возможность сделать один из цветов прозрачным;
могут включать в себя простую анимацию.
Данные изображения содержат максимум лишь 256 оттенков
Область применения: текст, логотипы, иллюстрации с четкими
краями,
анимированные
рисунки,
баннеры,
изображения
с
прозрачными участками
28

29. Графические форматы

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

30. Графические форматы

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

31. Фоновое изображение

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

32. Фоновое изображение

При указании url его заключать в кавычки не обязательно (т.к. в
данном случае url прописывается в CSS, а не в HTML)
Т.е. все три следующие варианта будут правильными:
background-image: url(images/bg.gif);
background-image: url(“images/bg.gif”);
background-image: url(‘images/bg.gif’);
32

33. Фоновое изображение

Если свойство background-image использовать само по себе, то
фоновый
рисунок
будет
в
зависимости
соотношения
между
размерами страницы и самого изображения повторяться в виде
мозаики.
Для
контроля
над
данной
ситуацией
применяется
свойство
background-repeat
33

34. Стили

background-repeat
Определяет,
размеры
будет
меньше
ли
повторяться
используемой
изображение,
области;
может
если
его
принимать
следующие значения:
repeat – повторяется по вертикали и по горизонтали (по
умолчанию)
repeat-x – повторяется только по горизонтали
repeat-y – повторяется только по вертикали
no-repeat – не повторяется
34

35. Стили

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

36. Стили

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

37. Пример

Изображение по центру web-страницы:
body {
background-image: url(bg_page.jpg);
background-repeat: no-repeat;
background-position: center center;
}
37

38. Стили

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

39. Стили

ВАЖНО:
При задании повторения для фонового изображения начальная
точка (или координата), определяемая свойством background-
position будет определять начальную позицию для повторения
заданного изображения
39

40. Стили

ВАЖНО: ОШИБКИ БРАУЗЕРОВ
К примеру,
Firefox
не
всегда
правильно
устанавливает
вертикальное
позиционирование изображения – при использовании bottom
изображение не всегда появиться в нижней части окна браузера
если основное содержимое меньше по высоте
Как исправить? Задайте высоту: height:100%
40

41. Стили

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

42. Стили

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

43. Стили

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

44. Стили

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

45. Пример

body {
background-image: url(images/logo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}
45

46. Стили

background-color
Может
применяться
устанавливает
совместно
фоновый
цвет;
с
в
фоновым
случае,
изображением;
если
изображение
меньше используемой области, то остальная часть области будет
закрашена указанным цветом.
46

47. Пример

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

48. Задание

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

49. Пример

49

50. Оптимизация

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

51. Оптимизация

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

52. Оптимизация

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

53. Спасибо за внимание

53