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

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

Двумя наиболее часто применяемыми в Интернете графическими форматами являются GIF и JPEG. Формат, разработанный группой JPEG (Joint Photographic Experts Group — Объединенная группа экспертов по машинной обработке фотографических изображений) и получивший ее название, используется, как правило, для сохранения изображений с плавными цветовыми переходами, таких, например, как фотоснимки.

Практически все другие графические элементы сохраняются в формате GIF (Graphics Interchange Format) — формат обмена графическими данными. В настоящее время появился еще один новый графический формат, приобретающий все большую популярность: PNG (Portable Network Graphics — переносимая сетевая графика). Ожидается, что со временем он заменит собой формат GIF. Однако не спешите пересохранять все свои графические файлы в этом формате, пока еще он поддерживается далеко не всеми браузерами.

Все изображения добавляются на веб-страницу с помощью одного и того же тега, называемого тегом источника изображения . Наверное, сейчас уже вы сами можете определить, что данная запись состоит из собственно тега , его атрибута (scr) и значения данного атрибута (место расположения). Однако, поскольку применение атрибута scr является обязательным, удобнее говорить об этой записи как об одном общем теге. Вероятно, вы обратили также внимание, что для тега источника изображения не предусмотрен соответствующий закрывающий тeг. Это отдельный самодостаточный тeг, и потому не забывайте добавлять в его конце закрывающую косую черту: .

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd"> Первые изображения е> Этот рисунок добавлен на мою первую веб-страницу.р>

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

На примере представленного далее НТМL кода показано, как атрибут alt добавляется внутрь тега . Подобно атрибуту src, атрибут alt сообщает веб-браузеру некоторую дополнительную информацию об изображении, и его также всегда можно использовать вместе с тeгом .

Атрибут alt определяет для добавленного на веб-страницу графического элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению. Атрибут alt имеет еще одно очень важное назначение. Многие посетители интернета, использующие каналы доступа с низкой скоростью передачи данных, могут давать указание своим браузерам не загружать и не отображать графическую информацию. Это позволяет им ускорить загрузку веб-страниц на свои компьютеры.

Кроме того, помните, что не все браузеры способны отображать в своих окнах графику. Например, браузер Lynx вообще не поддерживает такой возможности. Таким образом, атрибут alt позволяет веб-дизайнеру быть уверенным в том, что, если посетитель его веб-страницы не увидит на своем экране изображения, он по крайней мере сможет ознакомиться с добавленной к этому изображению текстовой информацией.

Хотя атрибут alt можно определять для каждого тега , следите за тем, чтобы не назначить некоторым графическим элементам несоответствующие им текстовые сообщения. Например, не имеет смысла добавлять альтернативные текстовые надписи к различным элементам внешнего оформления веб-страницы. Чтобы избежать подобных ошибок, можете присваивать атрибуту alt таких элементов пустое значение (alt=» »). Если не задавать значения никаких других атрибутов, браузер воспроизведет изображение в егo исходном размере, выровняв верхний край изображения с верхним краем расположенной рядом текстовой строки. Вы можете изменить оба эти параметра, воспользовавшись тегами стилевых таблиц.

Атрибуты изображения
Для тега предусмотрены атрибуты, позволяющие изменять размер изображения. Некоторые из этих атрибутов перечислены ниже.
height — Указывается в пикселях или процентах — Определяет высоту изображения
width — Указывается в пикселях или процентах — Определяет ширину изображения.

Настройка высоты и ширины изображения
Размеры размещаемого на веб-странице изображения могyт быть заданы с помощью атрибутов height и width. 3начения этих атрибутов задаются либо как фиксированные количества пикселей, либо в процентном выражении относительно размеров страницы. Взгляните на представленный далее код HTML. В первом тегe размеры исходного изображения, которое вы уже видели на предыдущих рисунках этого урока, устанавливаются равными 60 пикселям по вертикали и 60 пикселям по горизонтали. Во втором тегe ширина того же изображения устанавливается равной 6% от ширины страницы, а высота — 10% относительно высоты страницы. На рисунке показано, как оба эти изображения выглядят в окне браузера.

