Blogger: Картинки для фотохудожника!

Снова дома!

Всё хорошее, ровно как и плохое: когда-нибудь заканчивается. Закончились и наши фантастические каникулы в Израиле, которые мы провели у совершенно замечательных людей, которые стали нашей семьей: Челиты и Миши.

О наших каникулах можно почитать и посмотреть видео у Челиты в блоге, а можно посмотреть картинки в нашем Windows to Russia - он еще не совсем функционирует, потому что его главный автор Кайл застрял в Киеве еще на неделю (да-да после Израиля мы полетели в Киев) и с интернетом ему пока что не везет: сначала из-за вируса слетел драйвер для WiFi, а когда Кайл все переустановил в местном торговом центре не стало WiFi -- но это все наверное не очень интересно ни за этим вы пришли в этот блог, так что я возвращаюсь к нашим баранам, а проще говоря к картинкам ;).

Да, сегодня мы по-прежнему говорим о картинках, но на этот раз о картинках на Blogger(e) для фотохудожников!

Картинки для Фотохудожников на Blogger(e)!

Все началось с вопроса Zaoa о "картинках высокого разрешения" и о размерах картинки, которые странным образом искажаются Blogger(ом) во время публикации. Но для того чтобы разобраться со всем этим напридется на время сменить язык общения -- разговаривать мы с вами будем на языке Html и даже возможно немножко CSS. (Только пожалуйста не бойтесь, я попробую все понятно рассказать, а еще как всегда в комментариях можно задавать любые вопросы).

O языке HTML мы уже говорили, когда разговаривали о ссылка. Теперь нам все эти знания понадобятся, так что если кому-нибудь надо освежить в памяти предыдущую статью (времени прошло много) -- Пожалуйте Сюда!

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

Сейчас я вам расскажу как поступает настоящий профессионал, чтобы опубликовать свой шедевр:

1) Подыскивает хорошее хранилище для своих фотографий. Я вот всегда думала, что Picasa.com или мой любимый Photobucket.com (или вот еще люди пользуются Flickr.com) хорошие сервисы для хранения фотографий, но на днях один из моих коллег показал мне сервис Fotki.Com его прелесть в том что они не ужимают фотографии и хранят их в том виде в каком вы их там размещаете -- даже в оригинале (те в максимально возможном качестве). Fotki.com я вам здесь, конечно, продемонстрирую но сама-то останусь на photobucket.com (нравятся мне его онлайновые сервисы, но об этом как-нибудь в другой раз)

2) В редакторе фотографий делает фотографию того размера, которого хочет поместить себе на сайт или в блог. Итак у него теперь 2 фотки: одна назовем её foto_mal.jpeg (маленькая фотография) - это фотография которая будет видна на сайте, вторая фотография foto_bol.jpeg (большая фотография) эту фотографию в отдельном окне увидит любознательный посетитель, которому интересны детали.

3) Закачивает обе фотки в свое любимое хранилище фотографий и находит там их url т.е. адрес где они хранятся в интернете что-то типа http://moi_foty.com/vasya/foto_mal.jpeg и соответственно http://moi_foty.com/vasya/foto_bol.jpeg

4) Заходит на Blogger, Новое Сообщение и сразу в Редактирование Html (ну, профессионал же!). Там он пишет следующее заклинание:

<img src="http://moi_foty.com/vasya/foto_mal.jpeg" />

Теперь если он посмотрит на свое сообщение нажав "Предварительный просмотр" он увидит свою маленькую картинку в своей же статье.

Пусть он полюбуется, а я пока объясню что он такое написал. А написал он HTML-тэг img для описания картинки. Этот HTML-тэг является непарным -- нам же проще: значит закрывать его не надо! И он использовал единственный атрибут этого тега src где в кавычках написал url маленькой фотографии.

5) На следующем этапе он решает позаботиться о настоящих ценителях его искусства и делает из маленькой фотографии ссылку и по этой ссылке он собирается открывать отдельное окошко с его шедевром так сказать в полный рост.

