Вебинар • 28 января 16:00–18:30
Как получать клиентов с онлайн-карт без вложений в рекламу?

​Как создать сайт для класса школы

Обсудить
​Как создать сайт для класса школы

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

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

 Как создать сайт для класса школы – расскажу в сегодняшней статье.

Шаг 1: Регистрируемся на платформе Craftum

В качестве платформы мы возьмем популярный конструктор сайтов Craftum, на котором можно создавать различные интернет-ресурсы без вложений. Сам сервис платный, но для новых пользователей предоставляется 10-дневный бесплатный период. Этого вполне хватит, чтобы создать сайт и начать его использовать в своих целях. Когда пробный период закончится, необходимо будет оплатить тарифный план за 197 рублей в месяц.

Стоит сказать, что Craftum – это не простой конструктор с шаблонными решениями, а целая платформа для креатива. Например, с помощью специальных блоков можно создавать уникальные дизайнерские решения, которые смогут удивить пользователей. В случае со школой можно сделать сайт более интересным и для учеников, и для их родителей. В результате ваши ученики будут более заинтересованы в учебе, а родители будут получать информацию о предстоящих мероприятиях удобным способом.

А если вам не нужен креативный сайт, то можно пойти более легким путем – сделать его на простых блоках. Даже в таком случае вы получите красивый ресурс, просто он получится менее насыщенным.

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

  1. Открываем официальную страницу Craftum и нажимаем на «Создать сайт бесплатно». Конструктор Craftum официальная страница
  2. Вводим свое имя и адрес почты, на который придут данные для авторизации. Затем нажимаем на кнопку «Создать сайт». Конструктор Craftum регистрация
  3. Таким образом, мы попадаем в библиотеку шаблонов – отсюда и начнется наш путь.

Библиотека шаблонов Craftum

Шаг 2: Создаем сайт для класса или школы

На Craftum есть шаблоны, связанные с образованием. Для примера возьмем «Подготовка к ЕГЭ и ОГЭ» и перестроим его под свои задачи.

