Вставить другой рисунок в компьютере. Как вставить изображение в Word. Вставка фотографии с камеры

За вставку картинок в HTML-документ отвечает тег и его атрибуты, главным из которых можно считать src , задающий адрес изображения. Он является обязательным, так как если не указать, где взять рисунок, браузер не сможет узнать, что именно добавлять на страницу.

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

Раньше у тега был ещё один обязательный атрибут - alt , но с приходом HTML 5 он был переведён в разряд желательных. alt устанавливает текст, который пользователь увидит вместо картинки, если она вдруг не загрузится. Этот атрибут рекомендуют добавлять и некоторые оптимизаторы, потому как считается, что это положительно сказывается на продвижении в поисковиках.

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

Допустим, нам требуется добавить на страницу изображение image.png с альтернативным текстом «Просто картинка», шириной 420 и длиной 280 пикселей. Код в таком случае будет следующим:

Навигационная карта

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

Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:

• - контейнер, внутри которого описывается карта изображения.
• - тег внутри , описывающий одну область картинки. На сколько активных областей планируется разделить изображение, столько элементов и придётся поставить. Связка - работает точно так же, как связки
  -
  1. и
     -
     • , создающие списки.
     • shape - атрибут тега , задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.
     • cords - определяющий координаты области атрибут. Также принадлежит тегу . Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника - координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.
     • usemap - атрибут тега img , который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере описана карта именно этого рисунка.

     Пример карты изображения

     Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg . Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.

     1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:

     

     2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).

     3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:

     4. С помощью тегов area определяем активные области:

     5. Закрываем карту:

     Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:

     

     Несмотря на то, что в качестве примера был рассмотрен самый простой случай, который только можно придумать, он наглядно демонстрирует принцип создания навигационных карт. Дальше - дело техники и определения координат, с точки зрения HTML ничего не усложняется.

     Август 24, 2014 admin

     Как вставить рисунок, картинку, любое изображение в Word

     При создании документов Microsoft Office Word очень часто приходится вставлять в текст всевозможные рисунки.

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

     Также вы можете вставить рисунок простым копированием. Откройте документ, в который необходимо вставить рисунок, перейдите в папку, где расположен рисунок или картинка и скопируйте ее, используя контекстное меню или просто нажав Ctrl+C. После этого вернитесь в документ и произведите вставку, нажав сочетание клавиш Ctrl+V. Рисунок также будет расположен в документе как «в тексте».

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

     

     Как вы могли заметить, размер документа со вставленными рисунками значительно увеличился. Чтобы уменьшить размер документа вы можете сжать рисунки. Для этого перейдите в форматирование одного из рисунков документа, дважды кликнув по нему. Перейдите на вкладку «Рисунок » и нажмите кнопку «Сжать ». В параметрах сжатия установите желаемую степень сжатия рисунка: для печати или для Интернета и экрана (наихудшее качество картинки). Если в документе необходимо сжать все рисунки, то установите переключатель в положение «ко всем рисункам документа ». Также убедитесь, что установлены галочки «сжать рисунок » и «удалить обрезанные области рисунков». Последний параметр удаляет все невидимые области картинок, к которым был применен инструмент «Обрезка » панели инструментов Word.

     

     

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

     Для этого при вставке рисунка через панель инструментов на этапе выбора рисунка нажмите на стрелочку рядом с кнопкой «Вставить » и выберете «Связать с файлом ». Размер документа при этом практически не изменится, хотя вы могли добавить достаточно объемный рисунок в документ. Чтобы документ был читаем на других компьютерах, и не возникло проблем если файлы рисунков должны располагаться в той же папке где и сам документ и отправка документа другим пользователям, например по электронной почте, должна осуществляться со всеми файлами изображений.

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

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

     Как правильно вставить рисунок в Word
     Более правильным способом является использование специального инструмента «Рисунок» из группы основного меню «Вставка». Нажмите на «Рисунок», в появившемся окне выберите изображение на диске компьютера и нажмите кнопку «Вставить». Изображение будет добавлено в документ и откроется набор инструментов для его форматирования и настройки.

     

     
     Основные возможности форматирования
     Рассмотрим самые полезные и часто используемые средства настройки и оформления добавленного изображения.
     Если добавляемое изображение нуждается в более глубоком редактировании, то его лучше всего провести в специально предназначенных для этого программах, к примеру Photoshop, а уже после этого вставлять в Word.

     Отметьте мышкой в документе место, где должна размещаться картинка. Если вы используете Word 2003, в меню «Вставка» наведите курсор на раздел «Рисунок» и выберите из выпадающего списка пункт «Картинка». В строку «Искать» введите название темы, для которой хотите найти иллюстрацию, например, «Природа», «Автомобиль», «Путешествие» и т.д.

     Раскройте список «Просматривать» и отметьте флажками пункты «Коллекции Microsoft» и «Веб-коллекции». В списке «Искать объекты» укажите, какие именно файлы вас интересуют: картинки (нарисованные объекты), фотографии, фильмы, звуки. Вам на выбор будут предложены файлы на заданную тему. Щелкните по понравившемуся изображению.

     Если у вас установлен Word более поздней версии, зайдите во вкладку «Вставка» и в группе «Иллюстрации» щелкните по иконке «Картинка». Процедура поиска нужного файла практиxески не отличается от разработанной для Word 2003.

     После вставки вы можете изменять размеры рисунка. Для этого зажмите мышкой маркеры изменения размера на сторонах или углах рисунка и перемещайте их к центру или от центра изображения.

     Как вставить авторское изображение

     Чтобы вставить файл с вашего носителя, в разделе «Картинки» отметьте пункт «Из файла» и укажите путь к папке, в которой находится изображение. Чтобы удобнее было искать нужный файл, раскройте список «Представления» на панели инструментов и отметьте пункт «Эскизы». Можно поступить иначе: в одном окне откройте вордовский файл, в другом - папку с нужным изображением, и мышкой перетащите картинку.

     Как вставить картинку из интернета

     Щелкните по понравившемуся изображению правой кнопкой мыши и в выпадающем меню отметьте команду «Копировать». Затем в текстовом файле поставьте курсор туда, где должна быть картинка, и нажмите Ctrl+V либо используйте команду «Вставить» из выпадающего меню.

     Вставка рисунков

     Поставьте курсор примерно в то место, где должен быть первый рисунок (в первую или вторую строку левой колонки основного текста).

     Выберите команду ВставкаРисунокИз файла .

     В диалоговом окне вставки рисунка (рис. 1) перейдите в папку Общие документыПрактикум по ИТПрактические работы по WordРабота 4 и выберите файл REKL1.GIF . Перед тем, как нажать кнопку Добавить , убедитесь, что в окне включен флажок Поверх текста (рис. 4.1). В режиме «Внутри текста» рисунку нельзя будет назначить обтекание текстом.

     Рис. 4.1. Диалоговое окно вставки рисунка из файла

     Посмотрите, как выглядит документ. Очевидно, нужно менять формат рисунка.

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

     Теперь задайте обтекание рисунка текстом. Нажмите правую кнопку мыши на рисунке. Из объектного (контекстного) меню рисунка выберите команду Формат рисунка , затем закладку Обтекание и вариант По контуру .

     У рисунка справа и снизу есть лишние белые области. Их надо обрезать. Включите панель инструментов Настройка изображения (команда ВидПанели инструментовНастройка изображения ). Выделите рисунок. На панели Настройка изображения (рис. 1.13) выберите инструмент Обрезка . Мышью перетащите маркеры на серединах правой и нижней сторон рисунка так, чтобы удалить белые поля.

     

     Рис. 1.13. Панель инструментов Настройка изображения

     Переместите рисунок так, чтобы над ним было две полных строки и немного влево так, чтобы рисунок выступал за текст.

     Теперь сделайте так, чтобы расстояние от рисунка до текста было одинаковым: на закладке Обтекание задайте Расстояние от текста слева / справа по 0,1 см .

     В Word рисунки, вставленные поверх текста, автоматические привязываются к одному из абзацев около позиции вставки. Когда рисунок выделен, его точка привязки отображается в виде якоря (если включен показ непечатаемых символов).

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

     Чтобы рисунок не перемещался вместе с текстом, снимите у него флажок командой объектного меню Формат рисункаПоложениеПеремешать вместе с текстом .

     На той же закладке диалогового окна (Положение ) установите привязку рисунка не к абзацам текста, а к полям страницы: для свойств Положение по вертикали/по горизонтали выберите вариант «От поля» (рис. 1.14).

     

     Рис. 1.14. Параметры положения рисунка, жестко закрепляющие его на странице

     Оформление первого рисунка завершено. Для вставки второго рисунка выполните следующие действия:

     Добавьте в документ рисунок из файла REKL2.GIF .

     Уменьшите размер рисунка.

     Переместите второй рисунок примерно в то место, где он должен быть.

     Обрежьте у рисунка белые области.

     Нужно, чтобы размеры рисунков были одинаковы. Как это сделать? Выделите первый рисунок и выберите команду Формат рисункаРазмер . Запишите значения высоты и ширины первого рисунка. Теперь выделите второй рисунок и установите те же самые значения высоты и ширины.

     Назначьте рисунку Обтекание текстом по контуру .

     На закладке Обтекание установите Расстояние от текста слева и справа по 0,1 см .

     Отключите у рисунка флажок перемещения вместе с текстом и на закладке Положение установите привязку «Положение по вертикали/по горизонтали» типа «От поля» (рис. 1.14).

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

     Аналогичным образом вставьте в документ два оставшихся рисунка.

     Добавление надписей

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

     Ниже подробно описано, как сделать надпись в центральной части рекламного листа.

     Если панель инструментов Рисование отсутствует, включите ее (команда ВидПанели инструментов ). Выберите инструмент Надпись (рис. 1.15) и нарисуйте прямоугольник слева от последнего рисунка. Размеры надписи можно будет изменить в любой момент. Назначьте надписи параметры обтекания текстом так же, как делали это для рисунков.

     
     

     Рис. 1.15. Кнопка Надпись на панели инструментов Рисование

     Внутри надписи напечатайте текст шрифтом 11 пт, полужирный, курсив. Выровняйте абзац по ширине.

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

     С помощью объектного меню надписи вызовите окно свойств (щелкните правой кнопкой на рамке надписи и выберите команду Формат надписи ). В окне свойств на закладке Цвета и линии установите серый цвет заливки и увеличьте толщину линии обрамления до 1,5 пт .

     Теперь сделайте вторую надпись в нижней части рекламного листа. Слова «Предложения по сотрудничеству» внутрь надписи можете перенести из нижней части документа с помощью буфера обмена (командами ПравкаВырезать / ПравкаВставить ). Выровняйте абзац внутри надписи по центру.

     Завершение оформления

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