uborshizzza (uborshizzza) wrote,
uborshizzza
uborshizzza

Categories:

Часть 5 Пишем в свой блог. 4. Вставка картинок. 1. Ссылки на уже размещенные картинки

Переход по щелчкуВ верхнее тематическое оглавление
 Переход по щелчку Тематическое оглавление (Уголок блоггера)
 Переход по щелчку предыдущее по теме…………………………………  Переход по щелчку следующее по теме
 Переход по щелчку предыдущее по другим темам……………  Переход по щелчку следующее по другим темам




Заведение собственного блога, сайта и электронной почты
Часть 5 Пишем в свой блог. 4. Вставка картинок. 1. Ссылки на уже размещенные картинки



Курс молодого бойца
4. Вставка картинок. Часть 1
3. Вставка картинок в блог

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

В учебнике уже обсуждалось, что каждая картинка, даже самая маленькая, выкладывается в Интернет как отдельная страница и имеет свой URL. Чтобы она стала видна, нужно использовать тег <img> при этом закрывающего тега </img> использовать не надо. В блоге картинку можно вставить в пост, комментарий или профиль.

Самый простой вариант вставки <img scr=”URL картинки”> , при этом картинка обводится рамкой. Ширину этой рамки пожно регулировать параметром border, который задает ее толщину в пикселях. Вариант <img scr=”URL картинки” border=”0”> задает вставку картинки без рамки.

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

Еще один полезный достаточно часто употребляемый параметр - alt. Он задает текст подсказки, которая будет отображена при наведении на картинку курсора. Многие пользователи для уменьшения трафика задают отмену отображений картинок. В этом случае буден виден пустой прямоугольник, при наведении курсора на который будет виден данный текст, который подскажет, стоит ли смотреть эту картинку.

В предыдущем разделе разбиралось, как использовать картинку в качестве ссылки. Часто делают так – дают тегом <a> гиперссылку на картинку, при этом используя ее уменьшенное изображение вместо названия ссылки. В этом случае хорошим тоном будет для уменьшенной картинки в качестве значения параметра alt написать “кликабельно”, чтобы, наведя курсор на картинку, можно было понять, что щелчок по ней покажет эту картинку большого размера. Очень хорошим тоном будет, если в подсказке написать также и размер картинки.

Если кроме картинки присутствует еще и текст, то желательно указать, как текст обтекает картинку. Если этого не сделать, то картинка будет вставлена как просто очень большая буква, некрасиво раздвигая строки. Обтекание можно задать параметром align. Наиболее популярные варианты:
align=”left” – картинка слева, текст обтекает ее справа,
align=”right” – картинка справа, текст обтекает ее слева,

Для, казалось бы, самого простого варианта вставки картинки, когда она «разрезает» текст, приходится вставлять в текст таблицу из одной ячейки, а потом в эту ячейку вставлять картинку.

В принципе визуальные редакторы позволяют в диалоговом режиме вставить в блог картинку, но, по-моему, проще разобраться в параметрах вставки и написать нужное «руками», чем понять, что у тебя спрашивают. Опять же, если один раз вставить в пост картинку, то потом можно будет входить в режим редактирования и копировать через буфер обмена код для вставки картинки как заготовку.

Итак, опишем всю процедуру с самого начала. Пусть нам нужно для иллюстрации найти картинку. Запускаем Яндекс, то есть набираем в адресной строке браузера yandex.ru и нажимаем на Enter:


Щелчком выбираем поиск в картинках:

Вводим слова для поиска и нажимаем кнопку «Найти»:

Щелкаем мышкой в наиболее понравившееся изображение:

И получаем его изображение несколько большего размера:

Тут же имеется указание на оригинальный размер картинки в 500 на 647 точек и «вес» в 60Кб. Если эти параметры не показываются (а систем поиска – огромное количество), то можно щелкнуть правой кнопкой мыши в рисунок и щелчком по строке «Свойства» в появившемся контекстном меню вывести эти параметры.
Теперь нужно узнать и запомнить URL картинки. В использующемся браузере для этого достаточно щелкнуть правой кнопкой мыши в картинку, а в появившемся контекстном меню выбрать строку «Копировать ссылку».

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

Теперь можно выделить и скопировать в буфер обмена содержимое адресной строки (в данном случае - http://www.laverock.ru/4mess/crocodile/1953/1953-03/16.jpg), а потом вставить его из буфера обмена.

Кликабельно, 60Л Итак, самый простой вариант <img scr=”http://www.laverock.ru/4mess/crocodile/1953/1953-03/16.jpg”> , а вариант с маленькой картинкой, обтекаемой текстом справа, с появляющейся подсказкой при наведении на нее курсора и разворачивающейся до полного размера при щелчке, задается как <a href="http://www.laverock.ru/4mess/crocodile/1953/1953-03/16.jpg"><img src="http://www.laverock.ru/4mess/crocodile/1953/1953-03/16.jpg" alt="Кликабельно, 60К" width="100" height="130" border="0" align="left"></a>

Другой вопрос, что параметры width и height не уменьшают саму картинку, а уменьшают размеры ее показа. При этом величина трафика не меняется, а качество картинки при сильном уменьшении резко ухудшается. Совсем хороший способ – для превьюшек, то есть сильно уменьшенных картинок для предварительного показа, делать и размещать отдельные маленькие картинки.


Tags: Уголок блоггера, Учебные материалы
Subscribe

  • 5 на 6

    Установка моей программы для складывание паззлов http://1mgmu.com/paz-cat1/setup.exe После запуска программы нужно в строку для складывания…

  • 7 на 4

    Установка моей программы для складывание паззлов http://1mgmu.com/paz-cat1/setup.exe После запуска программы нужно в строку для складывания…

  • 6 на 4

    Установка моей программы для складывание паззлов http://1mgmu.com/paz-cat1/setup.exe После запуска программы нужно в строку для складывания…

Buy for 60 tokens
Buy promo for minimal price.
  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 6 comments