Методические материалы "Сайтостроение Joomla. Первые шаги"

Сайтостроение

Начало работы. Выбор шаблона

В начале работы создадим на рабочем столе свою папку, например Сайт Новонукутская СОШ, куда будем сохранять нужные файлы и архивы.

 Загрузить браузер Mozilla Firefox. В адресной строке прописать адрес сайта, через /administrator. Например:

В появившемся окне ввести логин: admin и пароль, выданный Вам ранее.

Откроется окно, в котором необходимо выбрать Менеджер шаблонов.

Менеджер шаблонов

Здесь есть несколько шаблонов, но мы с Вами сейчас попробуем загрузить новый шаблон, для этого: открыть новую вкладку,, щелкнув по + (см. рис.), в новом окне в адресной строке ввести адрес сайта http://school.lgv1109.ru, на котором можно выбрать шаблон.

В главном меню сайта, слева, выбрать пункт Шаблоны, раскроется список шаблонов, (можно открыть каждый, щелкая ЛКМ по выбранному шаблону). Чтоб нам было проще работать, пока мы выберем шаблон RedAura-TG (откройте, посмотрите и запомните название).

Чтобы загрузить шаблон на свой сайт, необходимо для начала в новой вкладке открыть сайт http://www.sheledu.ru/  далее выбрать temp/templates. На открывшейся странице из списка шаблонов найти нужный вам, в нашем случае RedAura-tg2.zip. Щелкните по нужному шаблону ПКМ (правой кнопкой мыши), в появившемся контекстном меню выберите пункт Сохранить объект как…, в открывшемся окне в меню слева выбрать Рабочий стол, далее найти свою папку из списка имеющихся, Открыть и Сохранить.

Изменение шапки сайта в шаблоне

На время свернем окно браузера (Интернет) в кнопку на панели задач. Откроем свою папку на рабочем столе, в папке должен быть архив RedAura-tg2.zip, щелкните по имени архива ПКМ и в появившемся меню выберите пункт Извлечь в RedAura-tg2/. Откройте последовательно папки RedAura-tg2/ RedAura-tg/images, найдите файл banner.png. щелкните по нему ПКМ, выберите пункт Свойства, вкладку Сводка, запомните значения свойств Ширина и высота, в нашем случае это 960 и 130 соответственно, они нам понадобятся для того, чтоб создав свою шапку сайта (далее так будем называть рисунок в заголовке сайта), заменить текущую, установив соответствующие размеры.

Далее создайте в любом графическом редакторе шапку сайта, добавив свои надписи, рисунки, фотографии. Мы будем учиться создавать с помощью программы PowerPoint. При помощи панели рисования создайте Шапку сайта, сохраните в свою папку под именем banner.png. Откройте папку, щелкните ПКМ по созданному файлу banner.png, выберите Открыть с помощью / MS Offise Picture Manager, в меню выбрать Изменить рисунки, далее в меню справа Изменение размера, в открывшемся меню Параметры изменения размера установить произвольные ширину и высоту 960 и 130, нажать ОК. Сохранить файл под тем же именем с заменой файла. Открыть папку, содержащую созданный вами файл  banner.png и архив RedAura-tg2.zip далее папку images, содержащую шаблонный файл banner.png. Перетащить ЛКМ созданный файл banner.png в папку images. На вопрос Заменить имеющийся файл? ответить утвердительно.

Теперь выгрузим шаблон на свой сайт, для этого на сайте своей школы в меню Расширения выбрать пункт Менеджер расширений. В открывшемся окне нажать на кнопку Обзор, найти свою папку, архив RedAura-tg2.zip Открыть, далее нажать на кнопку Загрузить и установить.

Далее выбрать пункт меню Расширения/Менеджер шаблонов. Напротив шаблона RedAura-tg установить галочку, далее нажать на кнопку Использовать по умолчанию, в верхнем правом углу.  Напротив шаблона должна появиться звездочка использовать по умолчанию.

Для того, чтоб просмотреть результат, нажмите на кнопку Просмотр сайта, откроется вкладка Home, в которой Вы можете просмотреть результат Вашей работы. Далее, после внесения изменений, чтоб каждый раз не открывать новую вкладку, просто переключитесь на имеющуюся вкладку Home и, щелкнув ПКМ, выберите пункт Обновить, и все изменения отобразятся.

Удаление логотипа в шапке сайта. Выполните следующие действия: открыть Панель управления, далее Менеджер шаблонов, выбрать вкладку Шаблоны, найти Параметры RedAura-tg, щелкнуть ЛКМ, далее выбрать Изменить шаблон главной страницы.  Откроется Исходный код страницы. Для быстрого поиска нужного кода нажать комбинацию двух клавиш Ctrl+F. В левом нижнем углу появится окно Найти, наберите в окне logo. (5 символов вместе с точкой), а затем нажмите Enter. Удалить найденный фрагмент как показано на рисунке, клавишей Delete.

Изменение шапки сайта (для шаблонов с TG):

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

