gototopgototop
Register
Вход
HomeКак это сделать?... /  Картинки на сайте - это важно!
Картинки на сайте - это важно! E-mail
Повышаем мастерство - Как сделать?...
Автор: Наталья Мельниченко   
29.03.2012 16:06

Картинки для сайта
Ни один вебмастер не может обойтись без знания того, как работать с картинками.  Ведь благодаря им каждый сайт становится "отличным от других". Красивый header, называемый ещё "шапкой", привлекательный футер, эффектные модули, - всё это основано на картинках, или images.
Именно так и называется одна из корневых папок Joomla! , в которой хранятся все картинки сайта - как вспомогательные, так и предназначенные для иллюстрации материалов. Сегодня мы поговорим обо всём, что связано с картинками. И начнём   с самого начала, т.е. с общих настроек сайта.



Шаг 1.
Откройте в админке меню Сайт>>Общие настройки>>Система и прокрутите окно вниз до раздела Установки Медиа менеджера. В строках "Путь к папке с Медиа" и "Путь к папке с Изображениями" по умолчанию прописано:  images/stories.

Я пришла к выводу, что это жутко неудобно по двум причинам:
1) удлиняется путь к каждой конкретной картинке;
2) когда мы хотим вставить картинку в статью, то при нажатии в редакторе на кнопку "Изображение" нам открывается только папка stories, ну и, естественно, все те папки, которые в ней находятся. Если же нужная картинка находится в папке images, то извлечь её через кнопку редактора не получается.

Что я стала делать? - да просто удалила в общих настройках /stories, оставив только images:

Сайт на Joomla! :: Работа с картинками сайта
Рис.1

В следующей строке "Допустимые расширения для картинок" я оставила только те расширения, которые действительно использую: это картинки в формате gif, png, jpg.
По окончании сохранила произведенные изменения в настройках.

Внимание! Вышеуказанное удаление папки stories не означает, что она вообще удаляется с сайта, - просто мы как бы понизили её статус.

Шаг 2. Создание папок в папке images.

Как только я создаю новый раздел для материалов, я тут же создаю под него и папку для картинок. Например, на этом сайте есть раздел "Разное", и под него создана папка "raznoe". В разделе есть категории, поэтому в папке raznoe создаю новые папки, уже под категории этого раздела.

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

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


Где брать картинки для сайта?

Если у вас нет своего фотоаппарата, то найти картинки можно на бесплатных и платных хостингах. С тех пор, как у меня появился свой Canon EOS 450D, я почти перестала посещать эти хостинги, но иногда заглядываю на тематический http://sxc.hu  Нужную картинку здесь легко подобрать, потому что они классифицированы по категориям, а также на сайте хорошо работает поисковая система (правда, писать запрос надо на английском, но словари-то у вебмастера всегда под рукой, правда?).


Как определить размер картинки, хранящейся на компьютере?

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

Сайт на Joomla! :: Работа с картинками сайта
Рис.2

 

Как подготовить картинку к показу на сайте?

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

Размер картинок я ставлю в зависимость от того, в каком месте собираюсь их показывать и в какой форме. Например:

1) используя практически во всех уроках плагины рокбох,  специально для них готовлю большие картинки размером, не превышающим в ширину 900 рх. Картинки предпросмотра рокбокс создаёт автоматически в соответствии с заданными параметрами. Если мне захочется иметь превьюшку другого размера, то я создам её самостоятельно, подписав в соответствии с требованием рокбокса, т.е. так: image_thumb.jpg

2) иногда я использую эффект увеличения картинки при наведении на неё курсора (как он создаётся в визуальном редакторе, описано в соответствующем уроке). В этом случае готовлю маленькое и большое изображения; размер большого не увеличиваю в ширину более, чем до 400-500 рх, - с тем, чтобы оно полностью помещалось в ширину статьи.

3) чаще всего на сайтах используется линковка маленького изображения на его увеличенную копию. В этих случаях я, как правило, делаю размер большого изображения от 900 до 1024 рх в ширину. Оптимизированная в фотошопе картинка имеет небольшой вес и грузится быстро.
Однако бывают случаи, когда требуется показать, например, карту, а уменьшение размера не даёт возможности посетителям рассмотреть её подробно и ясно. Тогда приходится идти на уступки качеству, невзирая на большой вес изображения.

