Как изменить размер шапки

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML разметка

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

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, внутри которого блок с логотипом. Логотип вставляется, как ссылка, ведущая на главную страницу.

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.

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

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

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

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

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

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

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

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

Как изменить шапку сайта

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

Зачем нужен хедер?

Основной его функцией является индивидуализация ресурса на joomla или wordpress среди сотен других. Это знак, который позволит узнать посетителю вашу страницу.

Другие исполнители на Юду

Рейтинг: 4,9
Рейтинг: 4,9
Рейтинг: 4,9
Рейтинг: 4,9
Рейтинг: 4,8

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

Можно выяснить, какие требования существуют к шапке ресурса. Она должна:

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

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

Из чего может состоять шапка сайта на joomla или wordpress?

Хедер — это часть страницы, которая остается неизменной на каждом разделе. На нем размещают:

• название ресурса;
• логотип;
• девиз;
• блоки контекстной рекламы;
• баннеры;
• кнопки для управления и др.

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

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

Из-за этого поменять шапку сайта на joomla или же на wordpress необходимо только в том случае, если вы полностью уверены в том, что она оправдает ваши ожидания и сможет создать у пользователя положительное впечатление о ресурсе. Нередко случается, что при смене шапки на менее удачную сайты теряют значительное количество посетителей.

Каким образом самостоятельно поменять шапку ресурса, созданного на wordpress?

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

Как поменять шапку сайта на wordpress этим способом, можно увидеть на фото:

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

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

Как правило, изображение, которое отвечает за шапку сайта на wordpress, имеет название heder.jpg. Найти его можно в папке images. Она располагается по пути /domains/название вашего сайта.ru/wp-content/themes/название темы/images. Увидеть файл можно на фото:

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

Далее отредактированная картинка должна вернуться на прежнее место. Имя файла менять не нужно. После этого достаточно зайти на свой сайт и обновить его. Иногда изображение меняется не сразу, а по истечении определенного промежутка времени.

Как сменить хедер сайта на joomla?

Процесс смены происходит достаточно просто. Нужно нажать кнопку «изменить CSS», и вы попадете в редактор шаблона ресурса, созданного на joomla. Далее вам необходимо отметить директорию template.css, после чего требуется нажать кнопку «изменить». Подробнее можно увидеть на фото:

Далее следует выполнить поиск. Можно использовать комбинацию клавиш CTRL+F. Требуется найти изображение, которое соответствует шапке ресурса, как на фото:

Посмотрите на строку background:url. Там вы сможете обнаружить путь к изображению, которое отвечает за шапку сайта. Укажите вместо него путь, необходимый вам, и укажите расширение файла.

Остается только сохранить все изменения заголовка сайта на joomla.

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

Как подобрать размер?

Какой размер шапки указать в заказе?
Наш магазин не использует фиксированные размеры и европейские стандарты типа (X,L,M,XL), тем самым предоставляя покупателю возможность максимально точно подобрать необходимый размер головного убора самостоятельно.

Но как быть, если Вы не знаете свой размер?

Определить размер можно двумя способами:

С помощью мягкой сантиметровой ленты

С помощью обычной толстой нити

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

Определяем размер перчаток, варежек и рукавиц

Для того, что бы правильно подобрать размер перчаток, варежек или рукавиц необходимо:

Измерить ширину ладони как показано на рисунке, полученный результат в сантиметрах и будет вашим размером. Например, популярные размеры женских варежек от 6,5 до 7см.

Определяем размер детской обуви

Длина стопы в см.	Размер
10.5	17
11	18
11.5	19
12	19.5
12.5	20
10.5	17
11	18
11.5	19
12	19.5
12.5	20
13	21
13.5	22
14	22.5
14.5	23
15	24

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

Условные обозначения размеров сумок

При выборе сумок, в графе размеры указаны следующие обозначения, пример: Д-21 В-24 Р-48, что же это означает?

P — длина ручки;
В — высота (глубина) сумки;
Д — длина (ширина) сумки.

Кроме сумок, данные обозначения применяются к муфтам и рюкзакам.

Компания «Пильников» является производителем продукции, представленной в Интернет-магазине, поэтому если необходимого размера нет на складе, мы непременно его изготовим!

Важно: при заказе товара указывайте точный размер без корректировки, который вы получили в результате измерений с помощью советов описанных выше!

Как изменить шапку и подвал сайта?

Вы можете настроить отображение отдельных элементов шапки и подвала в настройках блока, для этого наведите курсор на шапку или подвал и нажмите шестеренку.

Выберите элементы, которые хотите отображать:

Вы можете включить или отключить шапку и подвал в разделе «Дизайн».

Попробуйте прямо сейчас!