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

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

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


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

Читайте также
Выбираем имя для домена
Создание сайтов
29
Выбираем имя для домена

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

Версия сайта для слабовидящих – особенности и способы создания
Создание сайтов
62
Версия сайта для слабовидящих – особенности и способы создания

Что такое версия сайта для слабовидящих? Зачем она нужна? Какие сайты обязаны её иметь, и почему она полезна для коммерческих организаций? Способы разработки и внедрения данного функционала.

Идеальный сайт для бизнеса в 2021 году
Создание сайтов
487
Идеальный сайт для бизнеса в 2021 году

Как превратить сайт компании в источник дохода, а не постоянную головную боль? Мы постарались собрать основные тренды в разработке и продвижении сайтов, которые будут актуальны ближайший год. Статью можно использовать как чек-лист для проверки качества вашего веб-ресурса.

 Нужно ли быть корпорацией, чтобы иметь корпоративный сайт?
Создание сайтов
211
Нужно ли быть корпорацией, чтобы иметь корпоративный сайт?

Почему сайты компаний называют корпоративными? Логичный ответ - потому что они принадлежат корпорации. Так ли это на самом деле? - читайте в нашей статье.