Обзоры, статьи, исследования



Неразрушаемый Вебсайт: Как создать EM-базированную вёрстку, которая не ломается


Оригинал статьи: Indestructible Website: How to Build an EM Based Layout that Won't Break

Автор статьи: Matthew Griffin

Автор перевода: Елена

Translated with the permission of Matthew Griffin.

Комментарий к переводу:
Всё большую популярность приобретают масштабируемые веб-страницы, использующие относительные единицы измерения размеров шрифта, ширины и высоты, отступов и т.д. Статья Мэтью Гриффина является популярным и пошаговым учебником по созданию такого лейаута.

Задача по разметке сайта - весьма сложный подвиг по сравнению с другими частями проекта. Неопределённая природа Сети делает каждый проект последовательностью компромиссов по выбору решений. Почти невозможно сделать всё до одного с полной поддержкой различных браузеров, размеров экрана и разрешений. Однако слишком долго мы рассматривали эту ситуацию как проблему, а не как благоприятный случай. Нечёткий характер Сети даёт нам возможность создавать изменчивые проекты, чтобы соответствовать индивидуальным потребностям людей. EM-базированная верстка – один шаг к использованию в своих интересах этой возможности. EM-базированный макет позволит Вашему сайту элегантно масштабироваться в соответствии с потребностями пользователей. Эта статья является учебником в построении 2-колоночного EM-базированной разметки сайта.
В чём идея...

EM является единицей измерения, точно так же, как и PX или PT. 1EM равняется значению в пикселях текущего раз мера шрифта. К примеру, 1em на веб-странице с установленным размером шрифта в 16px также равняется 16px. Прямая связь между размером шрифта и EM позволяет нам создать вёрстку, масштабируемую на основании размера шрифта. Это означает, что пользователь с установленным размером шрифта “large” в браузере увидит абсолютно масштабированную версию страницы, а не «тощую» страницу с чрезвычайно большими буквами.
Разметка страницы

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

для самой страницы. Размер шрифта для может быть установлен в процентах или пикселях. Для примера мы будем использовать проценты и предполагать, что размер шрифта по умолчанию - 16px. Это означает, что лейаут шириной 46em будет отлично соответствовать разрешению экрана 800x600. CSS и HTML для первого шага:
CSS:

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.my_page #wrapper {
width: 46em;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}

HTML:





Добавление заголовка

Заголовок будет находиться вверху нашей страницы и будет занимать всю ширину контейнера в 46em, созданного на предыдущем шаге. Заголовок нашего вебсайта заключим в тег

, масштабируемый в соответствии с раз мером шрифта. Насколько это возможно, я люблю использовать em, а не px для определения ширины и даже для padding и margin. Иногда вы будете вынуждены перейти опять на px, столкнувшись с проблемами масштабирования. Но я предпочтитаю, чтобы отступы масштабировались наравне с остальными элементами дизайна. Дополним наш код:
CSS:

.my_page #header {
background: #000000;
padding: 0 .6em;
}
.my_page #header h1 {
margin: 0;
padding: .6em 0;
font-size: 225%;
color: #FFFFFF;
}

HTML:

Расширяемые колонки

Для вёрстки двух колонок применим небольшой трюк. Мы должны быть уверены, что сумма ширин двух колонок незначительно меньше, чем ширина родительского

. Это будет гарантировать, что не будет отвратительного накладывания слоёв и макет будет масштабироваться корректно.Кроме того, будем осторожны в установке размера шрифта в колонке. Это повлечёт за собой масштабирование всей колонки в соответствии с заданным размером шрифта. Вместо этого попробуйте установить размер шрифта для дескриптора

внутри колонки, как показано в следующем фрагменте кода:
CSS:

.my_page #column_one {
float: left;
width: 12em;
background: #CCCCCC;
padding: .6em 0;
}
.my_page #column_one h3, .my_page #column_one p {
margin-left: .6em;
margin-right: .6em;
font-size: 70%;
}

.my_page #column_two {
margin: 0 1.5em 0 13em;
}

HTML (этот код добавьте после заголовка из предыдущего фрагмента кода):


Column One


Text


Text




Column Two


Test


Text


Text


И наконец, «подвал» страницы (footer)

Подвал, по сути, будет копией шапки сайта, с дополнительным атрибутом clear: both. Это позволит расположить футер под двумя колонками. CSS:

.my_page #footer {
padding: 0 10px;
background:#DDDDDD;
}
.my_page #footer p {
margin: 0;
padding: .6em 0;
}

HTML:

В заключение

Я упоминал в начале этой статьи, что пример вы можете найти здесь. Пожалуйста, не стесняйтесь копировать приведённый код и использовать его, как вам заблагорассудится. В конце концов, EM-базированные страницы далеко не всегда являются лучшим решением. Иногда нам нужно иметь жёстко фиксированный рабочий шаблон страницы. Но EM-базированный шаблон, иногда менее прогнозируемый, может оказаться зачастую более доступным. И, наконец, я хотел бы поблагодарить создателей Dreamweaver CS3 шаблонов. Изучение их кода и комментариев к нему намного упростило изучение EM-базированных шаблонов. Я бі рекомендовал вам просмотреть их.

На смартфон lenovo ideaphone s820 чехол легко найти в магазине SmartBoom.