В Меню Материалы, выбрать пункт Медиа-менеджер, в открывшемся окне будут отображаться файлы, загруженные на сайт ранее. В нижней части окна нажать кнопку Обзор, в появившемся окне Загрузка файла найти нужный файл, выделить его, нажать Открыть, и Загрузить. После того, как файл будет загружен, зайдите в меню Расширения/Менеджер шаблонов. Перейдите на вкладку Шаблоны, выберите свой шаблон и нажмите на Параметры (далее название вашего шаблона), затем нажать на команду Изменить css/styles.css, откроется исходный код, нажав комбинацию клавиш Ctrl+F в окошке Найти введите следующее: #header и нажмите Enter. В выделенном тексте #header {background:url(../images/banner.png) top center no-repeat; position:relative; height:130px; width:960px; margin:0 auto; border-bottom:1px solid green;} необходимо изменить следующее: заменить имя файла banner.png на имя нового файла, того, что вы загрузили ранее, скопировать из адресной строки основную часть адреса и вставить вместо многоточия.

Должно получиться следующее:

#header {background:url(http://novonukut.nukutr.ru/images/novoeimya.png) top center no-repeat; position:relative; height:130px; width:960px; margin:0 auto; border-bottom:1px solid green;}

Нажать Сохранить и закрыть, в окне Просмотра сайта, обновив страницу можно посмотреть на сохраненные изменения.

Изменение пароля:

Чтоб изменить текущий пароль, необходимо в меню Пользователи выбрать Менеджер пользователей, Создать пользователя, заполнить поля Информации об учетной записи (Имя, Логин, Пароль, Повторить пароль, e-mail). Ниже в Назначенные группы пользователей установить галочку напротив Super Users, остальные убрать, далее Сохранить и выйти.

Структура сайта. Категория. Материал. Меню.

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

Новости

О школе

Учительская

Обучающимся

Родителям

При выборе пункта Новости (О школе или Учительская), слева открывалось меню, содержащее в свою очередь следующие категории:

Новости	или	О школе	или	Учительская
Конкурсы		История		Администрация
Спортивные		Современная история		Педагогический коллектив
Олимпиады
Мероприятия		контакты		УВП

Например, категория Педагогический коллектив содержит следующие подкатегории: МО Учителей начальных классов, МО учителей математики и т.д. и, конечно, подобрать материалы, чтоб соответствовал тематике каждой категории и/или подкатегории. Определившись, приступаем к созданию структуры сайта.

Создание верхнего меню.

В пункте Меню выбрать Менеджер меню – Создать меню, в Параметрах меню записать к примеру следующее: Заголовок – верхнее меню; Тип меню – verhnee. Сохранить и закрыть.

Для того чтобы модули было видно далее в просмотре сайта выполним следующие действия:

   Открыть Менеджер шаблонов (Расширения/Менеджер шаблонов), в правом верхнем углу нажать Настройки, в открывшемся окне  переключить на Включено, Сохранить и закрыть.

Заполнять сайт будем в следующем порядке: сначала создадим Категории, затем на втором шаге Материалы для каждой категории, И на третьем шаге создадим Меню, к которому прикрепим все Категории того пункта Меню, которое вы создаете в данный момент.

Cоздание Категорий

В меню Материалы выбрать Менеджер категорий/ Создать категорию. В открывшемся окне ввести Заголовок, Сохранить и закрыть. Если эта категория является Подкатегорией другой категории, то напротив Родитель необходимо из раскрывающегося списка выбрать Категорию, к которой она относиться. Например, категория МО учителей начальных классов является подкатегорией Педагогический коллектив.  (Если необходимо изменить уже существующую категорию

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

Создание Материалов

В меню Материалы выбрать Менеджер материалов/ Создать материал. В открывшемся окне ввести Заголовок, из раскрывающегося списка выбрать категорию, к которой создаваемый материал относится, например Материал Историческая справка будет относиться к Категории История. Ниже в окне Текст материала введите текст, отредактировав его при помощи панели инструментов. Внизу окна есть следующие кнопки:

 

Изображение, позволяет добавить в текст рисунки, фотографии, предварительно загруженные в Медиа-менеджер или при помощи кнопки Обзор, Загрузить из указанного места в Медиа-Менеджер, затем выбрать нужное изображение и нажать кнопку Вставить. Затем выделив изображение, щелкнуть по кнопке Images на панели инструментов. В открывшемся окне установить параметры изображения (Width-ширина, Height-высота, Border-рамка вокруг изображения, Hspace-горизонтальный отступ, Vspace-вертикальный отступ, Align-выравнивание). Все изменения будут отображаться на экране сразу. Ок. Сохранить.

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

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

Создание Меню

В Меню выбрать верхнее меню, далее создать пункт меню (или Меню верхнее /меню, в открывшемся окне нажать на кнопку Создать). В появившемся окне выбрать menu. Далее написать Заголовок, выбрать Позицию, справа Выбор меню выбрать верхнее меню, Сохранить и закрыть. Таким же образом создать подменю, указав Родительский элемент.

 

 

 

Создание модуля меню.

Расширение – Менеджер модулей – Создать, в открывшемся окне Выбор типа модуля выбрать Menu.