Ваш браузер устарел. Рекомендуем обновить его до последней версии.

Как сделать шапку (хедер) сайта.


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

Научившись работать в одном конструкторе, вам будет легко самостоятельно разобраться в любом другом конструкторе.

 

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

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

Заходим в личный кабинет Альт Клуба.
Если еще не зарегистрированы, то пройдите бесплатную регистрацию, конструктор на один сайт вам будет доступен всегда.

В личном кабинете Альт Клуба заходим через Меню в Конструктор.

Нажимаем "Добавить страницу"

Здесь можно выбрать подходящий вам готовый шаблон.
Нам нужен пустой шаблон.

Нажимаем "Выбрать".

Загрузилось рабочее пространство страницы в конструкторе.

Слева расположена "Панель инструментов".

Сегодня будем использовать элементы:
секция, группа, блок, текст, изображение, видео.

при наведении мышки на элемент появляется подсказка.

Секция используется для того, чтобы поделить страницу на смысловые части (секции),
группа, для объединения более мелких объектов.

Блок используется для создания элементов.

Ставим первую секцию, кликом на элемент "Секция", здесь в дальнейшем расположим информацию.

Кликом на значок секция ставим вторую секцию.

Это просто области сайта, разделение на зоны. Никаких границ в готовом сайте видно не будет.

Поставим элемент "Группа" - для объединения элементов шапки сайта.

Кликаем на значок группа.

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

В панели свойств объекта с помощью элемента замены цвета ставим прозрачный фон, без цвета.

В меню свойств объекта выбираем функцию "Позиционирование".

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

Слой блока поставим на слой ниже нуля на любое значение.

Теперь поставим простой блок кликом на значок Простой блок и растянем мышкой по ширине сайта и высоте как на образце.
В любое время можно размеры потом изменить.

Выберем функцию "Задний фон" в меню свойств объекта и поменяем фон блока. Можно выбрать из готовых цветов или попробовать подобрать более точно оттенки. В нашем случае выбираем из синих цветов оттенок в сторону серого.

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

 

Все материалы для данного сайта храните в специально созданной для этого папке на своем компьютере.

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

Далее напишем заголовок сайта.

Кликаем на инструмент "Текст".
Появляется блок текста. Растягиваем пошире за уголок, этот блок работает в пропорциях квадрата.
дважды кликаем на текст и после третьего клика можно писать или выделять текст.
Переписываем заголовок с сайта образца, в дальнейшем можете придумывать свои заголовки.

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

Подберем цвет текста по образцу. Нам нужны красно оранжевые оттенки. Выделяем текст и в палитре цветов выбираем нужный оттенок.

Цифровой код этого текста также записываем в блокнот.

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


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


http://snip.ly/moi1f#http://colorscheme.ru/# цветовой круг.

Код цвета обязательно переписываю и сохраняю в текстовом файле.

Увеличу толщину шрифта.

Поставим видео на сайт.
Активирую инструмент Видео.
Копирую ссылку в браузере на нужное мне видео и вставляю ее в окно инструмента.


Уменьшаю видео за уголок блока и перетаскиваю на нужное мне место.


В группу банера уже входят три элемента, цветовой блок, заголовок и видео.

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

Все элементы должны быть связаны. двигаю мышкой группу и заголовок не прикрепился.
Перетаскиваю заголовок за пределы группы банера, отпускаю мышь, и ставлю заголовок на место.

Теперь проверяю и все элементы банера двигаются вместе.

Поставим рамку вокруг видео.

Активирую инструмент "Изображение".

В диалоговом окне нажимаю Выбрать из галереи.

В Галереи раскрываю вкладку Мои изображения. Здесь у меня много папок, у вас будет пустое поле.
Для удобства поиска в дальнейшем файлов создаем новую папку, пишем название паку и нажимаю на крестик.
Кликаю на папку, она раскрывается и выбираю файл с моего компьютера через проводник.

Нажимаю "Открыть", В галерее тоже кликаю на файл, чтобы выбрать его, и после нажатия на Ок рамка для видео появляется на сайте. Подбираю размер, растягивая за уголок выделения и перемещаю на место.

Допишем список преимуществ.

Кликаем на инструмент Текст. Перетаскиваю блок текста на поле и пишу первое преимущество.
Подбираю размер шрифта.

Копирую этот текстовый блок с помощью инструментов копировать и вставить.

И в каждом блоке пишу преимущества с образца сайта.
В дальнейшем можно написать по-своему. Пока для быстроты освоения конструктора лучше копировать.


И когда видите в интернете красивый сайт, хорошие тексты, всегда сохраняйте их как примеры.
Копирование хороших работ и переделывание их по своему, совмещая элементы с готовых сайтов, их усовершенствование - это часть именно профессиональной работы web-дизайнера.

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

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

Активирую инструмент "Линейка". Мышкой с левой стороны тащю вертикальную линию, чтобы выровнять текст.

Эти вспомогательные линии на готовом сайте видны не будут.

Сохраняем свою страницу с помощью функции "Сохранить".

В диалоговом окне нажимаем Ок, ничего не меняя и страница сохраниться с текущими названиями.

Найду свою страницу в конструкторе, она имеет такую ссылку для открытия в браузере.

В конструкторе с помощью диалогового окна Настройки меняю название страницы и сохраняю настройки.

Теперь по старому адресу страницы больше нет, она открывается по новой ссылке.

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

Как это сделать разберем на других уроках или можете посмотреть инструкции в Альтклубе.

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

Закладка добавляется под этим именем.

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

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

Делайте первый урок и будем приступать к следующему.

Зарегистрироваться