Воспроизводя изображение в своем окне, браузер одинаково хорошо справляется с обработкой значений, заданных как в пикселях, так и в процентах, Помните, однако, о том, что на компьютерах посетителей вашей веб-страницы может быть задано экранное разрешение, отличное от того, которое установлено для вашего монитора. Что из этого следует? Например для монитора задано разрешение 800х600. В предыдущем примере для добавляемого на веб-страницу рисунка была задана ширина на уровне 6% от ширины страницы, которая при таком разрешении составит 48 пикселей. Если просматривать то же изображение на мониторе с разрешением 1024х800, указанным 6% от ширины страницы будет соответствовать уже ширина, равная 61 пикселю.

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

Вы можете создать иллюзию более быстрой загрузки изображения. Независимо от того, изменены размеры изображения или нет, вceгда указывайте значения атрибутов height и width, так как они сообщат браузеру важные сведения о том, сколько места должно быть выделено на странице для размещения данного рисунка. В таком случае браузер сможет обозначить требуемое для изображения пространство и продолжить построение других элементов страницы, не прекращая загрузки самого изображения. Таким способом создается впечатление, будто страница загружается быстрее, поскольку ее посетителям не придется ждать полной загрузки изображения, чтобы увидеть наконец другую представленную на странице информацию.

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

Выравнивание текста и графики
Атрибут align тега позволяет выравнивать изображение по правому (значение right) или левому (значение left) краю текстовой строки. Примеры использования этого атрибута показаны на рисунке.

Этот же атрибут может при меняться и для выравнивания изображения по вертикали (опять-таки относительно текстовой строки). Он может принимать три других значения top, bottom и center. Если атрибуту align присвоено значение top, верхний край изображения выравнивается по верхнему краю любого окружающего его текста. Если атрибуту align присвоено значение bottom, нижний край изображения выравнивается по нижнему краю окружающего его текста. Если же атрибуту align присвоено значение center, центр изображения выравнивается по центру текстовой строки.

Использование изображений в качестве ссылок
Изображения хороши не только для оформления веб-страницы. Их с успехом можно использовать в качестве гиперссылок на другие документы. В HTML данная задача решается просто, поскольку изображения превращаются в гиперссылки точно тем же способом, что и надписи. Для этого необходимо также применить тeг, заключив в него элемент веб-страницы, который должен стать ссылкой на другой документ. Таким образом, если переход по гиперссылке должен осуществляться после щелчка на каком то изображении, в тeг необходимо заключить тeг данного изображения.

а>

В данном случае, после того, как посетитель веб-страницы наведет указатель мыши на это изображение, рядом с курсором отобразится текстовое сообщение «Это мой автопортрет!». После щелчка на изображении будет открыт документ DOС2.htm, на который указывает гиперссылка.

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

а>

Как видите, щелчок на изображении миниатюра.jpg сопровождается открытием файла другого изображения (изображение.jpg). Текстовая строка, заданная как значение атрибута alt, сообщает посетителю, как открыть основное изображение.

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

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

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

