Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ПРОЕКТ № 4 - пятница.docx
Скачиваний:
1
Добавлен:
27.08.2019
Размер:
1.19 Mб
Скачать

Урок 11. Работа с изображениями.

Содержание урока:

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

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

Размеры изображений

Отделение изображения от текста

Альтернативный текст

Изображение в качестве ссылки

Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства. Как правило, все изображения для сайта хранятся в отдельной папке, например, images. А пути к изображениям прописываются также, как в ссылках. Если забыли посмотрите здесь. Во всех последующих примерах пути к изображениям будут прописаны, исходя из того, что картинки находятся в папке images, а страницы в папке site, находящейся на том же уровне. Фоновые изображения Фоновое ихображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге <body>атрибут background="fon.gif", рисунком fon.gif будет залито все окно браузера. Пример кода:

<html>

<head>

<title>Фоновое изображение</title>

</head>

<body background="../images/fon.gif" bgcolor="pink">

Здесь содержание документа

</body>

</html>

Результат смотрите здесь Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor. Это связано с тем, что у пользователя может быть отключена загрузка изображений и вашего красивого фона он не увидит. Тогда браузер и будет использовать параметр bgcolor. Встраивание изображений Для размещения на странице изображений используется тег <img>, имеющий единственный обязательный параметр src, определяющий URL-адрес изображения. Пример кода:

<html>

<head>

<title>Тег img</title>

</head>

<body>

<img src="../images/fish.gif">

Остальное содержимое документа

</body>

</html>

Результат:

Остальное содержимое документа

Согласитесь, текст рядом с картинкой выглядит не очень красиво. Для того, чтобы наши изображения выглядели так, как нам хочется их надо выровнять. И поможет нам в этом параметрalign. У этого параметра есть несколько значений. Рассмотрим их все на примерах. Пример кода с параметром align="left"

<html>

<head>

<title>Тег img с параметром align="left"</title>

</head>

<body>

<img src="../images/fish.gif" align="left">

Картинка слева, а текст обтекает ее справа и

этот текст может занимать несколько строчек.

</body>

</html>

Результат:

К артинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек.

Пример кода с параметром align="right"

<html>

<head>

<title>Тег img с параметром align="right"</title>

</head>

<body>

<img src="../images/fish.gif" align="right">

Картинка справа, а текст обтекает ее слева и

этот текст может занимать несколько строчек.

</body>

</html>

Результат:

К артинка справа, а текст обтекает ее слева и этот текст может занимать несколько строчек.

Пример кода с параметром align="top"

<html>

<head>

<title>Тег img с параметром align="top"</title>

</head>

<body>

<img src="../images/fish.gif" align="top">

Верхняя граница изображения выравнивается по самому

высокому элементу текущей строки. Изображение

как бы встраивается в строчку. Если изображение

большое, то и строка раздвигается на эту высоту.

</body>

</html>

Результат:

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

Пример кода с параметром align="texttop"

<html>

<head>

<title>Тег img с параметром align="texttop"</title>

</head>

<body>

<img src="../images/fish.gif" align="texttop">

Верхняя граница изображения выравнивается

по самому высокому текстовому элементу

текущей строки (заглавная буква строки).

</body>

</html>

Результат:

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

Пример кода с параметром align="middle"

<html>

<head>

<title>Тег img с параметром align="middle"</title>

</head>

<body>

<img src="../images/fish.gif" align="middle">

<font size=7>Выравнивание</font>

середины изображения по

базовой линии текущей строки.

</body>

</html>

Результат:

 Выравнивание середины изображения по базовой линии текущей строки.

* крупный шрифт сделан для наглядности разницы между middle absmiddle  Пример кода с параметром align="absmiddle"

<html>

<head>

<title>Тег img с параметром align="absmiddle"</title>

</head>

<body>

<img src="../images/fish.gif" align="absmiddle">

<font size=7>Выравнивание</font>

середины изображения посередине текущей строки.

</body>

</html>

Результат:

 Выравнивание середины изображения посередине текущей строки.

Пример кода с параметром align="bottom"

<html>

<head>

<title>Тег img с параметром align="bottom"</title>

</head>

<body>

<img src="../images/fish.gif" align="bottom">

<font size=7>Выравнивание</font>

нижней границы изображения по базовой линии

текущей строки.

</body>

</html>

Результат:

 Выравнивание нижней границы изображения по базовой линии текущей строки.

Пример кода с параметром align="absbottom"

<html>

<head>

<title>Тег img с параметром align="absbottom"</title>

</head>

<body>

<img src="../images/fish.gif" align="absbottom">

<font size=7>Выравнивание</font>

нижней границы изображения по нижней границе

текущей строки.

</body>

</html>

Результат:

 Выравнивание нижней границы изображения по нижней границе текущей строки.

Если же мы хотим, чтобы текст располагался под картинкой, то необходимо использовать тег <br> с параметром clear, который запрещает обтекание. Обтекание можно запретить с правой стороны (right), с левой стороны (left) и с обеих сторон (all). Пример кода:

<html>

<head>

<title>Запрет обтекания картинки</title>

</head>

<body>

<img src="../images/fish.gif">

<br clear="all"> Остальные элементы документа

</body>

</html>

Результат:

Остальные элементы документа

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Оставленные комментарии видны всем.