Шаг 7. Знакомство с файловым менеджером и вставка изображений на страницу.

В этом шаге мы поменяем фотографии на свои и научимся работать с файловым менеджером.

Чтобы его вызвать, достаточно нажать на любое изображение на сайте:

umi4

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

Контекстное меню

Контекстное меню файла вызывается при нажатии правой кнопкой мыши на файл, контекстное меню раздела — при нажатии на пустое место внутри раздела. Все действия, доступные в контекстном меню подписаны и интуитивно понятны.

Контекстное меню файла:

elfinder_context_menu_1

 

 

 

 

 

 

Контекстное меню раздела:

elfinder_context_menu_2

 

 

 

Основные функции файлового менеджера:

Добавление файлов на сайт (Загрузка файлов в файловый менеджер):

Загрузить файл на сайт можно при помощи контекстного меню или основного меню файлового менеджера, нажав на кнопку «Загрузить файлы» с иконкой  elfinder_add . После нажатия на данную кнопку появится следующее окно:

elfinder_add_window

 

 

 

 

 

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

Максимальное число файлов для одновременной загрузки 21.
Максимально допустимый размер для загружаемого файла: 30 Мегабайт.
Максимально допустимый размер изображения: 2 Мегабайта.
Допустимые форматы файлов для загрузки: gpx, txt, doc, docx, xls, xlsx, ppt, pptx, pps, ppsx, odt, sxw, ods, odg, pdf, csv, html, tpl, xsl, xml, zip, rar, 7z, tar, gz, tar.gz, rtf, chm, ico, jpg, jpeg, gif, png, bmp, psd, flv, mp4, swf, mp3, wav, wma, ogg, aac.
Выбор файла для использования:

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

Примечание: Если во время нажатия данной кнопки не будет выбран ни один файл, то поле для файла будет пустым.

Создание папок

Создать папку можно при помощи контекстного меню или основного меню файлового менеджера, нажав на кнопку «Новая папка» с иконкой  elfinder_add_folder.

Вот и вся терия, которая нужна для того, чтобы вставлять изображения в страницы.

Теперь давайте вставим свои фото в наш шаблон. Нам понадобится одно фото приличного качества и размером не более 30 Мб. Лучше сразу приготовить два фото нужного размера (473 на 640 пикселей и 960 на 229 пикселей).

Помните, что в нашем распоряжении всего 100 Мб пространства на диске, поэтому, чем меньше объем файла, тем лучше.

1. Вызываем файловый менеджер, щелкнув по фото на странице, нажимаем кнопку «Загрузить» внизу и выбираем файл. Ждем, пока он загрузится.

2. Нажимаем кнопку «Выбрать» и файл встает на место фотографии, по которой мы щелкали вначале.

3. Эти же шаги проделываем со второй фотографией.

4.  Сохраняем результат.

5. Теперь из файлового менеджера удалим старые фотографии, чтобы они не занимали место.

Закрываем файловый менеджер. Любуемся результатом.

6. Осталось только подредактировать текст в новостных блоках.

Для этого перейдите на страницу «Новости».

Две новости можно удалить. Щелкаем «Редактировать», наводим мышку на новость. Сам блок окрашивается в голубой цвет, а справа появляется красный крестик. Если перевести мышку на  него, появится надпись «Удалить новость». Нажимаем крестик, новость удалена. Также поступаем со второй новостью.

В оставшихся редактируем текст. Это вы уже умеете. напишите несколько новостей из Вашей школы. если забыли, как это делается, вернитесь к шагу 6.

Вот что получилось у меня: http://mivanova.umi.ru/novosti/

В таблице продвижения поставьте статус «выполнено». Обратите внимание,чтобы ячейка «позеленела», у Вас должен быть открыт доступ к Вашему сайту. Я, как ведущий мастер класса, окрашиваю ячейки только убедившись, что задание выполнено!

Перейти к шагу 8.

Вернуться к стартовой странице мастер класса.

 

 

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *