Всё о вёрстке в помощь начинающему разработчику
Вёрстка — процесс создания структуры кода по отрисованному макету. Не следует путать с типографской вёрсткой: при верстке веб-страниц необходимо учитывать то, как будет отображаться содержимое в разных браузерах и на различных гаджетах. Человек, делающий эту работу, называется верстальщиком.
Вёрстка делится по типам отображения и по принципу создания самой вёрстки. Но, независимо от этих критериев, вёрстка в первую должна быть корректной с точки зрения кода, потому что код влияет на скорость загрузки страницы. Про то, что такое валидность кода, как её проверить и зачем она нужна — в статье «Проверка на валидность».
Типы отображения:
- Фиксированный;
- Резиновый;
- Адаптивный;
Фиксированная вёрстка (также она называется статической) представляет собой такой вид дизайна страницы, в котором размеры указываются точно в пикселях (px) и являются статичными вне зависимости от размеров экрана.
Использование такого макета на текущий момент времени оправдано лишь в том случае, если точно известно, что продукт будет применяться только на определенных экранах с четко известным разрешением. В случае открытия на более мелком экране размер веб-страницы будет просто не влезать в размеры окна браузера. А внизу добавится горизонтальная полоса прокрутки.
#block1, #block2 { width: 400px; }
Резиновую вёрстку выполнить сложнее, нежели фиксированную. Здесь размеры принято задавать в процентах от ширины экрана, на котором выполнено открытие страницы. Такая страница с резиновым дизайном займёт всю ширину окна браузера и, казалось бы, всё хорошо, но! На широких мониторах сайт расплывётся, хотя, к примеру, на квадратном может быть всё красиво.
#block1, #block2 { width: 50%; }
Адаптивная вёрстка подстраивает вид страницы под максимальное удобство для пользователя в зависимости от того, на каком устройстве отрыт ресурс. Отображение на различных устройствах может выполняться с перестройкой блоков, с изменением внешнего вида элементов страницы.
Например, при использовании большого экрана, панель навигации будет выглядеть строкой с пунктами меню, в то время как при открытии той же страницы на мобильном телефоне с меньшим разрешением меню свернётся в кнопку в углу. Адаптивная вёрстка заменила мобильные версии сайтов, которые обычно располагали на поддоменах (m.site.ru).
Под эту верстку обычно создаётся несколько макетов под основные разрешения девайсов. Для реализации подобной вёрстки под каждый размер экрана прописывают свои стили CSS и правила @media.
#block1, #block2 { width: 430px; }
//для экранов с максимальной шириной 1200px
@media (max-width: 1200px) {
#block1, #block2 { width: 380px; }
}
// для экранов с максимальной шириной 768px
@media (max-width: 768px) {
#block1, #block2 { width: 200px; }
}
Принципы создания вёрстки
Существует табличный и блочный принцип вёрстки.
Табличная верстка считается устаревшей, хотя элемент «таблица» входит в спецификацию HTML5 и не помечен как устаревший. Но вот верстать таблицу, внутри ячейки которой содержится другая таблица — является устаревшим методом. В отображении же табличных данных в таблице нет ничего плохого. Весомым недостатком в случае использования таблиц будет задержка вывода страницы: пока браузер полностью не загрузит таблицу на локальную машину – содержимое не будет отображено; браузер видит таблицу как отдельный объект.
При блочной вёрстке особое внимание уделено тегу <div>. Он является каркасом, на который с помощью CSS накладывается тот или иной вид. С помощью <div> код выглядит отдельными блоками, который к тому же намного лучше индексируется. Помимо <div> в HTML5 добавлены теги блоков: <header>(заголовок), <footer>(подвал), <nav>(навигация) и <aside>(боковая панель).
Какой же метод использовать
Необходимо знать все применяемые методы и использовать их по мере необходимости, выбирая нужный в каждом конкретном случае.
Хорошо зарекомендовало себя применение комбинированного метода, когда совмещается резиновый и адаптивный дизайн, а таблицы применяются совместно с блочной вёрсткой там, где необходимо вывести табличные значения.
#block1, #block2 { width: 50%; }
@media (max-width: 1200px) {
#block1, #block2 { width: 100%; }
}
Домашнее задание читателям: с помощью какого метода верстки был создан дизайн данного портала и какой принцип вёрстки использовался?
Лучшее — людям: профессия «Верстальщик».