 |
Резиновая (flexible layout).
|
|
|
|
Вёрстка макета веб-страницы, перевёрстка.
Что с чем едят?
Вёрстка — процесс формирования веб-страниц в текстовом либо визуальном (WYSIWYG) редакторе[1]. Это следующий этап после создания дизайна, результатом которого является непосредственно веб-страница.
Вёрстка производится с помощью языка гипертекстовой разметки — HTML [2], а для того, чтобы дать жизнь дизайну, используются каскадные таблицы стилей — CSS [3].
Сразу отметим, что вёрстка это процесс творческий и часто чётких алгоритмов здесь не существует: многие вещи можно реализовывать разными способами, всё зависит только от пытливости вашего ума.
Вначале дизайнер готовит макеты веб-страниц в графическом редакторе (например, в Adobe Photoshop), утверждает их у заказчика и затем они попадают к верстальщику для формирования HTML-кода.
Верстальщик, как правило, не создает все страницы сайта, а делает несколько типовых документов, которые называются шаблоном (template), после чего страницы формируются по ним либо динамически с помощью серверной программы, либо заполнением шаблона текстом и сохранением в разные файлы.
Итогом работы верстальщика является набор шаблонов повторяющих макеты дизайнера, но сделанных в виде HTML-документов, а также стилевой файл, в котором прописаны не только атрибуты, необходимые для вёрстки, но и параметры основного текста, заголовков, подзаголовков и других текстовых элементов. Это позволяет по единым шаблонам формировать любое число веб-страниц, оформление и вид которых будет одинаков.
Когда верстальщик получает макет, ему нужно его проанализировать и решить, как же его превратить в веб-страницу. Для удобства происходит логическое разбиение макета на отдельные блоки, с которыми идёт дальнейшая работа: шапка, меню, контент, подвал (футер), инфоблоки и т.д.
|
|
|
Веб-страница фактически рассматривается как набор прямоугольных блоков, которые выстраиваются в определённом порядке. При этом, как правило, данные располагаются по колонкам, поэтому при вёрстке применяют термин одно-, двух-, трехколоночный макет и т.д.
На сегодняшний день при формировании веб-страниц преимущественно используются именно блоки [4] (блочная вёрстка). Ранее была популярная вёрстка таблицами [5], но сейчас использование таблиц в HTML-коде не приветствуется. Они делают код громоздким, увеличивают время загрузки страницы, плохо индексируются поисковыми системами и ограничивают возможности создания сложного дизайна[6]. Поэтому мы их практически не используем, а делаем блочную вёрстку или, как её ещё называют, вёрстку на <div>-ах.
Перед началом работы.
Прежде, чем приступить к работе, необходимо ознакомиться с техническим заданием (ТЗ) к проекту, если таковое имеется. В нём прописано, что должен содержать сайт, как он должен себя вести и т.п.
Первое, на что обращаем внимание — минимальное разрешение экрана, для которого создаётся сайт. Обычно это 1024 px. Т.е. При отображении сайта на устройстве с разрешением 1024 px не должно появляться горизонтальной полосы прокрутки.
Примечание. Следует иметь ввиду, что в эту величину закладывается не только ширина самого сайта, но и толщина вертикальной полосы прокрутки и границ окна браузера. Так что, как правило, ориентируются на 1000 px.
Вторая важная вещь — это тип макета, и, соответственно, вёрстки.
Вёрстка, прежде всего, не должна «распадаться» при масштабировании сайта. Чтобы узнать, как ведёт себя тот или иной сайт при изменении масштаба, достаточно в браузере покрутить колёсиком мыши при зажатой клавише Ctrl. Соответственно выделяют следующие виды вёрстки.
|
|
|
Фиксированная (fixed layout).
При фиксированной вёрстке блокам задаётся фиксированная ширина в пикселях.
Преимущества:
· простота реализации;
· отсутствие необходимости выставлять минимальную и максимальную ширину;
· малая ширина макета, оптимальная для максимальной читаемости текста.
Недостатки:
· на малых разрешениях при просмотре сайта в браузере появляется горизонтальная полоса прокрутки;
· на высоких разрешениях сайт выглядит неприглядно из-за слишком широких полей;
· отсутствие возможности применения некоторых дизайнерских приёмов.
Пример: http://simpo-market.ru/
Примечание. Чтобы визуально как-то уменьшить пустое пространство, макет обычно помещают по центру страницы.
Резиновая (flexible layout).
При резиновой вёрстке ширина контейнеров задаётся в процентах (в сумме их, разумеется, должно быть не больше 100), а при масштабировании сайта элементы растягиваются, выстраиваются в другое количество строк и т.д.
Преимущества:
· при грамотной реализации резиновый макет позволяет достичь большой универсальности в отображении, независимо от ширины окна браузера;
· резиновый макет позволяет использовать доступное разрешение экрана по максимуму.
Недостатки:
· слишком много доступного для чтения текста страницы и его острое желание заполнить всё доступное место может служить во вред удобству пользователей; слишком много текста может «давить» на пользователя и делать сайт перегруженным или хаотичным[7];
· необходимость использования свойств с указанием минимальной и максимальной ширины контейнеров снижает кроссбраузерность, особенно это касается версий IE6 и ниже.
Примеры:
· http://simpo.biz/
· http://www.gazprom.com/
Эластичная.
При использовании эластичного макета размер основного контейнера и других элементов задается в em[8]. Em прямо пропорциональны размеру шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.
Преимущества:
· если всё сделано правильно, то это очень стабильная верстка, т.к. всё изменяет размер пропорционально;
|
|
|
Недостатки:
· если не ограничить размеры внешнего контейнера, то этот макет может быть настоящим бедствием для пользователя: он будет растягиваться шире, и шире, и шире — безо всяких видимых преимуществ;
· сложное в математическом смысле занятие: определить размеры всех модулей и графики в em — задача для усидчивых разработчиков;
· графика при изменении размера теряет качество: деформация и искажение отдельных элементов.
Примеры:
· http://clearleft.com/
|
|
|
