gototopgototop
Register
Вход
HomeКак это сделать?... /  Как изменить "шапку" шаблона Joomla!
Как изменить "шапку" шаблона Joomla! E-mail
Повышаем мастерство - Как сделать?...
Автор: Наталья Мельниченко   
13.12.2012 17:12

Как изменить "шапку"  шаблона Joomla!Уходящий 2012-ый год знаменателен для меня тем, что уже не я сама, а мои постоянные читатели и ученики придумывают темы новых уроков. Вот одна из них:

Как изменить "шапку"  шаблона Joomla!

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

 Первое, что мы должны сделать, - это уяснить для себя форматы картинок, потому что "шапка" шаблона - это всего лишь картинка в определенном формате.

Самые распространенные форматы : JPG, PNG, .GIF   .

Начнём с GIF. Чаще всего в этом формате используются анимированные картинки. В целях сегодняшнего урока я отыскала в интернете нужное мне изображение и сохранила его к себе на компьютер под названием shapka.gif  . Вот оно:

Как изменить "шапку"  шаблона Joomla!

Чудесная, хоть и грустная, "джифка", создающая впечатление реально идущего дождя. "Вес"  данной картинки 327 КБ.

Как изменить шапку шаблона сайта
1. shapka.jpg

Я открываю gif-картинку в Фотошопе, а потом  сохраняю её под тем же названием - shapka, но уже в другом формате - .jpg, и теперь картинка подписана так: shapka.jpg . Выглядит она совсем по-другому: анимация исчезла, остался только намёк на дождь. "Весит" картинка  всего 30 КБ .

 

 

 

 

 

 Как изменить шапку шаблона сайта
2. shapka.png

Теперь, ничего не меняя, ещё раз сохраняю картинку, но уже в формате .png.

Различия в изображениях (1)  и (2) почти незаметны, только
shapka.png  "весит" побольше - 58 КБ .

 А теперь ещё немного поработаем в Фотошопе  с картинкой shapka.jpg, сохранив её попозже в PNG . Лично я просто обожаю данный формат, потому что именно он позволяет придать картинке столь любимую мною прозрачность ( в чём вы легко можете убедиться, посетив самый первый  сайт вашей училки - pavlovsk-spb.ru).

Итак, открываем в Фотошопе картинку shapka.jpg. Видим, что слой  "Фон" заперт на ключ:

Форматы картинок для сайта ::

Щёлкнем  дважды левой кнопкой мышки по этому слою, а потом в выпавшем окошке нажмём на "ОК". Всё, можем спокойно убирать с картинки всё, на наш взгляд, лишнее. Для этого нажмём кнопку  инструмента "Волшебная палочка", определим допуск (я поставила 30) и начнём, как волшебница из сказки, прикладывать палочку (опять же левой кнопкой мышки) к тем местам, которые намерены убрать. Ориентируемся на мерцающий контур, выделенный палочкой: если согласны с получившимся вариантом, нажимаем  на клавиатуре  кнопку "Delete":

Форматы картинок для сайта ::

Таким вот образом удаляем всё, что нужно удалить в соответствии с нашим замыслом, а чтобы проверить, не осталось ли "крошек", давайте добавим новый слой и зальём его для контраста черным цветом:

Форматы картинок для сайта ::

На тёмном фоне очень хорошо видны оставшиеся огрехи, которые можно убрать с помощью инструмента ластик. Если теперь нас всё устраивает (включая размер картинки), то черный слой надо закрыть, а оставшееся изображение на прозрачном фоне сохранить в формате PNG:

Форматы картинок для сайта ::

Разумеется, есть и другие варианты выделения картинки, - я остановилась лишь ну на самом простом, ну проще некуда.

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

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

Все картинки шаблона хранятся в его папке images. Не путайте эту папку с папкой  аналогичного названия, хранящуюся в корневом каталоге сайта. Папка, с которой мы работаем в сегодняшнем уроке, имеет такой адрес:

название сайта/templates/название шаблона/images

А теперь немного практических действий:

1. Откройте искомую папку и отыщите в ней картинку-шапку.

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

leningrad(это название сайта)/templates/voina(это название шаблона)/images

Вот  примерный перечень файлов папки images моего шаблона, среди которых я сразу вижу и "шапку", т.е. файл под названием Header.jpg :

Как изменить "шапку"  шаблона Joomla!

Обратите внимание на ТОЧНОЕ название  моего файла: оно начинается с заглавной буквы и имеет расширение .jpg . Название вашего файла будет звучать по-другому и иметь другой формат. Суть состоит в том, чтобы в любом случае сохранять в точности название и формат,  придуманные разработчиком  шаблона.

2. Далее я открою картинку Header.jpg в Фотошопе и отредактирую её по своему усмотрению, вплоть до полной замены, помня, однако, об упомянутых выше двух важных вещах: нельзя менять размер изображения, а также его название и формат. В противном случае мне придётся вносить изменения и в файлы шаблона. Поскольку лишняя работа никому не в радость, то я своё новое изображение сохраняю под старым названием и в том же формате: Header.jpg. Во время сохранения система сделает подсказку, что такой файл уже существует, и спросит: "Заменить?" - я нажимаю на "Заменить",  а затем перезагружаю лицевую панель сайта и любуюсь результатом. Если результат меня не устраивает, то опять принимаюсь за исправления. И так до победного конца.

По описанной схеме можно менять и остальные картинки шаблона.

Ну, теперь-то вы убедились, что изменить шапку, или header, шаблона очень и очень просто?

 

 

 
ВХОД на сайт



Базовый курс создания сайта

Предисловия к Базовому курсу

Установка и настройка Joomla!

Работа с расширениями Joomla!

2011-03-11-22-16-12Работа со статьями

Создание меню

Работа с хостингом

Безопасность сайта

Ссылки для скачиваний

 

Есть ли народ на сайте?

Сейчас 29 гостей онлайн

Мы вконтакте

Как сделать?...

Контакты





Copyright © 2011. Joomla! для "чайников". Автор сайта Наталья Мельниченко
Follow us on Twitter