План урока по МДК 02.01.

На число Для группы МЦИ ­16 предмет Тема  ПМ .02 Уч/пр Утверждаю Зам. директора по УПР ГБПОУ ЭМК _____________Майсурадзе Г.Ш.                                                                                                                                    «___»_________________2018г План урока Тема : Наполнение сайта Цели:  Научить наполнять web­сайт, работающего под CMS Joomla! 1.5, контентом. Задачи: 1. Сформировать знания редактированию материала и добавления в него изображений. 2. Сформировать навыки наполнения web­сайта работающего под CMS Joomla! 1.5. Проделав все уроки сайт практически готов, но остался еще один немало важный момент ­ это его наполнение. Прежде чем приступить к написанию статей, необходимо продумать структуру сайта, пункты меню, где и какой раздел будет располагаться и т.п. Структура меню На созданном шаблоне сайта имеется два меню, верхнее и левое. Так как сайт посвящен яхтам и всему что с ними связано, расположим пункты меню следующим образом: Левое меню:  Яхты ­ содержит вводные части трех вложенных статей o Парусные ­ описание парусных яхт o Моторные ­ описание моторных яхт o Подводные ­ описание подводных яхт  Постройка яхты ­ небольшая статья о том, как строятся яхты  Яхтинг ­ описание этого парусного спорта  Корпоративный яхтинг ­ рассказ о данной отрасли доходов яхт­клубов  Парусные регаты ­ содержит вводную часть о регатах и ссылки на вложенные пункты меню o Гонки в гавани ­ описание данного вида гонок o Гонки на открытой воде ­ описание данного вида гонок o Классы яхт ­ классификация яхт Верхнее меню:  Главная ­ переход на главную страницу  Яхтинг ­ описание этого парусного спорта  Галерея ­ переход на страницу с фотографиями различных яхт  Вопрос­Ответ ­ раздел, в котором любой желающий может задать вопрос и получить ответ на сайте (через комментарии данной страницы) Удаление demo­информации с сайта При   установке   CMS   Joomla!   1.5   была   установлена   demo­информация,   для   наглядного представления системы, необходимо её удалить. 1) Запустите Денвер, нажав по значку Start Denwer на рабочем столе. 2) Зайдите в административный раздел сайта Яхт Клуба. 3) Перейдите в раздел Материалы – Менеджер материалов. 4)   Удалите   все   материалы,   которые   были   созданы   не   вами.   Для   этого   отметьте   их   и нажмите по кнопке В корзину на панели менеджера материалов. 5) Перейдите в раздел Материалы – Менеджер корзины. 6) Очистите корзину, окончательно   удалив   все   материалы   из   неё.   Для   этого  выберите материалы   и   нажмите   по   кнопке Удалить,   в   следующем   диалоге   подтвердите   свое действие. 7) Откройте Все меню – Главное меню. 8) Удалите все пункты меню. Для этого отметьте их и нажмите по кнопке В корзину на панели менеджера меню. 9) Перейдите в раздел Все меню – Корзина меню. 10) Очистите корзину, окончательно удалив все пункты меню из неё. Для этого выберите их и нажмите по кнопке Удалить, в следующем диалоге подтвердите свое действие. Так как лишние модули и пункты верхнего меню были уже убраны в предыдущей теме, то можно приступить к непосредственному наполнению web­сайта. Редактирование разделов и категорий 11)   Откройте   менеджер   категорий,   для   этого   нажмите Материалы – Менеджер категорий. В разделах необходимо будет три пункта: Статьи, Новости, Галерея. Остальные можно удалить. 12)   Создайте   новые   категории: Яхты и Парусные   регаты. Поместите   их   в раздел Статьи. Добавьте   краткое   описание   для   категории Парусные   регаты,   материал можно взять в папке с дистрибутивами (/lab_11/Парусные регаты). 13) Откройте менеджер разделов, для этого нажмите Материалы – Менеджер разделов. В   разделах   необходимо   будет   три   пункта: Статьи, Новости, Яхты.   Остальные   можно удалить. Написание материалов 14) Перейдите в раздел Материалы – Менеджер материалов. 15) Создайте новую статью, нажав по кнопке Создать. 16) Напишите статью Парусные яхты, текст статьи и изображения необходимые для её написания можно найти в папке с дистрибутивами (/lab_11/Парусные яхты). Для этого необходимо сделать следующее:  Заполнить   поля: заголовок,   псевдоним (лучше   использовать   текст   аналогичный заголовку, но набранный транслитом (zagolovok)) (Рис. 11.1) Рисунок 11.1. Заголовок и Псевдоним материала  Выбрать раздел ­ Статьи (Рис. 11.2)  Выбрать категорию ­ Яхты (Рис. 11.2) Рисунок 11.2. Раздел и Категория материала  Указать параметры, что материал опубликован, а при необходимости сделайте его отображение на главной (Рис. 11.3). Рисунок 11.3. Статус опубликованности материала  Набрать текст (или скопировать его из подготовленных документов, как в данном случае   исходный   текст  можно  найти  в   файле /lab_11/Парусные яхты/парусные яхты.txt), после набора текста его необходимо отформатировать (выделить абзацы, установить заголовки, выделить тексты курсивом и т.п.)  Расположить   изображения   в   статье. Для   вставки   изображений   в   статью   их необходимо   предварительно   загрузить   на   сайт.   Загрузка   изображений   может осуществляться способами:  1. При помощи FTP­клиента, если сайт располагается на удаленном хостинге (или при   помощи   простого   копирования   изображений   в   папку [Путь_к_Joomla]   / двумя images stories) 2. Во время вставки изображения, через визуальный редактор в CMS Joomla! 1.5. При этом файлы также помещаются в папку ­ [Путь_к_Joomla] / images / stories. /     Подробнее рассмотрим вставку изображений в статью. Для этого необходимо:     1. Уставить курсор в то место, куда предполагается вставить изображение;     2. После этого нажать на кнопку Вставить/Редактировать изображение ­  появиться диалог менеджер изображений (Рис. 11.4). , должен Рисунок 11.4. Раздел и Категория материала     3. Создайте новую папку под изображения статей, для этого нажмите по кнопке «Новая папка» ­       4. Перейдите на папку, в которую необходимо загрузить изображения (Рис. 11.5). , имя папки укажите Articles. Рисунок 11.5. Отображение содержимого папки «Articles»     5. Загрузите изображения из папки с дистрибутивов /lab_11/Парусные яхты. Для этого нажмите   по   кнопке Загрузка ­   , для   добавления   изображений   в   список   используйте кнопку Add,   после   добавления   изображений   в   список   загрузки   нажмите   по кнопке Загрузить (Рис. 11.6). Рисунок 11.6. Диалог загрузки изображений<     6. После загрузки файлов на сайт можно вставлять изображения в статью. Выберите необходимое   изображение,   укажите   для   него   параметры   (Рис.   11.7)   и   нажмите   по кнопке Вставить. Рисунок 11.7. Диалог загрузки изображений     7. Пример готовой статьи, после вставки изображений, представлен на рисунке 11.8. Рисунок 11.8. Результат вставки изображений в редакторе   Вставьте   разрыв   на Подробнее, нажав   после   первого   абзаца   по 17) кнопке article.readmore ­   (Рис. 11.9). Рисунок 11.9. Поле для разбиения текста на вводную и полную части (ссылка "Подробнее") 18) Сохраните созданную статью нажав по кнопке Сохранить ­  19)   Просмотрите   созданную   статью   на   сайте,   она   должна   располагаться   на   главной странице. 20)   По   аналогии   добавьте   остальные   статьи   на   сайт,   используя   материалы располагающихся в папке с дистрибутивами (/lab_11/). Обратите   внимание,   что   материалы: Парусные   яхты, Моторные   яхты и Подводные яхты ­ должны располагаться в категории Яхты. Материалы: Гонки в гавани, Гонки на открытой   воде и Классы   яхт ­   должны   располагаться   в   категории Парусные   регаты. Остальные материалы должны располагаться в категории Статьи. 21)   Для   статьи   «Вопрос­Ответ» установите   в   параметрах,   чтобы   данная   статья не отображалась на главной странице, а также принудительно включите работу компонента JComments.   Для   принудительного   включения   компонента   комментариев   необходимо расположить   курсор   в   любой   части   материала   (например,   в   конце)   и   нажать   на кнопку «JComments ON» ­  Наполнения меню По завершению написания статей можно приступить к наполнению меню. 22) Перейдите в раздел Все меню – Главное меню. Оно должно быть у Вас пустое, после подготовки в предыдущих уроках. 23)   Создайте   новый   пункт   меню,   указав тип ­ Шаблон   блога   категории.   Назовите его Яхты. В основных параметрах выберете:      категорию ­ Статьи/Яхты;  во всю ширину ­ 0; вступление ­ 3; колонки ­ 1; ссылки 4. Остальные значения параметров оставьте по умолачнию. 24) Нажмите по кнопке Сохранить. 25)   Создайте   три   вложенные   пункты   для Яхты.   Укажите   тип ­ Стандартный   шаблон материала. В качестве выбранных материалов используйте следующие статьи: Парусные яхты, Моторные яхты, Подводные яхты (Рис. 11.10). Рисунок 11.10. Меню "Яхты" с вложенными подменю пунктами 26)   Создайте   пункты   меню   с   типом Стандартный   шаблон   материала,   для статей: Постройка яхты, Яхтинг, Корпоративный яхтинг. 27)   Создайте   новый   пункт   меню,   указав тип ­ Шаблон   списка   категории.   Назовите его Парусные Регаты. В параметрах укажите:   категория ­ Статьи/Яхты;  количество ссылок ­ Все;  заголовок таблицы ­ скрыть;  фильтр ­ скрыть;    разбиение на страницы ­ скрыть; показать выбор ­ скрыть; показать ссылку на ленту ­ нет. Остальные значения параметров оставьте по умолчанию. 28) Создайте три вложенных пункта для Парусные Регаты. Укажите тип ­ Стандартный шаблон   материала.   В   качестве   выбранных   материалов   используйте   следующие статьи: Классы яхт, Гонки на открытой воде, Гонки в гавани. Результат заполнения главного меню представлен на рисунке 11.11. Рисунок 11.11. Результат заполнения главного меню 29) Скопируйте из меню Главное меню пункт Яхтинг в меню Верхнее меню. Для этого отметьте нужный пункт и нажмите по кнопке Копироват» ­  В   открывшемся   диалоге   необходимо   указать   в   какое   меню   необходимо   произвести копирование (topmenu) и   нажать   кнопку «Копировать». По   окончанию   копирования должно открыться меню, в которое было произведено копирование. 30) В меню Верхнее меню создайте пункт ­ Вопрос­Ответ. Укажите тип ­ Стандартный шаблон материала,в качестве выбранного материала используйте статью: Вопрос­Ответ. 31) Откройте для редактирования пункт меню ­ Главная. В параметрах укажите:    во всю ширину ­ 0; вступление ­ 3; колонки ­ 1;  ссылки ­ 6. После этого нажмите по кнопке Сохранить. Результат заполнения верхнего меню представлен на рисунке 11.12. Рисунок 11.12. Результат заполнения верхнего меню 32) Посмотрите результат проделанной работы, открыв сайт для просмотра (Рис. 11.13). Весь материал, для наполнения статей, был взять с сайта ­ http://www.clubyacht.ru/ . Рисунок 11.13. Результат урока №11 Резюме  Разделение   статьи   на   вводную   и   подробную   части   осуществляется   при   помощи инструмента «article.readmore» ­  .  Для   принудительного   включения   или   отключения   комментарий   для   статьи используются кнопки «JComments ON» и «JComments OFF».  Изображения используемые для наполнения сайта должны располагаться в папке ­ [Путь_к_Joomla] / images / stories.  Загрузка изображений осуществляется двумя способами черезе FTP (или простым копированием в папку на локальном компьютере) и через встроенный мультимедиа загрузчик Joomla!.  Раздел   и   категория   также   могут   содержать   текстовую   информацию,   например краткое   описание   раздела   или   категории.   Для   включения   отображения   этой информации необходимо выбрать соответствующий пункт в настройках меню. Контрольное задание 1. Удалите demo­данные, которые были созданы во время установки. 2. Найдите материал для наполнения своего проекта в сети Интернет. 3. Наполните свой проект тематической информацией. Вопросы для самоконтроля 1. Каким образом можно дублировать пункты меню? 2. Возможно ли удалить раздел если он содержит категории? 3. Возможно ли удалить категорию если она содержит материал? 4. Возможно ли удалить категорию если она содержала материал, а его переместили в корзину? 5. Какие способы загрузки изображений Вам известны? 6. Как разбить статью на несколько страниц? 7. Как изменить количество отображаемых статей на главной странице сайта? 8. Для чего предназначены кнопки «JComments ON» и «JComments OFF»?