Презентація: "Графіка для веб-середовища"

Графіка для веб-середовища

Фотографії, рисунки, фонові малюнки — все це візуальні елементи веб-дизайну. Саме від них залежить зовнішній вигляд сайта, а також швидкість його завантаження.

Основні формати графічних файлів у веб-дизайніGIFJPEGPNGSVG 

Формат JPEG (Joint Photographic Experts Group), JPG— це 16-бітовий формат растрових зображень, популярний для зберігання цифрових фотографій, які мають дрібні деталі та яскраві кольори. Зображення у форматі JPEG швидко завантажуються. Проте JPEG не підтримує прозорість, і його не має сенсу використовувати для логотипів і піктограм.

Формат GIF (Graphic Interchange Format) GIF— формат, обмежений 256 кольорами, тому абсолютно не підходить для цифрових фотографій із тисячами відтінків. Проте дуже ефективний для зберігання логотипів, піктограм, таблиць. Підтримує прозорість зображення та дозволяє створювати різноманітну анімацію.

Формат PNG (Portable Network Graphic) PNG—зручно використовувати для простого й плоского графічного дизайну. PNG дозволяє працювати із прозорістю, проте він не підтримує анімацію. Зазвичай цей формат використовують для публікації невеликих картинок, логотипів, іконок, діаграм, графічних елементів із прозорістю, фотографій без втрати якості

Формат SVG (Scalable Vector Graphics) SVG— найбільш поширений векторний формат. Розмір об'єктів SVG набагато менше розміру растрових зображень, а самі зображення не втрачають в якості при масштабуванні. Формат SVG чудово підходить для малокольорових схем, логотипів і іконок.

Все більше веб-дизайнерівпристають до думки, щорастрові зображення повинні використовуватися лише для фотографій. За своєю суттю будь-який сайт — це інтерфейс, і всі інтерфейси мають бути векторними. Саме тому безумовну популярність набуває використання векторного формату SVG

Тег для вставки зображення Елемент є стандартним тегом для додавання графічних елементів на веб-сторінку. Цей тег додає зображення на сторінку в тому місці, де воно має з’явитися. Тег є непарним тегом. Обов’язковим атрибутом є src (англ. source — джерело), який містить шлях до зображення. Зазвичай зазначається або URL-адреса, або відносна адреса.

Стандарт розробки сайтів Рекомендується створювати окрему теку з назвою «images», в якій зберігаються всі зображення, що містяться на веб-сторінках сайта. Тег відображає зображення лише графічних форматів. GIF, JPG, PNG і SVG ( та Web. P)В атрибуті обов’язково має вказуватися розширення

Другий (рекомендований) атрибут тега – 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; } widthstylecolor

Значення border-styleborder-style: none; (відсутні рамки)

Відступиpadding — внутрішні відступи між зображенням та рамкою;margin — задає відступи від зображення від усіх чотирьох країв; Можна задавати відступ від конкретного краю: margin-top — відступ від верхньої сторони;margin-right — відступ від правого боку; margin-bottom — відступ від нижньої сторони;margin-left — відступ від лівого боку. Аналогічно можна задавати внутрішні відступи:padding-top, padding-left, padding-right, padding-bottom