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

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

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

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

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

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

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

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

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

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

Верстка веб-сторінок

Розділ 2 § 9

Верстка — це процес створення веб-сторінок із попередньо створеного макету дизайну сайта, заздалегідь намальованого за допомогою графічних редакторів

Верстка — це кінцевий етап розробки сайта, створення структури сайта, що буде визначати відображення тексту й графіки на сайті

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

Розрізняють такі верстки веб-сторінок:

«Жорстка» верстка

«Гумова» верстка

Усі елементи веб-сторінки мають завжди фіксовані розміри, незалежно від розміру монітора користувача й установленого дозволу екрана

Дає змогу змінювати розміри елементів сторінки, підлаштовуючись під різні розміри й дозволи моніторів

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

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

HTML-верстка сайта

CSS-верстка сайта

Залежно від основних елементів html, що використовуються у верстці сайта, виділяють:

табличну

блокову

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

HTML-верстка сайту — це верстка сайта на основі мови гіпертекстової розмітки HTML.

Таблична верстка сайту — це верстка, за якої структура сторінки сайту представлена у вигляді таблиці. Кожний елемент сторінки — це одна або кілька комірок таблиці.

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

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

Блокова верстка сайта, або, як її ще називають верстка div’ами, — це верстка сайта на основі елементів <div>. Така верстка має ряд переваг: стислість коду, висока швидкість завантаження коду і т. д.

<div id="blok1"> вміст блоку 1</div>

<div id="blok2"> вміст блоку 2</div>

<div id="blok3"> вміст блоку 3</div>

...

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

Тег <div> - це так званий контейнер (блок), який може містити форматований текст, зображення та ін. Важливою особливістю блоків є їх здатність накладатися один на одного при верстці.

Верстка div активно використовує CSS для гнучкого й зручного форматування елементів веб-сторінок. За допомогою CSS можна з точністю до пікселя задати на сторінці:

розташування блоків

необхідні відступи

колір

розмір шрифтів і багато іншого

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

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

HTML

XHTML

XML

Каскадні таблиці стилів описують зовнішній вигляд сторінок сайту, написаних мовою розмітки:

10�(11)

Характеристики тегу 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. Опишіть етапи верстки веб-сторінки

Верстка веб-сторінок

Розділ 2 § 9

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

10�(11)