Шапка сайта css: Адаптивная шапка сайта

Как изменить шапку сайта (часть 1)

На фриланс-биржах, заказчики часто просят, изменить дизайн какого-нибудь фрагмента сайта, например шапки. Самый простой способ изменить шапку сайта, так это создать её с нуля. Почему я так считаю? Пожалуйста, будут и аргументы.

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

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

Специально для этой статьи, я сделал скриншот одной чудесной шапки, случайно найденной в интернете, у какого-то сайта и буду её улучшать, подробно описывая весь процесс.

Так выглядела шапка до изменений:

У данного творения просматривается явная нехватка места для всех элементов. От такого плотного соседства элементов и отсутствия пустого пространства, глаза собираются в кучу. Надо разрядить пространство, за счёт создания нового ряда для контактной информации.

Что бы я изменил в дизайне?

1. Шрифт и цвет у логотипа
2. Размер и цвет остального шрифта
3. Убрать зеленую полосу
4. Блок с контактами разместить на верхней панели

После изменений:

Между тегами head в HTML файле:

//прописываем мета тег для адаптивности
<meta name="viewport" content="width=device-width, initial-scale=1">
//подключаем другие шрифты
<link href="https://fonts.googleapis.com/css?family=Forum|Roboto+Slab:400,700" rel="stylesheet">

//подключаем библиотеку Font Awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
//подключаем внешний файл стилей, сюда будем писать стили
<link rel="stylesheet" href="style. css">
//скачиваем и подключаем файл нормализации стилей
<link rel="stylesheet" href="normalize.css">

Делать верстку мы будем на flexbox.

Первый ряд – панель с контактами (top header).

HTML разметка

В блок-контейнер с классом top-header, поместим три флекс-элемента – абзацы с текстом.

<div>
  <p>Массажный салон для вашего здоровья и красоты</p>
  <p><span>Tel.</span> (+372) 5514704, 58079045</p>
  <p><span>Инфо и запись:</span> ежедневно с 9:00 до 21:00</p>
</div>

CSS стили

/* Общие стили для шапки */
body {
  font-family: 'Forum', cursive;
  color: #777;
  background-color: #fff;
}

Инфоблоки встанут в ряд благодаря display: flex. Свойство space-around равномерно распределяет пустое пространство между инфоблоками. Однопиксельная серая рамка, визуально разграничит верхнюю панель от самой шапки.

/* Флекс контейнер для верхних инфо-блоков */
.top-header {
  display: flex;
  justify-content: space-around;
  padding: 5px;
  font-size: 100%;
  border-bottom: 1px solid #efd0d0;
  position: relative;
}

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

/* Зеленый цвет у текста инфо-блоков */
.top-header .green {
  color: #b2db41;
  font-weight: bold;
}

Временно подсветим красной и черной рамками, чтобы было ясно, где флекс-контейнер, а где флекс-элементы.

Второй ряд – шапка (header)

Слева направо, первым идет логотип, а затем навигационное меню.

HTML код

Начинается с открывающего тега header, внутри которого блок с логотипом. Логотип вставляется, как ссылка, ведущая на главную страницу.

<header>
  <div>
    <a href="#">Massaaži<span>Maailm</span></a>
  </div> ...

CSS код

/* Флекс контейнер для шапки */
header {
  display: flex;
  justify-content: space-around;
  padding: 5px;
  border-bottom: 5px solid #b2db41;
}

/* Стили для всех ссылок внутри флекс контейнера */
header a {
  display: block;
  color: #212121;
  padding: 12px;
  text-decoration: none; /* убирает подчеркивание */
  font-size: 100%;
  text-shadow: 0 1px 0 #fff;

  border-radius: 4px;
}

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

/* Ширина дочернего блока под логотип */
.wrap-logo {
  width: 30%;
}

Задавая размеры шрифта в %, мы заботимся о супер больших экранах, ведь пиксели жестко задают размер.

/* Стилизация логотипа */
.wrap-logo #logo {
  font-family: 'Roboto Slab', serif;
  font-size: 200%;
  font-weight: bold;

}

Логотип смотрится свежее, если его сделать двухцветным.

/* Зеленый цвет у части логотипа */
.wrap-logo span {
  color: #b2db41;
}

Продолжение следует.

• Создано 08.04.2019 10:20:30
• Михаил Русаков

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

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

Если Вы не хотите пропустить новые материалы на сайте,

то Вы можете подписаться на обновления: Подписаться на обновления

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

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

Шапка сайта — Книга по MaxSite CMS

← Каталог модулей StoreШаблоны заголовков →

Шапка сайта один из самых важных элементов сайта и, когда вы будете делать свой сайт, то скорее всего вам потребуется создавать свой вариант. Default-шаблон предлагает два компонента шапки, которые являются неким «типовым» вариантом для многих сайтов.

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

Рассмотрим для примера компонент Header2.

Его следует выбрать во вкладке Компоненты. Во вкладке Дизайн выбрать menu2.css.

В Header2 всего одна настройка, которая представляет собой т.н. секционные опции. Они очень похожи на юниты главной, где каждая секция представляет собой пару «ключ = значение». В отличие от юнитов, где используются только секции [unit], в секционных опциях секции могут именоваться произвольно (так как задумал автор компонента).

В данном случае мы видим, что Header2 используются секции:

• site
• block
• social

Нетрудно догадаться, что каждая секция выводится в определенном месте компонента.

Если бы не секционные опции, то пришлось бы делать очень много «обычных» опций. Кроме того, секционные опции позволяют произвольно менять количество блоков для вывода. Например если нужно оставить только один блок телефона, то второй блок с email достаточно просто удалить. Точно также, если нужно добавить ещё один блок, то всё что нужно сделать, так это вставить ещё одну секцию. С обычными опциями такой вариант реализовать очень сложно.

