Практическая работа 13 Тема 8/2. Управление дизайном внешнего

МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Практическая работа 13
Тема 8/2. Управление дизайном внешнего
интерфейса Web-ресурса на базе конструктора
CMS Joomla!
Цель —
освоить
правила
управления
установленными
подключения и редактирования новых шаблонов.
шаблонами,
Задание:
1. Сменить шаблон дизайна внешнего интерфейса учебного Web-ресурса.
2. Установить новые шаблоны дизайна внешнего интерфейса учебного Webресурса.
3. Включить в работу модуль Выбор шаблона.
4. Изучить файловую структуру шаблона в Joomla!
5. Изменить элементы дизайна шаблона, выбранного для учебного Webпортала.
Технология выполнения
13.1. Управление шаблонами внешнего интерфейса
учебного Web-ресурса на базе Joomla!
Управление шаблонами осуществляется при помощи менеджера шаблонов,
запускаемого в адмицентре из пункта меню Сайт — Шаблоны — Шаблоны
сайта.
По умолчанию при установке портала на базе Joomla! в его комплекте имеется
два шаблона внешнего интерфейса madeyourweb и rhuk solarflare ii. Причем
по умолчанию для внешнего интерфейса применяется последний.
Сменить текущий шаблон на другой шаблон — madeyourweb. Для этого
необходимо выполнить следующие действия:
1. В интерфейсе
менеджера
шаблонов
выделить
мышкой
позицию
madeyourweb (при помощи соответствующего флажка) и нажать
на пиктограмму «По умолчанию» (рис. 13.1). Этими действиями шаблоном
по умолчанию
для
внешнего
интерфейса
назначается
шаблон
madeyourweb.
2. Результат можно посмотреть через предпросмотр портала (Сайт —
Предпросмотр сайта — В новом окне) — рис. 13.2.
1
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рис. 13.1. Список установленных шаблонов дизайна внешнего интерфейса портала
с возможностью их предпросмотра
Рис. 13.2. Пример внешнего интерфейса с шаблоном дизайна madeyourweb
2
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
3. Можно назначать другие шаблоны отдельным позициям системы навигации
при помощи кнопки Назначить (рис. 13.3) — смена шаблона дизайна будет
происходить при выборе этой позиции в меню внешнего интерфейса.
Назначьте шаблон rhuk_solarflare_ii пункту меню Ссылки (рис. 13.4),
затем нажмите на кнопку Сохранить и проверти результат во внешнем
интерфейсе, переключаясь по пунктам меню.
Рис. 13.3. Месторасположение кнопки Назначить
Рис. 13.4. Список назначения выбранного шаблона дизайна для пунктов меню
13.2. Установка новых шаблонов для учебного Webресурса на базе Joomla!
Для Web-ресурсов, создаваемых при помощи Joomla!, создано и бесплатно
распространяется через сайты технической поддержки большое количество
готовых шаблонов. Есть и коммерческие предложения по созданию шаблонов
по заказу клиентов.
1. Установить новые варианты шаблонов гостевого интерфейса. Для этого
выбрать
в меню
панели
управления
адмицентра
пункт
3
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Установка/удаление — Шаблон сайта (рис. 13.5) — откроется форма
загрузки файлов (рис. 13.6).
Рис. 13.5. Меню раздела Установка/удаление
Рис. 13.6. Форма загрузки файла нового шаблона
2. При помощи кнопки Обзор выбрать из папки Free_Access/Разработка
электронного портала/Материалы по работе с Joomla!/Шаблоны
Joomla! любой файл, например monica.zip (рис. 13.7) и нажать кнопку
Загрузить и установить (рис. 13. 8).
Рис. 13.7. Список файлов с шаблонами дизайна для гостевого интерфейса
4
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рис. 13.8. Пример формы с выбранным файлом шаблона
3. Если шаблон был заархивирован, то автоматически будет выполнена его
разархивация, загрузка в каталог templates и установка (рис. 13.9).
Рис. 13.9. Положительный результат установки нового шаблона
4. Установить загруженный шаблон в качестве шаблона по умолчанию для
внешнего интерфейса: Сайт — Шаблоны — Шаблоны сайта (рис. 13.10)
и проверить
его
применение
во внешнем
интерфейсе:
Сайт —
Предпросмотр сайта — В новом окне (рис. 13.11).
Рис. 13.10. Дополненный список установленных шаблонов
5
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рис. 13.11. Внешний вид внешнего интерфейса с шаблоном monica
5. Самостоятельно установить еще 2 — 3 новых шаблона и настроить
их применение для отдельных страниц учебного Web-портала. Результат
показать преподавателю.
13.3. Использование модуля смены шаблонов
пользователем
В исходном комплекте модулей Joomla! имеется модуль Выбор шаблона,
позволяющий пользователям менять шаблоны внешнего интерфейса, однако
по умолчанию он выключен. Ознакомьтесь с работой этого модуля. Для этого
выполните следующие действия:
1. При помощи менеджера модулей (Модули — Модули сайта) включить
на сайте модуль Выбор шаблона.
2. Перейти во внешний интерфейс и найти модуль Выбор шаблона, при
помощи которого сменить текущий шаблон (рис. 13.12).
Рис. 13.12. Модуль Выбор шаблона во внешнем интерфейсе
13.4. Файловая структура шаблонов Web-ресурса
на базе Joomla!
Каждый шаблон представляет собой каталог (рис. 13.13) со стандартным
по именованию набором файлов и папок, который копируется в корневой каталог
templates (рис. 13.14).
6
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рис. 13.13. Пример состава каталога шаблона monica:
в каталоге images — все графические объекты шаблона;
в каталоге css — набор стилей;
в файле templateDetails.xml — список всех элементов шаблона;
в файле index.php — структура шаблона.
Рис. 13.14. Набор установленных шаблонов портала
Добавление нового шаблона можно выполнить и вручную, только требуется
предварительно самостоятельно разархивировать требуемый шаблон.
Добавить ручным способом еще один шаблон в каталог templates и убедиться,
что он появился в списке шаблонов.
13.5. Редактирование элементов шаблона дизайна
учебного Web-ресурса на базе Joomla!
Редактирование шаблона в Joomla! условно делится на две части:
7
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
 во-первых, — это редактирование цветового и графического оформления
