Презентация на тему Lection_3_1

Презентация на тему Презентация на тему Lection_3_1, предмет презентации: Разное. Этот материал содержит 53 слайдов. Красочные слайды и илюстрации помогут Вам заинтересовать свою аудиторию. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций ThePresentation.ru в закладки!

Слайды и текст этой презентации

Слайд 1
Текст слайда:

Верстка web-страниц

1

Изображения. Часть 1


Титова Ольга Ивановна
Минск, 2017


Слайд 2
Текст слайда:

Содержание

Вставка изображения в HTML-документ
Параметры изображения
Параметры изображения через стили
Фоновое изображение
Оптимизация использования изображений


Слайд 3
Текст слайда:

Вставка изображения

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

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




Слайд 4
Текст слайда:

Параметры изображения

src
Фактически – ссылка на изображение (указывается путь, по которому находится необходимое изображение);

Это может быть просто имя файла, если изображение находится в том же каталоге, что и сам HTML-документ;

Это может быть путь с именем, если изображение находится в другом каталоге или на сервере;



Слайд 5
Текст слайда:

Параметры изображения

alt
Данный параметр содержит текст (альтернативный текст), который будет отображаться, если по какой-либо причине показать картинку будет невозможно.
Например,
“kot
в случае, если изображение kot.jpg нельзя будет отобразить на странице, вместо него появится надпись «kot image»

Следует помнить, что не все браузеры лояльны к данному атрибуту, однако для «чистоты» кода он желателен




Слайд 6
Текст слайда:

Параметры изображения

title
Данный параметр содержит текст, который будет появляться при наведении на изображение указателя мыши, независимо от того, отображается оно на странице или нет.
Например,






Слайд 7
Текст слайда:

Параметры изображения

align
Данный параметр позволяет управлять расположением изображения. Он может принимать следующие значения:
выравнивание по вертикали
top – ориентирование к верхнему краю;
middle – ориентирование по центру;
bottom – ориентирование к нижнему краю;
выравнивание по горизонтали
left – изображение сдвинуть к левому краю;
right – изображение сдвинуть к правому краю.


Слайд 8
Текст слайда:

Пример

top — верхний край объекта выравнивается по верхнему краю строки
align=“top”

middle — центр объекта выравнивается
по базовой линии строки
align=“middle”


bottom — нижний край объекта выравнивается по базовой линии строки
align=“bottom”

left — объект выравнивается по левому краю, при этом возможно обтекание объекта текстом align=“left”

right — объект выравнивается по правому краю, при этом возможно обтекание объекта текстом align=“right”


Слайд 9
Текст слайда:

Параметры изображения

border

Данный параметр позволяет задать толщину рамки, обрамляющей изображение, выраженную в пикселах.

Например,
- рамка вокруг изображения будет отсутствовать




Слайд 10
Текст слайда:

Пример

Например,





Слайд 11
Текст слайда:

Параметры изображения

height
высота используемого изображения в пикселах.
width
ширина используемого изображения в пикселах.
В этом случае используемое изображение будет масштабировано при отображении на странице до указанных размеров.
Например,
- изображение, не зависимо от своих первоначальных размеров, будет изменено до 1000 пикселов в высоту (качество изображения при этом вполне может ухудшиться)


Слайд 12
Текст слайда:

Параметры изображения

hspace
позволяет установить отступ от картинки по горизонтали
vspace
позволяет установить отступ от картинки по вертикали

По умолчанию, текст будет прилегать к изображению вплотную

Например,
- по вертикали до изображения и после изображения будет отступ в 100ед.




Слайд 13
Текст слайда:

Задание

Создайте HTML-документ.
Разместите на странице изображение и задайте ему следующие атрибуты:
- изображение расположено на странице справа;
- по периметру изображения есть рамка произвольной толщины;
- при наведении на изображение мыши появляется небольшое тестовое сообщение;
- изображение по вертикали имеет визуально заметный отступ.




Слайд 14
Текст слайда:

Стили

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


Слайд 15
Текст слайда:

Стили

border – описывает рамку вокруг изображения; задается с указанием трех параметров через пробел: толщина рамки, цвет и стиль; последовательность данных параметров не имеет значения;

Например,
img { border: 5px red solid;}
/ вокруг изображения сплошная рамка красного цвета толщиной в 5 пикселей



Слайд 16
Текст слайда:

Стили

Стиль рамки может быть следующим:
- solid – сплошная линия;
- dotted – пунктирная линия;
- dashed – штриховая;



Слайд 17
Текст слайда:

Например

img
{
border: 10px red dashed;
}

заданное изображение обрамлено красной штриховой рамкой толщиной в 10 пикселов


Слайд 18
Текст слайда:

Стили

