Однозначного решения, какой из типов шаблона использовать, нет. Если вы предпочитаете фиксированный размер, стоит выбрать размер удобный для любого монитора (800 на 600 пикселей). Учитывая то, что каждый веб обозреватель имеет полосу прокрутки справа, а само окно обозревателя находится в рамке, ширину шаблона можно сделать еще меньше, например 780 пикселей.
Структура
Так как вы имеете дело с отображением структурированных данных, необходимо определится с общим размещением. Обычно Joomla! использует структуру размещения элементов показанную ниже:
Рис. 1: Структура
Секция 1:
Часть 1: Тут стоит разместить логотип или название сайта
Часть 2: Тут стоит разместить поисковое поле
Часть 3: Тут стоит разместить навигационные ссылки
Секция 2:
Часть 4: В левой колонке размещаются самые важные меню
Часть 5: Тут размещается основной контент сайта
Часть 6: В правой колонке можно разместить дополнительные меню
Секция 3:
Часть 7: Нижняя часть страницы (footer)
Переход на HTML
Теперь необходимо превратить нашу концепцию в HTML код. В зависимости от графического редактора, который вы использовали для разработки концепции шаблона, существует вероятность, что изображение может быть конвертировано в HTML автоматически. Это также можно сделать вручную с помощью текстового редактора Notepad или HTML редактора, такого, как Macromedia Dreamweaver (http://www.macromedia.com/software/dreamweaver), или одного из многочисленных бесплатных HTML редакторов (http://www.thefreecountry.com/webmaster/htmleditors.shtml).
Исходный HTML код при этом может выглядеть таким образом:
Листинг 1:HTML файл
<html>
<head>
<link rel="stylesheet"
href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet"
href="templates/{TEMPLATE}/css/template.css" type="text/css" />
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="780" border="1">
<!– Section 1 –>
<tr>
<!– Part 1 –>
<td colspan="2" height="89" bgcolor="#F5C228"> </td>
<!– Part 2 –>
<td width="178" height="120" rowspan="2" bgcolor="#FFCC33">
</td>
</tr>
<tr>
<!– Part 3 –>
<td colspan="2" height="33" bgcolor="#FFCC33"> </td>
</tr>
<!– Section 2 –>
<tr>
<!– Part 4 –>
<td width="197" height="233" bgcolor="#F5EE28"> </td>
<!– Part 5 –>
<td width="389" height="233"> </td>
<!– Part 6 –>
<td width="178" height="233" bgcolor="#FFFF33"> </td>
</tr>
<!– Section 3 –>
<tr bgcolor="#FFCC33">
<!– Part 7 –>
<td colspan="3" height="40"> </td>
</tr>
</table>
</body>
</html>
Листинг 2: CSS файл
body {
font-family: Arial, Helvetica, Sans Serif;
}
Данный код несколько упрощен, а его заглавная часть (<head>…</head>) не совсем отвечает стандарту XHTML. Также таблица имеет визуальную границу между ячейками (атрибут border=1), позволяющую легче увидеть структуру шаблона. Теперь вы можете максимально воспользоваться своим воображением и креативными способностями в плане подбора цветовой гаммы и логотипов. Этот код должен быть сохранен в файле index.php, именно из файла с таким названием Joomla! проводит чтение команд и скриптов шаблона.
Далее, в заглавную часть кода интегрируются стандартный CSS файл системы Joomla! и индивидуальный CSS файл данного шаблона. На данном этапе CSS файл содержит только одну команду, определяющую тип шрифта.
Первый шаблон вам придется создать полностью вручную в соответствующей директории Jooomla! Затем его можно запаковать в архив, которым, с помощью Инсталлятора Joomla! (Joomla! Installer), смогут воспользоваться другие пользователи. Сохраните файл разметки index.php в только что созданной директории [ПутьКJoomla!]/templates/joomla150_book/.
Сохраните файл template.css в [ПутьКJoomla!]/templates/joomla150_book/css/.
Основная структура вашего шаблона готова. Теперь необходимо определить ее с помощью XHTML файла, который Joomla! сможет отображать в административной секции.
Структура директорий шаблона
Теперь необходимо позаботится о кое-каких условиях. Как уже говорилось, шаблон должен иметь определенную структуру директорий:
[ПутьКJoomla!]/templates/[НазваниеШаблона]/
[ПутьКJoomla!]/templates/[ НазваниеШаблона]/css/
[ПутьКJoomla!]/templates/[ НазваниеШаблона]/images/
Название шаблона не должно содержать пробелов или каких-либо специальных символов.
При инсталляции шаблона в виде заархивированного файла, Установщик Шаблонов (Template Installer) использует это название для создания структуры директорий шаблона. Также, при использовании некоторых операционных систем проблемы может вызвать слишком «экзотичное» (с использованием букв нелатинского алфавита) название шаблона. И в завершение, отметим также, что название шаблона должно иметь смысл, например, название нашего тестового шаблона joomla150_book>.
В директориях шаблонов должны присутствовать следующие файлы:
Файл структуры: это базовая версия HTML файла, который мы создали ранее: /templates/joomla150_book/index.php. Данный файл должен иметь расширение .php, так как динамические модули Joomla!, которые мы будем использовать позднее интерпретируются именно языком PHP.
Картинка предварительного просмотра: файл /templates/joomla150_book/template thumbnail.png содержит картинку предварительного просмотра шаблона, отображаемую в Менеджере шаблонов (Extensions | Template Manager) административной секции Joomla! Размер картинки обычно не превышает 227 на 162 пикселя. Данный файл можно создать и позднее, когда работа над шаблоном будет закончена.
Метаданные шаблона: файл /templates/joomla15_0book/templatedetails.xml представляет собой инструкцию по автоматической сборке (распаковке) шаблона, используемую Установщиком шаблонов (Template Installer). Здесь можно указать путь для копирования файлов, имя автора и дополнительные метаданные. Во время установки шаблона, Joomla! считывает информацию из этого файла и копирует файлы и данные в соответствующие директории. Для тестового шаблона можно использовать файл из листинга 3, разместив в нем свою информацию. Для любого файла, используемого в шаблоне, необходимо создать соответствующий XML элемент в templateDetails.xmclass="underline"
<files>
<filename> … укажите название файла в корневой директории шаблона …
</filename>
<filename> … и так для каждого файла шаблона
</filename>