Как сделать Header сайта правильно?
Обратившись к неопытному разработчику, он не сможет предложить ничего кроме стандартных шаблонов для сайтов. Однако времена, когда просто наличие страницы в интернете уже гарантировало поток клиентов, прошли. Сегодня ресурс должен выглядеть презентабельно и не отталкивать людей в первые секунды знакомства. А начинается взаимодействие с первого экрана, на котором обязательно будет шапка сайта или header.
Сегодня разберёмся и вникнем в суть вопроса, как сделать header для сайта по всем правилам, чтобы он был удачным звеном в навигационной цепочке, а не отталкивал людей от ресурса.
Для чего нужна шапка сайта?
Понимание ответа на этот вопрос позволит спроектировать грамотную шапку, которая понравится пользователям.
- Это первый элемент страницы, с которым знакомится посетитель. Она должна дать понимание, что человек не ошибся, кликнув по вашей ссылке. Поэтому в шапке обычно размещают перечень услуг или каталог товаров, демонстрирующих направление работы компании.
- Шапка может выступить нестандартной отстройкой от конкурентов, которая поможет посетителям проще ориентироваться на страницах, узнать важную информацию об условиях работы и т.д.
- Элемент позволяет за несколько секунд понять базовую структуру сайта, насколько легко по ней передвигаться дальше.
- Слоган и логотип, которые часто размещаются в Header’е, создают определённую лояльность к бренду, а также узнаваемость торгового знака.
Что размещается в шапке сайта?
Header важно сделать информативным, но не перенасыщенным. Иначе глаза у посетителей будут разбегаться в разные стороны, сконцентрировать внимание будет сложно – и пользователи будут просто уходить с сайта. Традиционные элементы для шапки:
- Логотип. Размещается в левом верхнем углу. На него также устанавливается кнопка возврата на главную страницу.
- Описание компании. Несколько слов, которые характеризуют сайт. Обычно фраза располагается чуть правее логотипа.
- Регион работы. Человек должен сразу понимать, сможет ли решить свой вопрос на конкретном ресурсе.
- Контакты. Они включают не только номера телефонов, но также адрес электронной почты, физический адрес и время работы.
- Форма поиска. Она важна для крупных магазинов, чтобы упростить для человека поиск конкретного товара.
- Личный кабинет. Есть не на всех сайтах и даже не во всех интернет-магазинах, а только в крупных компаниях, для которых важно дать клиенту персональную страницу.
- Корзина. Обязательный атрибут для интернет-магазина, поскольку сюда «падают» товары.
Меню хедера
Решив создать шапку сайта или переделать существующую, продумайте, какой она будет. Главное требование к элементу – понятность для потенциального клиента и лёгкое восприятие. В хедере сайта обычно располагается горизонтальное меню со следующими блоками:
- Каталог. Он есть и на товарных ресурсах, и на сайтах с услугами.
- Акции. Кнопка, привлекающее к себе внимание, поскольку сулит получение скидки.
- Портфолио / отзывы. Быстрая возможность посмотреть на результаты предыдущих работ или мнение клиентов о компании.
- Оплата / доставка. Способы оплаты заказов и товаров, а также возможности доставки или самовывоза.
- Блог / новости. Обычно, этот раздел используется для размещения SEO-статей.
- Контакты. Традиционная страница, на которой собраны все возможные способы связи с менеджерами или руководством компании.
- О компании. Страница носит номинальный характер, влияя на повышение лояльности к организации.
Он есть и на товарных ресурсах, и на сайтах с услугами.Что не нужно размещать в header сайта?
Начиная отвечать для себя на вопрос «Как сделать шапку для сайта?», важно не перенасытить её информацией. Делимся советами, что не нужно размещать в элементе.
- Политику конфиденциальности. Эта страница нужна для «галочки». Потенциальному клиенту показывать её сразу же не стоит.
- Вакансии. Если вы – не кадровое агентство, такой пункт из меню также лучше вынести с главных экранов всех страниц сайта.
- Карту сайта. Это технический раздел, которые «светить» перед посетителями не стоит.
Рекомендации по оформлению шапки сайта
Единых правил оформления Header’а нет. Возможно, проявив креатив, вам удастся сделать идеальную шапку, которой будут восхищаться клиенты, а веб-компании будут ставить её в пример при разработке проектов. Однако есть несколько базовых рекомендаций, которые сегодня актуальны:
- Располагайте в меню 5-7 ссылок. Большее количество кнопок будет помещаться в несколько рядов или шрифт придётся использовать слишком мелкий. А меньшее количество элементов создаст ощущение пустоты. Как будто компании не о чем рассказать.
- Делать кнопку «Ещё», нажав на которую откроются дополнительные ссылки не рекомендуется. Лучше продумать структуру меню таким образом, чтобы всё необходимое уместилось в 2-3 уровня вложенности.
- Выделения разделов цветами не рекомендованы, поскольку часто вызывают не фокусировку внимания, а дезориентацию.
Следуйте этим простым советам, которые вы получили из статьи, или обращайтесь в агентство комплексных решений «CHROME», где разработку шапки сайта проведут профессионалы!
Как зафиксировать позицию шапки и сайдбара сайта
Иногда бывает необходимо сделать шапку или сайдбар (а может быть и то и другое) на сайте фиксированными. То есть сколько бы Ваш посетитель не «скролил», контент будет двигаться, а фиксированный элемент всегда будет оставаться на той же самой позиции. На самом деле ничего сложного в этом нет, и сегодня я на примере покажу Вам как фиксировать позиции элементов.
Перед началом нашего урока хочется сказать, что таким образом Вы можете фиксировать не только шапку или сайдбар. Вы также можете сделать фиксированную позицию для футера или, возможно, Вы захотите сделать какую-то кнопку где-то сбоку, которая всегда будет на виду.
В общем, все зависит от того, зачем Вам это нужно.
В данном же уроке я буду показывать фиксацию шапки и сайдбара (хотя на месте сайдбара мог бы оказаться и какой-то баннер или форма подписки, например).
Ну что же, давайте начнем!
1. Первое, что потребуется сделать – это создать html-файл нашей страницы. Здесь я создам очень простую структуру страницы. У нее будет шапка с тремя заголовками, помещенная в тег header; сайдбар со ссылками и надписью, помещенный в тег aside; сами ссылки навигации будут расположены в теге nav; контент страницы в теге article и футер в теге footer.
Как видите, я в примере использую html5-теги. Это не принципиально, и если Вы по какой-то причине не хотите их использовать, то можете спокойно использовать теги div, при этом присваивая им соответствующие идентификаторы. Это никоем образом не повлияет на фиксацию элементов, просто мне в данном случае удобнее использовать именно html5.
Если будете использовать теги div с идентификаторами, то тогда не забудьте сделать соответствующие изменения в файле таблицы стилей (когда мы до нее дойдем).
Например, если Вы используете вместо тега header, тег div id=”header”, то и в таблице стилей Вы будете прописывать свойства для #header{…стили…}, а не для header{…стили…}.
В качестве контента я сгенерировала специально побольше абзацев на Lorem Ipsum (ресурс для генерации текста) , чтобы у нас впоследствии была возможность поскролить и проверить фиксацию наших элементов.
Итак, вот содержимое html-файла с комментариями:
<!doctype html> <html> <head> <meta charset="windows-1251"> <title>Фиксируем элементы на странице</title> <link rel="stylesheet" href="fix.css"> </head> <body> <header><!--Это шапка сайта--> <h2>Сайт с фиксированным Хедером</h2> <h3>Эта шапка всегда останется здесь...</h3> <h4><i>Сколько бы Вы не скролили!</i></h4> </header> <aside><!--Этот блок для сайдбара--> <h3>Сайдбар нашего сайта</h3> <nav><!--Блок для навигации--> <ul> <li><a href="#">Ссылка первая</a></li> <li><a href="#">Ссылка вторая</a></li> <li><a href="#">Ссылка третья</a></li> <li><a href="#">Ссылка четвертая</a></li> <li><a href="#">Ссылка пятая</a></li> </ul> </nav> <p>Внимание! Этот сайдбар тоже останется на месте... ведь мы его зафиксировали</p> </aside> <article><!--А в этом блоке расположен контент--> <h2>Здесь я специально помещу побольше контента, чтобы Вы могли поскролить!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at sem nec nisl ultricies dignissim quis a velit. Morbi volutpat, dolor nec scelerisque eleifend, ligula leo adipiscing ligula, id euismod nisi turpis in diam. Nam purus diam, sagittis volutpat vehicula ac, adipiscing ac urna. Aliquam rutrum dignissim accumsan. Donec pulvinar sem vitae dolor sodales lobortis eget in metus. Suspendisse ac augue at mi lacinia commodo eget interdum diam. Praesent felis erat, mollis nec est quis, malesuada congue felis. Etiam condimentum tincidunt tortor, at ullamcorper enim cursus sed. Quisque vehicula eros sit amet leo feugiat, in rutrum diam vulputate. Praesent sit amet metus sodales, aliquam libero eget, sagittis ante. In hac habitasse platea dictumst. Suspendisse ullamcorper venenatis est non pulvinar. Pellentesque nec placerat elit. Maecenas sit amet mi enim. In ut velit nec leo sagittis vehicula nec a mi. Suspendisse ut vehicula arcu, vitae dictum magna. Maecenas odio ante, luctus nec hendrerit et, pellentesque a mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc id condimentum eros. Nulla lobortis congue libero, eget tincidunt dolor venenatis in. Nunc ut auctor orci.</p> </article> <!--Блок футера--> <footer><p>Футер я не фиксировала, но я думаю Вы уже поняли, как это можно сделать!</p></footer> </body> </html>
2. Вы, наверное, обратили внимание, что файл таблицы стилей уже подключен, осталось его только создать.
Итак, создаем css-файл с именем «fix.css» (можете дать и другое имя, но тогда не забудьте его поменять в атрибуте href тега link, который подключает файл таблицы стилей) и сохраняем в том же каталоге, что и наш html-файл.
Откроем css-файл, пока что он пусть и наша страница в браузере выглядит вот так.
Давайте займемся стилями и расставим все по своим местам.
Для начала я пропишу правило, чтобы все мои html5-элементы отображались как блочные (это решение для старых браузеров, которые не поддерживают данные элементы. Если бы не используете html5-теги, то можете не писать эту строчку). Также задам правило для тега body: мы зададим ему ширину, выравнивание по центру, рамку и цвет фона.
article,aside,footer,header,nav{display:block;}
body{width:980px; margin:0 auto; border:1px solid #333; background:#ffdfbf;}
Теперь страница должна выглядеть вот так.
Страницу мы оцентровали, теперь давайте перейдем к стилям самой шапки.
Для того чтобы сделать нашу шапку фиксированной нам нужно задать для нее высоту, ширину и прописать position:fixed. Ширина нам в данном случае нужна такая же, как и ширина для тега body, то есть 980px, а высоту я взяла равную значению 300px.
Теперь поговорим о свойстве position. Когда для position задано значение fixed, то элемент фиксируется на определенном месте страницы. Также при значении
Также я придам нашей шапке цвет, рамку и выровняю текст, находящийся в ней по центру.
И также на этом этапе давайте придадим стили для заголовков на нашей странице и для тегов абзаца. Здесь ничего особенного – просто пропишем стиль шрифта, цвет и некоторые отступы.
Добавьте этот код в Ваш css-файл:
header{height:300px; width:980px; border-bottom:1px solid #333;
background:#ECB035; text-align:center; position:fixed;}
header h2,header h3, header h4, article p, footer p, aside p{
font-family:Arial, Helvetica, sans-serif; color:#336;}
header h2{margin-top:0px; padding-top:50px;}
Если мы посмотрим на нашу страницу сейчас, то увидим следующее.
3. Шапка зафиксировалась. Вы можете промотать страницу вниз и убедиться в том, что она не движется.
Но, как Вы уже, наверное, заметили, часть нашего контента переместилась под шапку – так и должно быть, это особенность такого позиционирования. Скоро мы все расставим на свои места.
А пока давайте займемся стилями нашего сайдбара, который мы тоже собрались зафиксировать.
Нам нужно также определить для сайдбара ширину, задать ему фиксированное позиционирование, а также здесь мы воспользуемся свойством top, так как нам необходимо подкорректировать позицию блока сайдбара и сместить его под шапку (иначе он так и останется за шапкой). Я взяла для top значение 330px (300px – это высота нашей шапки и + еще 30 пикселей, чтобы шапка и сайдбар не были прилеплены друг к другу).
Это основное для позиционирования. Остальные стили придают цвет, рамку, отступы для текста, размер текста и т.д.
Добавьте вот этот код в Ваш файл таблицы стилей.
aside{position:fixed; width:200px; background:#99C; top:330px; border:1px dashed #333;}
aside h3{font-family:Arial, Helvetica, sans-serif; font-size:16px; padding:10px;}
aside p{padding-left:30px; font-size:14px; padding-right:10px;}
aside li{list-style-type:none; font-family:Arial, Helvetica, sans-serif;}
aside a{text-decoration:none; color:#FFF;}
И вот, что у нас получится.
4. Вы можете видеть, что элементы зафиксировались, однако, текст нашего контента спокойно располагается под ними, как будто их и вовсе нет.
Это очень просто исправить, ведь мы знаем высоту нашей шапки и ширину сайдбара, а также ширину страницы. Ширина страницы равна 980px, а ширина сайдбара 200. Следовательно, мы можем задать для блока с контентом ширину равную 700px и сделать отступ от левого края 230 px (30 px чтобы блок с контентом не «прилипал» к сайдбару). А зная, что высота шапки равна 300px, мы можем задать и отступ сверху в 300px (здесь мы не берем больше, потому что заголовок в начале статьи уже автоматически имеет отступ сверху).
А также зададим простые стили для футера (только для того, чтобы определить его внешний вид).
Добавьте последний фрагмент кода в свой файл таблицы стилей и посмотрите результат.
article{width:700px; padding-top:300px; padding-left:230px;}
footer{text-align:center; width:980px; height:30px; background:#ECB035; margin-top:30px;}
Теперь можно скролить и скролить, а Ваша шапка и сайдбар всегда будут перед глазами.
На этом буду заканчивать. Исходники файлов Вы, как всегда, можете найти в Исходниках к уроку, а посмотреть эту страницу в браузере, можете нажав на кнопку «Демо» в начале урока.
Надеюсь урок был Вам полезен! Жду Ваших отзывов! Делитесь уроком с друзьями при помощи кнопок социальных сетей (буду очень признательна).
А также подписывайтесь на обновление блога, если Вы на него еще не подписаны. Дальше будет еще интереснее.
Успехов Вам, друзья, Хорошего Весеннего настроения и Удачных проектов!
С Вами была Анна Котельникова.
До встречи!
Как сделать нижний колонтитул в HTML
следующий → ← предыдущая В HTML мы можем легко создать нижний колонтитул в документе, который должен отображаться на веб-странице, используя следующие два разных метода:
Использование HTML-тегаЕсли мы хотим сделать нижний колонтитул в HTML-документе с помощью тега Html, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко просмотреть нижний колонтитул на веб-странице в браузере: Шаг 1: Во-первых, мы должны ввести код HTML в любом текстовом редакторе или открыть существующий файл HTML в текстовом редакторе, в котором мы хотим использовать HTML для создания нижнего колонтитула. <Голова> <Название> Сделать нижний колонтитул с помощью HTML-тега <Тело> Здравствуйте, Пользователь!. Шаг 2: Теперь мы должны поместить курсор в начало того текста, который мы хотим вставить в нижний колонтитул. Затем введите тег <нижний колонтитул> Текст, который мы хотим вставить в нижний колонтитул. Шаг 3: И после этого мы должны закрыть тег. <нижний колонтитул> Текст, который мы хотим вставить в нижний колонтитул. Шаг 4: И, наконец, мы должны сохранить HTML-файл, а затем запустить его в браузере. <Голова> <Название> Сделать нижний колонтитул с помощью HTML-тега <Тело> <заголовок> Учебник по HTML Вывод приведенного выше HTML-кода показан на следующем снимке экрана: Использование внутреннего CSSЕсли мы хотим сделать нижний колонтитул в HTML-документе с использованием таблицы внутренних каскадных стилей, нам нужно выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко сделать стильный футер: Шаг 1: Во-первых, мы должны ввести HTML-код в любом текстовом редакторе или открыть существующий HTML-файл в текстовом редакторе, в котором мы хотим использовать внутренний CSS для создания нижнего колонтитула. <Голова> <Название> Создайте нижний колонтитул, используя внутренний CSS и HTML <Тело> Здравствуйте, Пользователь!. Шаг 2: Теперь мы должны поместить курсор в тег заголовка сразу после закрытия тега заголовка в документе Html, а затем определить начальный и закрывающий тег тега |
… 
…