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

При создании или редактировании текстов на сайте зачастую возникает необходимость вставить какое-либо изображение в строку. Это позволяет придать статье более привлекательный вид и информативность. На сайтах, работающих на системах управления контентом (CMS), имеется визуальный редактор текстов, с помощью которого можно добавлять на страницы своего ресурса как текстовую, так и графическую информацию.
Вам понадобится
  • - доступ к панели управления сайтом;
  • - визуальный редактор;
  • - редактор TinyMice.
Инструкция
1
Зайдите в административную панель управления сайтом и выберите страницу, которую собираетесь редактировать. В некоторых CMS достаточно кликнуть на названии страницы, чтобы открылся визуальный редактор, в иных случаях нужно отметить «галочкой» выбранную страницу и щелкнуть по кнопке «Редактировать».
2
В открывшемся редакторе кликните мышью в том месте текста, где вы собираетесь вставить картинку. Должен появиться мигающий курсор в виде вертикальной черты.
3
В верхней панели визуального редактора найдите иконку, при наведении на которую появится всплывающая подсказка «Вставить изображение», и щелкните по ней. Обычно такая иконка присутствует в виде картинки с деревом.
4
В новом открывшемся окне во вкладке «Параметры изображения» правее поля «Адрес» (в некоторых редакциях - URL) нажмите на кнопку или иконку «Просмотр», - откроется окно управления папкой, в которой по умолчанию сохраняются все загружаемые изображения для вашего сайта. Внизу этого окна присутствуют две кнопки: «Обзор» и «Загрузить». Нажав «Обзор», выберите картинку для загрузки со своего компьютера. Далее щелкните мышкой на кнопку «Загрузить», - выбранная картинка должна появиться в папке сохраненных изображений.
5
Кликните на появившемся новом изображении и нажмите кнопку «Вставить». Картинка должна появиться в том месте текстовой строки, где вы изначально установили мигающий курсор.
6
Если изображение слишком большое и вы хотите сделать его меньше, то выделите мышью только что вставленную картинку и во вкладке «Параметры изображения» найдите строку «Размер» с двумя полями. В первом поле указана ширина картинки в пикселях, во втором - высота. Изменяя и варьируя два эти параметра, добейтесь желаемого результата.

Совет 2: Как вставить картинку в 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
Видео по теме
Обратите внимание
Не загружайте слишком «тяжелые» картинки (до 100-150 Кб - наиболее оптимальный вариант), так как не у всех посетителей вашего сайта может быть скоростной интернет. Изображения по 1-2 Мб могут не дождаться своей подкачки - страница сайта будет закрыта до ее полной загрузки.
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500