Секция site управляет первым блоком шапки.

• name — здесь указывается название сайта
• name-class — это css-классы для названия
• description — блок описания
• icon — css-классы иконок
• effect — эффекты меню (0 или 1 — это фиксация меню)

В CSS-классах вы уже немного ориентируетесь.

• t-robotoslab — шрифт Roboto Slab
• t180 — размер шрифта в процентах от базового (16px)
• pad0-phone — установить padding: 0 для экранов телефонов (менее 667px)
• t-center-phone — сделать выравнивание по центру для телефонов
• hover-t-cyan700 — цвет текста cyan700 при наведении курсором (hover)

В качестве иконок в Default шаблоне используется иконочный шрифт FontAwesome 5. В этой библиотеке для того, чтобы задать иконку используется два css-класса — первый это шрифт, а второй — символ. Например fab указывает на шрифт brand, fas — solid, far — regular.

Классы иконок имеют единый префикс «fa-», после чего идет код иконки. Например fa-google-wallet указывает на иконку «google-wallet».

В галерее FontAwesome 5 вы можете подобрать иконку для своего сайта. Выбор там достаточно большой — более 1500 иконок.

Секции block содержат данные для средних блоков шапки. Они выводятся последовательно так, как указаны в опциях.

• name — заголовок блока
• icon — классы иконки
• href — адрес ссылки (можно использовать код [ siteurl], который заменится на адрес сайта)
• link — название/текст ссылки

Секции social выводятся просто как иконки.

• class — классы иконки
• href — адрес ссылки
• title — всплывающая подсказка

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

Когда возможностей компонента недостаточно, то лучшим вариантом будет создание своего компонента, где будут учтены все ваши пожелания. Технически компоненты — это обычный html-код. Если компонент делается «под себя», то можно не создавать для него опции, а сразу прописать все тексты, иконки, ссылки и т.п. в файле. При необходимости его можно поправить прямо в админ-панели. Если же использовать опции, то это потребует создания более сложного php-кода компонента, что делает такие операции недоступными для новичков.

Но в любом случае, следует понимать, что создание компонента потребует хотя бы минимального знания HTML и умения ориентироваться в классах Berry CSS.

Так же вам следует знать, что Default шаблон содержит ещё один css-фреймворк Bootstap 4, который состоит из множества готовых элементов. Для их использования во многих случаях будет достаточно просто скопировать предлагаемый код в файл компонента.

Универсальные компоненты «Any» и «File»

Если вам нужно сделать какой-то несложный компонент, то можно воспользоваться Any1 (и Any2). Например если вам нужно разместить в шапке рекламный баннер, то не обязательно создавать отдельный компонент. Достаточно разместить код в опции Any1.

Компонент File1 (и File2) похожи на Any1, только код размещается в отдельном php-файле и просто указывается его имя. File1 часто используется вебмастерами при создании шаблонов, особенно, если предполагается сразу несколько дизайн-блоков. Здесь вместо того, чтобы заниматься копированием в Any1, достаточно указать имя нужного файла.

Компонент LightSlider

Компонент слайдера больше демонстрационный, поскольку любой слайдер сам по себе должен иметь какое-то целевое назначение, а не быть простой «листалкой» картинок.

Настройки слайдера также выполняются через секционные опции. Секция options похожа на то, что мы рассмотрели выше, а вот секции js и slide устроены немного по другому.

В них нет пары «ключ = значение», а используется всё содержимое секции. В js это js-параметры слайдера (то на чём он написан), а в slide указывается полный html-код каждого слайда.

Кроме компонента шапки, LightSlider можно вывести как блоки юнитов. В комплект Default-шаблона входит unit-файл lightslider.php (как и last-pages.php

), который подключает необходимый код слайдера. После этого вторым юнитом указывается html-разметка слайдера.

- первый юнит — подключает LightSlider
- здесь же указываются его опции
[unit]
file = lightslider.php
element = .lightslider
js_file = components/lightslider/lightslider.js
loop = 1
pager = 1
auto = 1
rtl = 0
mode = slide
item = 1
speed = 400
pause = 2000
controls = 1
vertical = 0
verticalHeight = 400
adaptiveHeight = 0
slideMargin = 10
[/unit]
- второй юнит, который формирует html-код слайдера
[unit]
html = _START_
<ul>
  <li>
      <h4>First Slide</h4>
      <p>Lorem ipsum Cupidatat quis pariatur anim.  </p>
  </li>
  <li>
      <h4>Second Slide</h4>
      <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
</ul>
_END_
[/unit]

Опции слайдера вы можете посмотреть на официальном сайте (версия v1.1.5)

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

- первый юнит подключает js-код слайдера
[unit]
file = lightslider-js.php
[/unit]
- второй — выводит сам компонент
[unit]
component = lightslider
[/unit]

Ключ

component указывает на каталог компонента. В данном примере будет выведен LightSlider. Здесь используется два юнита из-за особенностей строения самого слайдера, в других компонентах достаточно будет одного юнита с ключом «component».

← Каталог модулей StoreШаблоны заголовков →

Верхний и нижний колонтитулы веб-страницы с использованием CSS

Книги / Введение в HTML, CSS и JavaScript / Глава 13

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

Для начала необходимо определить формат заголовка. Типичный заголовок представляет такую ​​информацию, как название, связанное с программой, или объект, другие элементы заголовка (например, организация), логотип и Информация об авторе. Так же в шапке есть меню опций для system, который на данный момент будет содержать записи Home, File и About. Заголовок, который мы создадим для этой страницы, выглядит следующим образом.

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

и