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

Преходите на изображения се обработват чрез свързани Javascript файлове.

Стъпка 1

Изтеглете файла с предварително определена светлинна кутия по ваш избор и го разархивирайте. Ще намерите серия от четири папки и файл index.html. Папките са "css", която има файлове с каскадни стилови листа, "снимки", която съдържа две копия от всяка от снимките, които ще използвате, една с миниатюри, друга с пълна разделителна способност, "изображения" Той съдържа иконите, използвани за бутоните и контролите, и "JS", който съдържа Javascript файловете, които ще използвате.

Стъпка 2

Копирайте свои собствени изображения и миниатюри в папката "photos", уверете се, че в миниатюрите предварително името на изображението е "thumb_". Например, "car.jpg" ще има миниатюра на "thumb_car.jpg". Уверете се, че всяко изображение има съответната миниатюра.

Стъпка 3

Копирайте светлинната кутия в работната директория, за да направите локалното копие на уебсайта си и отворете уеб страницата си в Dreamweaver. Използвайте опцията "Изображения за свързване", за да свържете миниизображенията на уеб страницата си с местата, където искате да бъдат.

Стъпка 4

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

Стъпка 5

Кликнете върху прозореца на кода на HTML файла и превъртете до заглавката. Вътре в главата и напишете етикет, който изглежда така:

Стъпка 6

Добавете втори маркер на скрипт, както следва:

Маркерът на скрипта, който добавите, показва лентата с инструменти "jQuery" и спира специфичния javascript код. Името на кода може да варира в зависимост от светлинната кутия, която използвате.

Стъпка 7

Задайте функцията "кука" във вашия lightbox от дадения изходен код, във функцията Javascript, която изглежда така:

Стъпка 8

Превъртете надолу и намерете всеки етикет, който заобикаля етикета , Въведете следния текст във всеки етикет:

class = "lightbox"

малко преди затварянето на табелата. Например, може да е така:

Стъпка 9

Свържете файла CSS, който придружава светлинната кутия, до заглавката на вашия HTML документ, можете да направите това с помощта на функцията "Прикачи стилов лист" на Dreamweaver в панела "Файлове". Намерете файла jQuery.css и го свържете.