Создание сайтов
07.10.2020
157

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

Что значит сверстать сайт? Это означает перевести графическое изображение на язык программного кода. Чтобы понять, что это такое, щелкните правой кнопкой мышки по полю любого сайта и выберите из меню «Просмотр кода страницы». Вместо графики и текста вы увидите набор знаков. Если присмотреться, то текст здесь всё-таки есть, но он разбавлен множеством символов - HTML-тегов.

Разметка контента с помощью html тегов позволяет “описать словами” шрифты, расположение текста и изображений. Это своеобразный язык, который понятен интернету.

Неправильная верстки дизайна приводит к сбою - текст может «поехать», фотографии растянуться, шрифт стать меньше или больше. Чистый код без ошибок нравится поисковым системам. Например, если заголовки просто выделены жирным шрифтом, а не тегами H1, H2, то поисковик не отличит их от остального текста. Поэтому этот этап web-разработки так важен для продвижения ресурса в топ выдачи по запросу.

Что делает верстальщик ?

Получив макет, он определяет стили, которые выносит в отдельный файл. Графическая часть (значки, картинки, кнопки) вырезается из файла PSD или Figma. Создает блоки для контента, шапку, правое, левое меню, подвал. Указывает кодировку, title. Затем переносит контент внутрь каркаса.

Качественная верстка веб сайтов должна отвечать следующим требованиям:

  1. Кроссбраузерность - когда ресурс корректно отображается во всех браузерах (Google Chrome, Яндекс, Firefox, Internet Explorer). Протестировать необходимо все возможные разрешения от 1024×768.
  2. Внешний вид соответствует дизайну.
  3. Переход по ссылке на главную страницу нажатием на логотип.
  4. Заголовки и подзаголовки отмечаются специальными тегами
  5. Все идентификаторы, классы должны соответствовать их назначению, быть легко узнаваемыми (например, «header» или «footer»).

Чтобы не возникло проблем с отображением элементов, все теги должны быть закрытыми, то есть прописанными в <> (кавычках).

Виды верстки

Наиболее распространён сегодня блочный тип. Тег <div> определяет точные размеры и параметры контейнеров с разным содержанием. Главное преимущество такого подхода – это оптимизация под различные экраны: при просмотре web ресурса на смартфоне появляются вертикальные полоски прокрутки.

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

Иногда верстают слоями: части кода html накладывают друг на друга точно, вплоть до пикселя. Слои изменяют с помощью языков программирования JavaScript или VBScript. Главное достоинство метода - реализация анимационных эффектов без снижения скорости загрузки.

Инструменты верстальщика

Как сверстать страницу быстро и без ошибок? Для этого разработано множество инструментов. Работа происходит преимущественно в таких редакторах, как Notepad++, Adobe DreamWeaver, Sublime Text, Visual Studio Code, Atom. Webstorm - интегрированная среда разработки (IDE) с автодополнением и рефакторингами для JavaScript, TypeScript. Для обработки графических элементов пригодятся Photoshop, Krita.

Для тестирования используют программы Crossbrowsertesting, Dr Watson, Validator.w3, CSS Validator, Markup Validator, IE Tester.

HTML код - “изнанка” любого веб ресурса. И хотя её никто не видит, от мастерства верстальщика напрямую зависит, как будет выглядеть сайт для пользователя.

Понравилась статья? Поделись с друзьями!
Aibulat

Автор статьи

​АЙБУЛАТ ДАВЛЕТБАЕВ​

Project менеджер


Комментариев нет, будьте первым!

Читайте также
Что такое промо-сайт?
Маркетинг
27.10.2020
8
Что такое промо-сайт?

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

Что нужно уметь, чтобы создать сайт
Создание сайтов
19.10.2020
37
Что нужно уметь, чтобы создать сайт

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

Стоимость рекламы в интернете
Интернет-реклама
28.09.2020
351
Стоимость рекламы в интернете

Сколько будет стоить реклама в Яндекс.Директе, Google AdWords и социальных сетях? В статье описаны ключевые моменты, которые влияют на стоимость рекламы в интернете. Всё, что вы хотели узнать о расходах на рекламные кампании: система ценообразования, способы оплаты, отчетные документы.



Принципы разработки web дизайна
Дизайн и креатив
21.09.2020
235
Принципы разработки web дизайна

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