Создание шапки для страницы

Примечания к статье:

  1. <nav>, <body>, <h1> — HTML теги. Отвечают за разметку элементов.
  2. <font-size>, <background>, <color> — CSS свойства. Отвечают за стилизацию элементов
  3. #h1 и .menu-list — идентификатор и класс для элемента. Используется в качестве селектора.

Здравствуйте, в этой статье мы продолжим рассказывать о создании лендинга. Как вы помните, мы создали простую HTML-разметку, которую будем видоизменять.

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

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

  1. Расположение, позиционирование и определение размеров шапки.
  2. Создание фона, рамок и общая стилизация блока.
  3. Разметка — выбор основных панелей для меню и их расположение.
  4. Создание логотипа. В этой статье мы создадим логотип из текста. Отличная возможность попрактиковаться в создании красивых шрифтов.
  5. Создание анимации для кнопок навигационной панели.

Итак, мы создали план работы, теперь приступаем к его выполнению

Позиционирование элементов.

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

У нас есть тег <header> и блок <nav>. Первый отвечает за разметку шапки, а второй будет вмещать в себя навигационную панель.

Задайте ссылки на селекторы. Для тега <header> необходимо задать идентификатор <header>, для этого используйте свойство id. Для тега nav создайте класс menu, с помощью тега <class>.

Идентификатор не является обязательным, но это является правилом хорошего тона в разработке.

Открываем CSS документ(он должен быть подключен). Затем записываем несколько селекторов:

  1. — #header: основной селектор, который будет отвечать за стилизацию шрифтов;
  2. — .menu: отвечает за стилизацию верхнего меню;
  3. — <body>: отвечает за стилизацию общего блока страницы.

Далее нам понадобятся и другие селекторы, но пока что остановимся на этом.

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

Свойства для тега <body>:

  1. <Margin> — расположение блока по центру.
  2. <Width> — ширина общего контейнера, 80% от всей ширины страницы.

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

  1. Position: fixed — теперь шапка будет оставаться вверху всегда, даже при прокрутке страницы.
  2. <Height> — высота будет равняться 12% от высоты экрана.

После этого необходимо задать ширину и позиционирование для меню.

Используемые свойства:

  1. <Width>: — ширина блока меню.
  2. {Position: absolute} — абсолютное позиционирование. Используется для свободного перемещения элементов.
  3. <Height> — высота.

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

Дизайн шапки

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

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

Далее задаем свойства рамок. В нашем примере мы создадим рамку с 3 границами — нижней, левой и правой. Верхняя граница нам не понадобится, так как она плохо отразится на качестве дизайна.

Используемые свойства:

  1. <Background> — создание фона.
  2. <Border-bottom>, <border-left>, <border-right> — создание трехсторонней рамки.

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

Создание шапки сайта

Разметка меню и логотипа

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

Используемые селекторы:

  1. — #h1 — идентификатор логотипа, задается для тега <h1>.
  2. — .menu-list — класс ссылки из меню. Задается для тега <li>.

Для начала разместите логотип, он не должен находиться в блоке "nav", так как не является частью навигационной панели.

Далее расположим меню. Для этого создадим список из 3-х мини-блоков. В них будут содержаться ссылки на такие ссылки: "Главная, О нас, Контакты".

Содержимое каждого тега "li" должно быть обернуто в тег ссылки(a). Для атрибута "href" достаточно указать значение "#".

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

Все что нам понадобится — изменение размеров шрифта, семейства, стиля и жирности. Кроме этого нам понадобятся свойства изменения текста.

body{

width: 80%;

margin: 0 auto;

font-family: «Tahoma», serif;

}

#header{

position: fixed;

height: 12vh;

background: #272727;

width: 80%;

border-bottom: 3px solid #808080;

border-left: 3px solid #808080;

border-right: 3px solid #808080;

}

.menu{

position: absolute;

width: 50%;

height: 8vh;

top: 10px;

right: 100px;

outline: none;

}

Используемые свойства:

  1. <Font-size> — размер шрифта.
  2. <Font-weight> — жирность шрифта.
  3. <Font-family> — семейство шрифта.
  4. <Font-style> — стиль шрифта.
  5. <Letter-spacing> — расстояние между буквами.
  6. <Margin> — отступы.
  7. <Line-height> — высота строки.

После этого нам нужно расположить блоки меню:

  1. <Top>, <bottom>, <left>, <right> — размещение меню.
  2. <Margin> — внешние отступы.

Задаем позиционирование для элементов меню:

  1. <Position> — позиционирование.
  2. <Margin> — внешние отступы.
  3. <Text-decoration> — декорации для текста.
  4. <Padding> — внутренние отступы.

Создание анимации для кнопок

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

Используемые селекторы:

  1. — .menu-href — класс для ссылки. Задается для тега <a>.
  2. — .menu-href:hover — псевдокласс для ссылки. Активируется при наведении.

Зададим стандартную стилизацию для блоков меню. Нам всего лишь необходимо изменить стилизацию шрифта — его семейство и размер, цвет шрифта и основу для анимации.

Семейство шрифтов задается в селекторе тега <body>. Размер шрифтов будем изменять с помощью системы шрифтов. Размер текста кнопок будет равен 15px, а значит создаем селектор f15px, который необходимо прописать для каждой из ссылок.

Остальные свойства указываются в селекторе ссылки.

Используемые свойства:

  1. <Font-size>.
  2. <Font-Family>.
  3. <Color> — задает цвет текста.
  4. <Transition> — задает время и стиль анимации изменения элемента.

Далее необходимо изменить стилизацию ссылок при наведении. Для этого запишем селектор .menu-href:hover.

В нем мы зададим изменение фона и цвета текста.

Используемые свойства:

  1. <Background>.
  2. <Color>.

В итоге, ваш CSS код должен выглядеть вот так:

Создание шапки сайта

Заключение

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

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

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



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *