Інформатика

Безкоштовно

Ніхто не записаний

Урок 43. Графіка та мультимедіа для веб-середовища. Використання зображень у веб-документах.

Тема уроку: “Графіка та мультимедіа для веб-середовища. Використання зображень у веб-документах.”

Пригадаємо основні вимоги до власного сайту:

  • інформацію подавати у зрозумілій та стислій формі;
  • інформація відповідає тематиці сайту;
  • інформація чітко структурована;
  • новігація проста і зрозуміла;
  • читабельний шрифт;
  • колірна палітра враховує правила колористики.

Прочитай!

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

Основні формати графічних файлів у веб-дизайні (запишіть у зошит)

  • GIF
  • JPEG
  • PNG
  • SVG 

Тег <img> для вставки зображення

Елемент <img> є стандартним тегом для додавання графічних елементів на веб-сторінку. Цей тег додає зображення на сторінку в тому місці, де воно має з’явитися. Тег <img> є непарним тегом.

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

Стандарт розробки сайтів

Рекомендується створювати окрему теку з назвою «images», в якій зберігаються всі зображення, що містяться на веб-сторінках сайта.

<img src=”images/2.jpg”>. Тег відображає зображення лише графічних форматів GIF, JPG, PNG і SVG.

CSS-властивості зображень

Розмір зображення задається двома параметрами:

  • width —ширина зображення;
  • height — висота зображення.

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

Ширину й висоту зображення можна задавати як у пікселях (при цьому розмір картинки буде постійним незалежно від роздільності екрану), так і у відсотках — тоді розмір картинки залежатиме від роздільності екрана користувача.

Параметр border – дозволяє створити рамку для зображення. Можна налаштовувати ширину та колір і стиль рамки за допомогою відповідних параметрів:
• border-width;
• border-color;
• border-style.
Додатково можна налаштовувати ці властивості для кожної сторони:
• top (верхня),
• left (ліва),
• right (права),
• bottom (нижня).

Виконай:

  • Визначте тему власного сайту. 
  • Підберіть матеріал для наповнення сайту.
  • Особливу увагу зверніть на зображення, які будете розміщувати на власний сайт, вони повинні бути хорошої якості, врахуйте їх розмір, особливо, якщо зображення має відображатися на всю ширину екрану.
  • Завантажте сайт https://startbootstrap.com/.
  • Ознайомитись із шаблонами на сайті (для кращого перегляду шаблонів обираємо потрібний, відкриваємо його в новій вкладці та переглядаємо всі його елементи).
  • Обираємо шаблон для власного сайту. Зверніть увагу, що деякі шаблони складаються з кількох сторінок, деякі з однієї, а також враховуйте, що всі зображення на шаблоні згодом будуть замінені зображеннями, які відповідають темі вашого сайту.
  • Завантажуємо потрібний шаблон (кнопка Frea Download).
  • У власні папці розпаковуємо завантажений архів.

Якщо під час виконання практичного завдання у вас виникли запитання, звертайтесь за електронною адресою mariiia.pronchuk@gmail.com, у темі листа обов’язково вказуйте прізвище, ім’я та клас.

 

 

 

 

0.00 на основі 0 рейтингів

5 зірок
0%
4 зірок
0%
3 зірок
0%
2 зірок
0%
1 зірок
0%