Шапка сайта. Типовое решение «GS: Print
- Главная
- Документация
- Типовое решение «GS: Print — Сайт типографии»
- Шапка сайта
Большая часть элементов в шапке сайта представлена включаемыми областями. Исключение: кнопка «Записаться на сервис», Форма поиска, Заказать звонок.
Включаемые области
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. Ссылка «Заказать звонок»
3. Форма поиска на сайте
1. Кнопка «Оставить заявку»
Отредактировать кнопку можно в коде шаблона сайта.
Вместо <?=GetMessage(«HEADER_ZAYVKA»)?> вы можете указать свой текст ссылки.
2. Ссылка «Заказать звонок»
Отредактировать код ссылки «Заказать звонок» можно в коде шаблона сайта.
Вместо <?=GetMessage(«CALLBACK»)?> вы можете указать свой текст ссылки.
3. Форма поиска на сайте
Отредактировать форму поиска можно в коде шаблона сайта.
Делаем шапку
Для создания шапки для сайта воспользуемся программой Фотошоп.
Больших сложностей при создании шапки не возникнет. Постараюсь всё объяснить по порядку и как можно подробнее.
Чтобы поменять шапку своего сайта, Вам необходимо знать её размер и, исходя из размера Вашей шапки, будем создавать новую с помощью программы Фотошоп. Для начала запускаем программу. В строке меню выбираем: файл => создать. Откроется такое окно:
В этом окне надо выставить размеры шапки. Я привожу пример для создания шапки размером 900х200 пикс. Прописав размеры, нажмите ОК. Появится вот такое рабочее окно:
В этом окне и будем создавать шапку. Можно пойти несколькими путями, это будет зависеть от Вашего желания. Самый простой путь — это найти картинку, которая будет соответствовать дизайну и тематики сайта. Картинка должна быть обязательно приблизительно такой же ширины, как и шапка. Если будет больше — не страшно. Картинку меньшего размера придётся растягивать, при этом изображение немного исказится.
Для примера я возьму какую-нибудь картинку для рабочего стола, они имеют большой размер:
Эта картинка имеет размер 1920х1200 пикс.
Теперь надо эту картинку переместить в Фотошоп. Для этого в меню выбираем — файл ==> открыть. В открывшемся окошке выбираете на компьютере файл с нужной картинкой и нажимаете «открыть». Теперь окно Фотошопа будет выглядеть так:
Внутри теперь два рабочих окна. Теперь нам надо вырезать нужный фрагмент картинки, который мы поместим в нашу шапку. Вырезать надо по размерам шапки. Для вырезания можно воспользоваться инструментом – «раскройка», который найдёте в панели инструментов:
Если с фрагментом определились, то можно инструментом «раскройка» раскроить рисунок. С размерами ориентируйтесь по шкале слева и вверху. После работы инструмента картинка будет выглядеть так:
Нас интересует выделенный объект. Надо подкорректировать его размеры. Для этого на нужном фрагменте сделайте клик правой кнопкой мышки и в открывшемся меню выберите – «Редактировать параметры фрагмента».
В открывшемся окошке выставляете размеры шапки и нажимаете ОК.
Все размеры отредактированы, теперь остаётся перенести этот фрагмент на шапку. Для этого заходим в меню и выбираем — Редактирование ==> Скопировать
Следующий шаг — надо выставить в Фотошопе на передний план окно с будущей шапкой. Далее опять заходим в меню «Редактирование» и выбираем функцию «Вставить»
Вот и всё, шапка в принципе готова. Смотрим, что у нас получилось. Это и будет шапка сайта, вернее её основа.
Теперь останется нанести свой логотип и название сайта. Но тут всё будет зависеть от того, как были они установлены на Вашем сайте. На некоторых шаблонах логотип и название находятся в отдельных файлах в корневой папке сайта. Они установятся автоматически. Вам останется только заменить в корневой папке сайта старый файл рисунка шапки на новый. Ну а если захотите изменить логотип или форму названия, то можно воспользоваться опять таки программой Фотошоп.
Вот и всё, это был самый простой способ. Освоив возможности Фотошопа, можно делать более оригинальные виды шапок. Всё в Ваших руках.
Статья была полезной?
Бесплатные заголовочные фото и картинки
Связанные изображения из iStock | Сохранить сейчас
облака небо небо
Облака размера заголовка Facebook 4
облака небо небо
Облака размера заголовка Facebook 1
облака небо небо
Облака размера заголовка Facebook 3
Облака размера заголовка Facebook 5
Маска Заголовок размер
Маски размера заголовка Facebook
птица гнездо фейсбук
Гнездо размера заголовка Facebook
Фейсбук Заголовок красочный
Размер заголовка Facebook Цветной
птица парк рельс
Размер шапки Facebook Bird N Rail
пчела цветок черный
Facebook Размер заголовка пчелы на цветке
абстрактный арабский искусство
Вселенная Паутины
интернет стрелка будущее
Интернет и будущее
искусство художественный фон
Вселенная Интернета
луна залитый лунным светом ночь
Ночь
урожай ферма пшеница
На ферме
Шарик и стрела 4
заголовок точка прямой
Шарик со стрелой 3
заголовок точка прямой
Шарик и стрела 2
заголовок точка прямой
Шарик и стрела 5
любовь любовь ты
Я ЛЮБЛЮ ТЕБЯ
синий голубоватый абстрактный
Фотофайлы_03
обои зеленый абстрактный
Бесплатные фото_01
баннер баннеры заголовок
Цветочные веб-заголовки
Набор красочных веб-баннеров
пляж закат Флорида
Закат бесплатные фото с парусником и чайками
газета газеты Новости
Серия газет+ 2
газета газеты Новости
Серия газет+ 1
жесткий диск жесткий диск жесткий диск
Ошибка чтения диска
утка кряква водоплавающие птицы
Двойной коллектор
Тренироваться Железнодорожный локомотив
Двойной коллектор в Алматы
девочка ана Мария
Ана-Мария
Румыния расслабляться берег
Расслабьтесь
примечание повестка дня слово
Примечания
пейзаж природа Румыния
Зеленый и синий
мечтать девочка хороший
Дневной сон
футбол футбольный сеть
Заголовок
Роза лепесток любовь
Лепестки роз 1
Ищете иллюстрации для заголовков? Перейти к иллюстрации
Связанные ключевые слова
небо заголовок синий облака облако дневное время стрелка фон
Связанные изображения из iStock | Сохранить сейчас
Заголовок веб-сайта Бесплатные стоковые фотографии, изображения и картинки заголовка веб-сайта
Откройте для себя неограниченное количество изображений высокого разрешения заголовка веб-сайта и стандартных изображений для коммерческого использования.