Секция 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
<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
