Создаем шаблон Joomlа по стандартам - бестабличный дизайн
Мы будем использовать чистый CSS при создании трехколоночного дизайна для шаблона Joomla. Этот дизайн мы сделаем «резиновым». Существуют два типа дизайна веб-страницы: фиксированный и растягиваемый («резиновый»), они зависят от того, как вы управляете шириной страницы.
Ширина страницы — это серьезный вопрос, поскольку существует множество разрешений экрана, при которых пользователи просматривают веб-сайты. И хотя этот процент уменьшается, все равно около 17% [примечание переводчика: видимо, на момент написания статьи] пользователей используют разрешение 800х600 пикселей. Основная часть пользователей — 79% используют 1024х768 и выше. Создание «резинового» дизайна означает, что наиболее важная часть страницы не будет узенькой колонкой при разрешении 1024, и в то же время будет видна на меньших по размеру мониторах.
В традиционном дизайне для разметки страницы используются таблицы. Они удобны, если вы хотите просто установить ширину колонок в процентах, но они имеют ряд недостатков. Например, при использовании таблиц сильно возрастает объем кода по сравнению с CSS-дизайном. Это приводит к увеличению времени загрузки страниц (то, что пользователи не любят) и худшей их индексации в поисковых системах. Объем кода увеличивается примерно в два раза, причем не только за счет HTML-разметки, но и за счет специальных изображений в формате gif («spacer gifs»), используемых для фиксации ширины элементов разметки.
Существует множество проблем с сайтами, которые используют табличную разметку:
- Их трудно поддерживать. Для того, чтобы что-то изменить, вам необходимо понять, что делают все эти табличные теги, такие как td/tr. В случае с CSS достаточно просмотреть несколько строк
- Контент не может быть упорядочен в соответствии с содержанием. Многие веб-пользователи не видят страницы в браузере. Те, кто просматривает их текстовым браузером или устройством чтения с экрана [примечание переводчика: screen reader — устройство, позволяющее переводить содержимое в человеческую речь или шрифт Брайля для слепых], будут читать страницу от верхнего левого до нижнего правого угла. Это означает, что первым делом они увидят верхнюю часть страницы и левую колонку (для трехколоночного дизайна), еще до того, как дойдут до средней колонки. CSS-дизайн позволяет упорядочить контент по содержанию, что означает перераспределение кода и содержания страницы. Возможно, самый важный из посетителей — это Google, который воспринимает страницу именно как устройство чтения с экрана.
Посмотрим на дизайн, использующий CSS. При использовании CSS вы можете позиционировать отдельные элементы разными способами. Для быстрого ознакомления хорошим источником является .
Что необходимо знать
В современном веб-дизайне используются каскадные таблицы стилей (CSS), а не таблицы, для позиционирования элементов. Этому трудно научится, но это хорошая инвестиция. Существует множество источников (не связанных с Joomla), которые помогут вам в этом.
Мы будем использовать свойство float для позиционирования контента.
CSS-стили здесь определены непосредственно в верхней части файла, чтобы легче было продемонстрировать, что происходит, хотя обычно они должны быть в отдельном файле template.css.
Все содержится внутри элемента, названного #wrap. Он имеет «резиновую» ширину, которая изменяется от 760px до 960px.
На указанном рисунке для левой, средней и правой колонки заданы собственные элементы. Для каждого из них заданы свойства float и значения ширины в процентах, которые в сумме дают 100%. Стиль «clear:both» в подвале страницы говорит браузеру, чтобы он перестал применять свойство float и заставляет подвал занимать всю ширину страницы. Когда мы будем создавать следующий шаблон, нам придется использовать более продвинуту технику «clear».
Чтобы улучшить дизайн и дать немного свободного места для контента, нам нужно добавить промежутки между колонками, обычно называемые «канавками». К сожалению, здесь есть одна проблема. Наверное, вы знаете о том, что Internet Explorer не воспринимает CSS корректно. Загвоздка состоит в том, что он высчитывает ширину по-другому. Мы можем решить эту проблему, не применяя свойства padding или границы borders ни к чему, что имеет ширину. Чтобы получить нашу «канавку», мы добавляем еще один элемент <div> внутри колонок.
В CSS мы добавляем:
.inside {padding:10px;}
В результате содержимое <body> для файла index.php будет следующим:
getCfg('sitename');?>
Наш файл template.css будет выглядеть следующим образом:
#wrap {
min-width:760px;
max-width:960px;
}
#content {
float:left;
width:60%;
overflow:hidden;
}
#footer {
clear:both;
}
.inside {
padding:10px;
}
#sidebar,#sidebar-2 {
float:left;
width:20%;
overflow:hidden;
}
Подсказка
Краткий CSS. Можно уменьшить количество CSS-кода, используя «стенографию». Одним из ее примеров являются стили padding и margin, применяемые к элементу, когда
margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;
можно заменить на
margin: 5px 10px;
Существуют краткие варианты для определения каждого из стилей. После того, как вы определили все стили, заполните краткие версии и удалите все длинные. Например, для шрифтов синтаксис следующий:
font: font-size |font-style | font-variant | font-weight | line-height | font-family
Т.е. вместо того, чтобы использовать:
font-size:1em;
font-family:Arial,Helvetica,sans-serif;
font-style:italic;
font-weight:bold;
line-height:1.3em;
напишите так:
font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;
Прочитать дополнительную информацию можно во «Введении в краткие свойства CSS»:
Наш простой дизайн — это хороший наглядный пример для изучения того, как использовать CSS с Joomla, поскольку он демонстрирует два преимущества CSS перед табличными вариантами дизайна: меньшее количество кода и простоту поддержки. Однако, он не является упорядоченным по содержанию. Для этого нам нужно использовать более продвинутый дизайн, так называемый «вложенный float». Дизайн, упорядоченный по содержанию, более пригоден для SEO нежели те варианты, когда важный контент слишком поздно появляется в коде. Если смотреть с точки зрения сайта на Joomla, важным контентом является все то, что предоставляется компонентом Jommla.
CSS по умолчанию
До сих пор мы рассматривали CSS только с точки зрения разметки, которая формирует плоскую страницу. Давайте, добавим следующее:
body {
text-align:center;
}
#wrap {
min-width:760px;
max-width:960px;
width:auto !important;
text-align:left;
margin:0 auto;
}
#content {
float:left;
width:60%;
overflow:hidden;
}
#footer {
clear:both;
}
.inside {
padding:10px;
}
#sidebar,#sidebar-2 {
float:left;
width:20%;
overflow:hidden;
}
Мы выровняли страницу по центру, используя маленький хак. Это необходимо, поскольку Internet Explorer интерпретирует CSS неправильно. Для браузера, который соответствует стандартам, вам было бы достаточно сказать «margin:0 10%;», чтобы отцентировать страницу, однако IE не поймет этого, и мы центрируем «текст» для всей страницы, а затем выравниваем его снова влево в каждой из колонок.
Для того, чтобы «отпраздновать» появление поддержки минимальной/максимальной ширины в IE7 (которой не имеет IE6), мы можеем добавить соответствющие свойства. Но необходимо использовать небольшой хак, поскольку IE6 этих свойств не поймет. Он проигнорирует выражение !important и отобразит старую ширину 960px.
Замечание:
Может показаться странным, что мы определяем ширину наших колонок в процентах, а затем помещаем туда блоки div фиксированной ширины, однако таким образом мы добиваемся следующих вещей:
- «Резиновые» колонки внутри фиксированного контейнера делают шаблон очень гибким. Если мы добавим кнопки, изменяющие ширину, нам нужно будет изменить только одно число.
- Если мы по-прежнему имеем максимальную ширину, так почему бы не сделать дизайн «совсем резиновым»? Дело в том, что многие программы просмотра веб-сайтов имеют слишком широкие экраны. Исследование юзабилити говорит нам, что строки текста более 900px трудны для чтения, поскольку глазам приходится проходить слишком долгий путь до следующей строки. Ограничение «резиновости» делает сайт более удобным в использовании и доступным.
Также мы добавили новый стиль для колонок: «overflow:hidden». Это позволит странице «разбиваться» более правильно при уменьшении ширины.
В начале нашего CSS мы зададим некоторые общие стили, которые обычно называют «глобальный ресет» («global reset»):
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
}
Всем элементам присвоены нулевые значения margin и padding, а затем всем блоковым элементам задан единый margin снизу. Это обеспечивает большую предсказуемость в поведении браузеров. Вы можете прочитать больше о «глобальном ресете» на или
Размер шрифта установлен в 76%. Это попытка достижения большей предсказуемости размеров шрифтов в разных браузерах. Все размеры шрифтов после этого указаны в «em». Это означает, что страницы будут обладать большей доступностью, так как пользователь сможет изменять размеры шрифтов на свое усмотрение.
Обратите внимание, что боковые колонки не доходят до подвала. Это происходит потому, что они растягиваются вниз по содержащемуся в них контенту, а в белых областях справа и слева этого контента в колонках уже нет.
Если бы мы имели шаблон, в котором белый цвет фона используется для всех трех колонок, это не было бы проблемой. Мы будем использовать именно этот подход и создадим прямоугольные блоки для модулей. Если бы мы захотели сделать колонки равной высоты с заданным цветом, или чтобы они содержали прямоугольные блоки, нам бы пришлось использовать изображение для фона, которое мы бы растягивали по вертикали. Эта техника называется «ложные колонки» и описана Дугласом Боуменом и Ериком Майером.