Верстка макетов

Процесс написания html и css — кода для веб-страницы.

Верстка макетов

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

Как это работает?

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

При верстке веб-страниц можно выделить два основных метода:

  • Табличная верстка раньше была основной. Преимущество верстки с помощью таблиц заключается в ее простом исполнении и практически одинаковом отображении в разных браузерах. Недостатки – сложная и объемная структура, которая в разы увеличивает количество кода. Чтобы изменить табличную верстку нужно затратить большое количество времени и усилий, долго вникать в уже существующую структуру. На сегодняшний день продолжают верстать сайты табличной версткой, но профессионалы уже давно перешли на более гибкую - блочную. Табличную верстку рекомендуют использовать только для отображения таблиц.
  • Блочная верстка является основной в среде веб-разработчиков. В блочной верстке каркас документа состоит из тегов div. Главным ее преимуществом является концепция семантической верстки, т. е. разделение содержимого и оформления.
  • Обычно сайт разрабатывают в несколько этапов. Собирают информацию, рисуют дизайн и пишут текст, а затем верстают и программируют. Сначала дизайнер работает с внешним видом, создает макет сайта, затем передает исходники разработчику.

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

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

    Что нужно знать?

    Несмотря на первоначальную идею HTML, поведение посетителей предопределило развитие и появление этих направлений, всё это случилось потому что красивое внешнее оформление привлекает пользователя в первую очередь. Создатели браузера Netscape самыми первыми осознали эту простую истину и начали усиленно изменять внешний вид сайтов, которые показывал их браузер. Однако, такие нововведения не были приняты в стандарт, хоть это никак почти и не влияло, ведь более 90% пользователей пользовались именно этим браузером.

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

    Что в итоге?

    За последние 15 лет принципы верстки и создания сайтов изменились в корне. В то время интернет еще не был столь развит, а цель сводилась к тому, чтобы вообще создать хотя бы что-то рабочее - без багов, ошибок и понятное для пользователя. За последние 2-4 года бизнес начал массово переходить в интернет.

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

    Задайте свой вопрос

    Задайте свой вопрос

    Если у вас остались вопросы, вы можете: