Как да създадете суапове с множество изображения в Dreamweaver

Преди да започнете да създавате по-сложен дизайн на страница с поведението на Dreamweaver Swap Image, погледнете готовата страница. С поведението за размяна на изображение можете да замените всяко или всички изображения на страница.

Когато използвате поведението за размяна на изображение, важно е да направите всички изображения, които ще размените, с еднакъв размер (височина и ширина). Ако изображенията не са с еднакъв размер, всички изображения с изключение на първото ще бъдат разтегнати или компресирани, за да паснат на пространството, заето от първото изображение, вмъкнато в страницата.

Ако използвате поведението за смяна на изображението с поредица от изображения, които не са с еднаква височина и ширина, имате няколко опции:

Изрежете по-големите, така че всички изображения да са с еднакъв размер.

Направете хоризонталните и вертикалните изображения да заемат едно и също място във вашия дизайн, като комбинирате две вертикални изображения за всяко хоризонтално. Просто създайте файл в програма като Photoshop, вмъкнете две вертикални изображения в един и същи файл едно до друго и след това оразмерете това изображение, така че файлът да е със същия размер като едно хоризонтално изображение.

Създайте един файл с изображение с размера на вашето най-голямо изображение, задайте фона на неутрален цвят, като черен или бял, и след това вмъкнете всички други изображения на фона, така че да можете да ги запазите всички със същия размер на файла.

Следвайте тези стъпки, за да използвате поведението за размяна на изображение:

1 Създайте дизайн на страница с всички изображения, които искате да се показват първоначално.

Всяка от трите снимки в дизайна на страницата за Тауър Бридж в Лондон има две копия: една миниатюра и една по-голяма версия. Когато страницата се зареди за първи път в уеб браузър, и трите миниатюрни изображения са разположени в долната част на страницата, като първата от съответните по-големи версии се показва в основната област точно над миниатюрите.

2 Дайте име на вашите изображения в Property Inspector.

За да насочите изображенията си с JavaScript, което е начинът, по който работи поведението, първо дайте на всяко изображение уникален идентификатор. Идентификационният номер на изображението не е същият като името на файла на изображението или текстовия маркер, въпреки че можете да използвате същите или подобни имена. Идентификаторите на изображения не трябва да съдържат интервали или специални знаци.

3 Изберете Прозорец→ Поведения.

Отваря се панелът Поведения. Можете да плъзнете панела „Поведения“ другаде на страницата и можете да го разширите, като плъзнете долната или отстрани. Може също да искате да затворите всички други отворени панели, за да направите повече място, като щракнете върху тъмносивата лента в горната част на всеки панел.

4 Изберете изображение.

Изберете изображението на страницата, което ще служи като задействане на действието.

5Изберете поведението за размяна на изображението.

Когато изображението за задействане е избрано в работното пространство, щракнете върху знака плюс в панела Поведения, за да отворите падащия списък с действия и изберете действието, което искате да приложите.

6Определете изображенията за размяна в диалоговия прозорец Размяна на изображение.

В списъка Изображения изберете идентификатора за изображението, което ще бъде заменено. Щракнете върху бутона Преглед, за да изберете изображението, което замества основното изображение. Ако изображението все още не е запазено в папката на локалния сайт, Dreamweaver ще предложи да го копира там вместо вас.

7В долната част на диалоговия прозорец Смяна на изображението изберете опцията Предварително зареждане на изображения, за да инструктирате браузъра да зареди всички изображения в кеша, когато страницата се зареди.

Ако не изберете тази опция, може да възникне забавяне, когато се използва размяната на изображения.

8Ако желаете, премахнете отметката от опцията Възстановяване на изображения при MouseOut.

Опцията Restore Images OnMouseOut означава, че когато дадено събитие приключи (като например когато мишката се премести от задействащата миниатюра), оригиналното изображение се заменя. По подразбиране Dreamweaver предварително избира тази опция за поведението на Swap Image. Може да искате да премахнете избора от тази опция, ако установите, че подмяната на оригиналното изображение всеки път, когато преместите курсора върху друго миниатюрно изображение, разсейва.

9След като посочите всички настройки за поведението, щракнете върху OK.

Новото поведение се появява в панела Поведения.

10 Посочете събитие за поведението.

След като действието бъде приложено, можете да се върнете назад и да посочите кое събитие ще задейства действието. По подразбиране Dreamweaver прилага събитието OnMouseOver, когато използвате действието за размяна на изображение, но можете да промените това събитие на всяко налично, като например OnClick, което изисква потребителят да щракне върху изображението, за да задейства действието за размяна на изображението.

11 Прилагайте допълнително поведение.

За да приложите поведението за размяна на изображението към други изображения на страница, повторете стъпки 5–10, като щракнете, за да изберете изображението, което искате да служите като задействане, и след това укажете съответното изображение, което трябва да бъде разменено.

12 Тествайте работата си в браузър.

Не можете да видите ефектите от поведение като това, докато не щракнете върху бутона Live view в горния ляв ъгъл на работното пространство в Dreamweaver или не прегледате страницата си в уеб браузър.