Урок 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, у темі листа обов’язково вказуйте прізвище, ім’я та клас.
-
Тема 1. Інформаційні технології в суспільстві.
- Урок 1. Інформація, повідомлення, дані, інформаційні процеси, інформаційні системи як важливі складники й ознаки сучасного суспільства. Сучасні інформаційні технології та системи. Людина в інформаційному суспільстві.
- Урок 2. Проблеми інформаційної безпеки. Загрози при роботі в Інтернеті і їх уникнення.
-
Тема 2. Моделі і моделювання. Аналіз та візуалізація даних
- Урок 8. Основи статистичного аналізу даних. Ряди даних. Обчислення основних статистичних характеристик вибірки.
- Урок 9. Консолідація даних. Зведені таблиці. Інструктаж з ТБ. Практична робота №1 «Консолідація даних. Створення зведеної таблиці»
- Урок 10. Пошук та збір наборів даних. Соціальні аспекти масштабного аналізу даних.
- Урок 11. Розв’язування рівнянь. Розв’язування систем рівнянь, оптимізаційних задач.
- Урок 12. Програмні засоби для складних обчислень, аналізу даних та фінансових розрахунків.
- Урок 13. Візуалізація рядів і трендів даних. Інфографіка.
- Урок 14. Розв’язання задач з різних предметних галузей.
- Урок 16. Побудова математичної моделі задачі. Базові алгоритмічні конструкції.
- Урок 17. Середовище програмування Pascal ABS.Net. Структура програми. Поняття змінної і константи. Типи даних. Поняття операції та виразу. Присвоювання значень виразів змінним. Оператори введення, виведення. Лінійні програми.
- Урок 18. Інструктаж з БЖД. Практична робота № 3. «Складання лінійних програм».
- Урок 19. Умовні оператори. Складання програм з використанням команди розгалуження
- Урок 20. Інструктаж з БЖД. Практична робота №4 «Складання та реалізація програм з використанням команди розгалуження»
-
Тема 3. Системи керування базами даних
- Урок 21. Поняття бази даних і систем керування базами даних, їх призначення.
- Урок 22. Модель «сутність-зв’язок» предметної області.
- Урок 23. Реляційні бази даних, їхні об’єкти. Ключі й зовнішні ключі. Зв’язки між записами і таблицями. Визначення типу зв’язку.
- Урок 24. Створення та відкриття бази даних. Створення таблиць. Введення і редагування даних різних типів.
- Урок 25. Створення форм різних типів. Імпорт даних.
- Урок 27. Впорядкування, пошук і фільтрування даних.
- Урок 30. Розв’язання задач з використання запитів, звітів, форм.
-
Тема 4. Мультимедійні та гіпертекстові документи
- Урок 31. Типи сайтів та їх особливості. Цільова аудиторія.
- Урок 32. Інформаційна структура сайту. Інструменти веб-розробника. План розробки сайту.
- Урок 33. Макет інформаційної структури сайту. Інструктаж з БЖД. Практична робота №8 «Проектування структури сайту».
- Урок 34. Технології опрацювання мультимедійних даних. Мова гіпертекстової розмітки.
- Урок 36. Гіпертекстовий документ та його елементи. Текстові елементи веб-сторінки, теги та їх атрибути. Гіперпосилання
- Урок 37. Таблиці та списки на веб-сторінках.
- Урок 38. Інструктаж з БЖД. Практична робота №9 «Створення веб-сторінки за допомогою мови гіпертекстової розмітки»
- Урок 39. Каскадні таблиці стилів. Стильове оформлення сторінок.
- Урок 40. Позиціювання елементів веб-сторінки за допомогою стилів.
- Урок 41. Інструктаж з БЖД. Практична робота № 10 «Створення веб-сторінки з використанням каскадних аркушів стилю»
- Урок 42. Проектування та верстка веб-сторінок. Адаптивна верстка. Кросбраузерна оптимізація сторінок сайту.
- Урок 43. Графіка та мультимедіа для веб-середовища. Використання зображень у веб-документах.
- Урок 44. Розміщення та відтворення на веб-сторінках мультимедійних даних. Формати аудіо- та відеофайлів.
- Урок 45. Дотримання авторських прав та ліцензій на використання графічних зображень та засобів мультимедіа на веб-сторінках.
- Урок 46. Інструктаж з БЖД. Практична робота №11 «Використання графічних, анімаційних та мультимедійних елементів на веб-сторінках».
- Урок 47. Хостинг сайту. Взаємодія клієнт-сервер.
- Урок 48. Правила ергономічного розміщення відомостей на веб-сторінці. Пошукова оптимізація та стратегії просування веб-сайтів.
- Урок 49. Роль електронних медійних засобів в житті людини. Системи опрацювання аудіо- та відеоінформації.
- Урок 50. Інструктаж з БЖД. Практична робота №12 «Оцінка сайту. Просування сайту».
- Уроки 51-53. Проектна діяльність. Розбиття на групи. Вибір теми проекту. Розробка плану проекту. Робота над проектом. Захист проекту
-
Тема 5. Основи електронного документообігу
- Урок 54. Поняття документу. Призначення та класифікація документів. Документообіг. Загальні правила оформлення документів. Стиль ділового листування. Логічні елементи тексту та порядок його викладення.
- Урок 55. Шаблони та формуляр-зразки документа. Реквізити документа. Правила оформлення сторінки. Інструктаж з БЖД. Практична робота №13 «Використання шаблону та формуляр-зразка документа»
- Уроки 56-57. Оформлення бібліографічних списків та покажчиків. Правила та вимоги оформлення письмової роботи. Інструктаж з БЖД. Практична робота №14 «Оформлення письмової роботи зі створенням бібліографічних списків та покажчиків»
- Уроки 58-59. Системи управління електронними документами. Класифікація офісної техніки. Засоби створення, зберігання, обробки, копіювання і транспортування документів. Інструктаж з БЖД. Практична робота №15 «Створення та пересилання документів»
- Уроки 60-61. Електронний документ, його ознаки та правовий статус. Електронний документообіг. Електронний цифровий підпис. Передавання електронних документів. Зберігання електронних документів. Забезпечення конфіденційності електронних документів. Електронний офіс.
- Урок 62. Підсумковий урок з теми: “Основи електронного документообігу””
0.00 на основі 0 рейтингів