Учимся верстать

Часто возникает вопрос, что такое верстка?

Простым языком, верстка – это расположение составных элементов (текста, заголовков, изображений, таблиц) на странице документа.

Верстка бывает следующих видов:

  • Книжная
  • Газетно-журнальная
  • Верстка веб-документов

Описание первых двух опустим и перейдем сразу к верстке веб-страниц.

Чтобы лучше понять, что это такое рассмотрим процесс создания сайта.

Сначала создают дизайн-макет: рисуют каждую страницу и все его элементы. В итоге получают изображение сайта, но это всего лишь «картинка».

Далее, полученный макет нужно отобразить в браузере, да так, чтобы все элементы «ожили» и откликались на действия пользователей. На этом этапе и вступает в работу верстальщик.

Используя язык разметки html, он создает документы, которые понимает браузер и отображает их привычными всем веб-страницами.

Методы верстки

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

  • Табличная верстка
  • Блочная верстка

Табличная верстка раньше была основной.

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

Недостатки – сложная и объемная структура, которая в разы увеличивает количество кода ( по сравнению с блочной).

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

Табличную верстку рекомендуют использовать только для отображения таблиц.

Блочная верстка является основной в среде веб-разработчиков. В блочной верстке каркас документа состоит из тегов

Главным ее преимуществом является концепция семантической верстки, т. е. разделение содержимого и оформления.

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

Именно поэтому, начиная с 2012 года, веб-мастерами стало использоваться решение, делающее просмотр ресурсов на экранах с небольшим разрешением более комфортным, - адаптивная вёрстка.

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

Такой эффект достигается особым написанием CSS-файлов или использованием инструментариев, к примеру таких как Bootstrap


Данную тему я буду развивать дозировано, для тех кто только начинает или хочет начать, пока вы не освоили один урок, бессмысленно переходить к следующему


Урок №1

Для начала:  Есть обалденный сайт-справочник, без которого в свое время я не смог бы написать ни одной строчки кода или прописать стили... поэтому начнеми с азов:  HTML  CSS Bootstrap  (в эпоху адаптивных сайтов без него никуда) Font Awesome(иконки для ваших адаптивн..

Читать далее

Путь верстальщика: с нуля до сеньора

Прочел очень неплохую статью на Хабрахабре, хотел бы поделиться и с Вами Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик. Многократно я слышал мнение, что верстка — удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это..

Читать далее

Бесплатный подробный видеокурс по HTML и CSS

Пока нет времени заниматься записью видео и мануалами по верстке, поэтому для начала воспользуемся помощью знающих вебмастеров.В данной теме предлагаю Вам ознакомиться с бесплатным курсом от Михаила Русакова. Бесплатный подробный видеокурс по HTML и CSS– основе любого сайта!Особенности курса:Автор ..

Читать далее

Показано с 1 по 3 из 3 (всего 1 страниц)

Подпишитесь

Рассылаем только значимую информацию