Урок №6. Изображения.

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

Форматы.
Фоновое изображение.
Вставка изображения.
Размеры.
Отступы.
Альтернативный текст.
Изображение как ссылка.


 

Форматы.

Все знают, что изображения, это неотъемлемая часть любого сайта. Изображения везде, куда не глянь. В данном уроке Вы научитесь работать с ними. Для начала разберемся в форматах изображений.

В сайтостроении чаще всего использую два формата GIF и JPEG, но мы разберем еще два формата PNG-8 и PNG-24, которые имеют и свои достоинства.

   Формат GIF

        Особенности

  1. Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры.
  2. Файл в формате GIF может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет проглядывать сквозь «дыры» в изображении.
  3. Поддерживает покадровую смену изображений, что делает формат популярным для создания баннеров и простой анимации.
  4. Использует свободный от потерь метод сжатия

        Область применения

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

Формат JPEG

    Особенности

  1. Количество цветов в изображении — около 16 миллионов, что вполне достаточно для сохранения фотографического качества изображения.
  2. Основная характеристика формата — качество, позволяющее управлять конечным размером файла.
  3. Поддерживает технологию, так называемый прогрессивный JPEG, в котором версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.

        Область применения

Используется преимущественно для фотографий. Не очень подходит для рисунков содержащих прозрачные участки, мелкие детали или текст.

Формат PNG-8

        Особенности

  1. Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своем названии цифру восемь. При этом можно выбирать, сколько цветов будет сохраняться в файле — от 2 до 256.
  2. В отличие от GIF, не отображает анимацию ни в каком виде.

        Область применения

Текст, логотипы, иллюстрации с четкими краями.

Формат PNG-24

        Особенности

  1. Использует примерно 16,7 млн. цветов в файле, из-за чего этот формат применяется для полноцветных изображений.
  2. Поддерживает многоуровневую прозрачность, это позволяет создавать плавный переход от прозрачной области изображения к цветной, так называемый градиент.
  3. Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пикселы в изображении неизменными, если сравнивать с другими форматами, то у PNG-24 конечный объем графического файла получается наибольшим.

        Область применения

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


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

Фоновое изображение, это цвет или картинка для элемента для которого оно задано. Применяется для любых блочных элементов от тела документа и до абзаца.
Что бы задать фоновое изображения или цвет, используют атрибуты:

Background – задает фоновой рисунок для используемого элемента.

Bgcolor – задает фоновой цвет, для используемого элемента.

Сейчас Вы зададите фоновый рисунок для тела документа, следуйте примеру:

<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body background="../img/fon.gif" >

       <p>Содержание документа</p>

     </body>

   </html>

Вид в браузере:

Пример фонового рисунка для тела документа

А в этом примере, Вы зададите фоновый цвет для тега body:

<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body bgcolor="red">

       <p>Содержание документа</p>

     </body>

   </html>

Вид в браузере:

Пример фонового цвета для тела документа

Но ведь мы хотим, что бы все было правильно, так ведь? Поэтому все, и я в том числе, советую прописывать как рисунок, так и фоновый цвет. Это связано с тем, что у человека, который зашел на ваш сайт может быть отключена загрузка картинок в браузере, в таком случае, он будет видеть фоновый цвет. Согласитесь, удобно адаптироваться под пользователя, и для Вас плюс и человеку удобно.


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

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

Посмотрим детальней на примере:

<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body>

       <img src="../img/lion.png">
       Cодержимое документа

     </body>

   </html>

Вид в браузере:

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

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

Для таких случаев существует тот самый атрибут align. Вы изучали его ранее, вспоминайте.

Пример кода:

<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body>

       <img src="../img/lion.png" align="left">
       Данная картинка размещена по левую сторону, а текст обтекает изображение справа.

     </body>

   </html>

Вид в браузере:

Выравнивание картинки на странице

Но кроме привычных значений атрибута align, для изображений не редко используют такие значения как:

 

      align="top" – при данном значении, изображение стает частью строки текста. Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
    align="texttop" — верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки).
    align="middle" – при таком параметре середина изображения выравнивается по базовой линии текущей строки.
    align="bottom" – изображение выравнивается по нижней границе. Текст будет расположен возле нижней части картинки.

Пример кода с align="top":
<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body>

       <img src="../img/lion.png" align="top">
       при данном значении, изображение стает частью строки текста. Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. 

     </body>

   </html>
