[Урок 23] Первый сайт на Zero Block (5 часть - завершаем работу над главным блоком)
Привет, друзья! Уже жду момента, когда мы приступим к серьёзным действиям, а пока нам нужно завершить работу над главным блоком нашего сайта вебинара.
Сегодня мы установим кнопки, проверим работу и опубликуем ГОТОВУЮ страницу. После я создам небольшой опрос, прошу оставьте свой голос - так я пойму, какой контент вам интересен. Успехов в изучении!
В прошлом уроке мы сделали изображение и анимацию к нему. В сегодняшнем уроке мы наконец-то доделаем макет. Нам осталось совсем немного. Приступим!
Возвращаемся к редактированию макета
Переходим в режим редактирования и смотрим, чего нам нахватает. Однозначно кнопок!
Нажимаем на добавление объекта (крестик в левом верхнем углу) и выбираем "Add button".
Кнопка добавлена, но выглядит она не совсем так, как в макете. Исправим это. Помещаем её на место под всеми текстами. И переходим к её настройкам.
Настройки, которые нужны нам:
Ширина кнопки: 220px, как в макете. Либо просто растягиваем её по модульной сетке так, как указано в psd файле.
Caption: текст на кнопке. Ставлю текст из макета "Записаться на марафон".
BG Color: удаляем всё из данного окна. Цвет кнопки у нас прозрачный.
Color: цвет самого текста. #000000 - чёрный.
Size: размер текста на кнопке. 14 пикселей.
Typerface/weight: шрифт и его начертание. Roboto, Medium.
Далее идём и открываем вкладку "Border" - обводка кнопки.
Color: #00000 - опять чёрный, мать его. Это цвет обводки.
BRDR Size: толщина обводки. Я ставлю 3 пикселя.
Radius: скругление углов, нам она не нужна, ставим 0.
Пока что здесь нам больше ничего не нужно. Эффект при наведении на кнопку и ссылку мы повяжем в самом конце вёрстки. Закрываем настройки и не забываем сохранять промежуточный результат.
У нас осталась кнопка Play, в форме логотипа ютуба. Она была в материалах. Добавляем изображение.
Опять добавляем новый объект - Add image.
Идём в настройки блока, выбираем изображение из папки макета "button_youtube.png"
Под изображением ставим original size и перемещаем изображение к кнопке с записью на марафон.
Выделяем оба изображения и идём к настройкам.
Ставим "to each other" и нажимаем на выравнивание по центру (горизонтально). Это вторая иконка с конца. Таким образом мы выравниваем оба объекта (кнопка и иконка ютуба) по центру относительно друг друга.
Идём к настройкам кнопки и открываем раздел "LINK".
Здесь мы указываем ссылку, куда будет вести кнопка при нажатии на неё.
TARGET: где будет открываться ссылка (на этой странице или открываться в новом окне)
Сохраняем и смотрим. Вот, что у нас получилось:
Мы сверстали первую страницу нашего макета, поздравляю!
В ближайшем будущем мы продолжим его вёрстку и сделаем много всего другого. На этом урок подошёл к концу. Всем больших успехов!)