Совет 1: Как вставить картинку в письмо

Иногда когда вы пишите электронное письмо, возникает необходимость проиллюстрировать текст картинкой, диаграммой, таблицей. И сделать это нужно непосредственно в теле письма, а не добавить нужные файлы вложением. Ещё несколько лет назад решить такую задачу было под силу только программистам или тем, кто мог безошибочно повторить их инструкции. Теперь вставить картинку в письмо может каждый.
Как вставить картинку в письмо
Вам понадобится
  • Почтовый клиент
  • Компьютер или ноутбук
Инструкция
1
Почтовая программа Mozilla Thunderbird.

Создаем новое сообщение. В меню сообщения сверху выбираем вкладку «Настройки». В ней находим подменю «Формат». Выбираем пункт «Форматированный текст (HTML)».

В графическом меню, расположенном под графой «Тема», нажимаем на пиктограмму с изображением картинки.

В выпадающем меню выбираем «Изображение».

Осталось только выбрать файл, который вы хотите вставить в текст письма, и нажать на ОК.
2
Почтовая программа The Bat!

Создаем новое сообщение.

Снизу находим кнопку «Только текст» и нажимаем на неё.

В выпадающем меню выбираем «Только HTML» или «HTML/Простой текст».

В графическом меню сверху ищем пиктограмму «Картинка».

Находим нужный вам файл и вставляем в тело письма.
3
Почтовая программа Microsoft Outlook.

Создаем новое сообщение.

В меню письма сверху выбираем вкладку «Формат».

Выбираем пункт «HTML».

В графическом меню нажимаем на пиктограмму с изображением картинки и надписью «Рисунок».

Выбираем нужный файл и нажимаем на ОК.

В Microsoft Outlook 2007 для того, чтобы вставить картинку, нужно будет выбрать пункт в верхнем меню «Вставка». В выпадающем меню «Рисунок» выбрать «Картинка», найти и вставить файл.
4
Почтовый ящик Gmail.

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

Открываем почту Gmail, создаем письмо.

В правом верхнем углу нажимаем ссылку «Настройки».

В открывшемся меню выбираем последний пункт «Экспериментальные функции».

В длинном списке предложенных функций находим «Вставка картинок» и выбираем «Включить».

Нажимаем на «Сохранить изменения».

В шаблоне письма слева находим «Расширенное форматирование». Выбираем.

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

Теперь осталось только нажать на пиктограмму «Вставить изображение», выбрать файл и отправить письмо с картинкой, вставленной в тело самого письма.
Полезный совет
Вы можете выбрать не только фото или картинку, находящуюся на вашем компьютере, но и указать путь к графическому файлу, размещенному в сети.
Источники:
  • Gmail
  • как вставлять рисунки в сообщение
  • MS Outlook 2007-2010

Совет 2: Как вставить картинку в html таблицу

Язык html не совершенен и имеет ряд существенных недостатков. Для того чтобы привязать картинку к определенному месту страницы, лучше для этого вставить ее при помощи таблицы. В этом случае изображение будет считаться фоном и поверх его можно поместить текст.
Как вставить картинку в html таблицу
Инструкция
1
Первоначально необходимо создать таблицу, если ее еще нет. Это действие совершается в атрибуте <body>. Для этого используются теги (закрывающий тег обязателен):
• <table> - таблица;
• <tr> - строка;
• <td> - колонка.

Основные дополнительные атрибуты:
• Border – граница;
• Align – выравнивание по горизонтали;
• Valign – выравнивание по вертикали;
• Bordercolor – цвет рамки;
• Width – ширина;
• Height – высота.

Синтаксис таблицы 2X2 без рамки и левосторонним/правосторонним выравниванием содержимого:
<table border= "0">
<tr align="left">
   <td>Содержимое 1-й ячейки</td>
   <td> Содержимое 2-й ячейки </td> </tr>
<tr align="right">
   <td> Содержимое 3-й ячейки </td>
    <td> Содержимое 4-й ячейки </td> </tr>
</table>
2
Картинку нужно прописывать после тега <td>. Если вставить изображение в первую ячейку таблицы, представленной выше, то получится:
<table border= "0">
<tr align="left">
   <td><img src="адрес картинки в формате gif, png, jpeg"></td>
   <td> Содержимое 2-й ячейки </td> </tr>
<tr align="right">
   <td> Содержимое 3-й ячейки </td>
    <td> Содержимое 4-й ячейки </td> </tr>
</table>

Дополнительные атрибуты:
• Width – ширина;
• Height – высота;
• Alt - альтернативный текст, который будет отображаться у пользователя, если у него отключена функция просмотра картинок;
• Align – выравнивание по горизонтали;
• Valign – выравнивание по вертикали;
• Title – подпись к изображению.
3
Использовать изображение можно в качестве ссылки. Для этого его достаточно облачить в соответствующий тег: <a href="страница, на которую будет осуществляться переход"><img src="имя файла.png"></a>
В контексте таблицы это будет выглядеть так:
<table border= "0">
<tr align="left">
   <td><a href="stranitsa.html"><img src="kartinka.png"></a></td>
   <td> Содержимое 2-й ячейки </td> </tr>
<tr align="right">
   <td> Содержимое 3-й ячейки </td>
   <td> Содержимое 4-й ячейки </td> </tr>
</table>
4
Дополнительные возможности изображений.

1. Смена картинки на цвет при наведении на нее мышью и после смены местоположения курсора:
onMouseOver="this.style.background='#номер цвета'" onMouseOut="this.style.background='#номер цвета'"

2. Смена картинки на другое изображение при наведении мышью:
onmouseover="this.src='images/1.gif'" onmouseout="this.src='images/2.gif'"

3. Вставка вращающейся карусели из картинок в ячейку таблицы (значения можно менять):

<td align="left">
<BODY onload="Carousel()" background=>
<script type="text/javascript">
// 7 variables to control behavior
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // true or false
var Car_Border_Color="000000"; Border="0"
var Car_Speed=5;
var Car_Direction=true; // true or false
var Car_NoOfSides=6; // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"images/1.gif","",
"images/2.gif","",
"images/3.gif","",
"images/4.gif","",
"images/5.gif","",
"images/6.gif",""

// NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel(){
if(document.getElementById){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)}

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script><div id="Carousel" style="position:relative; width:130; height:21">

</td>
Обратите внимание
Это урок о том, как вставить картинку в HTML, как её оформить, как сделать обтекание картинки текстом и т.д. Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег «IMG» и его атрибуты весьма пригодится в современном Интернете. Но, главное тут — чувство меры! Переизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки.
Полезный совет
Если эта область будет не соответствовать реальному размеру картинки, которую вы хотите вставить, то рисунок будет соответственно растянут или сужен, до заданного в html теге Img размера. Тем не менее, не следует использовать это способ, скажем, для уменьшения размера вставляемого в Html документ рисунка.  Лучше предварительно изменить размер картинки в графическом редакторе, а уже затем вставлять картинки в Html документ через любой удобный вам Html редактор кода.
Источники:
  • как вставить картинку без фона html
Совет полезен?
Поиск
Добавить комментарий к статье
Осталось символов: 500