border-top – можно задать только верхнюю часть рамки (со всеми тремя параметрами)
border-bottom – можно задать только нижнюю часть рамки (со всеми тремя параметрами)
border-left – можно задать только левую часть рамки (со всеми тремя параметрами)
border-right – можно задать только правую часть рамки (со всеми тремя параметрами)
Например,
img { border-top: 5px red solid;}
/ сверху изображения сплошная рамка красного цвета толщиной в 5 пикселей




Слайд 19
Текст слайда:

Например

описание стиля

результат


Слайд 20
Текст слайда:

Стили

border-width – толщина границы
border-color – цвет границы
border-style – стиль границы

Например,
img {
border-width: 10px;
border-color: #c21e44;
}
задаем толщину линии и цвет линии границы



Слайд 21
Текст слайда:

Стили

Выравнивание (один из способов):
Тег помещается в тег

(

), а для тега

(

) прописываем выравнивание в стилях (например, text-align: center;);
стили можно применить как отдельно к тегу, так и задать для него id/class





Слайд 22
Текст слайда:

Пример





Рисунок по центру













Слайд 23
Текст слайда:

Пример

В данном примере класс fig добавляется к селектору p, а способ выравнивания определяется свойством text-align. Положение рисунка относительно текста схематично показано на рис. -→


Слайд 24
Текст слайда:

Задание

Выполните через использование стилей.
Создайте HTML-документ.
Разместите на странице изображение и задайте ему следующие атрибуты:
- изображение расположено на странице справа;
- по периметру изображения есть рамка произвольной толщины;
- задайте рамке произвольный цвет и стиль.



Слайд 25
Текст слайда:

ВАЖНО

В большинстве случаев не потребуется задавать стиль для самого тега , т.к. этот объект захватит слишком разносторонние элементы веб-страницы – логотип, навигационные кнопки, фотографии и т.п.

Наиболее часто используют стилевые классы или селекторы потомков



Слайд 26
Текст слайда:

Стили

Кроме того к изображениям можно применять следующие CSS-свойства, с которыми мы будем работать более подробно немного позже:

Padding – добавляет пустой промежуток между границей и изображением (внутренние отступы)
Float – перемещение изображения к левому\правому краю с эффектом обтекания изображения другим контентом (плавающее изображение)
Margin – добавляет пустой промежуток между изображением и другим содержимым страницы (внешние отступы)



Слайд 27
Текст слайда:

Графические форматы

Работаем с тремя графическими форматами:
GIF
JPEG
PNG

Каждый из перечисленных форматов обеспечивает хорошее сжатие



Слайд 28
Текст слайда:

Графические форматы

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

Данные изображения содержат максимум лишь 256 оттенков

Область применения: текст, логотипы, иллюстрации с четкими краями, анимированные рисунки, баннеры, изображения с прозрачными участками


Слайд 29
Текст слайда:

Графические форматы

JPEG
Изображения могут содержать миллионы различных цветов;
используют для сжатия изображений специальные алгоритмы, учитывающие то, как человеческий глаз воспринимает смежные значения цветов;
поддерживает технологию «прогрессивный JPEG», когда до полной загрузки изображения появится его более низкокачественный вариант;
не поддерживает прозрачность;

Область применения: преимущественно для фотографий


Слайд 30
Текст слайда:

Графические форматы

PNG

Рациональность использования зависит от версии:
PNG8 – хорошая замена для форматов GIF, т.к. алгоритм сжатия лучше, не поддерживает анимацию
PNG24 и PNG32 предлагают расширенную цветовую палитру, но добавляют «вес»; при этом PNG32 имеет 256 уровней прозрачности (альфа-прозрачности)




Слайд 31
Текст слайда:

Фоновое изображение

background-image
позволяет установить в качестве фона изображение
Например,
div
{
background-image: url(fon_image.jpg);
}
Для отдельного блока (тег

) на html-странице установит фоновое изображение fon_image.jpg, которое размещено в том же каталоге, что и сама страница.


Слайд 32
Текст слайда:

Фоновое изображение

При указании url его заключать в кавычки не обязательно (т.к. в данном случае url прописывается в CSS, а не в HTML)

Т.е. все три следующие варианта будут правильными:
background-image: url(images/bg.gif);
background-image: url(“images/bg.gif”);
background-image: url(‘images/bg.gif’);


Слайд 33
Текст слайда:

Фоновое изображение

Если свойство background-image использовать само по себе, то фоновый рисунок будет в зависимости соотношения между размерами страницы и самого изображения повторяться в виде мозаики.

Для контроля над данной ситуацией применяется свойство background-repeat


Слайд 34
Текст слайда:

Стили

background-repeat

Определяет, будет ли повторяться изображение, если его размеры меньше используемой области; может принимать следующие значения:
repeat – повторяется по вертикали и по горизонтали (по умолчанию)
repeat-x – повторяется только по горизонтали
repeat-y – повторяется только по вертикали
no-repeat – не повторяется





Слайд 35
Текст слайда:

Стили

background-position

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





Слайд 36
Текст слайда:

Стили

Можно работать с двумя наборами ключевых слов.

Управление горизонтальным позиционированием:
left, right, center

Управление вертикальным позиционированием:
top, center, bottom – по вертикали






Слайд 37
Текст слайда:

Пример

Изображение по центру web-страницы:

body {
background-image: url(bg_page.jpg);
background-repeat: no-repeat;
background-position: center center;
}






Слайд 38
Текст слайда:

Стили



left center



center center







right center

left bottom

center top

... и другие комбинации


Слайд 39
Текст слайда:

Стили

ВАЖНО:

При задании повторения для фонового изображения начальная точка (или координата), определяемая свойством background-position будет определять начальную позицию для повторения заданного изображения






Слайд 40
Текст слайда:

Стили

ВАЖНО: ОШИБКИ БРАУЗЕРОВ

К примеру,
Firefox не всегда правильно устанавливает вертикальное позиционирование изображения – при использовании bottom изображение не всегда появиться в нижней части окна браузера если основное содержимое меньше по высоте
Как исправить? Задайте высоту: height:100%






Слайд 41
Текст слайда:

Стили

Точные значения

Кроме того, позиционировать фоновые изображения можно, используя точные значения в пикселах или em.
В этом случае указываем два значения:
1-е задает расстояние от левой стороны изображения до левого края элемента-контейнера
2-е задает расстояние от верхней стороны изображения до верхнего края элемента-контейнера






Слайд 42
Текст слайда:

Стили

Точные значения

Можно использовать отрицательные значения для достижения определенного визуального эффекта – но не злоупотребляя

Не нужно использовать отрицательные значения в целях исправления неверно выполненной верстки







Слайд 43
Текст слайда:

Стили

Процентные значения

Процентное значение рассчитывается относительно соответствующих процентных значений стилизуемого объекта.

Лучше всего – проверить на практическом задании, чтобы представить особенность использования %-х значений для данного свойства







Слайд 44
Текст слайда:

Стили

Фиксация изображения

Когда прокручиваем содержимое веб-страницы, то фоновое изображение прокручивается вместе с контентом.

В ситуациях, когда изображение должно оставаться без прокрутки, нужно использовать свойство background-attachment, которое может принимать два значения scroll и fixed







Слайд 45
Текст слайда:

Пример

body {
background-image: url(images/logo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}







Слайд 46
Текст слайда:

Стили

background-color

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






Слайд 47
Текст слайда:

Пример

body
{
background-image: url(img/font.jpg);
background-color:#2b93a6;
background-repeat: repeat-y;
background-position: right;
}
для фонового изображения страницы будет взят файл font.jpg из папки img;
если изображение по своим размерам будет меньше закрашиваемой области, то остальная часть страницы будет закрашена цветом #2b93a6;
фоновое изображение будет повторяться только по вертикали;
фоновое изображение будет выровнено по правому краю страницы.


Слайд 48
Текст слайда:

Задание

Создайте HTML-документ.
Выберите изображение, повторение фрагмента которого позволило бы создать структурно неделимую фоновую картинку
Для данного изображение через описание стилей выполните следующее:
- задайте его фоновой заливкой;
- задайте повторение по горизонтали;
- для остальной области (не занятой фоновым изображением) подберите и задайте соответствующий по стилю цвет;
- ориентируйте размещение изображения по нижнему краю страницы.




Слайд 49
Текст слайда:

Пример


Слайд 50
Текст слайда:

Оптимизация

Используемые графические изображения по возможности оптимизируйте перед использованием – а именно: дополнительно обрабатывайте в графическом редакторе, подбирайте оптимальное соотношение размера изображения и его качества, продумывайте, какой лучше формат задать графическому объекту;


Слайд 51
Текст слайда:

Оптимизация


Если изображение представляет собой повторяющийся орнамент, однородную заливку или нечто подобное, то не нужно брать его на весь размер закрашиваемого блока html-страницы: возьмите его минимальный фрагмент, повторение которого позволит создать эффект всего изображения и задайте ему параметр повторения (по вертикали, по горизонтали или же по обоим направлениям).


Слайд 52
Текст слайда:

Оптимизация

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

Если поверх изображения будет размещаться текст, то необходимо позаботиться о сохранении читабельности данного текста.


Слайд 53
Текст слайда:

Спасибо за внимание



Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

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


Для правообладателей

Яндекс.Метрика