Портфолио мопса «Валли»

Код шапки сайта в файле style.css:

body font-family: ‘Lato’, Verdana;
font-size: 100%;
background: #fff;
>
.wrap
margin: 0 auto;
width: 70%; /* отступы относительно окна браузера */
>
.header padding: 1.3em 0em; /* поля вокруг текста */
>
.logo float: left; /* обтекание логотипа */
>
.logo a display: block; /* переопределение в блочный */
>
.nav float: right; /* обтекание логотипа */
margin-top: 0.82em;
>
.nav > ul > li display:inline-block; /* переопределение в строчно-блочный */
>
.nav > ul > li.active a background: #d0a5a5;
color: #ffffff;
>
.nav > ul > li > a display: block;
font-family: ‘Lato’, sans-serif;
font-size: 1.1em;
text-transform: uppercase;
padding: 0.5em 1em;
color: #444;
-webkit-transition: 0.9s; /* плавный переход */
-moz-transition: 0.9s;
-o-transition: 0.9s;
transition: 0.9s;
>
.nav > ul > li > a:hover color: #fff;
background: #d0a5a5;
>

Код HTML разметки шапки сайта:

rel=’stylesheet’ type=’text/css’>

В процессе верстки сайта с нуля мы получаем готовую шапку сайта.

Результат работы можно посмотреть на jsfiddle

Создано 12.10.2017 12:50:40

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 2 ):

Почему просто скопировав полностью код и сохранив как index.html и style.css у меня и близко не похоже на урок. Либо верстка далеко не с нуля либо хз. P.s text-decoration:none — добавил. Но вот с отступами что то не так.

Здравствуйте, где взять PSD макет к данному уроку?

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Как сверстать макет. Пошаговый план

Вы открыли макет в Фигме и редактор кода. Сейчас расскажем, что нужно делать дальше, чтобы не впасть в прокрастинацию и всё сверстать.

Осмотрите макет

Зачем. Чтобы потом не отвлекаться от вёрстки.

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

Отметьте крупные смысловые блоки и разделы. Посмотрите на страницу и выделите крупные смысловые блоки. Базовая структура любого макета состоит из трех основных тегов:

• — шапка сайта, одинаковая на всех страницах.
• — уникальный контент;
• — подвал, одинаковый на всех страницах.

Теперь ищем смысловые разделы внутри этих блоков. Поможет схема:

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

1. Заголовок всего документа и заголовки смысловых разделов. Теги: — .
2. Мелкие элементы в смысловых разделах. Это списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
3. Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

Когда вы закончите работу, у вас в заметках будет готовая схема вёрстки и уже ничего не будет отвлекать вас от кода.

Настройте редактор кода и проект

Установите редактор Visual Studio Code (или любой другой), если ещё этого не сделали, и плагин editorconfig. Он помогает разным разработчикам писать код в проекте в одном стиле.

Структура проекта. Создайте папку и положите туда файл index.html, папку css с файлами style.css и normalize.css, а также папки для картинок и шрифтов. Получится так:

Разметка

Рабочую среду подготовили, приступаем к разметке.

1. Создаём разметку страницы в файле index.html. Изображения пока не подключаем — этим займемся на этапе работы с графикой;
2. Далее, в файле при помощи нужных тегов: прописываете весь текст, расставляете все ссылки и кнопки. Нужен только HTML-код, стили пока делать не нужно.
3. Теперь определим ! DOCTYPE, укажем язык содержимого, кодировку и заголовок страницы во вкладке браузера.

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

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

Выделяем заголовок всего документа и заголовки смысловых разделов. Заголовок — это обманчиво простой тег. Главная проблема с заголовками такая: не всегда то, что кажется заголовком, им является.

Например, текст про дизайн-студию из Краснодара прикидывается заголовком, но на самом деле это не он:

Это само содержание, а не его резюме. Хорошим заголовком для этого блока был бы текст «О нас» или «О студии».

Определить, какие теги использовать, можно методом исключения:

• Получилось найти самый подходящий смысловой тег — использовать его.
• Для потоковых контейнеров — .
• Для мелких фразовых элементов (слово или фраза) — .

Разметка в редакторе кода выглядит так:

А так проект выглядит в браузере:

Базовая стилизация

Начинается самое интересное — работа с внешним видом. Прописываем в style.css базовые стили. Для крупных блоков пока ничего не делаем.

Этапы базовой стилизации

• Добавление классов в разметку;
• Подключение нестандартных шрифтов (локально или из сервиса);
• Подключение normalize.css (по желанию);
• Указываем параметры шрифта — название, размер, цвет, жирность;
• Указываем высоту строки;
• Описание фоновых параметров (фоновый цвет);
• Описание состояний интерактивных элементов, которые описаны в стайлгайде. На этом этапе задавайте только текстовые параметры и параметры фона;
• Все цвета вынесены в кастомные свойства в селектор :root.

Пример проекта с базовой стилизацией:

Работа с графикой

Экспортируйте всю графику из макета в Figma и подключите её в разметке.

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

В папке вашего проекта подготовьте графику: подготовленные изображения разместите в подпапке img в папке проекта, чтобы у вас получилась примерно такая структура проекта:

project | – css | – fonts | – img | [ваши картинки] | favicon.ico | index.html | catalog.html 

Подключите контентные изображения в разметке. Фоновые и декоративные изображения пока подключать не нужно.

При подключении изображений используйте относительные адреса, обязательно укажите размер картинки без пикселей, а также alt. Например, так:

Подключите к проекту фавиконки. favicon.ico размером 32×32 положите в корень проекта и подключите в , остальные версии фавиконок делать не обязательно.

Пример проекта в котором подключена графика:

Построение сетки

Построение сеток производится в общем стилевом файле style.css.

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

Расположите элементы страницы по сетке в соответствии с макетом. Для удобства используйте один из следующих способов визуального выделения элементов:

1. C помощью свойства background-color c разными цветами для разных блоков;
2. С помощью свойства outline (для удобства также можно использовать разные цвета).
3. Свойство border лучше не использовать, так как оно влияет на ширину блока и может что-нибудь сломать.

Пример проекта, где уже добавлены сетки:

Добавление декоративных элементов

На этом этапе добавляем мелкие сетки — например, для карточек товара. Подключаем кастомные шрифты и фоновые изображения. В конце оформляем остальные декоративные элементы, которые ещё не стилизовали раньше.

Пример готового проекта, где добавлены декоративные элементы:

Всё почти готово, осталась пара шагов.

Адаптивные сетки и декоративные элементы

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

Адаптивная графика

Ура! Мы и дошли до последнего пункта работы над проектом. Что нам осталось сделать?

1. Подключаем в разметке и стилях адаптивные изображения для разных девайсов и экранов с разной плотностью пикселей;
2. В HTML используем элемент picture , с помощью которого подключаем картинки для разных разрешений экрана, для экранов с разной плотностью пикселей, а также webp-варианты картинок для поддерживающих браузеров;
3. В CSS подключаем картинки для экранов с двухкратной плотностью пикселей и для разных разрешений с помощью медиа-выражений.

Пример готового проекта, где настроена адаптивная графика:

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

Следующие шаги:

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник