Ученики на Учителя.com


Как создать школьный веб-сайт на конструкторе

Как создать школьный веб-сайт на
конструкторе
Школьный сайт – неотъемлемый атрибут современной системы образования. С его помощью
можно делиться свежими новостями из школьной жизни, размещать расписание уроков и
ближайших мероприятий, публиковать отчеты и многое другое. Таким образом, школьный
сайт выступает важным инструментом коммуникации для администрации школы, педагогов,
учеников и их родителей и работников образования.
К сожалению, большинство школ не может позволить себе заказать дорогостоящую разработку
сайта у опытных программистов. В результате этим занимаются учителя и школьники.
Поэтому в основе создания школьного сайта лежит 3 принципа – это должно быть просто,
быстро и недорого (а в идеале – вообще бесплатно).
Какие есть способы создания сайта:
● Разработка с нуля
● CMS
● Конструкторы
Для разработки сайта с нуля нужны навыки программирования – как минимум, знание
HTML/CSS и JavaScript и опыт веб-верстки. Это долгий и трудоемкий процесс, а еще
понадобится хостинг. Как правило, в школах редко преподают бывшие разработчики, поэтому
этот вариант нам не подходит.
Хостинг – это аренда места на сервере. Сайты в интернете не «висят» в воздухе. Любой
сайт – это набор файлов (тексты, изображения, видео, базы данных и т.д.). Чтобы другие
пользователи увидели сайт в интернете, нужно разместить эти файлы на сервере. Для этого
и нужен хостинг.
CMS (или «движки
») – это системы создания и управления сайтом. С их помощью можно
создавать сайты без навыков программирования в визуально удобном интерфейсе. Есть много
движков – например, WordPress, Joomla, 1С-Битрикс и т.д. – у каждого их которых есть
плагины, расширяющие функционал.
Создание сайта с помощью CMS намного проще и быстрее, чем с нуля. Но есть пара нюансов:
● Все равно нужен хостинг
● Есть способ еще проще и быстрее
Здесь на арену выходят конструкторы сайтов. Это онлайн-сервисы, с помощью которых можно
создавать сайты без знаний в области программирования, верстки и дизайна. Более подробно
про них можно прочитать на Википедии, здесь же кратко расскажем про особенности работы с
ними.
В основе работы конструкторов лежит принцип drag’n’drop – простое перетаскивание
элементов мышью. Вы можете прямо на сайте настроить структуру и добавить блоки для
каждой страницы, выбрать дизайн, разместить нужную информацию и т.д. При этом не
обязательно все собирать с нуля – можно использовать подходящий шаблон и просто изменить
в нем некоторые элементы. Готовый сайт размещается на хостинге самого конструктора.
Получается, это просто, быстро и недорого – идеальный вариант для школы!
Как выбрать конструктор
Есть много конструкторов сайтов – например, Nethouse, Tilda, Ukit. Еще больше примеров
можно найти в этой подборке. Все они отличаются функционалом, дизайном, стоимостью и
условиями бесплатного использования.
На какие критерии нужно опираться при выборе конструктора сайтов:
1. Простота, удобство и дизайн
Все конструкторы сайтов просты и удобны в работе – если сравнивать их с другими способами
создания сайтов. Но между собой они очень сильно отличаются. К сожалению, единственный
способ определить самый простой и удобный – попробовать самостоятельно. Конечно, можно
посмотреть видео на YouTube по созданию сайта в этом конструкторе или почитать отзывы.
Но это не даст вам никакого пользовательского опыта.
А вот что вы действительно можете проверить заранее – насколько красивыми получаются
сайты в выбранном конструкторе. Каждый сервис публикует подборку сайтов, сделанных с его
помощью. Вы можете перейти на них и пролистать несколько страниц, чтобы оценить
внешний вид, удобство и скорость работы сайта.
2. Функционал
Другое важное отличие между разными конструкторами – их возможности. Что действительно
важно:
● Доступные блоки. Чем больше, тем лучше – это позволит разместить на сайте не
только текстовую информацию, но и галерею фотографий и видео школьной жизни,
документы и т.д.
● Количество страниц. Некоторые конструкторы ограничивают в количестве
создаваемых страниц. Это важно, если вам нужно несколько разделов на сайте – «О
школе», «Педагогический состав», «Ученикам», «Родителям» и т.д.
● Адаптация под мобильные устройства. Сайт автоматически адаптируется под экраны
мобильных устройств – поэтому одинаково красиво выглядит как на мониторе, так и на
смартфоне
● SEO-настройки. С их помощью можно сделать поисковую оптимизацию, благодаря
которой пользователи смогут быстро найти сайт в поиске Google или Яндекс. Вам не
придется скидывать ссылку на сайт: любому желающему достаточно ввести «сайт
школы №… города …» – и он найдет его в интернете
Еще стоит присмотреться к настройкам дизайна – какие блоки и как можно изменять, можно
ли загружать произвольный фон, менять цвета кнопок и т.д.
3. Шаблоны
Создавать сайты в конструкторе можно 2 способами:
● С нуля
● На основе шаблона
Вы можете создать сайт с нуля – на нем будут только те элементы и блоки, которые нужны
исключительно вам. А еще такой сайт будет выглядеть уникальным. Но придется заранее
продумать структуру сайта, его внешний вид и пр.
Чтобы упростить работу, можно взять готовый шаблон и изменить его – переименовать
разделы, добавить нужные или убрать ненужные, сменить фон и т.д. Чем больше шаблонов
предоставляет конструктор, тем лучше. Особенно, если есть шаблоны для сферы образования.
4. Интеграции
Интеграции – это единственная возможность расширить базовый функционал конструктора. С
их помощью можно наладить работу сайта с другими сервисами. Например, с сервисами
рассылки или мессенджерами – это пригодится, если нужно разослать какое-нибудь важное
сообщение ученикам и родителям. Или онлайн-чатами – это позволит принимать сообщения от
посетителей прямо на сайте и сразу же (или немного позднее) отвечать на них.
5. Тарифы
Полностью бесплатных конструкторов сайтов не существует (точнее, они есть – но у них очень
слабые возможности). Каждый сервис предлагает на выбор несколько тарифов, они могут
влиять на:
● Количество создаваемых сайтов
● Размер диска (совокупный объем файлов, которые можно загрузить на сайт)
● Возможности (доступные блоки и кастомизация элементов)
● Доступный набор шаблонов и т.д.
У всех сервисов есть пробный период – обычно 7-14 дней (иногда даже месяц). В этот период
можно создать сайт, наполнить его контентом и бесплатно использовать. Если понравится –
нужно выбрать подходящий тариф и оплатить подписку.
Цена подписки у всех разная. У одних ежемесячная плата не превышает чашки кофе, у других
– около 500 руб./мес., у третьих – от 1 000 руб./мес. и выше.
6. Возможность бесплатного использования
Многие конструкторы сайтов предлагают бесплатный тариф. В этом случае сайт размещается
на хостинге конструктора под доменом третьего уровня.
Домен сайта – это «имя» сайта в интернете. Например, у Вконтакте это vk.com. Домен
третьего уровня – это поддомен к основному домену. Например, если конструктор сайтов
размещен на домене konstruktor.ru, то школьный сайт будет иметь домен следующего вида –
shkola.konstruktor.ru.
На бесплатных тарифах всегда есть ограничения, например:
● Небольшой максимальный размер загружаемых файлов
● Маленькое дисковое пространство
● Ограниченное количество страниц
● Отсутствие некоторых блоков и шаблонов и т.д.
Тем не менее, на бесплатном тарифе все равно можно держать сайт и размещать на нем
информацию.
Популярные конструкторы на русском языке
Рассмотрим более детально несколько конструкторов, соответствующих нашим критериями.
1. Nethouse
Российский конструктор сайтов, созданный в 2011 г. Входит в ТОП-10 платформ для создания
сайтов в рунете – на нем запущено более 1,5 млн порталов. Отличается простым интерфейсом
и высокой скоростью работы.
Возможности:
● Множество блоков (новости, контакты, фотогалерея, видео, отзывы и пр.)
● Библиотека шаблонов (более 100 готовых вариантов
● Адаптивный дизайн
● SEO-возможности (основные настройки уже прописаны, можно вносить изменения в
мета-теги страниц)
● Интеграции с Яндекс.Метрикой, Яндекс.Бизнес, Telegram, Jivo и другими сервисами
Конструктор можно использовать бесплатно – есть тариф «Старт». На нем доступен весь
базовый функционал, размещение под доменом третьего уровня и публикация до 20
фотографий в разделе «Галерея».
Если вас не устраивают бесплатные возможности, их можно расширить на платных тарифах:
● Сайт (от 400 руб./мес.) – домен в подарок, 400 фотографий в галерее, подключение
статистики, уведомления в Telegram, без рекламной полосы «Сделано в Nethouse»
● Магазин (от 840 руб./мес.) – то же + неограниченное количество фотографий,
разделение прав доступа
● Профессионал (от 2 800 руб./мес.) – то же + использование скриптов
На бесплатном тарифе можно включить некоторые платные опции – например, подключить
свой домен или убрать рекламу (копирайт) конструктора.
2. Tilda
Российский блочный конструктор сайтов, созданный в 2014 г. Один из самых популярных и
красивых конструкторов в рунете.
Возможности:
● Огромное количество блоков – больше 550
● Zero Block. Можно спроектировать собственный блок через добавление отдельных
модулей
● Высокая скорость загрузки страниц
● Адаптивный дизайн
● Большой выбор шрифтов
● SEO-настройки
● Интеграции с e-mail, Telegram, Slack, Zapier и другими сервисами
● Много видеоуроков по созданию сайтов в конструкторе
Конструктор можно использовать бесплатно – есть тариф «Free». На нем можно создать 1 сайт
до 50 страниц, но размер диска будет ограничен 50 МБ. При этом нельзя подключить свой
домен, использовать все блоки, аналитику и SEO, загружать свои шрифты, создавать личные
кабинеты пользователей, вести новостные ленты и т.д.
Чтобы полноценно использовать Tilda, нужен платный тариф:
● Personal (от 500 руб./мес.) – 1 сайт, 500 страниц, 1 ГБ диска, все возможности
конструктора, без рекламы
● Business (от 1 000 руб./мес.) – 5 сайтов по 500 страниц каждый, 1 ГБ диска для каждого
сайта, все возможности конструктора, без рекламы, экспорт исходного кода и API,
оплата по безналу с закрывающими документами
3. uCoz
Российский конструктор сайтов, созданный в 2005 г. На нем работает более 1,2 млн сайтов
(речь об активных – за все время было создано несколько десятков миллионов веб-страниц).
Отличается удобством и простотой.
Возможности:
● Много блоков
● Несколько сотен шаблонов разных тематик
● Адаптивный дизайн
● SEO-настройки
● Бэкапы
● Большая библиотека обучающих материалов
Конструктор можно использовать бесплатно – доступен базовый функционал и 400 МБ места
на диске. Главный минус бесплатного тарифа – сайт могут удалить при отсутствии посещений.
Чтобы избежать этого, нужно перейти на платный тариф. У uCoz их несколько, для школы
подойдет тариф «Образовательный» (+2 ГБ диска, без рекламы, резервное копирование и пр.).
Пример создания сайта
Мы будем создавать школьный сайт с помощью конструктора Nethouse. Он достаточно
простой и удобный, у него есть несколько шаблонов для сайта школы, много нужных блоков и
бесплатный тариф.
1. Регистрация
В первую очередь, нужно создать аккаунт на Nethouse. Для этого на главной странице сайта
нажмите «Войти» и в открывшемся окне выберите «Создать аккаунт».
Зарегистрироваться можно 2 способами:
● Стандартная регистрация (нужно ввести e-mail и придумать пароль)
● Быстрая регистрация (через привязку аккаунта Вконтакте, Яндекс, Google или Apple)
В первом случае понадобится подтвердить регистрацию по электронной почте.
2. Выбор домена и шаблона
Теперь нужно придумать имя сайта. Оно должно состоять из латинских букв, можно
использовать цифры и дефис. Минимальный размер – 6 знаков.
Чуть ниже предложат выбрать шаблон. Есть несколько готовых вариантов – лендинг, сайт
компании, интернет-магазин и т.д. Рекомендуем выбрать шаблон «Сайт школы».
Если вы не хотите создавать сайт на основе шаблона, выберите «Сайт с нуля».
Останется лишь ввести номер телефона и нажать «Создать сайт».
3. Интерфейс конструктора
После создания сайта откроется интерфейс конструктора. В нем можно выделить 3 основных
раздела:
● Меню (1)
● Редактор (2)
● Просмотр (3)
С каждым разделом ознакомимся подробнее ниже.
Еще на главной странице конструктора можно увидеть несколько кнопок:
● Подарок. Каждый пользователь Nethouse может получить бесплатный подарок – книгу
по продвижению сайтов. Ее можно скачать по ссылке в ВК или Telegram
● Подключить тариф. Здесь можно выбрать платный тариф и подключить его
● Найти агента. Биржа Nethouse, через которую можно найти исполнителя для
разработки сайта, написания текстов, создания дизайна и других задач
● Помощь. База знаний, в которой собраны ответы на все популярные вопросы по
редактированию и настройке сайта в конструкторе
Если кликнуть по иконке профиля, которая находится в правом верхнем углу, можно открыть
дополнительное меню. Через него можно переключаться между сайтами (если вы создаете
несколько сайтов через конструктор) и изменить какие-нибудь настройки аккаунта (телефон,
пароль и пр.).
4. Меню
В левой части конструктора находится «Меню». На какие разделы стоит обратить внимание:
1. Сводка
Общая информация о сайте – индексация в поисковых системах, текущий тариф и баланс,
домен сайта и подключенные приложения
2. Домены
Здесь можно подключить домен, если вы хотите, чтобы сайт размещался на отдельном домене,
а не на домене Nethouse
3. Дизайн сайта.
Здесь можно выбрать/изменить шаблон сайта и настроить его. Например, можно изменить цвет
фона и фоновое изображение, внешний вид меню сайта и кнопок.
Еще здесь можно выбрать шрифт для сайта – Nethouse предлагает около 30 вариантов.
4. Приложения
Раздел с интеграциями. Можно подключить к сайту разные сервисы – например, Jivo (онлайн-
чат), Яндекс.Метрику (система статистики), Telegram (прием уведомлений), Яндекс.Карты и
т.д.
5. Настройки
В этом разделе можно настроить:
● Основные параметры сайта – язык, фавикон (небольшое изображение, которое
отображается на вкладке сайта в браузере) и пр.
● SEO-настройки – заголовок, описание и ключевые слова для главной страницы сайта
● Профиль – физ. лицо, юр. лицо или ИП и реквизиты
● Пользователи – добавление новых пользователей и настройка прав доступа для работы
с сайтом
6. Рассылка
Раздел для создания email-рассылок и хранения базы пользователей.
Остальные разделы меню – магазин, кабинет клиента, платные услуги и продвижение и т.д. –
нам не интересны, т.к. они предназначены для интернет-магазинов и заказа рекламы на сайте.
5. Редактор сайта
Теперь перейдем к главному инструменту конструктора Nethouse – редактору сайта. Внешне
он выглядит так:
Все настройки сайта можно осуществлять прямо в редакторе – изменения будут вноситься в
реальном времени. Например, можно менять текст, добавлять новые разделы, менять блоки
местами и т.д.
Шапка сайта
Начнем с шапки сайта. Шапка (хедер) – это блок в верхней части сайта, который отображается
на всех страницах. Сейчас он выглядит так:
Обычно в шапке сайта размещается контактная информация, название и логотип, меню и
другие элементы, которые нужно отображать на всех страницах сайта. Т.е. основное
наполнение сайта будет разным во всех разделах («О школе», «Родителям» и т.д.), но шапка
будет везде одинаковой.
Если мы наведем курсор на верхнюю часть шапки, появятся 2 кнопки:
● Отображать/скрывать блок (значок в виде глаза)
● Настройки блока (значок в виде шестеренки)
Отображение/скрытие блока позволяет убрать его с сайта без удаления – например, если вы
хотите временно убрать его, а потом вернуть. Тогда вам не придется заново добавлять блок и
настраивать его.
Если нажать на кнопку настройки блока, откроется меню. Оно будет отличаться в зависимости
от блока. Например, для верхнего блока шапки оно выглядит так:
Здесь можно поменять:
● Номер телефона
● Формы «Напишите нам» и «Обратный звонок»
Чтобы удалить номер телефона, нужно нажать значок в виде корзины. Чтобы удалить
ненужную форму, достаточно снять с нее галочку. Если нажать на значок в виде карандаша
рядом с формой, можно настроить ее – например, добавить новые поля или изменить текст в
существующих.
Не забудьте нажать кнопку «Сохранить», чтобы внести изменения. После того, как мы
изменили номер телефона и убрали форму обратного звонка, верхняя часть шапки стала
выглядеть по-другому:
Нижний блок шапки – название школы и меню. Если навести курсор на название школы,
можно загрузить новый логотип.
Справа от названия находится меню сайта. Каждый раздел меню – это отдельная страница.
Сейчас мы находимся на главной странице сайта. Если навести курсор на меню, откроются
настройки.
Здесь есть 4 кнопки:
1. Страница
С помощью этой кнопки можно создать дополнительную страницу на сайте. Например, если
вам нужен еще какой-нибудь раздел.
При добавлении страницы нужно:
● Ввести ее заголовок (название)
● Указать URL-адрес
При желании можно сразу же прописать SEO-настройки создаваемой страницы. Дальнейшую
работу с созданной страницей (добавление новых блоков, информации и пр.) лучше
осуществлять прямо на ней.
2. Текстовые страницы
Это раздел для работы с текущими страницами сайта. Здесь можно добавлять и убирать их из
меню, редактировать название и URL-адрес, удалять ненужные страницы и т.д.
3. Показать/скрыть меню
Кнопка в виде глаза позволяет включать и выключать отображение меню.
4. Редактировать
С помощью этой кнопки можно поменять местами пункты меню или быстро отредактировать
их.
Блоки
Теперь перейдем к блокам. Блоки – это основные элементы сайта. Это текст, фотогалереи,
видео и т.д. То есть все, что мы видим на любом сайте.
Т.к. мы создаем сайт на основе шаблона, у нас на каждой странице уже есть несколько блоков.
Если навестись на любой из них, появится несколько кнопок:
● Отображение/скрытие блока
● Поднять (стрелка вверх) и опустить (стрелка вниз) блок. Позволяет менять блоки
местами
● Редактировать
● Удалить блок
Если нажать на кнопку редактировать, откроется меню с настройками блока. Для каждого
блока оно индивидуальное. Например, для выбранного оно выглядит так:
Здесь можно настроить текст на блоке, его дизайн (фон) и анимацию (стиль и скорость смены
слайдов).
Чтобы добавить новый блок, нужно нажать на значок в виде плюса:
Откроется меню блоков. Оно выглядит так:
Всего в Nethouse есть 30+ разных блоков. Но не все из них нужны для школы. На какие
обратить внимание:
● Форма заявки. Пригодится для оформления разных заявок учителями и родителями
(например, при приеме на работу или при записи ученика в школу)
● Слайдер. Карусель автоматически перелистываемых слайдов. Пригодится для
визуального оформления сайта (например, можно разместить фотографии школьной
жизни)
● Возможности. Блок по типу «текст + изображение». Обычно с его помощью
рассказывают о преимуществах
● Карусель (аналогично слайдеру)
● Текст. Обычный текстовый блок
● О компании. Текстовый блок, в котором можно рассказать о школе и кратко о
преимуществах
● Фотогалерея. Блок для размещения фотографий
● Видеоролик. Блок для размещения видео
● Карта. Полезный блок, с помощью которого можно указать размещение школы на
карте города
● Вопрос-ответ. FAQ-блок с часто задаваемыми вопросами и краткими ответами на них
● Статьи. Блок для размещения статей или новостей школы
● Документы. Полезный блок, с помощью которого можно разместить на сайте важные
документы для учителей, учеников и родителей – например, Устав школы, заявление о
приеме на обучение и т.д.
● Таймлайн. Через этот блок можно кратко рассказать об истории школы, акцентируя
внимание на основных вехах
● Ссылки. Блок для размещения полезных ссылок на другие ресурсы – например, сайт
Минобрнауки
● Подписка на рассылку. Блок для сбора e-mail родителей. Пригодится при оформлении
рассылок
Остальные блоки – товары, услуги, карточки, призывы к действию и т.д. – вряд ли пригодятся.
В основном их размещают на коммерческих сайтах (например, в интернет-магазинах).
Впрочем, если подойти с креативом, то можно придумать, как их получится нестандартно
использовать.
Чтобы добавить или изменить блок на другой странице («О школе» и пр.), достаточно открыть
эту страницу и сделать то же самое.
Подвал сайта
Наконец, настроим подвал сайта. Подвал (футер) – это самый нижний (завершающий) блок
сайта. Как и шапка, он одинаковый на каждой странице. Здесь обычно размещают
дополнительную информацию и список разделов сайта.
Сейчас наш футер выглядит так:
Он состоит из двух частей:
● Сквозной подвал сайта
● Основной подвал сайта
Сквозной подвал сайта – это набор колонок со ссылками на разные разделы сайта. Его, в
отличие от основного подвала, можно удалить. Чтобы отредактировать сквозной подвал,
нужно нажать кнопку «Редактировать».
Здесь можно удалить ненужные колонки и настроить ссылки в нужных. Например, уберем
разделы «Покупателям» и «Бизнесу».
В основном подвале сайта находится копирайт сайта. Его можно изменить как любой
текстовый блок. Еще здесь находятся блок статистики и копирайт Nethouse. Блок статистики
доступен только на платном тарифе. И на нем же можно убрать копирайт конструктора.
6. Просмотр
С помощью кнопки «Просмотр» можно увидеть, как выглядит сайт глазами обычного
пользователя.
Здесь нет элементов управления, можно пролистывать страницы сайта, переходить по разным
разделам и ссылкам, нажимать кнопки, заполнять формы и т.д. Это позволяет не только
увидеть, как выглядит сайт школы со стороны, но и проверить работоспособность всех форм и
кнопок.
Вывод
Nethouse – простой и удобный конструктор сайтов, который можно бесплатно использовать
для создания сайта школы. Конечно, придется потратить определенное время, чтобы
разобраться в его возможностях и настройках. Но зато так у вас получится сделать уникальный
школьный сайт, который ничем не будет уступать сайтам других образовательных
учреждений.
Скачать материал

Информатика - еще материалы к урокам: