Как создать школьный веб-сайт на конструкторе
электронный образовательный ресурс по информатике и икт (10 класс)

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

К сожалению, большинство школ не может позволить себе заказать дорогостоящую разработку сайта у опытных программистов. В результате этим занимаются учителя и школьники. Поэтому в основе создания школьного сайта лежит 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. Возможность бесплатного использования

Многие конструкторы сайтов предлагают бесплатный тариф. В этом случае сайт размещается на хостинге конструктора под доменом третьего уровня.

Домен сайта – это «имя» сайта в интернете. Например, у Вконтакте это. Домен третьего уровня – это поддомен к основному домену. Например, если конструктор сайтов размещен на домене , то школьный сайт будет иметь домен следующего вида – .

На бесплатных тарифах всегда есть ограничения, например:

• Небольшой максимальный размер загружаемых файлов
• Маленькое дисковое пространство
• Ограниченное количество страниц
• Отсутствие некоторых блоков и шаблонов и т.д.

Тем не менее, на бесплатном тарифе все равно можно держать сайт и размещать на нем информацию.

Популярные конструкторы на русском языке

Рассмотрим более детально несколько конструкторов, соответствующих нашим критериями.

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 – простой и удобный конструктор сайтов, который можно бесплатно использовать для создания сайта школы. Конечно, придется потратить определенное время, чтобы разобраться в его возможностях и настройках. Но зато так у вас получится сделать уникальный школьный сайт, который ничем не будет уступать сайтам других образовательных учреждений.