Создание шаблонов Joomla - [6]

Шрифт

Интервал

Рис. 20: Вставка поля поиска

Поле поиска появится в соответствующей части шаблона, а необходимый для его работы HTML код и JavaScript будут добавлены к нашему исходному коду:

Рис. 21: Поле поиска в шаблоне

Таким же методом вы можете вставить в шаблон любой динамический элемент Joomla!

Рис. 22: Шаблон с модулями Joomla!

Сайт «в живую»

Чтобы получить возможность работать с только что созданным шаблоном в Joomla!, необходимо создать файл templateDetails.xml. Базовая версия без картинок выглядит так:

joomla150_book_dw

0.1

28.07.2006

Hagen Graf

GNU/GPL

[email protected]

http://www.cocoate.com

0.1

… Description … Dreamweaver Version

index.php

templateDetails.xml

template_thumbnail.png

css/template.css

После создания XML файла вы сможете выбрать новый шаблон в Менеджере шаблонов (Template Manager) административной части Joomla! Установите шаблон в качестве шаблона по умолчанию и загрузите ваш сайт Joomla! в веб обозревателе.

Рис. 23: Менеджер шаблонов с вашим собственным шаблоном

Рис. 24: Ваш сайт с вашим шаблоном

Далее, пользуясь широкими возможностями Dreamweaver вы можете продолжить работу над усовершенствованием дизайна и программной части шаблона. Dramweaver позволяет просмотреть результаты редактирования шаблона сразу после его сохранения. Вы также можете настроить Dreamweaver на автоматическое обновление измененного шаблона, находящегося на FTP или WebDAV сервере! Для этого в Dreamweaver необходимо указать путь к файлам Joomla! и ввести информацию, необходимую для подключения к удаленному серверу.

Рис. 25 Работа над сайтом в Dremweaver

Шаблоны и теги

Joomla! до версии 1.5.0 (включительно) все еще может работать с таблицами при создании шаблонов. Однако, в последующих версиях Joomla! эта функциональность будет полностью убрана в целях реализации требований об устранении ограничений. Тег

заменит тег

Тег

позволяет объединить в одном месте несколько элементов, например, текст, графику и т.д. Отличительным свойством такой группы элементов поначалу является только то, что она начинается с новой строки. Тег

не имеет больше ни каких свойств. Преимущество его использования открывается в комбинации с CSS выражениями.

был создан именно с этой целью: форматироваться с помощью CSS.

дает возможность создавать шаблоны, полностью контролируемые CSS файлами.

Один из базовых шаблонов, rhuk_milkyway, использует именно такую технологию. Он не содержит таблиц (тег

), вместо этого структура шаблона определяется тегами

. Просмотрите исходный код этого шаблона, чтобы понять, как работает такая технология. Dreamweaver также поддерживает работу с тегами

Размещение модуля «в деталях»

Давайте ближе рассмотрим панель модуля, расположенную слева:

Рис. 26: Модуль, расположенный слева

В HTML коде файла index.php имеется следующий фрагмент:

В форматировании тега

используется идентификатор CSS под названием leftoclumn.

Контент между тегами и отображается только если выполняются условия параметров. В данном случае отображение будет зависеть от наличия модуля или модулей в положении «слева» (left). Если таких модулей нет, общая разметка шаблона динамически изменится, чтобы заполнить пустое место.

В нашем случае имеется три модуля.

CSS идентификатор левой колонке выглядит в CSS файле следующим образом:

#leftcolumn {

padding: 0;

margin: 0;

width: 20%;

float:left;

}

Если вы посмотрите на исходный код страницы, отображаемой в веб браузере (нажать правой кнопкой на странице и выбрать Просмотреть исходный код страницы (View Page Source)), то увидите, что jdoc запрос Joomla! сгенерировал на самом деле значительно больший объем кода.

Листинг 7: Выдержка из исходного кодаHTML страницы

… дополнительные HTML команды