Этапы и типы верстки сайта

Этапы и типы верстки сайта

От автора: у вас есть макет сайта и вам нужно распланировать дальнейшую работу. На какие этапы делится верстка сайта? Попробуем ответить на этот вопрос в сегодняшней статье. Она ориентирована на новичков.

Работа головой

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

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

Работа с макетом

Значит, посмотрели на макет, осмыслили суть. Теперь нужно вырезать из него все необходимое, что может пригодиться: иконки, картинки и прочую графику. Неплохо будет также записать шрифты, которые используются в макете. Для работы нужно использовать PhotoShop или GIMP. Именно эти редакторы поддерживают работу со слоями.

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

Рис. 1. Работа с макетом.

Верстка

Для начала вам нужно создать два файла: html и css. В одном у вас будет содержание и разметка, в другом – стили. Очевидно, что верстать будет легче, если придерживаться порядка. Например, начать с прописывания базовых вещей в теге head. Здесь следует указать кодировку, путь к таблице стилей, title и т.д.

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

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

Сначала верстальщик пишет структуру в html. Заодно он сразу вешает элементам классы и идентификаторы, чтобы позднее стилизовать их в css. Нормальный верстальщик должен придумывать адекватные имена классов. Например, menu, head, widget и т.п. Чтобы было понятно, что это за элемент.

Например, когда я только начинал, мой код наверняка мог рассмешить любого. В нем присутствовали такие имена классов, как: verh_sayta, konec и bok. Конечно, это лучше, чем block1, block3, block459, но выглядит как-то непрофессионально и не совсем понятно, о каком именно элементе речь.

Стилизация

Структура написана, идентификаторы и классы заданы. А это означает, что можно начинать использовать CSS. Я бы даже сказал, что необязательно полностью прописывать структуру и только после этого трогать стили. Можно и даже нужно работать параллельно. В какой-то момент вы полностью закончите структуру и полностью сосредоточитесь на стилях. (а может и нет, все зависит от того, насколько правильно получится все написать изначально).

Дальнейший процесс верстки сайта в основном будет происходить с помощью css-файла, в котором вы прописываете нужные свойства и правила. Сколько это может занять времени? Зависит от вашего профессионализма. Я видел людей, которые за час верстали приличный одностраничник. При этом он был адаптивным и имел анимационные эффекты. Профессионал может сверстать простую страницу минут за 20.

Это возможно, если использовать по максимуму готовые решения. Например, в фреймворке Bootstrap все уже давно стилизовано, вам просто нужно добавлять нужные стилевые классы к своим элементам.

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

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

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

Скрипты

Верстальщик должен уметь работать с JavaScript-библиотеками. С их помощью задается различное поведение для веб-страниц. Пример: адаптивное меню. При уменьшении окна, допустим, до 500 пикселей, меню должно свернуться в одну кнопку. При клике на нее должен раскрываться вертикальный список (к примеру). Все это реализуется с помощью JavaScript.

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

Проверка

Допустим, ваша верстка готова. Осталось проверить ее. Естественно, с первого раза невозможно все сделать, поэтому наверняка вы еще не раз откроете файлы для редактирования. Стоит проверить верстку во всех браузерах, которые у вас есть. Можно использовать онлайн-сервисы. Также полезно будет воспользоваться инструментами для проверки, которые предлагаются в этой статье.

Рис. 2. Проверка верстки в валидаторе от W3C.

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

Верстка сайта для начинающих

Прямо сейчас научитесь верстать сайты с нуля.

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree