Привет!

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

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

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

Гибкие модули

В нашем шаблоне присутствует большой блок начального модуля. За­ранее нам неизвестно, какая высота текста потребуется. Чтобы решить эту проблему, мы поместим инструкцию вызова модуля jdoc: include в контейнер и присвоим ему цвет фона, совпадающий с цветом изобра­жения. Этот же прием мы использовали при создании заголовка:

<?php if($this->countModulesCtop')) : ?> <div id="top"> <div>

<jdoc:includetop" style="xhtmr* /> </div> </div> <?php else : ?>

<div id="top">&nbsp;</div> <?php endif; ?>

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

Чтобы переопределить стили moduletable, определенные ранее, необхо­димо использовать такую особенность CSS, как специфичность:

#top {

background:#еа6800 url(../images/teaser.png) no-repeat;

padding:10px;

>

#top .moduletable h3 { color:#fff; background:none; text-align:left;

font:2.5em Arial, Helvetica, sans-serif normal;

padding:0;

margin:0;

font-stretch:expanded }

#top .moduletable{

font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;

color:#fff;

margin:0;

padding:0;

border:0;

}

Теперь нам необходимо сосредоточиться на оформлении текста.

Оформление текста

Текст большей части ссылок должен иметь белый цвет, поэтому снача­ла определим ссылки глобально, а затем изменим цвет для центральной колонки:

a:link,a:visited { text-decoration:underline; color:#fff; >

a:hover {

text-decoration:none; }

#content60 a:link,#content60 a:visited,#content80 a:link,#content80 a:visited,#content100 a:link,#content100 a:visited { color:#000; >

Дизайн предусматривает наличие стилизованной кнопки. Мы создадим ее, используя фоновое изображение из композиции. Это тонкая полоска, которая будет повторяться по горизонтали:

.button {

border:#000 solid 1рх;

background:#fff url(../images/buttonbackground.png) repeat-x;

height:25px;

margin:4px 0;

padding:0 4px;

cursonhand;

}

Для таблиц, таких как FAQ (Часто задаваемые вопросы), мы можем добавить мягкий фон, повторив прием с отображением оранжевой по­лосы. Многократное использование одного и того же изображения по­ложительно влияет на создание ощущения единства стиля и экономит время, ускоряя загрузку страницы.

.sectiontableheader {

backg round:u г1(../images/tease г.png);

padding:5px;

color:#fff;

font:1.2em bold Arial, Helvetica, sans-serif; >

Для модулей нужно лишь немного изменить определение ширины полей и отступов: /* Оформление модулей */

.moduletable {

margin-bottom:1em;

color:#fff;

font-size:1.1em;

}

.moduletable h3 {

font:1.3em Tahoma,Arial,Helvetica,sans-serif;

background:#000;

color:#ccc;

text-align:left;

margin:0 -10px;

padding:5px 10px;

}

Для меню, как всегда, требуется большое число стилей CSS. Мы сохра­ним их настолько простыми, насколько это возможно. Мы будем ис­пользовать единственное изображение, которое содержит в себе одно­временно и маркер, и линию подчеркивания. Заметьте, что стилизация меню «включается» путем применения суффикса меню menu ко всем необходимым спискам ссылок:

/* Оформление меню */ .moduletablemenu { margin-bottom:1em; }

.moduletablemenu h3 {

font:1.Зет Tahoma,Arial,Helvetica,sans-serif;

background:#000;

color:#ccc;

text-align:left;

margin:0 -10px;

padding:5px 10px;

}

.moduletablemenu ul { list-style:none; margin:5px 0; }

.moduletablemenu li {

background:url(../images/leftmenu.png) bottom left no-repeat; height:24px;

font:14px Tahoma,Arial, Helvetica, sans-serif; margin:10px 0; padding:0 0 0 10px; }

.moduletablemenu a:link,.moduletablemenu a:visited {

color:#fff;

display:block;

text-decoration:none;

padding-left:5px;

}

.moduletablemenu a:hover {

text-decoration:none; color:#fff; background:#ADADAD; >

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

Кроме того, мы попробуем немного оптимизировать скорость работы шаблона и используем одно и то же изображение для левой и правой сторон, а также для оформления состояний «активно/неактивно». Этот прием известен как использование спрайтов2.