Графика в Web
Использование дескриптора "IMG" для вставки графических файлов. Выравнивания текста относительно изображения. Определение ширины и высоты графических файлов. Плавающие изображения, поля вокруг них. Преимущества использования графики в интернете.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | лекция |
| Язык | русский |
| Дата добавления | 03.04.2019 |
| Размер файла | 15,6 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http: //www. allbest. ru/
Лекция 8. Графика в Web
План
1. Использование дескриптора <IMG> для вставки графических файлов
2. Выравнивания текста относительно изображения
3. Плавающие изображения. Поля вокруг изображений
4. Определение ширины и высоты изображения
5. Обтекание изображений текстом
1. Использование дескриптора <IMG> для вставки графических файлов
Преимущества использования графики
ь Текст разделяется на небольшие фрагменты, что позволяет быстрее усвоить содержание страницы
ь Содержание страницы разбивается на темы, что предоставляет читателю возможность лучше ориентироваться в материале
ь С помощью графических изображений можно дать информацию, которую невозможно получить из текста (фотографии и т.д.)
ь С помощью изображений можно не только сделать страницу цветной, но и придать ей определенное настроение: лирическое, юмористическое и т.д.
Использование дескриптора <IMG> для вставки графических файлов
Встроенные изображения - это графические изображения, которые всегда остаются на одном и том же месте на Web-странице.
Плавающие изображения - выравниваются относительно окружающего их текста. Встроенные изображения как бы продолжают строку текста (если в ней есть место), а плавающие обычно переходят на новую строку.
Чтобы вставить графический файл на Web-страницу, нужно включить гипертекстовую ссылку на него (так же, как при создании гиперссылки на другую страницу). Причем изображение, на которое вы ссылаетесь, может находиться как на том же сервере, на котором расположена ваша страница, так и в любом другом месте Internet.
Для создания URL изображения используется элемент IMG, который имеет следующий синтаксис:
графический файл интернет
<IMG SRC=URL_изображения>/
SRC означает источник (source), т.е. место, где хранится изображение.
Вместо URL_изображения может стоять либо полный URL изображения, либо ссылка на относительный URL графического файла, указывающий на положение файла относительно каталога, в котором находится Web-страница.
2. Выравнивания текста относительно изображения
Web-браузеры ничего не делают для того, чтобы равномерно распределить на странице текст и графику. Вообще говоря, стандартное расположение текста и графики друг относительно друга не всегда является удачным.
Атрибут ALIGN позволяет определить взаимное расположение текста и изображений на Web-странице. Для данного атрибута используется следующий синтаксис:
<IMG ALIGN=значение SRC=URL_изображения>
В таблице приведены некоторые значения атрибута ALIGN
|
Значение |
Результат |
|
|
TOP |
Нижний край текста выравнивается по верхнему краю изображения |
|
|
MIDDLE |
Нижний край текста выравнивается по центру изображения |
|
|
BOTTOM |
Нижний край текста выравнивается по нижнему краю изображения |
По умолчанию в дескрипторе <IMG> атрибуту ALIGN присваивается значение BOTTOM.
3. Плавающие изображения. Поля вокруг изображений
С помощью значений LEFT и RIGHT атрибута ALIGN можно определить, вдоль какого поля должно "плавать" изображение.
Для определения расстояния между текстом и плавающими изображениями, а также между краем окна и изображениями используются атрибуты VSPACE и HSPACE. Атрибут VSPACE служит для определения пустого пространства над и под плавающим изображением, а атрибут HSPACE - для определения пустого пространства справа и слева от плавающего изображения.
4. Определение ширины и высоты изображения
В HTML высоту и ширину изображения можно определить с помощью атрибутов HEIGHT и WIDTH дескриптора <IMG>.
Во время загрузки Web-страниц сначала загружаются все встроенные изображения и только потом - окружающий их текст. Но с помощью вышеприведенных атрибутов можно решить эту проблему.
Если сообщить браузеру размер в пикселях изображений, содержащихся на вашей Web-странице, то браузер сможет подготовить макет страницы и разместить текст до того, как будет окончена загрузка всех изображений. Синтаксис:
<IMG SRC="file.gif" HEIGHT=400 WIDTH=450 ALIGN=LEFT>
5. Обтекание изображений текстом
Для определения способа обтекания текста вокруг изображения используются дескриптор <BR> и атрибут CLEAR. Для того чтобы удалить текст, находящийся справа от изображения, и поместить его под изображением, воспользуйтесь следующей записью:
<BR CLEAR=LEFT>.
Для удаления текста, находящегося слева от изображения, и его размещения под изображением, воспользуйтесь следующей записью:
<BR CLEAR=RIGHT>.
Чтобы удалить весь текст, расположенный слева и справа от изображения, и разместить его внизу, воспользуйтесь следующей записью:
<BR CLEAR=ALL>
Изображение-ссылка - это изображение на Web-странице, щелкнув на котором, можно открыть новую Web-страницу или службу Internet.
Типичный HTML-код изображения-ссылки выглядит примерно так:
<A HREF="URL"><IMG SRC="имя_файла_изображения"></A>
Здесь "URL" - это просто гиперссылка.
В качестве ссылки можно использовать и текст, и изображение, как показано в следующем примере:
<A HREF=Moreinfo.html> <IMG SRC="имя файла изображения"> текст </A>
Еще один полезный атрибут дескриптора IMG, особенно для изображений-ссылок, - это BORDER. По умолчанию изображения-ссылки заключаются в раму шириной два пикселя. Если увеличить рамку, то станет более очевидно, что изображение является ссылкой. Если присвоить данному атрибуту значение "0", то рамка вокруг изображения будет удалена.
Альтернативы изображениям-ссылкам
Атрибут ALT позволяет определить текстовую строку, которая служит альтернативой для браузеров, не поддерживающих графику, или для пользователей, отключивших функцию загрузки изображений. Обычно такой текст отображается в рамке, отделяющей его от остального текста.
<IMG SRC="file.gif" ALT="Описание рисунка">
Практическое задание
В созданные на предыдущем уроке страницы добавьте изображения. Поэкспериментируйте с выравниванием текста относительно изображений.
Размещено на Allbest.ru
...Подобные документы
Суть принципа точечной графики. Изображения в растровой графике, ее достоинства. Обзор наиболее известных редакторов векторной графики. Средства для работы с текстом. Программы фрактальной графики. Форматы графических файлов. Трехмерная графика (3D).
дипломная работа [764,7 K], добавлен 16.07.2011Определение понятия "пиксел", его применение в компьютерной графике, коэффициент прямоугольности изображения. Характеристика файлов с расширениями bmp, gif, jpg, png, pcx, их особенности, достоинства и недостатки. Сравнение форматов графических файлов.
реферат [17,9 K], добавлен 05.04.2009Преобразование графической информации из аналоговой формы в цифровую. Количество цветов, отображаемых на экране монитора. Расчет объема видеопамяти для одного из графических режимов. Способы хранения информации в файле. Формирование векторной графики.
презентация [2,1 M], добавлен 22.05.2012Компьютерная графика. Пиксели, разрешение, размер изображения. Типы изображений. Черно-белые штриховые и полутоновые изображения. Индексированные цвета. Полноцветные изображения. Форматы файлов. Цвет и его модели. Цветовые модели: RGB, CMYK, HSB.
реферат [18,1 K], добавлен 20.02.2009Основные типы графических режимов, условия и принципы их использования. Функции VGA и VESA BIOS. Простые форматы графических файлов, их содержание и специфика. Формат BMP для несжатого RGB-изображения. Особенности формата PCX для 256-цветов изображений.
контрольная работа [33,7 K], добавлен 28.05.2016Характеристика цифровых изображений, применяющиеся в издательской деятельности. Отличительные особенности растровых и векторных изображений, понятие цветового охвата, изучение моделей для описания отраженных цветов. Форматы и виды графических файлов.
контрольная работа [22,9 K], добавлен 16.09.2010Растровая графика, составление графических изображений из отдельных точек (пикселей). Растровые графические редакторы. Векторная графика - построение изображения из простых объектов. Достоинства, недостатки и применение растровой и векторной графики.
презентация [7,8 K], добавлен 06.01.2014Сферы применения машинной графики. Использование растровой, векторной и фрактальной графики. Цветовое разрешение и модели. Создание, просмотр и обработка информации. Форматы графических файлов. Программы просмотра. Компьютерное моделирование и игра.
презентация [661,5 K], добавлен 24.03.2017Растровые и векторные графические редакторы. Формирование изображений, форматы графических файлов. Особенности векторной графики, ее достоинства. Построение треугольника и гиперболы по алгоритму Бразенхема. Математические модели поверхностей и объектов.
курсовая работа [769,5 K], добавлен 21.12.2013Растровые, векторные и комплексные графические форматы. Классификация графических форматов по допустимому объему данных, параметрам изображения, хранению палитры и методике сжатия. Разновидности метода Фурье. Метод преобразования Karhunen-Loeve.
курсовая работа [46,0 K], добавлен 22.12.2014Виды и способы представления компьютерной информации в графическом виде. Отличительные особенности растровой и векторной графики. Масштабирование и сжатие изображений. Форматы графических файлов. Основные понятия трехмерной графики. Цветовые модели.
контрольная работа [343,5 K], добавлен 11.11.2010Виды графических редакторов. Форматы файлов для хранения растровых графических изображений. Среда графического редактора. Панели инструментов и режимы работы графических редакторов. Инструменты редактирования рисунка. Изменение шрифта текста на рисунке.
контрольная работа [246,6 K], добавлен 16.12.2010Архивация и компрессия как методы сжатия изображений. Алгоритмы сжатия данных. Вспомогательные средства, которые используются для понижения объемов файлов: изменение цветовой модели изображения, изменение разрешения растрового файла, ресемплирование.
презентация [45,3 K], добавлен 06.01.2014Определение компьютерной графики, задачи, виды, области применения. Способы распознавания образов, системы технического зрения. Инструменты для синтеза изображений и обработки визуальной информации. Представление цветов, форматы графических файлов.
шпаргалка [49,9 K], добавлен 13.09.2011Современные графические обозреватели. Возможность редактирования графики. Объектно-ориентированное программирование в среде ".NET". Библиотека классов GDI+. Открывание как одного файла, так и директории. Перелистывание файлов при помощи кнопок.
курсовая работа [804,4 K], добавлен 14.11.2015Понятия компьютерной графики, история развития. Краткая характеристика программных пакетов, элементы публикации. Виды текстуры, моделирование энергетических преобразований в системах. Стандарты обмена данными. Векторные форматы графических файлов.
дипломная работа [1,1 M], добавлен 14.12.2013История создания GIMP и особенности программы. Сравнение векторной и растровой графики. Определение основных понятий: цветовые модели, разрешение изображения и его размер. Возможности использования GIMP для открытия файлов и загрузки изображений.
курсовая работа [756,5 K], добавлен 10.11.2011Информация о графических форматах. Хранение изображения в программе. Очередь как вспомогательная структура данных. Загрузка изображения из двоичного файла. Операции с изображением. Уменьшение разрешающей способности. Увеличение размера изображения.
курсовая работа [1,1 M], добавлен 29.06.2013Виды графических компьютерных изображений, принципы их формирования и типы форматов. Пиксель как основной элемент экранного изображения. Основные проблемы при работе с растровой графикой. Сравнительная характеристика растровой и векторной графики.
презентация [521,5 K], добавлен 16.01.2012Технология компьютерной графики, форматы графических файлов. Общие сведения о компании и программных продуктах Adobe Systems Inc, элементы интерфейса. Краткое описание учебника Adobe Photoshop CS3, программное обеспечение, используемое для его создания.
дипломная работа [32,1 K], добавлен 23.06.2010
