На прошлых уроках мы сделали исходный установочный комплект для шаблона trip, который состоит из файлов index.php, templateDetails.xml и две папки css и image.

Если вы все делали правильно, то шаблон устанавливается на Joomla 3 без проблем. Далее мы будем работать над каскадными таблицами стилей, которые отвечают за оформление страниц сайта.

Момент 1. При создании таблиц я буду использовать язык CSS2. В отличии от CSS3, он проще для понимания. Это важно, т.к. большая часть аудитории моего сайта – новички в веб-программировании. Также есть еще один минус CSS3 - этот язык в настоящий момент не поддерживается всеми браузерами. Для тех же, кто мало знаком с CSS2, для лучшего понимания, в работе над таблицами, предлагаю использовать справочник «HTML, CSS, PHP».

Момент 2. Я всегда создаю сайты и отрабатываю шаблоны только на локальном сервере, установленном на моем компьютере. На хостинг заливаю уже готовый, полноценно функционирующий сайт с начальным контентом.

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

Момент 3. Я никогда не редактирую код шаблона из админпанели Joomla , а использую только программу Macromedia Dreamweaver. Открываю нужный мне файл, редактирую его, сохраняю (но не закрываю файл) и смотрю сразу же, какие изменения произошли на сайте. Если они мне не нравятся – отменяю, произведенные ранее действия.

ВНИМАНИЕ: Откатится назад в админке Joomla при редактировании кода невозможно!

С программой Macromedia Dreamweaver очень удобно работать – она подсвечивает код, помогает писать его очень быстро, выделяет ошибки, позволяет произвести откат. Всю документацию по Macromedia Dreamweaver и саму программу вы можете найти на сайте.

Ну вроде все рассказала и можно приступать к работе. Первым делом, необходимо правильно расставить все блоки DIV на странице. Сейчас они пока стоят друг за другом (смотрите скришот с предыдущего урока).

Чтобы в процессе работы хорошо видеть, как встают блоки,  в менеджере модулей CMS Joomla я  создала модуль поиска по сайту и поставила его в позицию «user1», модуль горизонтального меню - в позицию «user2», модуль навигации по сайту – в позицию «user3», три модуля с произвольным HTML кодом – в позиции «left», «right», «footer».

Изначально я решила блок «header» сделать универсальным и предусмотрела в нем позицию для вывода модулей «header». В этой позиции можно вывести какой-нибудь ротатор изображений или с помощью модуля с произвольным HTML кодом просто вывести изображение, любой высоты, при этом ширина должна быть всегда 950рх (ширина страницы). Это изображение можно сделать кликабельным, а также с легкостью его менять. Для начала я просто создала подобный модуль и разместила в нем картинку размером 950х250.

Итак, все модули расставлены и опубликованы, далее открываем файл template.css из паки css нашего шаблона trip и пишем код. Для наглядности все блоки разукрашиваем, т.е. задаем везде цвет фона.

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

Сначала оформляем блок «body», зададим ему пока серый цвет фона. 

Body {background-color:#c6c6c6;}

Далее оформляем непосредственно страницу сайта. Определим ее ширину, пропишем  свойства шрифта, который будет использоваться на сайте и для начала зададим цвет фона

#page {

width:950px;

font:14px Arial, Helvetica, sans-serif ;

line-height:1.3;

color:#000;

text-align:left;

margin:auto;

background-color:#fff;

overflow:hidden;

}

Блоки "logo" и "user1" будут выводиться в контейнере «top», зададим высоту, а ширина будет занимать 100% ширины страницы, т.е. 950px.

#top{

height:60px;

width:100%;

}

Блоку "logo" зададим фиксированную высоту и ширину, а также синий цвет фона. Определим выравнивание по левой стороне, при этом остальные элементы будут обтекать его с других сторон.

#logo {

height:60px;

width: 600px;

float: left;

background-color:#0099FF;

}

Блоку "user1" зададим фиксированную высоту, ширину, желтый цвет фона, выравнивание по левой стороне.

#user1 {

height:60px;

width: 350px;

float: left;

background-color:#CCFF00;

}

#user2 { width: 100%;}

Блок вывода шапки сайта «header» будет иметь ширину 100% от ширины страницы. Высота блока будет растягиваться до высоты изображения, которое будет выводиться в модуле.

#header {width:100%;}

Блок «user3» будет иметь ширину 100% от ширины страницы. Высота блока будет растягиваться до высоты модуля, который будет выводиться в позиции «user3» .

#user3 {

width: 100%;

background-color:#CC9900;

}

Оформление левой колонки блок «left»

#left {

float:left;

width:200px;

background-color:#FF6666;

}

Оформление правой колонки блок «right»

#rigth {

float:left;

width:200px;

background-color:#66FF33;

}

Теперь разберемся с контентом. Если в левой и правой колонке будут выводиться модули, то ширина компонента контент будет 550рх (950-200 -200).

#content60 {

float:left;

width:550px;

}

Если модули будут выводиться или только в левой или только правой колонке, то ширина компонента контент будет 750рх (950-200).

#content80 {

float:left;

width:750px;

}

Если будут отключены обе колонки, контент занимает 100% страницы, т.е. 950рх.

#content100 {

float:left;

width:100%;

}

Блок «footer» будет иметь ширину 100% от ширины страницы. Высота блока будет растягиваться до высоты модуля, который будет выводиться в позиции «footer». Отменим обтекание блока одновременно с правого и левого края, чтобы футер не поднимался вверх.

#footer {

clear:both;

background-color:#82b5bf;

}

P.S. Для тех у кого возникли трудности с написанием кода файлов или инсталляцией шаблона, я сделала установочный пакет TRIP, который должен быть у вас к концу этого урока.