www.wmaster.ru
Wmaster.ru

На главную

Введение в дизайн

СТАТЬИ

Хостинг

DOCS

Коллекция шрифтов

Скрипты

Секреты мастеров

Продвижение сайта

Soft

Журнал Wmaster

Электронные журналы

ФоруМ

web-mastering
HTML
Programming
HTML-редакторы
Учебник по SEO
Apache
MySQL
XML/WML
Flash
Photoshop
.htaccess
Всё для форумов
Clipart
3DSMax
SSI
CSS
Технология раскрутки
Авторское право
Кодовые таблицы
Важное

Windows

Macromedia Dreamweaver MX

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 

Rth77: текстовый комментарий всплывающий при наведении курсором мышки на изображение

Рис. 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).

 

<< назад    оглавление    вперед >>

Партнеры Wmaster
Protoplex.RU
Эскизы татуировок
Поиск по сайту
Объявления
Twitter автора
Карта сайта
Наши баннеры
О проекте

Реклама
(понижение цен)

Об Авторе
Команда
Архив рассылки
 Запомнить эту страницу
Сделать стартовой
Рассылка
Wmaster.ru - всё для вебмастера.
Наша кнопка

Все желающие могут поставить нашу кнопочку к себе на сайт
Всё для веб-мастеров

Партнеры
Бочкарёв Антон
Mail: webmaster[at]wmaster.ru
ICQ: 148780826
Хостинг от Valuehost
© RUscripts.design 2003

© Wmaster Design Group 2001-2008. © Все права защищены. При перепечатке любого материала с сайта  ссылка на http://www.wmaster.ru/  обязательна.