Дипломная работа: Возможности профессиональной ориентации учащихся 10-11 классов при обучении элективному курсу "Основы веб-дизайна"

Рис. 11. Панель входа в административную часть.

II. Дистанционное управление сайтом.

Работать над структурой сайта и заполнение его содержанием ведется через административную часть (рис. 12).

Рис. 12. Административная часть сайта

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

Сайт на Joomla может иметь как линейную структуру, когда статьи не относятся ни к разделам, ни к категориям, так и иерархическую. В таком случае мначала создаются «Разделы» сайта. Внутри «Разделов» создают «Категории», где размещаются «Статьи». К тексту статей могут подключаться различные файлы. Для их закачки на сервер, удаления, организации структуры хранения на сайте в Joomla предусмотрено управление медиа-файлами. Когда структура сайта создана и написаны основные статьи, материалы подключаются к меню. Изначально есть только Главное меню, но предусмотрена возможность добавлять дополнительные блоки меню и настраивать их положение на странице по своему усмотрению: слева, справа, вверху, внизу, вертикально, горизонтально.

«Язык» – здесь устанавливаются языковые настройки.

В разделе «Пользователи» прописывается разделение прав между пользовательскими группами.

«Общие настройки» позволяют отключить в настройках показ сайта (рис. 13.)

Рис. 13. Страница общих настроек сайта

В этом случае вместо главной страницы сайта посетители увидят только краткое сообщение в строке оффлайн (рис. 14).

Рис. 14. Оффлайн сообщение

Так же в разделе «Общие настройки» в блоке «Система» в можно разрешить или запретить регистрацию пользователей. Здесь же справа в блоке «Параметры сессии» находится настройка «Время жизни сессий». Это период неактивности пользователя, по истечении которого автоматически прекращается сеанс связи. Для дальнейшего редактирования сайта придется заново вводить пароль. Чем этот период дольше, тем ниже безопасность.

Чтобы выполненные настройки вступили в силу, их необходимо сохранить. Для этого в верхней правой части окна находятся крупные кнопки: «Сохранить» (сохранить и вернуться в панель управления), «Применить» (сохранить изменения и остаться на текущей странице для продолжения работы), «Закрыть» (вернуться в панель управления без сохранения внесенных изменений) и «Помощь».

Учиться методам работы в системе управления контентом CMS Joomla будем на примере создания сайт учебного заведения, который будет иметь три раздела: новости, школьная жизнь, родителям, и категории: визитка, учителя, контакты, расписание уроков, экскурсии, сообщение нам, советы психолога. Каждая категория заполняется статьями. Создавать сайт необходимо по иерархии.

Для создания разделов перейти в «Разделы», на которой расположены кнопки «Опубликовать» (показать на сайте), «Скрыть» (временно отключить показ на сайте), «Копировать», «Удалить» (поместить в корзину), «Изменить» (редактировать), «Новый» (создать новый), «Помощь» (рис. 15)

Рис. 15. Страница разделов сайта

Главная страница с новостями создается в Joomla автоматически, поэтому первым будет раздел «О школе». Для создания раздела необходимо нажмем кнопку «Создать».

В открывшейся форме нужно заполнить поля: вписать название раздела, заполняется латинскими буквами, вместо пробела использовать тире, указать публиковать ли раздел сразу на сайте или нет, установить уровень доступа к разделу, вписать пояснения. Кроме текста в описание раздел в можно добавить рисунок из тех, что расположены в папке images/stories, и задать его выравнивание. Описание и рисунок не являются обязательными для разделов (рис.16).

Рис. 16. Создание разделов сайта

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

Категории создаются в соответствующем разделе «Категории». Интерфейс страницы категорий аналогичен странице разделов, за исключением новой кнопки «Перенести», позволяющей переместить категорию из одного раздела в другой, и автофильтра, показывающего категории конкретного раздела (рис.17).

Рис. 17. Страница менеджера категорий

Добавление новой категории аналогично добавления нового раздела. Исключение составляет поле «Раздел», где указывается раздел, к которому должна быть отнесена новая категория (рис. 18).

Рис. 18. Создание и редактирование категорий

После заполнения информации и сохранения изменений, в таблице получатся перечень категорий (рис. 19).

Рис. 19. Заполненная страница менеджера категорий

III. Наполнение сайта контентом

В системе управления контентом CMS Joomla содержимое статей создается, форматируется и редактируется с помощью online-редакторов. Так же имеется возможность вставлять информацию копированием из текстового редактора. В сборки Joomla, обычно, включают редактор TinyMCE, но могут существовать и другие. Прежде чем, как начать работу с редактором необходимо переключить его в расширенный режим.

