Дизайн картинок

Ответы на вопросы

1. В каких случаях для иллюстрации нужна рамка, а в каких нет?

   Ответ. Если иллюстрация имеет фон, совпадающий с фоном страницы, рамка, как правило, не нужна:

   

   Если фон картинки не совпадает с фоном страницы, иллюстрация смотрится как заплата:

   

   В этом случае рамка поможет лучше вписать картинку в страницу:

   

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

   Ответ. Рамку для иллюстрации можно получить следующими способами:

   • кодированием на HTML (атрибут border элемента IMG);
   • кодированием на CSS (свойство border и другие свойства для сложных рамок типа паспарту);
   • нарисовать в графическом редакторе.
3. Зачем нужна подрисуночная надпись?

   Ответ. Подрисуночная надпись позволяет:

   • пронумеровать рисунки, чтобы можно было ссылаться на них в тексте (“пример приводится на рис. 1”);
   • кратко описать содержание рисунка (“Схема сайта с табличной структурой”);
   • обозначить автора и название иллюстрации (“Жизнь прекрасна. Фото А. А. Дуванова”).
4. Какими способами можно задать обтекание рисунка?

   Ответ. Обтекание рисунка можно задать:

   • при помощи атрибута align в теге IMG (align=left — картинка выравнивается по левому краю, остальные элементы обтекают справа, align=right — картинка выравнивается по правому краю, остальные элементы обтекают слева);
   • при помощи стилевого свойства float (float:left — элемент выравнивается по левому краю, остальные элементы обтекают справа, float:right — элемент выравнивается по правому краю, остальные элементы обтекают слева).
5. Какими способами можно прекратить обтекание рисунка?

   Ответ. Если обтекание задано атрибутом align в теге IMG, то прекращение обтекания задаётся атрибутом clear в теге ВК:

   • <BR clear=left> — прекращение обтекания, заданного как align=left;
   • <BR clear=right> — прекращение обтекания, заданного как align=right;
   • <BR clear=all> — прекращение любого обтекания.

   Если обтекание задано свойством float, то обтекание прекращает элемент, для которого задано стилевое свойство clear:

   • clear:left — прекращение обтекания, заданного как float:left;
   • clear:right — прекращение обтекания, заданного как float:right;
   • clear:both — прекращение любого обтекания.
6. По каким причинам может оказаться выгодно разрезать Web-картинку на части?

   Ответ. При подготовки иллюстрации для Web-страницы её разрезают на несколько частей по следующим причинам.

   • Уменьшение килобайтного объёма иллюстрации. Небольшие фрагменты легче оптимизировать. Однотонные участки, участки с чёткими границами, текстовые надписи можно сохранять в формате GIF, минимизируя число цветов в палитре отдельно для каждого фрагмента. При сохранении фрагментов в формате JPEG можно управлять параметром качество/объём отдельно для каждой части. В итоге килобайтный объём оптимизированных кусочков оказывается меньше объема полной оптимизированной картинки.
   • Возможность создания карты ссылок. Отдельные фрагменты общей иллюстрации можно оформить как гипертекстовые ссылки, что особенно полезно, если изображение используется как навигационное меню.
   • Кажущаяся быстрота загрузки. Иллюстрация появляется на экране по мере поступления её частей по сети, и пользователю есть чем занять себя, в ожидании полной загрузки страницы.
7. Как добиться плотного прилегания частей картинок друг к другу?

   Ответ. Для плотного прилегания частей картинки нужно запретить отступы (задать hspace=0 vspace=0 в теге IMG) и убрать пробелы и концы строк между тегами:

     <IMG src="./pic/12100.jpg" width=80 height=70
          hspace=0 vspace=0
          alt="Коза" border=0 align=top
     ><IMG src="./pic/12100.jpg" width=80 height=70
          hspace=0 vspace=0
          alt="Коза" border=0 align=top>
   

8. Как запретить браузеру переносить части картинок на следующую строку в узких окнах?

   Ответ. Запретить перенос строки можно при помощи элемента NOBR или стилевым свойством white-space со значением nowrap:

   <P style="white-space:nowrap">
     <IMG src="./pic/12100.jpg" width=80 height=70
          hspace=0 vspace=0
          alt="Коза" border=0 align=top
     ><IMG src="./pic/12100.jpg" width=80 height=70
          hspace=0 vspace=0
          alt="Коза" border=0 align=top>
   </P>
   

9. Как вывести на экран картинку, части которой составляют несколько горизонтальных рядов?

   Ответ. Для вывода картинки в несколько горизонтальных рядов нужно запретить перевод строки для абзаца, в котором задаётся вывод частей по рядам, а в конце каждого ряда (кроме последнего) использовать элемент BR:

   <P style="white-space:nowrap;
             width:160px;
             border:5px ridge #ccbbaa">
     <IMG src="./pic/12100.jpg" width=80 height=70
          hspace=0 vspace=0
          alt="Коза" border=0 align=top
     ><IMG src="./pic/12100.jpg" width=80 height=70
          hspace=0 vspace=0
          alt="Коза" border=0 align=top><BR>
     <IMG src="./pic/12100.jpg" width=80 height=70
          hspace=0 vspace=0
          alt="Коза" border=0 align=top
     ><IMG src="./pic/12100.jpg" width=80 height=70
          hspace=0 vspace=0
          alt="Коза" border=0 align=top>
   </P>
   

10. Что такое гипертекстовая карта?

    Ответ. Гипертекстовая карта — это неразрезанное изображение, на котором отдельные области оформлены как гипертекстовые ссылки.

11. В каких случаях удобно использовать гипертекстовую карту?

    Ответ. Гипертекстовую карту удобнее всего использовать для разметки электронной географической карты. С помощью многоугольника с большим числом углов можно довольно точно выделить регионы сложной конфигурации.

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

12. В каких случаях использовать гипертекстовую карту не рекомендуется?

    Ответ. Гипертекстовую карту нежелательно использовать в качестве основного навигационного средства, так как ссылки на карте явно не выделены. Кроме того, при отсутствии картинки ориентироваться вслепую на ней становится крайне затруднительно.

13. Как кодируется гипертекстовая карта?

    Ответ. Атрибут usemap="#имя" информирует браузер, что тег <IMG> задаёт не обычную картинку, а гипертекстовую карту. Разметку карты браузер ищет в элементе MAP с атрибутом name="имя". В этот элемент вложены элементы AREA, каждый из которых описывает отдельную область на карте.

14. Области какой формы можно задавать на гипертекстовой карте?

    Ответ. Форма области задаётся в теге <AREA> при помощи атрибута <shape>. Атрибут может принимать следующие значения:

    Атрибут	Что означает
    shape=rect	прямоугольник
    shape=circle	окружность
    shape=poly	многоугольник
    shape=default	оставшаяся область

15. Как подготовить гипертекстовую карту, разрезать изображение на части?

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

Возврат
На начало урока 12