Как создать шапку для сайта в программе XHeader
Приветствую, друзья! Если вам нужно создать шапку сайта или блога, то программа для создания шапок для сайта HXEADER — поможет в этом. Программа XHEADER будет интересна тем, у кого нет фотошопа, и очень даже пригодится тем, у кого нет никаких навыков работы в онлайн графических редакторах.
Бесплатную англоязычную версию я скачала на сайте разработчика XHEADER.COM – это правило без исключений. Весит она около 50 мегабайт. При запуске программы XHeader и при сохранении готовой шапки появляется окошко с предложением приобрести полноценную ее версию, но я жала «No thanks», поскольку не собираюсь открывать скорняжное производство, а при создании сайтов на заказ пользуюсь услугами профессиональных дизайнеров. Или клиенты предоставляют свои материалы. Нужда была разовая, хотя мне очень понравилось работать в программе, которая не требует вообще никаких мозгов. А если они есть и применить их, то результата можно добиться отличного.
Что мы имеем, установив программу XHeader. Во-первых, порядка 500 готовых дизайнов шапок для сайтов и блогов различных тематик, которые можно использовать как базу. Размеры шапки 950 на 175 пикселей. Вполне нормальные размеры, в соответствии с современными требованиями, но если ширина сайта чуть больше или меньше, как изменить размер, в программе я не нашла, потому увеличивала готовый хедер на недостающие 10 px по ширине в другом редакторе.
Как создать шапку сайта в программе
В шаблон шапки можно вставлять изображения, писать текст с эффектами или без них. Тексты вставляются и скопированные, с помощью клавиш ctrl+v. Есть достаточно большой выбор шрифтов. А вот палитра слабовата. И пипетки нет, как в фотошопе. Этот момент нужно предусмотреть заранее, если требуется сохранить гармонию в цвете.
Порядок действия примерно такой, как на картинках. Обратите внимание, если будете работать в XHEADER: все блоки на шапке двигаются, независимо от последовательности их размещения или загрузки. Например, можно от одного текста вернуться к предыдущему, переместить его, отредактировать. Так же и с загруженными картинками.
Как вы видите, я выбрала создание новой шапки.
И тут же открылся выбор шаблона.
Удобный интерфейс программы. Меню доступно для каждого шаблона, с которым мы «колдуем».
Здесь я пытаюсь вставить текст, подобрав нужный шрифт, размер, цвет. Есть и функция заливки.
А вот и результат, сделанный на скорую руку. Шаблон, выбранный сначала, слетел, когда неудачно отменила какое-то действие, поэтому на ходу заменила его на другой из списка.
Как вам программа? Да!!! Совсем забыла! Не забудьте сжать картинку перед загрузкой на сайт. Моя шапка с сосисками в полном размере в формате PNG весила 171 kb, после сжатия стала весить 31,9 kb. Это очень важно — не нагружать сайт тяжелыми изображениями.
Шапка сайта. Типовое решение «GS: Авто
Большая часть элементов в шапке сайта представлена включаемыми областями. Исключение: кнопка «Записаться на сервис», Форма поиска, Заказать звонок.
Включаемые области
1. Адрес компании
2. Email
3. Картинка логотипа
4. Текст логотипа
5. Текст о компании
6. Телефон
7. График работы
Редактирование включаемых областей
Для редактирования включаемой области можно воспользоваться нашей инструкцией: Редактирование включаемых областей
1. Адрес компании
2. Email
Email необходимо изменить в двух местах.
3. Картинка логотипа
Вместо данного кода вы можете прописать путь к своему изображению. Предварительно изображение необходимо подготовить (оптимизировать, подобрать размер) и загрузить на сайт. Все изображения рекомендуется загружать в корень сайта в папку images.
Предположим у вас есть изображение логотипа с именем logo.png
Во включаемой области вместо <i aria-hidden=»true»></i> вы можете прописать следующий код:
<img src=»/images/logo.png» alt=»Ваша компания» title=»Ваша компания»>
Для загрузки изображения:
1. Переходим во вкладку Администрирование
2. Контент — Структура сайта — Файлы и папки — images (если папки images нет, её необходимо создать)
3. Загружаем файл logo.png в папку images
Отредактировать размер и расположение картинки логотипа относительно других элементов в шаблоне можно в файле стилей style.css.
4. Текст логотипа
Если в логотипе предполагается только картинка, то текст логотипа можно удалить.
5. Текст о компании
6. Телефон
7. График работы
Элементы шапки редактируемые через шаблон
1. Кнопка «Записаться на сервис»
2. Ссылка «Заказать звонок»
1. Кнопка «Записаться на сервис»
Отредактировать кнопку можно в коде шаблона сайта.
Вместо <?=GetMessage(«HEADER_ZAYVKA»)?> вы можете указать свой текст ссылки.
2. Ссылка «Заказать звонок»
Отредактировать код ссылки «Заказать звонок» можно в коде шаблона сайта.
Вместо <?=GetMessage(«CALLBACK»)?> вы можете указать свой текст ссылки.
3. Форма поиска на сайте
Отредактировать форму поиска можно в коде шаблона сайта.
Шапка сайта играет не мало важную роль для вашего интернет ресурса (сайта). Создание шапки для сайта поможет добавить оригинальности и создать первоначальное впечатление о вашем веб ресурсе! Находиться шапка сайта в верху каждого интернет сайта представляет собой картинку формата gif, jpg, png которая не должна превышать определенных размеров, веса и обязательно отличаться оригинальностью цветов и красок, нести в себе то, что косвенно связанно с вашей деятельностью, услугами, как бы визуально рассказывать посетителю чем богат ваш ресурс и что они cмогут найти на его страницах. Если вы не владеете данными знаниями, веб студия Weberсontrol благодаря нашим опытным веб дизайнерам займется созданием шапки для вашего веб ресурса за небольшую плату, которая берется только за потраченное время и выполненную работу. Доверьтесь нашим мастерам в создании шапки, а также закажите веб дизайн для вашего интернет сайта недорого в режиме онлайн и уже буквально через неделю ваш сайт добавит в себя не только новых цветов но и однозначно разбавит серую массу однотипных интернет сайтов в веб паутине! Шапка для сайта обычно включает в себя три основных критерия первый из них это «логотип сайта» так сказать название вашего сайта, логотип бренда или вашей организации. Второй критерий в создании шапки это «контактная информация» например: номера телефонов, электронная почта, время работы, либо другие контактные данные для связи с вами или с вашей компанией. Готовая шапка сайта |
1 Используйте только качественные изображения при создании — это улучшит качество картинки и шапки на выходе! 2 Начинайте создание шапки только после того как определились с размерами подготовили картинки представили как должна выглядеть готовая шапка! 3 Следите за весом шапки на выходе! Размер картинки не должен превышать 100 Кб |