На веб-странице можно размещать изображения только в тех графических форматах, которые распознаются браузером. Это форматы GIF, PNG, JPG (JPEG). Мы уже встречались с этими форматами, когда изучали графический редактор GIMP
В перечисленных форматах используется сжатие данных. Если увеличивать степень сжатия, то качество изображения ухудшается, поэтому надо вовремя остановиться.
Давайте теперь обратим внимание на размеры изображения (высота и ширина). Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка.
Если атрибуты не заданы, картинка рисуется в естественных размерах. Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины.
Поэтому рекомендуется всегда записывать эти атрибуты и указывать в них естественные размеры картинки. Если размеры указываются неверно — картинка выводится браузером с искажением.
Среди всех изображений на сайте хочется обратить особое внимание на логотип.
Логотип сайта - небольшое графическое изображение, которое помещается в заголовок сайта. Логотип украшает сайт и привлекает пользователя.
Удобно, если логотип сохранен в формате GIF или PNG на прозрачном фоне. А если вы выбрали формат JPG, то следует сделать растушевку от фона логотипа к фону заголовка сайта
Задача на сегодня: подобрать логотип, разместить его в заголовке, подобрать и обработать изображения, которые будут на страницах сайта
В перечисленных форматах используется сжатие данных. Если увеличивать степень сжатия, то качество изображения ухудшается, поэтому надо вовремя остановиться.
Давайте теперь обратим внимание на размеры изображения (высота и ширина). Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка.
Если атрибуты не заданы, картинка рисуется в естественных размерах. Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины.
Поэтому рекомендуется всегда записывать эти атрибуты и указывать в них естественные размеры картинки. Если размеры указываются неверно — картинка выводится браузером с искажением.
Среди всех изображений на сайте хочется обратить особое внимание на логотип.
Логотип сайта - небольшое графическое изображение, которое помещается в заголовок сайта. Логотип украшает сайт и привлекает пользователя.
Удобно, если логотип сохранен в формате GIF или PNG на прозрачном фоне. А если вы выбрали формат JPG, то следует сделать растушевку от фона логотипа к фону заголовка сайта
Задача на сегодня: подобрать логотип, разместить его в заголовке, подобрать и обработать изображения, которые будут на страницах сайта
Практическая работа с сайтом
- На локальном диске в своей папке по ИКТ создать папку web-img
- Поместить в эту папку все изображения, которые вы хотите разместить на страницах сайта.
- Подробно о том, как выполняются отдельные действия на сайте, читайте ЗДЕСЬ
- В GIMP изменить, если требуется, размеры изображений.
Требования к каждому изображению:- Логотип не болеее, чем 100 х 100 пикселей
- Если на странице одно изображение , то его ширина - не более 400 пикселей
- Если на странице несколько изображений, то ширина - не более 200 пикселей
- Размер каждого файла - 100 - 200 Кб
- Показать папку с изображениями учителю
- Внести изображения в таблицы (загрузить с локального диска):
