Шапка сайта или хедер (header). Не люблю я эти англицизмы. Поэтому будет шапка... И так, что такое шапка сайта и для чего она нужна. Не буду оригинальным, шапка сайта - это верхняя часть страницы сайта, в которой обычно находится его название, логотип, контактная информация и меню. Хотя, лично я не считаю что меню относится к шапке. Меню это отдельный элемент функционала сайта, со своей структурой и назначением.
К сожалению в движке MYENGINE нет штатного функционала загрузки логотипа и контактной информации. Видно автор движка не посчитал такой функционал важным, ведь это можно сделать вручную. Можно, но не каждому это по силам. Поэтому в шаблоне "Про бизнес" исправлен этот недостаток.
Вот так выглядит верхняя часть шаблона по умолчанию после установки в движок.
Классическая структура заложенная в движке. В левой части шапки выводится название сайта и слоган, в правой - кнопки авторизации/регистрации и поле поиска. Правда в шаблоне по умолчанию выводится логотип, а не название сайта, которое прописано в настройках движка. Но, об этом чуть позже.
На самом деле структура шапки шаблона состоит из трех блоков. Левый, правый и между ними центральный. Вот о нем и пойдет сейчас речь. Ну правда, столько места пропадает в центре шапки и его нужно чем-то занять. Загрузим туда рекламный баннер. Это может быть картинка. К ней можно добавить ссылку и это уже кликальбельный баннер. Но, это слишком просто. Нужно что-то по сложнее. Сделаем баннер на HTML и CSS.
В панели управления шаблоном есть вот такое поле
Которое называется Текстовый блок 1 (шапка). Именно содержимое этого поля и выводится в центральном блоке шапки. Сейчас оно пустое, а вывод отключен. Поле это не простое, оно имеет небольшую панель инструментов, которая позволяет добавлять некоторые html-теги.
Наш html-баннер будет сделан на базе простой ссылки. Для этого нажимаем на иконку, что самая крайняя с права. Откроется окно.
Вводим нужную ссылку и нажимаем "ОК". В нашем поле появится тег ссылки с прописанным адресом.
Теперь в эту ссылку вставим картинку для баннера. Нажимаем на иконку с картинкой и откроется еще одно окно.
Вводим ссылку на файл, который уже загружен предварительно. Затем нажимаем "ОК" и в нашей ссылке появляется тег изображения img.
В теге прописано все что нужно: ссылка на файл, размеры изображения и атрибут alt, который при необходимости можно заполнить вручную. Теперь добавим небольшой текст. Для этого вставляем тег Р, для чего нужно нажать на соответствующую иконку.
Прописываем нужный текст.
В принципе можно вставить текст, выделить его и нажать на иконку Р, после чего текст будет обернут в блочный html-тег р.
Ставим чекбокс для вывода содержимого поля и сохраняем настройки. Смотрим что получилось.
Картинка есть, текст есть, баннера нет. Нужно это все как-то оформит с помощью CSS. Для этого в нашей ссылке предусмотрен класс banner-3s, который был прописан вручную, т.к. предполагалось оформление баннера. Теперь нужно прописать CSS стили для этого баннера. Где и как это можно сделать.
Если очень хочется, то стили можно прописать через атрибут style непосредственно в ссылке. Можно в это поле вставить небольшую CSS таблицу. Но делать то и другое не рекомендую. Лучше прописать стили баннера в глобальных стилях шаблона. Понимаю, неохота. Нужно лезть в файл, что-то писать, потом его сохранять и загружать на сервер. Но, можно и по другому.
В настройках шаблона есть раздел "Дополнительные настройки".
Нам нужен "Блок HTML в верху страницы". Прописываем в нем таблицу со стилями нашего баннера.
Сохраняем настройки и смотрим результат.
Симпатичный получился баннер. Таким способом можно вывести любой html-код в этом блоке. Использовать панель инструментов необязательно, можно просто написать код вручную или вставить уже готовый.
Вернемся к названию сайта. Как уже упоминалось, по умолчанию выводится логотип. Если нужно вывести полное название сайта, прописанное в настройках движки, то необходимо отключить вывод логотипа. В настройках шаблона есть такая опция.
Убираем чекбокс и сохраняем настройки. Смотром результат.
Здесь ничего не поделаешь. Слишком длинное названием. Я лично не люблю когда делают длинные названия сайтов. Не смотрится это все. Но, если хочется, то можно. Что делать в этом случае. Можно в стилях шаблона изменить размер шрифта, это для тех кто знает как это делается. Для тех, кто не знает, нужно спросить как это делается или использовать функционал что есть. А что у нас есть? Правильно, можно отключить вывод центрального блока. В этом случае ширина левого блока увеличится в два раза.
Да пришлось пожертвовать баннером, красота требует жертв. Но, если на сайте не нужны поиск с авторизацией, то можно отключить вывод левого блока. Такая опция так же имеется в настройках шаблона. Будет вот такой результат.
В принципе нормально, но самых дотошных может не устроить, что баннер не дотянул до правого края. Это по тому, что этот баннер ориентирован по центру блока, это прописано в стилях.
Перепишем ориентацию и сделаем ее по правому краю.
Смотрим результат.
Замечательно. У нас все получилось. Для тех, кто любит очень длинные названия можно отключить вывод и этого блока. Тогда левый блок займет всю ширину шапки и можно будет писать очень много букв в названии.
Но, это еще не все. Есть варианты, когда на сайте не нужна авторизация. То можно удалить модуль пользовательской части, чтобы не болтался. В этом случае вывод кнопок авторизации в шапке будет отключен.
Останется одно поле поиска. И наоборот, если на сайте не нужен поиск, то можно удалить соответствующий модуль. В этом случае получим такой результат.
А что будет, если удалить сразу оба модуля? Правильно, справа ничего не будет.
Ну как ничего. На самом деле, при удалении модулей в этом месте будет выведено содержание точно такого же поля, что и в центральном блоке. Называется оно Текстовый блок 2 (шапка).
По умолчанию оно пустое, но туда можно загрузить любой код или текст. Например, цитату умного человека.
Ну, вот вроде бы все. Или нет, что-то забыл.
В самом начале этой статьи отмечалось, что в шапке может выводиться контактная информация. Тогда выведем, тем более что она есть. Там же, в настройках шаблона.
Ставим чекбокс, сохраняем настройки и смотрим результат.
При чем, если поле какой-либо опции оставить пустым, то ее вывод в шапку будет отключен. В настройках еще есть опции для вывода иконок социальных сетей.
Ставим чекбокс, сохраняем настройки и смотрим результат.
Теперь точно все, т.к. настроек для шапки больше не осталось. Но, можно дописать, если вам очень нужно. Пишите, договоримся.
Если понравилась статья, то ставьте лайк палец вверх, если нет - вниз. Если не подписаны на канал, подписывайтесь. Это не сложно, надавил на кнопочку и все, уже подписан.
#разработка веб-сайтов #создание сайтов #веб-дизайн #интернет #myengine