Создание шаблонов Joomla - страница 8

padding: 0;

margin: 0;

width: 20%;

float:left;

}

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

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

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

Main Menu

…

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

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

div.module_menu {

background: url(../images/mw_box_blue_br.png)

100% 100% no-repeat;

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

}

div.module_menu div {

background: url(../images/mw_box_blue_bl.png)

0 100% no-repeat;

}

div.module_menu div div {

background: url(../images/mw_box_blue_tr.png)

100% 0 no-repeat;

}

div.module_menu div div div {

background: url(../images/mw_box_blue_tl.png)

0 0 no-repeat;

padding: 10px;

padding-top: 30px;

padding-bottom: 15px;

width: auto;

}

div.module_menu div div div div {

background: none;

padding: 0;

}

Четыре блока CSS активируют определенные фоновые рисунки в каждом из тегов

В нашем случае результатом использования этого кода является меню с закругленными углами. Также в этом CSS файле имеются дополнительные строки, форматирующие заголовки третьего порядка (

), и несортированный список элементов меню.

Пока все идет нормально. Тип форматирования выбран, а отображение тегов

можно в любой момент изменить с помощью атрибута style (список всех параметров можно найти в дополнении). В первом примере мы использовали код –1, в этом примере мы используем код –3. Использование именно этого кода необходимо при работе с тегами

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

Изменение отображения HTML без изменения базовых файлов

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

Начиная с версии Joomla! 1.5.0 для решения этой проблемы используются так называемые виды (views). Каждый компонент имеет дополнительную директорию views, в которой могут храниться различные варианты его отображения. Например, у компонента контента com_content имеются следующие варианты отображения: archive, article, category, frontpage, section. Директории с такими названиями размещены в папке views и содержат файлы для поддержки того или иного способа отображения компонента. Каждая из этих директорий также содержит папку tmpl, которая в свою очередь содержит PHP файл с именем данного вида, в нашем примере – это article.php.

Рис. 27: Структура директорий папки виды (views)

Для того чтобы использовать данный метод, в директории шаблона необходимо создать еще одну папку. В данном примере такую папку нужно назвать com_content, поскольку мы хотим изменить разметку компонента content:

[ПутьКJoomla]/templates/joomla150_book_dw/com_content/.

Теперь можно копировать файл [ПутьКJoomla]/components/com_content/view/article/tmpl/default.php в только что созданную директорию и изменить его по своему вкусу. В первую очередь Joomla! использует виды (views) из папки шаблона, если они отсутствуют, то используются стандартные виды компонентов.

Web доступность и Joomla!

Важность доступности и удобства (web accessibility) веб страниц сложно переоценить. Во многих странах эта тема регулируется специальными правилами. Полную доступность и дружественность к пользователю, однако, достаточно сложно достичь. Но к этому нужно стремиться. При разработке сайта необходимо учесть требования и возможности как можно большего числа пользователей.

На следующую страницу