Что такое верстка сайта

Верстка сайта - это один из этапов создания интернет-страниц, процесс написания программного кода, описывающего внешний вид ресурса и размещение элементов на странице. Делается это с помощью специальных языков гипертекстовой разметки (HTML), таблиц стилей (CSS) и языка программирования JavaScript (для написания сценариев обработки информации). Если проще - верстка преобразует нарисованный дизайнером проект в реальную страницу.

С помощью языка HTML создается структурная сетка страницы, в которую вписываются все остальные элементы дизайна. Без HTML ни один сайт существовать не может.

Каскадные таблицы стилей CSS структурируют все форматы оформлений на одном конкретном сайте, помогают не утонуть в многообразии шрифтов и вида оформления разных деталей дизайна. Представляют собой список заголовков всех уровней, текстов и т.п. с описанием как они должны выглядеть.

Язык JavaScript предназначен для создания динамического изменения вида веб-страниц. Например, если кликнуть мышкой на меню, открывается еще одно меню или при выборе фильтра меняется перечень элементов - все это делается на JavaScript.

Для чего нужна верстка сайта

Верстка нужна, чтобы создать сайт. Если у вас будет программный код вашего ресурса и дизайн-проект, но не будет выполнена верстка, то сайта существовать не будет.

Существует два варианта выполнения - ручная и автоматическая с помощью конструктора.

Ручная применяется в том случае, если вы создаете сайт с уникальным внешним оформлением, разработанным дизайнером. А автоматический вариант предлагает использование разного рода конструкторов. Там HTML-код формируется без вашего вмешательства. Конечно, автоматическое формирование кода не самый лучший способ, но он имеет свои преимущества.

Как происходит разработка проекта

Представьте себя на месте веб-разработчика. Мы рассмотрели и примерно поняли, как формируется страница с определенным дизайном. Давайте попробуем взглянуть “изнутри” на процесс разработки.

Итак, у нас должен быть макет дизайн-проекта в графической программе (чаще всего это Photoshop), чтобы приступить к верстке. Естественно, речь идет о профессиональной разработке.

Берем макет, формируем из него отдельные части дизайна и дальше нам необходимо написать программу.

Писать код просто в текстовом редакторе руками очень неудобно и ненаглядно. Обычно для этого используют специальную программу Notepad++, Sublime Text и пр. В этих приложениях удобно набирать текст, видеть открывающий и закрывающий теги, подсветка помогает видеть структурированный код и легче читать его.

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

После завершения наступает момент объединения кода движка ресурса и сверстанного дизайн-проекта. И только после этого сайт считается полностью созданным. Но давайте чуть подробнее рассмотрим, каким образом можно сверстать проект.

Виды верстки

Программисты и верстальщики применяют разные типы и подходы к верстке, но в итоге они получают одну и ту же картину - созданный ресурс. Какая же есть разница в этих типах?

Первый и самый старый вид - фиксированный

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

Усовершенствованный вид - резиновый. Из самого названия понятно, что ресурс сверстанный таким способом будет растягиваться и сжиматься на разных мониторах и в разном размере окон. Работа станет удобнее, но проблемы с очень маленькими мониторами телефонов и с большими экранами телевизоров все равно остаются. В этом случае страдает удобство чтения информации.

Новый вид верстки - адаптивный

Не так давно появился современный способ - адаптивная верстка. Чем она отличается от остальных? Правильно, при адаптивной верстке сайт автоматически адаптируется под то устройство, размер окна или монитора, на котором его открывают.

Это означает, что на каком бы устройстве вы не открыли такой сайт, то вы увидите приятные для восприятия размеры шрифтов, никаких полос прокрутки или растянутых текстов. Сейчас 70-80% пользователей заходят на сайты с помощью планшетов, смартфонов и других мобильных устройств, поэтому если вы хотите привлекать на ресурс как можно большую аудиторию, то адаптивная верстка для вас необходимость.

Так как это еще не самый распространенный тип, то специалистов, хорошо делающих такую верстку не так много. При выборе специалистов обязательно просите примеры уже выполненных работ и оценивайте качество по тому, как отображаются проекты на разных устройствах.

Адаптивная верстка сложнее, чем резиновая, и, тем более, фиксированная, но стоит поискать специалистов и даже заплатить дороже, но получить современный сайт, который будет привлекать посетителей, а не будет отталкивать неудобным видом и навигацией.

Обращайтесь в нашу веб-студию - мы сделаем качественную адаптивную верстку сайта!