bighunter: (Virginian)
Первые две части можно помотреть здесь:

Небольшое руководство как вставлять картинки в комментарии - Часть 1

Небольшое руководство как вставлять картинки в комментарии - Часть 2


В первой части рассказывалось как найти адрес картинки, во второй как менять размеры картинки.

В третьей части мы расскажем как скачать очень удобный add-on для Firefox, который позволяет копировать линк на картинку и менять ее размер.

Открываем Firefox и сначала щелкаем "Tools"(Инструменты), затем в открывшемся меню выбираем "Add-ons" (Дополнения).

Resize of Add-on-1.1.jpg



Появится страничка с перечнем уже имеющихся "Add-ons".

Resize of Add-on-2.jpg

Read more... )
bighunter: (Virginian)
Первую часть можно помотреть здесь:

Небольшое руководство как вставлять картинки в комментарии - Часть 1

Методика довольно простая, набираем вручную вот эти таинственные символы:

‹img src="" / ›

Потом ставим курсор посередине двойных кавычек и вставляем туда скопированный ранее адрес.

Как найти адрес картинки, рассказывается в первой части.

Вот что у нас получится:

‹img src="http://ic.pics.livejournal.com/virginian/432741/402120/402120_original.jpg" / ›

Теперь картинка появится в вашем комментарии или посте вместе с вашим текстом.

Но что делать, если оригинальная картинка очень большая, скажем 3000 x 1500 пикселей.

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

Чтобы решить эту проблему мы можем добавить к адресу картинки команду показывать картину с такими размерами, какими нам нужно:

‹img src="http://ic.pics.livejournal.com/virginian/432741/402120/402120_original.jpg" width="1000" height="500"/ ›

Если кто не знает, width - ширина, height - высота.










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

Указывать height необязательно, достаточно задать width, умный браузер сам пропорционально изменит высоту картинки (и наоборот, можно задать только height).



Естественно, картинки можно не только уменьшать, но и увеличивать относительно первоначальных размеров, но к этому надо подходить с большой осторожностью, увеличение на коэффициент больше чем 1,2 - 1,3 будет приводить к неприятным искажениям.

Но как узнать изначальные размеры картинки?

В FireFox.

Наводим мышку на интересующую нас картинку и щелкаем правой кнопкой.

Появится меню, в котором мы выбираем "View Image Info" и щелкаем левой кнопкой.


tutorial-2

Нужные нам размеры находятся в строчке с "Dimensions".



В Internet Explorer:



Наводим мышку на картинку и щелкаем правой кнопой.

В появившемся меню выбираем Properties и щелкаем левой кнопкой.

tutorial-5



В Chrome есть опция "Inspect Element", но она неудобная и выудить размеры картинки с ходу не всегда получается.

Решается это установкой дополнительного Extension, "View Image Info (properties)".
Если вы не знаете как это сделать, я расскажу подробнее.

После установки этого полезного дополнения мы наводим мышку на картинку и щелкаем правой кнопкой.
В появившемся меню выбираем View Image Info (properties) и щелкаем левой кнопкой. Появится окошко с размерами картинки.

Chrome Vew Info


Небольшое руководство как вставлять картинки в комментарии - Часть 3
bighunter: (Virginian)
Очень часто блоггеры вставляют в свои посты картинки с других сайтов.

Скопировать линк на картинку дело нехитрое, но потом к ней приходится добавлять HTML код.

Continue reading... )
bighunter: (Virginian)
Местонахождение картинки может быть любым, но часто нужно вставить изображение из своей же scrapbook.

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

Ну что же, делаем это на раз-два-три.

Сначала открываем страничку с вашим постом (или любую другую интернет-страничку) в FireFox.

Затем наводим мышку на интересующую нас картинку и щелкаем правой кнопкой.

Появится меню, в котором мы выбираем "View Image Info"


HTML tutorial

Щелкаем, на этот раз уже левой кнопкой, по выбранной команде меню.

Появится окошко с полной информацией о нашей картинке.

tutorial-2


В выделенной строке обозначен адрес нашей картинки.

Подводим мышку к этой выделенной строке и опять щелкаем правой кнопкой.

Появится маленькое меню, которое сразу подсказывает, что нужно щелкнуть "Copy".


tutorial-3

Теперь осталось совсем немного, в окошке вашего нового комментария набираем вот эту строчку:


‹img src="" / ›

Обязательно набираем вручную, не надо копировать из этого учебника.

Потом ставим курсор посередине двойных кавычек и вставляем туда скопированный ранее адрес.

Вот что у нас получится:



‹img src="http://ic.pics.livejournal.com/eho_2013/59946590/855891/855891_900.jpg" / ›

Теперь картинка появится в вашем комментарии вместе с вашим текстом.

Естественно, вставлять таким образом можно картинку с любого сайта.

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

P.S. В русской версии FireFox пункты меню будут выглядеть иначе, но идея та же самая.

P.P.S. Как это делать в Internet Explorer.

Наводим мышку на картинку и щелкаем правой кнопой.

В появившемся меню выбираем Properties и щелкаем левой кнопкой.

tutorial-4

В появившемся окошке выделяем и копируем адрес картинки:

tutorial-5

Если адрес длинный, конец его может быть не виден, тогда начиная с первого символа адреса скользим курсором (не отпуская кнопки!) слева направо и немного вниз, пока не появится jpg

Вставляем адрес картинки в нашу строчку.

‹img src="http://ic.pics.livejournal.com/eho_2013/59946590/855891/855891_900.jpg" / ›




Небольшое руководство как вставлять картинки в комментарии - Часть 2

Небольшое руководство как вставлять картинки в комментарии - Часть 3

Profile

bighunter: (Default)
bighunter

May 2017

S M T W T F S
 1234 56
7 8910111213
141516 17181920
21222324252627
28293031   

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jul. 25th, 2017 10:38 am
Powered by Dreamwidth Studios