Вид в браузере: Выравнивание картинки align= Пример кода с align="texttop":
<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body>

       <img src="../img/lion.png" align="texttop">
       - верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки). 

     </body>

   </html>
Вид в браузере: Пример выравнивания картинки align=
Пример кода с align="middle":
<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body>

       <img src="../img/lion.png" align="middle">
       – при таком параметре середина изображения выравнивается по базовой линии текущей строки. 

     </body>

   </html>
Вид в браузере: Пример выравнивания картинки с атрибутом align= Пример кода с align="bottom":
<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body>

       <img src="../img/lion.png" align="bottom">
       изображение выравнивается по нижней границе. Текст будет расположен возле нижней части картинки. 

     </body>

   </html>
Вид в браузере: Пример выравнивания картинки с помощью атрибута align=


Бывают случаи, когда нужно что бы текст был непосредственно под картинкой. В таком случае нам понадобится тег <br> с атрибутом clear, который запрещает обтекание.

Обтекание можно запретить как для левой(clear="left"), так и правой(clear="right") стороны, а еще лучше запретить обтекание совсем(clear="all").

Пример кода:
<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body>

       <img src="../img/lion.png">
       <br clear="all">Так гораздо лучше, правда? 

     </body>

   </html>
 

Вид в браузере:

Пример атрибута clear




 

Размеры.



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

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

width – ширина изображения.
height – высота изображения.

Данные параметры можно задавать как в пикселях, так и в процентном соотношении картинки к окну браузера.
При неправильном указании размеров изображения картинка может быть искажена, так что будьте осторожны.

Пример:
<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body>

       <img src="../img/simba.png">
       <img src="../img/simba.png " width="50" height="50">
       <img src="../img/simba.png " width="25" height="25">

     </body>

   </html>
 

Вид в браузере:

Пример ширины и высоты картинки  


 

Отступы.



Как видно из ранее предоставленных примеров, текст почти вплотную размещен возле изображения. Для таких случаев и существуют горизонтальные и вертикальные отступы. Используются в качестве атрибута тега <img>

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

Пример:
<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body>

       <img src="../img/simba.png" align="left" hspace="20" vspace="20">
       В данном примере текст не прилегает вплотную к изображению.

     </body>

   </html>
 

Вид в браузере:

Пример вертикальных и горизонтальных отступов картинки  


 

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

Эта возможность как раз для того случая, когда у пользователя в браузере, отключена загрузка изображений на странице. Вместо картинки он увидит соответствующий знак (в каждом браузере она разная), предупреждающий о том, что здесь должно быть изображение. Что бы пользователь понимал, что на ней изображено, существует атрибут alt.

С помощью этого атрибута, вместо картинки (если она не загружена) будет высвечен текст, указанный разработчиком сайта. Но даже при отображении картинки на сайте, атрибут будет работать.

Пример:

<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body>

       <img src="../img/simba.png" alt="львенок">
       <img src="../img/simba1.png" alt="львенок">

     </body>

   </html>

Вид в браузере:

Пример атрибута alt


Изображение, как ссылка.

Часто разные картинки используют в качестве ссылок. Для этого достаточно изображение заключить в теге ссылки .

Пример:

<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body>

       <a href="../primer/primer_6_13.html" target="_blank" title="Вид в браузере">
       <img src="../img/simba.png" alt="львенок">
       </a>

     </body>

   </html>

 

Ну вот, теперь вся картинка используется как ссылка. Заметили что-то?

Я говорю о рамке, которая появилась вокруг ссылки-картинки. Если Вы желаете убрать рамку, просто пропишите атрибут border="0".

Это значит, что рамка вокруг вашей ссылки будет равна 0, то есть ее не будет.

А если наоборот, вам необходима рамка большей толщины, пропишите тот же атрибут, но уже с нужной цифрой.

Пример кода:

<!doctype html>

   <html>

     <head>

       <title>Урок №6</title>

     </head>

     <body>

       <a href="../primer/primer_6_13.html" target="_blank" title="Вид в браузере">
       <img src="../img/simba.png" alt="львенок">
       </a>

       <img src="../img/samba.png" alt="львенок" border="4">

     </body>

   </html>

 

Вид в браузере:

 

Пример атрибута border

 

Ах да, в зависимости от браузера, рамка вокруг ссылки не всегда отображается. Так что обдумайте, нужна ли вам она или нет.

На этом все. До встречи на следующем уроке.

 


 

Закрыть меню