Excel для Office 365 Word для Office 365 Outlook для Office 365 Excel 2019 Word 2019 Outlook 2019 OneNote 2016 Publisher 2019 Excel 2016 Word 2016 Outlook 2016 OneNote 2013 Publisher 2016 Excel 2013 Word 2013 Outlook 2013 Publisher 2013 Excel 2010 Word 2010 Outlook 2010 OneNote 2010 Publisher 2010 Excel 2007 Word 2007 Outlook 2007 PowerPoint 2007 Word Online Excel Starter 2010 Word Starter 2010 Меньше

Рисунки делают документы интереснее и понятнее.

Совет: Чтобы добавить рисунки в Word Online, сперва переключитесь в режим правки. Для этого нажмите кнопку Редактировать документ и выберите пункт Изменить в Word Online .

Выполните одно из следующих действий:

Совет: Вы также можете вставить рисунок, скопировав (CTRL+C) и вставив (CTRL+V) его.

При вставке рисунка Word Online помещает его в документ и выводит ленту Работа с рисунками с вкладкой Формат .

Совет: Чтобы открыть ленту Работа с рисунками , когда вы находитесь в режиме правки, выберите рисунок.

Примечание: Если вы используете Word 2013 или Word 2016 для Windows, возможностей настройки рисунка гораздо больше. Вы можете его сжимать, обрезать, удалять его фон, применять к нему художественные эффекты, изменять его расположение на странице, помещать его перед текстом или за ним, усекать до определенного размера, а также изменять способ обтекания текстом. Для этого нажмите кнопку Открыть в Word .

Вы можете легко вставлять рисунки в документ независимо от того, находятся ли они на вашем компьютере или в Интернете.

Вставка изображения с компьютера

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

Дополнительные сведения о добавлении рисунков, рисунков и других графических элементов в документы см. в следующих статьях:

Совет _з0з_ постоянно обновляется с помощью нового содержимого, включая инструкции, видео и учебные курсы. Если в нижней части средства просмотра справки указано в автономном режиме и вы подключены к Интернету, щелкните в автономном режиме и выберите Показать содержимое из _з1з_ .

Первыми типами иллюстраций в программе Microsoft Word, которые мы рассмотрим, будут Рисунок (Picture), Картинка (Clip Art) и Снимок экрана (Screenshot). Их стоит объединить в одну группу по той причине, что их свойства очень близки друг к другу, и поэтому текстовый процессор Microsoft Word предлагает пользователю одинаковый инструментарий для работы с данными типами иллюстрации.

Однако несмотря на то, что редактирование всех трех типов иллюстраций идентично, процесс вставки рисунка, картинки и снимка экрана заметно отличается друг от друга. Так что прежде чем перейти к редактированию иллюстраций этих типов, давайте разберемся со способами вставки картинок, рисунков и снимков экрана в приложении Microsoft Word.

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

Чтобы вставить в документ рисунок, необходимо нажать кнопку Рисунок (Picture) в группе элементов управления Иллюстрации (Illustrations) на вкладке Вставка (Insert) ленты управления. Откроется диалоговое окно Вставка рисунка (Insert Picture), в котором необходимо выбрать файл для вставки. По умолчанию диалоговое окно отображает папку Мои рисунки (My pictures) (для операционной системы Windows Vista и более ранних версий) или библиотеку Изображения (Pictures) (для операционной системы Windows 7).

Чтобы вставить файл, достаточно выполнить один из предложенных вариантов действий.

• Выбрать нужный файл, щелкнув по нему левой кнопкой мыши, и нажать кнопку Вставить (Insert).
• Вставить файл, дважды щелкнув по нему левой кнопкой мыши.
• В поле ввода Имя файла: (File name:) ввести название нужного документа, а затем нажать кнопку Вставить (Insert).

По мере ввода названия файла поле ввода Имя файла : (File name:) будет превращаться в раскрывающийся список с возможными вариантами названия файла. Можно не вводить имя файла до конца, а клавишами и ↓ выбрать нужный файл из предложенных.

