Що таке верстка сайту?

2

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

Визначення верстки сайтів

Щоб почати свій екскурс у світ веб-технологій нам, перш за все, необхідно розібратися з визначенням. Отже, верстка сайту — що це таке?

Якщо говорити простою мовою, то це процес створення веб-сторінок з допомогою спеціальних мов, які саме для цього і призначені. Для цієї справи використовується HTML, CSS і JavaScript. Останній є одним з мов програмування і дозволяє писати веб-сценарії, в перші два дозволяють повністю сформувати сторінки майбутнього сайту, розмістивши на них потрібне зміст і оформивши його належним чином. Насправді, нічого складного в цьому немає, як думають деякі.

HTML – це мова розмітки гіпертексту.

З його допомогою формується сама структура, каркас сайту. Відповідно, без HTML верстка просто неможлива!

Далі нам потрібно розібратися з тим, що являє собою другу мову – CSS. Розшифровується ця абревіатура так – cascade style sheets. Тобто, каскадні таблиці стилів. Якщо ви новачок, то навряд чи щось зараз зрозуміли. Але давайте спробуємо пояснити простими словами. CSS – це все, що пов’язано з оформленням сторінки.

Наприклад, в HTML ми можемо створити абзаци, таблиці, блоки, так і все, що захочемо. Але все це буде виглядати дуже непоказно. Для оформлення каркаса і створення по-справжньому красивого шаблону нам потрібен CSS. Отже, питання: «Що таке верстка сайту?», я сподіваюся, у вас відпав. Принаймні, вам стало зрозуміліше.

Ну а що таке JavaScript? «Чому ви про нього нічого не розповідаєте?», — справедливо запитаєте ви. Як вже говорилося раніше, це мова програмування і він дуже активно застосовується у верстці. Напевно ви не раз бували на сайтах, де при певних діях відбуваються певні речі. Наприклад, при кліці на меню вилазить додатковий блок, наведення на елемент змінює його зовнішній вигляд або при перемиканні кнопок змінюється вміст показується в якомусь контейнері. Все це дуже корисні речі, але реалізувати їх на чистому HTML і CSS неможливо.

Отже, JavaScript потрібен веб-розробникам для написання сценаріїв (тобто вказівки браузеру, що, коли і як зробити з веб-сторінками нашого сайту при певних умовах).

Суть верстки

Відмінно, з визначенням ми благополучно розібралися. Але для чого потрібна верстка сайту?

Питання, звичайно, логічне, особливо для новачка. Відповідь на нього неймовірно проста – для того, щоб створити сайт. Ну а як ще? Звичайно, всі верстають по-різному. Наприклад, сьогодні популярні так звані конструктори, в яких ви можете створити свій проект без знання будь-якої мови. Але ж у цьому випадку ви, по суті, просто віддаєте написання коду машині. Програма сформує код сама, слідуючи вашим вказівкам. Звичайно, якість від цього може постраждати, тому що людина в будь-якому випадку може написати краще, коротше і красивіше.

Як створюється сайт?

Раніше ви вже могли дещо прочитати про те, які мови застосовуються у верстці і для чого вони потрібні. Але давайте подивимося на сам процес трохи ближче. Уявімо себе на місці веб-розробника. Отже, щоб приступити, вам потрібний макет сайту, зробленого дизайнером в фотошопі. Звичайно, якщо ми говоримо про професійну роботу. Для навчання і тренування вам необов’язково мати макет, а можна просто зверстати примітивну сторінку, яку потім поступово прикрашати й доводити до більш гарного стану.

Припустимо, макет у нас є. Далі нам потрібна програма, в якій будемо писати код.

Деякі можуть робити це прямо в блокноті, але це, мабуть, дуже важкий і незручний варіант. Краще використовувати спеціальні програми. Їх досить багато. Наприклад, Notepad++, SublimeText, DreamVeawer та інші. Докладно ми їх розглядати не будемо, але функціонал цих програм дозволяє значно прискорити процес написання коду навіть для початківця. У деяких редакторах є підсвічування тегів, стилів, що дуже зручно.

Що таке верстка сайту?

Рис1. Верстка сайту в Notepad++

Макет маємо, програма є. Можна приступати до роботи.

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

Які бувають види верстки?

Нам залишилося розібратися ще з одним питанням для отримання більш-менш явною картини. Виявляється, верстати можна по-різному.

Як саме? По-перше, є фіксована верстка. Це коли розміри сайту жорстко прописуються в стилях (як правило, у пікселях). Таким чином, при зміні розмірів вікна сторінка ніяк не змінюється, її розміри залишаються незмінними. Це означає, що на маленьких екранах з’явиться смуга прокрутки, а на великих все може виглядати дрібно. Це основний мінус фіксованих розмірів. З плюсів можна відзначити простоту такого способу. Техніка фіксованого верстки набагато простіше інших.

Що таке верстка сайту?

Рис. 2. Горизонтальний скрол при зменшенні вікна – явна ознака фіксованих розмірів

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

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

А що таке адаптивна верстка сайту?

О, тут ми підійшли до самого сучасному, просунутому і складного способу створення шаблону. Насправді достатньо слова «адаптивний», щоб почати розуміти, що відбувається з такою сторінкою.

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

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