Всем привет.
Сегодня я хочу показать #верстку сайта по макету. Будет это максимально детально и, надеюсь, полезно)
Для начала создаем папку с названием нашего проекта, например Aion. В ней создаем пустой текстовый файл "index" с расширением .#html
Тут же нам нужны три папки: "#css", "icons" и "img".
Итак, вот "подопытный", скачать макет в формате .#psd вы можете по ссылке https://symu.co/freebies/templates-4/aion-psd-template/
Открываем графический редактор, я использую сервис #Marsy. Загружаем наш .psd файл.
И видим при открытии данного макета вот такое "всплывающее окно". Скрыть данный слой (как и любой другой) можно, перейдя в панель управления слева в "Слои" и кликнув по значку глаза. Когда значок глаза перечеркнут - слой не видим.
Перед написанием #кода важно проанализировать макет, разбить его на основные части и ознакомиться с повторяющимися частями будущего сайта. Это значительно ускоряет процесс верстки и помогает мыслить системно.
После приступаем к экспорту элементов с макета. Их, как оказалось, совсем немного. Сохраняем в формате .png отдельно каждый элемент, в папке с иконками (icons).
Так же для создания логотипа нам необходим еще один файл - это белый крестик в формате .png, т.к. предоставленный в макете логотип имеет плохое качество.
Ссылка на лого https://ia.wampi.ru/2022/03/04/logof1a7842b21daf0f5.png
И да, конечно мы заморочаемся и сами сделаем иконку "бургера".
В папку же с картинками (img) мы помещаем лишь один элемент, в формате .jpg.
Важно при работе с материалами проекта учитывать следующие моменты:
1 создавайте правильную, четкую структуру (папка к папке, все "по полочкам")
2 называйте каждый свой элемент осознанно.
3 не используйте в названии кириллицу и пробелы .
Итак, файловая структура создана, элементы макета экспортированы. Далее в редакторе кода (я использую Visual Studio #Code) создаем структуру #html-документа.
К слову, создавать файлы проекта можно и в редакторе кода, создаем файл style.css в папке css.
Раздел head содержит техническую информацию о #веб-странице — заголовок, ее описание и ключевые слова для поисковых машин, данные об авторе документа, времени создания страницы, базовом адресе страницы, кодировке документа и т. д.
Мета-тег HTML — это элемент разметки, описывающий свойства документа как такового (метаданные). Назначение мета-тега определяется набором его атрибутов, которые задаются в теге <meta>.
Мета-теги размещают в блоке <head>...</head> веб-страницы. Они не являются обязательными элементами, но могут быть весьма полезны.
Пример описания метаданных:
<head>
<meta name="author" content="строка"> — автор веб-документа
<meta name="date" content="дата"> — дата последнего изменения веб-страницы
<meta name="copyright" content="строка"> — авторские права
<meta name="keywords" content="строка"> — список ключевых слов
<meta name="description" content="строка"> — краткое описание (реферат)
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> — запрет на индексирование
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> — тип и кодировка
<meta http-equiv="expires" content="число"> — управление кэшированием
<meta http-equiv="refresh" content="число; URL=адрес"> — перенаправление
</head>
С помощью тега link подключаем стили, отметив путь до него в атрибуте href.
Используя link мы так же можем подключить шрифты, используемые в макете, давайте это сразу и сделаем.
Для этого переходим в графический редактор, в раздел "информация о макете"(ctrl + i), где видим перечень всех стилей шрифтов, которые нам нужны.
Отмечу, что в графическом редакторе Marsy вы не сможете просмотреть информацию о макете (шрифты и используемые цвета и пр.) в бесплатной версии, только с подпиской "Стандарт". (но стоимость подписки 100р. в месяц).
На сайте fonts.google.com находим и "собираем" все стили шрифта (+ для логотипа пришлось добавить "black 900").
Вставляем полученные ссылки <head>, так же подключаем шрифты в css, назначая их для всей страницы с помощью селектора *, прописываем сюда же нулевые padding/margin и box-sizing:border-box;, которое включит внутренние отступы и границы в значения ширины и высоты элемента.
Начинаем с первой секции - блока с голубым фоном, который включает в себя небольшую шапку (header) с логотипом и иконкой меню, контейнер с заголовками.
Т.к. шапка состоит из элементов белого цвета - в стилях сразу обозначаем цвет фона, высоту и пр.(все свойства элементов (вернее их часть) указаны в графическом редакторе).
Приступаем к созданию логотипа. Как уже отметила выше, качество исходного лого в макете мне не совсем нравится. Поэтому крестик, изображенный на нем, находим в хорошем качестве, в формате .png. (ссылку я оставила выше)
Вставляем с помощью тега img, и со второй частью лого - надписью Aion - заворачиваем в отдельный div с классом "logo". И применяем стили.
Для текста задаем свойство font-weight со значением 900, тем самым делаем текст потолще для большего соответствия с крестиком:)
Сравниваем)
И дальше у нас иконка бургер, для которой создаю отдельный контейнер и три пустых блока внутри него.
Вот такая прелесть получается в итоге :з .
Для завершения шапки нам нужно еще немного поколдовать над header.
Свойство #justify-content задает выравнивание элементов вдоль главной оси. Применяется к родительскому элементу для flex блоков. Рассмотрим основные значения для данного свойства.
С остальным контентом в блоке все проще, прописываем заголовок (h1), на странице он должен быть один и должен максимально отображать тематику сайта.
Поэтому, выбирая между "Hello" и "We are creative agency", по-моему, выбор очевиден;)
Начало положено✧
Вторая секция. По "составу" выглядит примерно так:
В html так:
В качестве иконки под заголовком буду использовать тот же крестик, который мы использовали в логотипе. Но перед этим, как вы уже поняли, необходимо поменять его цвет на голубой (а именно 3498db). Копируем, врываемся в фотошоп, в поиске цвета вводим код и делаем заливку.
...или просто оставлю ссылку тут https://ia.wampi.ru/2022/03/04/logo2.png
Чтоб нам не мешали габариты файла - применяем стили к нему и двигаемся дальше.
Заметьте, что для заголовков h1 и h2 не задан отдельный класс. В случае с h1 причиной является то, что данный заголовок, повторюсь, должен быть на странице один, а значит и надобности в особенном селекторе нет. Для h2 иная ситуация - элемент встречается почти в каждой секции, а прописывать одни и те же стили не всегда удобно и правильно.
Итог✧
Третья секция. С кружочками, которые вы, надеюсь, не сохранили:)
И как вы уже догадались - располагаем получившиеся элементы с кружками и текстом с помощью уже знакомого значения space-between; у родительского элемента, которому не забываем перед этим прописать свойство display: flex;
Готово ✧
Четвертая секция
Задача - создать некую карусель изображений, учитывая такое мааленькое "но" - только html и css. Из чего у меня получилось следующее.
И да, для наглядности вместо предоставленной картинки я взяла три блока с рандомным "окрасом", на их место можно при желании вставить любые изображения. Данные три блока помещаю в один общий.
Выглядит в html все совсем просто. Для каждого блока нужен свой класс(об остальных атрибутах чуть позже, сначала позиционируем)
Блоку в середине указываю z-index больший по значению, чем у остальных двух. Разместить блок с position: absolute и наличием родительского элемента мы можем так же с помощью свойств top, left, right, bottom. Но располагаться элементы будут относительно блока, в котором находятся. В отличие от блока, расположенного нами ранее относительно страницы.
На данном этапе имеем вот что:
Для "пролистывания" картинок и просмотра каждой по отдельности обращаемся к тегу <input>. Он предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Обратите внимание, что для радиокнопок(type="radio") необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
В том же блоке с изображениями мы добавляем следующее:
В css все выглядит следующим образом:
Не буду здесь акцентировать внимание на заголовке и тексте, отмечу только то, что для h2 необходимо указать белый цвет через путь
.recent_projects h2 {
color: white;
}
Четвертая секция в разобранном виде
Заметьте, что для иконки "крестик" взят класс, используемый в ином блоке. В том блоке для данного элемента уже прописаны размеры и отступы.
Аналогично с h2 и тегом button. В стилях я не касаюсь их совсем, что сокращает время работы и объем кода;)
Итог✧
Финишная прямая (нет).
Тут все довольно лаконично.
В css
Вот так✧
Предпоследняя секция
Жуть, да? Давайте разбираться. Данные элементы у нас уже встречались выше, поэтому мы копируем их в данный блок, но здесь добавлены нижние иконки и верхний небольшой заголовок. В html все вышло вот таким образом
Ниже мы так же размещаем еще два блока <div class="about_icon">, с разными лишь заголовками и текстом.
Итог ниже✧
Вот теперь точно финишная :з И нам осталось немного поволшебничать с подвалом сайта
Css:
И на этом всё✧ Спасибо всем за внимание, встретимся еще :з