при помощи стилей CSS и графических файлов;
 во-вторых, — это изменение схемы расположения модулей по типовым
позициям, которые можно отобразить при помощи пункта меню Сайт —
Предпросмотр сайта — Внутри с позициями (рис. 13.15).
Рис. 13.15. Пример позиций шаблона для размещения результатов работы модулей
Сведения о назначении и содержании файлов шаблона представлены в тексте
лекции по теме 8. Используя материал этой лекции, выполнить следующее
редактирование шаблона gardenscape.
1. Найти
в каталоге
шаблона
gardenscape
графический
файл
images/header.png (рис. 13.16) размером 750×150 пикселей, отображаемый
в верхней части шаблона.
Рис. 13.16. Графический файл header.png в шаблоне gardenscape
2. При помощи любого графического редактора изменить вид этого файла или
заменить его другим, но примерно такого же размера. Если новый файл
будет иметь другое имя, то следует внести соответствующие исправления
в файлы index.php (рис. 13.17) и templateDetails.xml (рис. 13.18).
Рис. 13.17. Пример строки html-кода файла index.php в шаблоне gardenscape
Рис. 13.18. Пример секции images xml-кода файла templateDetails.xml в шаблоне gardenscape
8
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
3. Найти в структуре файла index.php фрагмент кода,
графический фон шаблона (рис. 13.19) и заменить его.
формирующего
Рис. 13.19. Фрагмент html-кода файла index.php, формирующего графический фон шаблона
4. Познакомиться со стилями, используемыми в шаблоне gardenscape (файл
css/template_css.css) и поэкспериментировать с ними, изменив по своему
усмотрению.
5. Познакомиться с позициями модулей, используемыми в данном шаблоне
(Сайт — Предпросмотр сайта — Внутри с позициями) — рис. 13.20.
Рис. 13.20. Позиции шаблона gardenscape
9
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
6. В структуре файла index.php добавить в правую колонку под позицией right
еще одну позицию, например user3 (рис. 13.21 и 13.22) и переместить
в нее какой-либо модуль, например модуль авторизации пользователей,
и проверить его работу.
Рис. 13.21. Фрагмент кода в index.php, дополняющего позицию в шаблон
Рис. 13.22. Пример расположения добавленной позиции user3 в структуре шаблона
7. Следует помнить, что по молчанию в шаблонах Joomla! может быть
использовано до 27 различных позиций, список которых можно увидеть при
помощи пункта Сайт — Шаблоны — Позиции модулей (рис. 13.23).
Всего в шаблонах Joomla! может быть использовано до 50 позиций,
т. е. еще
23 позиции
может
определить
администратор,
записав
их в таблицу позиций.
10
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рис. 13.23. Список возможных позиций модулей в шаблонах для Joomla!
8. Изменить стиль вывода модулей в любой позиции, изменяя второй параметр
мамбота mosLoadModules (’left’,-1). Назначение этого параметра описано
в материалах лекции. Следует отметить, что параметры -2 и -3 (стиль
mambo) можно применять не для любого шаблона, в частности в шаблоне
gardenscape они не используются. Эти параметры можно проверить
на примере шаблона monica.
Задание на самостоятельную работу
На основе понравившегося шаблона создать свой вариант дизайна внешнего
интерфейса учебного портала myportal. Тем, кто не может самостоятельно
сформировать
дизайн,
можно
взять
за основу
дизайн
портала
МБИ
(http://www.ibi.spb.ru).
11