Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Резиновая (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/

 

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...