Нажатие кнопки Вставить (Insert) можно заменить нажатием клавиши Enter. Если вы хотите ускорить поиск изображения в папке, содержащей множество графических файлов, можно выбрать в раскрывающемся списке Все рисунки (All Pictures) требуемый формат файла.

После того как вы выберете графический файл и вставите его в текст, диалоговое окно Вставка рисунка (Insert Picture) закроется, и вы увидите вставленный рисунок на том месте, на котором был установлен текстовый курсор. Обратите внимание на то, что рисунок вставляется в своем реальном размере. Размер рисунка измеряется в сантиметрах.

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

Кроме появившегося рисунка откроется дополнительная вкладка ленты управления Работа с рисунками (Picture Tools) (рис. 7.2), а в ней вкладка Формат (Format) с инструментами исключительно для работы с рисунками. Для того чтобы скрыть эту вкладку, достаточно перенести текстовый курсор в любое другое место.

Дополнительная группа вкладок Работа с рисунками (Picture Tools) появляется только тогда, когда осуществляется редактирование рисунка или картинки. Чтобы вкладка появилась, необходимо щелкнуть мышью по любому рисунку или картинке в документе.

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

Также программа Microsoft Word поддерживает вставку изображений из буфера обмена операционной системы. Так что, скопировав изображение в буфер обмена в любой другой программе, вы сможете вставить его в открытый документ с помощью обычной функции вставки.

Картинка, как правило, представляет собой векторное изображение, которое можно применять как иллюстрацию (рис. 7.3). Аналогично кнопке Рисунок (Picture) кнопка Картинка (Clip Art) расположена в группе элементов управления Иллюстрации (Illustrations) на вкладке Вставка (Insert) ленты управления. Нажав эту кнопку, пользователь увидит панель Картинка (Clip Art), появившуюся в правой части рабочего окна программы.

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

При желании можно изменить положение панели Картинка (Clip Art). Для этого необходимо нажать кнопку в заголовке панели и выбрать необходимое действие. Для изменения местоположения панели необходимо выбрать Переместить (Move). После этого указатель мыши изменит свой внешний вид, и можно будет перемещать панель Картинка (Clip Art) по рабочему пространству. Установив панель в нужное место, щелкните левой кнопкой мыши для закрепления положения.

Панель Картинка (Clip Art) построена из трех блоков. Первый блок состоит из поля ввода Искать : (Search for:), кнопки Начать (Go) и группы элементов управления Искать объекты (Results should be). С помощью данного блока можно осуществлять поиск по библиотеке картинок. Второй блок - поле с полосой прокрутки, предназначенное для отображения подходящих под поисковые запросы картинок. Последний блок - две гиперссылки, упрощающие работу с панелью Картинка (Clip Art).

По умолчанию в блоке с результатами не отображается ни одной картинки. Библиотека картинок Microsoft Office состоит из множества звуков и изображений, для каждого из которых предусмотрены ключевые слова. Чтобы использовать картинки из библиотеки в документе, необходимо найти их в библиотеке. Для каждой из картинок, хранящихся в библиотеке, предусмотрено одно или несколько ключевых слов.

Ключевые слова - это термины, определяющие данное изображение. Соответственно для поиска иллюстрации, подходящей по смыслу, нужно ввести ключевое слово в поле ввода Искать : (Search for:) в верхней части панели Картинка (Clip Art), затем нажать кнопку Начать (Go), для того чтобы программа Microsoft Word начала подбор подходящих вариантов.

Нижний блок, содержащий две гиперссылки, может помочь разобраться в использовании панели Картинка (Clip Art). Ссылка Дополнительно на сайте Office.com (Find more at Office.com) ведет на страничку сайта Office.com, содержащую дополнительные картинки, а ссылка Советы по поиску картинок (Hints for finding images) откроет диалоговое окно справки программы Microsoft Word.

