Лекция 5. Адаптивная верстка HTML-документа_часть 2

5.2. Вставка изображений и альтернативного текста. Установка фона

808.50K

Категория:

Интернет

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

Создание веб-сайтов

Что такое веб-страница? Создание веб-сайтов. 11 класс

Создание веб-сайтов

Современные веб-технологии CSS3

Современные веб-технологии

Создание веб-сайтов

Создание веб-сайтов. Веб-сайты и веб-страницы

Основы CSS. Оформление дизайна сайта по технологии веб-программирования CSS

Интернет-технологии

1. Интернет-технологии_5

Плахотникова Мария Александровна, к.э.н., доцент, доцент
кафедры информационных систем
1

2. Лекция 5. Адаптивная верстка HTML-документа_часть 2

Лекция 5. Адаптивная верстка HTMLдокумента_часть 2
5.2. Вставка изображений и альтернативного
текста. Установка фона
5.3. Табличная вёрстка
2

3. 5.2. Вставка изображений и альтернативного текста. Установка фона

Фон элемента может быть:
• сплошного цвета (color);
• изображением (image);
• градиентом (linear-gradient или radialgradient);
• Комбинация (background-blend-mode).
Свойство background-image – цвет и
изображение
Свойство background-color – сплошная
фоновая заливка
3
div {
background-color: #b2b2b2
}
div {
background-image: url("alert.png");
}
div {
background: linear-gradient(to right,
#ff0000, #0000ff);
}

4. 5.2. Вставка изображений и альтернативного текста. Установка фона

4
Свойство background-blend-mode — это режим смешивания
фоновых слоёв.
Свойство background-blend-mode
Некоторые режимы смешивания
Пояснения
normal
значение по умолчанию, фоны не смешиваются, верхний слой
остаётся непрозрачным
overlay
смешивание background-color с background-image, чтобы отразить
светлые или тёмные участки фона
multiply
перемножение background-image и background-color, обычно это
приводит к получению более тёмного изображения, чем исходное
color
создание цвета с оттенком и насыщенностью исходного цвета и
яркость нижележащего цветового фона

5. 5.2. Вставка изображений и альтернативного текста. Установка фона

Пример применения свойства background-blend-mode
div {
width: 300px;
height: 400px;
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
url(https://html5book.ru/wp-content/uploads/2016/12/paleimage.jpg);
background-blend-mode: overlay;
}
5

6. 5.2. Вставка изображений и альтернативного текста. Установка фона

Пример 1
div {
width: 300px;
height: 400px;
background-image: url(https://html5book.ru/wp-content/uploads/2016/12/pale-image.jpg),
linear-gradient(45deg, #f8a261, #6e9fc9);
background-blend-mode: overlay;
}
Пример 2
div {
width: 300px;
height: 400px;
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
linear-gradient(135deg, #08526b, #fbcd7c),
url(https://html5book.ru/wp-content/uploads/2016/12/paleimage.jpg);
background-blend-mode: overlay, color;
}
6

7. 5.2. Вставка изображений и альтернативного текста. Установка фона

Повторение фона
Свойство backround-repeat
Значения свойства backround-repeat:
7
Позиционирование фона
По умолчанию – левый верхний угол
Свойство background-position
• repeat
Ключевые слова: top, right, bottom, left
• repeat-x
div {
background-image: url("alert.png");
Background-position: 20px 10 px;
Background-repeat: no-repeat;
}
• repeat-y
• no-repeat
• space
• round
div {
backround-image: url("alert.png");
backround-repeat: no-repeat;
}

8. 5.3. Табличная вёрстка

Создание таблицы
Элементы таблицы в HTMN
<table>
<tr>
…
<table> - таблица
</tr>
<tr> (table row) – строка таблицы
<tr>
<td> (table data) – данные таблицы
…
<th> (table header) – заголовок таблицы </tr>
</table>
8
<!DOCTYPE HTML>
<html>
<head>
<title>Тег TABLE</title>
</head>
<body>
<table border="1" width="100%"
cellpadding="5">
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
</body>
</html>

9. 5.3. Табличная вёрстка

Атрибуты тега <table>
1. align
2. bgcolor
3. border
4. cellpadding
5. cellspacing
6. cols
7. rules
8. width
9

10. 5.3. Табличная вёрстка

Атрибуты тега <td>
1. align. Возможные значения: left —- выравнивание по левому краю,
center — по центру и right — по правому краю ячейки.
2. bgcolor
3. colspan
4. height
5. rowspan
6. valign
7. width
10

11. 5.3. Табличная вёрстка

Выравнивание таблиц
атрибут align тега <table>
11
<!DOCTYPE HTML>
<html>
<head>
<title>Выравнивание таблицы</title>
</head>
<body>
<table width="200" bgcolor="#c0c0c0" cellspacing="0"
cellpadding="5" border="1" align="right">
<tr><td>Содержимое таблицы</td></tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.</p>
</body>
</html>

12. 5.3. Табличная вёрстка

Объединение ячеек
Атрибуты colspan и rowspan
тега <td>
12
<head>
<title>Объединение ячеек</title>
</head>
<body>
<table border="1" cellpadding="4" cellspacing="0">
<tr>
<td rowspan="2">Браузер</td>
<th colspan="2">Internet Explorer</th>
<th colspan="3">Opera</th>
<th colspan="2">Firefox</th>
</tr>
<tr>
<th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0
</th>
</tr>
<tr align="center">
<td>Поддерживается</td>
<td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да
</td>
</tr>
</table>
</body>

13. 5.3. Табличная вёрстка

13
Заголовок таблицы
<head>
<meta http-equiv="Content-Type" content="text/html;
Специальный тэг <caption>
charset=utf-8">
<title>Заголовок таблицы</title>
По умолчанию заголовок сверху таблицы по центру, его
ширина не превышает ширины таблицы и в случае длинного </head>
<body>
текста он автоматически переносится на новую строку.
<table width="100%" border="1" cellpadding="4"
Изменение положения заголовка - атрибут align для тэга cellspacing="0">
<caption>Изменение добычи ресурсов по
<caption>
годам</caption>
<tr>
Значения атрибута align:
<th> </th><th>2022</th><th>2023</th><th>2024</th>
• left
</tr>
<tr>
• right
<td>Нефть</td><td>43</td><td>51</td><td>79</td>
</tr>
• center
<tr>
• top
<td>Золото</td><td>29</td><td>34</td><td>48</td>
</tr>
• bottom
<tr>
<td>Дерево</td><td>38</td><td>57</td><td>36</td>
</tr>
</table>
</body>

English Русский Правила