Урок 5. Верхнее меню конструктора timeweb. Фон сайта. Цвет элементов фона.

Добрый день! Меня зовут Светлана. Я буду вашим гидом по ресурсу lsitel.ru.

 

В конструкторе сайтов timeweb рассмотрим верхнее меню, которое расположено на белом фоне правее. Нажав на «шестеренку» вы увидите пункт меню «Фон». Сегодня мы будем работать с фоном нашего сайта.

Конструктор сайтов таймвеб, верхнее меню, фон

Напоминаю, что в конструктор  timeweb можно зайти по этой ссылке и практиковаться вместе с нами. Как это сделать, посмотрите предыдущие уроки.

В окне «Свойства» обратите внимание на то, что у нас расположено слева. Это наименование наших страниц, для которых мы можем выполнять определенные настройки внешнего вида. Напомню, то, что мы будем делать в конструкторе нашего сайта, отразится в коде файла CSS. Для работы с внешним видом сайта существуют разные свойства в этом файле: background-image, background-color, background-repeat и многие другие. Основы мы рассмотрим на дополнительных занятиях, а для более углубленного изучения есть отдельные специальные многочасовые курсы. Но  для того, чтобы нам создать красивый и рабочий сайт, нет необходимости глубоко изучать внутренний код.

Обратите внимание, что слева самая верхняя строка  называется «По умолчанию (для всех страниц)», если она выбрана, тогда все настройки будут применены для всех страниц сайта сразу.

Конструктор таймвеб. Применить для всех страниц сайта

Фон сайта. Цвет фона.

То, что мы видим, выделено на скриншоте красным – это задний общий фон нашего сайта.

Конструктор таймвеб. Фон сайта общий

Требуется задать для нашего сайта цвет фона.

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

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

Конструктор таймвеб. Фон сайта общий. Выбираем цвет фона

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

Конструктор таймвеб. Фон сайта общий. Выбираем цвет фона

Фон тела страницы.

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

Конструктор таймвеб. Цвет тела сайта.

Выберем для тела сайта темный сиреневый цвет.

Конструктор таймвеб.Изменяем цвет тела страницы

У нас получилось вот такое тело сайта.

Конструктор таймвеб. Цвет тела сайта.

Если вы захотите вернуть прежние цвета, то можете  сделать сброс шаблона, что вы уже знаете, как делать из предыдущих уроков, но помните, что и прочие изменения (текст, блоки и т. д.) вернутся в первозданный вид. Или вы можете запомнить код цвета, а потом, когда будет необходимо применить его.

Конструктор таймвеб. Цвет тела сайта.

Для этого нужно код скопировать в блокнот, а когда потребуется вставить обратно.

Конструктор таймвеб. Цвет тела сайта.

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

Конструктор таймвеб. Прозрачность тела страницы.

И, в итоге, получаем на сайте иной оттенок тела страницы сайта.

Конструктор таймвеб. Прозрачность тела страницы.

И, в итоге, получаем на сайте иной оттенок тела страницы сайта.

Конструктор таймвеб. Прозрачность тела страницы.

Фон шапки сайта.

Выделяем на схеме в окне «Свойства» шапку сайта и настраиваем для нее цвет.

Конструктор таймвеб. Фон шапки сайта. Выбираем цвет

Выделяем на схеме в окне «Свойства» шапку сайта и настраиваем для нее цвет.

Конструктор таймвеб. Фон шапки сайта. Просмотр

Фон подвала сайта.

Теперь аналогичным способом настроим цвет нижней части сайта.

Конструктор таймвеб. Фон подвала сайта. Настройка

У вас должно получиться, как на скриншоте ниже.

Конструктор таймвеб. Фон подвала сайта. Просмотр

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

 

Резюме к уроку 5: «Верхнее меню конструктора timeweb. Фон сайта. Цвет элементов фона»:

Вам понравились наши бесплатные уроки?

Вы можете отправить комплимент нашему преподавателю: