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