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

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. Итоговый результат