Как уже упоминалось выше, в качестве картинки могут выступать не только изображения, но и звуковые и видеофайлы. Если вам необходимо произвести поиск лишь среди определенного типа файлов мультимедиа, можно ограничить поиск по типу объектов с помощью раскрывающегося списка Искать объекты : (Results should be). Для этого необходимо щелкнуть мышью по кнопке и напротив ненужных типов мультимедиафайлов сбросить флажки. Кроме того, можно увеличить количество выводящихся изображений за счет установки флажка Включить контент сайта Office Online (Include Office.com content). После установки этого флажка поиск будет производиться не только по библиотеке компьютера, но и использовать ресурсы сервера компании Microsoft.

Для возможности поиска файлов мультимедиа на сервере Microsoft Office Online компьютер должен быть подключен к сети Интернет.

Давайте разберем этот момент на примере. В качестве примера мы возьмем наш новогодний текст. Для украшения текста нам потребуется какая-либо тематическая иллюстрация. Поэтому мы введем в поле ввода Искать : (Search for:) поисковый запрос «Новый год». В поле ввода с полосой прокрутки появится изображение Деда Мороза (рис. 7.4). Таким образом, варьируя запросы, можно находить в библиотеке различные картинки.

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

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

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

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

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

Чтобы вставить снимок любого окна, запущенного в операционной системе, в качестве иллюстрации, необходимо щелкнуть мышью по кнопке Снимок экрана Иллюстрации (Illustrations) на вкладке Вставка (Insert) ленты управления. Откроется контекстное меню, в котором будет поле с полосой прокрутки Доступные окна (Available Windows).

Для удобства работы с контекстным меню кнопки Снимок экрана (Screenshot) можно увеличить его в размере. Для этого необходимо установить указатель мыши в правый нижний угол рамки контекстного меню так, чтобы он изменил свой вид, затем, нажав и не отпуская левую кнопку мыши, движениями мыши установить нужный размер контекстного меню. После этого для закрепления размеров меню необходимо отпустить левую кнопку мыши.

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

Другая возможность кнопки Снимок экрана (Screenshot) - создание вырезки экрана (рис. 7.5), любой его части, причем размеры и место на экране пользователь может задавать сам. Эта функция удобна для иллюстрирования небольших участков интерфейса программ.

Чтобы вставить вырезку экрана в документ программы Microsoft Word, необходимо щелкнуть мышью по кнопке Снимок экрана (Screenshot) группы элементов управления Иллюстрации (Illustrations) на вкладке Вставка (Insert) ленты управления.

Если вы работаете с документом формата предыдущего поколения (формат.doc), функция вырезки экрана будет недоступна. Для активации этой функции необходимо использовать новый формат.docx.

