Вставляем картинки в шаблон сайта, редактируем изображения

Вставляем картинки в шаблон сайта, редактируем изображения

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

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

Как правило все картинки сайта лежат в папке images (image, im).

Код, который выводит картинку, в HTML коде выглядит так:

Упрощенные варианты:
1. <img src="images/photo.jpg" />

2. <img src="images/photo.jpg" width="200" height="250" />
images - папка в которой лежит картинка
photo.jpg - сама картинка, ее наименование
width - ширина в px (пикселах)
height - высота в px (пикселах)

Наиболее расширенный вариант:
3. <a href="index.html"><img src="images/photo.jpg" width="200" height="250" alt="Текст если картинка тормозит" title="Всплывающий текст" /></a>

Здесь добавлены дополнительные атрибуты: alt и title.

Значение alt является важным для поисковых систем, в смысле правильности написания кода (валидность).
Текст этого атрибута виден в браузере в том случае, если есть проблема с отображением картинки или во время ее долгой загрузки.
Не отображаться картинка может по многим причинам, одни из них:
- в браузере пользователя отключены картинки (увеличивает скорость открытия страниц);
- тормозит хостинг-провайдер или подключение Интернета пользователя;
- ошибка, допущенная Вами, при указании пути к папке, в которой лежит изображение и т.д.

Значение title используется для всплывающей текстовой подсказки при наведении курсора мыши на картинку.

Активация картинки в качестве гиперссылки:
Если код картинки окутан тегами <a href="index.html">......</a>, то это делает ее гиперссылкой, см. вариант 3 выше.
Нажимающий на нее будет отправлен по адресу, который указан в href=.

При редактировании шаблона сайта обратите внимание на путь, где размещена картинка:
<img src="photo.jpg" /> - находится на одном уровне (в одной папке) с файлом;
<img src="images/photo.jpg" /> - лежит в папке images;
<img src="../images/photo.jpg" /> - файл, который имеет такой путь к картинке, находиться глубже на один уровень от корня сайта.

Пример: в файле, который находится по адресу /mail/mail.html ссылка на картинку будет выглядеть так: <img src="../images/photo.jpg" />


Подобные пути являются (называются) относительными.

Можете указывать абсолютные пути (полный путь с http), допустим:
<img src="http://Ваш-сайт.ru/images/photo.jpg" />,
это проще, но у себя на компьютере Вы сможете видеть картинки лишь при подключенном Интернет соединении.

Размеры картинок должны соответствовать атрибутам: width="200" height="250". Если Вы изменили размер изображения, но оставили его атрибуты прежними, то изображение будет искаженным.
Следите за названием картинок, прописанном в коде и картинок, подготовленных к публикации, они должны быть одинаковы.
Также следите за их форматом: jpg, jpeg, png, gif... Форматы jpg, jpeg являются одинаковыми по сути, но разными при отображении в коде.

Размер и объем картинок, по возможности, должен быть наименьшими. Размер влияет на скорость открытия страниц сайта. При повторных открытиях и переходах по сайту скорость увеличивается за счет кеширования браузером или сервером хостинга (файл CSS), но тем не менее важен эффект быстрой работы сайта при первом знакомстве с ним посетителя.

Если Вы работаете с Photoshop, то при сохранении картинок используйте: "Файл - Сохранить для Web и устройств...", после чего выберите оптимальное значение.

Автор: Saah | Просмотров: 5 874 | 1-08-2013,Чт, 18:31  

Похожие публикации

Добавить свой комментарий:

@