ОСНОВИ WEB-ДИЗАЙНУ

Кількість годин (кредитів ЄКТС): 150 (5)

Мета навчальної дисципліни: набуття студентами навичок створення сайтів за допомогою HTML та CSS.

 Результати навчання за навчальною дисципліною:

У результаті вивчення навчальної дисципліни студент повинен створити власний сайт за допомогою HTML та CSS.

знати:

– правила побудови документів HTML;

– основні властивості каскадних таблиць стилів;

– основні елементи об’єктної моделі браузера.

 вміти:

 розробляти сайти та організувати їх роботу, підтримувати та адмініструвати їх;

– адмініструвати Web-сервери та забезпечувати їх захист;

– розробляти та ефективно застосовувати графічне оформлення сайтів;

– ставити та ефективно реалізовувати технічні завдання з розробки Web-сайтів.

 Зміст дисципліни (тематика):

Короткий огляд браузерів. Поняття про WEB-сервер, web-сайт і web-сторінку. Цілі і завдання мови HTML. Створення HTML-документа. Типи тегів. Правила оформлення HTML-документа. Структура HTML-документа. Поняття атрибут (параметр) тега.

Теги фізичного форматування “strong”, “b”. Особливість пробілів, коментарі в документі, символи підстановки. Розмітка HTML-документа “p”, “br”, горизонтальна лінія “hr”, заголовки “h1” – “h6”.

Списки. Структурування інформації на WEB-сторінці за допомогою списків. Типи списків: маркований, нумерований, список визначень, вкладені списки (багаторівневі).

Посилання. Тег “a”. Організація посилань, посилання на інші ресурси, внутрішні посилання.

Кольорові моделі. Способи задавання кольорів для елементів веб-сторінки.

Вставка зображення на web-сторінку. Формати файлів. Розміщення графічних зображень на сторінці. Альтернативний текст. Зміна розмірів зображень. Атрибути тега “img”: ширина, висота. Карти посилань.

Таблиці. Для чого використовують таблиці. Об’єднання комірок таблиці. Форматування таблиці, рядків, комірок. Промальовування внутрішніх і зовнішніх ліній таблиці. Відображення порожніх клітинок у таблицях. Заголовки таблиць.

Фрейми. Створення фреймів. Гіперпосилання у фреймах. Стильове оформлення фреймів. Плаваючі фрейми.

Форми. Форми. Навіщо потрібні форми. Елементи форм. Теги “form”, “input” (checkbox, radio, submit, reset, image), “select”, “textarea”. Стильове оформлення елементів форм.

Елемент полотно (canvas) для малювання. Відео (video) і аудіо (audio) елементи для програвання фільмів і музики

Покращена підтримка для локального оффлайн сховища

Нові специфічні елементи контенту, наприклад, article – стаття, footer – нижній колонтитул (підвал), header – заголовок (заголовок), nav – навігація, section – розділ

Нові елементи управління форми, наприклад calendar – календар, date – дата, time – час, email – електронна пошта, url – адреса, search – пошук

Каскадні таблиці стилів CSS. Специфікація CSS. Основні цілі і завдання CSS. Способи додавання стилів на WEB-сторінку. Вбудований, впроваджений, пов’язаний стилі. Види селекторів. Селектори тегів. Класи. Ідентифікатори. Контекстні, сусідні, дочірні селектори. Селектори атрибутів. Універсальні селектори. Псевдокласи. Псевдоелементи. Групування. Унаслідування.

Оформлення тексту в CSS (шрифти, міжрядкова відстань, поля, відступи, абзаци). Спецсимволи. Види шрифтів. Особливості застосування різних видів шрифтів. Стильове оформлення. Одиниці вимірювання шрифтів. Фонові зображення, рамки, ефект «rollover» та ін. Форматування списків за допомогою CSS.

Робота з шарами (блоками). Тег DIV. Створення і наповнення шарів (блоків). Переповнення, обрізка шару, управління видимістю шару. Відносне й абсолютне позиціонування. Порядок накладення: властивість z-index. Приклади позиціонування: накладення блоків, закріплення “підвалу” внизу сторінки.

Блочна верстка веб-сторінок. Кросбраузерність і валідність коду. Основні види макетів. Способи макетування веб-сторінки.

Огляд HTML-редакторів.

Розміщення web-сайта на сервері. Реєстрація доменного імені сайту. Поняття і типи хостингу.

Види робіт: лекційні заняття, практичні заняття, модульні контрольні роботи, самостійна робота студентів.