Методическая разработка (для пользователей сети органов государственой власти Республики Бурятия).
Тема: Работа в редакторе сайтов Typo3 на примере тестового сайта.
Авторы: ,
Дата разработки: 06.04.2006г. н.э.
Содержание
Содержание 1
Введение 2
Знакомство с тестовым сайтом 2
Вход в административную часть. 3
Занятие 1. 3
Создание страницы. 4
Занятие 2 4
Наполнение страницы содержанием (далее будем называть содержание словом контент). 4
Занятие 3 4
Работа с изображениями 5
Занятие 4 5
Работа с документами, созданными в других программах. 8
Занятие 5 (это занятие повышенной сложности!) 8
Перемещение информации. 8
Занятие 6. 8
Работа с новостями 10
Занятие 7 10
Введение
Typo3 – это система для создания сайтов. Она проста в использовании и интуитивно понятна. Авторы ее работают по всему миру. Начал создавать ее Каспер Скаршо в 1998 году, живет в Дании.
Знакомство с тестовым сайтом
Запустите броузер. Пуск – Интернет.
Наберите в адресной строке: http://egov-buryatia. ru:8088
На главной странице сайта отображаются:
- вверху – заголовок и рисунок
- слева – главное меню
- под заголовком – навигационное меню
- в центре – новости со всех страниц.
Теперь перейдите в раздел 1. Какие изменения произошли?
- вверху – то же самое
- слева – раскрылось меню Раздел1
- под заголовком – отобразилось текущее место в дереве и дочерние страницы Раздела 1.
- в центре – появилось содержание страницы «Раздел1».
Вход в административную часть.
Наберите в адресной строке: http://egov-buryatia:8088/adm
Сервер вас незаметно перебросит в новый адрес: http://egov-buryatia. ru:8088/power/typo3/index. php
Наберите имя пользователя в поле Username, а пароль в поле Password. Пароль и имя пользователя вам должен сообщить преподаватель.
Админстративный интерфейс состоит из 3-х рабочих панелей (верх как правило редко используется).
1 панель – выбор какой-либо команды
2 панель – дерево сайта
3 панель – выполнение команды.
Потренируемся
Занятие 1.
Щелкните в 1 панели на пункте меню «Страница». Во 2 панели отобразится дерево. Вернее два дерева – РазделХ и Верхушка. Сразу поясним, что РазделХ лично для вашей учетной записи, а Верхушка для всех пользователей общая. Разверните РазделХ. Сверните. В РазделеХ находится еще одна страница – Новости. В Верхушке нет других страниц (если конечно кто-то из вас уже их не создал).
Выберите РазделХ, нажимая на само слово РазделХ. В 3 панели отобразятся возможные команды, которые вы можете совершить по отношению к этой странице.
Создание страницы.
В этом параграфе мы научимся создавать и удалять страницы. Страницы можно удалять, перемещать и переименовывать в том случае, если вы имеете на них права. Страницы, которые вы создали сами, естественно, доступны и вам.
Занятие 2
Нажмите Страница в 1 панели. Щелкните на желтой иконке возле РазделХ. Появится контекстное меню. Выберите в нем Создать. В 3 панели выберите Страница(Внутри).
В поле Заголовок напишите название: «Моя первая страница». Нажите на кнопку «Сохранить документ».
Во второй панели в дереве появится ваша страница. Она отмечена красным крестиком – это значит, что она пока не видна незарегистрированным пользователям сайта. Давайте сделаем ее видимой. Нажмите на ее иконку с красным крестиком. Появится контекстное меню. Выберите «Сделать видимым». Белая иконка станет обычной – желтой.
Теперь удалим эту страницу – опять нажмите на эту же уже желтую иконку. В контекстном меню выберите «Удалить». Появится вопрос – ответьте «Да».
Повторите это занятие еще раз. Создайте, сделайте видимой и удалите страницу. Теперь снова создайте страницу, сделайте видимой и просмотрите сайт в обычном режиме. Для этого откройте еще одно окно броузера и просмотрите сайт. Зайдя в ваш РазделХ, вы увидите новую страницу в верхней навигационной строке и в левом меню. Пока эта страница пустая.
Наполнение страницы содержанием (далее будем называть содержание словом контент).
Каждая страница может содержать в себе много абзацев. Абзацы могут быть разного типа. Их можно перемещать внутри страницы и со страницы на другую страницу.
Занятие 3
Зайдите в команду «Страница», РазделХ, Новый контент.
Выберите «Обычный текст». Затем выберите позицию «Обычный», щелкнув на стрелке.
Напишите заголовок «Мой первый заголовок», а поле «Текст»: «текст текст текст». Размножьте текст несколько раз командой «Правка, Копировать, Вставить». Сохраните абзац. Просмотрите страницу: щелкните на РазделХ, Просмотр. Откроется новое окно броузера и вы увидите страницу
Если вы делаете занятие одновременно с другими – просмотрите другие разделы. Закройте окно просмотра. Если вы случайно закроете окно администрирования сайта – зарегистрируйтесь заново.
Отредактируйте текст – щелкните на РазделХ. Затем «Редактировать в RichText редакторе». Измените текст и сохраните. Для выбора варианта сохранения установите на кнопку сохранения мышь и подождите пока появится всплывающая подсказка. Например можно выбрать Сохранить и закрыть документ, можно просто Сохранить, можно Сохранить и просмотреть, можно просто Закрыть документ.
Для редактирования заголовка щелкните на тексте заголовка, у вас кажется «Мой первый заголовок».
Удалите абзац – можно щелкнуть на корзинке, а можно на кнопке с изображением текста.
Проделайте это задание несколько раз. Создайте абзац, просмотрите, отредактируйте и удалите.
Работа с изображениями
Прямо в текст можно добавлять рисунки. Также можно при создании контента выбрать тип «Текст с картинкой».
Занятие 4
Создайте элемент контента «Обычный текст» . Местоположение выберите повыше, чтоб удобно было просматривать. Наберите текст и заголовок. Установите курсор клавиатуры в позицию куда вы хотите вставить рисунок. Нажмите кнопку в панели инструментов «Вставить картинку»
. Появится окно с таким же названием. В нем отображены каталоги, в которых имеются картинки, которые мы вам подготовили. Выберите каталог «Общий для обучаемых каталог». Окно обновится – в середине вы увидите рисунки, а внизу кнопка «Обзор» - это кнопка понадобится вам в будущем. Сейчас же выберите любой рисунок и он сразу внедрится в текст. По умолчанию он встает в текст без обтекания. Сохраните абзац. Теперь отредактируйте рисунок (возврат в редактирование абзаца - иконка «карандаш» 
) – измените его размер и перетащите в другое место. Сохраните текст и снова просмотрите страницу.
Скорее всего вам не нравится как стоит рисунок. Давайте сделаем так, чтобы рисунок обтекался текстом. Щелкните на рисунке правой кнопкой, выберите «Свойства картинки». Затем в новом окне выберите Плавающий - Слева. Нажмите Обновить. Перетащите рисунок так чтобы он встал идеально по вашему мнению.
Попробуем создать текст с картинкой. Снова создайте элемнт контента, но уже «Текст с картинкой».
Наберите заголовок и текст. Внизу выберите иконку «раскрывающаяся папка» 
- выберите каталог «Общий для обучаемых каталог» и рисунок. Он попадет в список. Ниже выберите вариант обтекания и местоположения. Сохраните абзац и просмотрите страницу. Отредактируйте абзац с картинкой – добавьте второй рисунок.
Снова сохраните и просмотрите страницу.
Работа с документами, созданными в других программах.
Для размещения документов на сайте, требуются некоторые требования.
- документ желательно называть английскими буквами, так как при копировании русские буквы будут заменены знаком подчеркивания;
- размер документа не должен быть слишком большим – например не более 500кб. Если все-таки возникла необходимость выставить на сайте большой документ, то при создании ссылки рядом приписывайте размер документа.
Занятие 5 (это занятие повышенной сложности!)
К сожалению, чтобы разместить документ на сайте надо сначала его разместить – извините за тавтологию. Что это значит – это значит надо, к сожалению, закрыть редактируемый документ, если вы уже начали новый абзац.
Затем войти в команду «Список файлов»
.
Во второй панели отобразятся знакомые вам каталоги «tempX» и «Общий для…». Выберите каталог «tempX» и нажмите на «Загрузка файлов».
Теперь отвлекитесь и, не закрывая окна броузера, запустите Microsoft Word, напечатайте там пару слов и сохраните в Рабочем Столе под английским названием. Закройте Word. В окне Загрузка файлов нажмите Обзор и выберите только что созданный файл. Затем Загрузить. Теперь можно создать абзац – написать там пару слов типа: «Это ссылка на файл Word», выделить эти слова и нажать кнопку «Вставить ссылку» 
:
Там выбрать только что скопированный файл: Файл, каталог tempX (на минус нажать), ваш файл. Сохраните абзац и просмотрите страницу. Попробуйте нажать на ссылку. Что вы предпримете – я предлагаю вам выбрать «Открыть».
Перемещение информации.
Можно перемещать как страницы, так и абзацы. Можно переместить целое дерево со всеми его абзацами и страницами. Но для начала создадим эти деревья и абзацы.
Занятие 6.
Создадим в РазделеХ страницы «Пораздел1» и «Подраздел2». В Подразделе1 создадим страницы «Книги» и «Журналы», а в Подразделе2 создадим страницы «Автомобили» и «Мотоциклы». Теперь постановка задачи: необходимо перенести страницу Автомобили в страницу Книги, а страницу Мотоциклы в страницу Журналы.
Решение: раскрываем в дереве папку Подраздел2 (крестик). Щелкаем на странице Автомобили и в контекстном меню выбираем Вырезать. Щелкаем в дереве на странице Книги и в контекстном меню выбираем Вставить внутрь. Аналогично: раскрываем папку Подраздел2 (хотя она уже открыта). Щелкаем на странице Мотоциклы, в контекстном меню Вырезать. Щелкаем на странице Журналы – Вставить внутрь. Итак вы научились переносить страницы. Аналогично можно перенести целый кусок дерева. Для тренировки перенесите дерево Книги в папку Подраздел2, и дерево Журналы в ту же папку Подраздел2.
Теперь научимся переносить абзацы. Создайте в странице Автомобили три абзаца: Автомобиль Волга, Автомобиль Жигули, Автомобиль Газель. Теперь задание разместить эти абзацы в обратном порядке.
Решение: первый вариант – те же команды Вырезать и Вставить в контекстном меню на кнопке 
. Второй вариант используя стрелки-треугольники: 
.
Работа с новостями
В Typo3 работа с новостями организована просто и понятно. Создается страница с названием, например, «Новости»; вставляется элемент контента «Плагин новостей» со свойством «Что показывать» = LIST; и потом размещаем на этой странице новости. Но мы рассмотрим только сам процесс размещения новостей, а вставку «Плагина новостей» не будем рассматривать, оставим это для самостоятельного изучения.
Занятие 7
Заходим в РазделХ. Раскрываем РазделХ, нажав на крестик. Нажимаем на иконку страницы «Новости» - появится контекстное меню – там выбираем «Создать». В третьей панели выбираем Новости.
Заполняем произвольно поля. Затем перключаемся на вкладку “Relations” и вносим в список рисунки.
Нажимаем вверху кнопку «Сохранить». Вот и все. Но что это – при просмотре страницы Новости нашей новости не видно. Оказывается надо сделать новость видимой. Выбираем страницу Новости во второй панели. Находим свою новость в списке новостей и нажимаем на иконке этой новости. Появляется контекстное меню и там выбираем «Сделать видимым».
Просмотрите снова страницу «Новости» и Главную страницу сайта. Урок закончен.
