Вставка изображения и редактирование его свойств. Для вставки картинки следует воспользоваться кнопочкой с изображением картинки на панели "Objects". После нажатия этой кнопки вы автоматически обозреваете свою рабочую директорию на предмет пригодных для употребления картинок. Если картинка находится за

<Ьоф> <img> 79Б х 472_т21 ЄК / GO sec dfe в ‘Л CD S О¹

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

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

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

Удалять эти параметры тоже нежелательно - это уменьшит, конечно, размер кода, но в то же время увеличит время загрузки страницы, т.к. браузер не сможет корректно отформатировать текст, пока не загрузит графику. Далее идут параметры src (путь к рисунку) и link (следует заполнять, если рисунок является гиперссылкой).

Dreamweaver не вставляет автоматически рамку вокруг рисунка, являющегося ссылкой. Если вы хотите, чтобы рисунок был обведен рамкой определенной толщины, независимо от того, является он ссылкой или нет, следует установить соответствующее значение параметра border (поле border в правой нижней части панели). В правом верхнем углу панели доступны параметры align (выравнивание рисунка относительно текста) и alt (альтернативный текст). В левой нижней части панели можно сделать из своего рисунка image map -мультиссылку (просто выбираете соответствующую фигуру и рисуете части image map на картинке).

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

Далее идут параметры hspace и vspace - вертикальный и горизонтальный отступ от текста. Далее target - задание окна, в котором будет открываться гиперссылка (для рисунка, не являющегося гиперссылкой, недоступно), далее параметр Low Src (копия рисунка с низким разрешением), поле border и кнопки настройки выравнивания абзаца

(если рисунок находится не в теге-контейнере <р> </р>, а непосредственно в теле страницы, нажатие этих кнопок создает для рисунка тег-контейнер <div> </div> с соответствующим выравниванием). Правый нижний угол занимают кнопки "Refresh" (применить измененные параметры) и Edit (вызывает Fireworks - графический редактор, иногда поставляющийся вместе с Dreamweaver, но если рисунок не в формате png, то в Fireworks окажется довольно сложно его редактировать).

Примечание: CSS и DHTML, весьма корректно реализованные в 3-ей версии Dreamweaver, позволяют применять к рисунку дополнительные эффекты (анимированное появление на странице, полное скрытие и появление по нажатию кнопки "Показать" и т.д.) и фильтры, реализуемые браузером (размытие, прожектора и др.), которые также могут накладываться в виде анимации, но это тоже отдельная песня.

⇐Разметка текста | TeachPro WEB-дизайн | Создание простого web-сайта⇒