Информатика - Программирование - html - Графика
Возможность использования графики трудно переоценить. Без иллюстраций документ однообразен, вял и скучен. Расчетливо подобранная и правильно размещенная в документе графика делает его визуально привлекательнее. Изображения могут сделать текст вашего документа более содержательным.
Однако во всем нужно чувство меры. Это правило лишний раз подтверждается при просмотре ряда WEB-страниц. Довольно часто встречаются WEB-документы, загроможденные фоновыми изображениями, ничего не выражающей графикой и раздражающей анимацией. Планируя разместить на своей странице то или иное изображение, убедитесь, что оно действительно необходимо.
Общие положения
Для начала рассмотрим общие вопросы, возникающие на первом этапе работы с графическими изображениями на WEB-страницах. Графические файлы могут иметь значительные размеры, что требует времени для их загрузки. Насыщенность графикой может привести к недопустимо большим затратам времени, требуемым для получения документов, особенно, если используется соединение с помощью модема на небольших скоростях.
Следует помнить, что пользователи могут работать с различным разрешением экрана монитора и, различной глубиной цвета. Страницы, хорошо смотрящиеся при одном разрешении, могут выглядеть совершенно по-другому при ином разрешении. Сейчас на многих сайтах просто указывают, что его материалы оптимизированы для разрешения 800х600.
В общем, изображения на WEB-страницах могут использоваться двумя способами: в качестве фонового изображения, на котором располагаются элементы основного документа, и изображения, встраиваемые в документ. Далее будут рассмотрены особенности применения тех и других изображений.
СПОСОБЫ ХРАНЕНИЯ ИЗОБРАЖЕНИЙ
Все форматы хранения графической информации можно разделить на два типа: векторный и растровый.
Файлы векторной графики содержат математические данные о том, как перерисовать изображение с помощью отрезков прямых (векторов) при выводе его на экран. Процесс вывода требует дополнительной обработки, но такое представление графической информации имеет важное преимущество: масштаб изображения может быть изменен без потери качества, так как не существует фиксированной связи между тем, как он определен в файле и выходом точек на экран. При масштабировании растровой графики обычно происходит потеря разрешения, что ухудшает качество изображения.
Векторная графика, как правило, употребляется для изображений с четкими геометрическими формами.
Растровая графика предполагает хранение данных о каждой точке изображения. Для отображения растровой графики не требуется сложных математических расчетов, достаточно лишь получить данные о каждой точке и отобразить их на экране.
На WEB-страницах в подавляющем большинстве случаев используется растровая графика в двух форматах: GIF и JPG.
фоновое изображение
Пример записи тега <BODY> с указанием фонового цвета и фонового изображения
<BODY BACKground=2.gif BGCOLOR=gray>
<html>
<head>
<title>Моя первая страница </title>
</head>
<body text="#336699"BACKground=2.gif bgcolor="#6699CC">
<center>
<H3>Здравствуйте, это моя персональная страница.</H3>
<br>
<font color="#CC0000"> Вот как у меня получилось</font> </center>
<p align="justify">
<br><font color="#FF66FF">Персидская кошка наиболее популярная порода длинношерстных кошек с коренастой (cobby) плотной фигурой, широкой головой и привлекательными круглыми глазами они по-видимому появились почти одновременно в отдаленных гористых районах таких стран, как Персия, Турция и Китай.</font>
<br><font color="#663399">Персидская кошка имеет длинную шерсть с плотными подшерстком и пушистый хвост, так что для них уход за мехом имеет важное значение. Не думайте о покупке персидской кошки, если вы не можете выделять ежедневно время для расчесывания ее меха гребешком. На эту процедуру требуется как минимум пять минут, но это, конечно, вопрос чисто индивидуального подхода. </font>
<br><font color="#FFCC66"><font size="+4"> У некоторых кошек мех сваливается сильнее, чем у других, и для ухода за ними потребуются составы, придающие меху лоск. Некоторые хозяева затрачивают на уход за своими персидскими кошками каждый день от двадцати до тридцати минут. </font></font>
</p>
</body>
</html> посмотреть
Встраивание изображения в html - документы
Для встраивания изображений в HTML - документы следует использовать тег <img>, имеющий единственный обязательный параметр src определяющий URL - адрес файла с изображением. Пример:
<img src="r4.1.jpg">
Вместо r4.1.jpg Вы можете подставить имя любой картинки. Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:
<img src="my/r4.1.jpg">
Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:
<img src="../r4.1.jpg">
Если картинка лежит на другом сайте, то путь прописывается полностью:
<img src="http://www.homepage.ru/my/r4.1.jpg">
Для вашего удобства кладите картинку в ту же папку, что и документ, тогда путаницы будет меньше.
Запомните, тэг - img не требует закрывающего тэга.
<html>
<head>
<title>Моя первая страница </title>
</head>
<body text="#336699"BACKground=2.gif bgcolor="#6699CC">
<center>
<H3>Здравствуйте, это моя персональная страница.</H3>
<br>
<font color="#CC0000"> Вот как у меня получилось</font> </center>
<p align="justify"><img src="r4.1.jpg">
<br><font color="#FF66FF">Персидская кошка наиболее популярная порода длинношерстных кошек с коренастой (cobby) плотной фигурой, широкой головой и привлекательными круглыми глазами они по-видимому появились почти одновременно в отдаленных гористых районах таких стран, как Персия, Турция и Китай.</font>
<br><font color="#663399">Персидская кошка имеет длинную шерсть с плотными подшерстком и пушистый хвост, так что для них уход за мехом имеет важное значение. Не думайте о покупке персидской кошки, если вы не можете выделять ежедневно время для расчесывания ее меха гребешком. На эту процедуру требуется как минимум пять минут, но это, конечно, вопрос чисто индивидуального подхода. </font>
<br><font color="#FFCC66"><font size="+4"> У некоторых кошек мех сваливается сильнее, чем у других, и для ухода за ними потребуются составы, придающие меху лоск. Некоторые хозяева затрачивают на уход за своими персидскими кошками каждый день от двадцати до тридцати минут. </font></font>
</p>
</body>
</html> посмотреть
Как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Все очень просто. Давайте вспомним об атрибуте align, который отвечает за выравнивание. Атрибут align есть и у картинок:
<img src="r1.jpg" align="left">
Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right:
<img src="pr1.png" align="right"
<img src="pr1.png" align="bottom"> - текст располагается внизу картинки (это по умолчанию)
<img src="pr1.png" align="middle"> - текст посередине
<img src="pr1.png" align="top"> - текст вверху
<html>
<head>
<title>Моя первая страница </title>
</head>
<body text="#336699"BACKground=2.gif bgcolor="#6699CC">
<center>
<H3>Здравствуйте, это моя персональная страница.</H3>
<br>
<font color="#CC0000"> Вот как у меня получилось</font> </center>
<p align="justify">
<br> <img src="r4.1.jpg" align="left"> <font color="#FF66FF">Персидская кошка наиболее популярная порода длинношерстных кошек с коренастой (cobby) плотной фигурой, широкой головой и привлекательными круглыми глазами они по-видимому появились почти одновременно в отдаленных гористых районах таких стран, как Персия, Турция и Китай.</font>
<br><font color="#663399">Персидская кошка имеет длинную шерсть с плотными подшерстком и пушистый хвост, так что для них уход за мехом имеет важное значение. Не думайте о покупке персидской кошки, если вы не можете выделять ежедневно время для расчесывания ее меха гребешком. На эту процедуру требуется как минимум пять минут, но это, конечно, вопрос чисто индивидуального подхода. </font>
<br><font color="#FFCC66"><font size="+4"> У некоторых кошек мех сваливается сильнее, чем у других, и для ухода за ними потребуются составы, придающие меху лоск. Некоторые хозяева затрачивают на уход за своими персидскими кошками каждый день от двадцати до тридцати минут. </font></font>
</p>
</body>
</html> посмотреть
Попробуем вставить еще одну картинку и сразу применим к ней правое выравнивание.
<img src="r2.jpg" align="right">
<html>
<head>
<title>Моя первая страница </title>
</head>
<body text="#336699"BACKground=2.gif bgcolor="#6699CC">
<center>
<H3>Здравствуйте, это моя персональная страница.</H3>
<br>
<font color="#CC0000"> Вот как у меня получилось</font> </center>
<p align="justify">
<br> <img src="r4.1.jpg" align="left"> <font color="#FF66FF">Персидская кошка наиболее популярная порода длинношерстных кошек с коренастой (cobby) плотной фигурой, широкой головой и привлекательными круглыми глазами они по-видимому появились почти одновременно в отдаленных гористых районах таких стран, как Персия, Турция и Китай.</font>
<br><font color="#663399">Персидская кошка имеет длинную шерсть с плотными подшерстком и пушистый хвост, так что для них уход за мехом имеет важное значение. Не думайте о покупке персидской кошки, если вы не можете выделять ежедневно время для расчесывания ее меха гребешком. На эту процедуру требуется как минимум пять минут, но это, конечно, вопрос чисто индивидуального подхода. </font>
<br> <img src="r4.2.jpg" align="right"> <font color="#990000"><font size="+2"> У некоторых кошек мех сваливается сильнее, чем у других, и для ухода за ними потребуются составы, придающие меху лоск. Некоторые хозяева затрачивают на уход за своими персидскими кошками каждый день от двадцати до тридцати минут. </font></font>
</p>
</body>
</html> посмотреть
Другие действия параметра align:
TOP - верхняя граница выравнивается по самому высокому элементу текущей строки
TEXTTOP - верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки
MIDDLE - выравнивание середины изображения по базовой линии текущей строки
ABSMIDDLE - выравнивание середины изображения посредине текущей строки
BASELINE или BOTTOM -выравнивание нижней границы изображения по базовой линии текущей строки
ABSBOTTOM - выравнивание нижней границы изображения по нижней границе текущей строки
Все значения параметров выравнивания изображений условно деляться на две группы - по их принципу действия. К одной группе относятся два значения параметра - right и left. При использовали любого из этих параметров мы получаем так называемое "плавающее" изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) обтекают" изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением, может занимать несколько строчек.
К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки.
Дата публикации:
Теги: информатика :: программирование :: основные понятия :: урок по информатике :: конспект по информатике :: лекция по информатике :: html :: графика
Смотрите также учебники, книги и учебные материалы:
Следующие учебники и книги:
- Microsoft Word - Формулы, таблицы, нижние индексы - Практическое задание
- Microsoft Word - Таблицы, колонки, назначение клавиш символам - Практическое задание
- Microsoft Word - Форматирование текста - Практическое задание
- Информатика - Программирование - html - Таблицы
Предыдущие статьи:
- Информатика - Программирование - html - Основные понятия
- Полезный совет - Восстановление ярлыка Свернуть все окна
- Поурочный план - Информатика - Математические и статистические системы
- Поурочный план - Информатика - Создание Web-страниц