Урок 6. Верхнее меню конструктора timeweb. Фон сайта. Прочие настройки элементов фона.

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

 

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

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

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

Задний фон сайта. Прочие настройки.

Для фона сайта мы можем задать цвет, а можем добавить картинку или видео. Они по умолчанию всегда будут расположены над цветным фоном. В меню «Шестеренка» - «Фон» - «Свойства» нажмем на изменение изображения заднего фона сайта. Выберем картинку и нажмем кнопку «Применить».

Конструктор сайтов таймвеб, картинка выбор
Конструктор сайтов таймвеб, верхнее меню, выбор картинки для фона сайта
Конструктор сайтов таймвеб, вставили картинку для фона сайта

В нижней части сайта у нас появился фон.

Конструктор сайтов таймвеб, картинка фона сайта расположилась внизу

Почему картинка фона оказалась в нижней части сайта? Потому что мы можем сами настроить ее расположение в окне настроек фона. В данном случае картинка была внизу по центру. Давайте, переместим картинку фона сайта в центр.

Конструктор сайтов таймвеб, редактирование расположения

Теперь картинка фона расположена по центру сайта. Мы видим, что она исчезла с нижней части заднего фона и отражается в центре нашего сайта.

Конструктор сайтов таймвеб, расположение фона картинки
Конструктор сайтов таймвеб, расположение картинки фона в центре

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

Конструктор сайтов таймвеб, повторение рисунка

Теперь мы видим, что раз нет повторений, то картинка одна, не повторяется, и расположена по центру фона страницы.

Конструктор сайтов таймвеб, повторение исчезло

Если мы выбрали бы флаг «Повторять «По вертикали», то картинка повторилась бы сверху вниз и снизу вверх. Флаг «Не прокручивать фон» остановил бы картинку заднего фона при прокрутке. Прокручивалось бы только само тело сайта.

А что будет, если поставить все флаги? Можете попробовать сами это сделать и посмотреть, что будет. Но забегу вперед и скажу, что у вас картинка размножится по всему фону сайта и закроет собой цвет заднего фона. Поиграйте галочками самостоятельно и проанализируйте изменения на вашем сайте.

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

Конструктор сайтов таймвеб, изменение прозрачности страницы

Получился полупрозрачный фон картинки страницы сайта.

Конструктор сайтов таймвеб, прозрачность картинки

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

Как мы уже знаем, что автоматически наша картинка фона сайта располагалась по центру страницы. Если мы выберем «Заполнять», то она собой закроет весь задний фон и расположится по всему фону сайта. А теперь выберем  опцию «Содержать» и применим ее.

Конструктор сайтов таймвеб, размер картинки фона страницы сайта

Мы видим, что картинка фона автоматически расширилась по ширине тела страницы.

Конструктор сайтов таймвеб, размер картинки фона страницы сайта по ширине тела сайта

Можно выбрать автоматически регулировку высоты и ширины картинки фона сайта, а можно делать это вручную.

Конструктор сайтов таймвеб, размер картинки фона страницы сайта - регулировка вручную

При необходимости можно наложить еще один фон поверх, того, что мы имеем.

Конструктор сайтов таймвеб, второй фон страницы сайта

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

Конструктор сайтов таймвеб, второй фон страницы сайта, настройка

Фон тела страницы. Прочие настройки.

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

Конструктор сайтов таймвеб, прочие настройки фона тела страницы

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

Бесплатные уроки по созданию сайтов. Растянули тело сайта.
Конструктор сайтов таймвеб. Растянули тело сайта по ширине страницы

Прочие настройки шапки и подвала сайта.

Настройки страницы шапки и подвала имеют схожие функции друг с другом и с предыдущими настройками тела и фона сайта.

Бесплатный урок. Учимся настраивать шапку сайта и подвал.

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

Бесплатный урок. Учимся настраивать шапку сайта и подвал.

В настройках фона я не сказала о функции «Применить ко всем страницам». Она, на мой взгляд, дублирует выбор папки слева «По умолчанию (для всех страниц сайта)». Зачем разработчики её вытащили отдельно, пока для меня остается загадкой. Если вы сможете понять для чего придумана эта отдельная функция, то напишите мне по обратной связи.

Бесплатный урок. Учимся настраивать шапку сайта и подвал.

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

 

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

 

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

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

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