Размещение графики на Web-странице. Форматы графических файлов. Размещение графики в документе Вставка графических изображений

Работа с графикой в процессоре 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-странице.

Цель работы: Научиться внедрять в 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 :

Учебный файл 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А

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

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