Верстка сайта – что это такое?

Здравствуйте, дорогие друзья!

Многие начинающие веб-разработчики и предприниматели сталкиваются с необходимостью вёрстки сайта. В этой статье мы разберём что такое вёрстка сайта, что входит в это понятие и какой она может быть.

Верстка сайта – что это такое?

Вёрстка сайта – это процесс создания веб страницы с использованием специальных языков разметки и программирования.

Например, если у Вас уже есть готовый дизайн в PSD или другом графическом формате, то его нужно «оживить» — превратить из статической картинки в живой сайт, на котором можно читать и копировать текст, переходить по ссылкам, открывать меню, вызывать всплывающие окна и так далее.
Для вёрстки сайта используются:

HTML – язык разметки, при помощи которого создаётся каркас будущего сайта. Верстаются основные блоки, таблицы, формы и другие элементы.

CSS – каскадные таблицы стилей, которые позволяют задать оформление для всех ранее свёрстанных на HTML элементах страниц. При помощи CSS задаются размеры, цвета, расположение, форма элементов, создаются эффекты при наведении и делается адаптация под мобильные устройства.

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

Вёрстка сайта — это обязательный и один из самых важных этапов разработки сайта. После того как вы или какой то другой специалист сверстает вам страницы эту вёрстку нужно будет «натянуть» на одну из существующих систем управления контентом (CMS) или разработать свою собственную CMS.
Это нужно для упрощения дальнейшего наполнения и администрирования сайта.

Какие бывают типы вёрстки сайта?

На сегодняшний день можно выделить:

• Табличную
• Блочную
• Семантическую
• Резиновую
• Адаптивную
• Вёрстку слоями

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

Как делается вёрстка сайта?

Для того чтобы сверстать сайт достаточно открыть текстовый редактор Блокнот, написать в нём код и сохранить в формате .html. Далее если вы откроете свёрстанную вами страницу в браузере то увидите своё творение в рабочем состоянии. Однако такой способ очень неудобен и малоэффективен.

На сегодняшний день используются такие способы вёрстки:

1. 1.При помощи специальных редакторов кода, такие как Notepad++, Sublime Text, Atom, Coda и другие. Их преимуществом является то что там реализована подсветка кода, то есть все название тегов, классов, свойств, значений выделены разными цветами и вам значительно легче ориентироваться в таком коде + если вы написали какой то тег с ошибкой, то подсветка для него не сработает и вы увидите что с ним что то не то и нужно искать ошибку именно там. Так же для таких редакторах есть множество различных дополнений для работы с файлами по FTP прямо на хостиге, сохранения и быстрой вставки заготовок кода и так далее.
   

   Этот способ используют большинство веб-разработчиков, так как он наиболее надёжный.

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

   Примеры визуальных конструкторов:

   • Adobe Muse
   • Creato
   • Mobirise и другие.
   
3. 3.Онлайн визуальные конструкторы. Принцип их работы такой же, как и рассмотренных выше, но их не нужно устанавливать на компьютер. Достаточно зарегистрироваться в одном из сервисов и можно уже создавать свою первую веб-страницу.

   Наиболее популярные визуальные конструкторы:

   • Wix
   • Тильда
   • Flexbe
   • Umi и другие.
   
4. 4.Редактирование готовых шаблонов. Это не совсем вёрстка, но такой вариант тоже используется. Допустим вы хотите создать сайт с определённым внешним видом на одной из популярных CMS. Вы можете подобрать наиболее подходящий по внешнему виду готовый шаблон, а затем переделать и доработать его. Для редактирование файлов шаблона лучше использовать редакторы кода, рассмотренные в первом пункте. Разумеется, что для реализации данного способа нужны знания HTML, CSS хотя бы минимальные знания PHP, JavaScript и файловой структуры шаблона используемой CMS.

На этом у меня всё! Если вам тоже есть что сказать по этой теме или какие-то вопросы остались непонятными – оставляйте свои комментарии!
Успехов вам везде и во всём!

С уважением Юлия Гусарь