Проектування та верстка �веб-сторінок

Модуль «Веб-технології»

Урок 10

​

Повторюємо

1. Що таке каскадні таблиці стилів? Назвіть причини їхньої появи.
2. Опишіть синтаксис CSS-правила.
3. Що таке селектор? Які бувають селектори?
4. Наведіть пріоритети виконання таблиць стилів.
5. Опишіть способи підключення стилів.

Етапи створення сайту�

Загальне планування

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

Трохи історії

Веб-сторінки спочатку були просто набором тегів. Елементи відображалися в тому порядку, в якому записувалися в HTML-коді. Щоб візуально розділити інформацію, використовувалися горизонтальні лінії або відступи.

Трохи історії

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

Таблична верстка була дуже популярною на початку 2000-х років. До сьогодні існує досить багато сайтів, які зверстано у вигляді таблиць

• Наразі найпопулярнішим способом верстки є так званий блочний. При цьому використовуються блоки, які або розташовують один під одним, або керують порядком їх відображення за допомогою позиціонування в CSS.

Характеристики тегу div�(від англ. division — розділ, блок)�

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

Приклад використання тега div

Елемент <header> (заголовок)

контейнер, у якому містяться назва сайта, логотип і навігаційна панель.

Логотип найчастіше розташовується у верхньому лівому

кутку веб-сторінки або посередині, залежно від ідеї, макета

Навігаційна панель

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

Нижній колонтитул (footer, підвал)

розташовується внизу веб-сторінки і зазвичай містить інформацію про правовласників, контактні та юридичні дані, посилання на основні розділи сайта (найчастіше дублює основну навігацію), посилання на соціальні мережі, форму зворотного зв’язку та ін.

Модульна сітка

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

Найбільш популярною є модульна сітка 960 Grid System (http://960.gs), яка максимально ділить сторінку на 12, 16 і 24 колонки. За шириною сітка становить максимум 960 пікселів. Такий вибір базується на тому, що на момент створення сітки більшість сучасних моніторів мали роздільність 1024Ч768 пікселів.

Чотири типи навігації

навігація у лівій колонці

навігація у правій колонці

Горизонтальна навігація

Навігація

Mobile First

Поміркуйте

• Який тип навігації наразі є найбільш поширеним. Обгрунтуйте свою думку
• (підказка – пригадайте попередні уроки☺)

• Під час розробки дизайну веб-сторінки використовують фреймворк — програмну оболонку, що дозволяє спростити і прискорити розв’язування типових завдань.
• Найбільш поширеними є фреймворки Bootstrap, Foundation, Material Design Lite.

• Крім готових елементів дизайну (кнопки, форми введення тощо) вони пропонують свою модульну сітку, CSS-сніппети (частина коду, розмітки, яка може неодноразово використовуватися) для вставки елементів у веб-сторінку (кнопок, елементів форм та ін.) і класи розмітки, а так само JS-скрипти для відповідних інтерактивних елементів.
• На основі певного фреймворка можна знайти величезну кількість платних і безкоштовних тем і сторінок, а також розробити власні.

Перегляньте відео

Дайте відповіді на наступні питання

1. Який фреймворк розглядається у відео
2. Що саме дозволяє він робити
3. Наскільки складно, на вашу думку, навчитись працювати з наведеним фреймворком.
4. Які елементи структури сторінки ви впізнали.

​

​

​

​

​

​

​

КОЛІРНА ГАМА

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

Одним зі способів визначення основного кольору в проекті є складання mood board (у перекладі з англійської мови — дошка настрою).

Дошка настрою

Порядок складання mood board такий: потрібно набрати кожен синонім у рядку пошуку по картинках Google та виписати найчастіше повторювані в знайдених зображеннях кольори, — від них залежить візуальне сприйняття проекту користувачем і виклик відповідних почуттів.

Цікаво

• Colormind - це генератор кольорових схем, який використовує штучний інтелект (deep learning). Навчання кольоровим стилям відбувається за рахунок сучасних фотографій, фільмів та мистецтва.Оновлення наборів даних, відбувається щодня «для більшого кольорового натхнення»

Етапи верстання веб-сторінки

Створюють скелет сторінки за допомогою тегів HTML, орієнтуючись на структуру, складену ще на першому етапі. Далі визначають необхідні класи та переходять до написання CSS-стилів.

Заключним етапом є написання JS-скриптів.

Структура проекту

Окремі категорії файлів необхідно поміщати у свої теки:

• картинки в теку images або img,
• css — у теку css,
• javascript — у теку js.

У корені лежатимуть лише index.html і веб-сторінки сайта, або тільки

• index. html,
• веб-сторінки — в окремій теці pages.

Аналізуємо. Обговорюємо

1. Сформулюйте правила структурування й іменування файлів.
2. Які типи макетів веб-сторінок ви знаєте? Які переваги та недоліки вони мають?
3. Опишіть етапи створення сайта
4. Яке місце в дизайні сайта, на вашу думку, посідає колірна гама?
5. Чим корисні фрейворки?
6. Опишіть етапи верстки веб-сторінки

Завдання для самостійного виконання

1. Створіть теку для вашого майбутнього сайта з назвою Site.
2. У створеній теці задайте теки images, css, js.
3. Перенесіть у теку Site файл index.html, модифікований на минулому уроці.
4. У теку сss перенесіть файл style.css.
5. У файлі index.html виправте посилання на файл style.css так, щоб ви могли знайти його у новоствореній теці. Для цього у запису <link rel = "stylesheet" type = "text/css href " = "style.css"> пропишіть шлях до файла наступним чином � href = "css/style.css".
6. Перегляньте отриманий результат у браузері.

Домашнє завдання (на вибір учня)

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

​