Привет!

Нам нравится создавать сайты для интересных людей: о социальной и необычной деятельности, об удивительных человеческих и нечеловеческих существах, о чудесах и странностях, о том, что снится и о том, что стучится в двери.

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

Таким образом мы вкладываемся в игры Духа, и мир для нас становится глубже.

Использование CSS для размещения элементов без применения таблиц

Для создания трехколоночной схемы размещения в шаблоне Joomla мы будем использовать только CSS. Мы также применим эластичную раз­метку (fluid layout). Существует два основных типа разметки веб-стра­ниц - эластичная (fluid) и фиксированная (fixed), и обе они определяют, как производится управление шириной страницы.

Ширина страницы зависит от того, какое разрешение используется большинством пользователей Интернета. Около 17% пользователей имеют разрешение 800x600. Но основная масса, 79%, имеют разрешение 1024x768 или выше1. Использование эластичной разметки означает, что ширина вашей веб-страницы не будет ограничена 1024 пикселями и страница будет полностью видна на маленьких мониторах.

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

Например, для создания таблиц требуется большой объем дополнитель­ного кода, в отличие от использования CSS. Это ведет к увеличению времени загрузки (что очень не нравится пользователям) и снижению производительности поисковых систем. Объем кода легко может удво­иться, причем не только за счет кода разметки, но и за счет маленьких прозрачных изображений в формате GIF, выполняющих роль раздели­телей.


так чтобы общая ширина всех трех колонок составляла 100%. Стиль clear: both в нижнем колонтитуле сообщает броузеру, что участок стра­ницы с эластичной разметкой закончился и нижний колонтитул должен занимать всю ширину страницы. Когда в этой главе мы приступим к со­зданию второго шаблона, мы будем использовать более совершенную методику.

Чтобы улучшить размещение элементов и добавить немного свободного пространства, нам необходимо предусмотреть в колонках небольшие отступы, которые обычно называют полями. К сожалению, здесь сущес­твуют некоторые проблемы. Возможно, вам известно, что Internet Explorer не совсем корректно интерпретирует CSS. Дело в том, что этот броузер вычисляет ширину элементов страницы отличным от других броузеров способом. Мы можем решить эту проблему без использования каких-либо отступов или рамок у всего того, что имеет ширину. Чтобы создать поле, нам потребуется добавить в колонку еще один элемент - <div>.

Добавим в CSS объявление

• inside {padding:Юрх;}

В результате раздел <body> в нашем файле index.php приобретает такой вид:

<body>

<div> <div id="header"> <div> getCfg('sitename*);?> <jdoc:include type="modules" /> </div> </div>

<div id="sidebar">

<div> <jdoc:include />

</div> </div>

<div>

<div> <jdoc:include />

</div> </div>

<div id="sidebar-2">

<div class="inside"> <jdoc:include name="right" />

</div> </div>

Этот простой макет разметки страницы прекрасно подходит для изуче­ния принципов использования CSS в Joomla, потому что он наглядно демонстрирует два основных преимущества CSS перед использованием таблиц: меньший объем кода и простоту в обслуживании. Однако в нем материалы располагаются не по степени важности (source-ordered). Для этого нам необходимо использовать улучшенную разметку с помощью вложенных плавающих блоков (nested float).

Макеты, где содержимое располагается по степени важности, гораздо лучше приспособлены для выполнения поисковой оптимизации, чем те, где содержимое стоит на втором месте после кода разметки. С точки зрения Joomla наиболее важным содержимым является то, что посту­пает из компонентов.

Таблицы стилей по умолчанию

До сих пор все наши таблицы стилей касались только макета простой страницы. Теперь добавим немного форматирования:

/* файл layout.ess с определениями стилей */ body {

text-align:center; /* для центрирования */ }

#wrap {

min-width:760px;

max-width:960px;

width: auto !important; /* для IE6 */

width:960px; /* для IE6 */

margin:0 auto; /* для центрирования */

text-align:left; /* для центрирования */

}

tfheader {}

flsidebar {float:left;width:20%; overflow:hidden } flcontent {float:left;width:60%; overflow:hidden > #sidebar-2 {float:left;width:20%; overflow:hidden > ttfooter {cleanboth;} .inside {padding:10px;}

Мы отцентрировали страницу, используя некоторые обходные приемы. Прибегнуть к ним пришлось из-за того, что Internet Explorer не совсем точно интерпретирует CSS. Чтобы отцентрировать страницу в броузерах, которые придерживаются стандартов, достаточно было бы указать margin:0 10%, но IE не распознает такое объявление, поэтому нам при­шлось сначала отцентрировать «текст» всей страницы и затем приме­нить выравнивание по левому краю в каждой из колонок.

К нашей радости, IE7 имеет поддержку объявления минимальной и мак­симальной ширины (которая отсутствует в IE6), поэтому мы можем добавить объявления минимальной и максимальной ширины страницы. Обратите внимание на то, что нам пришлось добавить обходные прави­ла для IE6, так как он не распознает эти объявления. Он проигнорирует инструкцию ! important и будет использовать ширину, равную 960 пик­селям.

 

Примечание ----------------------------------------------------------------------------------------------------------------------------------

Может показаться странным, что, объявляя ширину колонок в процентах, мы следом объявляем элемент-контейнер <div> фиксированной ширины. Ниже приводится несколь­ко мыслей по этому поводу:

  • Наличие колонок с изменяемой шириной внутри контейнера фиксированной шири­ны обеспечивает шаблону высокую гибкость. Если мы добавим кнопки для изменения ширины, нам достаточно будет изменить единственное значение.
  • Мы по-прежнему используем свойство max-width, почему бы тогда не применить эластичную разметку для всех элементов? У многих пользователей Интернета теперь есть достаточно широкие мониторы, однако исследования в области эргономики показывают, что строки текста, длиной более 900 пикселей неудобны для чтения, так как глазам приходится проделывать длинный путь, чтобы перейти на следующую строку. Ограничение эластичности колонок способствует повышению доступности/ удобства сайта.

 

Мы также добавили в стили колонок свойство overflow: hidden. Это дела­ет «разрыв» страницы более логичным при уменьшении ее ширины.

Приступая к оформлению текста с помощью CSS, мы определим неко­торые общие стили и введем так называемый сброс стилей броузера по умолчанию (global reset): /* Compass Design: стили оформления текста */ * {

margin:0;

paddingrO;

}

hi,h2,h3,h4,h5,h6,р,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;

>

Для всех элементов определяются нулевые размеры полей и отступов, а затем ко всем блочным элементам добавляется нижнее поле. Это поз­воляет добиться одинакового отображения элементов в разных броузе­рах. Подробнее прочитать о сбросе стилей броузера по умолчанию можно на сайтах clagnut1 и left-justified2.

Размер шрифта установлен равным 76%. Сделано это с целью получить непротиворечивые размеры шрифтов в разных броузерах. Все размеры шрифтов устанавливаются в шпациях (em). Наличие свойства line-height: 1.3 улучшает удобочитаемость. Благодаря этому страницы будут более доступными, так как посетитель сможет изменять размеры шриф­тов исходя из своих предпочтений. Эта тема обсуждается в статье «Ал experiment in typography* на сайте Оуэна Бриггса (Owen Briggs) The Noodle Incident3.