Blogger: Меняем размер картинки!

Картинка в вашей статье!

Доборго времени суток!

Сегодня мы поговорим о картинках в ваших статьях, постаха или сообщениях (кому как нравится их называть) . В общем-то, я не сомневаюсь, что все вы умеете вставлять картинки в ваше сообщение на Bloggere, но как выяснилось далеко не все умеют уменьшать или увеличивать картинку. Люди из Группы "Blogger Discuss" не знали ответа на этот вопрос, а я вам расскажу сразу два способа как это можно сделать:

1. Способ НАГЛАЗОК: Во врямя написания статьи в режиме "Создать/Compose" мы кликаем на картинку у которой мы хотим изменить размер и видим появившуюся вокруг картинки рамочку с маленькими квадратиками - это значит картинка стала активна. Теперь наведя на середину картинки мышку и нажав указательным пальцем (т.е. для большинсва из нас левую) клавишу мыши не отпуская её мы можем перетянуть картинку на нужное нам место выше или ниже. Чтобы изменить размер картинки нам надо сделать картинку опять-таки активной, а потом "растянуть или уменьшить" её с помощью мышки: для чего медленно проведем мышкой над появившейся рамочкой в районе квадратика и когда мы увидим, что указатель нашей мышки превратися в стрелочку упирающуюся в отрезок рамочки картинки мы нажимаем указательным пальцем клавишу на мышке и тянем эту рамочку в сторону уменьшения или увеличения картинки.

Удачи вам! Главное не забывайте о пропорциях! [Я, кажется, c ними немного перестаралась ;)].

2. Способ ПО-НАУКЕ: Обычным способом подгружаем в нашу статью картинку. И переходим в режим редактирования HTML/Edit HTML. И видим следующий код:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i201.photobucket.com/albums/aa306/kylekeeton/RussianBlooger/Picture.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px;" src="http://i201.photobucket.com/albums/aa306/kylekeeton/RussianBlooger/Picture.jpg" alt="А здесь была КРАСИВАЯ ТАКАЯ КАРТИНКА!" title="Случайная картинка, найденная мною в интернете - оказалась пейзажем Дерка Хансена!" border="0" /></a>

Смотрим на этот код и даже если никогда не видели описания интернет-страничек на языке HTML с элементами CSS стараемся не пугаться. Ведь всегда же можно вернуться в наш любимый режим Создать или Compose. Вы все-таки еще не убегайте, а я сейчас попробую все объяснить:

1) Все что выделено синим цветом между двумя первыми значками меньше-больше <...> и последними значками меньше-больше <...> со слэшом и буковкой "а" по серидине говорит вашему браузеру, что картинка которую вы только что подгрузили будет на самом деле ссылкой и если кликнуть по этой ссылки мы увидим картинку целиком "в полный рост". Если картинка сама по себе небольшая и я её и так показываю целиком, я удаляю эту ссылку - т.е. все что в коде выделено синим. (Вам это делать совсем не обязательно!)

2) Между этими синими кусками мы видим собственно описание самой картинки. То что я выделила зеленым цветом это и есть ширина нашей картинки. В зависимости от режима, в котором вы её подгружали [размер: большой, средний или малый] ширина width может быть 400px, 320px, 200px вот этот-то параметр мы и меняем на.... что угодно, что вам больше нравится: на любое число - только не забываем про значок px (что значит пиксел) на конце. [Слово «пиксел» является сокращением от английских слов «picture element» (элемент изображения). На экране телевизора или монитора любое изображение состоит из совокупности очень мелких элементов (точек). Эти элементы изображения и называются пикселами (pixel).]

3) Красным цветом я выделила еще один хитрый параметр размещения картинки float может быть left, center, right или его может не быть совсем, в зависимости от того, какой Формат (Layout) вы выбрали при подгрузке своей картинки. Этот параметр вы тоже можете поменять, если вдруг решите, что эта картинка будет лучше смотреться не слева, а справа.

4) А вот таким светлоголубым цветом я отметила, то что вы у себя в HTMLе не увидите в параметр alt="" внутрь кавычек я добавила строчку А здесь была КРАСИВАЯ ТАКАЯ КАРТИНКА!, которую наш читатель увидит если картинка по каким-то причинам не подгрузится, а вот параметр title я вставила сама и включила в него в кавычках короткое описание картинки Случайная картинка, найденная мною в интернете - оказалась пейзажем Дерка Хансена! - это мое вознаграждение для любознательного читателя, который наведет на картинку мышку и прочтет ее описатие. Я, между прочим, всегда так делаю можете посмотреть что вам скажет эта кошечка в конце статьи - просто наведите на неё мышку.

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

Если вам понравилась картинка, на которой мы сегодня тренировались - вы может почитать о её создателе, Дерке Хансене здесь.

А я на сегодня прощаюсь, тихо радуясь за читателей кто узнал сегодня что-то новое :).
Света

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