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

Процес верстки – один з найважливіших етапів створення інтернет-ресурсу, оскільки від роботи верстальника залежить:

• швидкість завантаження веб-сайту;

• відповідність стандартам HTML;

• адекватність відображення в браузері;

• відповідність вимогам пошукових систем;

• адаптивність під різні екрани користувача.

ВАЛІДНІСТЬ ВЕРСТКИ

Поняття верстки тісно переплітається з поняттям валідності. Верстка веб-сайту – написання HTML і CSS коду, який відповідає стандартам W3C і успішно проходить тест на валідаторі (валідний код – гарантія того, що верстальник не допустив логічних і синтаксичних помилок при програмуванні). Сторінка навіть з незначними помилками в коді не пройде через валідатор. Слід пам’ятати, що кращий валідатор – браузер, оскільки сприйняття сайту браузером – це сприйняття сайту відвідувачем. Використання різних CMS, модулів і готових скриптів, вставка вмісту різних форматів часто не дає змоги досягти валідності.

БАЗОВІ ПРАВИЛА ВЕРСТКИ САЙТУ:

• Верстка обов’язково повинна враховувати кросбраузерність та роздільну здатність різних екранів, починаючи від 1024 на 768;

• Верстка сторінок сайта повинна обов’язково повинна пройти валідацію;

• Зовнішній вигляд зверстаних сторінки повинен по максимуму відповідати дизайну;

• CSS стилі повинні бути винесені в окремий документ. В HTML коді допустимо тільки присутність ідентифікаторів і класів;

• Логотип веб-сайту повинен бути посиланням на головну сторінку;

• HTML сторінки повинні містити коментарі до основних елементів, таким, як меню, заголовок, шапка, контент, футер і т.п.

• Імена ідентифікаторів і класів повинні відповідати призначенню і бути зрозумілими інтуїтивно ( menu , footer , header і т.д.);

• У таблицях стилів рекомендується використовувати однакові одиниці виміру для всіх величин;

• Написи на кнопках повинні бути написані однією мовою і або прописними буквами, або починатися з великої;

• Кнопки повинні мати стандартне оформлення;

• HTML і CSS код повинен бути мінімізований;

• Заголовки повинні бути написані виключно за допомогою спеціальних тегів h1, h2 і т.д;

• Атрибути всіх тегів повинні бути укладені в лапки.

ОСНОВНІ ПІДХОДИ ДО ВЕРСТКИ САЙТУ

Припустимо, що існують два блоки, що стоять поруч. Існує кілька основних підходів до верстці сайту:

Фіксована верстка. При зміні розміру вікна браузера блоки не поміняють свою ширину, а на моніторах з низьким дозволом екрану з’явиться смуга прокрутки.

Гумова верстка. Залежно від розміру вікна браузера, блоки змінять свою ширину.

Адаптивна верстка. Втілюється в життя завдяки різним скриптам і пристосована під певні роздільні здатності.

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

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

СПОСОБИ ВЕРСТКИ САЙТІВ

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

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

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

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

ЗАПИШІТЬ В ЗОШИТ

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

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

Основні підходи до верстки: фіксована, “гумова”, адаптивна, чуйна, версія для мобільних пристроїв.

Способи верстки сайтів: HTML-верстка, таблична верстка, CSS-верстка, блокова (каскадна) верстка.

Базові правила верстки:

• кросбраузерність та адаптивна роздільна здатність;

• валідність сторінок;

• відповідність до дизайну;

• CSS в окремому файлі, в HTML коді тільки ідентифікатори і класи;

• логотип містить посиланням на головну сторінку;

• HTML сторінки містять коментарі до основних елементів;

• імена ідентифікаторів і класів відповідають призначенню і зрозумілі інтуїтивно;

• одиниці виміру у CSS-таблицях однакові для всіх величин;

• кнопки мають стандартне оформлення і підписані однією мовою;

• HTML і CSS код повинен бути мінімізований;

• заголовки написані виключно тегами h1, h2 і т.д;

• атрибути усіх тегів написані в лапках.