Для настройки редактора, выбираем в меню пункт «Расширения» и указываем в выпадающем меню «Менеджер плагинов» (рис. 20).

Рис 20. Вызов менеджера плагинов

В перечне плагинов выбираем TinyMCE и открываем его нажатием на название. В раскрывшемся окне меняем функциональность на расширенный и сохраняем изменение (рис. 21).

Рис. 21. Редактирование плагина TinyMCE

После того, как текстовый редактор TinyMCE настроем, можно добавлять информацию на сайт. Для чего открываем «Добавить материал» (рис. 22).

Рис. 22. Создание материала для сайта

Создание нового материала начинается с указания названия статьи,выбра раздела и категории, к которым она будет относиться. Так же имеется возможность разрешить или запретить публикацию и указать размещение начала статьи на главной странице.

Ниже находится блок online-редактора, работа в котором аналогична работе в текстовом редакторе. Все кнопки снабжены русифицированными подсказками. Рассмотрим некоторые кнопки редактора (таблица 1).

Таблица 1. Кнопки online-редактора

В правой части окна расположен информационный блок; блок параметров статьи, где можно указать автора, уровень доступа, сроки начала и окончания публикации статьи; блок особых настроек параметров вывода веб-страницы на сайте; при желании, можно также настроить индивидуальные META-тэги.

Посмотреть весь имеющийся на сайте материал позволяет раздел «Все материалы» (рис. 23)

Рис. 23. Заполненная страница менеджера материалов

Внешний вид страницы похож на интерфейс страниц «Разделы» и «Категории», исключением являются кнопки, с помощью которых статью можно поместить в архив и извлечь из архива, и «Настройки».

Кнопка «Настройки» вызывает окно параметров, в котором возможно наладить конфигурацию как всего материала сайта так и отдельной статьи (рис. 24).

Рис. 24. Настройка конфигурации материалов

Все имеющиеся статьи, для того, чтобы они отображались на сайте, должны быть подключены к меню. Редактировать необходимо «Главное меню»,находящееся в «Все меню» (рис. 25)

Рис. 25. Переход к главному меню

В появившемся окне изменим название главной страницы на «Новости» (рис. 26).

Рис. 26. Страница главного меню

Здесь же справа находятся «Основные параметры», определяющие, статьи вводную часть которых публиковать на главной странице в полную ширину страницы, статьи, вводную часть которых публиковать в колонках, или в виде коротких ссылок с названия статьи. Здесь же задается количество столбцов текста на странице. С помощью индивидуальных настроек в раскрывающихся панелях: «Дополнительные параметры», «Параметры компонента», «Параметры системы» – можно произвести, практически, любое структурное оформление выводимой информации (рис. 27).

Рис. 27. Настройка пунктов меню

При создании нового пункта меню открывшемся окне необходимо указать тип.

В качестве примера рассмотрим пункт меню «О школе», который не будет привязанный гиперссылке. Для этого выберем тип элемента меню «Separator», который предусматривает вывод разделительной линии, состоящей из набора символов (рис. 28)

Рис. 28. Панель выбора типа меню

Разделитель не является гиперссылкой, в связи, с чем необходимо, чтобы все пункты и подпункты были видны сразу.

Для такой настройки модуля меню необходимо перейти в меню админцентра, выбрать «Расширения» – «Менеджер модулей» и в открывшемся окне щелкнуть по строке «Главное меню». Указать, чтобы в настройке «Всегда показывать подпункты» было «Да» (рис. 29).

Рис. 29. Редактирование модулей

Следующий пункт «Визитка» является подпунктом к пункту «О школе». К нему необходимо подключить сам материал. При выборе типа нового пункта меню указать в пункте «Материалы» «Стандартная шаблон материала» (рис. 30).

Рис. 30. Выбор типа шаблона материала

Далее требуется вписать название статьи и в раскрытом списке «Родительский пункт меню» указать «О школе», тогда новый пункт станет подпунктом к выбранному и в «Основные параметры» отметить нужную страницу (рис. 31).

Рис. 31. Подключение пункта меню в виде стандартного шаблона материала

К пункту «Школьная жизнь» можно подключить соответствующий раздел. Раздел может выводиться или как «Стандартный шаблон раздела », или как «Шаблон блога раздела».

