Графіка для веб-середовища
Фотографії, рисунки, фонові малюнки — все це візуальні елементи веб-дизайну. Саме від них залежить зовнішній вигляд сайта, а також швидкість його завантаження. �
Основні формати графічних файлів у веб-дизайні�
Формат JPEG �
(Joint Photographic Experts Group), або JPG, — це 16-бітовий формат растрових зображень, популярний для зберігання цифрових фотографій, які мають дрібні деталі та яскраві кольори. Зображення у форматі JPEG швидко завантажуються. Проте JPEG не підтримує прозорість, і його не має сенсу використовувати для логотипів і піктограм. �
�Формат GIF
(Graphic Interchange Format) —формат, обмежений 256 кольорами, тому абсолютно не підходить для цифрових фотографій із тисячами відтінків. Проте дуже ефективний для зберігання логотипів, піктограм, таблиць. Підтримує прозорість зображення та дозволяє створювати різноманітну анімацію (тема 18 уроку☺)�
�Формат PNG
(Portable Network Graphic) —зручно використовувати для простого й плоского графічного дизайну. PNG дозволяє працювати із прозорістю, проте він не підтримує анімацію. Зазвичай цей формат використовують для публікації невеликих картинок, логотипів, іконок, діаграм, графічних елементів із прозорістю, фотографій без втрати якості �
Цікаво
WebP - новий графічний формат, розроблений у 2010 році компанією Google з використанням нового алгоритму стиснення і спрямований на зменшення обсягу при збереженні якості.
Особливості WebP:
Наразі підтримується браузерами Chrome, Opera та Firefox
JPG 44 Кб
WebP 26 Кб
Формат SVG �
(Scalable Vector Graphics) — найбільш поширений векторний формат. Розмір об'єктів SVG набагато менше розміру растрових зображень, а самі зображення не втрачають в якості при масштабуванні. Формат SVG чудово підходить для малокольорових схем, логотипів і іконок.
Цікаво
Все більше веб-дизайнерів�пристають до думки, що�растрові зображення повинні використовуватися лише для фотографій.
За своєю суттю будь-який сайт — це інтерфейс, і всі інтерфейси мають бути векторними. Саме тому безумовну популярність набуває використання векторного формату SVG �
Приклад SVG-анімації
https://bashooka.com/coding/30-mindblowing-examples-of-svg-animation/
�
Тег <img> для вставки зображення
Елемент <img> є стандартним тегом для додавання графічних елементів на веб-сторінку.
Цей тег додає зображення на сторінку в тому місці, де воно має з’явитися.
Тег <img> є непарним тегом.
Обов’язковим атрибутом є src (англ. source — джерело),�який містить шлях до зображення. Зазвичай зазначається або URL-адреса, або відносна адреса щодо місця�розташування веб-сторінки, яка містить посилання на�зображення. ��
Стандарт розробки сайтів �
<img src="images/2.jpg">
Тег відображає зображення лише графічних форматів�GIF, JPG, PNG і SVG ( та WebP).
В атрибуті обов’язково має вказуватися розширення
Другий (рекомендований) атрибут �тега <img> – alt (alternative)
Вказується альтернативний текст — опис зображення для тих випадків, коли користувачі не можуть побачити картинку (наприклад, мають вади зору) – тоді використовується скрін-рідер, який читає описи зображень ��Атрибут alt має надати достатньо інформації користувачеві, щоб він склав уявлення про те, що є на зображенні .
Довжина альтернативного тексту не повинна перевищувати 255 символів.�
CSS-властивості зображень �
Розмір зображення задається двома параметрами:
width —ширина зображення;
height — висота зображення. �
Достатньо задати один з атрибутів - інший буде обчислюватися автоматично для збереження пропорцій малюнка.
�Ширину й висоту зображення можна задавати як у пікселях (при цьому розмір картинки буде постійним незалежно�від роздільності екрану), так і у відсотках — тоді розмір картинки залежатиме від роздільності екрана користувача �
Необхідно знати
Якщо не задавати розміри зображення:
Якщо зазначити розміри зображення, то браузер спочатку зарезервує місце під зображення, підготує макет документа, відобразить текст і лише потім завантажить зображення. �
Зображення можуть бути квадратними або прямокутними. Якщо ми використовуватимемо обидва параметри, браузер помістить зображення в прямокутник виділеного розміру, навіть якщо його реальні ширина й висота більші (стисне) або менші (розтягне) ��
Параметр border�
дозволяє створити рамку для зображення.�можна налаштовувати ширину та колір і стиль рамки за допомогою відповідних параметрів:�• border-width;�• border-color;�• border-style.�Додатково можна налаштовувати
ці властивості для кожної�сторони:�• top (верхня),�• left (ліва),�• right (права),�• bottom (нижня).
Можна прописати всі властивості однією командою
border: 4px groove orange;
div { width: 100px;
height: 100px;
border: 2px solid grey;
}
width
style
color
Значення border-style
Відступи
padding — внутрішні відступи
між зображенням та рамкою;�margin — задає відступи від зображення від усіх чотирьох країв;
Можна задавати відступ від конкретного краю:
Аналогічно можна задавати внутрішні відступи:�padding-top,
padding-left,
padding-right,
padding-bottom �
КОД HTML
КОД CSS
Відображення у браузері
ПРИКЛАД
<style type="text/css">
</style>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег STYLE</title>
<style type="text/css">
…..
</style>
</head>
<body>
</body>
</html>
Поміркуйте
На наступному слайді перегляньте два скріншоти веб-сторінки, встановіть відповідність між двома кодами і їх відображенням у браузері, поясніть зміни.
a
б
?
?
Завдання для самостійного виконання
Створіть сторінки, на яких відображатимуться графічні об’єкти, аналогічно наведеним на слайді. Результат надішліть ВИКОРИСТОВУЮЧИ ФОРМУ ЗДАЧІ ПРАКТИЧНИХ РОБІТ вчителю. �
Завдання для самостійного виконання
Створіть сторінку, на якій відображатимуться графічні об’єкти, аналогічно наведеним на слайді. Результат надішліть ВИКОРИСТОВУЮЧИ ФОРМУ ЗДАЧІ ПРАКТИЧНИХ РОБІТ вчителю. �
Аналізуємо. Обговорюємо
Домашнє завдання
ФОТОГРАФІЯ
ФОТОГРАФІЯ
ФОТОГРАФІЯ
Роботу надіслати за допомогою форми здачі.