↑ Вернуться > Основы HTML

Размещение графических изображений

Сегодня трудно увидеть Web — сайт , не содержащий хоть какой  ни будь графики. Подобранные графические изображения не только делают сайт эффективнее и привлекательнее, но и порой заменяют собой множество слов.

Чтобы грамотно создавать изображения и правильно их использовать при Web — проектировании, нужно знать несколько основных приемов, используемых в этой технологии.

До недавнего времени в World Wide Web были наиболее распространены только два формата графических файлов — GIF  и  JPG. Теперь все большую заслуженную популярность получает сравнительно новый вид формата -PNG.

Растровое (точечное) изображение — это изображение, которое воспринимается, как набор множества отдельных точек, составляющих полную картину. Фотографии, сделанные цифровой камерой, отсканированные рисунки, а также рисунки, созданные в некоторых графических программах все это примеры растровых изображений.

Каждый из приведённых форматов обладает своими недостатками и преимуществами, например качество изображений формата PNG выше, чем в GIF, но к сожалению, некоторые старые версии браузеров не поддерживают PNG формат. Иногда необходимо преобразовывать графические изображения одного формата в другой, например, для уменьшения размера файла.

Web — страницы можно рассматривать как многоуровневые слои. Так как графическое изображение может быть размещено на одном уровне с текстовым объектом , следует установить определённые правила сосуществования на одной  Web — странице текста и графики. Это значит, что для изображений обязательно нужно задавать правильные размеры, параметры обтекания графики текстом, рамки вокруг изображения и т.д.

У дескриптора изображения нет закрывающего дескриптора.

<img src=»roma.jpg»>

<img src=»roma.gif»>

<img src=»roma.png»>

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

Чтобы создать альтернативный текст, используются дескриптор <img> с обязательным атрибутом src плюс alt.  Значение атрибута alt и указывает текст, который будет отображаться в качестве всплывающей подсказки либо отображаться рядом с пиктограммой графического изображения.

Например:

<img src=» roma.jpg» alt=»Цветы»>
Вот как это выглядит.(В нашем случае мы не стали загружать файл, но при загрузке файла и при наведении мышки на это изображение — выражение «Цветы» будит появляться.)
Цветы
 

Фотосъёмка

Свадеб
Love-story

Ведение бухгалтерского
учета

Бухгалтерский учёт

Сайт о еде.

Основы питания
Основы здоровой пищи.

 

Сайт о еде.

Основы питания
Основы здоровой пищи.

Подготовим документы
из судебного дела

Ознакомление дел в суде

Ведение бухгалтерского
учета

Бухгалтерский учёт

 

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

Выравнивание изображения на Web странице. Все Web браузеры выравнивают рисунки Web страницы по нижнему краю текста. Для того чтобы изменить такое расположение графики относительно текста, необходимо воспользоваться значением атрибута align. Значение атрибута align с вертикальным положением фрагмента относительно графического изображения. Применение атрибута align со значением top приводит к тому , что текст выравнивается по верхней границе …

Смотреть страницу »

Изменение размеров изображения

Если не добавлять к дескриптору img значения, задающие размеры вставляемого на Web страницу графического изображения, то Web браузер отобразит данное изображение на весь экран.  Задавать размеры графического изображения необходимо по нескольким причинам. Во — первых, изображения нормально выглядит на Web — странице Во — вторых, Web браузер быстрее открывает такую страницу, так как ему не …

Смотреть страницу »

Обрамление графического изображения

Чтобы добиться оригинальности и четкости изображения, сделать его более контрастным на фоне страницы, тем самым визуально выделив графику, рекомендуется заключить изображение в цветную рамку. Для создания рамки вокруг изображения используют атрибут border. Определение значения данного атрибута, такие как толщина рамки, цвет и прочее, позволяют сформировать ее внешний вид. При этом надо следить за тем, чтобы …

Смотреть страницу »

Использование рисунков в качестве ссылок

Использование рисунков в качестве ссылок. Графические изображения, размещённые на Web странице, могут не только украшать её и нести какую-то дополнительную к текущему тексту смысловую нагрузку, но и  использоваться в качестве оригинальных гиперссылок на другие HTML-документы. Например: <h4>Еда -как путь к долголетию</h4> <a href=»rom.htm»> <img src=»eda.jpg» height=»250″ width=»400″ alt=»Еда — как путь к долголетию»> </a> Вот, …

Смотреть страницу »

Создание фоновой графики

Графическое изображение можно не только помещать на Web- страницу, но и использовать его в качестве фоновой заливки в качестве всей страницы. Удачно подобранный цветной рисунок, занимающий все окно Web браузера, придаст сайту эффективный внешний вид. Главное учитывать такой факт, не следует выбирать темные тона для фоновых изображений. Чтобы снабдить Web страницу графическим фоном, принимают атрибут …

Смотреть страницу »

Построение горизонтальной линейки

Создание горизонтальной линейки. Чтобы визуально разделить группы элементов Web страниц, не связанные по смыслу, либо подчеркнуть какие-то фрагменты текста или заголовки, используют горизонтальные линейки. Для создания линеек используют дескриптор <hr>. По умолчанию Web браузер создаёт линейки чёрного цвета толщиной 2 пикселя. Определённые атрибуты дескриптора <hr> позволяют назначить линейке любой желаемый цвет, толщину, длину и выровнять …

Смотреть страницу »

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *