Как создать сайт учителя

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

Регистрация в системе#

Для создания аккаунта Ucoz перейдите по ссылке и нажмите Зарегистрируйтесь. Введите свой email-адрес и придумайте пароль для входа - Создать сайт. На следующем шаге заполните персональные данные - Регистрация.

Рис.1. Регистрация аккаунта

Примечание: Не забудьте подтвердить регистрацию аккаунта, перейдя по ссылке в соответствующем письме от Ucoz

Создание сайта#

После подтверждения регистрации аккаунта. Перейдите по ссылке в письме или зайдите на сайт ucoz.ru под своим логином (Рис. 1). На главной странице сайта выберите Ucoz - Войти.

Рис.2. Главная страница Ucoz

Придумайте доменное имя (свободное) для вашего сайта

Рис.3. Выбор домена для сайта (secure.ucoz.net)

Укажите тип сайта - Лэндинг/визитка, название сайта произвольное, например, "Сайт учителя ОБЖ".

После нажатия кнопки Создать сайт вы попадёте в панель управления своим сайтом.

Параметры сайта#

Шаблон сайта

Выберите подходящий для вас шаблон сайта. Для этого в панели управления перейдите в раздел Настройки - Общие настройки - Дизайн сайта - Выбрать дизайн (например, #2011) - Сохранить.

Рис.4. Выбор шаблона сайта Ucoz

Баннер сайта

Измените стандартную картинку баннера сайта. Для этого загрузите любое изображение в разделе Инструменты - Файловый менеджер. Скопируйте ссылку к изображению.

Рис.5. Файловый менеджер

Перейдите в раздел Дизайн - Управление дизайном (шаблоны) - Глобальные блоки - PROMO.

Рис.6. Редактор шаблонов

В строке с идентификатором uCozHeaderMain замените путь к изображению '/uCozHeader.png' на 'https://secure.ucoz.net/bg-secure.jpg'.

<div id="uncheader" class="$UHEADER_CLASS$">
   <div id="uCozHeaderMain" style="background:url(https://secure.ucoz.net/bg-secure.jpg) 50% 50% no-repeat;"></div>
</div>

На сайте поменяется изображение баннера.

Тут же изменим стандартные надписи в блоке с идентификатором promo-b

<div class="promo-b">
   <div class="promo-title">
      Уважаемые преподаватели ОБЖ и студенты
   </div>
   <div class="promo-text">
      На моем сайте предоставлены разработки уроков и внеклассных мероприятий с презентациями по ОБЖ, технологии и курсу предпрофильной подготовки «Мой выбор», а также большой перечень документации необходимой при работе для преподавателей-организаторов ОБЖ
   </div>
</div>

Нажмите Сохранить.

Внимание: Если изображение не изменилось на загруженное, значит нужно очистить кэш браузера и перезагрузить страницу

Логотип сайта

Аналогично Рис. 5 загрузите свой логотип (размер как и в шаблоне 69x63 пикс.). И скопируйте путь к изображению. Перейдите в раздел Дизайн - Управление дизайном (шаблоны) - Общие шаблоны - Таблица стилей CSS.

Найдите и заменить путь к картинке с классом site-l на https://secure.ucoz.net/main-logo.png. Сохранить.

.site-l {display:block;padding:8px 0 8px 90px;background:url(https://secure.ucoz.net/main-logo.png) 0 center no-repeat;}

Конструктор сайта

Если вы авторизованы на сайте, то на главной странице будет отображаться панель настроек. Включите на ней конструктор, чтобы редактировать блоки Управление дизайном - Включить конструктор. Теперь вы можете изменить слоган сайта, добавлять, удалять, перемещать блоки в визуальном представлении. Примените изменения, выбрав Управление дизайном - Сохранить изменения.

Меню сайта

Создадим необходимые пункты меню в разделе Дизайн - Конструктор меню. Удалим все стандартные пункты меню. Добавим новые:

Конспекты уроков
Охрана труда и ТБ
Основы военной службы
ЗОЖ
Пожарная безопасность
Гражданская оборона

Примечание: В качестве Url-адреса пунктов меню временно, укажем главную страницу - "/" (символ обратного слеша). В дальнейшем по мере наполнения сайта, url-адреса отредактируем.

Рис.7. Конструктор меню

Рис.8. Изменённый шаблон Ucoz

Наполнение страницы#

Чтобы отредактировать содержимое страницы в панели управления войдите в раздел Редактор страниц - Управление страницами сайта. Напротив нужной страницы - Изменить. Откроется визуальный редактор страницы. Такое же окно можно открыть, кликнув на иконку "глаз" на каждой странице сайта.

Примечание: Иконка редактирования страницы доступна только авторизованному администратору сайта

Визуальный редактор мало чем отличается от редактора Word, OpenOffice. Удалите с главной страницы все ключевые слова и ссылки.

Рис.9. Визуальный редактор Ucoz

Теперь можно наполнять сайт информацией.

Рис.10. Наполнение страницы

Добавление баннера#

В панели управления загружаем изображение баннера Инструменты - Файловый менеджер. Копируем путь к изображению.

На странице сайта включим конструктор Управление дизайном - Включить конструктор. И создадим новый блок Управление дизайном - Добавить блок. Созданный блок переместите в правую колонку сайта, и переименуйте его в "Олимпиада по ОБЖ".

Нажмите на иконку "шестерёнки" над блоком и на вкладку HTML добавьте следующий код:

<a href="https://artursharipov.ru">
   <img src="https://secure.ucoz.net/olimp.jpeg" style="width:100%">
</a>

Внимание

В атрибут src вставляете скопированную ранее ссылку на изображение баннера

В атрибут href вставляете ссылку на любой сайт

Нажмите Сохранить.

А также примените изменения в конструкторе Управление дизайном - Сохранить изменения.

Итоговый сайт#

Рис.11. Итоговый результат