усовершенствованием дизайна и программной части шаблона. Dramweaver позволяет просмотреть результаты редактирования шаблона сразу после его сохранения. Вы также можете настроить Dreamweaver на автоматическое обновление измененного шаблона, находящегося на FTP или WebDAV сервере! Для этого в Dreamweaver необходимо указать путь к файлам Joomla! и ввести информацию, необходимую для подключения к удаленному серверу.
Рис. 25 Работа над сайтом в Dremweaver
Шаблоны и теги <div>
Joomla! до версии 1.5.0 (включительно) все еще может работать с таблицами при создании шаблонов. Однако, в последующих версиях Joomla! эта функциональность будет полностью убрана в целях реализации требований об устранении ограничений. Тег <div> заменит тег <table>
Тег <div> позволяет объединить в одном месте несколько элементов, например, текст, графику и т.д. Отличительным свойством такой группы элементов поначалу является только то, что она начинается с новой строки. Тег <div> не имеет больше ни каких свойств. Преимущество его использования открывается в комбинации с CSS выражениями. <div> был создан именно с этой целью: форматироваться с помощью CSS. <div> дает возможность создавать шаблоны, полностью контролируемые CSS файлами.
Один из базовых шаблонов, rhuk_milkyway, использует именно такую технологию. Он не содержит таблиц (тег <table>), вместо этого структура шаблона определяется тегами <div>. Просмотрите исходный код этого шаблона, чтобы понять, как работает такая технология. Dreamweaver также поддерживает работу с тегами <div>.
Размещение модуля «в деталях»
Давайте ближе рассмотрим панель модуля, расположенную слева:
Рис. 26: Модуль, расположенный слева
В HTML коде файла index.php имеется следующий фрагмент:
<div id='leftcolumn'>
<jdoc:exists type='modules' condition='left' >
<jdoc:include type='modules' name='left' style='-3' />
</jdoc:exists>
</div>
В форматировании тега <div> используется идентификатор CSS под названием leftoclumn.
Контент между тегами <jdocs:exists> и </jdocs:exists> отображается только если выполняются условия параметров. В данном случае отображение будет зависеть от наличия модуля или модулей в положении «слева» (left). Если таких модулей нет, общая разметка шаблона динамически изменится, чтобы заполнить пустое место.
В нашем случае имеется три модуля.
CSS идентификатор левой колонке выглядит в CSS файле следующим образом:
#leftcolumn {
padding: 0;
margin: 0;
width: 20%;
float:left;
}
Если вы посмотрите на исходный код страницы, отображаемой в веб браузере (нажать правой кнопкой на странице и выбрать Просмотреть исходный код страницы (View Page Source)), то увидите, что jdoc запрос Joomla! сгенерировал на самом деле значительно больший объем кода.
Листинг 7: Выдержка из исходного кодаHTML страницы
… дополнительные HTML команды
<div id='leftcolumn'>
<div class='modul
<div>
<div>
<div>
<h3>Main Menu</h3><ul class='mainmenu'>
<li class='level1 item1 active current'>…</li>
<li class='level1 item2'>…</li>
</div>
</div>
</div>
</div>
<div class='modul
<div>
<div>
<div>
<table …>
<tr ><td>…</td></tr>
<tr ><td>…</td></tr>
</table>
</div>
</div>
</div>
