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

Пригадаємо етапи проектування сайтів:

1. Аналіз web-ресурсів суміжної тематики.

2. Попередній аналіз цільової аудиторії.

3. Мета і завдання розроблюваного ресурсу.

4. Постановка завдання (детальний опис).

5. Usability.

6. Проектування.

7. Верстка.

8. Наповнення.

9. Веб-мастерінг.

10. Розміщення.

11. Тестування.

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

Існує 2 способи верстки - таблична (котра була актуальна років 10 тому та блочна, котра будується на основі css).

Якщо верстка це створення веб-сторінки відповідно намальованого дизайну тоді дізнаємось, що це за дизайни. Кожен сайт в своїй структурі має частину котра називається header та в якій відображаються логотипи, меню та зображення котрі характеризують сайт. В основній частині ми можемо мати 1 та більше блоків. Один з середніх блоків містить необхідну інформацію, а інші заповнює відповідно потреб адміністратор сайту. Тут також може бути меню, додаткові віджети, реклама, тощо. В нижній частині розташовується «підвал – footer» де знаходиться додаткове меню, контактна інформація чи статистика сайту (модним наразі стало додавати стрілку прокручування сторінки вгору в підвалі).

До 2000 року веб розробники користувались звичайним табличним дизайном. Чому? Тому, що не було потреби. Всі в основному монітори були розширенням 1024 на 768. Тому можна було бути впевненим, що сторінка аналогічним чином відображалася б і в користувача.

Наразі існують планшети, ноутбуки, різні монітори до комп’ютера, смартфони та мобільні телефони. І тоді постає питання: «А під яке розширення писати сайт?».

Щоб сайт виглядав коректно використовують адаптивну верстку (гумову, блокову).

Гумова (або блокова) верстка – спосіб опису блоків де розміри задаються не в статичному, а у відсотковому розмірі.

Блоки можна створювати:

• <div id=“Block1”> </div> опис блоку, як ідентифікатор тегу
• <div class=“Block1”> </div> опис як клас
• <div> </div> опис блоку окремим існуючим тегом
• <Block1> </Block1> опис власним тегом

Додамо тег «header». Такий тег існує та спеціально орієнтований на опис блоку.

Розглянемо основні властивості блоку в style.css:

• border: 2px solid black; - вкажемо контур блоку товщиною в 2 пункти та за допомогою solid вкажемо колір.
• width: 60%; - вказуючи ширину у відсотка ми вже робимо адаптивний блок
• background-color: silver; - вкажемо заливку блоку (сірий)
• margin: 10px; - дана команда означає зовнішній відступ блоку у пікселях
• padding: 5px; - відступ внутрішній у всередині блоку (те як текст буде відступати від рамки блоку).
• border-radius: 15px; - заокруглення кутів блоку

Спробуємо додати решту блоків (лівий, правий, основний та підвал).

Якщо аналогічним чином описати блоки то ми можемо спостерігати, що ширина не встановлюється для них. Тому правильніше буде описувати блоки ідентифікаторами або класами.

Для скорочення програмного коду можна аналогічні налаштування описати для тегів чи ідентифікаторів вказавши їх через кому.

Окремі команди ми можемо описати окремо. Наприклад ширина блоків. Бокові будуть по 20% від ширини екрану та центральний 40%. Після опису ми бачимо, що місця вистачає і логічно, що блоки мають вибудуватись в рядок. Але кожен блок на початку має налаштування статичного розташування.

Для зміщення блоків потрібно вказати команду floar: left;. Таке розташування потрібно, щоб було і в решти блоків (не тільки центральних). Якщо це не зробити то блоки «наїдуть» один на одного.