Веб-компас сайтостроителей
Основы применения графики
Средства применения графики в HTML довольно скудны, и в принципе сводятся к вставке изображений на сайт в виде картинок или фона. Давайте познакомимся с возможностями украсить или придать сайту желаемый внешний вид.
Вставит картинку на страничку веб-сайта тег <img>, при этом, обязательному атрибуту src должно быть присвоено значение в виде имени файла картинки (при необходимости нужно будет указывать и путь к файлу). Например, рисунок ris1.gif находится в каталоге images (сам каталог images находится в том же каталоге, что и страничка веб-сайта), тогда чтобы вставить этот рисунок на сайт, нужно записать следующее
И тогда на месте данного тега браузер отобразит рисунок.
Если в атрибутах width и height тега <img> заданы величины, не совпадающие с реальными размерами картинки, то рисунок будет масштабироваться до указанных значений в атрибутах. При этом если заданы размеры большие, чем существующие размеры рисунка, то рисунок увеличится и качество ухудшится (исказится изображение или появится так называемая сетка). Что конечно не хорошо, поэтому, лучше ставить реальные размеры картинки, хотя исключения все же бывают. Если же размеры картинки в атрибутах будут заданы меньше, чем на самом деле, то рисунок отобразится с заданными размерами, но объем загружаемого трафика будет соответствовать реальному рисунку, то есть пользователь будет зря расходовать свой интернет-трафик. Поэтому лучше будет, сначала уменьшить размеры рисунка до нужных размеров, а потом уже использовать на сайте. То есть получается, в любом случае лучше отредактировать рисунок в какой-либо графической программе до нужных размеров, а потом уже вставлять это изображение на сайт.
Тегом <img> можно вставлять на веб-страничку картинки следующих форматов: jpeg, gif, png. Но браузер Internet Explorer картинки формата png может отображать не совсем правильно, в частности, при отображении бесцветной составляющей изображения могут появляться дефекты.
Например
Чтобы на веб-страничке в качестве фона задать рисунок, нужно в атрибуте background тега <body> указать имя файла изображения. Например
При этом если рисунок меньше окна браузера, то он будет повторяться по горизонтали и по вертикали. Так же нужно учесть вариант, при котором по каким-либо причинам фоновый рисунок не загрузится и не отобразится. И тогда при неблагоприятных совпадениях содержимое веб-страницы может получиться одного цвета с фоном странички и пользователь ни чего не увидит. Чтобы этого не произошло нужно атрибутом bgcolor все того же тега <body> задать цвет фона близкий по оттенку к фоновому рисунку. Например
Вставит картинку на страничку веб-сайта тег <img>, при этом, обязательному атрибуту src должно быть присвоено значение в виде имени файла картинки (при необходимости нужно будет указывать и путь к файлу). Например, рисунок ris1.gif находится в каталоге images (сам каталог images находится в том же каталоге, что и страничка веб-сайта), тогда чтобы вставить этот рисунок на сайт, нужно записать следующее
Код
<img src="images/ris1.gif">
И тогда на месте данного тега браузер отобразит рисунок.
Но кроме атрибута src в теге <img> можно, а, то и нужно использовать следующие атрибуты
- width - определяет ширину картинки, можно задать либо в пикселях, либо в процентах от ширины окна браузера;
- height - определяет высоту картинки, можно задать либо в пикселях, либо в процентах от высоты окна браузера;
- alt - определяет текст, который будет выводиться в прямоугольнике соответствующего размера на месте рисунка, если данный рисунок не будет отображен по каким-либо причинам (пользователь отключил показ рисунков у себя в браузере, произошла ошибка при загрузке рисунка или просто рисунка нет в указанном месте);
- border - определяет толщину рамки вокруг рисунка в пикселях;
- hspace - задает горизонтальный отступ картинки от других элементов веб-страницы в пикселях;
- vspace - задает вертикальный отступ картинки от других элементов веб-страницы в пикселях;
- align - управляет расположением рисунка относительно текста, он может принимать следующие значения:
- "left" - изображение выравнивается по левому краю документа, а текст обтекает рисунок справа;
- "right" - изображение выравнивается по правому краю документа, а текст обтекает рисунок слева;
- "middle" - базовая линия текущей текстовой строки выравнивается с центром изображения;
- "absmiddle" - центр текущей текстовой строки выравнивается с центром изображения;
- "top" и "texttop" - верхняя линия текущей текстовой строки выравнивается с верхней границей картинки;
- "bottom" и "baseline" - базовая линия текущей текстовой строки выравнивается с нижней границей картинки;
- "absbottom" - нижняя граница текущей текстовой строки выравнивается с нижней границей картинки.
- "left" - изображение выравнивается по левому краю документа, а текст обтекает рисунок справа;
Если в атрибутах width и height тега <img> заданы величины, не совпадающие с реальными размерами картинки, то рисунок будет масштабироваться до указанных значений в атрибутах. При этом если заданы размеры большие, чем существующие размеры рисунка, то рисунок увеличится и качество ухудшится (исказится изображение или появится так называемая сетка). Что конечно не хорошо, поэтому, лучше ставить реальные размеры картинки, хотя исключения все же бывают. Если же размеры картинки в атрибутах будут заданы меньше, чем на самом деле, то рисунок отобразится с заданными размерами, но объем загружаемого трафика будет соответствовать реальному рисунку, то есть пользователь будет зря расходовать свой интернет-трафик. Поэтому лучше будет, сначала уменьшить размеры рисунка до нужных размеров, а потом уже использовать на сайте. То есть получается, в любом случае лучше отредактировать рисунок в какой-либо графической программе до нужных размеров, а потом уже вставлять это изображение на сайт.
Тегом <img> можно вставлять на веб-страничку картинки следующих форматов: jpeg, gif, png. Но браузер Internet Explorer картинки формата png может отображать не совсем правильно, в частности, при отображении бесцветной составляющей изображения могут появляться дефекты.
Например
Код
<img src="auto.gif" alt="автомобиль" width="200" height="100" border="0" hspace="10" vspace="10">
Чтобы на веб-страничке в качестве фона задать рисунок, нужно в атрибуте background тега <body> указать имя файла изображения. Например
Код
<body background="images/fonpage.gif">
При этом если рисунок меньше окна браузера, то он будет повторяться по горизонтали и по вертикали. Так же нужно учесть вариант, при котором по каким-либо причинам фоновый рисунок не загрузится и не отобразится. И тогда при неблагоприятных совпадениях содержимое веб-страницы может получиться одного цвета с фоном странички и пользователь ни чего не увидит. Чтобы этого не произошло нужно атрибутом bgcolor все того же тега <body> задать цвет фона близкий по оттенку к фоновому рисунку. Например
Код
<body background="images/fonpage.gif" bgcolor="#aabbcc">
- Статью добавил пользователь
- Категория
- Дата размещения 13.06.2008, просмотров 4056
Еще статьи из данной категории
Предыдущие статьи
Следующие статьи
- нет
Комментарии к публикации
Комментариев к публикации нет...
Добавить комментарий
Новости сайта
-
05.05.2022Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
-
06.04.2020Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
-
12.10.2012С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.