5.1. Macromedia DreamWeaver MX. Графика. Часть1
Практически не один веб сайт не обходится сейчас без графики, поэтому о ней мы сейчас и поговорим. Начнем мы с создания фона для страницы, фоном у меня будет файл bg22.gif (Рис. 5.01).
Рис. 5.01
Создайте новую страницу в редакторе (File - New) и кликнете на вновь созданной странице правой кнопкой мышки. В контекстном меню выберите пункт "Page Properties". В открывшемся окне, (Рис. 5.02)
Рис. 5.02
помимо всего прочего, вы сможете задать фон вашей страницы. Если в качестве фона вы просто хотите задать какой-либо цвет, - то воспользуйтесь для этого пунктом "Background" (кликнув левой кнопкой мышки по относящемуся к этому пункту квадратику). И в раскрывшейся палитре выберите нужный вам цвет (Рис. 5.03)
Рис. 5.03
Если же вы хотите в качестве фона использовать какой-либо графический файл, - то при помощи кнопки "Browse" поля "Background Image" укажите путь до интересующего вас графического файла.
Для того что бы вставить рисунок на страницу на вкладке "Common" рабочего окна программы нажмите кнопку "1" (Рис. 5.04)
Рис. 5.04
И в открывшемся окне укажите путь до графического файла, который вы хотите вставить. После того, как изображение вставлено, - кликните по нему левой кнопкой мыши и перейдите вниз рабочего окна программы к панели "Properties" (Рис. 5.05)
Рис. 5.05
Теперь остановимся подробней на этой вкладке.
Поля V и H - задают размер изображения по горизонтали и вертикали, если вы оставите их пустыми, тогда изображение загрузится в броузере с реальными размеры (также, реальные размеры выставляются автоматически при добавлении изображения на страницу в среде DreamWeaver )
Поле Src - в этом поле указывается путь к файлу, а при клике по значку "папки" откроется диалоговое окно (проводника) для выбора изображения.
Поля ввода V Space и H Space - задание вертикального и горизонтального отступа от изображения .
Поле Alt - текстовый комментарий всплывающий при наведении курсором мышки на изображение. Наведите курсор на рисунок 5.06
Рис. 5.06
Этот же текст отобразится на месте графического файла, если например ваш броузер не поддерживает графику или у вас отключена функция "Отображать рисунки".
Поле Low Src - загружает вспомогательный рисунок пока не загрузится основной. Пользоваться этим полем следует если вы размещаете на своих страницах слишком весомые изображения, которые долго грузятся.
Поле Bolder - задает толщину рамки вокруг изображения.
Теперь перейдем к выпадающему меню "Align" (Рис. 5.07)
Рис. 5.07
Все эти пункты предназначены для указания расположения изображения относительно страницы и текста.
Пункт Default - по умолчанию, если вы не изменяли значения установленные по умолчанию, значит этот пункт будет полностью соответствовать пункту BaseLine.
Пункт BaseLine - низ рисунка совпадет с базовой линией текста. Пример
Пункт Top - верх изображения совпадет с верхом текста. Пример
Пункт Middle - середина рисунка совпадает с базовой линией текста. Пример
Пункт Bottom - низ изображения совпадает с низом текста . Пример
Пункт TextTop - верх изображения совпадает с верхом самого Высокогосимвола текста. Пример
Пункт Absolute Middle - середина рисунка совпадает со средней линией текста. Пример
Пункт Absolute Bottom - низ рисунка совпадает с низом самого низкого символа. Пример
Пункт Left и Right - прижимают изображение к левому и правому краю страницы соответственно. Пример
Любое изображение может использоваться в качестве гиперссылки, для этого лишь достаточно ввести интернет адрес в поле "Link" панели "Properties". (Рис. 5.08)
Рис. 5.08
Причем ссылку вы можете дать как на адрес электронной почты, так и на другую веб страницу. Во втором случае у вас станет доступным список "Target"
Изображение можно сделать активным, реагирующим на наведение на него курсором мышки - Rollover. Для этого вам нужно будет запастись двумя изображениями, которые будут сменять друг друга, и на вкладке "Common" нажмите кнопку "1" (Рис. 5.09)
Рис. 5.09
В открывшемся окне вам нужно будет заполнить требуемые поля (Рис. 5.10)
Рис. 5.10
В поле Image Name - укажите оригинальное имя активного изображения, причем в имени могут быть только латинские буквы (с буквы должно начинаться любое активное изображение) и цифры (пренепременно арабские!-:)
В поле Original Image - введите путь до основного изображения, того, которое будет первым загружаться на странице.
В поле Rollover Image - введите путь до "изображения - эффекта", - это изображение будет появляться только при наводе курсора мыши на ваше активное изображение.
Поставьте флажок в поле Preload Rollover - в этом случае оба рисунка сразу будут загружены броузером и выполнение эффекта начнется сразу же при наведении мышки. В противном случае (при отключенной галочке), при наведении на такое изображение мышки - броузер начнет загрузку второго изображения ... и медленный какой-то эффект получится.
В поле Altemate Text - введите текстовый комментарий всплывающий при наведении курсором мышки на изображение.
Ну а в поле Go To URL - интернет адрес.
Пример активного изображения Пример
И последнее о чем я еще не сказал - это изображения-карты (Map). |