Затем в открывшемся контекстном меню необходимо выбрать пункт Вырезка экрана (Screencut). Окно текстового процессора Microsoft Word свернется в панель задач. Это делается для того, чтобы окно программы не помешало созданию вырезки экрана. Вслед за этим изображение на экране будет осветлено, а указатель мыши изменит свой внешний вид. Теперь экран готов для создания вырезки. Нам осталось лишь установить указатель в ту позицию на экране, которая станет одним из углов вырезки, затем, нажав и не отпуская левую кнопку мыши, определить размеры вырезки. Пространство вырезки экрана не будет осветлено.

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

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

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

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

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

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

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

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

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

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

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

  

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

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

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

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

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

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

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

  Здравствуйте уважаемые читатели блога! В этой статье вы узнаете все о том как вставить изображение на html страницу . У вас есть несколько изображений, которые вы хотите поместить на свою страничку или вы хотите поместить на свой сайт логотип? Все это легко. Прочитав эту статью, вы сможете без каких-либо трудностей вставлять картинки на свои html страницы. Для этого мы подробно поговорим о теге и его атрибутах, кратко рассмотрим форматы графических файлов, таких как gif, jpeg и png, а также посмотрим новые возможности HTML5, которые упрощают вставку видео и аудио на сайт.

  Из-за того что графические данные и текст html невозможно объединить в одном файле, для их отображения на сайте применяется другой подход, нежели с другими элементами html-страниц. Прежде всего, графические изображения, да и другие мультимедийные данные хранятся в отдельных файлах. А для их внедрения в web-страницу используют специальные теги, которые содержат ссылки на эти отдельные файлы. В частности таким тегом является тег . Встретив такой тег с адресом, браузер сначала запрашивает у Web-сервера соответствующий файл с изображением, аудио- или видеороликом, а только затем отображает его на Web-странице.

  Все графические изображения и вообще любые данные, которые хранятся в отдельных от web-страницы файлах называются внедренными элементами страницы.

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

  Форматы графических изображений.

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

  1. Формат JPEG (Joint Photographic Experts Group ). Довольно популярный формат, применяемый для хранения изображений. Поддерживает 24-битовый цвет и сохраняет все полутона в фотографиях неизменными. Но jpeg не поддерживает прозрачность и искажает мелкие детали и текст в изображениях. JPEG используется в основном для хранения фотографий. Файлы этого формата имеют расширения jpg, jpe, jpeg.

  2. Формат GIF (Graphics Interchange Format ). Главное достоинство этого формата возможность хранить сразу несколько изображений в одном файле. Это позволяет создавать целый анимированные ролики. Во-вторых он поддерживает прозрачность. Главный недостаток это поддержка всего лишь 256-цветов, что никуда не годится для хранения фотографий. GIF в основном используется для хранения логотипов, баннеров, изображения с прозрачными участками и содержащих текст. Файлы этого формата имеют расширение gif.

  3. Формат PNG (Portable Network Graphics ). Это формат был разработан как замена устаревшему GIF, а также, в некоторой степени, JPEG. Поддерживает прозрачность, но не позволяет создавать анимацию. Данный формат имеет расширение png.

  При создании сайтов обычно используют изображения в формате JPEG или GIF, но иногда используют PNG. Главное разобраться в каких случаях какой формат лучше использовать. Если кратко, то:

  JPEG лучше всего использовать для хранения фотографий или полутоновых картинок не содержащих текста;

  • GIF используется в основном для анимации;
  • PNG — формат для всего остального (иконки, кнопки и др.).
  Вставка картинок в html страницы

  Итак, как все таки вставить изображение на веб-страницу? Вставить изображение позволяет одинарный тег . Браузер помещает изображение в том месте веб-страницы, где встретит тег .

  Код вставки картинки в html страницу имеет такой вид:

  

  Данный html-код поместит на веб-страницу изображение, хранящееся в файле image.jpg, который находится в одной и той же папке с веб-страницей. Как вы могли заметить адрес картинки указывается в атрибуте src . Что такое я уже рассказывал. Так вот, атрибут src обязательный атрибут, который служит для указания адреса файла с изображением. Без атрибута src тег img не имеет смысла .

  Приведу еще несколько примеров указания адреса файла с изображением:

  — этот html-код вставит на страницу картинку с названием image.jpg, которая хранится в папке images, расположенной в корне веб-сайта.

  В атрибуте src можно указывать не только относительные ссылки на изображения. Так как изображения хранятся в сети вместе с html-страницами, поэтому у каждого файла с изображением есть свой собственный url-адрес. Поэтому в атрибут src можно вставлять url-адрес изображения. Например:

  

  Данный код вставит на страницу изображение с сайта mysite.ru. URL-aдpec обычно применяется, если вы указываете на изображение, находящееся на другом сайте. Для изображений хранящихся на вашем сайте лучше использовать относительные ссылки.

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

  — абзац:

  

  Давайте попрактикуемся и вставим на нашу страницу из предыдущих статей об html изображение. Я создам рядом с html-файлом своей страницы папку «images» и помещу туда файл с картинкой «bmw.jpg», который выглядит так:

  Тогда html-код страницы со вставленной картинкой будет таким:

  
  
  
  
  Сайт об автомобилях.
  
  
  Сайт об автомобилях.
  

  

  
  

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

  
  

  Научным языком автомобиль это:

  
  

  Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.

  
  
  Классификация автомобилей
  

  Автомобили бывают следующих типов:

  
  
  
  
  • Легковой;
  
  
  • Грузовой;
  
  
  • Внедорожник;
  
  
  • Багги;
  
  
  • Пикап;
  
  
  • Спортивный;
  
  
  • Гоночный.
  
  
  
  

  Все права защищены. 2010 год.
  Сайт об автомобилях.

  
  
  

  И смотрим результат отображения в браузере:

  

  Как мы видим ничего сложного в размещении изображений на веб-страницах нет. Далее рассмотрим несколько других важных атрибутов тега .

  Атрибут alt — как запасной вариант

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

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

  

  И примерно так это выглядит:

  

  Задаем размеры изображению

  Осталось еще пару атрибутов тега img, о которых вам следует знать. Это пара атрибутов width и height . Вы можете использовать их, чтобы указать размеры изображения:

  width="300" height="200" >

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

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

  Вставляем видео и аудио с помощью HTML 5

  В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.

  Для вставки аудио HTML5 предоставляет парный тег . Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:

  Тег создает на странице блочный элемент. По умолчанию браузер не будет воспроизводит аудиоролик. Что бы он это сделал, в теге необходимо указать особый атрибут autoplay . Особый, потому что он не имеет значения. Достаточно одного присутствия этого атрибута в теге, чтобы он начал действовать.

  По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге поставить атрибут без значения controls , браузер выведет в том месте веб-страницы, где проставлен тег , элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:

  Для вставки видеоролика на веб-страницу предназначен парный тег . С этим тегом все тоже самое, что и с тегом — адрес видеофайла указывается с помощью атрибута src, а с помощью атрибутов autoplay и controls можно запустить автовоспроизведение ролика и вывести элементы управления воспроизведения видеоролика.

  Больше рассказывать о вставке картинок и мультимедиа на html страницы особо нечего. Надеюсь на вопрос «Как вставить изображение в html страницу?» я вам ответил. поэтому просто подведу итоги:

  для вставки изображений на html страницу пользуемся одиночным тегом и указываем адрес файла с картинкой в атрибуте src : ;

  • с помощью атрибута alt тега можно задавать текст замены на случай если изображение не загрузится;
  • с помощью атрибутов width и height можно задавать размеры изображения на веб-странице;
  • для вставки аудио и видео в html5 есть парные теги и соответственно.

  Если что не понятно, спрашивайте в комментариях и не забудьте подписаться на обновления моего блога . До встречи в следующих постах!

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

  Предварительная подготовка

  Для начала нужно открыть в фотошопе основное изображение, в которое требуется вставить другое. Это очень просто, если даже тут есть затруднение, то как это нужно делать.

  Затем аналогичным образом откройте вторую картинку.

  

  Таким образом, открыли два изображения в программе. Они должны находиться на разных . Задача перенести одно из них в другое. То есть в своем примере, я хочу поместить логотип сериала к портрету персонажа, чтобы получилось так:

  

  Способ №1: перетаскивание картинки из вкладки

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

  По умолчанию фотошоп показывает панель с вкладками в одну строку:

  

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

  • наведите курсор мыши на вкладку с логотипом;
  • нажмите левой клавишей мыши и, не отпуская ее, двигаете мышь вниз;

  

  • Вы увидите, что вкладка примет форму окна, как окно у ОС Windows, — значит можно отпустить клавишу мыши.

  В результате поверх основной картинки должно красоваться окно с другой картинкой, вот так:

  

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

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

  Теперь нужно соединить два изображения!

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

  Чтобы картинка изменялась в пропорциональных размерах, удерживайте нажатой клавишу Shift .

  Чтобы вновь вызвать редактируемую рамочку, нажмите Ctrl+T .

  Способ №4: перетаскивание фото из папки OC Windows

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

  Этот способ подходит если картинка, которую нужно вставить у вас сохранена где-то на компьютере.

  Откройте папку с картинкой и разместите окно поудобней.

  

  После этого изображение будет добавлено как смарт-объект, то есть повторится то, о чем я .

  Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!