Инструкция
1
Если вы используете какую либо систему управления сайтом, то очень вероятно, что в ее составе есть редактор страниц. Для начала вам следует открыть нужную страницу в этом редакторе. Дальше - возможны варианты. В самом удачном случае редактор страниц будет иметь «визуальный режим», по-другому - «режим WYSIWYG» (What You See Is What You Get - «что видишь, то и получишь»). В таком режиме вам вообще не нужно будет иметь дело с исходным html-кодом! Страница в редакторе будет выглядеть так же, как и на сайте, достаточно будет ткнуть мышкой в нужное место и нажать на панели редактора кнопку «вставить изображение».
2
В результате откроется диалоговое окно, в котором вам надо выбрать нужную картинку. Если вы ее еще не загружали - здесь же есть кнопка для выбора изображения на вашем компьютере и загрузки его на сервер. Кроме того, в этом диалоге можно задать цвет и ширину рамки вокруг изображения, расстояние и цвет заливки между рамкой и картинкой, текст для всплывающей подсказки. Размеры здесь указывать не обязательно, но из соображений ускорения загрузки страницы и для предотвращения искажения дизайна лучше все же это сделать. Когда все нужные поля диалога заполнены, нажмите «ОК» и затем сохраните отредактированную страницу.
3
Из-за того, что единого стандарта на системы управления не существует, процедура вставки изображения в визуальном режиме вашей системы может немного отличаться, но принцип будет таким же. По этой же причине WYSIWYG-режима может не оказаться в системе управления вашим сайтом. Тогда все же придется редактировать исходный код страницы на языке HTML (HyperText Markup Language - «язык разметки гипертекста»). Вам нужно будет вставить в нужное место кода тег, командующий браузеру показать здесь изображение. В самом простом варианте он должен выглядеть так:<img src="image.gif">Здесь указан «относительный адрес» изображения – по этому адресу браузеру следует обратиться к серверу, чтобы получить от него файл картинки. Если адрес относительный, то браузер будет считать, что файл лежит в той же папке сервера, где и сама страница (или во вложенной папке). Но, чтобы не ошибиться, лучше указывать «абсолютный адрес» - например, так:<img src="http://site.ru/image.gif">Естественно, чтобы сервер мог найти и отдать браузеру изображение, его следует закачать в указанное место. Проще всего это сделать через файл-менеджер, который есть в каждой системе управления сайтом, а так же в панели управления вашей хостинговой компании. Можно сделать это и по ФТП-протоколу (File Transfer Protocol – «протокол передачи файлов»), воспользовавшись специальной программой - ФТП-клиентом. Их много, как платных, так и бесплатных - например, Cute FTP, FlashFXP, WS FTP и др. Но, естественно, установка, освоение и настройка программы потребуют времени, поэтому файл-менеджер для загрузки всего необходимого через браузер – более простой вариант.
4
Кроме адреса в html-теге изображения можно указывать и дополнительную информацию – «атрибуты» тега. Например, атрибут alt содержит текст для всплывающей при наведении курсора мыши на изображение подсказки:<img src="image.gif" alt="Текст о картинке">Его можно заменить атрибутом - title:<img src="image.gif" title="Текст о картинке">--Размер прямоугольника, в котором браузер должен отобразить картинку, задают атрибуты width и height :<img src="image.gif" width="200" height="100">--Атрибут border указывает ширину рамки вокруг картинки (в пикселах):<img src="image.gif" border="2">Если изображение сделать ссылкой, то браузер нарисует вокруг нее синюю рамку. Чтобы от нее избавиться надо значению border присвоить ноль:<a href="http://site.ru"><img src="image.gif" border="0"></a>--Два других атрибута содержат информацию о величине отступов картинки от соседних элементов (от строк текста, других картинок, и т.д.) - hspace задает размер отступа по горизонтали (слева и справа), vspace - по вертикали (снизу и сверху):<img src="image.gif" hspace="5" vspace="6">
Видео по теме
Обратите внимание
Вставка изображения на сайт. На сегодняшнем уроке рассмотрим, как вставлять на страницу сайта изображение. Для того, чтобы вставить какое-либо изображение, картинку, фотографию на страницу сайта, следует использовать тег , имеющий единственный обязательный атрибут src, который определяет адрес файла с изображением.
Полезный совет
Путешествуя по интернету Вы наблюдали на многих сайтах различные картинки, баннеры, графические изображения. Сегодня Мы научимся вставлять изображения на HTML страницу. Само изображение вставляется с помощью тега img src="img/mers1.jpg" где "img/mers1.jpg" – указывает, что наша картинка лежит в папке img а имя файла mers1.jpg. В принципе этого достаточно что бы вставить изображение, остальные параметры не обязательные, но все, же их, следует прописывать иначе наша картинка, может подвергнуться искажениям.
Источники:
- как вставить картинку на сайт