Подпункты к пункту «Школьная жизнь» уместно подключить, как категории. Здесь, также возможны варианты: «Шаблон блога категории» или «Шаблон списка категории». Для экскурсий лучше подойдет блог, а для расписания уроков – список.

При необходимости возможно изменить тип содержимого, подключаемого к определенному пункту меню, перейдя в редактирование и нажав кнопку «Изменить тип».

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

IV. Дизайн сайта.

На данный момент дизайн сайта возможно изменять использую многочисленные шаблоны для Joomla с открытой лицензией.

Шаблон — это тип визуального редактирования, который накладывается на контент. Шаблон определяет цвета, шрифты символов, их размеры, фоновые изображения, интервалы и разбиение страницы на части. Шаблон состоит, по крайней мере, из одного файла HTML для структуры страницы и одного файла CSS для дизайна. Он может также иметь намного более сложную структуру, чтобы подготовить контент Joomla для свободы от барьеров либо для совершенно других целей.

Шаблоны предоставляются в заархивированном виде. При этом необходимо, чтобы файл имел расширение .zip.

Чтобы подключить шаблон к сайту нужно в меню админцентра выбирать «Расширения» – «Установкить/Удалить».

В открывшемся окне, с помощью кнопки «Обзор», выбрать скаченный файл с шаблоном и нажать на кнопку «Закачать файл & Установить».

Далее переключить дизайн сайта на новый шаблон. Для этого в админцентре выбрать меню «Расширения» – «Менеджер шаблонов».

В открывшемся окне выбрать установленный шаблон и нажмем кнопку «По умолчанию».

В Joomla предусмотрены некоторые настройки шаблона, которые настраиваются в окне «Шаблоны». Нажав кнопку «Изменить» в блоке «Привязка к меню» можно указать, на каких страницах использовать именно этот шаблон. Если привязка идет к нескольким пунктам меню, то они выбираются в списке, удерживая нажатой клавишу «Ctrl».

Создание нового шаблона является очень трудоемкой задачей. Поэтому удобно вносить свои коррективы в уже имеющиеся шаблоны сайтов, например, изменять графические объкты. Установленные шаблоны дизайна размещаются на сайте в папке: templates/имя_шаблона, а рисунки к шаблону, соответственно, в папке: templates/имя_шаблона/images. Для того, чтобы заменить изображение в шаблоне нужно создать новый графический объект того же геометрического размера, что и заменяемый, сохраните его под тем же именем, замените старый графический объект новым.

V. Компоненты, модули и плагины.

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

Модули является небольшими приложениями, которые выводят различную информацию в указанные области созданной веб-страницы, которые определяется шаблоном дизайна. Примеры модулей – меню, поиск, авторизация, статистика.

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

Компоненты, модули и плагины разработчики приложений представляются в виде архивов, содержащие кроме самих программ еще и специальные установочные файлы. Имена архивов с компонентами включают в себя префикс «com_», с модулями – префикс «mod_», а с плагинами – «plg_» или «bot_». Иногда для поддержки работы компонента, пишут специальные модули, и плагины. Тогда, обычно, все отдельные заархивированные элементы архивируют повторно в один общий архив. В этом случае перед установкой следует сначала распаковать этот общий архив.

Установка компонентов, модулей и плагинов в Joomla производится индентично через меню админцентра в пункте «Расширения», где необходимо выбрать первую строчку «Установить/Удалить». Если при попытке загрузить и установить модули или плагины возникает сообщение об ошибке, то требуется включить плагин System - Legacy. Для этого зайти в меню «Расширения» – «Менеджер плагинов» и в выпадающем меню «Выберите тип» указать тип system и выбрать «Система - Обратная совместимость» (legacy). Включить его (рис. 32)

Рис. 32. Панель загрузки модулей и плагинов

Чтобы установленные элементы начали работать их следует включить. Для этого с помощью меню админцентра перейдите в одно из окон управления (рис. 33):

Рис. 33. Переходы к окнам управления

Включение и отключение компонентов производится через «Расширения» – «Установить/Удалить» – вкладка «Компоненты»

В столбце «Разрешен» мышью поменять на разрешающий или запрещающий значок (рис. 34):

Рис. 34. Включение и отключение компонентов

Установленные и включенные элементы следует настроить.

Рассмотрим установку плагина rustypo или «Русская типографика» который преобразует ошибочно набранный текст при выводе на страницы сайта в грамотную форму. Например, устанавливает правильные открывающие и закрывающие кавычки, заменяет при необходимости знак «минус» на значок «тире».

Страницы: 1, 2, 3, 4, 5