Давайте начнем:

  1. Первым делом выбираем нужный нам шаблон из библиотеки. Найти его можно через поиск либо во вкладке «Образование».Как создать сайт для класса школы в конструкторе Craftum
  2. Начнем с редактирования первого экрана – расскажем в нем, что это за сайт и зачем он нужен. В этом нам помогут заголовок и подзаголовок. Укажем в них, например, следующую информацию: «Средняя школа №95», «Приветствую вас дорогие ученики 7-А класса. Здесь вы сможете найти актуальную информацию о домашних заданиях, родительских собраниях и других мероприятиях». Для того чтобы добавить эту информацию, достаточно кликнуть по тексту в блоке и заменить его. Как изменить заголовок в конструкторе Craftum
  3. Теперь давайте уберем форму с кнопкой – в нашем случае она не понадобится, так как сайт информационный. Сделать это можно в настройках блока, которые открываются через кнопку, расположенную в верхнем левом углу. Открыв настройки, перейдем в раздел «Контент» и в блоке «Форма» удалим все данные, после чего кнопка и поле ввода автоматически исчезнут.Как в конструкторе Craftum убрать форму в блоке
  4. Также давайте поменяем фоновое изображение – лучше всего на его место поставить фотографию класса или школы. Если нет ни того, ни другого, то можете взять любую картинку с бесплатного сервиса Unsplash либо из галереи Craftum. Сделать все изменения можно в настройках блока -> «Дизайн» -> «Блок» -> «Настроить».Как поменять фоновое изображение в конструкторе Craftum
  5. В результате мы попадаем в окно редактирования фонового изображения. Перед тем загрузить свое, необходимо перейти во вкладку «Фото» и удалить старое изображение.Как удалить фоновое изображение в конструкторе Craftum
  6. Теперь можно вставить свое фоновое изображение – достаточно переместить его в поле «Изображение». Чтобы применить фото к фону, нажимаем на кнопку «Использовать в блоке». Обратите внимание, что в этом окне также есть фильтры, с помощью которых можно настроить затемнение фона. Я оставлю их такими же, но вы можете с ними поиграться, чтобы добиться другого результата.Как поменять фон блока в конструкторе Craftum
  7. Первый экран почти готов, осталось немного отредактировать текст. Делать это необязательно, но я хочу, чтобы подзаголовок не был таким прозрачным и читался лучше. Для этого во вкладке «Дизайн» -> «Подзаголовок» в настройках блока необходимо сделать 100% непрозрачность. Здесь же вы можете поменять цвет шрифта, сам шрифт, его размер и другие параметры. Аналогичным образом можно отредактировать и заголовок.Как изменить дизайн блока в конструкторе Craftum
  8. Давайте также изменим шапку сайта, в которой находится логотип, меню, номер телефона и кнопка. В качестве логотипа мы можем просто написать «7-А класс», а телефон и кнопку убрать. Для этого в настройках блока достаточно стереть все ненужные нам поля. В случае с логотипом все точно так же, как мы делали с заголовком и подзаголовком на первом экране – кликаем по элементу и меняем название.Как убрать кнопку и телефон из шапки Craftum
  9. Меню я пока трогать не буду, так как еще нет всей структуры сайта. Но если вы уже определились, что хотите разместить на своем сайте, то можете изменить кнопки меню. Они нужны, чтобы пользователи могли быстро перемещаться внутри сайта. Например, если на странице есть раздел «Уроки», то для него создается кнопка в шапке сайта, кликом по которой пользователь сразу же переместится в этот раздел. Настроить такой функционал можно во вкладке «Контент» -> «Меню». Как изменить пункты меню в шапке Craftum
  10. В настройках пунктов меню мы можем изменить название, а также указать тип ссылки, где «Якорная ссылка» – это ссылка, которая позволяет перемещаться в другой раздел. Достаточно выбрать необходимый блок, и кнопка станет направлять пользователя в нужное место.Как сделать якорную ссылку в конструкторе Craftum
  11. Давайте теперь создадим уникальный блок, в котором расскажем о лучших учениках класса. Назовем его «Гордость класса» и добавим фотографии учеников. Для начала добавим нужный нам блок – для этого наводим курсор мыши между блоками и нажимаем «Добавить еще блок».Как в конструкторе Craftum добавить новый блок
  12. В отобразившемся окне выбираем «Дизайн блок».Как создать дизайн блок в конструкторе Craftum
  13. В результате перед нами открывается новый блок, где для нас открыта полная творческая свобода: здесь мы можем перемещать элементы так, как нам угодно. Для начала давайте полностью очистим блок. Сделать это довольно просто: выделяем все элементы с зажатой клавишей «Shift» и нажимаем на кнопку «Delete».Как очистить дизайн блок в конструкторе Craftum
  14. Также давайте очистим фон – для этого перейдем в настройки блока и в разделе «Фон» нажмем на крестик.Как удалить фон в дизайн блоке Craftum
  15. Мы получаем белый холст. Перед тем как начать размещать контент, давайте включим сетку, которая нужна для удобного размещения контента. Чтобы ее активировать, достаточно кликнуть по кнопке в верхнем правом углу. Как включить сетку в конструкторе Craftum
  16. Начнем с заголовка, который можно добавить через кнопку в виде плюсика, расположенную в верхнем левом углу. После клика отобразится меню со списком различных элементов, нас интересует «Текст».Как добавить текст в дизайн блок Craftum
  17. Изменяем заголовок – назовем его «Гордость класса», а через меню слева зададим ему размер в 46px. По желанию вы можете изменить шрифт, цвет, выравнивание и другие параметры.Как изменить размер шрифта в конструкторе Craftum
  18. Теперь давайте добавим фотографии учеников. Для этого через выпадающее меню выберем «Фотография».Как добавить картинку в конструкторе Craftum
  19. В результате перед нами отобразится новый элемент, в который нужно будет добавить фотографию. Давайте продублируем блок дважды, чтобы добавить фотографии трех учеников. Для этого выделяем блок и нажимаем «CTRL+C», а затем жмем «CTRL+V». Также сделаем так, чтобы одна фотография занимала 4 колонки по сетке.Как добавить картинку в дизайн блок Craftum
  20. Осталось в каждый элемент добавить фотографию – для этого достаточно кликнуть по блоку и вставить нужное фото.Как вставить фото в дизайн блок Craftum
  21. Вставив в каждый элемент картинку, я получаю следующее:Как сделать сайт для класса школы бесплатно
  22. Также давайте к каждой фотографии сделаем приписку – укажем имя ученика. Для этого создадим 3 новых текстовых блока и пропишем имена.Сайт для класса школы создать бесплатно
  23. На этом работу в дизайн-блоке можно закончить. Если вы хотите добавить что-нибудь еще, то можете смело это сделать. Напомню, что дизайн-блок позволяет создавать что угодно. Помимо текстов и фотографий вы также можете добавлять различные элементы, видеофайлы, кнопки, а также HTML-код, который позволяет дополнять возможности блока.
  24. Обратите внимание также на то, что дизайн-блок по умолчанию не адаптирован под мобильные устройства. Если в простом блоке все автоматизировано, то в дизайн-блоке нужно самостоятельно адаптировать блок так, чтобы он хорошо отображался на всех устройствах. К счастью, в Craftum это сделать крайне просто. Достаточно в верхней части изменить разрешение и подстроить все элементы так, чтобы они корректно отображались на других устройствах. В нашем случае нужно просто уменьшить картинки и текст – все это можно сделать через меню слева.Как адаптировать дизайн блок в конструкторе Craftum
  25. Как только все разрешения будут проработаны, можно переходить к другим блокам. Чтобы выйти из дизайн-блока, необходимо в верхнем правом углу нажать на кнопку «Закрыть».Как выйти из дизайн блока в конструкторе Craftum
  26. Вот так, шаг за шагом, создается сайт в конструкторе Craftum. Если вам потребуется удалить какой-то блок, скрыть или продублировать его, для этого есть специальные кнопки, которые появляются при наведении мыши на блок.Как удалить блок в конструкторе Craftum
  27. После того как вся работа над сайтом будет завершена, останется только его опубликовать. Для этого необходимо в верхнем правом углу нажать на соответствующую кнопку.Как опубликовать сайт в конструкторе Craftum

Поздравляю! Вы создали свой первый сайт и теперь можете делиться им со своими учениками и их родителями. Обратите внимание, что ссылка на сайт создается автоматически, по умолчанию ресурс прикреплен к домену типа cw4476767653.tmweb.ru. Если вы хотите, чтобы ваш сайт назывался, например, 7a-class.ru, то для этого необходимо купить нужный домен и подключить его к сайту. Узнать, как это сделать, вы можете в чате конструктора – там вам быстро ответят и расскажут обо всем.

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

Комментарии

С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте