Курс Веб дизайн для школярів віком 10-15 років. Онлайн

Створення структури сайту на основі мови верстки HTML, етапи розробки. Основні поняття і термінологія

• Поняття "сайт" і його структура. Професія дизайнер.
• Розробка концепції сайту, виходячи з поставлених завдань, цільової аудиторії, фірмового стилю організації.
• Способи визначення набору сторінок, областей і навігації між ними.
• Види сайтів: прості, корпоративні та креативні сайти, internet-магазини та тестові програми.

Створення основного користувацького конструктиву сайту за допомогою мови верстки HTML і CSS

• Базовий синтаксис HTML. «Тег» як ключове поняття, його атрибути, види. Формування основних принципів роботи з кодом сторінок.
• Розпізнавання HTML-сторінок різними браузерами (Opera, Mozilla, Firefox, Google Chrome). Оформлення коду.
• Створення основної сторінки з текстом. Редагування і способи форматування тексту. Списки та їх види.
• Правила розміщення та налаштування розміру графічних зображень (jpg, gif, png), аудіо та відео на сторінці.
• Таблиця. Регламентування розміщення таблиць та інформації в них (текст, картинки, відео). Об'єднання осередків, створення «гумових» і фіксованих таблиць.
• Форми. Варіанти створення форм. Форми для реєстраційних анкет, пошукових систем, тестових завдань. Інтеграція з базою даних сервера хостингу. Верстка сторінок.
• CSS. Можливості використання каскадних таблиць стилів. Варіанти вбудовування CSS в код HTML.
• Базовий синтаксис правил CSS.
• Види й пріоритети селекторів CSS.
• Медіа-запити, трансформація, переходи та анімація CSS.

Дизайн в середовищі Internet: постановка задач, пошук шляху вирішення. Підвищення ефективності

• Огляд сучасних програм та їх можливостей, які використовуються для створення інтерактивної статичної й динамічної графіки.
• Розробка інформаційної архітектури сайту. Розподіл інформації за розділами сайту з урахуванням інформаційного, логічного та візуального зв'язку між розділами.
• Основні компоненти web-сторінки та способи їх візуального представлення. Інтерфейс сайту.
• Використання різних колірних схем, виходячи з позиціювання сайту.
• Стилі дизайну сайту.
• Ергономіка сайту (web-usability). Фактори, що ускладнюють і фактори, що допомагають правильному сприйняттю інформації на сайті.
• Макетування в web. Ритм. Правила розташування, форма основних навігаційних і графічних компонентів на сторінці (таких як випадають однорівневі та багаторівневі меню, логотипи, інформаційні блоки).

Підготовка графіки для web

• Огляд графічних редакторів для обробки та розміщення на сайті.
• Робота в програмах растрової і векторної графіки.
• Правила створення растрових зображень, оптимізація для web-сторінок, зміна розміру зображення. Промальовування кнопок для «ролловеров».
• Створення банера (анімаційної картинки) на сайт або в середу пошукових систем. Розробка сюжету банера.

Оцінка сайту. Тестування сайту

• Критерії оцінок створеного сайту.
• Етапи стандартного тестування сайту. Вироблення пропозицій щодо редизайну та обґрунтування необхідності редизайну сайту.
• Огляд ресурсів, пов'язаних з питаннями web-дизайну та web-usability.

Розміщення на хостингу — основи роботи

• Правила розміщення на безкоштовних хостингах. Переваги й недоліки.
• Безкоштовні та платні доменні імена. Переваги й недоліки.
• Реєстрація безкоштовного доменного імені та розміщення свого сайту на безкоштовному хостингу.

Практичні проєктні роботи

• Верстка html-сторінки, оформлення елементів за допомогою CSS.
• Обробка піктограм і зображень для сайту. Вставка графічних елементів на сторінку. Створення сайту-візитки. Створення landing сайту. Створення багатосторінкового сайту. Реєстрація безкоштовного доменного імені та розміщення свого сайту на безкоштовному хостингу. Способи просування сайту. Безкоштовна й платна реклама. Використання сервісу Google Analytics для аналізу популярності сайту.