Переход на 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">&nbsp;</td>

<!– Part 2 –>

<td width="178" height="120" rowspan="2" bgcolor="#FFCC33">

&nbsp; </td>

</tr>

<tr>

<!– Part 3 –>

<td colspan="2" height="33" bgcolor="#FFCC33">&nbsp;</td>

</tr>

<!– Section 2 –>

<tr>

<!– Part 4 –>

<td width="197" height="233" bgcolor="#F5EE28"> &nbsp; </td>

<!– Part 5 –>

<td width="389" height="233">&nbsp;</td>

<!– Part 6 –>

<td width="178" height="233" bgcolor="#FFFF33"> &nbsp; </td>

</tr>

<!– Section 3 –>

<tr bgcolor="#FFCC33">

<!– Part 7 –>

<td colspan="3" height="40">&nbsp;</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! сможет отображать в административной секции.

Более 800 000 книг и аудиокниг! 📚

Получи 2 месяца Литрес Подписки в подарок и наслаждайся неограниченным чтением

ПОЛУЧИТЬ ПОДАРОК