Мы с вами люди уже опытные (Про ссылки читали) и знаем, что сделать ссылку в принципе можно из чего угодно: достаточно это "что угодно" окружить открывающим и закрывающим тегом a (a, заметьте, латинское). Вот мы и окружаем этот тег описания картинки нашими тегами ссылки (открывающим и закрывающим):

<a><img src="http://moi_foty.com/vasya/foto_mal.jpeg" /></a> синим цветом я выделила то его описание картинки, которое он сделал в пункте 4)

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

1. Конечно атрибут href с адресом (url) большой картинки взятым в кавычки
href="http://moi_foty.com/vasya/foto_bol.jpeg"
2. Скажет, что открыть картинку нужно в другом окне. Это он скажет с помощью атрибута target
target="_blank"

А теперь я напишу весь код целиком, который получился у нашего гения:

<span style="font-weight: bold;"><a href="http://moi_foty.com/vasya/foto_bol.jpeg" target="_blank"><img src="http://moi_foty.com/vasya/foto_mal.jpeg" /></a></span>

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

Если же вы такие же ленивые как я и у вас есть только одна версия картинки код мы немножко изменим и обозначим ширину картинки, которая будет у вас в блоге . Для этого добавим к описанию картинки тег img как вы помните еще один атрибут style и значением этого атрибута будет ширина нашей фотографии у меня это 500 и выглядит это значение так: width:500px Я поставила 500, потому что у меня колонка с текстом имеет ширину 525. А вы поподбирайте и посмотрите, что лучше смотрится...

<a href="http://moi_foty.com/vasya/foto.jpeg" target="_blank"><img src="http://moi_foty.com/vasya/foto.jpeg" style="width: 500px;" /></a>

Теперь этот код можно использовать если у нас есть только одна версия фотографии.

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

float: left; - если мы хотим чтобы текст эту картинку обходил/обтекал (float - плавающий, плот англ.) и картинка оставалась всегда слева
float: right; - если мы хотим чтобы картинка всегда была справа от текста

<a href="http://moi_foty.com/vasya/foto.jpeg" target="_blank"><img src="http://moi_foty.com/vasya/foto.jpeg" style="width: 500px; float: left;" /> -- вот здесь фотография всегда займет левую сторону страницы

А если мы хотим фотографию поцентру берем всю конструкцию в тег center

<center><a href="http://moi_foty.com/vasya/foto.jpeg" target="_blank"><img src="http://moi_foty.com/vasya/foto.jpeg" style="width: 500px; float: left;" /></a></center>

Подведем маленький итог о чем мы сегодня поговорили:

1) О фотосервисах -- их в интернете очень много. Я здесь упомянула: picasa.com flickr.com photobucket.com fotki.com;
2) Вспомнили что url это адрес в интернете;
3) Познакомились с HTML тегом для описания картинок img и
4) узнали некоторые его возможные атрибуты(свойства) src и style
5) значением атрибута src может быть только url вашей картинки
6) у атрибута style может быть много значений их все мы заключаем только в одну пару кавычек, а между собой разделяем точкой с запятой
7) мы познакомились со значениями width и float для атрибута style. Там так же может быть и height (которая определяет высоту картинки)
8) Вспомнили про тег для описания ссылок a - он парный
9) и у него два атрибута href и target.
10) значением href будет url страницы или картинки куда мы пошлем читателя
11) чтобы открыть ссылку в другом окне дадим target значение _blank, а если хотим открыть ссылку в том же самом окне атрибут target использовать не будем.
12) познакомились с HTML тегом center, который является парным и поместит по-центру все что находится между открывающим и закрывающим тегами
вот тут что-то что мы хотим чтобы было по центру

Ну, на сегодня и все!

Сухой остаток этой статьи: Если вы загрузили картинку в свою статью Blogger(ом) и вам чего-то не понравилось -- картинка стала слишком большая и зернистая или слишком маленькая. Удалите картинку из статьи и проделайте всю работу в ручную, используя Html.

Другие статьи про картинки:
Картинки для Блоггера!
Blogger: Меняем размер картинки!

Всем удачи во всем!

Света


Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...