• Услуги
  • Решения
  • Кейсы
  • Блог
  • О нас
  • Контакты
  • Обучение
  • Вакансии
Калькулятор

Верстка веб-сайта: разновидности

10 Декабря 2019

Верстка веб-сайта – это «подгон» дизайна сайта под изначально созданный макет. Структура HTML-кода при этом создается в окне браузера (причем при верстке учитывается, как будет выглядеть страница сайта в браузере, на мобильном устройстве, лэптопе или ПК с разными разрешениями экранов).

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

У верстки есть несколько основных видов со своими достоинствами и недостатками.

Разновидности верстки веб-страниц

Принято выделать такие виды:

Статическую верстку
Резиновую
Табличную
Блочную
Адаптивную
Гибкую
Семантическую
Валидную
Кроссбраузерную

Специфика типов веб-верстки

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

Резиновая предполагает, что сайт будет «растягиваться» и «сужаться» в зависимости от того, с какого устройства и с какой ширины экрана на него зашли. Ширина каждого элемента рассчитывается в процентах и автоматически «подгоняется» под гаджет. Кстати, сама страница занимает все свободное пространство, допускаемое браузером. Получается, что дизайн будет уникален для каждого устройства, что часто вызывает неудобства.

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

Блочная – современная версия табличной. Все элементы создаются с помощью блоков <div>, которые вкладываются один в другой, но не создают нагромождения. Адаптивный дизайн –лучший вариант для современных веб-сайтов. При таком подходе создаются несколько таблиц дизайнов с разными стилями, которые позволяют ресурсу органично выглядеть и удобно читаться вне зависимости от того, на каком устройстве его просматривает пользователь – хоть на крохотном смартфоне, хоть на широкоформатном мониторе ПК.

Гибкая веб-верстка еще называется «flex» - по аналогии блоков с приставкой «флекс», которые могут менять положение по направлению оси и выравниванию (эти параметры задаются заранее). В результате страница становится гибкой и удобной для пользователя.

Семантический вид пришел вместе с HTML5 – это разновидность блочного варианта, но с более четкой структурой.

Валидная называется по-другому «безошибочной», то есть страница оказывается проверена на ошибки – и если их нет, ей присваивается соответствие стандарту W3C.
Кроссбраузерная делает возможным при помощи прикрепления CSS файла одинаковое отображение страницы вне зависимости от того, в каком браузере ее открыл пользователь.

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




Верстка веб-сайта: разновидности

Верстка веб-сайта: разновидности - новости, актуальная информация - веб студия Salavey.net

Информационная статья

2019-12-23

Salavey
Web-студия
111123
Россия
Москва
111123, г. Москва, шоссе Энтузиастов, д. 56, стр. 26 оф. 205
+ 7 (495) 363-4572 , 8 (800) 302-3172
Другие статьи
SMO  – один из обязательных атрибутов эффективного и успешного сайта. 17 Января 2020 SMO – один из обязательных атрибутов эффективного и успешного сайта. Создание в соцсетях аккаунтов и тематических групп, а также интеграция сайта с этими площадками является важным этапом продвижения. Устаревшие способы раскрутки сайтов или почему SEO не работает. 16 Января 2020 Устаревшие способы раскрутки сайтов или почему SEO не работает. Некоторые способы раскрутки сайтов потеряли свою актуальность. То, что раньше давало серьезные результаты, теперь работает неэффективно.  Дизайн сайта автодилера - на что обратить внимание 23 Декабря 2019 Дизайн сайта автодилера - на что обратить внимание Когда речь заходит о дизайне сайте автодилера, то исполнение его определяется критерием: «Простота - это элегантность» Какой контент может заставить пользователя уйти с сайта? 03 Декабря 2019 Какой контент может заставить пользователя уйти с сайта? Часто бывает, что в погоне за прибылью и высокими рейтингами в поисковиках люди, работающие с сайтом, забывают о комфорте пользователей ресурса.
Возникли вопросы по расчету стоимости проекта?
Звоните! Мы всегда рады помочь!
+ 7 (495) 363-4572 (доб.106)
Заказать обратный звонок
Александр Немков

Александр Немков

Специалист по работе с ключевыми клиентами

E-mail: nemkov@salavey.net


Salavey
Россия
Москва
111123, г. Москва, шоссе Энтузиастов, д. 56, стр. 26 оф. 205
+ 7 (495) 363-4572 , 8 (800) 302-3172
info@salavey.net