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

Откроем страницу default.htm. Для этого выберем пункт Открыть в меню Файл или нажмем комбинацию клавиш <Ctrl>+<O>. На экране появится стандартное диалоговое окно открытия файла Windows; выберем в нем нужный файл и нажмем кнопку открытия. Страница тотчас будет открыта в окне документа.

Посмотрим на главную страницу нашего сайта Чего в ней не хватает? Может быть, стоит выделить каким-то образом заметки, добавленные сегодня?

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

Откроем любой графический редактор, позволяющий сохранять изображения в формате GIF (вполне подойдет поставляющийся в составе Windows простейший редактор Paint). Нарисуем в нем нужную картинку и сохраним ее в файле под именем exclamation.gif в тапке Site1.

Далее поставим текстовый курсор в конце заголовка первой заметки и выберем пункт Изображение в меню Вставка или нажмем комбинацию клавиш <Ctrl>+<Alt>+<I>. На экране появится диалоговое окно Выбрать исходный файл изображения.

Раскрывающийся список папок и список файлов позволят нам выбрать нужную папку и файл. В поле ввода Имя файла появится имя выбранного файла (его также можно ввести туда вручную). Все это нам знакомо по стандартным диалоговым окнам открытия и сохранения файлов Windows. Единственное отличие — справа находится панель предварительного просмотра, где в данный момент выводится содержимое выбранного нами графического файла. (Так, если мы выберем файл exclamation.gif, в этой панели появится красный восклицательный знак.) Панель предварительного просмотра, кстати, можно убрать, сбросив флажок Просматривать изображения.

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

А теперь обратим внимание на раскрывающийся список Относительно. Если выбрать в этом списке пункт Документ, Dreamweaver при создании укажет интернет-адрес файла изображения, которое мы помещаем на страницу, относительно этой самой, текущей, страницы (имя файла, в котором хранится текущая страница, указано правее списка Относительно), т. е. сформирует относительный интернет-адрес. Если же мы хотим, чтобы Dreamweaver сформировал абсолютный интернет-адрес, нужно выбрать в этом списке пункт Корень сайта.

Выберем только что созданный файл, проверим, выбран ли в раскрывающемся списке Относительно пункт Документ, и нажмем кнопку OK

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

Если нам нужно выводить на экран более подробный текст замены, его можно оформить в виде Web-страницы и сохранить в отдельный файл, а потом ввести интернет-адрес этого файла в поле ввода Описание входа в систему. Только вывод подробного текста замены поддерживается не всеми Web- обозревателями. Да и не очень-то он и нужен, честно говоря…

Нажмем кнопку ОК окна Атрибуты специальных возможностей тега Image. После этого выбранное нами изображение будет наконец-то помещено на Web-страницу. Ура!

Сразу же после вставки Dreamweaver выделит это изображение. (Если же оно не выделено, то нужно щелкнуть на нем мышью.) Выделенное изображение окружено тонкой черной рамкой, на правой и нижней границах которой имеются небольшие черные квадратики. Это так называемые маркеры изменения размера. Мы можем «захватить» мышью любой маркер и перетащить его на новое место, изменив тем самым горизонтальный или вертикальный размер изображения. А если нам нужно изменить оба размера пропорционально, мы перетащим мышью маркер, находящийся в правом нижнем углу рамки, удерживая нажатой клавишу <Shift>.

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

Но в нашем случае менять размеры изображения не нужно — оно и так хорошо заметно на странице. Вот если бы мы поместили на страницу слишком большую фотографию — тогда другое дело.

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

Чтобы удалить ненужное или неудачно вставленное изображение, достаточно выделить его щелчком мыши и нажать клавишу <Del>.

Закончим пока с графическими изображениями.

Вы можете оставить комментарий, или поставить трэкбек со своего сайта.

Нет комментариев

(Обязательно)
(Обязательно, не публикуется)

Я пришел к тебе с дискетой - рассказать, что сеть упала
Яндекс.Метрика beget