Что такое верстка сайта, как верстать сайт?

Опубликовано в: Верстка сайта, Новый сайт | 0

Верстка – это один из важнейших этапов создания сайта. В ходе проведения верстки происходит создание структуры html-кода, который позволяет размещать все элементы будущих страниц (текстовое и графическое наполнение и проч.) в окне браузера, опираясь на созданные ранее макет.

Как понять, что верстка произведена грамотно:verstka

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

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

Разновидности верстки

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

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

Главные инструменты любого верстальщика – это фреймы, таблицы и блочные теги. Но стоит отметить, что 5-ый html-стандарт больше не поддерживает фреймы. Для работы с таким кодом используются «семантические» блоки, которые, впрочем, не имеют никаких особых преимуществ перед ранее использовавшимися инструментами.

1.Табличная верстка

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

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

2.Верстка слоями

Слоями принято называть элементы html-кода, внедряющиеся в структуру страницы сайта с помощью наложения друг на друга с соблюдением пиксельной точности. Тег «слой» позволяет показывать или скрывать его содержимое, а также регулировать его положение в браузерном окне. Верстка слоями значительно ускоряет загрузку сайта. С помощью использования разных слоев веб-мастер может создавать на странице всевозможные эффекты. Настраивать слои можно с помощью CSS.

Среди недостатков такой верстки стоит отметить ее сложность. Без глубоких познаний в области CSS, Java и VBScript будет достаточно тяжело добиться хороших результатов. Еще одним подводным камнем является то, что сайт в разных браузерах может отображаться по-разному.

3.Блочная верстка

Такая верстка производится с использованием слоев, представляющих собой достаточно удобные структурные элементы. Создаются они с тегом div. Оформление слоев производится с использованием CSS-таблиц. Только блочная верстка позволяет реализовывать концепцию сематической верстки. Верстальщик, используя такую верстку, уменьшает нагрузку на сервер, за счет чего загрузка блочных страниц производится намного быстрее. Кроме того, блочная верстка позволяет создавать адаптивный и гибкий дизайн. Стоит отметить, что поисковые машины при индексации блочных сайтов в первую очередь скидывают их контент и семантические особенности и только затем код.

Что касается минусов, то здесь следует отметить сложность освоения блочной верстки и ее кроссбраузерность.

4.Верстка с использованием фреймов

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

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

Практическое применение:

Несколько примеров использования блочной верстки на праткике приведу ниже (я использую блочную верстку) — вы можете задать ширину, высоту блока, изменить его характеристики, фон, цвет и размер текста, положение элемента, отступы от соседних элементов и внутренних элементов и многое другое.

Рамка вокруг блока

.example1 {
border: 2px solid black;
}

Фон внутри блока

.example2 {
background: #f2f2f2;
}

Текст по центру

.example3 {
text-align: center;
}

Смена фона при наведении

.example4:hover {
background: #f2f2f2;
}

Тень вокруг блока

.example5 {
box-shadow: 0px 0px 5px black;
}

Размер блока

.example6 {
width: 70%;
height: 160px;
}


Полезный плагин

Если вы вам нужно внести несколько правок в уже имеющуюся WordPress тему — небольшие изменения можно добавить в специальное окно поддерживаемое многими темами, или установив соответствующий плагин Custom CSS, так вы сможете верстать сайт прямо из админки WordPress.