Руководство по созданию личного сайта

Вход в систему и создание сайта с нуля
1. Зайти в свой аккаунт Google. Набрать в поисковой строке Сайты гугл:
Рисунок 3.
Обратите ваше внимание, что в работе используется большое количество разных сервисов, как то:
Почта, Календарь, Документы, Сайты, Блоггер, Фотографии Пикаса и тд... Где именно вы находитесь
в настоящий момент видно по самой верхней полосе. В данном случае слово сайты имеют более
жирное начертание и чуть выше виднеется красная полоса.
Желтым выделена область, в которой перечислены ВАШИ сайты или те, к которым у вас есть доступ
администратора.
Темно розовым отмечена ссылка, по которой вы можете пройти и увидеть открытые для просмотра
сайты других людей (педагогов, учащихся, быть может родителей)
Для создания нового сайта необходимо нажать на кнопку Создать.
2. Создаем сайт с нуля, поэтому оставляем пустой шаблон.
Далее указываем название сайта - либо Рабочий сайт и дальше ваше имя, либо Личный сайт и
дальше ваше имя.
Область местоположение заполнится сама, но чтобы сделать доступ к вашему сайту короче можно
удалить все и написать, например, свою фамилию на английском. Например, goryachevata. Таким
образом, можно давать ссылку на свой личный сайт (ученикам или при прохождении аттестации) в
следующем виде http://sites.google.com/a/4sch.ru/goryachevata
Далее выбираем тему - это внешний вид вашего сайта.
Рисунок 4.
Далее заполняем поля в разделе Другие возможности:
В категории сайта указываем Личный сайт. Описание - это краткое содержание планируемого сайта (не
обязательно к заполнению)
Раздел открыть доступ позволяет
настроить доступ к сайту. Если выбрать
все пользователи из организации..., то
сайт смогут просматривать только
пользователи школьной системы учителя, ученики и родители. Если
выбрать только указанные мной люди то сайт увидит ограниченный круг
людей, которых нужно будет добавлять
вручную уже после создания самого
сайта. Последний пункт сделает ваш
сайт открытым для всего интернета.
Итак, все настройки указаны, жмите
кнопку создать вверху экрана. На рисунке обозначена красным.
3. Вы получите созданный по вашим настройкам сайт.
Оранжевым на рисунке отмечена всё таже полоса. С её помощью можно попасть на любой другой
необходимый для вас сервис.
Рисунок 6.
Зеленым отмечено меню сайта, пока там только одна страница -Главная. И то она пустая. Чтобы её
отредактировать и внести содержание (контент - это слово обычно применяется в Интернете)
необходимо нажать кнопку с изображением карандаша. На рисунке отмечено тёмно-розовым.
Жёлтым отмечена кнопка для создания новых страниц.
Голубым - дополнительные возможности по настройке страницы и сайта в целом.
Красным - кнопка для настройки доступа к сайту.
4. Для начала определимся с содержанием сайта. Можно даже зарисовать свои идеи на бумаге.
Значит цель - создать личный сайт педагога для более быстрого ориентирования внутри новой
школьной системы, для размещения личных материалов, для создания личного портфолио, для
размещения рефлексии в ходе работы в новой школьной системе. (для чего-то еще.... можете
добавить для себя самостоятельно)
Для быстрого ориентирования нам нужны:
1. Ссылки на сервисы (они есть конечно в верхней панели, но не все)
2. Ссылки на определенные ресурсы - например, блог класса или сайт МО.
3. Возможность размещения заметок по работе в системе, планирование деятельности,
постановка задач и их выполнение.
Для размещения личных материалов (копилки):
1. страница с документами с возможностью загрузки их с компьютера и размещением ссылки на
сетевые документы.
для личного портфолио:
1. Несколько страниц сайта, определенным образом структурированые. ( тут все зависит от
планирования личного портфолио)
Для рефлексии:
1. Страница сайта, которую будет удобно вести в режиме блога или живого журнала.
Определились с содержанием и что же мы видим, что нам нужны новые страницы сайта. Вот их и
создадим.
5. Создание новых страниц. Необходимо нажать на кнопку, которая отмечена жёлтым на рисунке
6. Появится следующая страница:
Рисунок 7.
Новую страницу необходимо назвать, на рисунке7 отмечено темно-розовым. Название вводим на
русском языке. По плану нам нужна страница с ссылками. Назовем ее, например, Ссылки. И выберем
шаблон Список (нам же нужен некий список ссылок).
Местоположение страницы - это некоторая иерархия сайта (ну как в книге, есть разделы, параграфы,
главы и тд.) Это вы решаете сами. По сути главная и ссылки находятся на одном уровне, поэтому для
данной страницы можно оставить Поместить страницу на верхний уровень.
Если всё заполнено жмем на кнопку Создать (отмечена красным)
7. Получим следующую картину:
Чтобы использовать готовый шаблон для данной страницы, достаточно нажать на кнопку
использовать шаблон. На первый взгляд готового шаблона для нас нет, поэтому жмем Использовать
шаблон под словом Пользовательский.
(отмечено красным)
Появится окно настройки списка. В области,
обозначенной оранжевым, вводим название
столбца. В нашем случае это ссылка. Типы
у столбцов бывают следующие:
● Флажок - этот тип удобен для
столбца сделано/не сделано. Например,
если задача выполнена - то в данном
столбце можно поставить галочку.
● Дата - тип для размещения даты.
● Раскрывающийся - тип для создания
раскрывающегося меню. Если вам
необходим этот тип, то обязательно нужно
выводить готовые значения для этого
столбца.
● Текст - тип для ввода обычного
текста.
● URL - тип для внесения ссылки на
любой интернет-ресурс.
Судя по всему в нашем случае необходим последний тип.
На всякий случай добавим еще один столбец с названием примечание и типом текст (вдруг
необходимы будут заметки по отдельным строкам списка). Для добавления нового столбца
используйте соответствующую ссылку ( на рисунке отмечена красным).
Если структура списка готова - жмите кнопку Сохранить.
Если все верно, то страница будет выглядеть примерно так:
Теперь необходимо добавить элементы списка. Например, сайт школы. Переходим на него и в
адресной строке копируем его URL. (на рисунке обведено красным)
Теперь на личном сайте на странице ссылки жмем Добавить элемент, видим следующее и заполняем
соответственно поля (пример заполнения уже на рисунке):
После нажатия кнопки сохранить получим:
Аналогично можно добавить и другие ссылки.
9. Далее хотим писать заметки и планы, ставить задачи и отметки об их выполнении. На мой взгляд
тут будет удобна страница с встроенным календарем. НО страница сможет только отображать
информацию, вносить ее все равно придется в календаре. Поэтому сначала создадим календарь. Для
этого в верху сайта на темной панельке найдем слово Календарь.
При первом входе система запросит ваш пароль. В дальнейшем сразу откроется новое окно (или
вкладка) с календарем.
Небольшой обзор:
Оранжевым отмечена область для настройки отображения календаря (или календарей). То есть с
помощью стрелок вправо и влево можно менять отображаемые сроки. День, неделя, месяц, повестка
дня - это разные типы отображения информации, находящейся в жёлтой зоне. Далее кнопка для
печати календаря на бумаге, последняя - кнопка обновления календаря.
Фиолетовым отмечена сетка календаря. Если на какой-то день что-то намечено, то число становится
более жирным.
В красной рамке список ваших календарей, по умолчанию, то есть в начале у вас один календарь с
вашим именем. Пока будем работать с одним календарем! Поэтому не размещайте детальной и
личной информации в календаре.
Теперь добавим информацию в календарь. Для этого перейдем в режим просмотра Месяц (мне
кажется так удобнее, хотя в календаре практически любая точка экрана кликабельна и то что мы
делаем сейчас можно выполнить множеством других вариантов). И жмем мышкой на нужном нам дне.
Например, я хочу написать, что 5 ноября я создаю данное руководство. Тогда я перехожу в режим
просмотра Месяц ( см. на рисунке в оранжевой области) и кликаю на квадрате отмеченном 5 ноября.
Получаю
Итак, допустим это
мероприятие, тогда мне
достаточно указать что
это за мероприятие,
выбрать в какой
календарь поместить это
мероприятие (это
необходимо если у вас
несколько календарей) и
далее нажать на кнопку
создать мероприятие.
Рисунок 9.3
Результат следующий:
Если мне необходимо было более детально описать мероприятие, то на рисунке 9.3 можно было
нажать ссылку изменить мероприятие. Но и сейчас я могу внести изменения, кликнув на только что
созданное мероприятие опять появиться такая ссылка. Появиться страница, на которой можно
указать более детальные настройки для мероприятия.
Оранжевым отмечена область названия мероприятия, его можно изменить.
Жёлтым - область для сроков. Нужна если мероприятие имеет ограничения по датам и времени. А так
же можно настроить повтор мероприятия.
Голубая область - напоминания. Можно настроить напоминания об этом мероприятии. Вы можете
настроить напоминания на эл. ящик или на мобильный телефон. (об этом необходимо говорить
отдельно!)
Синяя область - статус. Тут можно настроить доступ остальных людей к информации о мероприятии.
То есть календарь можно сделать открытым для всех, и тогда закрывать информацию к отдельным
(самым личным) планам.
В красной области вы можете пригласить на мероприятие гостей. В этом случае они получать
оповещение на эл. ящик.
После всех изменений жмем кнопку Сохранить.
Второй вариант - это задачи. По сути тоже самое, выбираем дату, жмем мышкой, и получаем
следующее окно, если выбираем ссылку задачи, а не мероприятия
Тут с заполнением все просто.
Заполняем и жмем создать задачу. Результат:
Если задачу не видно, необходимо включить видимость календаря Задачи (на рисунке отмечено
красным)
Обратите внимание, если задачу вы закончили, то рядом с ее названием можно ставить галочку ( то
есть достаточно кликнуть на квадратик рядом с задачей).
Отлично, с календарем немного разобрались, теперь встроим его на сайт.
10. Возвращаемся на личный сайт и создает новую страницу с названием Мой календарь, и типом
веб-страница.
После создания страницы такого типа, вы автоматом попадаете в режим редактирования данной
страницы. На экране приблизительно следующее:
Красным отмечена панель инструментов для редактирования области, отмеченной желтым.
Мы хотим добавить наш календарь в желтую область. Для этого выбираем (кликаем один раз левой
кнопкой мыши) меню Вставить (в красной области).
Из выпавшего меню выбираем Календарь. В появившемся окне выбираем нужный нам календарь и
жмем кнопку выбрать.
Указываем настройки календаря и жмем сохранить.
РИсунок 10.3
Результат:
Красным обозначена кнопка с настройками
гаджета (то что мы сейчас делали называется
добавлением гаджета Календарь). Настройки те
же самые что и на рисунке 10.3, то сеть в любой
момент их можно изменить!
Желтым отмечена область выравнивания
гаджета (слева, по центру, справа)
Оранжевым - область обтекания
Синим - кнопка удаления гаджета.
Чтобы увидеть как стала выглядеть страница с
гаджетом необходимо ее сохранить . Соответствующая кнопка находится вверху справа.
Минус только один Задачи таким образом разместить нельзя. Задачи отображаются ТОЛЬКО в
календаре. И править календарь с личного сайта не получится. Все изменения необходимо вносить
через сервис календарь. (как туда попасть написано выше в 9 разделе)
11. Страница с документами - следующая, которую мы бы хотели видеть.
Жмем кнопку создать новую страницу (сами вспоминайте где она, мы туда жали уже 2 раза).
Название страницы -Документы, или копилка. Тип - файловый менеджер.
Получаем страницу:
Красным отмечена кнопка дл добавления файлов.
Оранжевым - кнопка для создания иерархии папок для файлов
Синим - уже понятная кнопка
Жёлтым - кнопка для того, чтобы на почту приходили оповещения об изменениях на данной странице.
Добавление файла принципе уже привычно для вас. Жмем кнопку, появляется окно:
Файлы можно загружать с компьютера,
или же если файл размещен в сети
Интернет, достаточно указать ссылку на
него.
Вы сразу можете спланировать
иерархию размещения файлов, создав
папки с помощью кнопки Переместить.
Думаю тут все понятно, двигаемся
дальше.
12. О портфолио можно говорить долго, поэтому на данный момент мы не трогаем этот вопрос.
Осталась страница для рефлексии. Создаем новую страницу с именем Мысли и рассуждения, тип объявления.
Результат:
Тут все просто, для размещения нового сообщения каждый раз жмите кнопку Новое сообщение. А в
ооткрывшемся окне вводите название сообщения и чуть ниже текст. Кнопка сохранить будет сверху
справа.
13. Осталось оформить главную страницу сайта, чтобы вам было удобно им пользоваться.Тут вы
можете применять свою фантазию как угодно. Я поступлю просто, на главной размещу гаджеты,
которые будут выводить информацию со страниц: Календарь, Мысли и рассуждения, Ссылки
Итак, переходим на главную страницу личного сайта. Жмем кнопку редактирования
Рис. 13
Станица перейдет в режим редактирования. к слову сказать этот режим доступен для всех страниц.
Вы должны различать режим редактирования от режима наполнения информацией (так его назовем).
То что делали выше на странице Ссылки и Копилка - это наполнение информацией. НО у этих
страниц ТОЖЕ есть режим редактирования. Позже самостоятельно его попробуйте.
Что появляется в режиме редактирования?
РИс. 13-1
На рисунке 13-1 красным отмечена область текстового меню. Разберемся по пунктам, которые для
нас наиболее актуальны.
Меню вставить:
Первый пункт - это вставка изображения. (См. инструкцию Оптимизация изображения для загрузки в
сеть Интернет, загрузка изображения на сайт, в блог, в документ)
Ссылка - см. инструкцию что такое ссылка. Где искать URL. как разместить ссылку на сайте, в блоге,
в документе.
Горизонтальная линия - это графическое оформление. Горизонтальная линия поможет отделить
части текста на одной странице.
Кнопка +1 - Нажать кнопку +1 – это то же самое, что сказать "Это здорово!" или "Советую взглянуть". Добавьте
кнопку +1, чтобы посетители могли рекомендовать ваши сайты другим пользователям.
Гаджеты:
Последние сообщения - выводит блок информации со страниц типа Объявления ( в нашем случае есть такая
страница - Мысли и рассуждения)
Последние обновленные файлы - выводит список файлов, размещенных на страницах типа
файловый менеджер (у нас - копилка)
Последние элементы списка - выводит информацию со страниц типа Список ( у нас - это Ссылки)
Текстовое поле - блок для размещения текста со ссылками, изображениями и тд. Панель
инструментов там ничем не отличается от панели для страниц сайта.
Календарь - уже рассматривался вариант его вставки.
Документ - см. инструкцию размещение на сайтах и блогах документов. (там же затрагивается
вставка следующих пунктов)
Меню Формат - необходимо для форматирования текста. Там все понятно. Думаю можно не пояснять.
Меню Таблица - тут тоже нет ничего сложного. Вставляйте любые необходимые вам таблицы.
Меню Макет - меняет область отмеченную на рисунке 13-1
желтым, деля её на колонки.
Иконки, в принципе, дают вам понять, как может выглядеть
данная область.
На рисунке 13-1 синим отмечена панель инструментов для работы с текстом на странице сайта. Все
операции привычные и не требуют дополнительных объяснений. Некоторые кнопки дублируют пункты
текстового меню.
Теперь попробуем оформить главную. Будем выводить блок с мыслями и рассуждениями, перечень
ссылок, файлов, календарь в другом режиме отображения информации.
● Меняем макет страницы. Так информация будет выглядеть компактнее. К примеру, Текстовое
меню - Макет - Левая и правая боковые панели.
● В верхней строке можно написать (а можно и ничего не писать) приветствие.
● В левую колонку добавим гаджет Последние элементы списка. (аналогично добавлению
календаря) НЕ забывайте ставить курсор в ту область на странице, где должен появиться
гаджет!!!! А ниже этого гаджета - Последние обновленные файлы
● По центру вставим гаджет Последние сообщения.
● Справа вставим календарь. Только режим просмотра выбираем повестка дня. В этом случае на
странице появится перечень событий на сегодняшний день.
Все операции сделаны, страница выглядит так:
Пока не видно никакой информации. Это потому что мы находимся в режиме редактирования.
Сохраняем страницу и смотрим на результат.
Кнопка сохранить вверху справа.
Если что-то не нравится вы опять можете нажать кнопку редактировать и поправить любой гаджет в
отдельности.
Удачи! Жду личных сайтов!