Вставка графических изображений в 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