Создание шаблонов Joomla — страница 4 из 5

Рис. 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 команды

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) веб страниц сложно переоценить. Во многих странах эта тема регулируется специальными правилами. Полную доступность и дружественность к пользователю, однако, достаточно сложно достичь. Но к этому нужно стремиться. При разработке сайта необходимо учесть требования и возможности как можно большего числа пользователей.

Широкая доступность (accessibility) сайта – это то же самое, что и рампа около ступенек в супермаркете для инвалидов на креслах-каталках, или звонок, дублирующий зеленый цвет светофора, для слепых.

Доступность – это огромное преимущество для любой компании, предлагающей публичный сервис. Каждый посетитель сайта – это потенциальный клиент. Поэтому, тема доступности на самом деле выходит далеко за рамки обслуживания инвалидов и пожилых людей.

Критерии доступности веб сайтов

Чтобы понять, какие изменения необходимо внести, чтобы сделать сайт более доступным, обратите внимание на следующие критерии:

Ясность: Содержание любого сайта должно быть ясным и легким для понимания. Информация должна быть там, где пользователь ожидает ее увидеть.

Совместимость с веб обозревателями: Существует масса различных веб обозревателей. От текстового Lynx на консоли Linux и обозревателей для мобильных телефонов и КПК до веб обозревателей под OSX, Unix, Windows или OS2. Все они предполагают работу с определенным разрешением, отображают или не отображают графику, могут или не могут выполнять JavaScript, могут или не могут проигрывать Flash ролики и т.д. Не забывайте также про программы для распознавания символов и, например, клавиатуры с азбукой Брайля для слепых. Такие программы тоже являются обозревателями!

Корректный исходный код и логически структурированная архитектура страницы:Навигация, разметка и контент – это важные аспекты построения веб страницы. Они должны быть логично построены и семантически правильны. Стандартом в этом является XHTML. Ваш исходный код не должен содержат ошибок!

Контраст: Дизайн сайта должен быть в достаточной мере контрастным, чтобы удовлетворять требованиям людей с дефектами зрения.

Графика и изображения: Большинство устройств вывода для инвалидов не могут отображать графику. Поэтому альтернативный способ подачи информации без использования графических элементов должен быть предусмотрен.

Размеры шрифтов: Шрифты должны быть читаемы и на старых или альтернативных системах.

Основные требования к доступности изложены по адресу http://www.section508.gov