Занятие 7. Как вставить картинку на сайт

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

Сегодня рассмотрим такие вопросы:
* Как найти картинки для сайта бесплатно, скачать их.
* Бесплатные графические программы для просмотра и обработки картинок.
* Как вставить картинку на сайт.
Как найти картинки для сайта бесплатно, скачать их

Самый простой способ найти картинки для сайта бесплатно - это задать тему картинки в поисковике и нажать кнопку Поиск, затем перейти на вкладку Картинки. Для Яндекса этот процесс выглядит так:

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

2. Переходим на следующую страницу.

3. Справа расположен список разных вариантов данной картинки, на котором указаны размеры картинки и ее вес. Выберите картинку с наибольшим весом. Так вы получите максимально качественное исходное изображение.

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

















5. Теперь появится окно Сохранить как ... Здесь вы можете выбрать удобное место для хранения картинки. 
 

 Бесплатные графические программы для просмотра и обработки картинок

Для  обработки картинок для сайта удобен бесплатный графический редактор Paint.NET. Скачать и установить его вы можете здесь.  

Для корректной работы этой программы нужен еще Microsoft.NET Framework. Его вы также можете скачать по ссылке.

Редактирование. В программе  Paint.NET картинку можно отредактировать: обрезать лишнее, убрать с рисунка ненужные элементы, добавить графические объекты (линии, стрелки, прямоугольники, круги) или текстовые надписи, наложить различные эффекты.

Сохрание готового рисунка. Порядок действий: Файл - Сохранить как... -

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

Рекомендуется загружать картинки весом от 10 Kb до 100 Kb (в основном вес более или менее приемлемой картинки колеблется в пределах 25-40 Kb).

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

Картинка может быть:
большого размера (на все текстовое поле) - 450-500 px;
среднего размера (на половину поля) - 240-300 px;
маленького размера (на четверть поля) - 80-180 px. 









Как вставить картинку на сайт 
 
Чтобы украсить текстовое сообщение иллюстрацией на Главной странице нажмите надпись Добавить новость.
1. Заполните поле Название материала.
2. Введите текст материала и поставьте курсор в том месте, где вы бы хотели разместить картинку.
3. Нажмите пиктограмму (маленький значок) Вставка изображения.






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

 














 В появившемся окне Файловый менеджер нажмите кнопку Создать папку, чтобы создать новую папку novosti. Не забудьте нажать зеленую галочку, чтобы завершить процесс создания папки. 
 








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

 








Теперь в окне Файлового менеджера появилась папка novosti. Щелкните по ней мышкой, а затем нажмите кнопку Обзор.  
 







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












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

 







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








Автоматически вы вернетесь в окно Изображение. Теперь там уже будет автоматически прописан адрес загруженного рисунка. Выставьте Выравнивание - влево, Ширина - 240 рх (высота будет задана автоматически), сделайте Отступ - Вправо - 5 рх (по желанию задайте и другие отступы). Нажмите кнопку Вставить.  
 

 Возле текста появится картинка. Она будет прижата к левому краю, шириной 240 рх и текст справа от нее отступит на 5 рх.

Теперь внимательно прочтем остальные пункты. Обратите внимание, что в нашем способе добавления рисунка через текстовый редактор поля №1, 2, 3 оставляют пустыми.

В поле Теги прописываем ключевые слова из текста (теги).
Нажимаем кнопку Добавить. 

Страница пойдет на загрузку и сохранение на сервер, и через пару минут вы сможете увидеть результат.