Dreamweaver CS5'te görüntülere nasıl geçiş yapılır?

1. Adım

Seçtiğiniz önceden tanımlanmış lightbox dosyasını indirin ve unzip edin. Bir dizi dört klasör ve bir index.html dosyası bulacaksınız. Klasörler, basamaklı stil sayfalarına sahip dosyalar içeren "css", kullanacağınız fotoğrafların her birinin iki kopyasını içeren "fotoğraflar", biri küçük resim, diğeri tam çözünürlükte "görüntüler", Düğmeler ve kontroller için kullanılan simgeleri ve kullanacağınız Javascript dosyalarını içeren "JS" yi içerir.

2. Adım

Kendi fotoğraflarınızı ve küçük resimlerinizi "fotoğraflar" klasörüne kopyalayın, küçük resimlerde görüntünün adını "thumb_" ile öneklediğinizden emin olun. Örneğin, "car.jpg", "thumb_car.jpg" nin küçük resmine sahip olacaktır. Her resmin ilgili küçük resmine sahip olduğundan emin olun.

3. adım

Web sitenizin yerel kopyasını oluşturmak için ışık kutusunu çalışma dizinine kopyalayın ve web sayfanızı Dreamweaver'da açın. Web sayfanızın küçük resimlerini olmasını istediğiniz yerlere bağlamak için "link görüntüleri" aracı seçeneğini kullanın.

4. Adım

Her küçük resmin üzerine tıklayın ve Dreamweaver uygulamasının öğe özellikleri alanına bakın, o küçük resmin çevresinde bir bağlantı oluşturma seçeneği bulacaksınız. Bu metin kutusunun yanında "dosyaya doğrudan" bir simge var. Oraya tıklayın ve bu küçük resmin görüntüsünde resmi büyüten oku sürükleyin. Her görüntünün küçük resmini bağlayana kadar bu prosedürü tekrarlayın.

Adım 5

HTML dosyasının kod penceresine tıklayın ve başlığa ilerleyin. Kafanın içinde ve şöyle bir etiket yazınız:

6. Adım

Bunun gibi ikinci bir komut dosyası etiketi ekleyin:

Eklediğiniz komut dosyası etiketi "jQuery" araç çubuğunu görüntüler ve belirli javascript kodunu durdurur. Kodun adı, kullandığınız ışık kutusuna bağlı olarak değişebilir.

7. adım

Işık kutusundaki "kanca" işlevini, belirtilen kaynak koddan, şuna benzeyen bir Javascript işlevi içinde ayarlayın:

8. adım

Aşağı kaydırın ve bir etiketi çevreleyen her bir etiketi bulun . Her bir etikete aşağıdaki metni girin:

class = "lightbox"

etiketin kapanışından hemen önce. Örneğin, şöyle olabilirdi:

9. adım

Işık kutusuna eşlik eden CSS dosyasını HTML belgenizin başlığına bağlayın, bunu Dosyalar panelinde Dreamweaver uygulamasının "Stil sayfası ekle" işleviyle yapabilirsiniz. JQuery.css dosyasını bulun ve bağlantı kurun.