Поскольку атрибут alt имеет столь важное значение (ведь его рекомендуется определять для каждого тега , будьте внимательны при его использовании. Следите за тем, чтобы содержание текстового сообщения всегда соответствовало самому изображению, иначе посетители вашей страницы могут быть введены в заблуждение. Это же замечание применимо и в обратном направлении: следите за тем, чтобы изображения соответствовали представленной на веб-странице текстовой информации. Фотоснимок самолета будет уместен на сайте, посвященном авиаперевозкам, и совершенно лишним на сайте, рассказывающем о дикой природе.

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

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

Муниципальное автономное учреждение дополнительного образования «Дворец детского и юношеского творчества» МО г. Братска

Занятие по информатике:

«Размещение графики на HTML -страницах»

Подготовил: педагог дополнительного образования

Груднина Елена Леонидовна

г.Братск - 2016

Тема: «Размещение графики на HTML -страницах»

План урока.

Цель урока: « Познакомить учащихся с правилами размещения графики на html-странице».

Задачи :

образовательная :

познакомить с тем, в каких форматах можно размещать рисунки на html-страницах;

изучить тег размещения графики html-страницах;

разобрать атрибуты графического изображения;

создать небольшой фотоальбом.

развивающая :

формирование умения применять ранее полученные знания;

развитие умения анализировать новый материал;

воспитательная :

формирование у учащихся уважительного отношения друг к другу, умения оценивать труд другого.

Материалы и оборудование урока:

персональные компьютеры;

редактор Блокнот;

карточки с практическими заданиями;

электронные фотографии.

Тип урока : изучение нового материала.

Ход работы.

Организационный момент. Освещение цели и задач урока.

Объяснение нового материала . Для чего размещать фотографии на html-странице? Изображения в каких форматах помещают на страницу? Тег размещения изображения на страницы. Атрибуты.

Совместная работа педагога с учащимися . Выполнение задания по размещению фотографии на странице.

Практическая работа . Закрепление на практике полученных знаний.

Совместное оценивание результатов работы учащихся . Вопросы .

Подведение итогов урока .

Теоретический материал.

Тема: «Вставка изображений в документ».

Тег IMG позволяет оживить нашу страницу графикой. Закрывающий тег не требуется. На Html -странице можно располагать изображения в форматах. gif, . jpg, . png т.е. браузер понимает именно эти графические форматы.

Атрибут src заставит браузер отобразить на странице файл image.jpg из текущей папки.

Обычно графические файлы не смешивают с HTML -текстами, а помещают в отдельную папку, например PIC , которая является подпапкой для папки с программами (html -файлами). Тогда команда вывода графики будет иметь вид:

Html-страницы расположены в отдельной папке, а картинки на уровень выше:

Html-страницы расположены в отдельной папке, а картинки на уровень выше и в отдельной папке:

Изображения с другого сайта:

Атрибуты тега IMG:

left – горизонтальное выравнивание по левому краю;

right - горизонтальное выравнивание по правому краю;

bottom (по умолчанию) вертикальное выравнивание по нижнему краю;

middle – вертикальное выравнивание по центру;

top – вертикальное выравнивание по верхнему краю;

hspace – расстояние между текстом и рисунком по горизонтали (в пикселях);

vspace – расстояние между текстом и рисунком по вертикали;

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

width="…" height="…" параметры, задающие размеры рисунка в пикселях. Эти параметры нужно ставить обязательно, без них браузер будет ждать загрузки всего рисунка, чтобы правильно отобразить фотографию на странице. Мы можем поставить в параметрах произвольные значения. Здесь таится распространенная ошибка, берется фотография, сделанная цифровой камерой с размерами 2048 на 1536 пикселей, после в визуальном редакторе с помощью маркеров уменьшается размер рисунка так, чтобы он занимал положенное ему место на экране, например 300 на 240 пикселей (рисунок 1).

Рис. 1 . Уменьшение фотографии в визуальном редакторе.

border – параметр, задающий ширину границы вокруг изображения. Этот параметр актуален, если рисунок является ссылкой, т.е. заключен в теги , то вокруг него появляется синяя рамка. Если параметр равен нулю, граница будет невидима

Дополнительно:

< BR clear =” left ”> завершить обтекание текстом объекта с выравниванием по левому краю.

Совместная работа с учащимися

Пример1.

Разместить на странице фотографию:

Моё фото » width=100 height=200 border=0>

Пример 2.

Разместить текст на странице перед фотографией и после фотографии. Проанализировать работу атрибутов выравнивания фотографии. Поменять значения атрибутов, установленных в Примере 1.

Практическая работа

Добавьте к своей стартовой странице раздел фотоальбом, в котором разместите несколько (не более пяти) ваших любимых фотографий.

Вопросы:

В каких форматах можно располагать изображения на страницах html?

Тег размещения картинки на странице?

Атрибут выравнивания рисунка на странице?

Что позволяют установить атрибуты hspace и vspace ?

Как можно избавиться от рамки вокруг рисунка?

Атрибуты, позволяющие установить ширину и высоту рисунка. Особенности данных атрибутов?

Тема работы: Размещение графики на Web-странице.

Цель работы: Научиться внедрять в html-документ графические изображения.

Теоретическая часть: Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тега . Использование этого тега позволяет значительно улучшить внешний вид и функциональность документов.

Существует два способа использования графики в HTML-документах. Первый - это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тега:

URL " ALT="text " HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop >

Элементы синтаксиса тега:

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает броузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров.

ALT="text"

Этот необязательный элемент задает текст, который будет отображен броузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство броузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. тег ALT рекомендуется, если ваши пользователи используют броузер, не поддерживающий графический режим, например Lynx.

HEIGTH=n1

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

WIDTH=n2

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

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

С версии HTML 2.0 у тега появились дополнительные параметры:

URL " ALT="text " HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4 HSPACE=n5>

Новые параметры:

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

То же самое, что и VSPACE, но только по горизонтали.

Фоновые рисунки

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

Ход работы :

Размещение графики на Web-странице.

#FFFFFF" TEXT="#330066">

Расписание

занятий на вторник

Самостоятельно внесите изменения в файл schedule. html , опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH. Пример использования атрибутов приведен в таблице ниже:

Атрибут	Формат	Описание
		Надпись "картинка" выводится на экран при подведении указателя мыши к изображению.
		Задает рамку вокруг изображения толщиной 3 пикселя.
		Выравнивает изображение относительно текста по верхней границе текста.
		Вертикальный размер изображения принудительно устанавливается в 111 пикселей.
		Горизонтальный размер изображения принудительно устанавливается в 220 пикселей.
		Атрибут добавляет верхнее и нижнее пустые поля высотой 8 пикселей.
		Добавляет левое и правое пустые поля шириной 8 пикселей.

Фоновое отображение графики на Web-странице

Поместите файл back. jpg в ту же папку, что и schedule. html . Внесите изменения в файл schedule. html :

Расписание

занятий на вторник

На экране вы увидите:

https://pandia.ru/text/78/365/images/image003_82.jpg" width="300" height="197 src=">

Линейки и буквицы

Графические элементы возможно применять в качестве различного вида "украшений". Если Вы придумаете что-нибудь оригинальное, ваша веб-страница будет смотреться необычно и запомнится посетителю. Вот несколько ставших уже традиционными вариантов такого применения графики.
Во-первых , это различные графические разделители, обычно горизонтальные, применяемые вместо горизонтальной черты (

---

).

Вот так он выглядит в окне браузера:

Хотя тег

---

и поддается настройке, графический разделитель вместо

---

часто выглядит лучше:

r. gif" WIDTH="60" HEIGHT="59" BORDER="0" АLТ="В">

В", чтобы пользователю с отключенной графикой не приходилось строить догадки относительно первой буквы.

Разместите в Вашем документе schedule. html разделитель anim_hr. gif. Задайте этому изображению высоту, равную 2 пикселям. Сместите анимированный разделитель в центр документа. В слове Расписание замените букву Р изображением, взять его Вы можете в папке с лабораторными работами (файл r. gif). Изменяя значение атрибута ALIGN, добейтесь наилучшего расположения буквы на экране. Используя любой графический редактор, создайте свое, альтернативное, изображение буквы Р и встройте его в документ.

Графические маркеры.

Язык HTML позволяет создавать маркированные и нумерованные списки.

Пример маркированного списка:

элемент списка

элемент списка

элемент списка

Пример нумерованного списка:

5. элемент списка

6. элемент списка

8. элемент списка

В терминах языка HTML это выглядит так:

элемент списка

элемент списка

элемент списка

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

Сначала надо создать такой треугольник в любой программе либо скопировать уже готовый из папки с лабораторными работами(файл marker. gif).. Этот файл нужно поместить рядом с уже созданным файлом schedule. html . Теперь введем в тег

атрибут STYLE= (этот атрибут подробнее мы рассмотрим при изучении CSS - Cascading Style Sheets):

Ваш список должен выглядеть так:

элемент списка элемент списка... элемент списка

Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки.

Оформление кнопок.

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

Чтобы создать кнопку, поместите в Ваш html-документ следующий код:

ЭТO KHОПKА

В браузере она должна выглядеть так: ЭТO KHОПKА

Между тегами ... можно поместить не только текст, но и изображение. Если мы поместим туда тег , то получим кнопку с графическим изображением.

Скопируйте изображение home-button. gif из папки с лабораторными работами, поместите его в ту же папку, что и файл schedule. html . Замените текст ЭТO KHОПKА на описание тега , указывающего на файл home-button. gif. В тег введите атрибут onClick - этот атрибут позволяет описать действия, которые необходимо отработать браузеру при шелчке мыши по объекту. Обновленный тег должен вылядеть так:

Работа с графикой в процессоре Word может строиться по трем направлениям.

1. Вставка объекта, созданного в другом графическом редакторе (например, Paint, MicrosoftDrawing, Paintbrush и т. д.).

2. Рисование в самом документе (воспользовавшись инстру­ментами панели Рисование).

3. Использование готовых рисунков из коллекции Clipart для оформления текстов.

Ниже мы рассмотрим все перечисленные способы работы по размещению графики в документе.

Запустите Word любым из известных вам способом.

Упражнение1. Вставка объекта, созданного в другом графическом редакторе

Вставка объекта, созданного в другом графическом редакторе, редактирование его после вставки и знакомство со способом оформления подрисуночной подписи.

1.1. Создание графического изображения в графическом редакторе.

1. Запустите графический редактор Paint. Для этого нажмите кнопку Пуск , в пункте Программы выберите Стандартные и щелкните по пункту Paint .

2. Создайте в графическом редакторе какое-либо изображение, например, как показано на рис. 4.1

3. Выделите изображение с помощью кнопки Выделить графического редактора (рис. 4.2).

4. Скопируйте изображение в буфер. Для этого выполните команду Правка ÞКопировать или нажмите горячие клавиши [ Ctrl+ c].

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

1. Перейдите в редактор Word. Если он был запущен, то для этого достаточно щелкнуть на соответствующей пиктограмме в панели задач Windows95. Если вы еще не запустили Word, то сейчас как раз пора это сделать – запустите Word любым из известных вам способов.

2. Вставьте из буфера изображение. Для это установите курсор в то место, где вам необходимо разместить изображение и нажмите кнопку Вставить на панели инструментов. Ваше изображение будет помещено в открытый документ.

3. Щелкните мышью на введенном объекте. Вокруг изображения появляются квадратные «узелки». Если щелкнуть левой кнопкой мыши на таком узелке и удерживать ее, то перемещая мышь можно изменить размер изображения. Установите нужные вам размеры изображения.



Рис. 4.2. Графический редактор Paint и выделенное изображение

1.3. Размещение изображения в тексте.

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

1. Откройте панель Настройка изображения . Для этого выполните команду Вид ÞПанели инструментов ÞНастройка изображения . Перед вами должна появиться панели Настройка изображения .

2. Нажмите кнопку Обтекание текстом . В появившемся меню выберите нужный вам вариант обтекания и щелкните по нему мышью. Например, если выбрать По контору , то при вводе текста он будет располагаться вокруг контура изображение, так как рис. 4.1 в данной инструкции.

1.4. Редактирование изображения.

Для редактирования объекта щелкните на нем дважды мышью. В результате будет запущен редактор, в котором создавалось данное изображение, и в него будет помещено само изображение. Если редактор, в котором создавалось изображение недоступен, то изображение можно изменить с помощью встроенного в Word редактора.

1.5. Создание подрисуночной надписи.

1. Включите панель Рисование . Для этого нажмите кнопку Рисование на панели инструментов.

2. Разместите текстовый блок под рисунком. Для этого нажмите кнопку Надпись на панели Рисование . Поместите курсор мыши под рисунком, нажмите левую кнопку мыши и удерживая ее установите размер текстового блока по ширине, равный размеру рисунка, а по высоте – приблизительно 1 см. В результате вы получите прямоугольный блок, в котором можно размещать текст (рис. 4.3). Если «потянуть» мышью за «узелок» на блоке, то можно изменить размеры блока.

3. Введите подпись к рисунку, например, «Рис.1. Мое творчество ». Надпись необходимо вводить Курсивом .


В группе Заливка в выпадающем списке Цвет установите значение Нет заливки, а в группе Линии в списке Цвет – Нет линий. Щелкните на кнопке ОК. В результате граница вокруг блока исчезнет и сквозь него будет виден текст, даже если блок и перекрывает введенный в документ текст.

5. Установите необходимый режим обтекания рамки текстом. Для этого откройте окно Формат надписи также, как и в предыдущем случае и перейдите на страницу Обтекание. В группе Обтекание щелкните на пункте По контуру и нажмите кнопку ОК.

Если вы все сделали правильно, то у вас получиться точно такой же результат, как и на рисунке справа.

Упражнение 2. Рисование в документе

Панель Рисование редактора Word. Знакомство с инструмента­ми, возможность выбора типа линии, вставка рамки текста, ус­тановка для нее цвета линии и заполнения.

Попробуем начертить обычный параллелепипед (рис. 4.6). Если вы хотите упростить задание, ограничьтесь одним паралле­лепипедом без координатных осей и обозначения вершин.

Прежде чем приступить к выполнению задания, тщательно проанализируйте порядок построения.

Из каких геометрических фигур можно составить этот парал­лелепипед?

Начать можно с прямоугольника ABB 1 A 1 . Вам наверняка за­хочется скопировать его и вставить такой же прямоугольник CC 1 D 1 D, что неверно. CC 1 D 1 D не может быть единой геометри­ческой фигурой, так как состоит из линий разного стиля (сплошные и пунктирные).



Рис. 4.6

Ключ к заданию

Можно предложить следующий порядок построения (все ис­пользуемые кнопки с панели Рисование . Для ее вызова нажмите кнопку Рисование на панели инструментов):

1. нарисовать прямоугольник ABB 1 A 1 ;

2. провести одну из наклонных линий, например, A 1 D 1 ;

3. скопировать A 1 D 1 и вставить три раза ВС, B 1 C 1 и AD;

4. провести линии CC 1 , DD 1 , DC и D 1 C 1 ;

5. выделяя соответствующие отрезки, выбрать Тип штриха – пунктируй;

6. дорисовать координатные оси, выбрав инструмент Линия и стиль - Линия со стрелкой . Для выбора стиля автофигуры, щелкните правой кнопкой мыши над объектом и в появившемся контекстном меню выберите пункт Формат автофигуры . В результате перед вами появится окно Формат автофигуры , в котором можно установить нужный вид фигуры, например, к линии добавить стрелку.

Самый трудоемкий процесс в этом упражнении - обозначе­ние вершин.

Для того, чтобы расположить букву в нужном месте, включите кнопку Надпись на панели Рисование и растяните рамку, пользуясь мышью, до требуемого размера.

Нажав кнопку Цвет линии (рамка должна быть выделена), выберите в предлагаемой палитре Нет Линии, аналогично Цвет заливки - Нет заливки , Ваша рамка стала прозрачной. В ней можно помещать текст (нам нужна всего лишь одна буква - обозначе­ние вершены).

Выделите свою рамку, скопируйте и затем вставьте 10 раз (перед вставкой снимите выделение с исходной рамки).

Новая рамка может, после вставки, поместиться поверх пре­дыдущей. В этом случае кажется, что вставки не произошло, а на самом деле достаточно переместить верхнюю рамку в сторону.

Нижний индекс получается при помощи команды Формат ÞШрифт... если на вкладке Шрифт в группе переключателей Эффекты активизировать Нижний индекс. Перемещаются рамки по листу при помощи мыши.

Чертеж готов.

Желательно представить его в виде единого графического объекта. Для этого, включив кнопку Выбор объектов , растяните пунктирную рамку вокруг всего рисунка (выделите рисунок) и нажмите кнопку Действия , а в появившемся меню, выберите пункт Группировать.

Теперь можно перемещать чертеж целиком по листу.

Мало того, можно изменять его пропорции, если, выделив рисунок, потянуть мышью за узелки (квадратики на рамке выде­ления).

Упражнение 3. Вставка рисунка из коллекции Clipart и размещение поверх него текста

Необычайно простое и эффектное задание.


Рис. 4.7. Окно выбора рисунка коллекции Clipart

2. Измените пропорции и размеры рисунка (аналогично пре­дыдущему заданию).

3. Растяните поверх рисунка рамку текста (Цвет линии - Нет, Цвет заливки - Нет) аналогично тому, как обозначали вершины в предыдущем задании.

4. И, наконец, наберите текст приглашения, сформатировав его по своему усмотрению.

Упражнение 4. Создание визитной карточки

Создадим собственную визитную карточку.Помимовставки рисунков и применения Рамки текста, вы сможете вспомнить все понятия раздела форматирования абзацев. Приве­дем несколько вариантов оформления визитной карточки:

· простая визитка, в форматировании использованы абзац­ные отступы и интервалы, различные типы выравнивания абза­цев, стили оформления шрифтов (упражнение 4.1);

· визитная карточка, созданная на основе рамки из коллек­ции Clipart (упражнение 4.2);

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

Прежде, чем приступить к описанию каждой из них, рассмот­рим общие положения.

1. Размещение на листе.

В зависимости от вида техники, на которой подразумевается в дальнейшем печать вашей продукции, на листе нужно размес­тить либо одну, либо максимальное количество визиток. В лю­бом случае создается одна визитная карточка, а затем тиражиру­ется (через копирование и вставку). Предварительно нужно ус­тановить соответствующие поля документа (рассчитайте опти­мальные поля для размещения максимального числа визиток размером 5х9 см). Перед началом набора текста визитки необ­ходимо создать для него рамку текста определенного размера (можно воспользоваться вставкой неразлинованной таблицы вместо рамки текста). Для этого "растяните" произвольную рамку текста, затем, нажав кнопку Тип линии , выберите 3 пт (в это время рамка должна быть вы­делена). Именно с этой процедуры придется начать работу с лю­бой из предлагаемых визиток.

2. Форматирование текста.

· Выбор гарнитуры шрифта и размера;

· использование различных видов выравнивания текста и от­ступов, разрядки шрифта;

· вставка символов (-,- и проч.);

· обрамление абзацев;

· использование нерастяжимых пробелов для форматирова­ния текста;

· создание рамки при помощи вставки рисунка из коллек­ции Clipart;

· вставка рисунка.

Теперь непосредственно прокомментируем каждый вид ви­зитной карточки.

Упражнение 4.1.Создание визитной карточки с применением абзацных отступов, интервалов, различных типов выравнивания абзацев и стилей оформления шрифта


Упражнение 4.2.Создание визитной карточки, заключенной в рамку из коллекции Clipart

Ключ к заданию

1. Подготовьте Рамку текста заданного размера.

2. В Рамку текста вставлен рисунок из коллекции Clipart (рамка).

3. Текст визитной карточки набирается в Рамке текста, кото­рую вы "растянете" поверх рисунка.

4. Все приемы форматирования повторяют предыдущее зада­ние, только абзац, содержащий фамилию, имеет обрамление снизу Формат ÞГраницы и заливка... и одинаковые отсту­пы слева и справа (чтобы подчеркивающая линия не доходила до самых краев визитки). ^


Упражнение 4.3.Применение элементов обрамления абзацев к оформлению визит­ной карточки

Ключ к заданию

1. Весь текст выровнен по центру.

2. Для набора должности использована разрядка шрифта.

3. Применено обрамление абзацев.

4. Для абзаца, содержащего название организации обрамле­ние снизу двойной линией, для адреса с телефоном рамка (после адреса можно вставить принудительный конец строки).

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

В большинстве Web-страниц встречается графика. Она позволяет красочно и наглядно представить информацию. Во многих случаях лучше показать картинку, чем давать длинное текстовое описание.

Существуют два способа размещения графических изображений на странице:

• вставка отдельных картинок;
• заполнение фона картинкой.

В любом случае графическое изображение берется из файла.

Вставка графических изображений

Вставка на страницу графического изображения из файла графического формата производится с помощью тэга (от англ, image - изображение) с указанием адреса файла в качестве аргумента атрибута SRC:

< IMG SRC = "адрес_графического_файла" >

Адрес графического файла - этолибо URL-адрес, либо имя файла, возможно, с указанием пути. Например, для показа графического файла logotip.jpg следует написать тэг:

< IMG SRC = "logotip.jpg" >

Для увеличения скорости передачи графического изображения в тэге можно использовать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать два графических файла: один (например, пусть это файл logotip.jpg) содержит картинку, полученную с высоким разрешением, а другой (например, logotip.gif) - картинку, полученную с низким разрешением. Тогда тэг:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

…предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере приема заменить его файлом logotip.jpg.

Другой способ ускорения загрузки графики заключается в задании размеров прямоугольной области, в которой будет размещено графическое изображение, с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Заметим, что браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN тэга с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSРАСЕ для верхнего и нижнего полей и НSPACE для боковых полей в тэге . Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тэг
.

Следующий тэг задает обтекание графики из файла logotip.jpg справа (картинка будет находиться слева от текста):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT :

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Чтобы задать поля вокруг картинки, надо написать тэг вида:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Здесь числа 20 и 10 определяют размеры полей.

Рассмотрим пример совместного использования графики и текстов. Откройте Блокнот (текстовый редактор Notepad) Windows. Напишите в нем HTML-код с использованием рассмотренных выше тэгов. Ниже приводится программа, выводящая некоторый текст и графику. В качестве графического файла можно использовать любой из имеющихся у вас файлов. Здесь используется файл logotip.gif.

< HTML >

< HEAD >

< TITLE > Упражнение 1 < / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 > Текст обтекает графику справа < / H1 >

Рис. 657 . Текст обтекает картинку справа

Широкие возможности точного позиционирования изображений (как и других элементов) на странице предоставляют таблицы и стили . Эти элементы HTML будут рассмотрены позже. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.