Како направити замене са више слика у Дреамвеавер-у

Пре него што почнете да креирате сложенији дизајн странице са Дреамвеаверовим понашањем Свап Имаге, погледајте готову страницу. Са понашањем Замени слику, можете да замените било коју или све слике на страници.

Када користите понашање Свап Имаге, важно је да све слике које ћете заменити буду исте величине (висине и ширине). Ако слике нису исте величине, све слике осим прве биће растегнуте или компримоване како би се уклопиле у простор који заузима прва слика уметнута на страницу.

Ако користите понашање Замени слику са низом слика које нису исте висине и ширине, имате неколико опција:

Изрежите веће тако да све слике буду исте величине.

Учините да хоризонталне и вертикалне слике заузму исти простор у вашем дизајну комбиновањем две вертикалне слике за сваку хоризонталну. Једноставно креирајте датотеку у програму као што је Пхотосхоп, уметните две вертикалне слике у исту датотеку једну поред друге, а затим величину те слике тако да датотека буде исте величине као једна хоризонтална слика.

Направите једну сликовну датотеку величине ваше највеће слике, поставите позадину на неутралну боју, на пример црну или белу, а затим убаците све остале слике у позадину тако да их све можете сачувати са истом величином датотеке.

Пратите ове кораке да бисте користили понашање замене слике:

1 Креирајте дизајн странице са свим сликама које желите да се прикажу на почетку.

Свака од три фотографије у дизајну странице за Товер Бридге у ​​Лондону има две копије: једну сличицу и једну већу верзију. Када се страница први пут учита у веб прегледачу, све три сличице се постављају на дно странице, при чему је прва од одговарајућих већих верзија приказана у главном делу непосредно изнад сличица.

2 Именујте своје слике у Проперти Инспецтор.

Да бисте циљали своје слике помоћу ЈаваСцрипт-а, што је начин на који понашања функционишу, прво дајте свакој слици јединствени ИД. ИД слике није исти као назив датотеке слике или текстуална ознака, иако можете користити иста или слична имена. ИД-ови слика не би требало да имају размаке или било какве посебне знакове.

3 Изаберите Прозор→ Понашање.

Отвара се табла Понашање. Панел Понашање можете да превучете негде другде на страници, а можете га проширити превлачењем његовог дна или са стране. Можда ћете желети да затворите све друге отворене панеле да бисте направили више простора кликом на тамно сиву траку на врху било ког панела.

4 Изаберите слику.

Изаберите слику на страници која ће послужити као окидач за акцију.

5Одаберите понашање замене слике.

Када је слика окидача изабрана у радном простору, кликните на знак плус на панелу Понашање да бисте отворили падајућу листу радњи и изаберите радњу коју желите да примените.

6 Одредите слике које желите да замените у дијалогу Замени слику.

На листи Слике изаберите ИД за слику која ће бити замењена. Кликните на дугме Прегледај да бисте изабрали слику која замењује главну слику. Ако слика већ није сачувана у фолдеру локалне локације, Дреамвеавер ће понудити да је копира тамо уместо вас.

7На дну дијалога Замени слику изаберите опцију Прелоад Имагес да бисте наложили претраживачу да учита све слике у кеш када се страница учита.

Ако не изаберете ову опцију, може доћи до кашњења када се користи замена слика.

8Ако желите, поништите избор опције Ресторе Имагес ОнМоусеОут.

Опција Ресторе Имагес ОнМоусеОут значи да када се догађај заврши (као што је када се миш помери са минијатуре за покретање), оригинална слика се замењује. Подразумевано, Дреамвеавер унапред бира ову опцију за понашање промене слике. Можда ћете желети да поништите избор ове опције ако сматрате да замена оригиналне слике сваки пут када пређете курсором преко друге сличице одвлачи пажњу.

9 Након што наведете сва подешавања за понашање, кликните на ОК.

Ново понашање се појављује на панелу Понашања.

10 Наведите догађај за понашање.

Након што се радња примени, можете се вратити и одредити који догађај ће покренути акцију. Подразумевано, Дреамвеавер примењује догађај ОнМоусеОвер када користите радњу Замени слику, али можете да промените тај догађај у било који доступан, као што је ОнЦлицк, који захтева да корисник кликне на слику да би покренуо акцију Замени слику.

11 Примените додатна понашања.

Да бисте применили понашање Замени слику на друге слике на страници, поновите кораке 5–10, кликом да изаберете слику коју желите да послужите као окидач, а затим наведите одговарајућу слику коју треба заменити.

12 Тестирајте свој рад у претраживачу.

Не можете да видите ефекте понашања попут овог док не кликнете на дугме Приказ уживо у горњем левом углу радног простора у Дреамвеавер-у или не прегледате своју страницу у веб прегледачу.