4) изображения можно демонстрировать через галереи, слайдшоу, модули. Здесь сначала следует познакомиться с параметрами расширения, и  при подготовке картинок к показу отталкиваться от установок разработчика, а в случае модулей - ещё и от возможностей шаблона. Например, вы ставите в левую позицию модуль random_image. По шаблону ширина её всего 160-200 рх, и, если ширина помещаемых в модуль картинок будет более этого размера, то они будут либо "обрезаться", либо "наезжать" на поле для материалов сайта.

 Где и как прописываются параметры картинок статей?

Если вы заботитесь о комфортном пребывании посетителей на сайте, а также о поисковой оптимизации, то должны уделить время на прописывание параметров картинки. Мы остановимся на этом важном моменте подробнее:

1. Не секрет, что есть пользователи, имеющие ограниченный интернет-трафик. Из-за этого они вынуждены отключать в браузере функцию показа изображений, и тогда на месте картинки будет пустое место в рамке. Однако, если на пустом месте будет стоять описание картинки, то, возможно, у посетителя появится желание либо необходимость просмотреть её. Значит, изображения нуждаются в описании (заголовке).

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

2. Ниже я размещаю любимую фотографию своего внука, обожающего вести взрослые разговоры со всеми подряд. Фото не очень качественное, но в данном случае я использую его в качестве иллюстрации к более важным вещам. Вы видите небольшое изображение, его размер 300х225 рх, и оно залинковано на большое изображение - 800х600рх.

Большое изображение я назвала leto.jpg , маленькое - S_leto.jpg . Это моя собственная система названий, выработанная в результате работы с огромным количеством изображений. Ниже я объясню, в чём состоит удобство "системы".

Итак, вот картинка:Лето в деревне

 

 

 

 

 

 




Здесь я разместила её так: поставила курсор после слова "картинка" и нажала на кнопку "Изображение" в нижней панели редактора. Открылось окно папки images, где у меня в папке demo лежат  картинки для этого урока:

Сайт на Joomla! :: Работа с картинками сайта
Рис.3

Обратите внимание, что в окошке редактора картинки по размеру  совершенно одинаковые, отличаются только названиями. На какое нажать, чтобы вставить в статью маленькое изображение? - было бы легко запутаться, если бы не названия картинок: я твёрдо знаю, что нажать мне сейчас надо на S_leto.jpg, потому что в моей системе приставка S_ указывает на то, что именно это изображение и есть меньшее по размеру.

После того, как я нажму на картинку, путь к ней отразится в строчке "Адрес (URL) картинки". Далее я даю картинке заголовок "Лето в деревне", выбираю позицию (выравнивание) "справа" (это означает, что картинка встанет справа от того места, где был поставлен курсор). Теперь я копирую путь к картинке, а  затем нажимаю на кнопку "Вставить":

Сайт на Joomla! :: Работа с картинками сайта
Рис.4

Картинка встала на место, и теперь, если подвести к ней курсор,  покажется заголовок "Лето в деревне" :

Сайт на Joomla! :: Работа с картинками сайта
Рис.5

Далее мне надо залинковать "малышку" на большое изображение, поэтому нажимаю сначала на неё, а потом на "цепочку" в панели редактора. Откроется окно, в котором я вставлю в строчку URL скопированный ранее путь к маленькой картинке. Затем  уберу из названия картинки приставку S_, выберу в строке Target   параметр "Open in  new window" (открыть в новом окне); заголовок пусть будет такой же - "Лето в деревне". Всё, жмём на  кнопку Insert:

Сайт на Joomla! :: Работа с картинками сайта
Рис.6

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

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

Осталось сказать несколько слов по поводу форматов изображений. На Рис.1 вы видите, что я оставила в общих настройках сайта три наиболее востребованных формата : jpg, png  и gif .

Одна и та же картинка (например, leto) может быть в нескольких форматах:
leto.jpg, leto.png, leto.gif.  Но меньше всего leto будет весить в формате jpg.

Я использую все три формата: то, что моргает, кружится и подпрыгивает, заодно и  подмигивает - это gif-ки; картинки на прозрачном фоне (например, оранжевые стрелки "Наверх") - это png-шки (их у меня особенно много на сайте о Павловске, где и шаблоны прозрачные); остальные изображения - это jpg-шки. 
Так что выбирайте формат в зависимости от своих нужд и предпочтений, и творческих вам успехов!

 
ВХОД на сайт



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

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

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

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

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

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

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

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

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

 

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

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

Мы вконтакте

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

Контакты





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