Привет!

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

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

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

Создание настоящего шаблона для Joomla! 1.5

 

Я не использовал здесь изображение с логотипом - только простой текст. Главная причина заключается в том, что поисковые системы не могут читать изображения. Текст можно было бы заменить красивым изобра­жением, но я оставлю это вам в качестве самостоятельного упражнения.

Наш заголовок выглядит теперь так, как показано на рис. 9.9.

Далее нам необходимо реализовать прием, используемый для отобра­жения фона в колонке с изменяемой шириной: скользящие колонки.

 

Фон КОЛОНКИ

Вспомните, мы уже говорили о том, что цветной фон колонки может не достигать нижнего колонтитула. Это происходит потому, что высота элементов <div> - в данном случае sidebar и sidebar-2 - определяется количеством содержимого. Блок div не растягивается больше, чем тре­буется, чтобы вместить все содержимое.

Чтобы исправить этот визуальный недостаток, нам необходимо исполь­зовать прием, получивший название «скользящие псевдоколонки» (Sliding Faux Columns), для чего потребуется создать два широких изоб­ражения, которые будут как бы скользить друг над другом. Для этого нужно добавить два новых контейнера, где будут храниться эти фоновые изображения. В обычном случае это можно было бы сделать в контей­нере #wrap, но исключительно с целью демонстрации я буду использовать дополнительный (и излишний) контейнер.

Полное описание этого приема вы найдете в следующих двух руковод­ствах:

Нарезка и сборка

Следующий шаг обычно называется нарезкой. Нам потребуется графи­ческий редактор, чтобы с его помощью нарезать графическое изобра­жение на маленькие фрагменты, которые затем будут использоваться шаблоном. Особое внимание следует уделить тому, как будут изменять­ся размеры элементов. (Я предпочитаю пользоваться графическим редактором)

Настройка размещения модулей

В этом шаблоне модули будут размещаться немного не так, как в стан­дартной установке Joomla. Они должны находиться в следующих пози­циях:

  • useri (пользователь!) - модуль поиска.
  • user2 (пользователь2) - верхняя строка меню.
    • top (вверху) - для новостей и модулей с произвольным содержимым HTML.

Ничто другое не должно публиковаться в этих позициях.

Заголовок

Под заголовком в верхней части страницы слегка просвечивает изобра­жение. Нам нужно сохранить этот эффект, поэтому мы разместим изоб­ражение в качестве фона, а затем определим цвет заголовка. Благодаря этому заголовок получится масштабируемым по вертикали, что может потребоваться, например, при изменении размера шрифта. Кроме того, нам необходимо изменить цвет символов в заголовке на белый, чтобы они легко читались на черном фоне.

Помимо этого нам потребуется использовать фоновое изображение для поля ввода строки поиска и гарантировать правильное определение правил для поля ввода, используя специфичность CSS. Кроме того, чтобы поместить поле ввода в требуемую мне позицию, я использовал прием абсолютного позиционирования внутри элемента с относитель­ным позиционированием. Изображение не будет масштабироваться при изменении размера шрифта. Для этого требуется привязать верхнюю и нижнюю границы изображения. Это будет еще одним упражнением для вас!

В нашем случае страница имеет максимальную ширину 960 пикселей, поэтому мы возьмем изображение такой же ширины. Само изображение хранится в файле slidingcolumns.png, в каталоге с изображениями этого примера. Затем мы экспортируем две части (я использую одно и то же изображение и просто скрываю или отображаю их в боковых колонках): одна часть, шириной 960 пикселей - для фона в левой колонке, имею­щего ширину 192 пикселя, а другая часть шириной 960 пикселей - для фона в левой колонке, имеющего ширину 196 пикселей.

 

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

Нам нужно выполнить клиринг плавающих элементов, чтобы плаваю­щие контейнеры (псевдоколонки) могли расти по высоте до самого низа страницы. Традиционный способ заключается в использовании свойства :after1. Но в версии IE7 этот прием не дает желаемых результатов. По­этому нам необходимо предусмотреть реализацию клиринга плавающих элементов отдельно для Internet Explorer 6 и Internet Explorer 7, что сводит наши усилия на нет.

Была найдена2 пара решений3. Здесь мы будем использовать метод, получивший название «все (или почти все) элементы плавающие» (Float (nearly) Everything)4.

Следуя этому приему нам просто нужно добавить свойство clear:both в селектор #footer, а свойство float - в правила оформления псевдоко­лонок fauxcol. Мы добавим их в таблицы стилей, которые выбираются по условию для IE6: