Основы вёрстки
Основы вёрстки
Верстка сайта – этап разработки, на макет дизайна становится функциональным. Верстальщик разрабатывает структуру HTML-кода, выступающую своего рода указаниями для браузера: где размещать блок, как отображать информацию (размер, положение, отношение к другим элементам), откуда брать изображение и так далее.
Далее, мы рассмотрим что включает в себя вёрстка и все виды верстки веб-сайтов, определим некоторые тенденции в этом направлении, чтобы вы могли сами выбрать для себя свой подход.
Что включает в себя вёрстка
Устаревшие практики
Вёрстка при помощи frame’ов ->
Табличная вёрстка ->
Что такое фрейм в HTML?
Frameset — это легкий способ создавать несколько отдельных областей прокрутки в окне браузера, а также удобный механизм для изменения содержимого фрейма.
Фреймы поддерживаются в HTML 4.01, их нет в HTML 5. На смену им пришли многофункциональные методы форматирования CSS.
Возможно, вы захотите использовать frame’ы и фиксированную ширину макета, чтобы воссоздать тот же кошмар из независимых панелей и подокон что был в вебе до 2000,
Но я не рекомендую ☺
Табличная вёрстка
Плюсы табличной вёрстка
«Резиновый» макет
Таблицы удачно подходят для «резинового» макета, ширина которого привязана к ширине окна браузера. Благодаря тому, что размер таблицы можно задавать в процентах, она занимает все отведенное ей свободное пространство. Также можно регулировать и высоту содержимого. Например, если текста немного, то «подвал» страницы может висеть в ее середине. Параметрами таблицы можно отрегулировать это так, что при небольшом тексте «подвал» плотно прилегает к нижнему краю окна браузера, независимо от размеров окна.
Плюсы табличной вёрстка
Фоновые рисунки
В ячейки таблицы можно добавлять фоновый рисунок, в зависимости от размеров ячейки он может повторяться по горизонтали, вертикали или сразу в двух направлениях. За счет этого приема на странице создаются декоративные линии, рамки самого разнообразного вида, добавляется тень под элементом.
Плюсы табличной вёрстка
Выравнивание элементов
Содержимое ячеек можно одновременно выравнивать по горизонтали и по вертикали, за счет чего расширяются возможности по размещению элементов относительно друг друга и на странице в целом.
Плюсы табличной вёрстка
Особенности браузеров
Браузеры достаточно вольно толкуют некоторые параметры CSS, поэтому создание универсального кода с применением слоев может стать настоящей головной болью для разработчиков. В этом смысле таблицы отображаются в разных браузерах практически одинаково, поэтому создание веб-страниц упрощается.
Недостатки табличной вёрстка
Громоздкий код
Таблицы содержат сложную иерархическую структуру вложенных тегов, которая увеличивает объем кода, и повышает сложность изменения отдельных параметров. В некоторых случаях для достижения желаемого результата приходится вкладывать одну таблицу внутрь другой, а это также влияет на размер «шелухи», т.е. кода, который не принимает непосредственного участия в отображении веб-страницы.
Недостатки табличной вёрстка
Нет разделения содержимого и оформления
В идеале HTML-код должен содержать только теги с указанием стилевого класса или идентификатора. А все оформление вроде цвета текста и положения элемента выносится в CSS и модифицируется отдельно. Такое разделение позволяет независимо править код страницы и менять вид отдельных ее элементов. Хотя к таблицам стиль легко добавляется, но обилие «лишних» тегов не позволяет действительно просто и удобно управлять видом отдельных компонентов страницы. К тому же не все параметры таблиц имеют свой стилевой синоним, поэтому в любом случае приходится обращаться к коду веб-страницы и править его.
Недостатки табличной вёрстка
Несоответствие стандартам
Что же говорит спецификация относительно таблиц?
А говорит она, что таблицы в первую и последнюю очередь нужны для размещения табличных данных. Все остальные способы использования таблиц осуждаются.
Блочная вёрстка
Это современный метод. Само название говорит о характеристиках такой верстки: вся информация содержится в отдельных блоках под тегами
Они вкладываются друг в друга, таким образом уменьшается нагромождение кода, структура понятна, править верстку легко.
Cтатическая/Фиксированная вёрстка
Такая верстка привязывается к одному размеру экрана. То есть, если зайти на сайт с устройства с меньшим экраном, изображение не уменьшается и подача информации не меняется, страницу нужно скролить в стороны;
Резиновая вёрстка
Здесь отображение сайта подстраивается под размер экрана устройства, с которого на него зашли. Размер каждого элемента рассчитывается процентном отношении. Не самый удачный метод адаптива, так как иногда размеры элементов становятся совершенно неподходящими для удобного пользования сайтом;
Гибкая/Адаптивная верстка
Позволяет задавать конкретные правила для разных элементов по части изменения их положения и размеров в зависимости от размера экрана. Таким образом, можно получить максимально удобный сайт на любых устройствах.
Валидация вёрстки
Отдельный пунктом нужно отметить валидную верстку. Это не столько метод разработки, сколько способ проверки качества. Современные сайты должны соответствовать требованию кроссбраузерности, это значит, что они должны хорошо отображаться во всех популярных браузерах: Google Chrome, Mozilla Firefox, Opera и так далее.
Есть специальный стандарт, по которому проверяется такая верстка: W3C.
Валидация вёрстки (Критерии)
Адаптивность.
Попробуйте открыть сайт с разных устройств.
Страницы должны выглядеть ровно так, как это задумано на макете.
Также для целей проверки верстки можно использовать консоль разработчика в браузерах.
Валидация вёрстки (Критерии)
Валидность.
HTML-валидатор произведет несколько проверок загруженного кода, например:
Валидация вёрстки (Критерии)
Валидность.
HTML-валидатор произведет несколько проверок загруженного кода, например:
Пример хорошей адаптивной вёрстки
Приёмы для достижения хорошей вёрстки
Обратите внимание, что если уменьшить изображение целиком, надписи станут нечитаемыми.
Поэтому, чтобы сохранить читабельность, картинка поделена на две части
Приёмы для достижения хорошей вёрстки
Для значительных изменений размера страницы может понадобиться изменить расположение элементов в целом. Это удобно делать через отдельный файл с адаптивной вёрсткой CSS или, что более эффективно, через CSS-медиазапрос.
Приёмы для достижения хорошей вёрстки
принцип, согласно которому изначально разрабатывается UI/UX интерфейс сайта для расширений, которые устанавливаются на смартфоны. В последующем дизайн-макеты масштабируются под планшетные и desktop-устройства. Данный подход позволяет качественно проработать удобство мобильной версии сайта, а не по остаточному принципу, как при типовом подходе, когда работа над макетами начинается с desktop-версии.
Приёмы для достижения хорошей вёрстки
На примере приложения Instragram
CSS-Framework’и для вёрстки
Создание красивых стилей убивает уйму времени. CSS фреймворки выполняют ту же задачу на лету. Верстальщики получают продуманные решения самых насущных проблем – разметку, интерфейсы, адаптивность.