Переход на HTML
Переход на 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! сможет отображать в административной секции.