Вставка рисунков
Поставьте курсор примерно в то место, где должен быть первый рисунок (в первую или вторую строку левой колонки основного текста).
Выберите команду ВставкаРисунокИз файла
.
В диалоговом окне вставки рисунка (рис. 1) перейдите в папку Общие документыПрактикум по ИТПрактические работы по WordРабота 4
и выберите файл REKL1.GIF
. Перед тем, как нажать кнопку Добавить
, убедитесь, что в окне включен флажок Поверх текста
(рис. 4.1). В режиме «Внутри текста» рисунку нельзя будет назначить обтекание текстом.
Рис. 4.1. Диалоговое окно вставки рисунка из файла
Посмотрите, как выглядит документ. Очевидно, нужно менять формат рисунка.
Выделите рисунок. Возьмите мышью маркер на правом нижнем углу рисунка (для пропорционального изменения размеров) и перетащите маркер так, чтобы уменьшить рисунок до примерно половины ширины колонки.
Теперь задайте обтекание рисунка текстом. Нажмите правую кнопку мыши на рисунке. Из объектного (контекстного) меню рисунка выберите команду Формат рисунка
, затем закладку Обтекание
и вариант По контуру
.
У рисунка справа и снизу есть лишние белые области. Их надо обрезать. Включите панель инструментов Настройка изображения
(команда ВидПанели инструментовНастройка изображения
). Выделите рисунок. На панели Настройка изображения
(рис. 1.13) выберите инструмент Обрезка
. Мышью перетащите маркеры на серединах правой и нижней сторон рисунка так, чтобы удалить белые поля.
Рис. 1.13. Панель инструментов Настройка изображения
Переместите рисунок так, чтобы над ним было две полных строки и немного влево так, чтобы рисунок выступал за текст.
Теперь сделайте так, чтобы расстояние от рисунка до текста было одинаковым: на закладке Обтекание
задайте Расстояние от текста слева / справа
по 0,1 см
.
В Word
рисунки, вставленные поверх текста, автоматические привязываются к одному из абзацев около позиции вставки. Когда рисунок выделен, его точка привязки отображается в виде якоря (если включен показ непечатаемых символов).
При перемещении текста (например, при удалении или добавлении нескольких абзацев) рисунки автоматически перемещаются вместе с текстом. В некоторых случаях это бывает неудобно - например, когда положение рисунков на листе жестко определено.
Чтобы рисунок не перемещался вместе с текстом, снимите у него флажок командой объектного меню Формат рисункаПоложениеПеремешать вместе с текстом
.
На той же закладке диалогового окна (Положение
) установите привязку рисунка не к абзацам текста, а к полям страницы: для свойств Положение по вертикали/по горизонтали
выберите вариант «От поля»
(рис. 1.14).
Рис. 1.14. Параметры положения рисунка, жестко закрепляющие его на странице
Оформление первого рисунка завершено. Для вставки второго рисунка выполните следующие действия:
Добавьте в документ рисунок из файла REKL2.GIF
.
Уменьшите размер рисунка.
Переместите второй рисунок примерно в то место, где он должен быть.
Обрежьте у рисунка белые области.
Нужно, чтобы размеры рисунков были одинаковы. Как это сделать? Выделите первый рисунок и выберите команду Формат рисункаРазмер
. Запишите значения высоты и ширины первого рисунка. Теперь выделите второй рисунок и установите те же самые значения высоты и ширины.
Назначьте рисунку Обтекание
текстом по контуру
.
На закладке Обтекание
установите Расстояние от текста слева
и справа
по 0,1 см
.
Отключите у рисунка флажок перемещения вместе с текстом и на закладке Положение
установите привязку «Положение по вертикали/по горизонтали»
типа «От поля»
(рис. 1.14).
Переместите второй рисунок так, чтобы он накладывался на первый рисунок. Если потребуется, измените размеры рисунков одинаковым способом.
Аналогичным образом вставьте в документ два оставшихся рисунка.
Добавление надписей
В рекламном листе есть две надписи - графических объекта в виде рамок с те
кстом. Внутри объекта-надписи можно поместить любое количество абзацев текста. Надпись является графическим объектом, расположенным поверх текста.
Ниже подробно описано, как сделать надпись в центральной части рекламного листа.
Если панель инструментов Рисование
отсутствует, включите ее (команда ВидПанели инструментов
). Выберите инструмент Надпись
(рис. 1.15) и нарисуйте прямоугольник слева от последнего рисунка. Размеры надписи можно будет изменить в любой момент. Назначьте надписи параметры обтекания текстом так же, как делали это для рисунков.
Рис. 1.15. Кнопка Надпись на панели инструментов Рисование
Внутри надписи напечатайте текст шрифтом 11 пт, полужирный, курсив. Выровняйте абзац по ширине.
Подберите размеры и расположение надписи. На небольшие расстояния выделенную надпись удобно перемещать клавишами курсора.
С помощью объектного меню надписи вызовите окно свойств (щелкните правой кнопкой на рамке
надписи и выберите команду Формат надписи
). В окне свойств на закладке Цвета и линии
установите серый цвет заливки и увеличьте толщину линии обрамления до 1,5 пт
.
Теперь сделайте вторую надпись в нижней части рекламного листа. Слова «Предложения по сотрудничеству» внутрь надписи можете перенести из нижней части документа с помощью буфера обмена (командами ПравкаВырезать / ПравкаВставить
). Выровняйте абзац внутри надписи по центру.
Завершение оформления
Сравните свой документ с образцом в режиме предварительного просмотра. Устраните различия. Если документ не помещается на одном листе, возможно, след
ует уменьшить размеры рисунков и надписей.
За вставку картинок в HTML-документ отвечает тег
и его атрибуты, главным из которых можно считать src
, задающий адрес изображения. Он является обязательным, так как если не указать, где взять рисунок, браузер не сможет узнать, что именно добавлять на страницу.
Простейший случай вставки картинки будет выглядеть так (изображение называется image.png и находится в той же папке, что и HTML-документ):
Раньше у тега
был ещё один обязательный атрибут - alt
, но с приходом HTML 5 он был переведён в разряд желательных. alt
устанавливает текст, который пользователь увидит вместо картинки, если она вдруг не загрузится. Этот атрибут рекомендуют добавлять и некоторые оптимизаторы, потому как считается, что это положительно сказывается на продвижении в поисковиках.
Если не указывать изображению никаких дополнительных атрибутов, то оно будет выведено в полный размер, а нужно это бывает далеко не всегда. К счастью, желаемый размер рисунку можно задать при помощи атрибутов width
(указывает ширину) и height
(определяет высоту). Размеры можно записывать либо в пикселях, либо в процентах. Во втором случае процент обозреватель будет высчитывать от родительского элемента (например, абзаца, в который вставлена картинка).
Допустим, нам требуется добавить на страницу изображение image.png
с альтернативным текстом «Просто картинка», шириной 420 и длиной 280 пикселей. Код в таком случае будет следующим:
Навигационная карта
О том, как сделать картинку ссылкой, мы говорили в предыдущей статье. Однако HTML позволяет задавать на одном изображении не одну ссылку, а сразу несколько. В результате пользователь, щёлкая на разные места одной картинки, будет переходить по разным интернет-адресам. Эту возможность можно использовать, например, для создания эффектного меню, интерактивных тестов или наглядных графических моделей.
Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:
- - контейнер, внутри которого описывается карта изображения.
-
- тег внутри , описывающий одну область картинки. На сколько активных областей планируется разделить изображение, столько элементов
и придётся поставить. Связка -
работает точно так же, как связки
--
и --
, создающие списки.
- shape
- атрибут тега
, задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.
- cords
- определяющий координаты области атрибут. Также принадлежит тегу
. Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника - координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.
- usemap
- атрибут тега img
, который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере описана карта именно этого рисунка.
Пример карты изображения
Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg
. Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.
1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:
2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).
3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:
4. С помощью тегов area определяем активные области:
5. Закрываем карту:
Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:
Навигационная карта